devtools: preview doesn't render the host surface background behind the iframe

[harijoe]

The devtools preview doesn't reproduce the background a real host (ChatGPT, Claude…) paints behind the view's iframe, so the rendered result doesn't match what ships. Two symptoms:

Fullscreen — the background shows as white regardless of the view's own background. E.g. a view with a lavender (light) background renders white in fullscreen.

Inline / PiP — the background is always effectively transparent. Switching the simulated theme to Dark updates the view's CSS, but the area behind stays transparent, so white text/buttons sit on the devtools' grey panel and become unreadable.

Impact: hard to iterate on UI and judge how a view will look inside the final host.

Likely area: the preview container in packages/devtools/src/components/layout/tool-panel/view/index.tsx — fullscreen forces bg-background (devtools chrome) behind the iframe, while inline/PiP applies no surface color at all. The container should paint the simulated host surface for the current theme behind the iframe in all display modes.

[adityabhatkar23]

@harijoe can i work on this issue .

[harijoe]

@adityabhatkar23 Sure, it's all yours :)

[adityabhatkar23]

Hi! I'm working on this issue and wanted to clarify the expected behavior before I open a PR.

While investigating, I noticed that the theme toggle updates data-theme, but the preview background doesn't appear to react to it. I experimented with applying a theme-aware background behind the widget preview and now the surface changes correctly between light and dark modes.

Before I proceed, could you clarify what should be considered the "simulated host surface" mentioned in the issue?

• Should the preview area use a dedicated host-surface color that changes with the selected theme?
• Or is the intention to make the existing preview-region/background grid theme-aware?
• Is packages/devtools/src/components/layout/tool-panel/view/index.tsx the only place you'd expect this to be handled, or should changes to the surrounding preview container/theme styling also be considered?

I want to make sure the fix matches the intended behavior rather than just addressing the visual symptoms.
@harijoe

[adityabhatkar23]

@adityabhatkar23 Sure, it's all yours :)

is this what are we looking for

[harijoe]

Yes, partially.

The devtools preview should paint a theme-aware host surface behind the view's iframe so the result matches what ships in a real host, exactly like your preview. The iframe stays transparent by default (so we see the grid behind it), and so a view that sets its own background renders that background.

After the fix, the grid is visible in inline, PiP, and fullscreen alike; the surface darkens with the dark theme in all of them; and only the area behind the view changes, while the surrounding devtools chrome stays as is.

[Aayan-Ali-Hashim]

Is this issue still open? If yes, I would like to resolve it.

[harijoe]

Hi @Aayan-Ali-Hashim, it's still open, and unless @adityabhatkar23 speaks up, I suggest you take over what's been done so far and push it forward 👍

[Aayan-Ali-Hashim]

Hi @Aayan-Ali-Hashim, it's still open, and unless @adityabhatkar23 speaks up, I suggest you take over what's been done so far and push it forward 👍

Sure Julien

[Aayan-Ali-Hashim]

@harijoe
So basically you want to see the grid behind the text?

[harijoe]

Yes, the grid should still be visible, but it should be in "dark mode" along the component when the theme=dark is selected.

[Aayan-Ali-Hashim]

Yes, the grid should still be visible, but it should be in "dark mode" along the component when the theme=dark is selected.

Ok I got the issue

[Boj4ckk]

Hello @harijoe , is this issue still open ?