Agentic UI: Add the full preview panel and restore the Desktop + Mobile comparison

[bcotrim]

Related issues

• Related to STU-2089

How AI was used in this PR

Implemented with Claude Code, ported from the Design Preview exploration (#3975). I reviewed the code and verified manually in the app.

Proposed Changes

• Full preview — a new item in the preview's ••• menu hands the whole window to the preview, hiding the sidebar and chat. The chat stays mounted, so nothing is lost on the way in or out. Leaving is the same menu item, or the usual sidebar toggle.
• Desktop + Mobile is back. It was cut in review because a desktop page beside a phone is unreadable in the narrow panel; it now travels with full preview, where there's room for both. Picking it goes full preview, and leaving full preview drops back to Fit pane rather than squeezing two frames into the panel.

Full Preview	Desktop + mobile	Shortcuts

Testing Instructions

Agentic UI, a running site.

1. Preview → ••• → Full preview: sidebar and chat give way to the preview. The same item (now Exit full preview) brings them back, as does the sidebar toggle.
2. ••• → Desktop + Mobile: goes full preview and shows both frames, the phone following the desktop pane's navigation. Try Landscape in the orientation group.
3. Leave full preview from the comparison → back to Fit pane in the normal split.
4. Resize the window in each: frames re-fit live.
5. Try the preview keyboard shortcuts to confirm they work
6. Check light + dark.

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[katinthehatsite]

I think this is good to go 👍 I like the desktop and mobile moves into the fullscreen as it is much better visible compared to the previous version of how it was implemented.

One thought that I had is that would be cool to exit the fullscreen preview move with the keyboard shortcut e.g. esc key. Approving regardless