Design Exploration: Replace the site dropdown with a permanent site header

[shaunandrews]

Related issues

• Related to STU-2162
• Forms the persistent-header layer used by the browser-toolbar exploration in [Design Exploration] Browser-style preview toolbar #4746 and the full browser-tab exploration in [Design Exploration] Full browser preview tabs #4753.

How AI was used in this PR

Written with Claude Code and Codex through iterative design passes in the running app. I directed the interaction model and visual hierarchy, reviewed each pass, and had the implementation rebuilt on current trunk before updating this exploration.

Proposed Changes

This remains a visual design exploration rather than a merge-ready proposal.

This is the third PR in the site-management UI stack:

1. Agentic UI: Add Connections to site overview #4474 — Connections on the overview
2. Agentic UI: Add preview sites to site overview #4483 — Preview sites on the overview
3. Design Exploration: Replace the site dropdown with a permanent site header #4400 — Persistent site header with Share and Sync dialogs (this PR)
4. Agentic UI: Integrate the site overview, sharing, and sync progress #4601 — Integrated overview polish, reusable sharing controls, and operation progress

Site actions currently hide behind a dropdown whose trigger reads primarily as status. This exploration replaces that entry point with a permanent site header: site identity and state on one side, with the most relevant actions always visible on the other.

The visible hierarchy is:

• Open in as a quiet split action.
• Share… for temporary preview links.
• Publish… or Sync… as the primary site action.

It also introduces dedicated Share, Publish/connect, and selective Sync dialogs. Sync supports multiple connected sites, Push/Pull direction, database selection, and a file tree. The responsive header truncates identity first, then progressively reduces secondary actions while preserving the primary action for as long as possible.

The final stack layer (#4601) reuses the exact Preview sites list inside Share, opens this Sync dialog from each connection row, and adds operation progress to both the overview and persistent notices.

Current UI

Share · light	Share · dark

Selective Sync · light	Selective Sync · dark

Testing Instructions

1. Launch the agentic UI and open a local site chat or Overview.
2. Confirm the permanent header appears consistently on both surfaces.
3. Exercise each Open in destination and confirm the remembered default updates.
4. Exercise Share, Publish/connect, and Sync with connected and disconnected sites.
5. In Sync, switch between multiple targets and Push/Pull, then change database/file selections.
6. Resize through wide, compact, icon-only, overflow, and minimal states.
7. Check headers, menus, tooltips, and dialogs in light, dark, and RTL layouts.

Verification used while preparing this stack:

• Built this exact PR head and captured all three screenshots above.
• Verified the final integrated dialogs in light, dark, and Hebrew RTL.
• The site-toolbar tests and full typecheck pass on the integrated stack head.

Pre-merge Checklist

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