feat(ui): migrate the Playground page to App Router path routing

[ryan-crabbe-berri]

Relevant issues

Part of the App Router migration (Wave A), building on the plumbing merged in #29953. Targets litellm_internal_staging directly.

Linear ticket

None

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 unit tests on make test-unit
• My PR's scope is as isolated as possible; it only solves 1 specific problem
• I have requested a Greptile review by commenting @greptileai and received a Confidence Score of at least 4/5 before requesting a maintainer review

CI (LiteLLM team)

• Branch creation CI run
  Link:

• CI run for the last commit
  Link:

• Merge / cherry-pick CI run
  Links:

Screenshots / Proof of Fix

Behavior change, so verify on a live proxy after building the UI into litellm/proxy/_experimental/out:

1. Go to http://localhost:4000/ui/ and log in
2. Click "Playground" in the sidebar -> URL becomes http://localhost:4000/ui/playground, the playground renders, "Playground" stays highlighted
3. Hard-refresh -> still renders (not 404)
4. Right-click "Playground" -> Open in new tab -> opens http://localhost:4000/ui/playground directly
5. From Playground, click a not-yet-migrated item (for example "Logs") -> returns to http://localhost:4000/ui/?page=logs
6. Visit http://localhost:4000/ui/?page=llm-playground directly -> redirects to http://localhost:4000/ui/playground

Type

🆕 New Feature

Changes

Second page migrated under the strangler-fig plan, and the first to confirm the cutover is now a one-line change on top of the plumbing from #29953. The Playground route already existed at (dashboard)/playground/page.tsx and already sourced everything from useAuthorized plus its own proxy-settings fetch, so there was no prop or shared-state work: this adds llm-playground -> playground to MIGRATED_PAGES and deletes the page's arm (and import) from the legacy page.tsx switch.

Tests pin the new mapping: MIGRATED_PAGES["llm-playground"] resolves to playground, and legacyKeyForPathname("/ui/playground") resolves back to the llm-playground sidebar key so highlighting stays correct.

Migration counter: 2 / 35.

[greptile-apps]

Greptile Summary

This PR completes the second page in the strangler-fig App Router migration by cutting the Playground page over to path-based routing. The change is deliberately minimal: one entry added to MIGRATED_PAGES, the corresponding legacy switch arm removed from page.tsx, and two test assertions added to pin the forward and reverse mappings.

• migratedPages.ts: Adds "llm-playground": "playground" so the existing redirect-before-render logic in page.tsx and the sidebar-highlight logic in layout.tsx both handle the playground automatically.
• app/page.tsx: Drops the PlaygroundPage import and its page == "llm-playground" branch; safe because MIGRATED_PAGES intercepts the legacy ?page=llm-playground URL and redirects to /ui/playground before the switch is ever reached.
• migratedPages.test.ts: Pins MIGRATED_PAGES["llm-playground"] === "playground" and legacyKeyForPathname("/ui/playground") === "llm-playground"; minor nits on test naming and missing trailing-slash coverage noted inline.

Confidence Score: 5/5

The change is a one-line addition to a registry object and a removal of a now-redundant switch arm; the redirect plumbing that makes the cutover safe was already in place from the previous wave.

All three modified files are small and well-understood. The redirect-before-render guard in page.tsx ensures no user hits a blank page when navigating via the legacy ?page=llm-playground URL. The playground route itself was already live; this PR only wires up the routing entry point. The only findings are cosmetic test-suite nits.

No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/utils/migratedPages.ts	One-line addition of "llm-playground": "playground" to MIGRATED_PAGES; correctly wires the redirect and sidebar-highlight flows.
ui/litellm-dashboard/src/utils/migratedPages.test.ts	Two new assertions added for the playground mapping and its reverse lookup; minor test-name mismatch and missing trailing-slash coverage for the new route.
ui/litellm-dashboard/src/app/page.tsx	Removes PlaygroundPage import and its page == "llm-playground" arm from the legacy switch; safe because the redirect-before-render path in MIGRATED_PAGES intercepts the legacy URL first.

Comments Outside Diff (1)

1. ui/litellm-dashboard/src/utils/migratedPages.test.ts, line 31-38 (link)

   The test name no longer describes all of its assertions — after this change it also verifies the llm-playground → playground mapping, which has nothing to do with the "api_ref hyphenated alias" described in the title. A misleading name makes it harder to understand what broke when this test fails.

   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!

_{Reviews (1): Last reviewed commit: "feat(ui): migrate the Playground page to..." | Re-trigger Greptile}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!