Agentic UI: Fix Linux/Windows window controls

apps/studio/src/ipc-handlers.ts

@@ -6,7 +6,6 @@ import {
 	app,
 	clipboard,
 	dialog,
-	nativeTheme,
 	shell,
 	type IpcMainInvokeEvent,
 	Notification,
@@ -99,12 +98,7 @@ import {
 	type ExtractedBlueprintBundle,
 } from '@studio/common/sites/blueprint-extract';
 import { __, sprintf, LocaleData, defaultI18n } from '@wordpress/i18n';
-import {
-	MACOS_TRAFFIC_LIGHT_POSITION,
-	MAIN_MIN_WIDTH,
-	SIDEBAR_WIDTH,
-	WINDOWS_TITLEBAR_HEIGHT,
-} from 'src/constants';
+import { MACOS_TRAFFIC_LIGHT_POSITION, MAIN_MIN_WIDTH, SIDEBAR_WIDTH } from 'src/constants';
 import { sendIpcEventToRendererWithWindow } from 'src/ipc-utils';
 import {
 	getBetaFeatures as getBetaFeaturesFromLib,
@@ -136,7 +130,13 @@ import { shellOpenExternalWrapper } from 'src/lib/shell-open-external-wrapper';
 import { updateSiteUrl } from 'src/lib/update-site-url';
 import * as windowsHelpers from 'src/lib/windows-helpers';
 import { getLogsFilePath, writeLogToFile, type LogLevel } from 'src/logging';
-import { getMainWindow, loadMainWindowRenderer, setAgenticUiEnabled } from 'src/main-window';
+import {
+	getFrameTitleBarOverlayOptions,
+	getMainWindow,
+	getTitleBarOverlayOptions,
+	loadMainWindowRenderer,
+	setAgenticUiEnabled,
+} from 'src/main-window';
 import { popupMenu, setupMenu } from 'src/menu';
 import { type InstructionFileType } from 'src/modules/agent-instructions/constants';
 import {
@@ -2299,42 +2299,22 @@ export async function setWindowControlVisibility( event: IpcMainInvokeEvent, vis
 			parentWindow.setWindowButtonPosition( MACOS_TRAFFIC_LIGHT_POSITION );
 		}
 	} else if ( process.platform === 'win32' || process.platform === 'linux' ) {
-		const isDark = nativeTheme.shouldUseDarkColors;
-		if ( visible ) {
-			parentWindow.setTitleBarOverlay( {
-				color: 'rgba(30, 30, 30, 1)',
-				symbolColor: 'white',
-				height: WINDOWS_TITLEBAR_HEIGHT,
-			} );
-		} else {
-			parentWindow.setTitleBarOverlay( {
-				color: isDark ? '#2f2f2f' : '#fff',
-				symbolColor: isDark ? 'white' : '#1e1e1e',
-				height: WINDOWS_TITLEBAR_HEIGHT,
-			} );
-		}
+		// Hiding the controls means a fullscreen modal (e.g. Add site) now sits behind them,
+		// so the overlay must match its theme-aware `bg-frame` background instead of the chrome.
+		parentWindow.setTitleBarOverlay(
+			visible ? getTitleBarOverlayOptions() : getFrameTitleBarOverlayOptions()
+		);
 	}
 }
 
 export async function setTitleBarBackdropEffect( event: IpcMainInvokeEvent, enabled: boolean ) {
+	void enabled;
 	const parentWindow = BrowserWindow.fromWebContents( event.sender );
 	if ( ! parentWindow || ( process.platform !== 'win32' && process.platform !== 'linux' ) ) {
 		return;
 	}
 
-	if ( enabled ) {
-		parentWindow.setTitleBarOverlay( {
-			color: '#131313',
-			symbolColor: 'white',
-			height: WINDOWS_TITLEBAR_HEIGHT,
-		} );
-	} else {
-		parentWindow.setTitleBarOverlay( {
-			color: 'rgba(30, 30, 30, 1)',
-			symbolColor: 'white',
-			height: WINDOWS_TITLEBAR_HEIGHT,
-		} );
-	}
+	parentWindow.setTitleBarOverlay( getTitleBarOverlayOptions() );
 }
 
 export async function updateSitesSortOrder(

apps/studio/src/main-window.ts

@@ -100,6 +100,9 @@ async function loadRendererLocation( window: BrowserWindow, location: RendererLo
 
 export async function loadMainWindowRenderer( window: BrowserWindow ): Promise< void > {
 	await loadRendererLocation( window, getRendererLocation( getPreferredStudioUiMode() ) );
+	if ( process.platform === 'win32' || process.platform === 'linux' ) {
+		window.setTitleBarOverlay( getTitleBarOverlayOptions() );
+	}
 }
 
 export function getCurrentRendererUrl(): string {
@@ -200,6 +203,16 @@ export async function createMainWindow(): Promise< BrowserWindow > {
 
 	mainWindow = new BrowserWindow( windowOptions );
 
+	if ( process.platform === 'win32' || process.platform === 'linux' ) {
+		const updateTitleBarOverlay = () => {
+			if ( mainWindow && ! mainWindow.isDestroyed() ) {
+				mainWindow.setTitleBarOverlay( getTitleBarOverlayOptions() );
+			}
+		};
+		nativeTheme.on( 'updated', updateTitleBarOverlay );
+		mainWindow.on( 'closed', () => nativeTheme.removeListener( 'updated', updateTitleBarOverlay ) );
+	}
+
 	mainWindow.webContents.on( 'before-input-event', ( event, input ) => {
 		if ( isToggleSidebarShortcut( input ) ) {
 			event.preventDefault();
@@ -275,6 +288,28 @@ export async function createMainWindow(): Promise< BrowserWindow > {
 	return mainWindow;
 }
 
+// Matches the renderer's `--color-frame-bg`, so window controls blend into a fullscreen modal.
+export function getFrameTitleBarOverlayOptions() {
+	const isDark = nativeTheme.shouldUseDarkColors;
+	return {
+		color: isDark ? '#2f2f2f' : '#fff',
+		symbolColor: isDark ? '#e0e0e0' : '#1e1e1e',
+		height: WINDOWS_TITLEBAR_HEIGHT,
+	};
+}
+
+export function getTitleBarOverlayOptions() {
+	if ( getPreferredStudioUiMode() !== 'agentic' ) {
+		return { color: 'rgba(30, 30, 30, 1)', symbolColor: 'white', height: WINDOWS_TITLEBAR_HEIGHT };
+	}
+	const isDark = nativeTheme.shouldUseDarkColors;
+	return {
+		color: isDark ? '#242424' : '#fff',
+		symbolColor: isDark ? '#e0e0e0' : '#1e1e1e',
+		height: WINDOWS_TITLEBAR_HEIGHT,
+	};
+}
+
 function getOSWindowOptions(): Partial< BrowserWindowConstructorOptions > {
 	switch ( process.platform ) {
 		case 'darwin':
@@ -288,11 +323,7 @@ function getOSWindowOptions(): Partial< BrowserWindowConstructorOptions > {
 		case 'linux':
 			return {
 				titleBarStyle: 'hidden',
-				titleBarOverlay: {
-					color: 'rgba(30, 30, 30, 1)',
-					symbolColor: 'white',
-					height: WINDOWS_TITLEBAR_HEIGHT,
-				},
+				titleBarOverlay: getTitleBarOverlayOptions(),
 				minHeight: MAIN_MIN_HEIGHT + WINDOWS_TITLEBAR_HEIGHT,
 			};
 

apps/studio/src/tests/main-window.test.ts

@@ -36,6 +36,7 @@ vi.mock( 'electron', () => {
 		loadFile = vi.fn().mockResolvedValue( undefined );
 		loadURL = vi.fn().mockResolvedValue( undefined );
 		setBackgroundColor = vi.fn();
+		setTitleBarOverlay = vi.fn();
 		getBounds = vi.fn().mockReturnValue( { x: 0, y: 0, width: 800, height: 600 } );
 
 		on = vi.fn().mockImplementation( ( event: string, handler: ( ...args: any[] ) => void ) => {
@@ -76,6 +77,9 @@ vi.mock( 'electron', () => {
 		},
 		nativeTheme: {
 			themeSource: 'light',
+			shouldUseDarkColors: false,
+			on: vi.fn(),
+			removeListener: vi.fn(),
 		},
 		screen: {
 			getAllDisplays: vi.fn().mockReturnValue( [] ),

apps/ui/src/components/site-preview/index.tsx

@@ -5,6 +5,7 @@ import { Button, IconButton, Tooltip } from '@wordpress/ui';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useConnector } from '@/data/core';
 import { useIsSiteStarting, useStartSite } from '@/data/queries/use-sites';
+import { useWindowControlsOverlay } from '@/hooks/use-window-controls-overlay';
 import { getSiteUrl } from '@/lib/get-site-url';
 import { playIcon, refreshIcon } from '@/lib/icons';
 import {
@@ -212,6 +213,7 @@ export function SitePreview( {
 	const isStarting = useIsSiteStarting( site.id );
 	const siteUrl = getSiteUrl( site );
 	const canPreview = site.running;
+	const windowControls = useWindowControlsOverlay();
 	const previewUrl = `${ siteUrl }${ getSafePath( path ) }`;
 	const [ browserState, setBrowserState ] =
 		useState< BrowserNavigationState >( EMPTY_BROWSER_STATE );
@@ -297,7 +299,17 @@ export function SitePreview( {
 
 	return (
 		<aside ref={ rootRef } className={ styles.root } aria-label={ __( 'Site preview' ) }>
-			<div className={ styles.header }>
+			<div
+				className={ styles.header }
+				style={
+					windowControls
+						? {
+								minHeight: windowControls.height,
+								paddingInlineEnd: windowControls.controlsWidth + 12,
+						  }
+						: undefined
+				}
+			>
 				{ canPreview ? (
 					<>
 						<div className={ styles.browserControls } aria-label={ __( 'Browser navigation' ) }>

apps/ui/src/hooks/use-window-controls-overlay.ts

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+
+export interface WindowControlsOverlayGeometry {
+	height: number;
+	controlsWidth: number;
+}
+
+interface WindowControlsOverlayLike {
+	visible: boolean;
+	getTitlebarAreaRect(): DOMRect;
+	addEventListener( type: 'geometrychange', listener: () => void ): void;
+	removeEventListener( type: 'geometrychange', listener: () => void ): void;
+}
+
+function getOverlay(): WindowControlsOverlayLike | undefined {
+	return ( navigator as Navigator & { windowControlsOverlay?: WindowControlsOverlayLike } )
+		.windowControlsOverlay;
+}
+
+function readGeometry(): WindowControlsOverlayGeometry | null {
+	const overlay = getOverlay();
+	if ( ! overlay?.visible ) {
+		return null;
+	}
+	const rect = overlay.getTitlebarAreaRect();
+	const controlsWidth = Math.max( rect.x, window.innerWidth - rect.right );
+	return { height: rect.height, controlsWidth };
+}
+
+export function useWindowControlsOverlay(): WindowControlsOverlayGeometry | null {
+	const [ geometry, setGeometry ] = useState< WindowControlsOverlayGeometry | null >(
+		readGeometry
+	);
+
+	useEffect( () => {
+		const overlay = getOverlay();
+		if ( ! overlay ) {
+			return;
+		}
+		const update = () => setGeometry( readGeometry() );
+		overlay.addEventListener( 'geometrychange', update );
+		window.addEventListener( 'resize', update );
+		return () => {
+			overlay.removeEventListener( 'geometrychange', update );
+			window.removeEventListener( 'resize', update );
+		};
+	}, [] );
+
+	return geometry;
+}