[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.
• Keep the URL field useful with the three primary destinations plus deduplicated, per-site recent addresses.
• Preserve browser conventions around back/forward history menus, reload, full preview, focus rings, and close controls.
• 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, a local integration branch combining the site-header exploration in #4400 and browser-toolbar exploration in #4746. That keeps this review focused on the 12-file tab-specific delta instead of repeating both foundational explorations.

Current screenshots

The set below emphasizes the selected-tab connection to the toolbar, responsive truncation, light/dark contrast, and the new-tab destination menu.

Wide · light · full preview	Narrow · light

Wide · dark · new-tab menu	Narrow · 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.
• Keyboard and focus behavior across the tab strip, toolbar, URL field, and embedded preview.
• 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. Drag tabs across one another and confirm the remaining tabs reactively reorder.
5. Refresh or relaunch Studio and confirm the site's tabs, order, active tab, and history return.
6. Focus a tab, its close button, the URL field, and toolbar controls. Confirm focus rings match their shapes and browser keyboard shortcuts remain active.
7. Focus the URL field. Confirm Front-end, WordPress, and Database always appear; submit new paths and confirm they appear under Recent only for that site.
8. Open a Database tab and confirm Responsive and Annotate are disabled with explanatory tooltips.
9. Stop the site and confirm the empty tab bar and toolbar disappear.
10. Enter full preview on macOS and confirm the traffic lights align with the tab bar.
11. Repeat the visual checks in light and dark color schemes and at narrow widths.

Automated verification completed:

• npx eslint --fix across all changed TypeScript and TSX files
• 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 (72 tests)
• npm run typecheck
• npm run cli:build:ui

Pre-merge Checklist

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