From 363579f70f689bf1c5eafff77b4aa5f353b8507b Mon Sep 17 00:00:00 2001
From: ryan-crabbe-berri <ryan@berri.ai>
Date: Mon, 8 Jun 2026 13:08:26 -0700
Subject: [PATCH] feat(ui): migrate the Playground page to App Router path
 routing

Add llm-playground -> playground to MIGRATED_PAGES and remove the page's arm
from the legacy switch in page.tsx. The playground route already sources all
its data from useAuthorized and fetches its own proxy settings, so this is a
pure cutover with no prop or state changes.

Visiting /ui/?page=llm-playground now redirects to /ui/playground, the sidebar
links to and highlights it, and navigating away returns to the legacy switch.
Cover the new mapping with a reverse-lookup test so the sidebar highlight is pinned.
---
 ui/litellm-dashboard/src/app/page.tsx                | 3 ---
 ui/litellm-dashboard/src/utils/migratedPages.test.ts | 2 ++
 ui/litellm-dashboard/src/utils/migratedPages.ts      | 1 +
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index 12dd39a1c21..996f63966d8 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -2,7 +2,6 @@
 
 import SidebarProvider from "@/app/(dashboard)/components/SidebarProvider";
 import OldModelDashboard from "@/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView";
-import PlaygroundPage from "@/app/(dashboard)/playground/page";
 import AdminPanel from "@/components/AdminPanel";
 import AgentsPanel from "@/components/agents";
 import BudgetPanel from "@/components/budgets/budget_panel";
@@ -406,8 +405,6 @@ function CreateKeyPageContent() {
                     premiumUser={premiumUser}
                     teams={teams}
                   />
-                ) : page == "llm-playground" ? (
-                  <PlaygroundPage />
                 ) : page == "users" ? (
                   <ViewUserDashboard
                     userID={userID}
diff --git a/ui/litellm-dashboard/src/utils/migratedPages.test.ts b/ui/litellm-dashboard/src/utils/migratedPages.test.ts
index e9aceea8148..d614bf7dc6d 100644
--- a/ui/litellm-dashboard/src/utils/migratedPages.test.ts
+++ b/ui/litellm-dashboard/src/utils/migratedPages.test.ts
@@ -34,6 +34,7 @@ describe("migratedHref / legacyPageHref", () => {
 
     expect(MIGRATED_PAGES.api_ref).toBe("api-reference");
     expect(MIGRATED_PAGES["api-reference"]).toBe("api-reference");
+    expect(MIGRATED_PAGES["llm-playground"]).toBe("playground");
   });
 });
 
@@ -49,6 +50,7 @@ describe("legacyKeyForPathname", () => {
     // Resolves to the sidebar key api_ref, not the hyphenated alias, so highlighting works.
     expect(legacyKeyForPathname("/ui/api-reference")).toBe("api_ref");
     expect(legacyKeyForPathname("/ui/api-reference/")).toBe("api_ref");
+    expect(legacyKeyForPathname("/ui/playground")).toBe("llm-playground");
   });
 
   it("returns null for a not-yet-migrated path", async () => {
diff --git a/ui/litellm-dashboard/src/utils/migratedPages.ts b/ui/litellm-dashboard/src/utils/migratedPages.ts
index 2c27e4fee64..e20e8b5a8ea 100644
--- a/ui/litellm-dashboard/src/utils/migratedPages.ts
+++ b/ui/litellm-dashboard/src/utils/migratedPages.ts
@@ -12,6 +12,7 @@ export const MIGRATED_PAGES: Record<string, string> = {
   api_ref: "api-reference",
   // Legacy alias: older bookmarks used the hyphenated ?page=api-reference form.
   "api-reference": "api-reference",
+  "llm-playground": "playground",
 };
 
 function uiBase(): string {