Agentic UI: Add the Open in… split button to the preview toolbar

[bcotrim]

Related issues

• Fixes STU-2086

How AI was used in this PR

Claude Code ported open-in-menu/ from the Design Preview exploration (45fd6fb4c, #3975) and wrote the tests. I reviewed the diff and tested in the app.

Proposed Changes

The preview toolbar's external-link icon becomes an Open in… split button: the left half repeats the last destination (persisted), the chevron opens Browser, Finder/File Explorer, editor, terminal, phpMyAdmin. Browser opens the page currently shown in the preview, and is the only destination disabled while the site is stopped.

The control itself stays in the toolbar in every state, including stopped — unlike the button it replaces, which #4366 moved inside the canPreview guard — so files, editor and terminal are reachable without starting the site first.

Running	Stopped

Testing Instructions

Needs agentic features enabled.

1. Running site: try each destination from the chevron menu. The main half repeats the last one and persists across restarts.
2. Navigate inside the preview, then click the main half on Browser — opens that page, not the site root.
3. Stop the site: the control stays, Browser and is disabled, the rest still work.
4. Check light + dark, and RTL.

Pre-merge Checklist

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

🤖 Generated with Claude Code

[wpmobilebot]

📊 Performance Test Results

Comparing 48d70a2 vs trunk

app-size

Metric	trunk	48d70a2	Diff	Change
App Size (Mac)	1402.79 MB	1373.09 MB	29.70 MB	🟢 -2.1%

site-editor

Metric	trunk	48d70a2	Diff	Change
load	1033 ms	1030 ms	3 ms	⚪ 0.0%

site-startup

Metric	trunk	48d70a2	Diff	Change
siteCreation	7530 ms	6540 ms	990 ms	🟢 -13.1%
siteStartup	2864 ms	2395 ms	469 ms	🟢 -16.4%

---

Results are median values from multiple test runs.

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

[sejas]

I tested the PR and it works as expected. A few inconsistencies I found:

The phpMyAdmin has a weird state in the main part of the preview button. And depending on the size of Studio window it shows only the sidebar, kind of the mobile version of phpMyAdmin (minute 0:27 of the video).

I noticed that Open in Browser opens the current preview page, Frontend, wp-admin or phpMyAdmin. While the rest of buttons open the site in finder, IDE, terminal.
phpMyAdmin is a bit different because it doesn't open the site in any app, it just navigates there. I suggest removing this item from the dropdown and having it always available in the center part.

Open in browser wp-admin should append the magic path to auto-login with the redirect URL, currently users need to enter their credentials in the browser and the magic link is not used.

open-in.mp4

[bcotrim]

Thanks @sejas can you take another look, please?

[katinthehatsite]

I noticed that Open in Browser opens the current preview page, Frontend, wp-admin or phpMyAdmin. While the rest of buttons open the site in finder, IDE, terminal.
phpMyAdmin is a bit different because it doesn't open the site in any app, it just navigates there. I suggest removing this item from the dropdown and having it always available in the center part.

I had the same thought while testing this. The options in the dropdown menu seemed mixed as some of them were related to the IDE and some of them to browser so it was a bit of a mixed bag. I have not tested the newest changes yet though

[sejas]

Great work @bcotrim ! I confirm it works much better. Really exciting UI. I tested it with multiple sites.

open-new-window.mp4

This PR uses stu-2012-add-preview-site-search as its base.

[katinthehatsite]

For me, the changes mostly worked well. One thing that was making me confused is the default icons, for example, when the site is stopped:

For example, not every user might know what the default icon for the iTerm is.

Also, how do I, for example, choose Cursor. I have it installed, I see it in the classic UI but it is not present here?

[bcotrim]

For me, the changes mostly worked well. One thing that was making me confused is the default icons

The default shows the latest used "open in..." option and displays a tooltip when hovered. What would you suggest to make it easier to understand?

Also, how do I, for example, choose Cursor. I have it installed, I see it in the classic UI but it is not present here?

The options should match your preferred editor/terminal from the settings:

[katinthehatsite]

The default shows the latest used "open in..." option and displays a tooltip when hovered. What would you suggest to make it easier to understand?

Oh interesting, I am not sure why I am not seeing it with the most recent change 🤔

I did notice that when I select open in browser for one site, the selection persists for all sites. Should it be a per site preference?

Screen.Recording.2026-08-04.at.11.11.13.AM.mov

[katinthehatsite]

As a sidenote, another observation that I am finding is that if you select the default opening in the browser and the site is started, we have the same icon twice which could be confusing for the user:

It is the same icon that opens the site in the built-in browser or in the external browser but I am not sure the user has an easy visual way to distinguish it or know it right away intuitively. What do you think?

[bcotrim]

Thanks for testing again @katinthehatsite

Added 3e71974 to address the icon issue, changing the browser icon to one that I think it makes it clear that it is an external app and not the preview panel. What do you think?

48d70a2 addressed another issue with a stale check for installed apps, maybe why you couldn't find Cursor earlier.

Please let me know if this looks good to merge now 🙇

[katinthehatsite]

Please let me know if this looks good to merge now 🙇

Looking 👀

[katinthehatsite]

I think this is in a good shape to go 🚢

Thanks for improving the icons, I think it looks much better without the repetitive icon 👍