Skip to content

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

Merged
bcotrim merged 3 commits into
trunkfrom
mognet/add-fullscreen-preview-and-responsive-modes
Aug 4, 2026
Merged

Agentic UI: Add the full preview panel and restore the Desktop + Mobile comparison#4423
bcotrim merged 3 commits into
trunkfrom
mognet/add-fullscreen-preview-and-responsive-modes

Conversation

@bcotrim

@bcotrim bcotrim commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

Related issues

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
image image image
image image image

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?

@bcotrim
bcotrim force-pushed the mognet/add-fullscreen-preview-and-responsive-modes branch from 79b94a6 to 565e6de Compare August 3, 2026 21:46
@bcotrim
bcotrim marked this pull request as draft August 3, 2026 21:50
@bcotrim
bcotrim marked this pull request as ready for review August 4, 2026 08:34

@katinthehatsite katinthehatsite left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Base automatically changed from stu-2089-add-responsive-preview-modes-and-the-view-menu to trunk August 4, 2026 13:46
@bcotrim
bcotrim force-pushed the mognet/add-fullscreen-preview-and-responsive-modes branch from 568d293 to 4670a81 Compare August 4, 2026 13:48
@wpmobilebot

Copy link
Copy Markdown
Collaborator

📊 Performance Test Results

Comparing 4670a81 vs trunk

app-size

Metric trunk 4670a81 Diff Change
App Size (Mac) 1402.83 MB 1402.84 MB +0.01 MB ⚪ 0.0%

site-editor

Metric trunk 4670a81 Diff Change
load 1042 ms 1062 ms +20 ms ⚪ 0.0%

site-startup

Metric trunk 4670a81 Diff Change
siteCreation 7548 ms 7558 ms +10 ms ⚪ 0.0%
siteStartup 2866 ms 2867 ms +1 ms ⚪ 0.0%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

@bcotrim
bcotrim merged commit 9f2bb50 into trunk Aug 4, 2026
14 checks passed
@bcotrim
bcotrim deleted the mognet/add-fullscreen-preview-and-responsive-modes branch August 4, 2026 14:22
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.

3 participants