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..1824ae6298 100644
--- a/apps/ui/src/components/settings-view/account-section.tsx
+++ b/apps/ui/src/components/settings-view/account-section.tsx
@@ -1,15 +1,18 @@
 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 +21,113 @@ function AccountHelpActions() {
 	};
 
 	return (
-		<div className={ styles.accountActions }>
-			<Button
+		<div className={ styles.helpLinks }>
+			<button
 				type="button"
-				variant="minimal"
-				tone="neutral"
-				size="small"
+				className={ styles.helpLink }
+				aria-label={ __( 'Documentation' ) }
 				onClick={ () => openLink( getLocalizedLink( locale, 'docsStudio' ) ) }
 			>
-				{ __( 'Docs' ) }
-			</Button>
-			<Button
+				<Icon icon={ page } size={ 20 } className={ styles.helpLinkIcon } />
+				<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"
-				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 className={ clsx( styles.accountAside, user && styles.accountAsideGrid ) }>
+			{ user ? (
+				<>
+					<section className={ clsx( styles.asideSection, styles.accountBlock ) }>
+						<h2 className={ clsx( styles.asideHeading, styles.visuallyHidden ) }>
+							{ __( '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>
+
+					<div className={ styles.usageGroup }>
+						<AiCreditsSection />
+						<PreviewUsageSection userId={ user.id } />
 					</div>
-				</div>
-				{ user ? (
-					<Button
-						type="button"
-						variant="outline"
-						tone="neutral"
-						loading={ logout.isPending }
-						loadingAnnouncement={ __( 'Logging out' ) }
-						onClick={ () => logout.mutate() }
-					>
-						{ __( 'Log out' ) }
-					</Button>
-				) : (
+				</>
+			) : (
+				<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>
+			) }
+
+			{ user ? (
+				<Button
+					type="button"
+					className={ styles.logoutButton }
+					variant="solid"
+					size="small"
+					loading={ logout.isPending }
+					loadingAnnouncement={ __( 'Logging out' ) }
+					onClick={ () => logout.mutate() }
+				>
+					{ __( '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 8fc3c26d48..2fe6894351 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 { useSaveUserPreferences, useUserPreferences } from '@/data/queries/use-user-preferences';
 import { AiPanel } from './ai-panel';
 
@@ -26,16 +27,37 @@ vi.mock( '@/data/core', () => ( {
 	useConnector: vi.fn(),
 } ) );
 
+vi.mock( '@/data/queries/use-agentic-features', () => ( {
+	useAgenticFeatures: vi.fn(),
+} ) );
+
 vi.mock( '@/data/queries/use-user-preferences', () => ( {
 	useUserPreferences: vi.fn(),
 	useSaveUserPreferences: 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/agentic-signin-banner', () => ( {
+	SigninNotice: () => <div aria-label="Sign in to Studio" />,
+} ) );
+
+vi.mock( '@/components/offline-banner', () => ( {
+	OfflineNotice: () => <div role="status">You&apos;re offline</div>,
+} ) );
+
 const useConnectorMock = vi.mocked( useConnector );
+const useAgenticFeaturesMock = vi.mocked( useAgenticFeatures );
 const useUserPreferencesMock = vi.mocked( useUserPreferences );
 const useSaveUserPreferencesMock = vi.mocked( useSaveUserPreferences );
 
@@ -59,6 +81,7 @@ describe( 'AiPanel', () => {
 
 	beforeEach( () => {
 		vi.clearAllMocks();
+		useAgenticFeaturesMock.mockReturnValue( { reason: null } as never );
 		useSaveUserPreferencesMock.mockReturnValue( { mutate } as never );
 		mockPreferences( true );
 	} );
@@ -89,11 +112,15 @@ describe( 'AiPanel', () => {
 		expect( mutate ).toHaveBeenCalledWith( { agenticFeaturesEnabled: true } );
 	} );
 
-	it( 'shows the toggle even when the host cannot switch back to the classic UI', () => {
+	it( 'locks the agentic features toggle and prompts sign-in when signed out', () => {
 		mockConnector();
+		useAgenticFeaturesMock.mockReturnValue( { reason: 'signed-out' } as never );
 		render( <AiPanel /> );
 
-		expect( screen.getByRole( 'checkbox', { name: 'Agentic features' } ) ).toBeInTheDocument();
+		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', () => {
@@ -110,4 +137,30 @@ 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();
+		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( 'shows the offline notice when offline', () => {
+		mockConnector();
+		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();
+		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 c63f9b65fb..774853a521 100644
--- a/apps/ui/src/components/settings-view/ai-panel.tsx
+++ b/apps/ui/src/components/settings-view/ai-panel.tsx
@@ -1,46 +1,70 @@
 import { FormToggle } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { clsx } from 'clsx';
+import { OfflineNotice } from '@/components/offline-banner';
 import { useConnector } from '@/data/core';
 import { useSaveUserPreferences, useUserPreferences } from '@/data/queries/use-user-preferences';
+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';
 
+// 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.preferenceSectionGroup }>
-			<section className={ styles.preferenceRow }>
-				<div className={ styles.preferenceText }>
-					<h2>{ __( 'Agentic features' ) }</h2>
-					<p>
+		<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 }>
 						{ __(
 							'Chat with an agent that builds and edits your sites. Turning this off hides chat — your existing conversations are kept.'
 						) }
 					</p>
 				</div>
-				<div className={ clsx( styles.preferenceControl, styles.toggleControl ) }>
+				<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>
-			</section>
+			</div>
+			{ signedOut ? (
+				<p className={ styles.signInNotice }>{ __( 'You must log in for agentic features.' ) }</p>
+			) : null }
 		</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) live in the
+	// account sidebar.
+	const { reason } = usePreviewAgenticFeatures();
+
 	return (
-		<div className={ styles.preferencesPanel }>
-			<AgenticFeaturesSection />
-			{ connector.capabilities.agentInstructions && <StudioCodePanel /> }
+		<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 ff9b99b416..d029fcba9d 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,16 +113,6 @@ vi.mock( '@/data/queries/use-user-preferences', () => ( {
 	useUserPreferences: vi.fn(),
 } ) );
 
-vi.mock( '@/data/queries/use-wapuu-score', () => ( {
-	useWapuuScore: () => ( { data: null } ),
-} ) );
-
-// 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,
 } ) );
@@ -225,30 +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.getByTestId( 'ai-panel' ) ).toBeInTheDocument();
-	} );
-
-	it( 'offers the AI tab on every host, since chat can be toggled anywhere', () => {
-		useConnectorMock.mockReturnValue( {
-			selectDefaultSiteDirectory,
-			capabilities: { agentInstructions: false, switchToClassicUi: false },
-		} as never );
-
-		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( 'offers Switch to classic in the Settings tab when the host ships the classic UI', () => {
-		render( <SettingsView activeTab="preferences" onTabChange={ vi.fn() } /> );
-
-		expect( screen.getByRole( 'heading', { name: 'Studio experience' } ) ).toBeInTheDocument();
-		expect( screen.getByRole( 'button', { name: 'Switch to classic' } ) ).toBeInTheDocument();
-	} );
-
-	it( 'hides Switch to classic when there is no classic UI to switch to', () => {
+	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 },
@@ -256,20 +225,22 @@ describe( 'SettingsView', () => {
 
 		render( <SettingsView activeTab="preferences" onTabChange={ vi.fn() } /> );
 
-		expect( screen.queryByRole( 'button', { name: 'Switch to classic' } ) ).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.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 c3737d3947..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';
@@ -17,13 +16,15 @@ 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 { WapuuScore } from './wapuu-score';
 import type { PreferencesFormData } from './preferences';
 import type {
 	ColorScheme,
@@ -35,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 ];
 
@@ -86,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 } ) );
@@ -105,11 +113,7 @@ function SettingsHeader() {
 			<div className={ styles.headerTabs }>
 				<Tabs.List className={ styles.headerTabList }>
 					<Tabs.Tab tabId="preferences">{ __( 'Settings' ) }</Tabs.Tab>
-					<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 ? (
@@ -138,13 +142,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>
 	);
 }
 
@@ -240,26 +244,35 @@ function DefaultSiteDirectoryField( { value, onSelect }: { value: string; onSele
 	);
 }
 
+// Leaving the agentic UI entirely is a separate, heavier action than the AI
+// tab's chat toggle: it reloads the window into the classic Studio interface.
+// Only hosts that ship the classic renderer can switch (see capabilities).
 function StudioExperienceSection() {
 	const connector = useConnector();
 	if ( ! connector.capabilities.switchToClassicUi ) {
 		return null;
 	}
 	return (
-		<section className={ styles.preferenceSectionGroup }>
-			<PreferenceRow
-				title={ __( 'Studio experience' ) }
-				description={ __( 'You are using the new Studio experience.' ) }
-			>
-				<Button
-					type="button"
-					variant="outline"
-					tone="neutral"
-					onClick={ () => void connector.disableAgenticUi() }
-				>
-					{ __( 'Switch to classic' ) }
-				</Button>
-			</PreferenceRow>
+		<section className={ styles.card }>
+			<div className={ clsx( styles.cardHeader, styles.cardHeaderCentered ) }>
+				<div className={ styles.cardHeaderText }>
+					<h2 className={ styles.cardTitle }>{ __( 'Studio Beta' ) }</h2>
+					<p className={ styles.cardDescription }>
+						{ __( 'You’re using the new Studio with AI chat and a built-in site preview.' ) }
+					</p>
+				</div>
+				<div className={ styles.cardHeaderActions }>
+					<Button
+						type="button"
+						variant="outline"
+						tone="neutral"
+						size="compact"
+						onClick={ () => void connector.disableAgenticUi() }
+					>
+						{ __( 'Switch to classic' ) }
+					</Button>
+				</div>
+			</div>
 		</section>
 	);
 }
@@ -280,65 +293,75 @@ 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>
-				<PreferenceRow title={ __( 'Usage statistics' ) }>
-					<CheckboxControl
-						__nextHasNoMarginBottom
-						label={ __( 'Help improve Studio by sharing anonymous usage statistics' ) }
-						checked={ data.analyticsEnabled }
-						onChange={ ( analyticsEnabled ) => onChange( { analyticsEnabled } ) }
-					/>
-				</PreferenceRow>
-			</section>
+		<div className={ styles.settingsLayout }>
 			<AccountSection />
-			<WapuuScore />
-			<StudioCliSection />
-			<StudioExperienceSection />
+			<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>
+						<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>
+				</section>
+				<KeyboardPanel />
+				<StudioCliSection />
+				<McpSection />
+				<StudioExperienceSection />
+			</div>
 		</div>
 	);
 }
@@ -416,47 +439,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>
-						<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 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>
+						</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..9ce465ba2a 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, ',' ] } ],
 		},
 		{
@@ -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,22 +72,39 @@ function ShortcutKeys( { keys }: { keys: string[] } ) {
 	);
 }
 
-export function KeyboardPanel() {
+function ShortcutGroup( { section }: { section: ShortcutSection } ) {
 	return (
-		<div className={ styles.preferencesPanel }>
-			{ getShortcutSections( isAppleOS() ).map( ( section ) => (
-				<section key={ section.title } className={ styles.preferenceSectionGroup }>
-					<h2 className={ styles.preferenceSectionHeading }>{ section.title }</h2>
-					<ul className={ styles.shortcutList }>
-						{ section.shortcuts.map( ( shortcut ) => (
-							<li key={ shortcut.label } className={ styles.shortcutRow }>
-								<span className={ styles.shortcutName }>{ shortcut.label }</span>
-								<ShortcutKeys keys={ shortcut.keys } />
-							</li>
-						) ) }
-					</ul>
-				</section>
-			) ) }
+		<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 }>
+				<div className={ styles.cardHeaderText }>
+					<h2 className={ styles.cardTitle }>{ __( 'Keyboard' ) }</h2>
+				</div>
+			</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/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..e4773f3d7e
--- /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 { ...real, enabled: false, chatEnabled: 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 { ...real, 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..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,20 +5,22 @@ 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/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 }
 		/>
 	),
 } ) );
@@ -28,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();
@@ -39,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( () => {
@@ -91,4 +99,41 @@ 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( '' );
+	} );
+
+	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 7c15f9b512..460858a109 100644
--- a/apps/ui/src/components/settings-view/studio-code-panel.tsx
+++ b/apps/ui/src/components/settings-view/studio-code-panel.tsx
@@ -1,47 +1,31 @@
 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 { usePreviewAgenticFeatures } from './settings-preview';
 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.
 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 );
+	// 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 +55,69 @@ export function StudioCodePanel() {
 		return <div className={ styles.state }>{ __( 'Loading…' ) }</div>;
 	}
 
-	const showCounter = content.length >= GLOBAL_INSTRUCTIONS_MAX_LENGTH * 0.8;
+	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
+	// 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={ clsx( styles.card, signedOut && styles.cardDisabled ) }>
+			<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 && ! signedOut }
+						disabled={ signedOut }
+						aria-label={ __( 'Enable instructions' ) }
+						onChange={ handleToggle }
+					/>
+				</div>
+			</div>
+			{ signedOut && (
+				<p className={ styles.signInNotice }>{ __( 'You must log in for agent instructions.' ) }</p>
+			) }
+			{ ! signedOut && enabled && (
+				<>
+					<textarea
+						className={ styles.instructionsTextarea }
+						aria-label={ __( 'Instructions' ) }
+						rows={ 3 }
+						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 c46c2e4266..62c3543b9f 100644
--- a/apps/ui/src/components/settings-view/style.module.css
+++ b/apps/ui/src/components/settings-view/style.module.css
@@ -1,9 +1,34 @@
+/* ==========================================================================
+   Settings design system
+   --------------------------------------------------------------------------
+   Every settings tab is built from the same primitives:
+
+     .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)
+     .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-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 );
-	--settings-row-padding-block: calc( var( --wpds-dimension-padding-md ) + 2px );
+		color-mix(in srgb, var(--wpds-color-stroke-surface-neutral) 72%, transparent);
+	--settings-row-padding-block: calc(var(--wpds-dimension-padding-md) + 2px);
 
 	display: flex;
 	flex-direction: column;
@@ -12,20 +37,22 @@
 }
 
 .state {
-	padding: var( --wpds-dimension-padding-xl );
-	color: var( --wpds-color-fg-content-neutral-weak );
-	font-size: var( --wpds-typography-font-size-sm );
-	line-height: var( --wpds-typography-line-height-md );
+	padding: var(--wpds-dimension-padding-xl);
+	color: var(--wpds-color-fg-content-neutral-weak);
+	font-size: var(--wpds-typography-font-size-sm);
+	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 );
+	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
 	align-items: center;
-	gap: var( --wpds-dimension-padding-sm );
-	min-height: 54px;
-	border-bottom: 1px solid var( --wpds-color-stroke-surface-neutral );
-	color: var( --wpds-color-fg-content-neutral );
+	gap: var(--wpds-dimension-padding-sm);
+	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;
 }
 
@@ -59,29 +86,29 @@
 	-webkit-app-region: no-drag;
 }
 
-.headerTabList :global( [role='tab'] ) {
+.headerTabList :global([role='tab']) {
 	box-sizing: border-box;
 	display: inline-flex !important;
 	align-items: center;
 	justify-content: center;
 	height: 40px !important;
 	padding-block: 0 !important;
-	padding-inline: var( --wpds-dimension-padding-lg ) !important;
-	border-radius: var( --wpds-border-radius-sm );
+	padding-inline: var(--wpds-dimension-padding-lg) !important;
+	border-radius: var(--wpds-border-radius-sm);
 	font-weight: 500 !important;
 	outline: 0 solid transparent;
 	outline-offset: 2px;
 	-webkit-app-region: no-drag;
 }
 
-.headerTabList :global( [role='tab'] )::after {
+.headerTabList :global([role='tab'])::after {
 	content: none !important;
 }
 
 .headerTabList
-	:global( [role='tab']:not( [aria-disabled='true'] ):is( :focus-visible, [data-focus-visible] ) ) {
+	:global([role='tab']:not([aria-disabled='true']):is(:focus-visible, [data-focus-visible])) {
 	box-shadow: none !important;
-	outline: var( --wpds-border-width-focus ) solid var( --wpds-color-stroke-focus-brand ) !important;
+	outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus-brand) !important;
 	outline-offset: 2px !important;
 }
 
@@ -98,7 +125,7 @@
 	display: flex;
 	align-items: center;
 	justify-self: end;
-	padding-inline-end: var( --wpds-dimension-padding-lg );
+	padding-inline-end: var(--wpds-dimension-padding-lg);
 }
 
 .scroll {
@@ -107,787 +134,1032 @@
 	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 );
+	padding: var(--wpds-dimension-padding-2xl) var(--wpds-dimension-padding-xl)
+		var(--wpds-dimension-padding-2xl);
 }
 
-.preferencesPanel {
-	display: flex;
-	flex-direction: column;
-	gap: var( --wpds-dimension-padding-xl );
+/* ---- 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 );
+	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;
+		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)
+		);
+	}
 
-.instructionsError {
-	margin: 0;
-	font-size: var( --wpds-typography-font-size-sm );
-	color: var( --wpds-color-fg-content-error );
+	/* 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;
+	}
 }
 
-.preferenceSectionGroup {
+/* ---- Card ---------------------------------------------------------------- */
+
+.card {
 	box-sizing: border-box;
 	display: flex;
 	flex-direction: column;
-	gap: 0;
-	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 );
+	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 );
+	background: color-mix(in srgb, var(--wpds-color-bg-surface-neutral-weak) 56%, transparent);
 }
 
-.preferenceSectionHeading {
-	margin: 0 0 var( --wpds-dimension-padding-md );
-	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 );
+/* 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);
 }
 
-.preferenceRow {
-	display: grid;
-	grid-template-columns: minmax( 0, 1fr ) max-content;
+/* 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;
-	column-gap: var( --wpds-dimension-padding-xl );
-	padding-block: var( --settings-row-padding-block );
-	border-bottom: var( --settings-divider-border );
-}
-
-.preferenceRow:last-child {
-	padding-block-end: 0;
-	border-bottom: 0;
-}
-
-/* A lone row (a headingless single-row card) has no divider to space against,
-   so its own block padding just doubles the top gap against the group's. Drop
-   it and square the group's top padding so the card is evenly inset all around. */
-.preferenceRow:only-child {
-	padding-block: 0;
-}
-
-.preferenceSectionGroup:has(> .preferenceRow:only-child) {
-	padding-block-start: var(--wpds-dimension-padding-xl);
 }
 
-.preferenceText {
+.cardHeaderText {
 	display: flex;
+	flex: 1;
 	flex-direction: column;
-	gap: var( --wpds-dimension-padding-xs );
+	gap: var(--wpds-dimension-padding-xs);
 	min-width: 0;
 }
 
-.preferenceText h2 {
+.cardTitle {
 	margin: 0;
-	color: var( --wpds-color-fg-content-neutral );
-	font-size: var( --wpds-typography-font-size-md );
-	font-weight: 400;
-	line-height: var( --wpds-typography-line-height-sm );
-	white-space: nowrap;
+	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);
 }
 
-.preferenceText p {
+.cardDescription {
 	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 );
+	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);
 }
 
-.preferenceControl {
-	display: flex;
-	justify-content: flex-end;
-	min-width: 0;
-	inline-size: 100%;
+/* 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);
 }
 
-.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;
+.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);
 }
 
-.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% ) );
+/* 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;
 }
 
-/* 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% ) );
-}
+/* ---- Field: a labelled control row inside a card ------------------------- */
 
-.appearancePicker[data-active-index='0'] {
-	--appearance-active-index: 0;
+.fieldList {
+	display: flex;
+	flex-direction: column;
 }
 
-.appearancePicker[data-active-index='1'] {
-	--appearance-active-index: 1;
+.list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
 }
 
-.appearancePicker[data-active-index='2'] {
-	--appearance-active-index: 2;
+.field {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) max-content;
+	align-items: center;
+	column-gap: var(--wpds-dimension-padding-xl);
+	padding-block: var(--settings-row-padding-block);
+	border-bottom: var(--settings-divider-border);
 }
 
-@media not ( prefers-reduced-motion ) {
-	.appearancePicker::before {
-		transition: transform 180ms cubic-bezier( 0.2, 0, 0, 1 );
-	}
+.field:first-child {
+	padding-block-start: 0;
 }
 
-.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;
+.field:last-child {
+	padding-block-end: 0;
+	border-bottom: 0;
 }
 
-.appearanceButton:hover,
-.appearanceButtonActive {
-	color: var( --wpds-color-fg-content-neutral );
+.fieldText {
+	display: flex;
+	flex-direction: column;
+	gap: var(--wpds-dimension-padding-xs);
+	min-width: 0;
 }
 
-.appearanceButton:focus-visible,
-.selectControl:focus-visible {
-	outline: var( --wpds-border-width-focus ) solid var( --wpds-color-stroke-focus-brand );
-	outline-offset: 2px;
+.fieldLabel {
+	color: var(--wpds-color-fg-content-neutral);
+	font-size: var(--wpds-typography-font-size-md);
+	font-weight: 400;
+	line-height: var(--wpds-typography-line-height-sm);
+	white-space: nowrap;
 }
 
-.selectControl {
-	inline-size: 156px;
-	max-inline-size: 100%;
+.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);
 }
 
-/* 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] ) {
+.fieldControl {
+	display: flex;
+	justify-content: flex-end;
+	min-width: 0;
 	inline-size: 100%;
 }
 
-.selectControlWide {
-	inline-size: 240px;
-}
+/* ---- List row: a rich list item inside a card --------------------------- */
 
-.accountSectionHeader {
-	display: flex;
+.listRow {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
 	align-items: center;
-	justify-content: space-between;
-	gap: var( --wpds-dimension-padding-xl );
-	margin-block-end: var( --wpds-dimension-padding-xl );
+	column-gap: var(--wpds-dimension-padding-xl);
+	padding-block: var(--wpds-dimension-padding-lg);
+	border-bottom: var(--settings-divider-border);
 }
 
-.accountHeading {
-	margin-block-end: 0;
+.listRow:first-child {
+	padding-block-start: 0;
 }
 
-.accountActions {
-	display: flex;
-	gap: var( --wpds-dimension-padding-md );
-	flex-wrap: wrap;
+.listRow:last-child {
+	padding-block-end: 0;
+	border-bottom: 0;
 }
 
-.accountSummary {
+.listItemText {
 	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var( --wpds-dimension-padding-xl );
+	flex-direction: column;
+	gap: 2px;
 	min-width: 0;
 }
 
-.accountIdentity {
-	display: flex;
-	align-items: center;
-	gap: var( --wpds-dimension-padding-md );
-	min-width: 0;
+.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);
 }
 
-.accountAvatar {
-	flex: 0 0 44px;
-	inline-size: 44px;
-	block-size: 44px;
-	border-radius: 50%;
-	object-fit: cover;
+.listItemDescription {
+	color: var(--wpds-color-fg-content-neutral-weak);
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: var(--wpds-typography-line-height-sm);
 }
 
-.accountDetails {
+/* ---- Meter: a usage readout inside a card -------------------------------- */
+
+.meter {
 	display: flex;
 	flex-direction: column;
-	gap: 2px;
-	min-width: 0;
-}
-
-.accountDetails 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 );
-}
-
-.accountDetails 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 );
-	overflow-wrap: anywhere;
+	align-items: stretch;
+	gap: var(--wpds-dimension-padding-sm);
 }
 
-.pathPickerButton {
-	box-sizing: border-box;
+/* 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-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;
+	gap: var(--wpds-dimension-padding-md);
+	min-width: 0;
+	block-size: var(--wpds-typography-line-height-md);
 }
 
-.pathPickerButton:hover {
-	border-color: var( --wpds-color-stroke-interactive-neutral-active );
+.meterHeaderEnd {
+	display: flex;
+	align-items: center;
+	gap: var(--wpds-dimension-padding-xs);
+	flex-shrink: 0;
 }
 
-.pathPickerButton:focus-visible {
-	outline: var( --wpds-border-width-focus ) solid var( --wpds-color-stroke-focus-brand );
-	outline-offset: 2px;
+.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;
 }
 
-.pathPickerValue,
-.pathPickerPlaceholder {
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
+.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);
 	white-space: nowrap;
 }
 
-.pathPickerPlaceholder {
-	color: var( --wpds-color-fg-content-neutral-weak );
+.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);
 }
 
-.pathPickerIcon {
+/* 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;
-	fill: currentColor;
+	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. */
+.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);
 }
 
-.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-xl );
+	gap: var(--wpds-dimension-padding-md);
 }
 
-.cliHeading {
-	margin-block-end: 0;
+.gauge .progressTrack {
+	flex: 1;
+	min-inline-size: 0;
 }
 
-.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 );
+.gaugeValue {
+	flex-shrink: 0;
+	color: var(--wpds-color-fg-content-neutral);
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: var(--wpds-typography-line-height-sm);
+	font-variant-numeric: tabular-nums;
+	white-space: nowrap;
 }
 
-.cliHeader :global( .components-form-toggle .components-form-toggle__thumb ) {
-	background-color: var( --wpds-color-bg-thumb-neutral-weak );
+/* 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);
 }
 
-.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 );
+/* 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);
 }
 
-.cliHeader :global( .components-form-toggle.is-checked .components-form-toggle__thumb ) {
-	background-color: var( --wpds-color-fg-interactive-brand-strong );
+.usageDisabled .progressTrack {
+	background: var(--wpds-color-bg-interactive-neutral-weak-disabled);
 }
 
-.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 );
+.usageDisabled .progressValue {
+	background: var(--wpds-color-fg-interactive-neutral-disabled);
 }
 
-.cliToggleTrigger {
-	display: inline-flex;
+.aiCreditsTrack {
+	position: relative;
+	background: color-mix(
+		in srgb,
+		var(--wpds-color-fg-interactive-brand) 14%,
+		var(--wpds-color-stroke-surface-neutral)
+	);
 }
 
-/* Disabled form controls swallow hover events, which would keep the wrapper's
-   tooltip from ever opening. */
-.cliToggleTrigger :global( input:disabled ) {
-	pointer-events: none;
+.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
+		);
 }
 
-.cliTooltip {
-	max-inline-size: 280px;
-	line-height: var( --wpds-typography-line-height-sm );
-}
+/* ---- Inline messages ----------------------------------------------------- */
 
-.cliDescription {
-	max-inline-size: 460px;
+.errorMessage {
 	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 );
+	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);
 }
 
-.shortcutList {
-	list-style: none;
+.instructionsError {
 	margin: 0;
-	padding: 0;
+	font-size: var(--wpds-typography-font-size-sm);
+	color: var(--wpds-color-fg-content-error);
 }
 
-.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 );
+/* 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);
+	/* 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;
 }
 
-.shortcutRow:last-child {
-	padding-block-end: 0;
-	border-bottom: 0;
+.instructionsTextarea::placeholder {
+	color: var(--wpds-color-fg-content-neutral-weak);
 }
 
-.shortcutName {
-	color: var( --wpds-color-fg-content-neutral );
-	font-size: var( --wpds-typography-font-size-md );
-	font-weight: 400;
-	line-height: var( --wpds-typography-line-height-sm );
+.instructionsTextarea:hover {
+	border-color: var(--wpds-color-stroke-interactive-neutral-active);
 }
 
-.shortcutKeys {
+.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-xs );
-	flex-wrap: wrap;
+	gap: var(--wpds-dimension-padding-md);
 }
 
-.shortcutKey {
-	box-sizing: border-box;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	min-inline-size: 26px;
-	min-block-size: 26px;
-	padding: 0 var( --wpds-dimension-padding-xs );
-	border: 1px solid var( --wpds-color-stroke-surface-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 );
-	font-size: var( --wpds-typography-font-size-xs );
-	font-weight: 500;
-	line-height: 1;
+.instructionsCounter {
+	font-size: var(--wpds-typography-font-size-sm);
+	color: var(--wpds-color-fg-content-neutral-weak);
 }
 
-.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 );
-}
+/* ---- Account aside ------------------------------------------------------- */
 
-.skillsPanel,
-.usagePanel {
+/* 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 );
-	width: 100%;
-	max-width: var( --settings-form-width );
-	margin: 0 auto;
+	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;
+	}
 }
 
-.settingsPanelSection {
-	box-sizing: border-box;
+.asideSection {
 	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 );
+	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;
 }
 
-.settingsPanelHeader {
+/* 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-xs );
+	gap: var(--wpds-dimension-padding-md);
 }
 
-.settingsPanelHeader h2 {
+.asideHeading {
 	margin: 0;
-	color: var( --wpds-color-fg-content-neutral );
-	font-size: var( --wpds-typography-font-size-lg );
+	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-md );
+	line-height: var(--wpds-typography-line-height-sm);
 }
 
-.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 );
+.helpLinks {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--wpds-dimension-padding-xs);
 }
 
-.skillsHeaderRow {
-	display: flex;
+.helpLink {
+	display: inline-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;
+	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;
 }
 
-.skillList {
-	list-style: none;
+.helpLinkIcon {
+	flex-shrink: 0;
+	fill: currentColor;
+}
+
+.helpLinkLabel {
+	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;
+}
+
+.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;
-	padding: 0;
-	border-top: 1px solid var( --wpds-color-stroke-surface-neutral );
+	color: var(--wpds-color-fg-content-neutral-weak);
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: var(--wpds-typography-line-height-sm);
 }
 
-.skillRow {
-	display: grid;
-	grid-template-columns: minmax( 0, 1fr ) auto;
+.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). */
+.logoutButton {
+	align-self: flex-start;
+	--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-xl );
-	padding-block: var( --wpds-dimension-padding-lg );
-	border-bottom: 1px solid var( --wpds-color-stroke-surface-neutral );
+	gap: var(--wpds-dimension-padding-md);
+	min-width: 0;
 }
 
-.skillRow:last-child {
-	border-bottom: 0;
+.accountAvatar {
+	flex: 0 0 44px;
+	inline-size: 44px;
+	block-size: 44px;
+	border-radius: 50%;
+	object-fit: cover;
 }
 
-.skillDetails {
+.accountDetails {
 	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 );
+.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 );
+	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 );
+.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;
 }
 
-.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 );
-}
+/* ---- Appearance segmented control ---------------------------------------- */
 
