[Design Exploration] Full browser preview tabs

[shaunandrews]

Related issues

• None — design exploration.
• Builds on the permanent site-header exploration in Design Exploration: Replace the site dropdown with a permanent site header #4400 and the browser-toolbar exploration in [Design Exploration] Browser-style preview toolbar #4746.

How AI was used in this PR

AI assisted with iterative implementation, code cleanup, and regression coverage. Shaun directed the interaction and visual design through hands-on review of the running Studio preview, including tab behavior, persistence, focus treatment, toolbar integration, responsive states, and light/dark appearance. The final branch was reviewed as a complete diff before publication.

Proposed Changes

Explore a full browser-style tab experience above the preview toolbar. Users can keep the front end, WordPress admin, phpMyAdmin, and multiple individual pages open at once instead of repeatedly replacing one preview surface.

• Add any number of tabs from Front-end, WordPress, or Database starting points.
• Give every tab its own URL, navigation history, page title, and warm preview surface.
• Restore open tabs, their order, the active tab, and navigation history per site across refreshes and sessions.
• Support reactive drag-and-drop reordering and browser-style keyboard tab cycling.
• Open same-site links in a new preview tab with Command-click on macOS or Control-click on Windows and Linux; external links keep their existing browser behavior.
• Keep the URL field useful with the three primary destinations plus deduplicated, per-site recent addresses.
• Make the URL suggestions fully keyboard-operable: Up/Down move through options, Escape closes and returns focus, Tab can leave the non-modal popup, and recent entries can be removed individually.
• Preserve browser conventions around back/forward history menus, reload, full preview, focus rings, and close controls.
• Keep inactive-tab close controls quiet until hover or keyboard focus while leaving the selected tab's close control visible.
• Show the overflow fade whenever the tab strip actually scrolls, without covering the tab-bar divider or tab focus treatment.
• Align the New tab and full-preview controls on the same visual center line while leaving full preview anchored at the far edge.
• Preserve the macOS window drag region while the address menu is closed, then temporarily hand empty tab-bar space to menu dismissal while it is open.
• Hide empty browser chrome for stopped sites and disable preview-only controls on Database tabs with an explanatory tooltip.
• Adapt the tab bar for light and dark themes, narrow widths, and macOS traffic-light placement in full preview.

This is intentionally a design exploration for comparing a full tab model against the simpler browser-toolbar direction in #4746. It is not a merge-ready proposal.

Stacked exploration: this PR targets explore-combined-site-preview-toolbar-v2, an integration branch combining the site-header exploration in #4400 and browser-toolbar exploration in #4746. The integration base now carries the latest adaptive header and final address-bar treatment, keeping this review focused on the tab-specific delta.

Current screenshots

The set below emphasizes the selected-tab connection to the toolbar, wide and overflow behavior, clipped-label fades, the current URL menu, and light/dark contrast.

Wide · light	Wide · dark

Overflow · light	Overflow · dark

URL menu · light	URL menu · dark

Review guide

Please focus on:

• Whether full tabs solve multi-surface navigation clearly enough to justify the added browser complexity.
• Whether per-tab history and persistence match user expectations.
• Whether the active tab reads as connected to the toolbar while inactive tabs remain discoverable.
• Whether overflow fades, hover-only inactive close controls, and the fixed tab actions make crowded tab strips easier to scan.
• Keyboard and focus behavior across the tab strip, toolbar, URL field, and embedded preview—including platform-standard modifier-click links opening in a new preview tab.
• The usefulness of the three default destinations and per-site recent addresses.
• Narrow-window behavior and macOS full-preview chrome.

The Electron IPC plumbing for traffic-light positioning and navigation-history restoration is mechanical support for those behaviors and can be skimmed after validating its input bounds and ownership checks.

Known tradeoffs and follow-ups

• Tab and recent-address state currently lives in local storage, keyed by site.
• Restored Electron navigation history is capped at 100 validated HTTP(S) entries.
• This deliberately increases preview complexity compared with [Design Exploration] Browser-style preview toolbar #4746; the goal is to evaluate whether the additional power earns that cost.
• The stacked base is for design comparison only. Any mergeable implementation would need to be rebuilt on the chosen direction and current trunk.

Testing Instructions

1. Launch the Agentic UI in Studio and start a local site.
2. Add Front-end, WordPress, and Database tabs, then add multiple pages from the same realm.
3. Navigate independently in each tab and confirm switching tabs preserves its URL, page, and back/forward history.
4. Command-click a same-site link on macOS, or Control-click it on Windows/Linux, and confirm it opens in a new active preview tab without moving the original tab. Confirm external links retain their existing external-browser behavior.
5. Drag tabs across one another and confirm the remaining tabs reactively reorder.
6. Refresh or relaunch Studio and confirm the site's tabs, order, active tab, and history return.
7. Focus a tab, its close button, the URL field, and toolbar controls. Confirm focus rings match their shapes and browser keyboard shortcuts remain active.
8. Hover inactive tabs and confirm their close controls appear; confirm the selected tab's close control remains visible without hover.
9. Overflow the tab strip at several widths. Confirm the fade appears whenever scrolling is possible, stays clear of the divider and focus ring, and supports wheel scrolling.
10. Focus the URL field. Confirm Front-end, WordPress, and Database always appear; use Up/Down to navigate, Escape to close, and Tab/Shift+Tab to leave the popup. Submit new paths, confirm they appear under Recent only for that site, and remove one with its close button.
11. With the URL menu closed, drag the window from empty tab-bar space. Reopen the menu and confirm clicking that same empty space dismisses it; after dismissal, confirm the region drags the window again.
12. Open a Database tab and confirm Fit and Annotate are disabled with explanatory tooltips.
13. Stop the site and confirm the empty tab bar and toolbar disappear.
14. Enter full preview on macOS and confirm the traffic lights align with the tab bar.
15. Repeat the visual checks in light and dark color schemes and at narrow widths.

Automated verification completed:

• npx eslint --fix on the modified TypeScript/TSX files
• npm test -- apps/ui/src/components/site-toolbar/index.test.tsx 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 (94 tests)
• npm run typecheck
• npm run cli:build:ui

Pre-merge Checklist

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