[Design Exploration] Browser-style preview toolbar

[shaunandrews]

Related issues

• None — design exploration.
• Compare the permanent site-header exploration in Design Exploration: Replace the site dropdown with a permanent site header #4400 and the full browser-tab exploration in [Design Exploration] Full browser preview tabs #4753, which extends this toolbar with independent tab/history state and platform-standard modifier-click navigation.

How AI was used in this PR

AI assisted with iterative implementation, refactoring, and test updates. Shaun directed the interaction and visual design through hands-on review of the running Studio preview, including toolbar spacing, responsive behavior, control states, icon treatment, and dark-mode corrections.

Proposed Changes

• Explore a conventional browser-style preview toolbar that replaces the realm tab selector with a filled URL field and familiar navigation controls.
• Give the URL field a deliberate browser-address treatment: 32px tall, comfortably padded, strongly rounded, filled rather than bordered, and theme-aware in light and dark mode.
• Keep Front-end, WordPress admin, and Database available from the address menu, then add deduplicated per-site recent addresses as the user navigates.
• Make navigation more useful with browser-like back, forward, and refresh controls, including right-click history menus for jumping between visited pages.
• Keep preview tools understandable at a glance: Annotate uses a bordered secondary treatment, while Responsive always keeps its current mode visible and uses a checkmark to identify the selected menu item.
• Move the Open in action to the chat header, where its split button stays visually quiet at rest and preserves external destinations without crowding the browser toolbar.
• Preserve compact behavior, truncation, theme-aware colors, and legible controls across narrow layouts and light/dark appearances.
• Hide empty browser chrome while a site is stopped, remove obsolete realm-number shortcuts, and disable preview-only controls on Database with explanatory tooltips.

This is intentionally a design exploration. The interaction model and visual treatment are presented for feedback rather than as a final approved direction.

Current screenshots

The set below covers the address menu and recents, compact toolbar behavior, dark mode, and the disabled Database state.

Wide · light · address menu	Narrow · light · toolbar

Wide · dark · address menu	Narrow · light · Database state

Testing Instructions

1. Launch the Agentic UI in Studio and open a running local site with the preview visible.
2. Confirm the toolbar presents back, forward, refresh, the 32px filled URL field, Responsive, and Annotate.
3. Confirm the URL field has no resting border, retains a clear focus treatment, and remains legible in light and dark mode.
4. Focus the URL field and use Front-end, WordPress, and Database; verify the menu closes after selection.
5. Submit new paths, reopen the address menu, and confirm deduplicated recent addresses appear only for that site.
6. Navigate through several pages, then right-click Back and Forward; verify each history menu opens below its button and can jump to an entry.
7. Open the Responsive dropdown and try Responsive, Mobile, Tablet, Desktop, and Desktop + Mobile. Confirm the trigger label updates and only the selected row has a checkmark.
8. Open a Database destination and confirm Responsive and Annotate are disabled with explanatory tooltips.
9. Stop the site and confirm the empty browser toolbar is hidden.
10. Confirm Open in appears at the top-right of the chat panel, repeats the current default destination, has no border or fill at rest, and remains legible as chat content scrolls behind it.
11. Narrow the preview and confirm Responsive keeps its visible label while Annotate can collapse to its icon.
12. Repeat the visual checks in both light and dark color schemes.

Automated verification completed for the latest update:

• npm test -- apps/ui/src/components/site-preview/address-bar.test.tsx apps/ui/src/components/site-preview/index.test.tsx apps/ui/src/components/site-preview/inspector-script.test.ts (65 tests)
• npm run typecheck -w @studio/ui
• npm run cli:build:ui on the combined exploration branch

Pre-merge Checklist

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