From 322eac48a463d2d9934f945d079882c8567af8c4 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Thu, 23 Jul 2026 21:23:57 -0400
Subject: [PATCH 1/4] Redesign global app settings: unified card system,
 account sidebar, consolidated tabs

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../settings-view/account-section.test.tsx    |   27 +-
 .../settings-view/account-section.tsx         |  133 +-
 .../settings-view/ai-panel.test.tsx           |   59 +-
 .../src/components/settings-view/ai-panel.tsx |   71 +-
 .../components/settings-view/index.test.tsx   |   33 +-
 .../ui/src/components/settings-view/index.tsx |  212 ++--
 .../settings-view/keyboard-panel.tsx          |   25 +-
 .../settings-view/mcp-panel.test.tsx          |    8 +-
 .../components/settings-view/mcp-panel.tsx    |   40 +-
 .../settings-view/settings-preview.tsx        |  278 +++++
 .../components/settings-view/skills-panel.tsx |  106 +-
 .../settings-view/studio-cli-section.tsx      |   62 +-
 .../settings-view/studio-code-panel.test.tsx  |   50 +-
 .../settings-view/studio-code-panel.tsx       |  108 +-
 .../components/settings-view/style.module.css | 1103 +++++++++--------
 .../settings-view/usage-panel.test.tsx        |  266 ++--
 .../components/settings-view/usage-panel.tsx  |  293 ++---
 packages/common/lib/studio-assistant-quota.ts |    9 +
 18 files changed, 1701 insertions(+), 1182 deletions(-)
 create mode 100644 apps/ui/src/components/settings-view/settings-preview.tsx

diff --git a/apps/ui/src/components/settings-view/account-section.test.tsx b/apps/ui/src/components/settings-view/account-section.test.tsx
index f027a934de..c92f071b9d 100644
--- a/apps/ui/src/components/settings-view/account-section.test.tsx
+++ b/apps/ui/src/components/settings-view/account-section.test.tsx
@@ -53,6 +53,11 @@ vi.mock( '@/hooks/use-color-scheme', () => ( {
 	useColorScheme: () => 'light',
 } ) );
 
+vi.mock( './usage-panel', () => ( {
+	AiCreditsSection: () => <div data-testid="ai-credits-section" />,
+	PreviewUsageSection: () => <div data-testid="preview-usage-section" />,
+} ) );
+
 const useConnectorMock = vi.mocked( useConnector );
 const useAuthUserMock = vi.mocked( useAuthUser );
 const useLoginMock = vi.mocked( useLogin );
