Skip to content

fix(agent): preserve preview backgrounds across breakpoints#207

Merged
DavidBabinec merged 1 commit into
mainfrom
fix/agent-preview-backgrounds
Jul 11, 2026
Merged

fix(agent): preserve preview backgrounds across breakpoints#207
DavidBabinec merged 1 commit into
mainfrom
fix/agent-preview-backgrounds

Conversation

@DavidBabinec

Copy link
Copy Markdown
Contributor

Summary

  • preserve authored HTML/body/template classes, inline styles, safe attributes, and ancestor paint in Agent screenshots instead of replacing transparent/background pixels with white
  • render every requested configured breakpoint through a deterministic exact-width transient frame without changing Design/Live mode, the active breakpoint, or collapsed-frame state
  • wait for template rows, loop data, media metadata, fonts, and DOM settling before capture; keep readiness metadata outside authored DOM and serialize parallel transient requests
  • rasterize the full document context for both full-page and node-scoped evidence, then crop node captures without losing ancestor backgrounds
  • document the updated evidence and iframe-body ownership contracts

Why

The previous capture path forced a white clone background and rasterized too narrow a root, while the real iframe body did not consistently receive the authored body presentation. Snapshot selection also depended on whichever breakpoint frame happened to be mounted, which produced wrong or unavailable evidence in Live mode, collapsed frames, and disabled preview frames. Fresh async preview content could race the first React commit.

Impact

Agent visual feedback now matches the editor/published document background, including transparent node crops. Any configured breakpoint is captured at its configured width through a side-effect-free frame that does not run authored runtime scripts or disturb the visible canvas.

Verification

  • bun test --dots — 6,158 passed, 0 failed
  • bun run build
  • bun run lint
  • TypeScript project build and module-size budget
  • React Doctor changed-files scan — no issues found
  • real-browser tool-bridge capture at Mobile 375 px, Tablet 768 px, and Desktop 1440 px; full and node PNG samples preserved [9, 9, 15, 255]
  • real-browser Mobile capture while visibly in Live/Desktop preserved the visible mode/breakpoint and leaked no transient frame
  • delayed loop-row and post-template-row regressions prove capture waits for real async preview content

@DavidBabinec
DavidBabinec marked this pull request as ready for review July 11, 2026 14:01
@DavidBabinec
DavidBabinec merged commit e4cbf6b into main Jul 11, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant