Open an expanded HTML render in a wide modal instead of the side panel

[RostyslavDzhohola]

What's hard today

When an agent publishes an image-heavy html_render page (screenshots, generated images, before/after frames), the expand button in its corner opens the page in the right side panel. The panel is narrower than the chat and shows the page edge to edge, so it isn't really a bigger view. Clicking an image inside the page does nothing, so there's no way to look at one at full size.

t3code-html-render-panel.mp4

Idea

Make the expand button open the page in a wide modal over the app, the way image attachments open in the expanded image dialog. Esc closes it, and the page gets the room it needs.

If the side panel stays

Pad the page there. Inline renders have no horizontal padding on purpose, so they line up with the reply text. The panel, and a downloaded copy opened in a browser, show them flush against the edges.

Mobile already does both: expanding a render there opens it full screen, and #15998 added a 16pt side gutter to that view for exactly this reason. The web panel never got the same treatment.

Related: click an image to enlarge it

In either view, clicking an image in a render could open it in the existing image viewer. Today the page's sandboxed frame forwards only http(s) link clicks to the app.

Pointers (main @ 0bfd9dd19)

• The expand button in apps/web/src/components/chat/HtmlRenderFrame.tsx calls onOpen with htmlRender: true, which opens the attachment in the side panel.
• The panel mounts HtmlRenderDocument without padding: apps/web/src/components/files/BrowserDocumentFrame.tsx.
• body{margin:0} and the link-only click handler live in the bootstrap in packages/shared/src/htmlRender.ts. The bootstrap is saved into the stored file, so a downloaded copy is edge to edge too.
• Image attachments already open in ExpandedImageDialog.

Seen on T3 Code Nightly 0.0.46-nightly.20261007.2787, desktop app, macOS 27.0.1. Related: #10789 (an expanded viewer for Mermaid diagrams).

cc @bmdavis419 @maria-rcks @Bil0000. Would any of you want to pick this up?

[joshka]

I'm a +1 for this, but for a slightly different reason. I generated some mockups and didn't realize they were HTML rather than plain images (I'm more used to OpenAI models than Claude). An HTML mockup and an inline image look much the same in the thread, so it was confusing that I couldn't work out why I wasn't able to zoom and pan around the "image".

So the part I'd add to this proposal is zoom and pan inside the expanded view, working the same way as the image viewer:

• Pinch on a trackpad or Ctrl+scroll to zoom around the cursor.
• Cmd/Ctrl with + / - to zoom, and Cmd/Ctrl+0 to fit. While the modal is open, these zoom the render instead of the whole app.
• Drag or scroll to pan.

I mostly want to check how some part of the page looks in detail and move around it.

Some notes on how it could work:

• It works for every render, including older ones. The modal can lay the page out at its full height and scale the frame, so agent pages don't need to change.
• Unlike a screenshot, the page stays sharp at any zoom level, because the browser redraws it instead of enlarging pixels.
• The inline render in the thread stays exactly as it is, so zooming never takes over the thread's scroll.

Strong +1. Happy to throw tokens at it if there's a commitment to look at the result and accept it if it's good.

[Bil0000]

Working on it

#17561

[juliusmarminge]

Note

Grok responding on behalf of Julius.

Resolved by #17561, now on main: visual replies (HTML renders) open in a full-screen viewer with a close button and 50–200% zoom controls, replacing the side-panel expand. Since the panel path is gone, the panel-padding ask no longer applies.

Not covered: clicking an image inside a render to enlarge it, and pinch / Ctrl+scroll / keyboard zoom and pan. If you still want those, please open a new Ideas discussion for them. Closing this one as resolved.