@@ -90,19 +95,29 @@ describe( 'AccountSection', () => {
 		expect( logoutMutate ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	it( 'prompts signed-out users to log in', () => {
+	it( 'shows preview-site usage only for a signed-in user', () => {
+		const { rerender } = render( <AccountSection /> );
+		expect( screen.getByTestId( 'preview-usage-section' ) ).toBeInTheDocument();
+
+		useAuthUserMock.mockReturnValue( { data: null, isLoading: false } as never );
+		rerender( <AccountSection /> );
+		expect( screen.queryByTestId( 'preview-usage-section' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'prompts signed-out users with the overview sign-in pitch', () => {
 		useAuthUserMock.mockReturnValue( { data: null, isLoading: false } as never );
 
 		render( <AccountSection /> );
 
-		expect( screen.getByText( 'WordPress.com account' ) ).toBeInTheDocument();
 		expect(
-			screen.getByText( 'Log in to use AI features and synchronize with live and preview sites.' )
+			screen.getByRole( 'heading', { name: 'Let Studio code it for you' } )
 		).toBeInTheDocument();
+		expect( screen.getByText( /An AI powered WordPress expert/ ) ).toBeInTheDocument();
 		expect( screen.queryByTestId( 'gravatar' ) ).not.toBeInTheDocument();
+		expect( screen.queryByTestId( 'ai-credits-section' ) ).not.toBeInTheDocument();
 		expect( screen.queryByRole( 'button', { name: 'Log out' } ) ).not.toBeInTheDocument();
 
-		fireEvent.click( screen.getByRole( 'button', { name: 'Log in' } ) );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Log in with WordPress.com' } ) );
 
 		expect( loginMutate ).toHaveBeenCalledTimes( 1 );
 	} );
@@ -110,7 +125,7 @@ describe( 'AccountSection', () => {
 	it( 'opens docs and issue links through the connector', () => {
 		render( <AccountSection /> );
 
-		fireEvent.click( screen.getByRole( 'button', { name: 'Docs' } ) );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Documentation' } ) );
 
 		expect( openExternalUrl ).toHaveBeenCalledWith(
 			'https://developer.wordpress.com/docs/developer-tools/studio/'
@@ -128,7 +143,7 @@ describe( 'AccountSection', () => {
 
 		render( <AccountSection /> );
 
-		fireEvent.click( screen.getByRole( 'button', { name: 'Docs' } ) );
+		fireEvent.click( screen.getByRole( 'button', { name: 'Documentation' } ) );
 
 		expect( openExternalUrl ).toHaveBeenCalledWith(
 			'https://developer.wordpress.com/es/docs/herramientas-para-desarrolladores/studio/'
diff --git a/apps/ui/src/components/settings-view/account-section.tsx b/apps/ui/src/components/settings-view/account-section.tsx
index 15b59029ab..07e69f3d70 100644
--- a/apps/ui/src/components/settings-view/account-section.tsx
+++ b/apps/ui/src/components/settings-view/account-section.tsx
@@ -1,15 +1,17 @@
 import { __ } from '@wordpress/i18n';
+import { caution, Icon, page } from '@wordpress/icons';
 import { Button } from '@wordpress/ui';
-import { clsx } from 'clsx';
 import { Gravatar } from '@/components/gravatar';
 import { useConnector } from '@/data/core';
-import { useAuthUser, useLogin, useLogout } from '@/data/queries/use-auth-user';
+import { useLogin, useLogout } from '@/data/queries/use-auth-user';
 import { useUserLocale } from '@/data/queries/use-user-locale';
 import { useColorScheme } from '@/hooks/use-color-scheme';
 import { getLocalizedLink, REPORT_ISSUE_URL } from '@/lib/docs-links';
+import { usePreviewAuthUser } from './settings-preview';
 import styles from './style.module.css';
+import { AiCreditsSection, PreviewUsageSection } from './usage-panel';
 
-function AccountHelpActions() {
+function AccountHelpLinks() {
 	const connector = useConnector();
 	const locale = useUserLocale();
 
@@ -18,86 +20,97 @@ function AccountHelpActions() {
 	};
 
 	return (
-		<div className={ styles.accountActions }>
-			<Button
+		<div className={ styles.helpLinks }>
+			<button
 				type="button"
-				variant="minimal"
-				tone="neutral"
-				size="small"
+				className={ styles.helpLink }
 				onClick={ () => openLink( getLocalizedLink( locale, 'docsStudio' ) ) }
 			>
-				{ __( 'Docs' ) }
-			</Button>
-			<Button
+				<Icon icon={ page } size={ 20 } className={ styles.helpLinkIcon } />
+				<span className={ styles.helpLinkLabel }>{ __( 'Documentation' ) }</span>
+			</button>
+			<button
 				type="button"
-				variant="minimal"
-				tone="neutral"
-				size="small"
+				className={ styles.helpLink }
 				onClick={ () => openLink( REPORT_ISSUE_URL ) }
 			>
-				{ __( 'Report an issue' ) }
-			</Button>
+				<Icon icon={ caution } size={ 20 } className={ styles.helpLinkIcon } />
+				<span className={ styles.helpLinkLabel }>{ __( 'Report an issue' ) }</span>
+			</button>
 		</div>
 	);
 }
 
 export function AccountSection() {
-	const { data: user, isLoading } = useAuthUser();
+	const { data: user, isLoading } = usePreviewAuthUser();
 	const login = useLogin();
 	const logout = useLogout();
 	const themeIsDark = useColorScheme() === 'dark';
 
 	return (
-		<section className={ styles.preferenceSectionGroup }>
-			<div className={ styles.accountSectionHeader }>
-				<h2 className={ clsx( styles.preferenceSectionHeading, styles.accountHeading ) }>
-					{ __( 'Account' ) }
-				</h2>
-				<AccountHelpActions />
-			</div>
-			<div className={ styles.accountSummary }>
-				<div className={ styles.accountIdentity }>
-					{ user ? (
-						<Gravatar
-							email={ user.email }
-							isDark={ themeIsDark }
-							className={ styles.accountAvatar }
-						/>
-					) : null }
-					<div className={ styles.accountDetails }>
-						<h2>{ user ? user.displayName : __( 'WordPress.com account' ) }</h2>
-						<p>
-							{ user
-								? user.email
-								: __( 'Log in to use AI features and synchronize with live and preview sites.' ) }
-						</p>
-					</div>
-				</div>
-				{ user ? (
-					<Button
-						type="button"
-						variant="outline"
-						tone="neutral"
-						loading={ logout.isPending }
-						loadingAnnouncement={ __( 'Logging out' ) }
-						onClick={ () => logout.mutate() }
-					>
-						{ __( 'Log out' ) }
-					</Button>
-				) : (
+		<div className={ styles.accountAside }>
+			{ user ? (
+				<>
+					<section className={ styles.asideSection }>
+						<h2 className={ styles.asideHeading }>{ __( 'Account' ) }</h2>
+						<div className={ styles.accountIdentity }>
+							<Gravatar
+								email={ user.email }
+								isDark={ themeIsDark }
+								className={ styles.accountAvatar }
+							/>
+							<div className={ styles.accountDetails }>
+								<span className={ styles.accountName }>{ user.displayName }</span>
+								<p className={ styles.accountEmail }>{ user.email }</p>
+							</div>
+						</div>
+					</section>
+
+					<AiCreditsSection />
+					<PreviewUsageSection userId={ user.id } />
+				</>
+			) : (
+				<section className={ styles.asideSection }>
+					<h2 className={ styles.asideHeading }>{ __( 'Let Studio code it for you' ) }</h2>
+					<p className={ styles.signinCopy }>
+						{ __(
+							'An AI powered WordPress expert that can build a site, theme, or plugin, and help you share and publish.'
+						) }
+					</p>
 					<Button
 						type="button"
-						variant="outline"
-						tone="neutral"
+						className={ styles.signinButton }
+						variant="solid"
+						tone="brand"
+						size="small"
 						disabled={ isLoading }
 						loading={ login.isPending }
 						loadingAnnouncement={ __( 'Logging in' ) }
 						onClick={ () => login.mutate() }
 					>
-						{ __( 'Log in' ) }
+						{ __( 'Log in with WordPress.com' ) }
 					</Button>
-				) }
-			</div>
-		</section>
+				</section>
+			) }
+
+			<section className={ styles.asideSection }>
+				<h2 className={ styles.asideHeading }>{ __( 'Help' ) }</h2>
+				<AccountHelpLinks />
+			</section>
+
+			{ user ? (
+				<Button
+					type="button"
+					className={ styles.logoutButton }
+					variant="solid"
+					size="small"
+					loading={ logout.isPending }
+					loadingAnnouncement={ __( 'Logging out' ) }
+					onClick={ () => logout.mutate() }
+				>
+					{ __( 'Log out' ) }
+				</Button>
+			) : null }
+		</div>
 	);
 }
diff --git a/apps/ui/src/components/settings-view/ai-panel.test.tsx b/apps/ui/src/components/settings-view/ai-panel.test.tsx
index 7d90ac5f04..b66a974021 100644
--- a/apps/ui/src/components/settings-view/ai-panel.test.tsx
+++ b/apps/ui/src/components/settings-view/ai-panel.test.tsx
@@ -2,6 +2,7 @@ import '@testing-library/jest-dom/vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { useConnector } from '@/data/core';
+import { useAgenticFeatures } from '@/data/queries/use-agentic-features';
 import { AiPanel } from './ai-panel';
 
 vi.mock( '@wordpress/components', () => ( {
@@ -25,11 +26,28 @@ vi.mock( '@/data/core', () => ( {
 	useConnector: vi.fn(),
 } ) );
 
+vi.mock( '@/data/queries/use-agentic-features', () => ( {
+	useAgenticFeatures: vi.fn(),
+} ) );
+
+vi.mock( './account-section', () => ( {
+	AccountSection: () => <div data-testid="account-section" />,
+} ) );
+
 vi.mock( './studio-code-panel', () => ( {
 	StudioCodePanel: () => <div data-testid="studio-code-panel" />,
 } ) );
 
+vi.mock( './skills-panel', () => ( {
+	SkillsPanel: () => <div data-testid="skills-panel" />,
+} ) );
+
+vi.mock( '@/components/offline-banner', () => ( {
+	OfflineNotice: () => <div role="status">You&apos;re offline</div>,
+} ) );
+
 const useConnectorMock = vi.mocked( useConnector );
+const useAgenticFeaturesMock = vi.mocked( useAgenticFeatures );
 
 describe( 'AiPanel', () => {
 	const disableAgenticUi = vi.fn( () => Promise.resolve() );
@@ -43,6 +61,7 @@ describe( 'AiPanel', () => {
 
 	beforeEach( () => {
 		vi.clearAllMocks();
+		useAgenticFeaturesMock.mockReturnValue( { reason: null } as never );
 	} );
 
 	it( 'switches back to the classic UI when agentic features are toggled off', () => {
@@ -59,12 +78,14 @@ describe( 'AiPanel', () => {
 		expect( toggle ).toBeDisabled();
 	} );
 
-	it( 'hides the agentic features section when the host cannot switch UIs', () => {
+	it( 'hides the toggle but keeps the card when the host cannot switch UIs', () => {
 		mockConnector( false );
 		render( <AiPanel /> );
 
 		expect( screen.queryByRole( 'checkbox' ) ).not.toBeInTheDocument();
 		expect( disableAgenticUi ).not.toHaveBeenCalled();
+		// The card still renders its heading, just without the toggle.
+		expect( screen.getByRole( 'heading', { name: 'Agentic features' } ) ).toBeInTheDocument();
 	} );
 
 	it( 'shows the global instructions editor alongside the agentic features toggle', () => {
@@ -81,4 +102,40 @@ describe( 'AiPanel', () => {
 
 		expect( screen.queryByTestId( 'studio-code-panel' ) ).not.toBeInTheDocument();
 	} );
+
+	it( 'shows no sign-in banner when signed out — the pitch lives in the account sidebar', () => {
+		mockConnector( true );
+		useAgenticFeaturesMock.mockReturnValue( { reason: 'signed-out' } as never );
+		render( <AiPanel /> );
+
+		expect( screen.queryByLabelText( 'Sign in to Studio' ) ).not.toBeInTheDocument();
+		expect( screen.queryByRole( 'status' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'disables the agentic features toggle when signed out', () => {
+		mockConnector( true );
+		useAgenticFeaturesMock.mockReturnValue( { reason: 'signed-out' } as never );
+		render( <AiPanel /> );
+
+		const toggle = screen.getByRole( 'checkbox', { name: 'Agentic features' } );
+		expect( toggle ).toBeDisabled();
+		expect( toggle ).not.toBeChecked();
+	} );
+
+	it( 'shows the offline notice when offline', () => {
+		mockConnector( true );
+		useAgenticFeaturesMock.mockReturnValue( { reason: 'offline' } as never );
+		render( <AiPanel /> );
+
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( "You're offline" );
+		expect( screen.queryByLabelText( 'Sign in to Studio' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'shows neither banner when signed in and online', () => {
+		mockConnector( true );
+		render( <AiPanel /> );
+
+		expect( screen.queryByLabelText( 'Sign in to Studio' ) ).not.toBeInTheDocument();
+		expect( screen.queryByRole( 'status' ) ).not.toBeInTheDocument();
+	} );
 } );
diff --git a/apps/ui/src/components/settings-view/ai-panel.tsx b/apps/ui/src/components/settings-view/ai-panel.tsx
index 3d24640f48..1c84ee952e 100644
--- a/apps/ui/src/components/settings-view/ai-panel.tsx
+++ b/apps/ui/src/components/settings-view/ai-panel.tsx
@@ -2,55 +2,76 @@ import { FormToggle } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { clsx } from 'clsx';
 import { useState } from 'react';
+import { OfflineNotice } from '@/components/offline-banner';
 import { useConnector } from '@/data/core';
+import { AccountSection } from './account-section';
+import { usePreviewAgenticFeatures } from './settings-preview';
+import { SkillsPanel } from './skills-panel';
 import { StudioCodePanel } from './studio-code-panel';
 import styles from './style.module.css';
 
 function AgenticFeaturesSection() {
 	const connector = useConnector();
+	const { reason } = usePreviewAgenticFeatures();
 	const [ disabling, setDisabling ] = useState( false );
-
-	if ( ! connector.capabilities.switchToClassicUi ) {
-		return null;
-	}
+	const canSwitchToClassic = connector.capabilities.switchToClassicUi;
+	// Agentic features need a WordPress.com account, so they read as off and
+	// locked until the user signs in.
+	const signedOut = reason === 'signed-out';
 
 	// Turning agentic features off reloads the window into the classic UI, so
-	// there is no enable path here — once disabled, this panel no longer exists.
+	// there is no enable path — the toggle only ever goes one way. Hosts that
+	// can't switch (e.g. the hosted browser) still get the card, just without
+	// the toggle.
 	const handleDisable = () => {
 		setDisabling( true );
 		connector.disableAgenticUi().catch( () => setDisabling( false ) );
 	};
 
 	return (
-		<section className={ styles.preferenceSectionGroup }>
-			<section className={ styles.preferenceRow }>
-				<div className={ styles.preferenceText }>
-					<h2>{ __( 'Agentic features' ) }</h2>
-					<p>
-						{ __(
-							'Studio Code brings agentic, AI-powered site building to Studio. Turning it off reloads the app into the classic interface.'
-						) }
+		<section className={ clsx( styles.card, signedOut && styles.cardDisabled ) }>
+			<div className={ styles.cardHeader }>
+				<div className={ styles.cardHeaderText }>
+					<h2 className={ styles.cardTitle }>{ __( 'Agentic features' ) }</h2>
+					<p className={ styles.cardDescription }>
+						{ canSwitchToClassic && ! signedOut
+							? __(
+									'Studio Code brings agentic, AI-powered site building to Studio. Turning it off reloads the app into the classic interface.'
+							  )
+							: __( 'Studio Code brings agentic, AI-powered site building to Studio.' ) }
 					</p>
 				</div>
-				<div className={ clsx( styles.preferenceControl, styles.toggleControl ) }>
-					<FormToggle
-						checked={ ! disabling }
-						disabled={ disabling }
-						aria-label={ __( 'Agentic features' ) }
-						onChange={ handleDisable }
-					/>
-				</div>
-			</section>
+				{ canSwitchToClassic ? (
+					<div className={ clsx( styles.cardHeaderActions, styles.toggleControl ) }>
+						<FormToggle
+							checked={ ! disabling && ! signedOut }
+							disabled={ disabling || signedOut }
+							aria-label={ __( 'Agentic features' ) }
+							onChange={ handleDisable }
+						/>
+					</div>
+				) : null }
+			</div>
 		</section>
 	);
 }
 
 export function AiPanel() {
 	const connector = useConnector();
+	// Offline is the one whole-tab state worth a banner here; the signed-out
+	// sign-in pitch and the usage meters (AI credits, preview sites) now live in
+	// the account sidebar.
+	const { reason } = usePreviewAgenticFeatures();
+
 	return (
-		<div className={ styles.preferencesPanel }>
-			{ connector.capabilities.agentInstructions && <StudioCodePanel /> }
-			<AgenticFeaturesSection />
+		<div className={ styles.settingsLayout }>
+			<AccountSection />
+			<div className={ styles.settingsMain }>
+				{ reason === 'offline' ? <OfflineNotice /> : null }
+				<AgenticFeaturesSection />
+				{ connector.capabilities.agentInstructions && <StudioCodePanel /> }
+				<SkillsPanel />
+			</div>
 		</div>
 	);
 }
diff --git a/apps/ui/src/components/settings-view/index.test.tsx b/apps/ui/src/components/settings-view/index.test.tsx
index cf1c076da7..1db77aae3a 100644
--- a/apps/ui/src/components/settings-view/index.test.tsx
+++ b/apps/ui/src/components/settings-view/index.test.tsx
@@ -82,10 +82,6 @@ vi.mock( './ai-panel', () => ( {
 	AiPanel: () => <div data-testid="ai-panel" />,
 } ) );
 
-vi.mock( './skills-panel', () => ( {
-	SkillsPanel: () => null,
-} ) );
-
 vi.mock( './studio-cli-section', () => ( {
 	StudioCliSection: () => null,
 } ) );
@@ -101,7 +97,7 @@ vi.mock( '@/hooks/use-color-scheme', () => ( {
 } ) );
 
 vi.mock( './mcp-panel', () => ( {
-	McpPanel: () => <div data-testid="mcp-panel" />,
+	McpSection: () => <div data-testid="mcp-panel" />,
 } ) );
 
 vi.mock( '@/data/core/query-client', () => ( {
@@ -117,12 +113,6 @@ vi.mock( '@/data/queries/use-user-preferences', () => ( {
 	useUserPreferences: vi.fn(),
 } ) );
 
-// The mocked Tabs render every panel unconditionally; the usage panel has its
-// own test file.
-vi.mock( './usage-panel', () => ( {
-	UsagePanel: () => null,
-} ) );
-
 vi.mock( '@/hooks/use-traffic-light-space', () => ( {
 	useTrafficLightSpace: () => false,
 } ) );
@@ -221,11 +211,13 @@ describe( 'SettingsView', () => {
 	it( 'renders the AI tab with its panel', () => {
 		render( <SettingsView activeTab="ai" onTabChange={ vi.fn() } /> );
 
-		expect( screen.getByRole( 'button', { name: 'AI' } ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Agent' } ) ).toBeInTheDocument();
 		expect( screen.getByTestId( 'ai-panel' ) ).toBeInTheDocument();
 	} );
 
-	it( 'hides the AI tab when the host has no AI settings to offer', () => {
+	it( 'always shows the AI tab, even when the host has no AI settings to offer', () => {
+		// The AI tab now also holds Usage, which is shown for every host, so the
+		// tab is always present — the AI-specific sections gate themselves inside.
 		useConnectorMock.mockReturnValue( {
 			selectDefaultSiteDirectory,
 			capabilities: { agentInstructions: false, switchToClassicUi: false },
@@ -233,19 +225,20 @@ describe( 'SettingsView', () => {
 
 		render( <SettingsView activeTab="preferences" onTabChange={ vi.fn() } /> );
 
-		expect( screen.queryByRole( 'button', { name: 'AI' } ) ).not.toBeInTheDocument();
-		expect( screen.queryByTestId( 'ai-panel' ) ).not.toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Agent' } ) ).toBeInTheDocument();
+		expect( screen.getByTestId( 'ai-panel' ) ).toBeInTheDocument();
 	} );
 
-	it( 'recognizes the keyboard tab id', () => {
-		expect( isSettingsTab( 'keyboard' ) ).toBe( true );
+	it( 'recognizes valid settings tab ids', () => {
+		expect( isSettingsTab( 'preferences' ) ).toBe( true );
+		expect( isSettingsTab( 'ai' ) ).toBe( true );
+		expect( isSettingsTab( 'keyboard' ) ).toBe( false );
 		expect( isSettingsTab( 'unknown' ) ).toBe( false );
 	} );
 
-	it( 'renders keyboard shortcut sections', () => {
-		render( <SettingsView activeTab="keyboard" onTabChange={ vi.fn() } /> );
+	it( 'renders keyboard shortcut sections inside Settings', () => {
+		render( <SettingsView activeTab="preferences" onTabChange={ vi.fn() } /> );
 
-		expect( screen.getByRole( 'button', { name: 'Keyboard' } ) ).toBeInTheDocument();
 		expect( screen.getByRole( 'heading', { name: 'Composer' } ) ).toBeInTheDocument();
 		expect( screen.getByRole( 'heading', { name: 'Site preview' } ) ).toBeInTheDocument();
 		expect( screen.getByText( 'New chat' ) ).toBeInTheDocument();
diff --git a/apps/ui/src/components/settings-view/index.tsx b/apps/ui/src/components/settings-view/index.tsx
index ba3806a3f1..41e4f16dfd 100644
--- a/apps/ui/src/components/settings-view/index.tsx
+++ b/apps/ui/src/components/settings-view/index.tsx
@@ -16,16 +16,18 @@ import { useTrafficLightSpace } from '@/hooks/use-traffic-light-space';
 import { AccountSection } from './account-section';
 import { AiPanel } from './ai-panel';
 import { KeyboardPanel } from './keyboard-panel';
-import { McpPanel } from './mcp-panel';
+import { McpSection } from './mcp-panel';
 import { UNSET, toPreferencesFormData, toPreferencesPatch } from './preferences';
-import { SkillsPanel } from './skills-panel';
+import {
+	SettingsPreviewPanel,
+	SettingsPreviewProvider,
+	SHOW_PREVIEW_CONTROLS,
+} from './settings-preview';
 import { StudioCliSection } from './studio-cli-section';
 import styles from './style.module.css';
-import { UsagePanel } from './usage-panel';
 import type { PreferencesFormData } from './preferences';
 import type {
 	ColorScheme,
-	Connector,
 	InstalledApps,
 	QuitSitesBehavior,
 	SupportedEditor,
@@ -34,7 +36,7 @@ import type {
 } from '@/data/core';
 import type { ReactNode } from 'react';
 
-const SETTINGS_TABS = [ 'preferences', 'ai', 'usage', 'keyboard', 'skills', 'mcp' ] as const;
+const SETTINGS_TABS = [ 'preferences', 'ai' ] as const;
 
 type TabId = ( typeof SETTINGS_TABS )[ number ];
 
@@ -44,12 +46,6 @@ export function isSettingsTab( value: string ): value is TabId {
 
 export type SettingsTabId = TabId;
 
-// The AI tab holds the agentic-features toggle and the agent's global
-// instructions; hosts that offer neither (the hosted browser) don't get the tab.
-function hasAiSettings( capabilities: Connector[ 'capabilities' ] ): boolean {
-	return capabilities.switchToClassicUi || capabilities.agentInstructions;
-}
-
 // No "unset" option: the main process resolves a fallback for never-chosen
 // editor/terminal prefs (matching the legacy UI), so an explicit clear can't
 // round-trip. The select shows its placeholder when nothing is installed.
@@ -98,7 +94,6 @@ const LOCALE_ELEMENTS: { value: SupportedLocale; label: string }[] = Object.entr
 function SettingsHeader() {
 	// Settings renders fullscreen, so the sidebar (and its floating toggle) is
 	// covered — only the macOS traffic lights still need clearing.
-	const connector = useConnector();
 	const reserveTrafficLightSpace = useTrafficLightSpace();
 	const onClose = useSettingsClose();
 	return (
@@ -111,13 +106,7 @@ function SettingsHeader() {
 			<div className={ styles.headerTabs }>
 				<Tabs.List className={ styles.headerTabList }>
 					<Tabs.Tab tabId="preferences">{ __( 'Settings' ) }</Tabs.Tab>
-					{ hasAiSettings( connector.capabilities ) && (
-						<Tabs.Tab tabId="ai">{ __( 'AI' ) }</Tabs.Tab>
-					) }
-					<Tabs.Tab tabId="usage">{ __( 'Usage' ) }</Tabs.Tab>
-					<Tabs.Tab tabId="keyboard">{ __( 'Keyboard' ) }</Tabs.Tab>
-					<Tabs.Tab tabId="skills">{ __( 'Skills' ) }</Tabs.Tab>
-					<Tabs.Tab tabId="mcp">{ __( 'MCP' ) }</Tabs.Tab>
+					<Tabs.Tab tabId="ai">{ __( 'Agent' ) }</Tabs.Tab>
 				</Tabs.List>
 			</div>
 			{ onClose ? (
@@ -146,13 +135,13 @@ function PreferenceRow( {
 	children: ReactNode;
 } ) {
 	return (
-		<section className={ styles.preferenceRow }>
-			<div className={ styles.preferenceText }>
-				<h2>{ title }</h2>
-				{ description ? <p>{ description }</p> : null }
+		<div className={ styles.field }>
+			<div className={ styles.fieldText }>
+				<span className={ styles.fieldLabel }>{ title }</span>
+				{ description ? <span className={ styles.fieldDescription }>{ description }</span> : null }
 			</div>
-			<div className={ styles.preferenceControl }>{ children }</div>
-		</section>
+			<div className={ styles.fieldControl }>{ children }</div>
+		</div>
 	);
 }
 
@@ -264,55 +253,65 @@ function PreferencesPanel( {
 	onChange: ( update: Partial< PreferencesFormData > ) => void;
 } ) {
 	return (
-		<div className={ styles.preferencesPanel }>
-			<section className={ styles.preferenceSectionGroup }>
-				<h2 className={ styles.preferenceSectionHeading }>{ __( 'General' ) }</h2>
-				{ saveError ? (
-					<div className={ styles.errorMessage }>
-						{ __( 'An error occurred while saving settings. Please try again.' ) }
-					</div>
-				) : null }
-				<AppearancePicker value={ data.colorScheme } onChange={ onColorSchemeChange } />
-				<PreferenceRow title={ __( 'Language' ) }>
-					<PreferenceSelect
-						label={ __( 'Language' ) }
-						value={ data.locale }
-						options={ LOCALE_ELEMENTS }
-						onChange={ ( locale ) => onChange( { locale } ) }
-					/>
-				</PreferenceRow>
-				<PreferenceRow title={ __( 'Preferred editor' ) }>
-					<PreferenceSelect< SupportedEditor | typeof UNSET >
-						label={ __( 'Preferred editor' ) }
-						value={ data.editor }
-						options={ editorElements( installedApps ) }
-						onChange={ ( editor ) => onChange( { editor } ) }
-					/>
-				</PreferenceRow>
-				<PreferenceRow title={ __( 'Preferred terminal' ) }>
-					<PreferenceSelect< SupportedTerminal | typeof UNSET >
-						label={ __( 'Preferred terminal' ) }
-						value={ data.terminal }
-						options={ terminalElements( installedApps ) }
-						onChange={ ( terminal ) => onChange( { terminal } ) }
-					/>
-				</PreferenceRow>
-				<DefaultSiteDirectoryField
-					value={ data.defaultSiteDirectory }
-					onSelect={ onDefaultSiteDirectorySelect }
-				/>
-				<PreferenceRow title={ __( 'When quitting with running sites' ) }>
-					<PreferenceSelect< QuitSitesBehavior | typeof UNSET >
-						label={ __( 'When quitting with running sites' ) }
-						className={ styles.selectControlWide }
-						value={ data.quitSitesBehavior }
-						options={ QUIT_SITES_BEHAVIOR_ELEMENTS }
-						onChange={ ( quitSitesBehavior ) => onChange( { quitSitesBehavior } ) }
-					/>
-				</PreferenceRow>
-			</section>
+		<div className={ styles.settingsLayout }>
 			<AccountSection />
-			<StudioCliSection />
+			<div className={ styles.settingsMain }>
+				<section className={ styles.card }>
+					<div className={ styles.cardHeader }>
+						<div className={ styles.cardHeaderText }>
+							<h2 className={ styles.cardTitle }>{ __( 'General' ) }</h2>
+						</div>
+					</div>
+					{ saveError ? (
+						<div className={ styles.errorMessage }>
+							{ __( 'An error occurred while saving settings. Please try again.' ) }
+						</div>
+					) : null }
+					<div className={ styles.fieldList }>
+						<AppearancePicker value={ data.colorScheme } onChange={ onColorSchemeChange } />
+						<PreferenceRow title={ __( 'Language' ) }>
+							<PreferenceSelect
+								label={ __( 'Language' ) }
+								value={ data.locale }
+								options={ LOCALE_ELEMENTS }
+								onChange={ ( locale ) => onChange( { locale } ) }
+							/>
+						</PreferenceRow>
+						<PreferenceRow title={ __( 'Preferred editor' ) }>
+							<PreferenceSelect< SupportedEditor | typeof UNSET >
+								label={ __( 'Preferred editor' ) }
+								value={ data.editor }
+								options={ editorElements( installedApps ) }
+								onChange={ ( editor ) => onChange( { editor } ) }
+							/>
+						</PreferenceRow>
+						<PreferenceRow title={ __( 'Preferred terminal' ) }>
+							<PreferenceSelect< SupportedTerminal | typeof UNSET >
+								label={ __( 'Preferred terminal' ) }
+								value={ data.terminal }
+								options={ terminalElements( installedApps ) }
+								onChange={ ( terminal ) => onChange( { terminal } ) }
+							/>
+						</PreferenceRow>
+						<DefaultSiteDirectoryField
+							value={ data.defaultSiteDirectory }
+							onSelect={ onDefaultSiteDirectorySelect }
+						/>
+						<PreferenceRow title={ __( 'When quitting with running sites' ) }>
+							<PreferenceSelect< QuitSitesBehavior | typeof UNSET >
+								label={ __( 'When quitting with running sites' ) }
+								className={ styles.selectControlWide }
+								value={ data.quitSitesBehavior }
+								options={ QUIT_SITES_BEHAVIOR_ELEMENTS }
+								onChange={ ( quitSitesBehavior ) => onChange( { quitSitesBehavior } ) }
+							/>
+						</PreferenceRow>
+					</div>
+				</section>
+				<StudioCliSection />
+				<KeyboardPanel />
+				<McpSection />
+			</div>
 		</div>
 	);
 }
@@ -390,49 +389,38 @@ export function SettingsView( {
 	};
 
 	return (
-		<div className={ styles.root }>
-			<Tabs.Root
-				selectedTabId={ activeTab }
-				onSelect={ ( tabId ) => {
-					if ( tabId && isSettingsTab( tabId ) ) {
-						onTabChange( tabId );
-					}
-				} }
-			>
-				<SettingsHeader />
+		<SettingsPreviewProvider>
+			<div className={ styles.root }>
+				<Tabs.Root
+					selectedTabId={ activeTab }
+					onSelect={ ( tabId ) => {
+						if ( tabId && isSettingsTab( tabId ) ) {
+							onTabChange( tabId );
+						}
+					} }
+				>
+					<SettingsHeader />
 
-				<div className={ styles.scroll }>
-					<div className={ styles.contentBlock }>
-						<Tabs.Panel tabId="preferences">
-							<PreferencesPanel
-								data={ data }
-								installedApps={ installedApps }
-								saveError={ savePreferences.isError }
-								onColorSchemeChange={ handleColorSchemeChange }
-								onDefaultSiteDirectorySelect={ () => void handleSelectDefaultDirectory() }
-								onChange={ handleChange }
-							/>
-						</Tabs.Panel>
-						{ hasAiSettings( connector.capabilities ) && (
+					<div className={ styles.scroll }>
+						<div className={ styles.contentBlock }>
+							<Tabs.Panel tabId="preferences">
+								<PreferencesPanel
+									data={ data }
+									installedApps={ installedApps }
+									saveError={ savePreferences.isError }
+									onColorSchemeChange={ handleColorSchemeChange }
+									onDefaultSiteDirectorySelect={ () => void handleSelectDefaultDirectory() }
+									onChange={ handleChange }
+								/>
+							</Tabs.Panel>
 							<Tabs.Panel tabId="ai">
 								<AiPanel />
 							</Tabs.Panel>
-						) }
-						<Tabs.Panel tabId="usage">
-							<UsagePanel />
-						</Tabs.Panel>
-						<Tabs.Panel tabId="keyboard">
-							<KeyboardPanel />
-						</Tabs.Panel>
-						<Tabs.Panel tabId="skills">
-							<SkillsPanel />
-						</Tabs.Panel>
-						<Tabs.Panel tabId="mcp">
-							<McpPanel />
-						</Tabs.Panel>
+						</div>
 					</div>
-				</div>
-			</Tabs.Root>
-		</div>
+				</Tabs.Root>
+			</div>
+			{ SHOW_PREVIEW_CONTROLS ? <SettingsPreviewPanel /> : null }
+		</SettingsPreviewProvider>
 	);
 }
diff --git a/apps/ui/src/components/settings-view/keyboard-panel.tsx b/apps/ui/src/components/settings-view/keyboard-panel.tsx
index 5a6946d631..ba784d4bb9 100644
--- a/apps/ui/src/components/settings-view/keyboard-panel.tsx
+++ b/apps/ui/src/components/settings-view/keyboard-panel.tsx
@@ -33,7 +33,7 @@ function getShortcutSections( isApple: boolean ): ShortcutSection[] {
 	const navModifierKey = isApple ? '⌘' : 'Alt';
 	return [
 		{
-			title: __( 'General' ),
+			title: __( 'Global' ),
 			shortcuts: [ { label: __( 'Open settings' ), keys: [ modifierKey, ',' ] } ],
 		},
 		{
@@ -74,20 +74,27 @@ function ShortcutKeys( { keys }: { keys: string[] } ) {
 
 export function KeyboardPanel() {
 	return (
-		<div className={ styles.preferencesPanel }>
+		<section className={ styles.card }>
+			<div className={ styles.cardHeader }>
+				<div className={ styles.cardHeaderText }>
+					<h2 className={ styles.cardTitle }>{ __( 'Keyboard' ) }</h2>
+				</div>
+			</div>
 			{ getShortcutSections( isAppleOS() ).map( ( section ) => (
-				<section key={ section.title } className={ styles.preferenceSectionGroup }>
-					<h2 className={ styles.preferenceSectionHeading }>{ section.title }</h2>
-					<ul className={ styles.shortcutList }>
+				<div key={ section.title } className={ styles.shortcutGroup }>
+					<h3 className={ styles.shortcutGroupTitle }>{ section.title }</h3>
+					<ul className={ styles.list }>
 						{ section.shortcuts.map( ( shortcut ) => (
-							<li key={ shortcut.label } className={ styles.shortcutRow }>
-								<span className={ styles.shortcutName }>{ shortcut.label }</span>
+							<li key={ shortcut.label } className={ styles.field }>
+								<div className={ styles.fieldText }>
+									<span className={ styles.fieldLabel }>{ shortcut.label }</span>
+								</div>
 								<ShortcutKeys keys={ shortcut.keys } />
 							</li>
 						) ) }
 					</ul>
-				</section>
+				</div>
 			) ) }
-		</div>
+		</section>
 	);
 }
diff --git a/apps/ui/src/components/settings-view/mcp-panel.test.tsx b/apps/ui/src/components/settings-view/mcp-panel.test.tsx
index f8549b4bc4..d59b966277 100644
--- a/apps/ui/src/components/settings-view/mcp-panel.test.tsx
+++ b/apps/ui/src/components/settings-view/mcp-panel.test.tsx
@@ -3,7 +3,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { Tooltip } from '@wordpress/ui';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { useConnector } from '@/data/core';
-import { McpPanel } from './mcp-panel';
+import { McpSection } from './mcp-panel';
 import type { ReactNode } from 'react';
 
 vi.mock( '@/components/learn-more', () => ( {
@@ -20,7 +20,7 @@ function Providers( { children }: { children: ReactNode } ) {
 	return <Tooltip.Provider>{ children }</Tooltip.Provider>;
 }
 
-describe( 'McpPanel', () => {
+describe( 'McpSection', () => {
 	const copyText = vi.fn();
 
 	beforeEach( () => {
@@ -30,7 +30,7 @@ describe( 'McpPanel', () => {
 	} );
 
 	it( 'copies the MCP configuration and shows copied feedback once the copy resolves', async () => {
-		render( <McpPanel />, { wrapper: Providers } );
+		render( <McpSection />, { wrapper: Providers } );
 
 		expect( screen.getByRole( 'heading', { name: 'MCP' } ) ).toBeInTheDocument();
 		expect( screen.getByText( /MCP lets other AI tools talk to Studio/ ) ).toBeInTheDocument();
@@ -48,7 +48,7 @@ describe( 'McpPanel', () => {
 		copyText.mockRejectedValueOnce( error );
 
 		try {
-			render( <McpPanel />, { wrapper: Providers } );
+			render( <McpSection />, { wrapper: Providers } );
 
 			fireEvent.click( screen.getByRole( 'button', { name: 'Copy MCP configuration' } ) );
 
diff --git a/apps/ui/src/components/settings-view/mcp-panel.tsx b/apps/ui/src/components/settings-view/mcp-panel.tsx
index aaebedca54..8694eecef2 100644
--- a/apps/ui/src/components/settings-view/mcp-panel.tsx
+++ b/apps/ui/src/components/settings-view/mcp-panel.tsx
@@ -4,28 +4,30 @@ import { CopyButton } from '@/components/copy-button';
 import { LearnMoreLink } from '@/components/learn-more';
 import styles from './style.module.css';
 
-export function McpPanel() {
+export function McpSection() {
 	const configJson = getMcpServerConfigJson();
 
 	return (
-		<div className={ styles.preferencesPanel }>
-			<section className={ styles.preferenceSectionGroup }>
-				<h2 className={ styles.preferenceSectionHeading }>{ __( 'MCP' ) }</h2>
-				<p className={ styles.sectionIntro }>
-					{ __(
-						'MCP lets other AI tools talk to Studio. Use it when you want an assistant outside Studio to create, configure, or inspect your local WordPress sites through the same site controls.'
-					) }{ ' ' }
-					<LearnMoreLink docsLinksKey="docsMcp" />
-				</p>
-				<div className={ styles.codeBlockWrap }>
-					<pre className={ styles.codeBlock }>{ configJson }</pre>
-					<CopyButton
-						text={ configJson }
-						label={ __( 'Copy MCP configuration' ) }
-						className={ styles.codeBlockCopyButton }
-					/>
+		<section className={ styles.card }>
+			<div className={ styles.cardHeader }>
+				<div className={ styles.cardHeaderText }>
+					<h2 className={ styles.cardTitle }>{ __( 'MCP' ) }</h2>
+					<p className={ styles.cardDescription }>
+						{ __(
+							'MCP lets other AI tools talk to Studio. Use it when you want an assistant outside Studio to create, configure, or inspect your local WordPress sites through the same site controls.'
+						) }{ ' ' }
+						<LearnMoreLink docsLinksKey="docsMcp" />
+					</p>
 				</div>
-			</section>
-		</div>
+			</div>
+			<div className={ styles.codeBlockWrap }>
+				<pre className={ styles.codeBlock }>{ configJson }</pre>
+				<CopyButton
+					text={ configJson }
+					label={ __( 'Copy MCP configuration' ) }
+					className={ styles.codeBlockCopyButton }
+				/>
+			</div>
+		</section>
 	);
 }
diff --git a/apps/ui/src/components/settings-view/settings-preview.tsx b/apps/ui/src/components/settings-view/settings-preview.tsx
new file mode 100644
index 0000000000..d7cd9d22ba
--- /dev/null
+++ b/apps/ui/src/components/settings-view/settings-preview.tsx
@@ -0,0 +1,278 @@
+/**
+ * TEMP — design-only scenario control.
+ *
+ * A floating panel (dev builds only) that forces the settings UI signed-in or
+ * signed-out, so we can eyeball how the account sidebar and agent tab adapt
+ * without actually logging out.
+ *
+ * To remove: delete this file, drop `<SettingsPreviewPanel />` +
+ * `SettingsPreviewProvider` from index.tsx, and swap the `usePreview*` hooks
+ * back to `useAuthUser` / `useAgenticFeatures` in account-section.tsx and
+ * usage-panel.tsx.
+ */
+import { createContext, useContext, useMemo, useState } from 'react';
+import { useAgenticFeatures } from '@/data/queries/use-agentic-features';
+import { useAuthUser } from '@/data/queries/use-auth-user';
+import type { AuthUser } from '@/data/core';
+import type { AgenticFeatures } from '@/data/queries/use-agentic-features';
+import type { CSSProperties, ReactNode } from 'react';
+
+export const SHOW_PREVIEW_CONTROLS = import.meta.env.DEV && import.meta.env.MODE !== 'test';
+
+type AuthScenario = 'default' | 'in' | 'out';
+
+interface PreviewOverrides {
+	auth: AuthScenario;
+}
+
+const DEFAULT_OVERRIDES: PreviewOverrides = {
+	auth: 'default',
+};
+
+const PREVIEW_USER: AuthUser = {
+	id: 424242,
+	displayName: 'Preview User',
+	email: 'preview@example.com',
+};
+
+interface PreviewContextValue {
+	overrides: PreviewOverrides;
+	setOverride: ( key: keyof PreviewOverrides, value: string ) => void;
+	reset: () => void;
+	active: boolean;
+}
+
+const PreviewContext = createContext< PreviewContextValue >( {
+	overrides: DEFAULT_OVERRIDES,
+	setOverride: () => {},
+	reset: () => {},
+	active: false,
+} );
+
+export function SettingsPreviewProvider( { children }: { children: ReactNode } ) {
+	const [ overrides, setOverrides ] = useState< PreviewOverrides >( DEFAULT_OVERRIDES );
+
+	const value = useMemo< PreviewContextValue >(
+		() => ( {
+			overrides,
+			setOverride: ( key, next ) =>
+				setOverrides( ( prev ) => ( { ...prev, [ key ]: next } ) as PreviewOverrides ),
+			reset: () => setOverrides( DEFAULT_OVERRIDES ),
+			active: Object.values( overrides ).some( ( scenario ) => scenario !== 'default' ),
+		} ),
+		[ overrides ]
+	);
+
+	return <PreviewContext.Provider value={ value }>{ children }</PreviewContext.Provider>;
+}
+
+function usePreviewOverrides() {
+	return useContext( PreviewContext );
+}
+
+// --- Override-aware wrappers around the real data hooks ---------------------
+
+export function usePreviewAuthUser(): { data: AuthUser | null | undefined; isLoading: boolean } {
+	const { overrides } = usePreviewOverrides();
+	const { data, isLoading } = useAuthUser();
+
+	if ( overrides.auth === 'in' ) {
+		return { data: data ?? PREVIEW_USER, isLoading: false };
+	}
+	if ( overrides.auth === 'out' ) {
+		return { data: null, isLoading: false };
+	}
+	return { data, isLoading };
+}
+
+export function usePreviewAgenticFeatures(): AgenticFeatures & { isReady: boolean } {
+	const { overrides } = usePreviewOverrides();
+	const real = useAgenticFeatures();
+
+	if ( overrides.auth === 'out' ) {
+		return { enabled: false, reason: 'signed-out', isReady: true };
+	}
+	// Forcing signed-in only clears a signed-out reason — offline still wins.
+	if ( overrides.auth === 'in' && real.reason === 'signed-out' ) {
+		return { enabled: true, reason: null, isReady: true };
+	}
+	return real;
+}
+
+// --- Floating control panel -------------------------------------------------
+
+const SCENARIO_GROUPS: {
+	key: keyof PreviewOverrides;
+	label: string;
+	options: { value: string; label: string }[];
+}[] = [
+	{
+		key: 'auth',
+		label: 'Account',
+		options: [
+			{ value: 'default', label: 'Default' },
+			{ value: 'in', label: 'Signed in' },
+			{ value: 'out', label: 'Signed out' },
+		],
+	},
+];
+
+const panelStyle: CSSProperties = {
+	position: 'fixed',
+	insetBlockEnd: '16px',
+	insetInlineEnd: '16px',
+	zIndex: 9999,
+	inlineSize: '244px',
+	display: 'flex',
+	flexDirection: 'column',
+	gap: '12px',
+	padding: '14px',
+	borderRadius: '10px',
+	border: '1px solid var(--wpds-color-stroke-surface-neutral)',
+	background: 'var(--wpds-color-bg-surface-neutral)',
+	color: 'var(--wpds-color-fg-content-neutral)',
+	boxShadow: '0 8px 28px rgba(0, 0, 0, 0.24)',
+	fontFamily: 'var(--wpds-typography-font-family-body)',
+	fontSize: 'var(--wpds-typography-font-size-sm)',
+};
+
+const headerStyle: CSSProperties = {
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'space-between',
+	gap: '8px',
+};
+
+const titleStyle: CSSProperties = {
+	fontWeight: 600,
+	fontSize: 'var(--wpds-typography-font-size-md)',
+};
+
+const hintStyle: CSSProperties = {
+	margin: 0,
+	color: 'var(--wpds-color-fg-content-neutral-weak)',
+	fontSize: 'var(--wpds-typography-font-size-xs)',
+	lineHeight: 'var(--wpds-typography-line-height-sm)',
+};
+
+const rowStyle: CSSProperties = {
+	display: 'flex',
+	flexDirection: 'column',
+	gap: '5px',
+};
+
+const rowLabelStyle: CSSProperties = {
+	color: 'var(--wpds-color-fg-content-neutral-weak)',
+	fontSize: 'var(--wpds-typography-font-size-xs)',
+	textTransform: 'uppercase',
+	letterSpacing: '0.04em',
+};
+
+const segStyle: CSSProperties = {
+	display: 'grid',
+	gridTemplateColumns: 'repeat(3, 1fr)',
+	gap: '3px',
+	padding: '3px',
+	borderRadius: 'var(--wpds-border-radius-sm)',
+	background: 'var(--wpds-color-bg-interactive-neutral-weak)',
+};
+
+function segButtonStyle( selected: boolean ): CSSProperties {
+	return {
+		appearance: 'none',
+		border: 0,
+		borderRadius: 'var(--wpds-border-radius-sm)',
+		padding: '4px 6px',
+		fontSize: 'var(--wpds-typography-font-size-xs)',
+		fontWeight: selected ? 600 : 400,
+		lineHeight: 1.4,
+		cursor: 'pointer',
+		background: selected ? 'var(--wpds-color-fg-content-neutral)' : 'transparent',
+		color: selected
+			? 'var(--wpds-color-bg-surface-neutral)'
+			: 'var(--wpds-color-fg-content-neutral-weak)',
+	};
+}
+
+const iconButtonStyle: CSSProperties = {
+	appearance: 'none',
+	border: 0,
+	background: 'transparent',
+	color: 'var(--wpds-color-fg-content-neutral-weak)',
+	cursor: 'pointer',
+	fontSize: 'var(--wpds-typography-font-size-md)',
+	lineHeight: 1,
+	padding: '2px 4px',
+};
+
+const collapsedButtonStyle: CSSProperties = {
+	...panelStyle,
+	inlineSize: 'auto',
+	flexDirection: 'row',
+	alignItems: 'center',
+	gap: '6px',
+	padding: '8px 12px',
+	cursor: 'pointer',
+	fontWeight: 600,
+};
+
+export function SettingsPreviewPanel() {
+	const { overrides, setOverride, reset, active } = usePreviewOverrides();
+	const [ open, setOpen ] = useState( true );
+
+	if ( ! open ) {
+		return (
+			<button type="button" style={ collapsedButtonStyle } onClick={ () => setOpen( true ) }>
+				Scenarios{ active ? ' •' : '' }
+			</button>
+		);
+	}
+
+	return (
+		<aside style={ panelStyle } aria-label="Preview scenarios">
+			<div style={ headerStyle }>
+				<span style={ titleStyle }>Preview scenarios</span>
+				<div style={ { display: 'flex', alignItems: 'center', gap: '2px' } }>
+					<button
+						type="button"
+						style={ { ...iconButtonStyle, opacity: active ? 1 : 0.4 } }
+						disabled={ ! active }
+						onClick={ reset }
+					>
+						Reset
+					</button>
+					<button
+						type="button"
+						style={ iconButtonStyle }
+						aria-label="Hide preview scenarios"
+						onClick={ () => setOpen( false ) }
+					>
+						×
+					</button>
+				</div>
+			</div>
+			<p style={ hintStyle }>Design-only. Not shown in production builds.</p>
+			{ SCENARIO_GROUPS.map( ( group ) => (
+				<div key={ group.key } style={ rowStyle }>
+					<span style={ rowLabelStyle }>{ group.label }</span>
+					<div style={ segStyle } role="group" aria-label={ group.label }>
+						{ group.options.map( ( option ) => {
+							const selected = overrides[ group.key ] === option.value;
+							return (
+								<button
+									key={ option.value }
+									type="button"
+									aria-pressed={ selected }
+									style={ segButtonStyle( selected ) }
+									onClick={ () => setOverride( group.key, option.value ) }
+								>
+									{ option.label }
+								</button>
+							);
+						} ) }
+					</div>
+				</div>
+			) ) }
+		</aside>
+	);
+}
diff --git a/apps/ui/src/components/settings-view/skills-panel.tsx b/apps/ui/src/components/settings-view/skills-panel.tsx
index eb069d25aa..0da34ea6b7 100644
--- a/apps/ui/src/components/settings-view/skills-panel.tsx
+++ b/apps/ui/src/components/settings-view/skills-panel.tsx
@@ -28,17 +28,19 @@ function SkillRow( {
 	onToggle: () => void;
 } ) {
 	return (
-		<li className={ styles.skillRow }>
-			<div className={ styles.skillDetails }>
-				<span className={ styles.skillName }>{ skill.displayName }</span>
-				<span className={ styles.skillDescription }>{ skill.description }</span>
+		<li className={ styles.listRow }>
+			<div className={ styles.listItemText }>
+				<span className={ styles.listItemTitle }>{ skill.displayName }</span>
+				<span className={ styles.listItemDescription }>{ skill.description }</span>
+			</div>
+			<div className={ styles.toggleControl }>
+				<FormToggle
+					checked={ checked }
+					disabled={ disabled }
+					aria-label={ skill.displayName }
+					onChange={ onToggle }
+				/>
 			</div>
-			<FormToggle
-				checked={ checked }
-				disabled={ disabled }
-				aria-label={ skill.displayName }
-				onChange={ onToggle }
-			/>
 		</li>
 	);
 }
@@ -68,54 +70,54 @@ export function SkillsPanel() {
 	};
 
 	return (
-		<div className={ styles.skillsPanel }>
-			<section className={ styles.settingsPanelSection }>
-				<div className={ styles.settingsPanelHeader }>
-					<div className={ styles.skillsHeaderRow }>
-						<h2>{ __( 'Skills' ) }</h2>
-						{ availableSkills.length > 0 ? (
-							<Button
-								type="button"
-								variant="outline"
-								tone="neutral"
-								size="compact"
-								disabled={ installAllSkills.isPending }
-								loading={ installAllSkills.isPending }
-								loadingAnnouncement={ __( 'Installing all skills' ) }
-								onClick={ () =>
-									installAllSkills.mutate( availableSkills.map( ( skill ) => skill.id ) )
-								}
-							>
-								{ __( 'Install all' ) }
-							</Button>
-						) : null }
-					</div>
-					<p>
+		<section className={ styles.card }>
+			<div className={ styles.cardHeader }>
+				<div className={ styles.cardHeaderText }>
+					<h2 className={ styles.cardTitle }>{ __( 'Skills' ) }</h2>
+					<p className={ styles.cardDescription }>
 						{ __(
 							'Skills are reusable instructions that teach agents how to complete specialized WordPress tasks. Enable the ones you want Studio to add to sites so agents have the right context before they start working.'
 						) }{ ' ' }
 						<LearnMoreLink docsLinksKey="docsSkills" />
 					</p>
 				</div>
-				{ visibleError ? <div className={ styles.errorMessage }>{ visibleError }</div> : null }
-				{ isLoading ? <div className={ styles.state }>{ __( 'Loading skills…' ) }</div> : null }
-				{ ! isLoading && skillList.length === 0 ? (
-					<div className={ styles.state }>{ __( 'No skills are available.' ) }</div>
-				) : null }
-				{ skillList.length > 0 ? (
-					<ul className={ styles.skillList }>
-						{ skillList.map( ( skill ) => (
-							<SkillRow
-								key={ skill.id }
-								skill={ skill }
-								checked={ skill.installed }
-								disabled={ installAllSkills.isPending }
-								onToggle={ () => handleToggle( skill ) }
-							/>
-						) ) }
-					</ul>
+				{ availableSkills.length > 0 ? (
+					<div className={ styles.cardHeaderActions }>
+						<Button
+							type="button"
+							variant="outline"
+							tone="neutral"
+							size="compact"
+							disabled={ installAllSkills.isPending }
+							loading={ installAllSkills.isPending }
+							loadingAnnouncement={ __( 'Installing all skills' ) }
+							onClick={ () =>
+								installAllSkills.mutate( availableSkills.map( ( skill ) => skill.id ) )
+							}
+						>
+							{ __( 'Install all' ) }
+						</Button>
+					</div>
 				) : null }
-			</section>
-		</div>
+			</div>
+			{ visibleError ? <div className={ styles.errorMessage }>{ visibleError }</div> : null }
+			{ isLoading ? <div className={ styles.state }>{ __( 'Loading skills…' ) }</div> : null }
+			{ ! isLoading && skillList.length === 0 ? (
+				<div className={ styles.state }>{ __( 'No skills are available.' ) }</div>
+			) : null }
+			{ skillList.length > 0 ? (
+				<ul className={ styles.list }>
+					{ skillList.map( ( skill ) => (
+						<SkillRow
+							key={ skill.id }
+							skill={ skill }
+							checked={ skill.installed }
+							disabled={ installAllSkills.isPending }
+							onToggle={ () => handleToggle( skill ) }
+						/>
+					) ) }
+				</ul>
+			) : null }
+		</section>
 	);
 }
diff --git a/apps/ui/src/components/settings-view/studio-cli-section.tsx b/apps/ui/src/components/settings-view/studio-cli-section.tsx
index 31cdefaad7..13529d2d45 100644
--- a/apps/ui/src/components/settings-view/studio-cli-section.tsx
+++ b/apps/ui/src/components/settings-view/studio-cli-section.tsx
@@ -47,42 +47,44 @@ export function StudioCliSection() {
 	);
 
 	return (
-		<section className={ styles.preferenceSectionGroup }>
-			<div className={ styles.cliHeader }>
-				<h2 className={ clsx( styles.preferenceSectionHeading, styles.cliHeading ) }>
-					{ __( 'Studio CLI' ) }
-				</h2>
-				{ externallyManaged ? (
-					// The default open delay reads as unresponsive on a disabled
-					// control, so this tooltip gets its own faster provider.
-					<Tooltip.Provider delay={ 200 }>
-						<Tooltip.Root>
-							<Tooltip.Trigger
-								render={ <span className={ styles.cliToggleTrigger }>{ toggle }</span> }
-							/>
-							<Tooltip.Popup
-								className={ styles.cliTooltip }
-								positioner={ <Tooltip.Positioner side="top" /> }
-							>
-								{ __(
-									'This studio command was installed with the standalone CLI installer, so Studio can’t manage it. Run studio uninstall in a terminal to remove it.'
-								) }
-							</Tooltip.Popup>
-						</Tooltip.Root>
-					</Tooltip.Provider>
-				) : (
-					toggle
-				) }
+		<section className={ styles.card }>
+			<div className={ styles.cardHeader }>
+				<div className={ styles.cardHeaderText }>
+					<h2 className={ styles.cardTitle }>{ __( 'Studio CLI' ) }</h2>
+					<p className={ styles.cardDescription }>
+						{ __( 'Use the studio command in any terminal to manage sites and run WP-CLI.' ) }{ ' ' }
+						<LearnMoreLink docsLinksKey="docsCli" />
+					</p>
+				</div>
+				<div className={ clsx( styles.cardHeaderActions, styles.toggleControl ) }>
+					{ externallyManaged ? (
+						// The default open delay reads as unresponsive on a disabled
+						// control, so this tooltip gets its own faster provider.
+						<Tooltip.Provider delay={ 200 }>
+							<Tooltip.Root>
+								<Tooltip.Trigger
+									render={ <span className={ styles.cliToggleTrigger }>{ toggle }</span> }
+								/>
+								<Tooltip.Popup
+									className={ styles.cliTooltip }
+									positioner={ <Tooltip.Positioner side="top" /> }
+								>
+									{ __(
+										'This studio command was installed with the standalone CLI installer, so Studio can’t manage it. Run studio uninstall in a terminal to remove it.'
+									) }
+								</Tooltip.Popup>
+							</Tooltip.Root>
+						</Tooltip.Provider>
+					) : (
+						toggle
+					) }
+				</div>
 			</div>
 			{ savePreferences.isError ? (
 				<div className={ styles.errorMessage }>
 					{ __( 'An error occurred while updating the Studio CLI. Please try again.' ) }
 				</div>
 			) : null }
-			<p className={ styles.cliDescription }>
-				{ __( 'Use the studio command in any terminal to manage sites and run WP-CLI.' ) }{ ' ' }
-				<LearnMoreLink docsLinksKey="docsCli" />
-			</p>
 		</section>
 	);
 }
diff --git a/apps/ui/src/components/settings-view/studio-code-panel.test.tsx b/apps/ui/src/components/settings-view/studio-code-panel.test.tsx
index 4a519b47d4..6fabe052c2 100644
--- a/apps/ui/src/components/settings-view/studio-code-panel.test.tsx
+++ b/apps/ui/src/components/settings-view/studio-code-panel.test.tsx
@@ -7,18 +7,19 @@ import {
 } from '@/data/queries/use-agent-instructions';
 import { StudioCodePanel } from './studio-code-panel';
 
-vi.mock( '@wordpress/dataviews', () => ( {
-	DataForm: ( {
-		data,
-		onChange,
-	}: {
-		data: { content: string };
-		onChange: ( update: { content: string } ) => void;
+vi.mock( '@wordpress/components', () => ( {
+	FormToggle: ( props: {
+		checked: boolean;
+		disabled?: boolean;
+		'aria-label'?: string;
+		onChange: () => void;
 	} ) => (
-		<textarea
-			aria-label="Instructions"
-			value={ data.content }
-			onChange={ ( event ) => onChange( { content: event.target.value } ) }
+		<input
+			type="checkbox"
+			aria-label={ props[ 'aria-label' ] }
+			checked={ props.checked }
+			disabled={ props.disabled }
+			onChange={ props.onChange }
 		/>
 	),
 } ) );
@@ -91,4 +92,31 @@ describe( 'StudioCodePanel', () => {
 			screen.getByText( 'Saving the instructions failed. Please try again.' )
 		).toBeInTheDocument();
 	} );
+
+	it( 'keeps the editor hidden until the switch is enabled', () => {
+		useAgentInstructionsMock.mockReturnValue( { data: '' } as never );
+
+		render( <StudioCodePanel /> );
+
+		const toggle = screen.getByRole( 'checkbox', { name: 'Enable instructions' } );
+		expect( toggle ).not.toBeChecked();
+		expect( screen.queryByLabelText( 'Instructions' ) ).not.toBeInTheDocument();
+
+		fireEvent.click( toggle );
+
+		expect( screen.getByLabelText( 'Instructions' ) ).toBeInTheDocument();
+	} );
+
+	it( 'clears the saved instructions when the switch is turned off', () => {
+		render( <StudioCodePanel /> );
+
+		// Existing instructions default the switch on, so the first click turns it off.
+		fireEvent.click( screen.getByRole( 'checkbox', { name: 'Enable instructions' } ) );
+
+		expect( screen.queryByLabelText( 'Instructions' ) ).not.toBeInTheDocument();
+
+		act( () => void vi.advanceTimersByTime( 800 ) );
+
+		expect( save ).toHaveBeenCalledWith( '' );
+	} );
 } );
diff --git a/apps/ui/src/components/settings-view/studio-code-panel.tsx b/apps/ui/src/components/settings-view/studio-code-panel.tsx
index 7c15f9b512..21b044c88d 100644
--- a/apps/ui/src/components/settings-view/studio-code-panel.tsx
+++ b/apps/ui/src/components/settings-view/studio-code-panel.tsx
@@ -1,35 +1,13 @@
 import { GLOBAL_INSTRUCTIONS_MAX_LENGTH } from '@studio/common/ai/global-instructions';
-import { DataForm } from '@wordpress/dataviews';
+import { FormToggle } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { clsx } from 'clsx';
 import { useEffect, useRef, useState } from 'react';
 import {
 	useAgentInstructions,
 	useSaveAgentInstructions,
 } from '@/data/queries/use-agent-instructions';
 import styles from './style.module.css';
-import type { Field, Form } from '@wordpress/dataviews';
-
-interface FormData {
-	content: string;
-}
-
-const FIELDS: Field< FormData >[] = [
-	{
-		id: 'content',
-		type: 'text',
-		label: __( 'Instructions' ),
-		description: __(
-			'Global instructions for the Studio Code agent. They are included in every new conversation, across all sites.'
-		),
-		placeholder: __( 'e.g. Always answer in French. My sites are for restaurants.' ),
-		Edit: { control: 'textarea', rows: 12 },
-	},
-];
-
-const FORM: Form = {
-	layout: { type: 'regular', labelPosition: 'top' },
-	fields: [ 'content' ],
-};
 
 // Long enough that a normal typing burst lands as one write, short enough that
 // the save still feels immediate when the user pauses.
@@ -39,9 +17,13 @@ export function StudioCodePanel() {
 	const { data: saved } = useAgentInstructions();
 	const { mutate: save, isError } = useSaveAgentInstructions();
 	const [ edits, setEdits ] = useState< string | null >( null );
+	// null until the user flips the switch, so the toggle defaults to on
+	// whenever there are already saved instructions.
+	const [ userEnabled, setUserEnabled ] = useState< boolean | null >( null );
 
 	const content = edits ?? saved ?? '';
 	const isDirty = saved !== undefined && content !== saved;
+	const enabled = userEnabled ?? ( saved?.length ?? 0 ) > 0;
 
 	const pending = useRef< string | null >( null );
 
@@ -71,32 +53,64 @@ export function StudioCodePanel() {
 		return <div className={ styles.state }>{ __( 'Loading…' ) }</div>;
 	}
 
-	const showCounter = content.length >= GLOBAL_INSTRUCTIONS_MAX_LENGTH * 0.8;
+	const showCounter = enabled && content.length >= GLOBAL_INSTRUCTIONS_MAX_LENGTH * 0.8;
+
+	// Turning the switch off both hides the editor and clears the stored
+	// instructions, so "off" genuinely means the agent gets none.
+	const handleToggle = () => {
+		if ( enabled ) {
+			setUserEnabled( false );
+			setEdits( '' );
+		} else {
+			setUserEnabled( true );
+		}
+	};
 
 	return (
-		<div className={ styles.preferencesPanel }>
-			<DataForm< FormData >
-				data={ { content } }
-				fields={ FIELDS }
-				form={ FORM }
-				onChange={ ( update ) =>
-					setEdits(
-						( ( update.content as string ) ?? '' ).slice( 0, GLOBAL_INSTRUCTIONS_MAX_LENGTH )
-					)
-				}
-			/>
-			{ isError && (
-				<p className={ styles.instructionsError }>
-					{ __( 'Saving the instructions failed. Please try again.' ) }
-				</p>
-			) }
-			{ showCounter && (
-				<div className={ styles.actions }>
-					<span className={ styles.instructionsCounter }>
-						{ `${ content.length.toLocaleString() } / ${ GLOBAL_INSTRUCTIONS_MAX_LENGTH.toLocaleString() }` }
-					</span>
+		<section className={ styles.card }>
+			<div className={ styles.cardHeader }>
+				<div className={ styles.cardHeaderText }>
+					<h2 className={ styles.cardTitle }>{ __( 'Instructions' ) }</h2>
+					<p className={ styles.cardDescription }>
+						{ __(
+							'Global instructions for the Studio Code agent. They are included in every new conversation, across all sites.'
+						) }
+					</p>
+				</div>
+				<div className={ clsx( styles.cardHeaderActions, styles.toggleControl ) }>
+					<FormToggle
+						checked={ enabled }
+						aria-label={ __( 'Enable instructions' ) }
+						onChange={ handleToggle }
+					/>
 				</div>
+			</div>
+			{ enabled && (
+				<>
+					<textarea
+						className={ styles.instructionsTextarea }
+						aria-label={ __( 'Instructions' ) }
+						rows={ 12 }
+						placeholder={ __( 'e.g. Always answer in French. My sites are for restaurants.' ) }
+						value={ content }
+						onChange={ ( event ) =>
+							setEdits( event.target.value.slice( 0, GLOBAL_INSTRUCTIONS_MAX_LENGTH ) )
+						}
+					/>
+					{ isError && (
+						<p className={ styles.instructionsError }>
+							{ __( 'Saving the instructions failed. Please try again.' ) }
+						</p>
+					) }
+					{ showCounter && (
+						<div className={ styles.actions }>
+							<span className={ styles.instructionsCounter }>
+								{ `${ content.length.toLocaleString() } / ${ GLOBAL_INSTRUCTIONS_MAX_LENGTH.toLocaleString() }` }
+							</span>
+						</div>
+					) }
+				</>
 			) }
-		</div>
+		</section>
 	);
 }
diff --git a/apps/ui/src/components/settings-view/style.module.css b/apps/ui/src/components/settings-view/style.module.css
index dda03774f9..36a553d147 100644
--- a/apps/ui/src/components/settings-view/style.module.css
+++ b/apps/ui/src/components/settings-view/style.module.css
@@ -1,6 +1,28 @@
+/* ==========================================================================
+   Settings design system
+   --------------------------------------------------------------------------
+   Every settings tab is built from the same primitives:
+
+     .panel   — a tab's centered column of cards
+     .card    — a bordered section: a header followed by body content
+                (.cardHeader, .cardHeaderText, .cardTitle, .cardDescription,
+                 .cardHeaderActions for a trailing control)
+     .field   — a labelled control row inside a card
+                (.fieldText, .fieldLabel, .fieldDescription, .fieldControl)
+     .listRow — a rich list item inside a card
+                (.listItemText, .listItemTitle, .listItemDescription)
+     .meter   — a usage readout inside a card
+                (.meterHeader, .meterTitle, .meterText + progress bars)
+
+   Card titles are always lg/600. Field/list/meter titles are the smaller
+   in-card level. Rows share one divider (--settings-divider-border) and one
+   vertical rhythm (--settings-row-padding-block).
+   ========================================================================== */
+
 .root {
-	--settings-content-width: 760px;
 	--settings-form-width: 560px;
+	--settings-wide-width: 880px;
+	--settings-aside-width: 260px;
 	--settings-divider-border: 1px dotted
 		color-mix(in srgb, var(--wpds-color-stroke-surface-neutral) 72%, transparent);
 	--settings-row-padding-block: calc(var(--wpds-dimension-padding-md) + 2px);
@@ -18,6 +40,8 @@
 	line-height: var(--wpds-typography-line-height-md);
 }
 
+/* ---- Shell: fullscreen header with centered tab strip -------------------- */
+
 .header {
 	display: grid;
 	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
@@ -107,47 +131,48 @@
 	overflow-y: auto;
 }
 
+/* Full-width scroll padding; each panel sets its own max-width and centers,
+   so the two-column Settings layout can be wider than the single-column tabs. */
 .contentBlock {
 	box-sizing: border-box;
 	width: 100%;
-	max-width: var(--settings-content-width);
-	margin: 0 auto;
 	padding: var(--wpds-dimension-padding-2xl) var(--wpds-dimension-padding-xl)
 		var(--wpds-dimension-padding-2xl);
 }
 
-.preferencesPanel {
-	display: flex;
-	flex-direction: column;
+/* ---- Layout: one centered column that becomes two when there's room — a
+   narrow Account aside beside the wider main column (both Settings and Agent). */
+.settingsLayout {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
 	gap: var(--wpds-dimension-padding-xl);
 	width: 100%;
 	max-width: var(--settings-form-width);
 	margin: 0 auto;
 }
 
-.actions {
+.settingsMain {
 	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: var(--wpds-dimension-padding-md);
+	flex-direction: column;
+	gap: var(--wpds-dimension-padding-xl);
+	min-width: 0;
 }
 
-.instructionsCounter {
-	font-size: var(--wpds-typography-font-size-sm);
-	color: var(--wpds-color-fg-content-neutral-weak);
+@media (min-width: 900px) {
+	.settingsLayout {
+		grid-template-columns: var(--settings-aside-width) minmax(0, 1fr);
+		align-items: start;
+		max-width: var(--settings-wide-width);
+	}
 }
 
-.instructionsError {
-	margin: 0;
-	font-size: var(--wpds-typography-font-size-sm);
-	color: var(--wpds-color-fg-content-error);
-}
+/* ---- Card ---------------------------------------------------------------- */
 
-.preferenceSectionGroup {
+.card {
 	box-sizing: border-box;
 	display: flex;
 	flex-direction: column;
-	gap: 0;
+	gap: var(--wpds-dimension-padding-lg);
 	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-xl)
 		var(--wpds-dimension-padding-xl);
 	border: 1px solid var(--wpds-color-stroke-surface-neutral);
@@ -155,15 +180,74 @@
 	background: color-mix(in srgb, var(--wpds-color-bg-surface-neutral-weak) 56%, transparent);
 }
 
-.preferenceSectionHeading {
-	margin: 0 0 var(--wpds-dimension-padding-md);
+/* A card header: a title/description block on the left, an optional trailing
+   control (toggle, buttons) on the right. The text block grows so long
+   descriptions wrap instead of pushing the control off the row. */
+.cardHeader {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--wpds-dimension-padding-xl);
+}
+
+.cardHeaderText {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: var(--wpds-dimension-padding-xs);
+	min-width: 0;
+}
+
+.cardTitle {
+	margin: 0;
 	color: var(--wpds-color-fg-content-neutral);
 	font-size: var(--wpds-typography-font-size-lg);
 	font-weight: 600;
 	line-height: var(--wpds-typography-line-height-md);
 }
 
-.preferenceRow {
+.cardDescription {
+	margin: 0;
+	color: var(--wpds-color-fg-content-neutral-weak);
+	font-size: var(--wpds-typography-font-size-sm);
+	/* Pair sm text with the sm line-height (20px). line-height-md (24px) is the
+	   md pairing and double-spaces 12px text. */
+	line-height: var(--wpds-typography-line-height-sm);
+}
+
+/* A card whose setting is unavailable (e.g. agentic features while signed out):
+   mute the heading text to match its disabled control. */
+.cardDisabled .cardTitle,
+.cardDisabled .cardDescription {
+	color: var(--wpds-color-fg-interactive-neutral-disabled);
+}
+
+/* Trailing control(s) in a card header. Reserves a compact-button height so a
+   header doesn't jump when an optional action (e.g. Skills' "Install all")
+   appears or disappears. */
+.cardHeaderActions {
+	display: flex;
+	align-items: center;
+	gap: var(--wpds-dimension-padding-md);
+	flex-shrink: 0;
+	flex-wrap: wrap;
+	min-block-size: 32px;
+}
+
+/* ---- Field: a labelled control row inside a card ------------------------- */
+
+.fieldList {
+	display: flex;
+	flex-direction: column;
+}
+
+.list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.field {
 	display: grid;
 	grid-template-columns: minmax(0, 1fr) max-content;
 	align-items: center;
@@ -172,20 +256,23 @@
 	border-bottom: var(--settings-divider-border);
 }
 
-.preferenceRow:last-child {
+.field:first-child {
+	padding-block-start: 0;
+}
+
+.field:last-child {
 	padding-block-end: 0;
 	border-bottom: 0;
 }
 
-.preferenceText {
+.fieldText {
 	display: flex;
 	flex-direction: column;
 	gap: var(--wpds-dimension-padding-xs);
 	min-width: 0;
 }
 
-.preferenceText h2 {
-	margin: 0;
+.fieldLabel {
 	color: var(--wpds-color-fg-content-neutral);
 	font-size: var(--wpds-typography-font-size-md);
 	font-weight: 400;
@@ -193,268 +280,558 @@
 	white-space: nowrap;
 }
 
-.preferenceText p {
-	margin: 0;
+.fieldDescription {
 	color: var(--wpds-color-fg-content-neutral-weak);
 	font-size: var(--wpds-typography-font-size-sm);
 	line-height: var(--wpds-typography-line-height-sm);
 }
 
-.preferenceControl {
+.fieldControl {
 	display: flex;
 	justify-content: flex-end;
 	min-width: 0;
 	inline-size: 100%;
 }
 
-.appearancePicker {
-	position: relative;
+/* ---- List row: a rich list item inside a card --------------------------- */
+
+.listRow {
 	display: grid;
-	grid-template-columns: repeat(3, minmax(72px, 1fr));
+	grid-template-columns: minmax(0, 1fr) auto;
 	align-items: center;
-	gap: 0;
-	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
-	border-radius: var(--wpds-border-radius-sm);
-	background: var(--wpds-color-bg-interactive-neutral-weak);
-	color: var(--wpds-color-fg-interactive-neutral);
-	font-family: var(--wpds-typography-font-family-body);
-	font-size: var(--wpds-typography-font-size-md);
-	line-height: 1;
-}
-
-.appearancePicker::before {
-	content: '';
-	position: absolute;
-	inset-block: calc(var(--wpds-border-width-xs) * -1);
-	inset-inline-start: 0;
-	box-sizing: border-box;
-	inline-size: calc(100% / 3);
-	border: 1px solid var(--wpds-color-stroke-interactive-neutral);
-	border-radius: var(--wpds-border-radius-sm);
-	background: var(--wpds-color-bg-interactive-neutral-weak);
-	pointer-events: none;
-	transform: translateX(calc(var(--appearance-active-index, 0) * 100%));
-}
-
-/* The indicator is positioned with a logical inset but animated with a
-   physical translateX, so RTL needs the sign flipped to slide toward the
-   selected option instead of away from it. */
-.appearancePicker:dir(rtl)::before {
-	transform: translateX(calc(var(--appearance-active-index, 0) * -100%));
+	column-gap: var(--wpds-dimension-padding-xl);
+	padding-block: var(--wpds-dimension-padding-lg);
+	border-bottom: var(--settings-divider-border);
 }
 
-.appearancePicker[data-active-index='0'] {
-	--appearance-active-index: 0;
+.listRow:first-child {
+	padding-block-start: 0;
 }
 
-.appearancePicker[data-active-index='1'] {
-	--appearance-active-index: 1;
+.listRow:last-child {
+	padding-block-end: 0;
+	border-bottom: 0;
 }
 
-.appearancePicker[data-active-index='2'] {
-	--appearance-active-index: 2;
+.listItemText {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
 }
 
-@media not (prefers-reduced-motion) {
-	.appearancePicker::before {
-		transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
-	}
+.listItemTitle {
+	color: var(--wpds-color-fg-content-neutral);
+	font-size: var(--wpds-typography-font-size-sm);
+	font-weight: 600;
+	line-height: var(--wpds-typography-line-height-sm);
 }
 
-.appearanceButton {
-	position: relative;
-	z-index: 1;
-	min-height: 32px;
-	padding: 0 var(--wpds-dimension-padding-lg);
-	border: 0;
-	border-radius: var(--wpds-border-radius-sm);
-	background: transparent;
+.listItemDescription {
 	color: var(--wpds-color-fg-content-neutral-weak);
-	font: inherit;
-	/* Match SelectControl's trigger text so all controls in a card read the
-	   same size. */
-	font-size: var(--wpds-typography-font-size-md);
+	font-size: var(--wpds-typography-font-size-sm);
 	line-height: var(--wpds-typography-line-height-sm);
-	cursor: pointer;
-}
-
-.appearanceButton:hover,
-.appearanceButtonActive {
-	color: var(--wpds-color-fg-content-neutral);
-}
-
-.appearanceButton:focus-visible,
-.selectControl:focus-visible {
-	outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus-brand);
-	outline-offset: 2px;
-}
-
-.selectControl {
-	inline-size: 156px;
-	max-inline-size: 100%;
-}
-
-/* Stretch the trigger to the control's width, but skip the visually-hidden
-   label `hideLabelFromVision` renders: it's absolutely positioned, so
-   stretching it makes it hang past the layout and create horizontal
-   overflow. */
-.selectControl > *:not([data-visually-hidden]) {
-	inline-size: 100%;
-}
-
-.selectControlWide {
-	inline-size: 240px;
-}
-
-.accountSectionHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--wpds-dimension-padding-xl);
-	margin-block-end: var(--wpds-dimension-padding-xl);
 }
 
-.accountHeading {
-	margin-block-end: 0;
-}
+/* ---- Meter: a usage readout inside a card -------------------------------- */
 
-.accountActions {
+.meter {
 	display: flex;
+	flex-direction: column;
+	align-items: stretch;
 	gap: var(--wpds-dimension-padding-md);
-	flex-wrap: wrap;
 }
 
-.accountSummary {
+/* Title (+ inline meta) on the left, figure (+ optional menu) on the right. */
+.meterHeader {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: var(--wpds-dimension-padding-xl);
-	min-width: 0;
-}
-
-.accountIdentity {
-	display: flex;
-	align-items: center;
 	gap: var(--wpds-dimension-padding-md);
 	min-width: 0;
 }
 
-.accountAvatar {
-	flex: 0 0 44px;
-	inline-size: 44px;
-	block-size: 44px;
-	border-radius: 50%;
-	object-fit: cover;
-}
-
-.accountDetails {
+.meterHeaderEnd {
 	display: flex;
-	flex-direction: column;
-	gap: 2px;
-	min-width: 0;
+	align-items: center;
+	gap: var(--wpds-dimension-padding-xs);
+	flex-shrink: 0;
 }
 
-.accountDetails h2 {
+.meterTitle {
 	margin: 0;
 	color: var(--wpds-color-fg-content-neutral);
 	font-size: var(--wpds-typography-font-size-md);
 	font-weight: 600;
 	line-height: var(--wpds-typography-line-height-sm);
+	white-space: nowrap;
 }
 
-.accountDetails p {
-	margin: 0;
+.meterMeta {
 	color: var(--wpds-color-fg-content-neutral-weak);
 	font-size: var(--wpds-typography-font-size-sm);
 	line-height: var(--wpds-typography-line-height-sm);
-	overflow-wrap: anywhere;
+	white-space: nowrap;
 }
 
-.pathPickerButton {
-	box-sizing: border-box;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--wpds-dimension-padding-lg);
-	inline-size: 240px;
-	max-inline-size: 100%;
-	min-block-size: 36px;
-	padding: 0 var(--wpds-dimension-padding-lg);
-	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-interactive-neutral);
-	border-radius: var(--wpds-border-radius-sm);
-	background: var(--wpds-color-bg-surface-neutral);
-	color: var(--wpds-color-fg-content-neutral);
-	font-family: var(--wpds-typography-font-family-body);
-	/* Match SelectControl's trigger text so all controls in a card read the
-	   same size. */
-	font-size: var(--wpds-typography-font-size-md);
+.meterText {
+	margin: 0;
+	color: var(--wpds-color-fg-content-neutral-weak);
+	font-size: var(--wpds-typography-font-size-sm);
 	line-height: var(--wpds-typography-line-height-sm);
-	text-align: start;
-	cursor: pointer;
-}
-
-.pathPickerButton:hover {
-	border-color: var(--wpds-color-stroke-interactive-neutral-active);
 }
 
-.pathPickerButton:focus-visible {
-	outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus-brand);
-	outline-offset: 2px;
+.meterActionsButton {
+	flex-shrink: 0;
 }
 
-.pathPickerValue,
-.pathPickerPlaceholder {
-	min-width: 0;
+/* Thin pill bar: bright brand fill on a neutral track. */
+.progressTrack {
 	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.pathPickerPlaceholder {
-	color: var(--wpds-color-fg-content-neutral-weak);
+	inline-size: 100%;
+	block-size: 6px;
+	border-radius: 999px;
+	background: var(--wpds-color-stroke-surface-neutral);
 }
 
-.pathPickerIcon {
-	flex-shrink: 0;
-	fill: currentColor;
+.progressValue {
+	block-size: 100%;
+	border-radius: inherit;
+	background: var(--wpds-color-fg-interactive-brand);
 }
 
-.cliHeader {
+/* Bar with its value at the trailing end: the bar flexes to fill, the figure
+   sits after it. */
+.gauge {
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
+	gap: var(--wpds-dimension-padding-md);
+}
+
+.gauge .progressTrack {
+	flex: 1;
+	min-inline-size: 0;
+}
+
+.gaugeValue {
+	flex-shrink: 0;
+	color: var(--wpds-color-fg-content-neutral);
+	font-size: var(--wpds-typography-font-size-md);
+	line-height: var(--wpds-typography-line-height-sm);
+	font-variant-numeric: tabular-nums;
+	white-space: nowrap;
+}
+
+/* Hatched stand-in for a meter with no figure behind it — same 135deg stripe
+   idiom as the AI credits placeholder, in neutral disabled colors. */
+.unavailableBar {
+	inline-size: 100%;
+	block-size: 6px;
+	border-radius: 999px;
+	background:
+		repeating-linear-gradient(
+			135deg,
+			color-mix(in srgb, var(--wpds-color-fg-interactive-neutral-disabled) 22%, transparent) 0 3px,
+			transparent 3px 8px
+		),
+		var(--wpds-color-bg-interactive-neutral-weak-disabled);
+}
+
+/* Signed out or offline: grey the readout, since none of it is live. */
+.usageDisabled .meterTitle,
+.usageDisabled .meterMeta,
+.usageDisabled .meterText,
+.usageDisabled .gaugeValue {
+	color: var(--wpds-color-fg-interactive-neutral-disabled);
+}
+
+.usageDisabled .progressTrack {
+	background: var(--wpds-color-bg-interactive-neutral-weak-disabled);
+}
+
+.usageDisabled .progressValue {
+	background: var(--wpds-color-fg-interactive-neutral-disabled);
+}
+
+.aiCreditsTrack {
+	position: relative;
+	background: color-mix(
+		in srgb,
+		var(--wpds-color-fg-interactive-brand) 14%,
+		var(--wpds-color-stroke-surface-neutral)
+	);
+}
+
+.aiCreditsMeterValue {
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	background: linear-gradient(
+			90deg,
+			color-mix(in srgb, var(--wpds-color-fg-interactive-brand) 32%, transparent),
+			color-mix(in srgb, var(--wpds-color-fg-interactive-brand) 14%, transparent)
+		),
+		repeating-linear-gradient(
+			135deg,
+			color-mix(in srgb, var(--wpds-color-fg-interactive-brand) 18%, transparent) 0 8px,
+			transparent 8px 16px
+		);
+}
+
+/* ---- Inline messages ----------------------------------------------------- */
+
+.errorMessage {
+	margin: 0;
+	padding: var(--wpds-dimension-padding-sm) var(--wpds-dimension-padding-md);
+	border: 1px solid color-mix(in srgb, var(--wpds-color-fg-content-error) 35%, transparent);
+	border-radius: 6px;
+	background: color-mix(
+		in srgb,
+		var(--wpds-color-fg-content-error) 8%,
+		var(--wpds-color-bg-surface-neutral-strong)
+	);
+	color: var(--wpds-color-fg-content-error);
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: var(--wpds-typography-line-height-sm);
+}
+
+.instructionsError {
+	margin: 0;
+	font-size: var(--wpds-typography-font-size-sm);
+	color: var(--wpds-color-fg-content-error);
+}
+
+/* Prose entry styled like the MCP config block — same border, radius and
+   surface — but in the body font since it holds instructions, not code. */
+.instructionsTextarea {
+	box-sizing: border-box;
+	inline-size: 100%;
+	padding: var(--wpds-dimension-padding-md);
+	border: 1px solid var(--wpds-color-stroke-surface-neutral);
+	border-radius: 6px;
+	background: var(--wpds-color-bg-surface-neutral);
+	color: var(--wpds-color-fg-content-neutral);
+	font-family: var(--wpds-typography-font-family-body);
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: var(--wpds-typography-line-height-md);
+	resize: vertical;
+}
+
+.instructionsTextarea::placeholder {
+	color: var(--wpds-color-fg-content-neutral-weak);
+}
+
+.instructionsTextarea:hover {
+	border-color: var(--wpds-color-stroke-interactive-neutral-active);
+}
+
+.instructionsTextarea:focus-visible {
+	border-color: var(--wpds-color-stroke-interactive-neutral-active);
+	outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus-brand);
+	outline-offset: 2px;
+}
+
+.actions {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: var(--wpds-dimension-padding-md);
+}
+
+.instructionsCounter {
+	font-size: var(--wpds-typography-font-size-sm);
+	color: var(--wpds-color-fg-content-neutral-weak);
+}
+
+/* ---- Account aside ------------------------------------------------------- */
+
+/* The Account column isn't a card — its sections sit directly on the settings
+   surface: Account identity, Preview sites usage, Help links, then Log out. */
+.accountAside {
+	display: flex;
+	flex-direction: column;
 	gap: var(--wpds-dimension-padding-xl);
 }
 
-.cliHeading {
-	margin-block-end: 0;
+.asideSection {
+	display: flex;
+	flex-direction: column;
+	gap: var(--wpds-dimension-padding-md);
 }
 
-.cliHeader :global(.components-form-toggle .components-form-toggle__track) {
-	background-color: var(--wpds-color-bg-track-neutral-weak);
-	border-color: var(--wpds-color-stroke-interactive-neutral);
+.asideHeading {
+	margin: 0;
+	color: var(--wpds-color-fg-content-neutral);
+	font-size: var(--wpds-typography-font-size-md);
+	font-weight: 600;
+	line-height: var(--wpds-typography-line-height-sm);
 }
 
-.cliHeader :global(.components-form-toggle .components-form-toggle__thumb) {
-	background-color: var(--wpds-color-bg-thumb-neutral-weak);
+.helpLinks {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--wpds-dimension-padding-xs);
+}
+
+.helpLink {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--wpds-dimension-padding-sm);
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: var(--wpds-color-fg-content-neutral);
+	font-family: var(--wpds-typography-font-family-body);
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: var(--wpds-typography-line-height-md);
+	text-align: start;
+	cursor: pointer;
+}
+
+.helpLinkIcon {
+	flex-shrink: 0;
+	fill: currentColor;
+}
+
+.helpLinkLabel {
+	text-underline-offset: 2px;
+}
+
+.helpLink:hover .helpLinkLabel {
+	text-decoration: underline;
+}
+
+.helpLink:focus-visible {
+	border-radius: 2px;
+	outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus-brand);
+	outline-offset: 2px;
+}
+
+/* Signed-out pitch, matching the overview sign-in band's copy (title +
+   paragraph) but stacked to fit the bare Account column. */
+.signinCopy {
+	margin: 0;
+	color: var(--wpds-color-fg-content-neutral-weak);
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: var(--wpds-typography-line-height-sm);
+}
+
+.signinButton {
+	align-self: flex-start;
+}
+
+/* Log out reads as a destructive action. wpds Button has no error tone, so
+   recolor its internal vars: a subtle translucent red fill with a vivid red
+   label (the error-strong red, deepening its fill on hover/active). A small
+   button, set apart with extra space above. */
+.logoutButton {
+	align-self: flex-start;
+	margin-block-start: var(--wpds-dimension-padding-xl);
+	--wp-ui-button-background-color: color-mix(
+		in srgb,
+		var(--wpds-color-bg-interactive-error-strong) 14%,
+		transparent
+	);
+	--wp-ui-button-background-color-active: color-mix(
+		in srgb,
+		var(--wpds-color-bg-interactive-error-strong) 24%,
+		transparent
+	);
+	--wp-ui-button-foreground-color: var(--wpds-color-bg-interactive-error-strong);
+	--wp-ui-button-foreground-color-active: var(--wpds-color-bg-interactive-error-strong);
+}
+
+.accountIdentity {
+	display: flex;
+	align-items: center;
+	gap: var(--wpds-dimension-padding-md);
+	min-width: 0;
+}
+
+.accountAvatar {
+	flex: 0 0 44px;
+	inline-size: 44px;
+	block-size: 44px;
+	border-radius: 50%;
+	object-fit: cover;
+}
+
+.accountDetails {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.accountName {
+	color: var(--wpds-color-fg-content-neutral);
+	font-size: var(--wpds-typography-font-size-md);
+	font-weight: 600;
+	line-height: var(--wpds-typography-line-height-sm);
+}
+
+.accountEmail {
+	margin: 0;
+	color: var(--wpds-color-fg-content-neutral-weak);
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: var(--wpds-typography-line-height-sm);
+	overflow-wrap: anywhere;
+}
+
+/* ---- Appearance segmented control ---------------------------------------- */
+
+.appearancePicker {
+	position: relative;
+	display: grid;
+	grid-template-columns: repeat(3, minmax(72px, 1fr));
+	align-items: center;
+	gap: 0;
+	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
+	border-radius: var(--wpds-border-radius-sm);
+	background: var(--wpds-color-bg-interactive-neutral-weak);
+	color: var(--wpds-color-fg-interactive-neutral);
+	font-family: var(--wpds-typography-font-family-body);
+	font-size: var(--wpds-typography-font-size-md);
+	line-height: 1;
+}
+
+.appearancePicker::before {
+	content: '';
+	position: absolute;
+	inset-block: calc(var(--wpds-border-width-xs) * -1);
+	inset-inline-start: 0;
+	box-sizing: border-box;
+	inline-size: calc(100% / 3);
+	border: 1px solid var(--wpds-color-stroke-interactive-neutral);
+	border-radius: var(--wpds-border-radius-sm);
+	background: var(--wpds-color-bg-interactive-neutral-weak);
+	pointer-events: none;
+	transform: translateX(calc(var(--appearance-active-index, 0) * 100%));
+}
+
+/* The indicator is positioned with a logical inset but animated with a
+   physical translateX, so RTL needs the sign flipped to slide toward the
+   selected option instead of away from it. */
+.appearancePicker:dir(rtl)::before {
+	transform: translateX(calc(var(--appearance-active-index, 0) * -100%));
+}
+
+.appearancePicker[data-active-index='0'] {
+	--appearance-active-index: 0;
+}
+
+.appearancePicker[data-active-index='1'] {
+	--appearance-active-index: 1;
+}
+
+.appearancePicker[data-active-index='2'] {
+	--appearance-active-index: 2;
+}
+
+@media not (prefers-reduced-motion) {
+	.appearancePicker::before {
+		transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
+	}
+}
+
+.appearanceButton {
+	position: relative;
+	z-index: 1;
+	min-height: 32px;
+	padding: 0 var(--wpds-dimension-padding-lg);
+	border: 0;
+	border-radius: var(--wpds-border-radius-sm);
+	background: transparent;
+	color: var(--wpds-color-fg-content-neutral-weak);
+	font: inherit;
+	/* Match SelectControl's trigger text so all controls in a card read the
+	   same size. */
+	font-size: var(--wpds-typography-font-size-md);
+	line-height: var(--wpds-typography-line-height-sm);
+	cursor: pointer;
+}
+
+.appearanceButton:hover,
+.appearanceButtonActive {
+	color: var(--wpds-color-fg-content-neutral);
+}
+
+.appearanceButton:focus-visible,
+.selectControl:focus-visible {
+	outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus-brand);
+	outline-offset: 2px;
+}
+
+.selectControl {
+	inline-size: 156px;
+	max-inline-size: 100%;
+}
+
+/* Stretch the trigger to the control's width, but skip the visually-hidden
+   label `hideLabelFromVision` renders: it's absolutely positioned, so
+   stretching it makes it hang past the layout and create horizontal
+   overflow. */
+.selectControl > *:not([data-visually-hidden]) {
+	inline-size: 100%;
+}
+
+.selectControlWide {
+	inline-size: 240px;
+}
+
+/* ---- Default site directory picker --------------------------------------- */
+
+.pathPickerButton {
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--wpds-dimension-padding-lg);
+	inline-size: 240px;
+	max-inline-size: 100%;
+	min-block-size: 36px;
+	padding: 0 var(--wpds-dimension-padding-lg);
+	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-interactive-neutral);
+	border-radius: var(--wpds-border-radius-sm);
+	background: var(--wpds-color-bg-surface-neutral);
+	color: var(--wpds-color-fg-content-neutral);
+	font-family: var(--wpds-typography-font-family-body);
+	/* Match SelectControl's trigger text so all controls in a card read the
+	   same size. */
+	font-size: var(--wpds-typography-font-size-md);
+	line-height: var(--wpds-typography-line-height-sm);
+	text-align: start;
+	cursor: pointer;
+}
+
+.pathPickerButton:hover {
+	border-color: var(--wpds-color-stroke-interactive-neutral-active);
+}
+
+.pathPickerButton:focus-visible {
+	outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus-brand);
+	outline-offset: 2px;
+}
+
+.pathPickerValue,
+.pathPickerPlaceholder {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
-.cliHeader :global(.components-form-toggle.is-checked .components-form-toggle__track) {
-	background-color: var(--wpds-color-bg-interactive-brand-strong);
-	border-color: var(--wpds-color-stroke-interactive-brand);
+.pathPickerPlaceholder {
+	color: var(--wpds-color-fg-content-neutral-weak);
 }
 
-.cliHeader :global(.components-form-toggle.is-checked .components-form-toggle__thumb) {
-	background-color: var(--wpds-color-fg-interactive-brand-strong);
+.pathPickerIcon {
+	flex-shrink: 0;
+	fill: currentColor;
 }
 
-.cliHeader
-	:global(.components-form-toggle .components-form-toggle__input:focus
-		+ .components-form-toggle__track) {
-	box-shadow:
-		0 0 0 var(--wpds-border-width-focus) var(--wpds-color-bg-surface-neutral),
-		0 0 0 calc(2 * var(--wpds-border-width-focus)) var(--wpds-color-stroke-focus-brand);
-}
+/* ---- Studio CLI toggle (read-only tooltip variant) ----------------------- */
 
 .cliToggleTrigger {
 	display: inline-flex;
@@ -471,38 +848,31 @@
 	line-height: var(--wpds-typography-line-height-sm);
 }
 
-.cliDescription {
-	max-inline-size: 460px;
-	margin: 0;
-	color: var(--wpds-color-fg-content-neutral-weak);
-	font-size: var(--wpds-typography-font-size-sm);
-	line-height: var(--wpds-typography-line-height-sm);
-}
-
-.shortcutList {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
+/* ---- Keyboard shortcuts -------------------------------------------------- */
 
-.shortcutRow {
-	display: grid;
-	grid-template-columns: minmax(0, 1fr) auto;
-	align-items: center;
-	column-gap: var(--wpds-dimension-padding-xl);
-	padding-block: var(--settings-row-padding-block);
-	border-bottom: var(--settings-divider-border);
+/* Each context (Global, Composer, Site preview) is a labelled group inside the
+   single Keyboard card. */
+.shortcutGroup {
+	display: flex;
+	flex-direction: column;
+	gap: var(--wpds-dimension-padding-sm);
 }
 
-.shortcutRow:last-child {
-	padding-block-end: 0;
-	border-bottom: 0;
+/* Separate groups with a rule that spans the full card width — negative inline
+   margins reach past the card padding to the border, then padding restores the
+   content indent. */
+.shortcutGroup + .shortcutGroup {
+	margin-inline: calc(-1 * var(--wpds-dimension-padding-xl));
+	padding-inline: var(--wpds-dimension-padding-xl);
+	padding-block-start: var(--wpds-dimension-padding-lg);
+	border-block-start: 1px solid var(--wpds-color-stroke-surface-neutral);
 }
 
-.shortcutName {
+.shortcutGroupTitle {
+	margin: 0;
 	color: var(--wpds-color-fg-content-neutral);
 	font-size: var(--wpds-typography-font-size-md);
-	font-weight: 400;
+	font-weight: 600;
 	line-height: var(--wpds-typography-line-height-sm);
 }
 
@@ -532,121 +902,7 @@
 	line-height: 1;
 }
 
-.errorMessage {
-	margin-block-end: var(--wpds-dimension-padding-md);
-	padding: var(--wpds-dimension-padding-sm) var(--wpds-dimension-padding-md);
-	border: 1px solid color-mix(in srgb, var(--wpds-color-fg-content-error) 35%, transparent);
-	border-radius: 6px;
-	background: color-mix(
-		in srgb,
-		var(--wpds-color-fg-content-error) 8%,
-		var(--wpds-color-bg-surface-neutral-strong)
-	);
-	color: var(--wpds-color-fg-content-error);
-	font-size: var(--wpds-typography-font-size-sm);
-	line-height: var(--wpds-typography-line-height-sm);
-}
-
-.skillsPanel,
-.usagePanel {
-	display: flex;
-	flex-direction: column;
-	gap: var(--wpds-dimension-padding-xl);
-	width: 100%;
-	max-width: var(--settings-form-width);
-	margin: 0 auto;
-}
-
-.settingsPanelSection {
-	box-sizing: border-box;
-	display: flex;
-	flex-direction: column;
-	align-items: stretch;
-	gap: var(--wpds-dimension-padding-lg);
-	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-xl)
-		var(--wpds-dimension-padding-xl);
-	border: 1px solid var(--wpds-color-stroke-surface-neutral);
-	border-radius: 8px;
-	background: color-mix(in srgb, var(--wpds-color-bg-surface-neutral-weak) 56%, transparent);
-}
-
-.settingsPanelHeader {
-	display: flex;
-	flex-direction: column;
-	gap: var(--wpds-dimension-padding-xs);
-}
-
-.settingsPanelHeader h2 {
-	margin: 0;
-	color: var(--wpds-color-fg-content-neutral);
-	font-size: var(--wpds-typography-font-size-lg);
-	font-weight: 600;
-	line-height: var(--wpds-typography-line-height-md);
-}
-
-.settingsPanelHeader p {
-	margin: 0;
-	color: var(--wpds-color-fg-content-neutral-weak);
-	font-size: var(--wpds-typography-font-size-sm);
-	line-height: var(--wpds-typography-line-height-md);
-}
-
-.skillsHeaderRow {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--wpds-dimension-padding-md);
-	/* Compact wpds Button height, reserved so the header doesn't jump when
-	   the Install all button appears or disappears. */
-	min-block-size: 32px;
-}
-
-.skillList {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	border-top: 1px solid var(--wpds-color-stroke-surface-neutral);
-}
-
-.skillRow {
-	display: grid;
-	grid-template-columns: minmax(0, 1fr) auto;
-	align-items: center;
-	gap: var(--wpds-dimension-padding-xl);
-	padding-block: var(--wpds-dimension-padding-lg);
-	border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral);
-}
-
-.skillRow:last-child {
-	border-bottom: 0;
-}
-
-.skillDetails {
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-	min-width: 0;
-}
-
-.skillName {
-	color: var(--wpds-color-fg-content-neutral);
-	font-size: var(--wpds-typography-font-size-sm);
-	font-weight: 600;
-	line-height: var(--wpds-typography-line-height-sm);
-}
-
-.skillDescription {
-	color: var(--wpds-color-fg-content-neutral-weak);
-	font-size: var(--wpds-typography-font-size-sm);
-	line-height: var(--wpds-typography-line-height-sm);
-}
-
-.sectionIntro {
-	margin: 0 0 var(--wpds-dimension-padding-lg);
-	color: var(--wpds-color-fg-content-neutral-weak);
-	font-size: var(--wpds-typography-font-size-sm);
-	line-height: var(--wpds-typography-line-height-md);
-}
+/* ---- MCP config block ---------------------------------------------------- */
 
 .codeBlockWrap {
 	position: relative;
@@ -680,6 +936,8 @@
 	z-index: 1;
 }
 
+/* ---- Toggle recoloring (wpds FormToggle) --------------------------------- */
+
 .toggleControl :global(.components-form-toggle .components-form-toggle__track) {
 	background-color: var(--wpds-color-bg-track-neutral-weak);
 	border-color: var(--wpds-color-stroke-interactive-neutral);
@@ -705,147 +963,24 @@
 		0 0 0 calc(2 * var(--wpds-border-width-focus)) var(--wpds-color-stroke-focus-brand);
 }
 
-@media (max-width: 640px) {
-	.preferenceRow {
-		align-items: stretch;
-		grid-template-columns: 1fr;
-		row-gap: var(--wpds-dimension-padding-sm);
-	}
+/* ---- Narrow layout ------------------------------------------------------- */
 
-	.accountSectionHeader,
-	.accountSummary {
+/* Narrow window: the whole surface is cramped, so stack every card's header
+   control and rows under their labels. */
+@media (max-width: 640px) {
+	.cardHeader {
 		align-items: flex-start;
 		flex-direction: column;
 	}
 
-	.preferenceText h2 {
-		white-space: normal;
-	}
-
-	.skillRow {
+	.field,
+	.listRow {
 		align-items: stretch;
 		grid-template-columns: 1fr;
+		row-gap: var(--wpds-dimension-padding-sm);
 	}
-}
-
-
-/* Signed out or offline: grey the whole card, since none of it is live. */
-.usageDisabled .settingsPanelHeader h2,
-.usageDisabled .settingsPanelHeader p,
-.usageDisabled .usageSectionHeader h2,
-.usageDisabled .previewUsageText,
-.usageDisabled .usageSection p {
-	color: var(--wpds-color-fg-interactive-neutral-disabled);
-}
-
-.usageDisabled .progressTrack {
-	background: var(--wpds-color-bg-interactive-neutral-weak-disabled);
-}
-
-.usageDisabled .progressValue {
-	background: var(--wpds-color-fg-interactive-neutral-disabled);
-}
-
-/* Hatched stand-in for a meter with no figure behind it — same 135deg stripe
-   idiom as the AI credits placeholder, in neutral disabled colors. */
-.unavailableBar {
-	inline-size: 100%;
-	block-size: 6px;
-	border-radius: 999px;
-	background:
-		repeating-linear-gradient(
-			135deg,
-			color-mix(in srgb, var(--wpds-color-fg-interactive-neutral-disabled) 22%, transparent) 0 3px,
-			transparent 3px 8px
-		),
-		var(--wpds-color-bg-interactive-neutral-weak-disabled);
-}
-
-.usageSection {
-	display: flex;
-	flex-direction: column;
-	align-items: stretch;
-	gap: var(--wpds-dimension-padding-md);
-	padding-block: var(--wpds-dimension-padding-lg);
-	border-top: 1px solid var(--wpds-color-stroke-surface-neutral);
-}
-
-.usageSection:last-child {
-	padding-block-end: 0;
-}
-
-.usageSectionHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--wpds-dimension-padding-md);
-	min-width: 0;
-}
-
-.usageSectionHeader h2 {
-	margin: 0;
-	color: var(--wpds-color-fg-content-neutral);
-	font-size: var(--wpds-typography-font-size-md);
-	font-weight: 600;
-	line-height: var(--wpds-typography-line-height-sm);
-}
-
-.usageSection p {
-	margin: 0;
-	color: var(--wpds-color-fg-content-neutral-weak);
-	font-size: var(--wpds-typography-font-size-sm);
-	line-height: var(--wpds-typography-line-height-sm);
-}
-
-.previewUsageText {
-	color: var(--wpds-color-fg-content-neutral-weak);
-	font-size: var(--wpds-typography-font-size-sm);
-	line-height: var(--wpds-typography-line-height-sm);
-}
-
-.progressTrack {
-	overflow: hidden;
-	inline-size: 100%;
-	block-size: 6px;
-	border-radius: 999px;
-	background: var(--wpds-color-stroke-surface-neutral);
-}
-
-.progressValue {
-	block-size: 100%;
-	border-radius: inherit;
-	background: var(--wpds-color-fg-interactive-brand);
-}
-
-.previewActionsButton {
-	flex-shrink: 0;
-}
-
-.usageSectionAction {
-	align-self: flex-start;
-}
-
-.aiCreditsTrack {
-	position: relative;
-	background: color-mix(
-		in srgb,
-		var(--wpds-color-fg-interactive-brand) 14%,
-		var(--wpds-color-stroke-surface-neutral)
-	);
-}
 
-.aiCreditsMeterValue {
-	position: absolute;
-	inset: 0;
-	border-radius: inherit;
-	background: linear-gradient(
-			90deg,
-			color-mix(in srgb, var(--wpds-color-fg-interactive-brand) 32%, transparent),
-			color-mix(in srgb, var(--wpds-color-fg-interactive-brand) 14%, transparent)
-		),
-		repeating-linear-gradient(
-			135deg,
-			color-mix(in srgb, var(--wpds-color-fg-interactive-brand) 18%, transparent) 0 8px,
-			transparent 8px 16px
-		);
+	.fieldLabel {
+		white-space: normal;
+	}
 }
diff --git a/apps/ui/src/components/settings-view/usage-panel.test.tsx b/apps/ui/src/components/settings-view/usage-panel.test.tsx
index 701dbfae12..e2ed68f3ae 100644
--- a/apps/ui/src/components/settings-view/usage-panel.test.tsx
+++ b/apps/ui/src/components/settings-view/usage-panel.test.tsx
@@ -3,7 +3,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { useConnector } from '@/data/core';
 import { useStudioAssistantQuota } from '@/data/queries/use-assistant-quota';
-import { useAuthUser, useLogin } from '@/data/queries/use-auth-user';
+import { useAuthUser } from '@/data/queries/use-auth-user';
 import {
 	useDeleteAllSnapshots,
 	useSnapshotUsage,
@@ -11,31 +11,10 @@ import {
 } from '@/data/queries/use-snapshots';
 import { useUserLocale } from '@/data/queries/use-user-locale';
 import { useOffline } from '@/hooks/use-offline';
-import { UsagePanel } from './usage-panel';
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { AiCreditsSection, PreviewUsageSection } from './usage-panel';
+import type { ReactNode } from 'react';
 
 vi.mock( '@wordpress/ui', () => ( {
-	Button: ( {
-		children,
-		loading,
-		loadingAnnouncement,
-		tone,
-		variant,
-		size,
-		...props
-	}: ButtonHTMLAttributes< HTMLButtonElement > & {
-		children?: ReactNode;
-		loading?: boolean;
-		loadingAnnouncement?: string;
-		tone?: string;
-		variant?: string;
-		size?: string;
-	} ) => {
-		void tone;
-		void variant;
-		void size;
-		return <button { ...props }>{ loading ? loadingAnnouncement : children }</button>;
-	},
 	IconButton: ( { label, disabled }: { label: string; disabled?: boolean } ) => (
 		<button type="button" aria-label={ label } disabled={ disabled } />
 	),
@@ -66,7 +45,6 @@ vi.mock( '@/data/core', () => ( {
 
 vi.mock( '@/data/queries/use-auth-user', () => ( {
 	useAuthUser: vi.fn(),
-	useLogin: vi.fn(),
 } ) );
 
 vi.mock( '@/data/queries/use-snapshots', () => ( {
@@ -89,7 +67,6 @@ vi.mock( '@/data/queries/use-user-locale', () => ( {
 
 const useConnectorMock = vi.mocked( useConnector );
 const useAuthUserMock = vi.mocked( useAuthUser );
-const useLoginMock = vi.mocked( useLogin );
 const useDeleteAllSnapshotsMock = vi.mocked( useDeleteAllSnapshots );
 const useSnapshotUsageMock = vi.mocked( useSnapshotUsage );
 const useSnapshotsMock = vi.mocked( useSnapshots );
@@ -97,8 +74,9 @@ const useOfflineMock = vi.mocked( useOffline );
 const useStudioAssistantQuotaMock = vi.mocked( useStudioAssistantQuota );
 const useUserLocaleMock = vi.mocked( useUserLocale );
 
-describe( 'UsagePanel', () => {
-	const loginMutate = vi.fn();
+const ALPHA_META = 'Free during Alpha';
+
+describe( 'usage sections', () => {
 	const deleteSnapshotsMutate = vi.fn();
 	const confirmDeleteAllPreviewSites = vi.fn();
 
@@ -122,7 +100,6 @@ describe( 'UsagePanel', () => {
 			data: { id: 1, displayName: 'Ada Lovelace', email: 'ada@example.com' },
 			isLoading: false,
 		} as never );
-		useLoginMock.mockReturnValue( { mutate: loginMutate, isPending: false } as never );
 		useSnapshotsMock.mockReturnValue( { data: [], isLoading: false } as never );
 		useSnapshotUsageMock.mockReturnValue( {
 			data: { siteCount: 2, siteLimit: 10, siteCreationBlocked: false },
@@ -135,164 +112,137 @@ describe( 'UsagePanel', () => {
 		} as never );
 	} );
 
-	it( 'renders AI credits and preview site usage for the signed-in user', () => {
-		render( <UsagePanel /> );
-
-		expect( screen.getByRole( 'heading', { name: 'Usage' } ) ).toBeInTheDocument();
-		expect(
-			screen.getByText(
-				'AI credits are currently free while Studio Code is in Alpha. Build, iterate, and experiment, but know that credits will eventually have a cost.'
-			)
-		).toBeInTheDocument();
-		expect( screen.getByText( '2 of 10 active preview sites' ) ).toBeInTheDocument();
-		expect( useSnapshotsMock ).toHaveBeenCalledWith( 1 );
-		expect( useSnapshotUsageMock ).toHaveBeenCalledWith( 1 );
-		expect( useDeleteAllSnapshotsMock ).toHaveBeenCalledWith( 1 );
-	} );
+	describe( 'AiCreditsSection', () => {
+		it( 'falls back to a compact Alpha note when the quota has no cost cap', () => {
+			render( <AiCreditsSection /> );
 
-	it( 'renders AI usage when a quota with a cost cap is available', () => {
-		useStudioAssistantQuotaMock.mockReturnValue( {
-			data: { costUsage: 25, costCap: 100, costResetDate: '2026-08-01T12:00:00' },
-			isLoading: false,
-		} as never );
+			expect( screen.getByRole( 'heading', { name: 'AI credits' } ) ).toBeInTheDocument();
+			expect( screen.getByText( ALPHA_META ) ).toBeInTheDocument();
+		} );
 
-		render( <UsagePanel /> );
+		it( 'renders a compact percentage and reset date when a cost cap is available', () => {
+			useStudioAssistantQuotaMock.mockReturnValue( {
+				data: { costUsage: 25, costCap: 100, costResetDate: '2026-08-01T12:00:00' },
+				isLoading: false,
+			} as never );
 
-		expect(
-			screen.getByText( '25% of monthly limit used (resets on August 1, 2026)' )
-		).toBeInTheDocument();
-		expect(
-			screen.queryByText(
-				'AI credits are currently free while Studio Code is in Alpha. Build, iterate, and experiment, but know that credits will eventually have a cost.'
-			)
-		).not.toBeInTheDocument();
-	} );
+			render( <AiCreditsSection /> );
 
-	it( 'shows an unavailable message when the quota fetch fails', () => {
-		useStudioAssistantQuotaMock.mockReturnValue( {
-			data: undefined,
-			isLoading: false,
-			isError: true,
-		} as never );
+			expect( screen.getByText( '25%' ) ).toBeInTheDocument();
+			expect( screen.getByText( 'Reset Aug 1' ) ).toBeInTheDocument();
+			expect( screen.queryByText( ALPHA_META ) ).not.toBeInTheDocument();
+		} );
 
-		render( <UsagePanel /> );
+		it( 'shows an unavailable message when the quota fetch fails', () => {
+			useStudioAssistantQuotaMock.mockReturnValue( {
+				data: undefined,
+				isLoading: false,
+				isError: true,
+			} as never );
 
-		expect(
-			screen.getByText( 'Studio Code limits are temporarily unavailable.' )
-		).toBeInTheDocument();
-		expect(
-			screen.queryByText(
-				'AI credits are currently free while Studio Code is in Alpha. Build, iterate, and experiment, but know that credits will eventually have a cost.'
-			)
-		).not.toBeInTheDocument();
-	} );
+			render( <AiCreditsSection /> );
 
-	it( 'falls back to the Alpha copy when the quota has no cost cap', () => {
-		useStudioAssistantQuotaMock.mockReturnValue( {
-			data: { costUsage: 0, costCap: 0 },
-			isLoading: false,
-		} as never );
+			expect(
+				screen.getByText( 'Studio Code limits are temporarily unavailable.' )
+			).toBeInTheDocument();
+			expect( screen.queryByText( ALPHA_META ) ).not.toBeInTheDocument();
+		} );
 
-		render( <UsagePanel /> );
+		it( 'replaces the meter with a hatched placeholder when offline', () => {
+			useOfflineMock.mockReturnValue( true );
+			useStudioAssistantQuotaMock.mockReturnValue( {
+				data: { costUsage: 25, costCap: 100, costResetDate: '2026-08-01T12:00:00' },
+				isLoading: false,
+			} as never );
 
-		expect(
-			screen.getByText(
-				'AI credits are currently free while Studio Code is in Alpha. Build, iterate, and experiment, but know that credits will eventually have a cost.'
-			)
-		).toBeInTheDocument();
-	} );
+			render( <AiCreditsSection /> );
 
-	it( 'confirms through the connector before deleting all preview sites', async () => {
-		render( <UsagePanel /> );
+			expect( screen.getByRole( 'img', { name: 'Unavailable' } ) ).toBeInTheDocument();
+			expect( screen.queryByText( /of monthly limit used/ ) ).not.toBeInTheDocument();
+			expect( screen.queryByTestId( 'usage-progress-bar' ) ).not.toBeInTheDocument();
+		} );
 
-		fireEvent.click( screen.getByRole( 'button', { name: 'Delete all preview sites' } ) );
+		it( 'greys out with a hatched placeholder when signed out', () => {
+			useAuthUserMock.mockReturnValue( { data: null, isLoading: false } as never );
 
-		await waitFor( () => expect( confirmDeleteAllPreviewSites ).toHaveBeenCalledTimes( 1 ) );
-		expect( deleteSnapshotsMutate ).toHaveBeenCalledTimes( 1 );
+			render( <AiCreditsSection /> );
+
+			expect( screen.getByRole( 'img', { name: 'Unavailable' } ) ).toBeInTheDocument();
+			expect( screen.queryByText( ALPHA_META ) ).not.toBeInTheDocument();
+		} );
 	} );
 
-	it( 'does not delete when the confirmation is declined', async () => {
-		confirmDeleteAllPreviewSites.mockResolvedValue( false );
+	describe( 'PreviewUsageSection', () => {
+		it( 'renders preview site usage for the signed-in user', () => {
+			render( <PreviewUsageSection userId={ 1 } /> );
 
-		render( <UsagePanel /> );
+			expect( screen.getByRole( 'heading', { name: 'Preview sites' } ) ).toBeInTheDocument();
+			expect( screen.getByText( '2 of 10' ) ).toBeInTheDocument();
+			expect( useSnapshotsMock ).toHaveBeenCalledWith( 1 );
+			expect( useSnapshotUsageMock ).toHaveBeenCalledWith( 1 );
+			expect( useDeleteAllSnapshotsMock ).toHaveBeenCalledWith( 1 );
+		} );
 
-		fireEvent.click( screen.getByRole( 'button', { name: 'Delete all preview sites' } ) );
+		it( 'confirms through the connector before deleting all preview sites', async () => {
+			render( <PreviewUsageSection userId={ 1 } /> );
 
-		await waitFor( () => expect( confirmDeleteAllPreviewSites ).toHaveBeenCalledTimes( 1 ) );
-		expect( deleteSnapshotsMutate ).not.toHaveBeenCalled();
-	} );
+			fireEvent.click( screen.getByRole( 'button', { name: 'Delete all preview sites' } ) );
 
-	it( 'shows a loading row with an empty progress bar in both sections', () => {
-		useStudioAssistantQuotaMock.mockReturnValue( { data: undefined, isLoading: true } as never );
-		// Preview usage is still cached from before the delete, so the bar would
-		// otherwise keep its old fill next to a "Loading..." row.
-		useDeleteAllSnapshotsMock.mockReturnValue( {
-			mutate: deleteSnapshotsMutate,
-			isPending: true,
-			error: null,
-		} as never );
+			await waitFor( () => expect( confirmDeleteAllPreviewSites ).toHaveBeenCalledTimes( 1 ) );
+			expect( deleteSnapshotsMutate ).toHaveBeenCalledTimes( 1 );
+		} );
 
-		render( <UsagePanel /> );
+		it( 'does not delete when the confirmation is declined', async () => {
+			confirmDeleteAllPreviewSites.mockResolvedValue( false );
 
-		expect( screen.getAllByText( 'Loading...' ) ).toHaveLength( 2 );
-		const bars = screen.getAllByTestId( 'usage-progress-bar' );
-		expect( bars ).toHaveLength( 2 );
-		for ( const bar of bars ) {
-			expect( bar.firstElementChild ).toHaveStyle( { inlineSize: '0%' } );
-		}
-	} );
+			render( <PreviewUsageSection userId={ 1 } /> );
 
-	it( 'replaces figures and actions with the offline notice while offline', () => {
-		useOfflineMock.mockReturnValue( true );
-		useStudioAssistantQuotaMock.mockReturnValue( {
-			data: { costUsage: 25, costCap: 100, costResetDate: '2026-08-01T12:00:00' },
-			isLoading: false,
-		} as never );
+			fireEvent.click( screen.getByRole( 'button', { name: 'Delete all preview sites' } ) );
 
-		render( <UsagePanel /> );
-
-		expect( screen.getByRole( 'status' ) ).toHaveTextContent( "You're offline" );
-		// Cached figures are stale and can't be refreshed, so they stay hidden.
-		expect( screen.queryByText( /of monthly limit used/ ) ).not.toBeInTheDocument();
-		expect( screen.queryByText( /active preview site/ ) ).not.toBeInTheDocument();
-		expect( screen.getAllByRole( 'img', { name: 'Unavailable' } ) ).toHaveLength( 2 );
-		expect(
-			screen.queryByRole( 'button', { name: 'Delete all preview sites' } )
-		).not.toBeInTheDocument();
-		expect( screen.queryByLabelText( 'Sign in to Studio' ) ).not.toBeInTheDocument();
-	} );
+			await waitFor( () => expect( confirmDeleteAllPreviewSites ).toHaveBeenCalledTimes( 1 ) );
+			expect( deleteSnapshotsMutate ).not.toHaveBeenCalled();
+		} );
 
-	it( 'surfaces a deletion error inline', () => {
-		useDeleteAllSnapshotsMock.mockReturnValue( {
-			mutate: deleteSnapshotsMutate,
-			isPending: false,
-			error: new Error( 'delete failed' ),
-		} as never );
+		it( 'surfaces a deletion error inline', () => {
+			useDeleteAllSnapshotsMock.mockReturnValue( {
+				mutate: deleteSnapshotsMutate,
+				isPending: false,
+				error: new Error( 'delete failed' ),
+			} as never );
 
-		render( <UsagePanel /> );
+			render( <PreviewUsageSection userId={ 1 } /> );
 
-		expect(
-			screen.getByText( 'An error occurred while deleting preview sites. Please try again.' )
-		).toBeInTheDocument();
-	} );
+			expect(
+				screen.getByText( 'An error occurred while deleting preview sites. Please try again.' )
+			).toBeInTheDocument();
+		} );
 
-	it( 'shows the sign-in banner and no credits copy when signed out', () => {
-		useAuthUserMock.mockReturnValue( { data: null, isLoading: false } as never );
+		it( 'shows a loading row with an empty progress bar', () => {
+			// Preview usage is still cached from before the delete, so the bar would
+			// otherwise keep its old fill next to a "Loading..." row.
+			useDeleteAllSnapshotsMock.mockReturnValue( {
+				mutate: deleteSnapshotsMutate,
+				isPending: true,
+				error: null,
+			} as never );
 
-		render( <UsagePanel /> );
+			render( <PreviewUsageSection userId={ 1 } /> );
+
+			expect( screen.getByText( 'Loading...' ) ).toBeInTheDocument();
+			const bar = screen.getByTestId( 'usage-progress-bar' );
+			expect( bar.firstElementChild ).toHaveStyle( { inlineSize: '0%' } );
+		} );
 
-		expect( screen.getByLabelText( 'Sign in to Studio' ) ).toBeInTheDocument();
-		expect( screen.queryByText( /active preview site/ ) ).not.toBeInTheDocument();
-		expect( screen.getAllByRole( 'img', { name: 'Unavailable' } ) ).toHaveLength( 2 );
-		// Studio Code needs an account, so the Alpha pricing copy stays hidden.
-		expect(
-			screen.queryByText(
-				'AI credits are currently free while Studio Code is in Alpha. Build, iterate, and experiment, but know that credits will eventually have a cost.'
-			)
-		).not.toBeInTheDocument();
+		it( 'replaces the figures with a hatched placeholder while offline', () => {
+			useOfflineMock.mockReturnValue( true );
 
-		fireEvent.click( screen.getByRole( 'button', { name: 'Log in with WordPress.com' } ) );
+			render( <PreviewUsageSection userId={ 1 } /> );
 
-		expect( loginMutate ).toHaveBeenCalled();
+			expect( screen.getByRole( 'img', { name: 'Unavailable' } ) ).toBeInTheDocument();
+			expect( screen.queryByText( /active preview site/ ) ).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole( 'button', { name: 'Delete all preview sites' } )
+			).not.toBeInTheDocument();
+		} );
 	} );
 } );
diff --git a/apps/ui/src/components/settings-view/usage-panel.tsx b/apps/ui/src/components/settings-view/usage-panel.tsx
index 735f3b4d1c..cda6cf403a 100644
--- a/apps/ui/src/components/settings-view/usage-panel.tsx
+++ b/apps/ui/src/components/settings-view/usage-panel.tsx
@@ -1,105 +1,136 @@
 import {
 	clampQuotaFraction,
 	formatQuotaPercentage,
-	formatQuotaResetDate,
+	formatQuotaResetDateShort,
 } from '@studio/common/lib/studio-assistant-quota';
-import { __, _n, sprintf } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { moreHorizontal } from '@wordpress/icons';
 import { IconButton } from '@wordpress/ui';
 import { clsx } from 'clsx';
-import { SigninNotice } from '@/components/agentic-signin-banner';
 import * as Menu from '@/components/menu';
-import { OfflineNotice } from '@/components/offline-banner';
 import { useConnector } from '@/data/core';
-import { useAgenticFeatures } from '@/data/queries/use-agentic-features';
 import { useStudioAssistantQuota } from '@/data/queries/use-assistant-quota';
-import { useAuthUser } from '@/data/queries/use-auth-user';
 import {
 	useDeleteAllSnapshots,
 	useSnapshotUsage,
 	useSnapshots,
 } from '@/data/queries/use-snapshots';
 import { useUserLocale } from '@/data/queries/use-user-locale';
+import { usePreviewAgenticFeatures } from './settings-preview';
 import styles from './style.module.css';
+import type { ReactNode } from 'react';
 
 const DEFAULT_PREVIEW_SITE_LIMIT = 10;
 
 // Stands in for a figure we can't read: a hatched bar fills the row the real
 // meter would occupy, so the section reads as disabled, not empty.
-function UnavailableSection( { title }: { title: string } ) {
+function UnavailableBar() {
+	return <div className={ styles.unavailableBar } role="img" aria-label={ __( 'Unavailable' ) } />;
+}
+
+// A thin pill bar with an optional value at its trailing end.
+function Gauge( { fraction, value }: { fraction: number; value?: string } ) {
+	const pct = Math.min( 100, Math.max( 0, fraction * 100 ) );
 	return (
-		<section className={ styles.usageSection }>
-			<div className={ styles.usageSectionHeader }>
-				<h2>{ title }</h2>
+		<div className={ styles.gauge }>
+			<div className={ styles.progressTrack } data-testid="usage-progress-bar" aria-hidden="true">
+				<div className={ styles.progressValue } style={ { inlineSize: `${ pct }%` } } />
 			</div>
-			<div className={ styles.unavailableBar } role="img" aria-label={ __( 'Unavailable' ) } />
-		</section>
+			{ value !== undefined ? <span className={ styles.gaugeValue }>{ value }</span> : null }
+		</div>
 	);
 }
 
-function UsageProgressBar( { fraction }: { fraction: number } ) {
+// One usage meter: a title with right-aligned meta (or a menu) over a bar.
+// Every readout in the account sidebar shares this shape.
+function Meter( {
+	title,
+	meta,
+	trailing,
+	children,
+	disabled,
+}: {
+	title: string;
+	meta?: string;
+	trailing?: ReactNode;
+	children: ReactNode;
+	disabled?: boolean;
+} ) {
 	return (
-		<div className={ styles.progressTrack } data-testid="usage-progress-bar" aria-hidden="true">
-			<div className={ styles.progressValue } style={ { inlineSize: `${ fraction * 100 }%` } } />
+		<div className={ clsx( styles.meter, disabled && styles.usageDisabled ) }>
+			<div className={ styles.meterHeader }>
+				<h3 className={ styles.meterTitle }>{ title }</h3>
+				{ meta || trailing ? (
+					<div className={ styles.meterHeaderEnd }>
+						{ meta ? <span className={ styles.meterMeta }>{ meta }</span> : null }
+						{ trailing }
+					</div>
+				) : null }
+			</div>
+			{ children }
 		</div>
 	);
 }
 
-function AiCreditsSummary() {
+// Studio Code AI credit usage. A meter sub-section in the account sidebar, since
+// credits are spent by the agent. Goes disabled whenever the figures can't be
+// read (offline or signed out) rather than presenting a stale number as current.
+export function AiCreditsSection() {
 	const locale = useUserLocale();
+	const { reason } = usePreviewAgenticFeatures();
 	const { data: quota, isLoading, isError } = useStudioAssistantQuota();
+	const unavailable = reason !== null;
+
+	if ( unavailable ) {
+		return (
+			<Meter title={ __( 'AI credits' ) } disabled>
+				<UnavailableBar />
+			</Meter>
+		);
+	}
 
-	let content;
 	if ( isLoading ) {
-		content = (
-			<>
-				<div className={ styles.previewUsageText }>{ __( 'Loading...' ) }</div>
-				<UsageProgressBar fraction={ 0 } />
-			</>
+		return (
+			<Meter title={ __( 'AI credits' ) }>
+				<Gauge fraction={ 0 } />
+			</Meter>
 		);
-	} else if ( isError ) {
-		content = (
-			<div className={ styles.previewUsageText }>
-				{ __( 'Studio Code limits are temporarily unavailable.' ) }
-			</div>
+	}
+
+	if ( isError ) {
+		return (
+			<Meter title={ __( 'AI credits' ) }>
+				<p className={ styles.meterText }>
+					{ __( 'Studio Code limits are temporarily unavailable.' ) }
+				</p>
+			</Meter>
 		);
-	} else if ( quota && quota.costCap > 0 ) {
+	}
+
+	if ( quota && quota.costCap > 0 ) {
 		const fraction = clampQuotaFraction( quota.costUsage, quota.costCap );
-		content = (
-			<>
-				<div className={ styles.previewUsageText }>
-					{ sprintf(
-						/* translators: %1$s: percentage of monthly limit used (e.g. 7.5%). %2$s: date the limit resets (e.g. July 1, 2026). */
-						__( '%1$s of monthly limit used (resets on %2$s)' ),
-						formatQuotaPercentage( fraction, locale ),
-						formatQuotaResetDate( quota.costResetDate, locale )
-					) }
-				</div>
-				<UsageProgressBar fraction={ fraction } />
-			</>
-		);
-	} else {
-		content = (
-			<>
-				<p>
-					{ __(
-						'AI credits are currently free while Studio Code is in Alpha. Build, iterate, and experiment, but know that credits will eventually have a cost.'
-					) }
-				</p>
-				<div className={ clsx( styles.progressTrack, styles.aiCreditsTrack ) } aria-hidden="true">
-					<div className={ styles.aiCreditsMeterValue } />
-				</div>
-			</>
+		return (
+			<Meter
+				title={ __( 'AI credits' ) }
+				meta={ sprintf(
+					/* translators: %s: date the limit resets (e.g. Jul 31). */
+					__( 'Reset %s' ),
+					formatQuotaResetDateShort( quota.costResetDate, locale )
+				) }
+			>
+				<Gauge fraction={ fraction } value={ formatQuotaPercentage( fraction, locale ) } />
+			</Meter>
 		);
 	}
 
+	// Alpha: no cost cap yet, so there's no figure — a hatched brand bar stands in
+	// while credits are free.
 	return (
-		<section className={ styles.usageSection }>
-			<div className={ styles.usageSectionHeader }>
-				<h2>{ __( 'AI credits' ) }</h2>
+		<Meter title={ __( 'AI credits' ) } meta={ __( 'Free during Alpha' ) }>
+			<div className={ clsx( styles.progressTrack, styles.aiCreditsTrack ) } aria-hidden="true">
+				<div className={ styles.aiCreditsMeterValue } />
 			</div>
-			{ content }
-		</section>
+		</Meter>
 	);
 }
 
@@ -130,100 +161,74 @@ function PreviewSitesSummary( { userId }: { userId: number } ) {
 		}
 	};
 
-	return (
-		<section className={ styles.usageSection }>
-			<div className={ styles.usageSectionHeader }>
-				<h2>{ __( 'Preview sites' ) }</h2>
-				{ ! snapshotCreationBlocked ? (
-					<Menu.Root modal={ false }>
-						<Menu.Trigger
-							render={
-								<IconButton
-									variant="minimal"
-									tone="neutral"
-									size="small"
-									icon={ moreHorizontal }
-									label={ __( 'Preview site actions' ) }
-									className={ styles.previewActionsButton }
-									disabled={ isDisabled }
-								/>
-							}
-						/>
-						<Menu.Popup side="bottom" align="end">
-							<Menu.Item disabled={ isDisabled } onClick={ () => void handleDelete() }>
-								{ deletePreviewSitesLabel }
-							</Menu.Item>
-						</Menu.Popup>
-					</Menu.Root>
-				) : null }
-			</div>
-			{ snapshotCreationBlocked ? (
-				<div className={ styles.previewUsageText }>
+	if ( snapshotCreationBlocked ) {
+		return (
+			<Meter title={ __( 'Preview sites' ) }>
+				<p className={ styles.meterText }>
 					{ __( 'Preview sites are not available for your account.' ) }
-				</div>
-			) : (
-				<>
-					<div className={ styles.previewUsageText }>
-						{ isLoadingPreviewUsage
-							? __( 'Loading...' )
-							: sprintf(
-									/* translators: 1: number of active preview sites, 2: maximum allowed */
-									_n(
-										'%1$d of %2$d active preview site',
-										'%1$d of %2$d active preview sites',
-										siteCount
-									),
-									siteCount,
-									siteLimit
-							  ) }
-					</div>
-					<UsageProgressBar fraction={ fraction } />
-				</>
-			) }
+				</p>
+			</Meter>
+		);
+	}
+
+	const value = isLoadingPreviewUsage
+		? __( 'Loading...' )
+		: sprintf(
+				/* translators: 1: number of active preview sites, 2: maximum allowed. */
+				__( '%1$d of %2$d' ),
+				siteCount,
+				siteLimit
+		  );
+
+	return (
+		<Meter
+			title={ __( 'Preview sites' ) }
+			trailing={
+				<Menu.Root modal={ false }>
+					<Menu.Trigger
+						render={
+							<IconButton
+								variant="minimal"
+								tone="neutral"
+								size="small"
+								icon={ moreHorizontal }
+								label={ __( 'Preview site actions' ) }
+								className={ styles.meterActionsButton }
+								disabled={ isDisabled }
+							/>
+						}
+					/>
+					<Menu.Popup side="bottom" align="end">
+						<Menu.Item disabled={ isDisabled } onClick={ () => void handleDelete() }>
+							{ deletePreviewSitesLabel }
+						</Menu.Item>
+					</Menu.Popup>
+				</Menu.Root>
+			}
+		>
+			<Gauge fraction={ fraction } value={ value } />
 			{ deleteAllSnapshots.error ? (
 				<div className={ styles.errorMessage }>
 					{ __( 'An error occurred while deleting preview sites. Please try again.' ) }
 				</div>
 			) : null }
-		</section>
+		</Meter>
 	);
 }
 
-export function UsagePanel() {
-	const { data: user } = useAuthUser();
-	// Same signed-out/offline split the rest of the app banners use. Either way
-	// the figures can't be read or refreshed, so the card goes disabled rather
-	// than presenting a stale number as current.
-	const { reason } = useAgenticFeatures();
-	const unavailable = reason !== null;
+// Preview-site usage as a row inside the account sidebar. The sidebar only
+// renders it for a signed-in user, so the sole unreadable state that reaches
+// here is offline — swap in a hatched placeholder rather than a stale count.
+export function PreviewUsageSection( { userId }: { userId: number } ) {
+	const { reason } = usePreviewAgenticFeatures();
 
-	return (
-		<div className={ styles.usagePanel }>
-			{ reason === 'offline' ? <OfflineNotice /> : null }
-			{ reason === 'signed-out' ? <SigninNotice /> : null }
-			<section
-				className={ clsx( styles.settingsPanelSection, unavailable && styles.usageDisabled ) }
-			>
-				<div className={ styles.settingsPanelHeader }>
-					<h2>{ __( 'Usage' ) }</h2>
-					<p>{ __( 'Track your preview site usage and Studio Code AI credits.' ) }</p>
-				</div>
-				{ unavailable ? (
-					<>
-						<UnavailableSection title={ __( 'AI credits' ) } />
-						<UnavailableSection title={ __( 'Preview sites' ) } />
-					</>
-				) : (
-					<>
-						<AiCreditsSummary />
-						{ user ? (
-							<PreviewSitesSummary userId={ user.id } />
-						) : (
-							<UnavailableSection title={ __( 'Preview sites' ) } />
-						) }
-					</>
-				) }
-			</section>
-		</div>
-	);
+	if ( reason === 'offline' ) {
+		return (
+			<Meter title={ __( 'Preview sites' ) } disabled>
+				<UnavailableBar />
+			</Meter>
+		);
+	}
+
+	return <PreviewSitesSummary userId={ userId } />;
 }
diff --git a/packages/common/lib/studio-assistant-quota.ts b/packages/common/lib/studio-assistant-quota.ts
index 9be287b3c2..ad01effe66 100644
--- a/packages/common/lib/studio-assistant-quota.ts
+++ b/packages/common/lib/studio-assistant-quota.ts
@@ -35,3 +35,12 @@ export function formatQuotaResetDate( date: string, locale?: string ): string {
 		year: 'numeric',
 	} ).format( new Date( date ) );
 }
+
+// Compact reset date (e.g. "Jul 31") for the settings usage meter, where the
+// figure sits inline next to the title rather than in a full sentence.
+export function formatQuotaResetDateShort( date: string, locale?: string ): string {
+	return new Intl.DateTimeFormat( locale, {
+		day: 'numeric',
+		month: 'short',
+	} ).format( new Date( date ) );
+}

From d2032eb78d546384f16f94ba4f052a0ddf0b63ec Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Thu, 23 Jul 2026 23:22:50 -0400
Subject: [PATCH 2/4] Polish settings redesign: usage meters, instructions
 editor, signed-out states, sticky account sidebar

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../settings-view/account-section.tsx         | 17 +++--
 .../settings-view/ai-panel.test.tsx           | 11 +++
 .../src/components/settings-view/ai-panel.tsx | 13 +++-
 .../ui/src/components/settings-view/index.tsx |  2 +-
 .../settings-view/studio-code-panel.test.tsx  | 17 +++++
 .../settings-view/studio-code-panel.tsx       | 27 ++++++-
 .../components/settings-view/style.module.css | 76 ++++++++++++++++---
 .../settings-view/usage-panel.test.tsx        | 37 +++++----
 .../components/settings-view/usage-panel.tsx  | 46 ++++++-----
 9 files changed, 181 insertions(+), 65 deletions(-)

diff --git a/apps/ui/src/components/settings-view/account-section.tsx b/apps/ui/src/components/settings-view/account-section.tsx
index 07e69f3d70..99e5f4bdc2 100644
--- a/apps/ui/src/components/settings-view/account-section.tsx
+++ b/apps/ui/src/components/settings-view/account-section.tsx
@@ -1,6 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import { caution, Icon, page } from '@wordpress/icons';
 import { Button } from '@wordpress/ui';
+import { clsx } from 'clsx';
 import { Gravatar } from '@/components/gravatar';
 import { useConnector } from '@/data/core';
 import { useLogin, useLogout } from '@/data/queries/use-auth-user';
@@ -66,8 +67,10 @@ export function AccountSection() {
 						</div>
 					</section>
 
-					<AiCreditsSection />
-					<PreviewUsageSection userId={ user.id } />
+					<div className={ styles.usageGroup }>
+						<AiCreditsSection />
+						<PreviewUsageSection userId={ user.id } />
+					</div>
 				</>
 			) : (
 				<section className={ styles.asideSection }>
@@ -93,11 +96,6 @@ export function AccountSection() {
 				</section>
 			) }
 
-			<section className={ styles.asideSection }>
-				<h2 className={ styles.asideHeading }>{ __( 'Help' ) }</h2>
-				<AccountHelpLinks />
-			</section>
-
 			{ user ? (
 				<Button
 					type="button"
@@ -111,6 +109,11 @@ export function AccountSection() {
 					{ __( 'Log out' ) }
 				</Button>
 			) : null }
+
+			<section className={ clsx( styles.asideSection, styles.accountHelp ) }>
+				<h2 className={ styles.asideHeading }>{ __( 'Help' ) }</h2>
+				<AccountHelpLinks />
+			</section>
 		</div>
 	);
 }
diff --git a/apps/ui/src/components/settings-view/ai-panel.test.tsx b/apps/ui/src/components/settings-view/ai-panel.test.tsx
index 074ba92af1..2fe6894351 100644
--- a/apps/ui/src/components/settings-view/ai-panel.test.tsx
+++ b/apps/ui/src/components/settings-view/ai-panel.test.tsx
@@ -112,6 +112,17 @@ describe( 'AiPanel', () => {
 		expect( mutate ).toHaveBeenCalledWith( { agenticFeaturesEnabled: true } );
 	} );
 
+	it( 'locks the agentic features toggle and prompts sign-in when signed out', () => {
+		mockConnector();
+		useAgenticFeaturesMock.mockReturnValue( { reason: 'signed-out' } as never );
+		render( <AiPanel /> );
+
+		const toggle = screen.getByRole( 'checkbox', { name: 'Agentic features' } );
+		expect( toggle ).toBeDisabled();
+		expect( toggle ).not.toBeChecked();
+		expect( screen.getByText( 'You must log in for agentic features.' ) ).toBeInTheDocument();
+	} );
+
 	it( 'shows the global instructions editor alongside the agentic features toggle', () => {
 		mockConnector();
 		render( <AiPanel /> );
diff --git a/apps/ui/src/components/settings-view/ai-panel.tsx b/apps/ui/src/components/settings-view/ai-panel.tsx
index 8291060e50..774853a521 100644
--- a/apps/ui/src/components/settings-view/ai-panel.tsx
+++ b/apps/ui/src/components/settings-view/ai-panel.tsx
@@ -13,13 +13,17 @@ import styles from './style.module.css';
 // Toggles whether chat is on offer. It's a stored preference, not a UI switch —
 // turning it off keeps you in the agentic UI and preserves existing
 // conversations. Switching all the way back to the classic UI lives in Settings.
+// Agentic features need a WordPress.com account, so the toggle is locked (and
+// reads off) until the user signs in.
 function AgenticFeaturesSection() {
+	const { reason } = usePreviewAgenticFeatures();
 	const { data: preferences, isLoading } = useUserPreferences();
 	const savePreferences = useSaveUserPreferences();
 	const enabled = preferences?.agenticFeaturesEnabled ?? true;
+	const signedOut = reason === 'signed-out';
 
 	return (
-		<section className={ styles.card }>
+		<section className={ clsx( styles.card, signedOut && styles.cardDisabled ) }>
 			<div className={ styles.cardHeader }>
 				<div className={ styles.cardHeaderText }>
 					<h2 className={ styles.cardTitle }>{ __( 'Agentic features' ) }</h2>
@@ -31,13 +35,16 @@ function AgenticFeaturesSection() {
 				</div>
 				<div className={ clsx( styles.cardHeaderActions, styles.toggleControl ) }>
 					<FormToggle
-						checked={ enabled }
-						disabled={ isLoading }
+						checked={ enabled && ! signedOut }
+						disabled={ isLoading || signedOut }
 						aria-label={ __( 'Agentic features' ) }
 						onChange={ () => savePreferences.mutate( { agenticFeaturesEnabled: ! enabled } ) }
 					/>
 				</div>
 			</div>
+			{ signedOut ? (
+				<p className={ styles.signInNotice }>{ __( 'You must log in for agentic features.' ) }</p>
+			) : null }
 		</section>
 	);
 }
diff --git a/apps/ui/src/components/settings-view/index.tsx b/apps/ui/src/components/settings-view/index.tsx
index 626d6f06a2..cc3caf95a3 100644
--- a/apps/ui/src/components/settings-view/index.tsx
+++ b/apps/ui/src/components/settings-view/index.tsx
@@ -343,8 +343,8 @@ function PreferencesPanel( {
 				</section>
 				<StudioExperienceSection />
 				<StudioCliSection />
-				<KeyboardPanel />
 				<McpSection />
+				<KeyboardPanel />
 			</div>
 		</div>
 	);
diff --git a/apps/ui/src/components/settings-view/studio-code-panel.test.tsx b/apps/ui/src/components/settings-view/studio-code-panel.test.tsx
index 6fabe052c2..56e3902125 100644
--- a/apps/ui/src/components/settings-view/studio-code-panel.test.tsx
+++ b/apps/ui/src/components/settings-view/studio-code-panel.test.tsx
@@ -5,6 +5,7 @@ import {
 	useAgentInstructions,
 	useSaveAgentInstructions,
 } from '@/data/queries/use-agent-instructions';
+import { useAgenticFeatures } from '@/data/queries/use-agentic-features';
 import { StudioCodePanel } from './studio-code-panel';
 
 vi.mock( '@wordpress/components', () => ( {
@@ -29,8 +30,13 @@ vi.mock( '@/data/queries/use-agent-instructions', () => ( {
 	useSaveAgentInstructions: vi.fn(),
 } ) );
 
+vi.mock( '@/data/queries/use-agentic-features', () => ( {
+	useAgenticFeatures: vi.fn(),
+} ) );
+
 const useAgentInstructionsMock = vi.mocked( useAgentInstructions );
 const useSaveAgentInstructionsMock = vi.mocked( useSaveAgentInstructions );
+const useAgenticFeaturesMock = vi.mocked( useAgenticFeatures );
 
 describe( 'StudioCodePanel', () => {
 	const save = vi.fn();
@@ -40,6 +46,7 @@ describe( 'StudioCodePanel', () => {
 		vi.useFakeTimers();
 		useAgentInstructionsMock.mockReturnValue( { data: 'Answer in French.' } as never );
 		useSaveAgentInstructionsMock.mockReturnValue( { mutate: save, isError: false } as never );
+		useAgenticFeaturesMock.mockReturnValue( { reason: null } as never );
 	} );
 
 	afterEach( () => {
@@ -119,4 +126,14 @@ describe( 'StudioCodePanel', () => {
 
 		expect( save ).toHaveBeenCalledWith( '' );
 	} );
+
+	it( 'locks the editor and prompts sign-in when signed out', () => {
+		useAgenticFeaturesMock.mockReturnValue( { reason: 'signed-out' } as never );
+
+		render( <StudioCodePanel /> );
+
+		expect( screen.getByText( 'You must log in for agent instructions.' ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'checkbox', { name: 'Enable instructions' } ) ).toBeDisabled();
+		expect( screen.queryByLabelText( 'Instructions' ) ).not.toBeInTheDocument();
+	} );
 } );
diff --git a/apps/ui/src/components/settings-view/studio-code-panel.tsx b/apps/ui/src/components/settings-view/studio-code-panel.tsx
index 21b044c88d..f892295ca7 100644
--- a/apps/ui/src/components/settings-view/studio-code-panel.tsx
+++ b/apps/ui/src/components/settings-view/studio-code-panel.tsx
@@ -7,6 +7,7 @@ import {
 	useAgentInstructions,
 	useSaveAgentInstructions,
 } from '@/data/queries/use-agent-instructions';
+import { usePreviewAgenticFeatures } from './settings-preview';
 import styles from './style.module.css';
 
 // Long enough that a normal typing burst lands as one write, short enough that
@@ -14,6 +15,7 @@ import styles from './style.module.css';
 const SAVE_DEBOUNCE_MS = 800;
 
 export function StudioCodePanel() {
+	const { reason } = usePreviewAgenticFeatures();
 	const { data: saved } = useAgentInstructions();
 	const { mutate: save, isError } = useSaveAgentInstructions();
 	const [ edits, setEdits ] = useState< string | null >( null );
@@ -26,6 +28,17 @@ export function StudioCodePanel() {
 	const enabled = userEnabled ?? ( saved?.length ?? 0 ) > 0;
 
 	const pending = useRef< string | null >( null );
+	const textareaRef = useRef< HTMLTextAreaElement >( null );
+
+	// Grow the editor to fit its content, from a compact starting height.
+	useEffect( () => {
+		const el = textareaRef.current;
+		if ( ! el ) {
+			return;
+		}
+		el.style.height = 'auto';
+		el.style.height = `${ el.scrollHeight }px`;
+	}, [ content, enabled, reason ] );
 
 	useEffect( () => {
 		pending.current = isDirty ? content : null;
@@ -53,6 +66,7 @@ export function StudioCodePanel() {
 		return <div className={ styles.state }>{ __( 'Loading…' ) }</div>;
 	}
 
+	const signedOut = reason === 'signed-out';
 	const showCounter = enabled && content.length >= GLOBAL_INSTRUCTIONS_MAX_LENGTH * 0.8;
 
 	// Turning the switch off both hides the editor and clears the stored
@@ -67,7 +81,7 @@ export function StudioCodePanel() {
 	};
 
 	return (
-		<section className={ styles.card }>
+		<section className={ clsx( styles.card, signedOut && styles.cardDisabled ) }>
 			<div className={ styles.cardHeader }>
 				<div className={ styles.cardHeaderText }>
 					<h2 className={ styles.cardTitle }>{ __( 'Instructions' ) }</h2>
@@ -79,18 +93,23 @@ export function StudioCodePanel() {
 				</div>
 				<div className={ clsx( styles.cardHeaderActions, styles.toggleControl ) }>
 					<FormToggle
-						checked={ enabled }
+						checked={ enabled && ! signedOut }
+						disabled={ signedOut }
 						aria-label={ __( 'Enable instructions' ) }
 						onChange={ handleToggle }
 					/>
 				</div>
 			</div>
-			{ enabled && (
+			{ signedOut && (
+				<p className={ styles.signInNotice }>{ __( 'You must log in for agent instructions.' ) }</p>
+			) }
+			{ ! signedOut && enabled && (
 				<>
 					<textarea
+						ref={ textareaRef }
 						className={ styles.instructionsTextarea }
 						aria-label={ __( 'Instructions' ) }
-						rows={ 12 }
+						rows={ 3 }
 						placeholder={ __( 'e.g. Always answer in French. My sites are for restaurants.' ) }
 						value={ content }
 						onChange={ ( event ) =>
diff --git a/apps/ui/src/components/settings-view/style.module.css b/apps/ui/src/components/settings-view/style.module.css
index ca72b83646..d04904acf9 100644
--- a/apps/ui/src/components/settings-view/style.module.css
+++ b/apps/ui/src/components/settings-view/style.module.css
@@ -3,7 +3,8 @@
    --------------------------------------------------------------------------
    Every settings tab is built from the same primitives:
 
-     .panel   — a tab's centered column of cards
+     .settingsLayout — a tab's column, one column that becomes two (Account
+                aside + main) when there's room
      .card    — a bordered section: a header followed by body content
                 (.cardHeader, .cardHeaderText, .cardTitle, .cardDescription,
                  .cardHeaderActions for a trailing control)
@@ -22,7 +23,8 @@
 .root {
 	--settings-form-width: 560px;
 	--settings-wide-width: 880px;
-	--settings-aside-width: 260px;
+	--settings-aside-width: 232px;
+	--settings-header-height: 54px;
 	--settings-divider-border: 1px dotted
 		color-mix(in srgb, var(--wpds-color-stroke-surface-neutral) 72%, transparent);
 	--settings-row-padding-block: calc(var(--wpds-dimension-padding-md) + 2px);
@@ -47,7 +49,7 @@
 	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
 	align-items: center;
 	gap: var(--wpds-dimension-padding-sm);
-	min-height: 54px;
+	min-height: var(--settings-header-height);
 	border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral);
 	color: var(--wpds-color-fg-content-neutral);
 	-webkit-app-region: drag;
@@ -162,8 +164,24 @@
 	.settingsLayout {
 		grid-template-columns: var(--settings-aside-width) minmax(0, 1fr);
 		align-items: start;
+		column-gap: var(--wpds-dimension-padding-2xl);
 		max-width: var(--settings-wide-width);
 	}
+
+	/* Keep the account column in view while the main column scrolls, filling the
+	   viewport so its Help links pin to the bottom (min-height, so it still grows
+	   if its own content is taller than the window). */
+	.accountAside {
+		position: sticky;
+		top: var(--wpds-dimension-padding-2xl);
+		min-height: calc(
+			100dvh - var(--settings-header-height) - 2 * var(--wpds-dimension-padding-2xl)
+		);
+	}
+
+	.accountHelp {
+		margin-block-start: auto;
+	}
 }
 
 /* ---- Card ---------------------------------------------------------------- */
@@ -215,6 +233,21 @@
 	line-height: var(--wpds-typography-line-height-sm);
 }
 
+/* A card whose setting is unavailable (e.g. agentic features while signed out):
+   mute the heading text to match its disabled control. The sign-in notice below
+   stays at full contrast, since it's the actionable call to sign in. */
+.cardDisabled .cardTitle,
+.cardDisabled .cardDescription {
+	color: var(--wpds-color-fg-interactive-neutral-disabled);
+}
+
+.signInNotice {
+	margin: 0;
+	color: var(--wpds-color-fg-content-neutral);
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: var(--wpds-typography-line-height-sm);
+}
+
 /* Trailing control(s) in a card header. Reserves a compact-button height so a
    header doesn't jump when an optional action (e.g. Skills' "Install all")
    appears or disappears. */
@@ -332,16 +365,19 @@
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
-	gap: var(--wpds-dimension-padding-md);
+	gap: var(--wpds-dimension-padding-sm);
 }
 
-/* Title (+ inline meta) on the left, figure (+ optional menu) on the right. */
+/* Title (+ inline meta) on the left, figure (+ optional menu) on the right. A
+   fixed height keeps the header (and so the gap to the bar) identical whether
+   the row holds plain meta text or the taller ⋯ menu button. */
 .meterHeader {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	gap: var(--wpds-dimension-padding-md);
 	min-width: 0;
+	block-size: var(--wpds-typography-line-height-md);
 }
 
 .meterHeaderEnd {
@@ -374,8 +410,20 @@
 	line-height: var(--wpds-typography-line-height-sm);
 }
 
+/* The preview "Reset" button reads like the AI-credits meta text (weak, sm,
+   regular weight) with its label flush to the right edge — no button padding,
+   fill or min-width — so it lines up with "Resets Jul 31" above it. */
 .meterActionsButton {
 	flex-shrink: 0;
+	font-size: var(--wpds-typography-font-size-sm);
+	font-weight: 400;
+	--wp-ui-button-padding-inline: 0;
+	--wp-ui-button-min-width: 0;
+	--wp-ui-button-background-color: transparent;
+	--wp-ui-button-background-color-active: transparent;
+	--wp-ui-button-background-color-disabled: transparent;
+	--wp-ui-button-foreground-color: var(--wpds-color-fg-content-neutral-weak);
+	--wp-ui-button-foreground-color-active: var(--wpds-color-fg-content-neutral);
 }
 
 /* Thin pill bar: bright brand fill on a neutral track. */
@@ -409,7 +457,7 @@
 .gaugeValue {
 	flex-shrink: 0;
 	color: var(--wpds-color-fg-content-neutral);
-	font-size: var(--wpds-typography-font-size-md);
+	font-size: var(--wpds-typography-font-size-sm);
 	line-height: var(--wpds-typography-line-height-sm);
 	font-variant-numeric: tabular-nums;
 	white-space: nowrap;
@@ -507,7 +555,9 @@
 	font-family: var(--wpds-typography-font-family-body);
 	font-size: var(--wpds-typography-font-size-sm);
 	line-height: var(--wpds-typography-line-height-md);
-	resize: vertical;
+	/* Height is driven by content (auto-grow in the panel); no manual handle. */
+	resize: none;
+	overflow: hidden;
 }
 
 .instructionsTextarea::placeholder {
@@ -552,6 +602,14 @@
 	gap: var(--wpds-dimension-padding-md);
 }
 
+/* Keeps the AI credits + preview usage meters grouped a little tighter than the
+   aside's default rhythm. */
+.usageGroup {
+	display: flex;
+	flex-direction: column;
+	gap: var(--wpds-dimension-padding-md);
+}
+
 .asideHeading {
 	margin: 0;
 	color: var(--wpds-color-fg-content-neutral);
@@ -616,11 +674,9 @@
 
 /* Log out reads as a destructive action. wpds Button has no error tone, so
    recolor its internal vars: a subtle translucent red fill with a vivid red
-   label (the error-strong red, deepening its fill on hover/active). A small
-   button, set apart with extra space above. */
+   label (the error-strong red, deepening its fill on hover/active). */
 .logoutButton {
 	align-self: flex-start;
-	margin-block-start: var(--wpds-dimension-padding-xl);
 	--wp-ui-button-background-color: color-mix(
 		in srgb,
 		var(--wpds-color-bg-interactive-error-strong) 14%,
diff --git a/apps/ui/src/components/settings-view/usage-panel.test.tsx b/apps/ui/src/components/settings-view/usage-panel.test.tsx
index abd83eb1ff..1aedc2daa7 100644
--- a/apps/ui/src/components/settings-view/usage-panel.test.tsx
+++ b/apps/ui/src/components/settings-view/usage-panel.test.tsx
@@ -15,28 +15,29 @@ import { AiCreditsSection, PreviewUsageSection } from './usage-panel';
 import type { ReactNode } from 'react';
 
 vi.mock( '@wordpress/ui', () => ( {
-	IconButton: ( { label, disabled }: { label: string; disabled?: boolean } ) => (
-		<button type="button" aria-label={ label } disabled={ disabled } />
-	),
-} ) );
-
-vi.mock( '@/components/menu', () => ( {
-	Root: ( { children }: { children: ReactNode } ) => <div>{ children }</div>,
-	Trigger: ( { render: trigger }: { render: ReactNode } ) => trigger,
-	Popup: ( { children }: { children: ReactNode } ) => <div>{ children }</div>,
-	Item: ( {
+	Button: ( {
 		children,
 		disabled,
 		onClick,
+		loading,
+		loadingAnnouncement,
 	}: {
-		children: ReactNode;
+		children?: ReactNode;
 		disabled?: boolean;
 		onClick?: () => void;
+		loading?: boolean;
+		loadingAnnouncement?: string;
 	} ) => (
 		<button type="button" disabled={ disabled } onClick={ onClick }>
-			{ children }
+			{ loading ? loadingAnnouncement : children }
 		</button>
 	),
+	Tooltip: {
+		Root: ( { children }: { children: ReactNode } ) => <>{ children }</>,
+		Trigger: ( { render: trigger }: { render: ReactNode } ) => trigger,
+		Popup: ( { children }: { children: ReactNode } ) => <div>{ children }</div>,
+		Positioner: () => null,
+	},
 } ) );
 
 vi.mock( '@/data/core', () => ( {
@@ -136,7 +137,7 @@ describe( 'usage sections', () => {
 			render( <AiCreditsSection /> );
 
 			expect( screen.getByText( '25%' ) ).toBeInTheDocument();
-			expect( screen.getByText( 'Reset Aug 1' ) ).toBeInTheDocument();
+			expect( screen.getByText( 'Resets Aug 1' ) ).toBeInTheDocument();
 			expect( screen.queryByText( ALPHA_META ) ).not.toBeInTheDocument();
 		} );
 
@@ -184,7 +185,7 @@ describe( 'usage sections', () => {
 			render( <PreviewUsageSection userId={ 1 } /> );
 
 			expect( screen.getByRole( 'heading', { name: 'Preview sites' } ) ).toBeInTheDocument();
-			expect( screen.getByText( '2 of 10' ) ).toBeInTheDocument();
+			expect( screen.getByText( '2/10' ) ).toBeInTheDocument();
 			expect( useSnapshotsMock ).toHaveBeenCalledWith( 1 );
 			expect( useSnapshotUsageMock ).toHaveBeenCalledWith( 1 );
 			expect( useDeleteAllSnapshotsMock ).toHaveBeenCalledWith( 1 );
@@ -193,7 +194,7 @@ describe( 'usage sections', () => {
 		it( 'confirms through the connector before deleting all preview sites', async () => {
 			render( <PreviewUsageSection userId={ 1 } /> );
 
-			fireEvent.click( screen.getByRole( 'button', { name: 'Delete all preview sites' } ) );
+			fireEvent.click( screen.getByRole( 'button', { name: 'Reset' } ) );
 
 			await waitFor( () => expect( confirmDeleteAllPreviewSites ).toHaveBeenCalledTimes( 1 ) );
 			expect( deleteSnapshotsMutate ).toHaveBeenCalledTimes( 1 );
@@ -204,7 +205,7 @@ describe( 'usage sections', () => {
 
 			render( <PreviewUsageSection userId={ 1 } /> );
 
-			fireEvent.click( screen.getByRole( 'button', { name: 'Delete all preview sites' } ) );
+			fireEvent.click( screen.getByRole( 'button', { name: 'Reset' } ) );
 
 			await waitFor( () => expect( confirmDeleteAllPreviewSites ).toHaveBeenCalledTimes( 1 ) );
 			expect( deleteSnapshotsMutate ).not.toHaveBeenCalled();
@@ -247,9 +248,7 @@ describe( 'usage sections', () => {
 
 			expect( screen.getByRole( 'img', { name: 'Unavailable' } ) ).toBeInTheDocument();
 			expect( screen.queryByText( /active preview site/ ) ).not.toBeInTheDocument();
-			expect(
-				screen.queryByRole( 'button', { name: 'Delete all preview sites' } )
-			).not.toBeInTheDocument();
+			expect( screen.queryByRole( 'button', { name: 'Reset' } ) ).not.toBeInTheDocument();
 		} );
 	} );
 } );
diff --git a/apps/ui/src/components/settings-view/usage-panel.tsx b/apps/ui/src/components/settings-view/usage-panel.tsx
index cda6cf403a..e4280fff9b 100644
--- a/apps/ui/src/components/settings-view/usage-panel.tsx
+++ b/apps/ui/src/components/settings-view/usage-panel.tsx
@@ -4,10 +4,8 @@ import {
 	formatQuotaResetDateShort,
 } from '@studio/common/lib/studio-assistant-quota';
 import { __, sprintf } from '@wordpress/i18n';
-import { moreHorizontal } from '@wordpress/icons';
-import { IconButton } from '@wordpress/ui';
+import { Button, Tooltip } from '@wordpress/ui';
 import { clsx } from 'clsx';
-import * as Menu from '@/components/menu';
 import { useConnector } from '@/data/core';
 import { useStudioAssistantQuota } from '@/data/queries/use-assistant-quota';
 import {
@@ -109,16 +107,23 @@ export function AiCreditsSection() {
 
 	if ( quota && quota.costCap > 0 ) {
 		const fraction = clampQuotaFraction( quota.costUsage, quota.costCap );
+		// Round the shown figure up to the next whole percent (toFixed guards
+		// float noise like 0.07 * 100 = 7.0000001); the bar still fills to the
+		// exact value.
+		const wholePercent = Math.ceil( Number( ( fraction * 100 ).toFixed( 4 ) ) );
 		return (
 			<Meter
 				title={ __( 'AI credits' ) }
 				meta={ sprintf(
 					/* translators: %s: date the limit resets (e.g. Jul 31). */
-					__( 'Reset %s' ),
+					__( 'Resets %s' ),
 					formatQuotaResetDateShort( quota.costResetDate, locale )
 				) }
 			>
-				<Gauge fraction={ fraction } value={ formatQuotaPercentage( fraction, locale ) } />
+				<Gauge
+					fraction={ fraction }
+					value={ formatQuotaPercentage( wholePercent / 100, locale ) }
+				/>
 			</Meter>
 		);
 	}
@@ -147,9 +152,6 @@ function PreviewSitesSummary( { userId }: { userId: number } ) {
 	// Empty while loading: a bar still filled from the previous figure would
 	// contradict the "Loading..." row next to it.
 	const fraction = isLoadingPreviewUsage ? 0 : clampQuotaFraction( siteCount, siteLimit );
-	const deletePreviewSitesLabel = deleteAllSnapshots.isPending
-		? __( 'Deleting preview sites...' )
-		: __( 'Delete all preview sites' );
 
 	const handleDelete = async () => {
 		if ( isDisabled ) {
@@ -175,7 +177,7 @@ function PreviewSitesSummary( { userId }: { userId: number } ) {
 		? __( 'Loading...' )
 		: sprintf(
 				/* translators: 1: number of active preview sites, 2: maximum allowed. */
-				__( '%1$d of %2$d' ),
+				__( '%1$d/%2$d' ),
 				siteCount,
 				siteLimit
 		  );
@@ -184,26 +186,28 @@ function PreviewSitesSummary( { userId }: { userId: number } ) {
 		<Meter
 			title={ __( 'Preview sites' ) }
 			trailing={
-				<Menu.Root modal={ false }>
-					<Menu.Trigger
+				<Tooltip.Root>
+					<Tooltip.Trigger
 						render={
-							<IconButton
+							<Button
+								type="button"
 								variant="minimal"
 								tone="neutral"
 								size="small"
-								icon={ moreHorizontal }
-								label={ __( 'Preview site actions' ) }
 								className={ styles.meterActionsButton }
 								disabled={ isDisabled }
-							/>
+								loading={ deleteAllSnapshots.isPending }
+								loadingAnnouncement={ __( 'Deleting preview sites…' ) }
+								onClick={ () => void handleDelete() }
+							>
+								{ __( 'Reset' ) }
+							</Button>
 						}
 					/>
-					<Menu.Popup side="bottom" align="end">
-						<Menu.Item disabled={ isDisabled } onClick={ () => void handleDelete() }>
-							{ deletePreviewSitesLabel }
-						</Menu.Item>
-					</Menu.Popup>
-				</Menu.Root>
+					<Tooltip.Popup positioner={ <Tooltip.Positioner side="top" /> }>
+						{ __( 'Delete all preview sites' ) }
+					</Tooltip.Popup>
+				</Tooltip.Root>
 			}
 		>
 			<Gauge fraction={ fraction } value={ value } />

From 93f6b74d4563e1a1b160128d5a613be496472661 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Fri, 24 Jul 2026 09:48:58 -0400
Subject: [PATCH 3/4] Refine settings layout: wider columns, narrow-mode
 account row, side-by-side keyboard shortcuts, Studio Beta card, native
 instructions sizing

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../settings-view/account-section.tsx         |  22 ++-
 .../components/settings-view/index.test.tsx   |   2 +-
 .../ui/src/components/settings-view/index.tsx |  10 +-
 .../settings-view/keyboard-panel.tsx          |  44 +++---
 .../settings-view/studio-code-panel.tsx       |  12 --
 .../components/settings-view/style.module.css | 128 +++++++++++++++++-
 6 files changed, 175 insertions(+), 43 deletions(-)

diff --git a/apps/ui/src/components/settings-view/account-section.tsx b/apps/ui/src/components/settings-view/account-section.tsx
index 99e5f4bdc2..1824ae6298 100644
--- a/apps/ui/src/components/settings-view/account-section.tsx
+++ b/apps/ui/src/components/settings-view/account-section.tsx
@@ -25,10 +25,22 @@ function AccountHelpLinks() {
 			<button
 				type="button"
 				className={ styles.helpLink }
+				aria-label={ __( 'Documentation' ) }
 				onClick={ () => openLink( getLocalizedLink( locale, 'docsStudio' ) ) }
 			>
 				<Icon icon={ page } size={ 20 } className={ styles.helpLinkIcon } />
-				<span className={ styles.helpLinkLabel }>{ __( 'Documentation' ) }</span>
+				<span
+					className={ clsx( styles.helpLinkLabel, styles.helpLinkLabelFull ) }
+					aria-hidden="true"
+				>
+					{ __( 'Documentation' ) }
+				</span>
+				<span
+					className={ clsx( styles.helpLinkLabel, styles.helpLinkLabelShort ) }
+					aria-hidden="true"
+				>
+					{ __( 'Docs' ) }
+				</span>
 			</button>
 			<button
 				type="button"
@@ -49,11 +61,13 @@ export function AccountSection() {
 	const themeIsDark = useColorScheme() === 'dark';
 
 	return (
-		<div className={ styles.accountAside }>
+		<div className={ clsx( styles.accountAside, user && styles.accountAsideGrid ) }>
 			{ user ? (
 				<>
-					<section className={ styles.asideSection }>
-						<h2 className={ styles.asideHeading }>{ __( 'Account' ) }</h2>
+					<section className={ clsx( styles.asideSection, styles.accountBlock ) }>
+						<h2 className={ clsx( styles.asideHeading, styles.visuallyHidden ) }>
+							{ __( 'Account' ) }
+						</h2>
 						<div className={ styles.accountIdentity }>
 							<Gravatar
 								email={ user.email }
diff --git a/apps/ui/src/components/settings-view/index.test.tsx b/apps/ui/src/components/settings-view/index.test.tsx
index 1db77aae3a..d029fcba9d 100644
--- a/apps/ui/src/components/settings-view/index.test.tsx
+++ b/apps/ui/src/components/settings-view/index.test.tsx
@@ -240,7 +240,7 @@ describe( 'SettingsView', () => {
 		render( <SettingsView activeTab="preferences" onTabChange={ vi.fn() } /> );
 
 		expect( screen.getByRole( 'heading', { name: 'Composer' } ) ).toBeInTheDocument();
-		expect( screen.getByRole( 'heading', { name: 'Site preview' } ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'heading', { name: 'Preview' } ) ).toBeInTheDocument();
 		expect( screen.getByText( 'New chat' ) ).toBeInTheDocument();
 		expect( screen.getByText( 'Send message' ) ).toBeInTheDocument();
 		expect( screen.getByLabelText( 'Control + Comma' ) ).toBeInTheDocument();
diff --git a/apps/ui/src/components/settings-view/index.tsx b/apps/ui/src/components/settings-view/index.tsx
index cc3caf95a3..5b9ab334ea 100644
--- a/apps/ui/src/components/settings-view/index.tsx
+++ b/apps/ui/src/components/settings-view/index.tsx
@@ -247,11 +247,11 @@ function StudioExperienceSection() {
 	}
 	return (
 		<section className={ styles.card }>
-			<div className={ styles.cardHeader }>
+			<div className={ clsx( styles.cardHeader, styles.cardHeaderCentered ) }>
 				<div className={ styles.cardHeaderText }>
-					<h2 className={ styles.cardTitle }>{ __( 'Studio experience' ) }</h2>
+					<h2 className={ styles.cardTitle }>{ __( 'Studio Beta' ) }</h2>
 					<p className={ styles.cardDescription }>
-						{ __( 'You are using the new Studio experience.' ) }
+						{ __( 'You’re using the new Studio with AI chat and a built-in site preview.' ) }
 					</p>
 				</div>
 				<div className={ styles.cardHeaderActions }>
@@ -341,10 +341,10 @@ function PreferencesPanel( {
 						</PreferenceRow>
 					</div>
 				</section>
-				<StudioExperienceSection />
+				<KeyboardPanel />
 				<StudioCliSection />
 				<McpSection />
-				<KeyboardPanel />
+				<StudioExperienceSection />
 			</div>
 		</div>
 	);
diff --git a/apps/ui/src/components/settings-view/keyboard-panel.tsx b/apps/ui/src/components/settings-view/keyboard-panel.tsx
index ba784d4bb9..9ce465ba2a 100644
--- a/apps/ui/src/components/settings-view/keyboard-panel.tsx
+++ b/apps/ui/src/components/settings-view/keyboard-panel.tsx
@@ -46,9 +46,9 @@ function getShortcutSections( isApple: boolean ): ShortcutSection[] {
 			],
 		},
 		{
-			title: __( 'Site preview' ),
+			title: __( 'Preview' ),
 			shortcuts: [
-				{ label: __( 'Toggle site preview' ), keys: [ modifierKey, 'Shift', 'B' ] },
+				{ label: __( 'Toggle preview' ), keys: [ modifierKey, 'Shift', 'B' ] },
 				{ label: __( 'Reload preview' ), keys: [ modifierKey, 'R' ] },
 				{ label: __( 'Go back in preview' ), keys: [ navModifierKey, '←' ] },
 				{ label: __( 'Go forward in preview' ), keys: [ navModifierKey, '→' ] },
@@ -72,7 +72,26 @@ function ShortcutKeys( { keys }: { keys: string[] } ) {
 	);
 }
 
+function ShortcutGroup( { section }: { section: ShortcutSection } ) {
+	return (
+		<div className={ styles.shortcutGroup }>
+			<h3 className={ styles.shortcutGroupTitle }>{ section.title }</h3>
+			<ul className={ styles.list }>
+				{ section.shortcuts.map( ( shortcut ) => (
+					<li key={ shortcut.label } className={ styles.field }>
+						<div className={ styles.fieldText }>
+							<span className={ styles.fieldLabel }>{ shortcut.label }</span>
+						</div>
+						<ShortcutKeys keys={ shortcut.keys } />
+					</li>
+				) ) }
+			</ul>
+		</div>
+	);
+}
+
 export function KeyboardPanel() {
+	const [ globalSection, ...columnSections ] = getShortcutSections( isAppleOS() );
 	return (
 		<section className={ styles.card }>
 			<div className={ styles.cardHeader }>
@@ -80,21 +99,12 @@ export function KeyboardPanel() {
 					<h2 className={ styles.cardTitle }>{ __( 'Keyboard' ) }</h2>
 				</div>
 			</div>
-			{ getShortcutSections( isAppleOS() ).map( ( section ) => (
-				<div key={ section.title } className={ styles.shortcutGroup }>
-					<h3 className={ styles.shortcutGroupTitle }>{ section.title }</h3>
-					<ul className={ styles.list }>
-						{ section.shortcuts.map( ( shortcut ) => (
-							<li key={ shortcut.label } className={ styles.field }>
-								<div className={ styles.fieldText }>
-									<span className={ styles.fieldLabel }>{ shortcut.label }</span>
-								</div>
-								<ShortcutKeys keys={ shortcut.keys } />
-							</li>
-						) ) }
-					</ul>
-				</div>
-			) ) }
+			<ShortcutGroup section={ globalSection } />
+			<div className={ styles.shortcutColumns }>
+				{ columnSections.map( ( section ) => (
+					<ShortcutGroup key={ section.title } section={ section } />
+				) ) }
+			</div>
 		</section>
 	);
 }
diff --git a/apps/ui/src/components/settings-view/studio-code-panel.tsx b/apps/ui/src/components/settings-view/studio-code-panel.tsx
index f892295ca7..460858a109 100644
--- a/apps/ui/src/components/settings-view/studio-code-panel.tsx
+++ b/apps/ui/src/components/settings-view/studio-code-panel.tsx
@@ -28,17 +28,6 @@ export function StudioCodePanel() {
 	const enabled = userEnabled ?? ( saved?.length ?? 0 ) > 0;
 
 	const pending = useRef< string | null >( null );
-	const textareaRef = useRef< HTMLTextAreaElement >( null );
-
-	// Grow the editor to fit its content, from a compact starting height.
-	useEffect( () => {
-		const el = textareaRef.current;
-		if ( ! el ) {
-			return;
-		}
-		el.style.height = 'auto';
-		el.style.height = `${ el.scrollHeight }px`;
-	}, [ content, enabled, reason ] );
 
 	useEffect( () => {
 		pending.current = isDirty ? content : null;
@@ -106,7 +95,6 @@ export function StudioCodePanel() {
 			{ ! signedOut && enabled && (
 				<>
 					<textarea
-						ref={ textareaRef }
 						className={ styles.instructionsTextarea }
 						aria-label={ __( 'Instructions' ) }
 						rows={ 3 }
diff --git a/apps/ui/src/components/settings-view/style.module.css b/apps/ui/src/components/settings-view/style.module.css
index d04904acf9..0c6d3de732 100644
--- a/apps/ui/src/components/settings-view/style.module.css
+++ b/apps/ui/src/components/settings-view/style.module.css
@@ -21,9 +21,10 @@
    ========================================================================== */
 
 .root {
-	--settings-form-width: 560px;
+	--settings-form-width: 680px;
 	--settings-wide-width: 880px;
 	--settings-aside-width: 232px;
+	--settings-column-gap: 48px;
 	--settings-header-height: 54px;
 	--settings-divider-border: 1px dotted
 		color-mix(in srgb, var(--wpds-color-stroke-surface-neutral) 72%, transparent);
@@ -164,8 +165,12 @@
 	.settingsLayout {
 		grid-template-columns: var(--settings-aside-width) minmax(0, 1fr);
 		align-items: start;
-		column-gap: var(--wpds-dimension-padding-2xl);
-		max-width: var(--settings-wide-width);
+		column-gap: var(--settings-column-gap);
+		/* Widen the container by the extra gap so both columns keep their widths. */
+		max-width: calc(
+			var(--settings-wide-width) + var(--settings-column-gap) -
+				var(--wpds-dimension-padding-2xl)
+		);
 	}
 
 	/* Keep the account column in view while the main column scrolls, filling the
@@ -208,6 +213,12 @@
 	gap: var(--wpds-dimension-padding-xl);
 }
 
+/* Center the trailing control against the text block instead of top-aligning it
+   — for short single-line descriptions where a top-aligned button looks adrift. */
+.cardHeaderCentered {
+	align-items: center;
+}
+
 .cardHeaderText {
 	display: flex;
 	flex: 1;
@@ -555,7 +566,10 @@
 	font-family: var(--wpds-typography-font-family-body);
 	font-size: var(--wpds-typography-font-size-sm);
 	line-height: var(--wpds-typography-line-height-md);
-	/* Height is driven by content (auto-grow in the panel); no manual handle. */
+	/* The field grows with its content natively — no JS measuring, so it can't
+	   collapse when the tab panel is remeasured while hidden. `rows` sets the
+	   compact minimum height. */
+	field-sizing: content;
 	resize: none;
 	overflow: hidden;
 }
@@ -596,12 +610,87 @@
 	gap: var(--wpds-dimension-padding-xl);
 }
 
+/* On narrow windows (single-column mode) the account column becomes a compact
+   two-row grid: identity in a row with the Help links and Log out, then the AI
+   credits and Preview sites meters split 50/50 beneath. Above the breakpoint it
+   stays the vertical sticky aside. */
+@media (max-width: 899px) {
+	.accountAsideGrid {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) auto auto;
+		grid-template-areas:
+			"identity links logout"
+			"usage    usage usage";
+		align-items: center;
+		column-gap: var(--wpds-dimension-padding-xl);
+		row-gap: var(--wpds-dimension-padding-xl);
+	}
+
+	.accountAsideGrid .accountBlock {
+		grid-area: identity;
+	}
+
+	.accountAsideGrid .accountHelp {
+		grid-area: links;
+	}
+
+	.accountAsideGrid .logoutButton {
+		grid-area: logout;
+		align-self: center;
+	}
+
+	.accountAsideGrid .usageGroup {
+		grid-area: usage;
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: var(--wpds-dimension-padding-2xl);
+	}
+
+	/* Help stops being its own titled section: drop the heading and lay the
+	   links out in a row so they read as buttons beside Log out. */
+	.accountAsideGrid .accountHelp .asideHeading {
+		display: none;
+	}
+
+	.accountAsideGrid .helpLinks {
+		flex-direction: row;
+		align-items: center;
+		gap: var(--wpds-dimension-padding-lg);
+	}
+
+	.accountAsideGrid .helpLinkIcon {
+		display: none;
+	}
+
+	.accountAsideGrid .helpLinkLabelFull {
+		display: none;
+	}
+
+	.accountAsideGrid .helpLinkLabelShort {
+		display: inline;
+	}
+}
+
 .asideSection {
 	display: flex;
 	flex-direction: column;
 	gap: var(--wpds-dimension-padding-md);
 }
 
+/* Kept in the accessibility tree (screen readers still announce the section)
+   but removed from view. */
+.visuallyHidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
 /* Keeps the AI credits + preview usage meters grouped a little tighter than the
    aside's default rhythm. */
 .usageGroup {
@@ -649,6 +738,11 @@
 	text-underline-offset: 2px;
 }
 
+/* The short "Docs" label only surfaces in the narrow account row (see below). */
+.helpLinkLabelShort {
+	display: none;
+}
+
 .helpLink:hover .helpLinkLabel {
 	text-decoration: underline;
 }
@@ -925,6 +1019,32 @@
 	line-height: var(--wpds-typography-line-height-sm);
 }
 
+/* Composer and Preview sit side by side beneath the full-width Global group. The
+   top rule spans the whole card (negative margins reach past the card padding,
+   matching the .shortcutGroup + .shortcutGroup divider). */
+.shortcutColumns {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	margin-inline: calc(-1 * var(--wpds-dimension-padding-xl));
+	padding-inline: var(--wpds-dimension-padding-xl);
+	padding-block-start: var(--wpds-dimension-padding-lg);
+	border-block-start: 1px solid var(--wpds-color-stroke-surface-neutral);
+}
+
+.shortcutColumns > .shortcutGroup:first-child {
+	padding-inline-end: var(--wpds-dimension-padding-2xl);
+}
+
+/* Side-by-side columns replace the stacked-group horizontal divider with a
+   centred vertical rule between them. */
+.shortcutColumns > .shortcutGroup + .shortcutGroup {
+	margin-inline: 0;
+	padding-block-start: 0;
+	padding-inline: var(--wpds-dimension-padding-2xl) 0;
+	border-block-start: 0;
+	border-inline-start: 1px solid var(--wpds-color-stroke-surface-neutral);
+}
+
 .shortcutKeys {
 	display: flex;
 	align-items: center;

From 3ec41c7bf50be51ee364c651e5f4c6b236be8c3e Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Fri, 24 Jul 2026 14:09:09 -0400
Subject: [PATCH 4/4] Rework usage-statistics setting into a labelled dropdown

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../ui/src/components/settings-view/index.tsx | 21 ++++++++++++-------
 .../components/settings-view/style.module.css | 10 +++++++++
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/apps/ui/src/components/settings-view/index.tsx b/apps/ui/src/components/settings-view/index.tsx
index 15993b7ae0..5ed678719c 100644
--- a/apps/ui/src/components/settings-view/index.tsx
+++ b/apps/ui/src/components/settings-view/index.tsx
@@ -1,7 +1,6 @@
 import { supportedLocaleNames } from '@studio/common/lib/locale';
 import { SUPPORTED_EDITORS, supportedEditorConfig } from '@studio/common/lib/user-settings/editor';
 import { SUPPORTED_TERMINALS, terminalConfig } from '@studio/common/lib/user-settings/terminal';
-import { CheckboxControl } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { close, file, Icon } from '@wordpress/icons';
 import { Button, IconButton, SelectControl } from '@wordpress/ui';
@@ -88,6 +87,13 @@ const QUIT_SITES_BEHAVIOR_ELEMENTS: {
 	{ value: 'stop', label: __( 'Stop sites' ) },
 ];
 
+type AnalyticsChoice = 'share' | 'off';
+
+const ANALYTICS_ELEMENTS: { value: AnalyticsChoice; label: string }[] = [
+	{ value: 'share', label: __( 'Share anonymous data' ) },
+	{ value: 'off', label: __( 'Don’t share' ) },
+];
+
 const LOCALE_ELEMENTS: { value: SupportedLocale; label: string }[] = Object.entries(
 	supportedLocaleNames
 ).map( ( [ value, label ] ) => ( { value: value as SupportedLocale, label } ) );
@@ -340,12 +346,13 @@ function PreferencesPanel( {
 								onChange={ ( quitSitesBehavior ) => onChange( { quitSitesBehavior } ) }
 							/>
 						</PreferenceRow>
-						<PreferenceRow title={ __( 'Usage statistics' ) }>
-							<CheckboxControl
-								__nextHasNoMarginBottom
-								label={ __( 'Help improve Studio by sharing anonymous usage statistics' ) }
-								checked={ data.analyticsEnabled }
-								onChange={ ( analyticsEnabled ) => onChange( { analyticsEnabled } ) }
+						<PreferenceRow title={ __( 'Help improve Studio by sharing anonymous usage data' ) }>
+							<PreferenceSelect< AnalyticsChoice >
+								label={ __( 'Help improve Studio by sharing anonymous usage data' ) }
+								className={ styles.selectControlAuto }
+								value={ data.analyticsEnabled ? 'share' : 'off' }
+								options={ ANALYTICS_ELEMENTS }
+								onChange={ ( choice ) => onChange( { analyticsEnabled: choice === 'share' } ) }
 							/>
 						</PreferenceRow>
 					</div>
diff --git a/apps/ui/src/components/settings-view/style.module.css b/apps/ui/src/components/settings-view/style.module.css
index 0c6d3de732..62c3543b9f 100644
--- a/apps/ui/src/components/settings-view/style.module.css
+++ b/apps/ui/src/components/settings-view/style.module.css
@@ -923,6 +923,16 @@
 	inline-size: 240px;
 }
 
+/* Sizes to its widest option instead of a fixed width, so a short option list
+   fits its text without truncating or reserving empty space. */
+.selectControlAuto {
+	inline-size: fit-content;
+}
+
+.selectControlAuto > *:not([data-visually-hidden]) {
+	inline-size: auto;
+}
+
 /* ---- Default site directory picker --------------------------------------- */
 
 .pathPickerButton {