-.codeBlockWrap {
+.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;
 }
 
-.codeBlock {
-	margin: 0;
-	padding: var( --wpds-dimension-padding-md );
-	padding-inline-end: calc( var( --wpds-dimension-padding-xl ) + 32px );
-	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-mono,
-		ui-monospace,
-		SFMono-Regular,
-		Menlo,
-		monospace
-	);
-	font-size: var( --wpds-typography-font-size-sm );
-	line-height: var( --wpds-typography-line-height-md );
-	overflow-x: auto;
-	white-space: pre;
+.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%));
 }
 
-.codeBlockCopyButton {
-	position: absolute;
-	inset-block-start: var( --wpds-dimension-padding-sm );
-	inset-inline-end: var( --wpds-dimension-padding-sm );
-	z-index: 1;
+/* 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%));
 }
 
-.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 );
+.appearancePicker[data-active-index='0'] {
+	--appearance-active-index: 0;
 }
 
-.toggleControl :global( .components-form-toggle .components-form-toggle__thumb ) {
-	background-color: var( --wpds-color-bg-thumb-neutral-weak );
+.appearancePicker[data-active-index='1'] {
+	--appearance-active-index: 1;
 }
 
-.toggleControl :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 );
+.appearancePicker[data-active-index='2'] {
+	--appearance-active-index: 2;
 }
 
-.toggleControl :global( .components-form-toggle.is-checked .components-form-toggle__thumb ) {
-	background-color: var( --wpds-color-fg-interactive-brand-strong );
+@media not (prefers-reduced-motion) {
+	.appearancePicker::before {
+		transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
+	}
 }
 
-.toggleControl
-	: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 );
+.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;
 }
 
-@media ( max-width: 640px ) {
-	.preferenceRow {
-		align-items: stretch;
-		grid-template-columns: 1fr;
-		row-gap: var( --wpds-dimension-padding-sm );
-	}
+.appearanceButton:hover,
+.appearanceButtonActive {
+	color: var(--wpds-color-fg-content-neutral);
+}
 
-	.accountSectionHeader,
-	.accountSummary {
-		align-items: flex-start;
-		flex-direction: column;
-	}
+.appearanceButton:focus-visible,
+.selectControl:focus-visible {
+	outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus-brand);
+	outline-offset: 2px;
+}
 
-	.preferenceText h2 {
-		white-space: normal;
-	}
+.selectControl {
+	inline-size: 156px;
+	max-inline-size: 100%;
+}
 
-	.skillRow {
-		align-items: stretch;
-		grid-template-columns: 1fr;
-	}
+/* 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%;
 }
 
-.wapuuScoreHeading {
-	display: inline-flex;
-	align-items: center;
-	gap: var( --wpds-dimension-padding-xs );
+.selectControlWide {
+	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;
 }
 
-.wapuuScoreIcon {
-	image-rendering: pixelated;
+.selectControlAuto > *:not([data-visually-hidden]) {
+	inline-size: auto;
 }
 
-.wapuuScoreBody {
+/* ---- Default site directory picker --------------------------------------- */
+
+.pathPickerButton {
+	box-sizing: border-box;
 	display: flex;
 	align-items: center;
-	gap: var( --wpds-dimension-padding-xl );
+	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;
 }
 
-.wapuuScoreMeter {
-	display: flex;
-	flex: 1;
+.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;
-	flex-direction: column;
-	gap: var( --wpds-dimension-padding-sm );
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
-.wapuuScoreValue {
-	color: var( --wpds-color-fg-content-neutral-weak );
-	font-size: var( --wpds-typography-font-size-sm );
+.pathPickerPlaceholder {
+	color: var(--wpds-color-fg-content-neutral-weak);
 }
 
-/* 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 );
+.pathPickerIcon {
+	flex-shrink: 0;
+	fill: currentColor;
 }
 
-.usageDisabled .progressTrack {
-	background: var( --wpds-color-bg-interactive-neutral-weak-disabled );
+/* ---- Studio CLI toggle (read-only tooltip variant) ----------------------- */
+
+.cliToggleTrigger {
+	display: inline-flex;
 }
 
-.usageDisabled .progressValue {
-	background: var( --wpds-color-fg-interactive-neutral-disabled );
+/* Disabled form controls swallow hover events, which would keep the wrapper's
+   tooltip from ever opening. */
+.cliToggleTrigger :global(input:disabled) {
+	pointer-events: none;
 }
 
-/* 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 );
+.cliTooltip {
+	max-inline-size: 280px;
+	line-height: var(--wpds-typography-line-height-sm);
 }
 
-.usageSection {
+/* ---- Keyboard shortcuts -------------------------------------------------- */
+
+/* Each context (Global, Composer, Site preview) is a labelled group inside the
+   single Keyboard card. */
+.shortcutGroup {
 	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 );
+	gap: var(--wpds-dimension-padding-sm);
 }
 
-.usageSection:last-child {
-	padding-block-end: 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);
+}
+
+.shortcutGroupTitle {
+	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);
+}
+
+/* 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);
 }
 
-.usageSectionHeader {
+.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;
-	justify-content: space-between;
-	gap: var( --wpds-dimension-padding-md );
-	min-width: 0;
+	justify-content: flex-end;
+	gap: var(--wpds-dimension-padding-xs);
+	flex-wrap: wrap;
 }
 
-.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 );
+.shortcutKey {
+	box-sizing: border-box;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-inline-size: 26px;
+	min-block-size: 26px;
+	padding: 0 var(--wpds-dimension-padding-xs);
+	border: 1px solid var(--wpds-color-stroke-surface-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);
+	font-size: var(--wpds-typography-font-size-xs);
+	font-weight: 500;
+	line-height: 1;
 }
 
-.usageSection p {
+/* ---- MCP config block ---------------------------------------------------- */
+
+.codeBlockWrap {
+	position: relative;
+}
+
+.codeBlock {
 	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 );
+	padding: var(--wpds-dimension-padding-md);
+	padding-inline-end: calc(var(--wpds-dimension-padding-xl) + 32px);
+	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-mono,
+		ui-monospace,
+		SFMono-Regular,
+		Menlo,
+		monospace
+	);
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: var(--wpds-typography-line-height-md);
+	overflow-x: auto;
+	white-space: pre;
 }
 
