Agentic UI: Render application settings as a fullscreen overlay

[bcotrim]

Related issues

• Related to STU-1882

How AI was used in this PR

Implemented with Claude Code (ported the settings layout from the explore-site-centric-conversation-chrome design-preview branch, adapted to trunk, and wrote the tests); reviewed and visually verified manually.

Proposed Changes

Per the settings design post, application settings now render full-screen, obscuring the workbench, instead of appearing inside the dashboard next to the sidebar.

• Opening settings covers the whole window with an opaque overlay; the dashboard and the warm site preview stay mounted underneath, so there's no layout reflow or sidebar animation — settings simply appears on top.
• Closing (X button in the header, or pressing Esc) returns you exactly where you were: the previous route is restored instantly because the dashboard never unmounted. When settings is opened as a deep link with no history, closing falls back to the home route.
• Esc respects popups: an open menu, select, or dialog consumes the keypress first and settings stays open.
• The window can still be dragged via invisible chrome strips along the overlay's edges, and the header clears the macOS traffic lights.
• Deep links (/settings?tab=…) keep working unchanged.

Light	Dark

Testing Instructions

1. Run the app with the agentic UI enabled and open a chat session or site.
2. Open Settings — it should cover the entire window (sidebar and preview hidden underneath), with the tabs centered and a close (X) button on the right of the header.
3. Close via the X button — you should land exactly where you were, instantly.
4. Reopen settings and press Esc — same behavior.
5. Open a select (e.g. Language) and press Esc — the select closes, settings stays open; a second Esc closes settings.
6. Deep-link check: reload the app while on /settings (or navigate there directly) — settings renders, and closing lands on the home route.
7. Drag the window by its top edge while settings is open — the window should move.
8. Verify in both light and dark mode.

Pre-merge Checklist

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

[wpmobilebot]

📊 Performance Test Results

Comparing b07e4e8 vs trunk

app-size

Metric	trunk	b07e4e8	Diff	Change
App Size (Mac)	1361.99 MB	1361.98 MB	0.01 MB	⚪ 0.0%

site-editor

Metric	trunk	b07e4e8	Diff	Change
load	1104 ms	1088 ms	16 ms	⚪ 0.0%

site-startup

Metric	trunk	b07e4e8	Diff	Change
siteCreation	7007 ms	6995 ms	12 ms	⚪ 0.0%
siteStartup	2353 ms	2366 ms	+13 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

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

[sejas]

Works as expected. I left a suggestion to re-use the fullscreen component, it can be a follow-up.

[sejas]

This new component is similar to onboarding-layout. We can consider unifying them, or using this new one in the Onboarding layout.

studio/apps/ui/src/components/onboarding-layout/index.tsx

Lines 21 to 37 in 9eb8968

	export function OnboardingLayout( {
	children,
	onClose,
	closeDisabled = false,
	width = 'default',
	contentRef,
	background,
	}: OnboardingLayoutProps ) {
	return (
	<Stack align="flex-start" justify="center" className={ styles.root }>
	{ background }
	<div aria-hidden="true">
	<div className={ `${ styles.dragEdge } ${ styles.dragEdgeTop }` } />
	<div className={ `${ styles.dragEdge } ${ styles.dragEdgeLeft }` } />
	<div className={ `${ styles.dragEdge } ${ styles.dragEdgeBottom }` } />
	</div>
	{ onClose && (