feat(ui): mark Cost Optimization as beta in the left nav (#34984)

[yuneng-berri]

Cherry-pick of #34984 onto rc/1.94.0, picked with -x from f4a68a75ff4afa946e1e9f94d003ad0a7d41eb08

The pick applied cleanly (auto-merge on leftnav.tsx, no conflicts) and is byte-for-byte the upstream change; git patch-id --stable is fc05e4ae2193f202b78a6e4131f4bbc8fe7d4e91 on both the staging commit and this one

Relevant issues

Linear ticket

Pre-Submission checklist

Please complete all items before asking a LiteLLM maintainer to review your PR

• 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

To capture at 3db78a88ed, with the dashboard dev server pointed at a local proxy:

1. npm run dev in ui/litellm-dashboard, then open http://localhost:3000/ui/ and sign in as a proxy admin
2. In the left nav under AI Gateway, Cost Optimization should read "Cost Optimization" followed by the same grey Beta pill that Projects carries
3. Collapse the sidebar to the icon rail and hover the Cost Optimization icon; the native tooltip should read "Cost Optimization", not "cost-optimization". With enableProjectsUI on, hovering Projects should read "Projects", not "projects"

Type

🆕 New Feature

Changes

Everything in the picked commit already applied on this line: rc/1.94.0 carries BetaBadge (from #33449), the cost-optimization nav entry, and the labelText / prettify pair the change reorders, so nothing had to be adapted

The Cost Optimization nav item gains the Beta badge Projects already renders, which turns its label from a plain string into JSX. Because labelText() fell back to the raw menu key for non-string labels, that switch would have made the collapsed-rail tooltip read "cost-optimization"; the fallback now runs the key through prettify(), the same helper getBreadcrumb() uses, which also fixes Projects showing "projects" in the rail on this line today

Verification on rc/1.94.0: npx vitest run src/components/leftnav.test.tsx is 15 passed. Reverting only leftnav.tsx back to the rc parent, keeping the new tests, turns exactly the two new tests red ("expected 'Cost Optimization' to contain 'Beta'" and the collapsed-tooltip assertion) at 2 failed / 13 passed, then green again once the source is restored. prettier --check passes on both files and eslint reports 0 errors on them

One thing to be aware of for the release: this changes dashboard source only, so the committed bundle under litellm/proxy/_experimental/out/ on rc/1.94.0 will not show the badge until the UI build is re-run for this line

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]

Tooltip diverges from visible label

Deriving every JSX label from its key makes the collapsed tooltip for admin-panel read “Admin Panel” while the expanded navigation item reads “Admin Settings,” creating inconsistent names for the same destination.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

[greptile-apps]

Greptile Summary

This PR adds a Beta badge to the Cost Optimization navigation item and improves collapsed-sidebar tooltip text for JSX labels.

• Converts the Cost Optimization label from plain text to JSX containing the existing Beta badge.
• Prettifies menu keys when deriving text for non-string labels.
• Adds tests for badge visibility, feature-flag independence, and collapsed tooltip text.

Confidence Score: 4/5

The PR appears safe to merge, with one non-blocking inconsistency in the collapsed tooltip for Admin Settings.

The badge and targeted tooltip behavior are covered by focused tests, but deriving all JSX-label text from keys makes Admin Settings appear as “Admin Panel” in the collapsed rail.

Files Needing Attention: ui/litellm-dashboard/src/components/leftnav.tsx

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/leftnav.tsx	Adds the Cost Optimization Beta badge and readable JSX-label tooltips, with a minor Admin Settings tooltip mismatch.
ui/litellm-dashboard/src/components/leftnav.test.tsx	Adds focused coverage for the badge, navigation availability, and collapsed tooltip behavior without weakening existing assertions.

_{Reviews (1): Last reviewed commit: "feat(ui): mark Cost Optimization as beta..." | Re-trigger Greptile}