-.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 );
+.codeBlockCopyButton {
+	position: absolute;
+	inset-block-start: var(--wpds-dimension-padding-sm);
+	inset-inline-end: var(--wpds-dimension-padding-sm);
+	z-index: 1;
 }
 
-.progressTrack {
-	overflow: hidden;
-	inline-size: 100%;
-	block-size: 6px;
-	border-radius: 999px;
-	background: var( --wpds-color-stroke-surface-neutral );
+/* ---- 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);
 }
 
-.progressValue {
-	block-size: 100%;
-	border-radius: inherit;
-	background: var( --wpds-color-fg-interactive-brand );
+.toggleControl :global(.components-form-toggle .components-form-toggle__thumb) {
+	background-color: var(--wpds-color-bg-thumb-neutral-weak);
 }
 
-.previewActionsButton {
-	flex-shrink: 0;
+.toggleControl :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);
 }
 
-.usageSectionAction {
-	align-self: flex-start;
+.toggleControl :global(.components-form-toggle.is-checked .components-form-toggle__thumb) {
+	background-color: var(--wpds-color-fg-interactive-brand-strong);
 }
 
-.aiCreditsTrack {
-	position: relative;
-	background: color-mix(
-		in srgb,
-		var( --wpds-color-fg-interactive-brand ) 14%,
-		var( --wpds-color-stroke-surface-neutral )
-	);
+.toggleControl
+	: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);
 }
 
-.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
-		);
+/* ---- Narrow layout ------------------------------------------------------- */
+
+/* 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;
+	}
+
+	.field,
+	.listRow {
+		align-items: stretch;
+		grid-template-columns: 1fr;
+		row-gap: var(--wpds-dimension-padding-sm);
+	}
+
+	.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 ed0a0b1fb9..1aedc2daa7 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,53 +11,33 @@ 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 } />
-	),
-} ) );
-
-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: ( {
 		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', () => ( {
@@ -66,7 +46,6 @@ vi.mock( '@/data/core', () => ( {
 
 vi.mock( '@/data/queries/use-auth-user', () => ( {
 	useAuthUser: vi.fn(),
-	useLogin: vi.fn(),
 } ) );
 
 vi.mock( '@/data/queries/use-snapshots', () => ( {
@@ -96,7 +75,6 @@ vi.mock( '@/data/queries/use-user-preferences', () => ( {
 
 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 );
@@ -104,8 +82,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();
 
@@ -129,7 +108,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 },
@@ -142,164 +120,135 @@ 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( 'Resets 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 /> );
+
+			expect( screen.getByRole( 'img', { name: 'Unavailable' } ) ).toBeInTheDocument();
+			expect( screen.queryByText( /of monthly limit used/ ) ).not.toBeInTheDocument();
+			expect( screen.queryByTestId( 'usage-progress-bar' ) ).not.toBeInTheDocument();
+		} );
 
-	it( 'confirms through the connector before deleting all preview sites', async () => {
-		render( <UsagePanel /> );
+		it( 'greys out with a hatched placeholder when signed out', () => {
+			useAuthUserMock.mockReturnValue( { data: null, isLoading: false } as never );
 
-		fireEvent.click( screen.getByRole( 'button', { name: 'Delete all preview sites' } ) );
+			render( <AiCreditsSection /> );
 
-		await waitFor( () => expect( confirmDeleteAllPreviewSites ).toHaveBeenCalledTimes( 1 ) );
-		expect( deleteSnapshotsMutate ).toHaveBeenCalledTimes( 1 );
+			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/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: 'Reset' } ) );
 
-	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: 'Reset' } ) );
 
-		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 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 );
 
-	it( 'shows the sign-in banner and no credits copy when signed out', () => {
-		useAuthUserMock.mockReturnValue( { data: null, isLoading: false } as never );
+			render( <PreviewUsageSection userId={ 1 } /> );
 
-		render( <UsagePanel /> );
+			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: '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 735f3b4d1c..e4280fff9b 100644
--- a/apps/ui/src/components/settings-view/usage-panel.tsx
+++ b/apps/ui/src/components/settings-view/usage-panel.tsx
@@ -1,105 +1,141 @@
 import {
 	clampQuotaFraction,
 	formatQuotaPercentage,
-	formatQuotaResetDate,
+	formatQuotaResetDateShort,
 } from '@studio/common/lib/studio-assistant-quota';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import { moreHorizontal } from '@wordpress/icons';
-import { IconButton } from '@wordpress/ui';
+import { __, sprintf } from '@wordpress/i18n';
+import { Button, Tooltip } 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>
-			</>
+		// 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). */
+					__( 'Resets %s' ),
+					formatQuotaResetDateShort( quota.costResetDate, locale )
+				) }
+			>
+				<Gauge
+					fraction={ fraction }
+					value={ formatQuotaPercentage( wholePercent / 100, 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>
 	);
 }
 
