Add agency name display to A4A portal sidebar header

[Copilot]

Agencies had no way to confirm which account they were logged into — the sidebar showed only the A4A logo and a Gravatar with no agency context.

Changes

• sidebar/header/index.tsx: Read active agency via useSelector(getActiveAgency) and render the agency name between the logo and profile dropdown. Conditionally rendered — nothing shown while agency is loading or when name is absent.
• sidebar/header/style.scss: Style .a4a-sidebar__agency-name with sidebar text color, 500 weight, and CSS truncation (max-width: 140px, text-overflow: ellipsis). Full name exposed via title attribute on hover.

const Header = ( { withProfileDropdown }: Props ) => {
    const agency = useSelector( getActiveAgency );

    return (
        <SidebarHeader className="a4a-sidebar__header">
            <AllSitesIcon />
            { agency?.name && (
                <span className="a4a-sidebar__agency-name" title={ agency.name }>
                    { agency.name }
                </span>
            ) }
            { withProfileDropdown && <ProfileDropdown /> }
        </SidebarHeader>
    );
};

No new API calls — uses the existing Redux state already populated by the agency fetch.

Original prompt

Issue Title: Add display of agency name to portal
Issue Description: Describe the bug or enhancement

Add a clear and concise description of what the bug or enhancement is.

Chatting with an agency today, they mentioned they were unsure if they were logged in with the correct account. They expected to see their agency name somewhere in the portal. This could be a small tweak that helps personalize the portal and situate agencies.

Steps to reproduce, if applicable

Steps to reproduce the behavior:

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add links to screenshots to help explain your problem. Or add them using the "Upload files" picker below.

Additional context

Add any other context about the problem here. The more detail you can provide, the better.

Upload files

Fixes https://linear.app/a8c/issue/A4A-1996/add-display-of-agency-name-to-portal
Branch Name should include the identifier "A4A-1996"
Agent Guidance:

• Agent scope and context

• Always anchor your work to the agent-specific guidance in the mention (e.g., githubcopilot , cursor ). This is your primary context.
• Treat the Linear issue as background information. Do not begin implementation unless the request explicitly authorizes it.

Execution rules

• For exploration requests (e.g., “create a tech exploration”), deliver a draft PR containing exploration artifacts only—prototypes, notes, comparisons, or spike code. Avoid fixes, refactors, and production changes.
• Keep output minimal, reviewable, and clearly labeled as “Exploration” to prevent accidental merges.

Quality and handoff

• Summarize assumptions, constraints, and next steps in the draft PR description.
• Flag any implementation-ready insights, but do not act on them without explicit approval in a follow-up request.
• Ensure you reference the ISSUE # in your PR and commit descriptions, not the Linear issue (e.g., `closes Signup: Create new social account when signing up with Google #12345` NOT `closes #LIN-123`)

Issue Comments:
Comment by User e4297379-61ae-462f-9580-75ffd723529f (2026-04-07T10:53:42.995Z):
None

Comment by User 8276f4bf-d673-4481-9272-192279f2986b (2026-04-07T10:12:44.963Z):
Agency name display

I've completed the implementation for displaying the agency name in the A4A portal sidebar.

Summary

I added the agency name display to the A4A sidebar header to help agencies identify which account they are logged into. The changes include:

• Updated client/a8c-for-agencies/components/sidebar/header/index.tsx: Added the getActiveAgency selector to fetch the active agency from Redux state, and wrapped the logo and agency name in an HStack component for proper horizontal layout.
• Updated client/a8c-for-agencies/components/sidebar/header/style.scss: Added styling for the agency name with appropriate color, font size, weight, and text truncation for long names (max-width of 140px with ellipsis).

The agency name now appears next to the A4A logo in the sidebar header, providing users with clear context about which agency account they are viewing. The implementation uses existing Redux state (getActiveAgency selector) so no new API calls are required.

Repository: Automattic/wp-calypso
Branch: cursor/A4A-1996-agency-name-display-5240

View PR · Open in Desktop · Open in Web

Comment by User (2026-04-07T09:53:31.462Z):
This thread is for an agent session with Cursor. View on Cursor →

Comment by User (2026-04-07T09:53:08.920Z):
This thread is for an agent session with githubcopilot.

Comment by User 1dc4fda1-de7f-43c8-817f-7605532e8a35 (2026-04-07T09:52:29.658Z):

ai-coder.sh — Error

Error: The AI agent produced no code changes for this task.
Build: https://teamcity.a8c.com/build/17292541

This comment was posted automatically by ai-coder.sh. Check the build log for full details.

Comment by User e4297379-61ae-462f-9580-75ffd723529f (2026-04-07T09:50:04.383Z):
@AgentSandbox stop

Comment by User 1dc4fda1-de7f-43c8-817f-7605532e8a35 (2026-04-07T09:42:59.313Z):
Got it! Waiting for TeamCity worker.

Comment by User e4297379-61ae-462f-9580-75ffd723529f (2026-04-07T09:40:40.137Z):

Enriched Specification Template

Issue Reference

• ID: A4A-1996
• Title: Add display of agency name to portal
• Status: Needs design
• Priority: Low
• Labels...

[matticbot]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174920

Jetpack Cloud Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174920&env=jetpack

Automattic for Agencies Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174920&env=a8c-for-agencies

Dashboard Live (dotcom) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174920&env=dashboard

Dashboard Live (CIAB) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-174920&env=dashboard-ciab

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• help-center

To test WordPress.com changes, run install-plugin.sh $pluginSlug copilot/a4a-1996-add-agency-name-display on your sandbox.