feat(ui): standardize the Teams page header

[yuneng-berri]

TLDR

Problem this solves:

• Team header used one-off spacing and typography
• Shared header had no standard control-row contract

How it solves it:

• Defines the canonical reusable PageHeader slots
• Adopts the pattern on Teams as the pilot
• Preserves other pages through an explicit legacy component

User Flow

Before: a proxy admin opening the Teams page sees a one-off header that does not match the proposed dashboard pattern

1. They open https://litellm-domain/teams
2. They see the Teams identity and description above the team tabs
3. They use Create Team or switch between team tabs

After: the same proxy admin sees the standard page identity and control-row pattern without losing any Team behavior

1. They open https://litellm-domain/teams
2. They see the 24px title, icon-aligned description, 32px inset, and standard control spacing
3. They use the same Create Team action and Team tabs

Relevant issues

Linear ticket

Pre-Submission checklist

• I have added meaningful tests
• My PR passes all CI/CD checks (e.g., lint, format, unit tests)
• My PR's scope is as isolated as possible; it only solves 1 specific problem
• I have received a Greptile Confidence Score of at least 4/5 before requesting a maintainer review (Greptile reviews automatically once the PR is opened; only comment @greptileai to re-request a review after pushing changes)

Delays in PR merge?

If you're seeing a delay in your PR being merged, ping the LiteLLM Team on Slack (#pr-review).

Screenshots / Proof of Fix

Before/after captures are retained outside the repository and must be attached through GitHub's upload interface.

Live verification:

• Teams proxy-admin Playwright suite: 6 passed
• Production dashboard build and TypeScript: passed
• Focused PageHeader and Teams tests: 52 passed
• Current-head CI: 52 passed, 24 skipped
• Current-head Greptile: 5/5
• Current-head Veria: no security issues

Type

New Feature

Caveats (if any)

• Other pages remain visually unchanged during this pilot
• Their legacy header is explicit for staged adoption

Final Attestation

• The tests check the right things, including the edge cases, and regressions in the respective real-world customer use-cases are not possible after this PR

[greptile-apps]

Greptile Summary

The PR introduces a standardized page-header contract and adopts it on Teams while preserving existing layouts through a legacy component.

• Adds identity, primary-action, tabs, and utility slots to the shared PageHeader.
• Moves the Teams create action into the tabs control row while retaining permission checks and detail-view spacing.
• Migrates existing header consumers to LegacyPageHeader and adds focused component tests.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/shared/PageHeader.tsx	Defines the standardized header identity and control-row composition, including embedded tab-shell support.
ui/litellm-dashboard/src/components/Teams.tsx	Adopts the standardized header while preserving team-creation permission gating, modal behavior, tabs, and detail-view spacing.
ui/litellm-dashboard/src/components/shared/LegacyPageHeader.tsx	Preserves the former header contract and presentation for pages outside the pilot migration.
ui/litellm-dashboard/src/components/Teams.test.tsx	Updates coverage for the Teams control-row placement, role gating, tab styling, and detail-view inset.

_{Reviews (3): Last reviewed commit: "feat(ui): standardize the Teams page hea..." | Re-trigger Greptile}

[yuneng-berri]

@greptileai

[yuneng-berri]

@veria-ai review

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[yuneng-berri]

@greptileai

[yuneng-berri]

@veria-ai review