From f94442e83e0fa7999f8958ce2f04e38645a88a8c Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 7 Apr 2026 10:11:48 +0000
Subject: [PATCH] A4A: Display agency name in sidebar header

Add the agency name next to the A4A logo in the sidebar header to help
agencies identify which account they are logged into. The name is
displayed using the existing Redux state (getActiveAgency selector)
and is styled to fit within the sidebar width with text truncation.

Fixes #A4A-1996
---
 .../components/sidebar/header/index.tsx                | 10 +++++++++-
 .../components/sidebar/header/style.scss               | 10 ++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/client/a8c-for-agencies/components/sidebar/header/index.tsx b/client/a8c-for-agencies/components/sidebar/header/index.tsx
index e96c9f59c915..8f27a1565a4f 100644
--- a/client/a8c-for-agencies/components/sidebar/header/index.tsx
+++ b/client/a8c-for-agencies/components/sidebar/header/index.tsx
@@ -1,4 +1,7 @@
+import { HStack } from '@wordpress/components';
 import { SidebarV2Header as SidebarHeader } from 'calypso/layout/sidebar-v2';
+import { useSelector } from 'calypso/state';
+import { getActiveAgency } from 'calypso/state/a8c-for-agencies/agency/selectors';
 import A4ALogo, { LOGO_COLOR_SECONDARY_ALT } from '../../a4a-logo';
 import ProfileDropdown from './profile-dropdown';
 
@@ -15,9 +18,14 @@ const AllSitesIcon = () => (
 );
 
 const Header = ( { withProfileDropdown }: Props ) => {
+	const agency = useSelector( getActiveAgency );
+
 	return (
 		<SidebarHeader className="a4a-sidebar__header">
-			<AllSitesIcon />
+			<HStack spacing={ 3 } alignment="center" justify="flex-start">
+				<AllSitesIcon />
+				{ agency?.name && <span className="a4a-sidebar__agency-name">{ agency.name }</span> }
+			</HStack>
 			{ withProfileDropdown && <ProfileDropdown /> }
 		</SidebarHeader>
 	);
diff --git a/client/a8c-for-agencies/components/sidebar/header/style.scss b/client/a8c-for-agencies/components/sidebar/header/style.scss
index 4579e75a3738..d33733152bdf 100644
--- a/client/a8c-for-agencies/components/sidebar/header/style.scss
+++ b/client/a8c-for-agencies/components/sidebar/header/style.scss
@@ -10,6 +10,16 @@ $profile-dropdown-menu-height: 250px;
 	display: flex;
 	justify-content: space-between;
 }
+
+.a4a-sidebar__agency-name {
+	color: var(--color-sidebar-text);
+	font-size: 0.875rem;
+	font-weight: 500;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 140px;
+}
 .components-button .help-center__icon {
 	fill: var(--color-sidebar-text);
 }