@@ -116,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 ) {
@@ -130,100 +163,76 @@ 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/%2$d' ),
+				siteCount,
+				siteLimit
+		  );
+
+	return (
+		<Meter
+			title={ __( 'Preview sites' ) }
+			trailing={
+				<Tooltip.Root>
+					<Tooltip.Trigger
+						render={
+							<Button
+								type="button"
+								variant="minimal"
+								tone="neutral"
+								size="small"
+								className={ styles.meterActionsButton }
+								disabled={ isDisabled }
+								loading={ deleteAllSnapshots.isPending }
+								loadingAnnouncement={ __( 'Deleting preview sites…' ) }
+								onClick={ () => void handleDelete() }
+							>
+								{ __( 'Reset' ) }
+							</Button>
+						}
+					/>
+					<Tooltip.Popup positioner={ <Tooltip.Positioner side="top" /> }>
+						{ __( 'Delete all preview sites' ) }
+					</Tooltip.Popup>
+				</Tooltip.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 3351f7b72a..f2daeaf497 100644
--- a/packages/common/lib/studio-assistant-quota.ts
+++ b/packages/common/lib/studio-assistant-quota.ts
@@ -58,6 +58,15 @@ export function formatQuotaResetDate( date: string, locale?: string ): string {
 	} ).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 ) );
+}
+
 /**
  * User-facing copy for hitting the monthly AI usage cap. Shared by every
  * surface (CLI, desktop, browser UI) so the wording stays consistent. Pass