Show the sidebar Studio wordmark only in the browser UI

apps/ui/src/components/sidebar-header/index.tsx

@@ -3,6 +3,7 @@ import { __ } from '@wordpress/i18n';
 import { comment, download, globe, plus } from '@wordpress/icons';
 import { Icon, IconButton } from '@wordpress/ui';
 import * as Menu from '@/components/menu';
+import { useConnector } from '@/data/core';
 import { useTrafficLightSpace } from '@/hooks/use-traffic-light-space';
 import { drawerIcon } from '@/lib/icons';
 import styles from './style.module.css';
@@ -12,11 +13,16 @@ type Props = {
 };
 
 export function SidebarHeader( { onToggleSidebar }: Props ) {
+	const connector = useConnector();
 	const reserveTrafficLightSpace = useTrafficLightSpace();
 	const navigate = useNavigate();
 	return (
 		<div className={ `${ styles.root } ${ reserveTrafficLightSpace ? '' : styles.flush }` }>
-			<span className={ styles.title }>{ __( 'Studio' ) }</span>
+			{ /* In a browser tab nothing else names the app, so the header carries a
+			     small wordmark. In the desktop app the window chrome already does. */ }
+			{ ! connector.capabilities.appWindow ? (
+				<span className={ styles.title }>{ __( 'Studio' ) }</span>
+			) : null }
 			<div className={ styles.actions }>
 				<Menu.Root modal={ false }>
 					<Menu.Trigger

apps/ui/src/components/sidebar-header/style.module.css

@@ -23,14 +23,15 @@
 
 /* When there are no traffic lights to clear — non-macOS, the browser
    (`studio ui` / hosted), or macOS fullscreen (which hides them) — reclaim the
-   reserved padding and align the title with the site list entries below. The
-   site list outer padding is `2xl` and its rows now start flush with that edge
-   (no row/button inline-start padding), so the site label text starts at `2xl`
-   from the sidebar edge. */
+   reserved padding so the header content lines up with the site list entries
+   below. The site list outer padding is `2xl` and its rows start flush with
+   that edge, so text starts at `2xl` from the sidebar edge. */
 .flush {
 	padding-left: var(--wpds-dimension-padding-2xl);
 }
 
+/* Browser-tab wordmark (see the `appWindow` capability) — hidden in the
+   desktop app, where the window chrome already names the app. */
 .title {
 	flex: 1;
 	min-width: 0;

apps/ui/src/data/core/connectors/hosted/index.ts

@@ -112,6 +112,7 @@ export function createHostedConnector( { apiBaseUrl }: HostedConnectorOptions ):
 			nativeSaveDialog: false,
 			openInOS: false,
 			annotatePreview: false,
+			appWindow: false,
 		},
 
 		// Auth — runs unauthenticated, like the desktop app. WordPress.com login

apps/ui/src/data/core/connectors/ipc/index.ts

@@ -204,6 +204,7 @@ export function createIpcConnector(): Connector {
 			nativeSaveDialog: true,
 			openInOS: true,
 			annotatePreview: true,
+			appWindow: true,
 		},
 
 		// Auth — optional in Electron, delegated to main process

apps/ui/src/data/core/connectors/local/index.ts

@@ -213,6 +213,7 @@ export function createLocalConnector( { apiBaseUrl }: LocalConnectorOptions ): C
 			nativeSaveDialog: false,
 			openInOS: true,
 			annotatePreview: false,
+			appWindow: false,
 		},
 
 		// Auth — surfaces the WordPress.com user the CLI is already logged in as

apps/ui/src/data/core/types.ts

@@ -110,6 +110,10 @@ export interface ConnectorCapabilities {
 	// browser the preview is a cross-origin <iframe> that can't be injected, so
 	// the Annotate control is hidden.
 	annotatePreview: boolean;
+	// The UI runs in a dedicated app window whose chrome (dock icon, title bar)
+	// already identifies the app. When false — a browser tab (`studio ui` /
+	// hosted) — the sidebar header shows a small "Studio" wordmark instead.
+	appWindow: boolean;
 }
 
 export interface Connector {