[youknowriad]

Related issues

• Related to STU-2562: the first half of the preview step of porting Rich Tabor's rebuild. The preview lifecycle (stopped layout, screenshots, loading visuals) follows in a stacked PR.

How AI was used in this PR

Claude Code ported the rebuild's preview header, using Rich's build as the spec. It checked the header in studio ui at three widths and in the stopped and starting states, against Rich's build. I reviewed the diff.

Proposed Changes

• Start and stop the site from the preview header.
  • A stopped site shows a labeled Start button.
  • While starting, it shows a spinner with "Starting".
  • A running site shows a compact Stop icon, and "Stopping" with a spinner while stopping.
  • Starting and stopping no longer need the sidebar or the site menu.
• Site settings and Open in browser in the address field. Both appear as small round buttons when you hover the address or move focus into it, and get out of the way while you type an address. Open in browser used to be always visible; Site settings is new here.
• The header adapts to narrow widths:
  • Below 640px, Annotate and Start/Stop go icon-only, and the address field's buttons hide.
  • Below 520px, Back, Forward and Reload fold into a More preview actions menu, which also offers Site settings and Open in browser.
• Refresh is now "Reload preview", matching the rebuild.

Differences from Rich's build

• Narrow widths: the header folds at fixed widths using container queries. Rich's build measures every control and folds only when they stop fitting.
• No Publish or Share in the header yet; they come with their own slices.
• No ⌥⌘S shortcut for Start/Stop yet; it goes with the shortcut audit (STU-2565).
• Address field: we keep our site/realm button at its start (front end, WP Admin, Database, Design system). Rich's has Site settings there instead.

Screenshots

The header at 1280px (hovering the address), 820px and in a narrow preview beside the chat, then Rich's for comparison:

Stopped site, then starting:

Testing Instructions

1. Open a running site: the header shows a Stop icon on the right. Click it: the site stops and the button becomes Start. Click Start: a spinner shows "Starting", then Stop returns.
2. Hover the address field: Site settings and Open in browser appear. Click into the address and type: they hide.
3. Narrow the preview (drag the split, or shrink the window). Below 640px the address buttons hide and labels go icon-only. Below 520px Back/Forward/Reload move into the "…" menu.
4. Repeat in dark mode, in the Desktop app and in studio ui.

Checks run: eslint, typecheck, and the full apps/ui suite (782 passing, plus a new Start/Stop test). I checked the result live in studio ui, in light and dark.

Pre-merge Checklist

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

🤖 Generated with Claude Code

[wpmobilebot]

📊 Performance Test Results

Comparing 4295e60 vs trunk

app-size

Metric	trunk	4295e60	Diff	Change
App Size (Mac)	944.53 MB	944.54 MB	+0.01 MB	⚪ 0.0%

site-editor

Metric	trunk	4295e60	Diff	Change
load	1225 ms	1202 ms	23 ms	⚪ 0.0%

site-startup

Metric	trunk	4295e60	Diff	Change
siteCreation	7079 ms	7077 ms	2 ms	⚪ 0.0%
siteStartup	4373 ms	4375 ms	+2 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

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