🤖 fix: render Browser Preview crisply on HiDPI displays

[ibetitsmike]

Summary

Fix the Browser Preview panel rendering pixelated/blurry on HiDPI (Retina) displays by capping the rendered frame at naturalSize / devicePixelRatio CSS pixels, so one stream bitmap pixel is never stretched past one physical display pixel.

Fixes#3115

Background

Browser Preview frames come from agent-browser's stream server, which captures via CDP Page.startScreencast. That capture is bounded by the remote session's CSS viewport size (in DIPs): deviceScaleFactor never raises the bitmap above CSS resolution, and older agent-browser versions additionally capped frames at 1280x720. Xum is a passive session viewer and cannot increase capture resolution.

PR #3396 stopped upscaling frames beyond their intrinsic size in CSS pixels. On a HiDPI display that is still up to devicePixelRatiox physical upscaling: a 1280x720 bitmap rendered at 1280 CSS px covers 2560 physical px on a 2x Mac, which is exactly the "renders at 1x DPI and gets scaled up" blur reported in the issue.

Implementation

• New useDevicePixelRatio hook (useSyncExternalStore + a self-re-arming matchMedia resolution listener) so the cap tracks monitor moves and zoom changes.
• BrowserViewport caps the frame <img> with inline max-width/max-height: min(100%, naturalSize/dpr px). A smaller-but-crisp centered preview is preferred over fill-and-blur; at 1x displays behavior is unchanged.
• Pointer-input mapping (mapDomPointToViewport/getRenderedFrameRect) mirrors the cap (min(1, 1/dpr) scale bound) so clicks, drags, and wheel events land correctly; the metadata-only fallback branch is untouched.

Validation

• bun test src/browser/features/RightSidebar/BrowserTab/ (58 pass, including new DPR mapping + component cap tests)
• make static-check
• Remote dogfood UAT on this exact head (PASS): at emulated dpr=2 the img caps at min(100%, 1080px) for a 2160px frame and letterboxes crisply when the cap binds; at dpr=1 behavior is unchanged; click mapping accurate to ~2px, gutter clicks ignored, wheel + typing forwarded.

Risks

Low. Display sizing and input mapping change only when devicePixelRatio > 1; capture side and bridge protocol untouched.

---

Generated with xum • Model: anthropic:claude-fable-5 • Thinking: xhigh

[ibetitsmike]

@codex review

[chatgpt-codex-connector]

Codex Review: Didn't find any major issues. You're on a roll.

Reviewed commit:07da4814ee

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".