feat(ui): migrate playground to path routing and colocate its files (#30185)

* feat(ui): cut playground over to the /ui/playground path route

Follows the api-reference recipe: the sidebar and deep links route
llm-playground to the path route, ?page=llm-playground redirects, and
the legacy switch arm is deleted. The route's page.tsx was already the
real implementation, so no view extraction was needed.

* refactor(ui): move playground-owned files into its route folder

Per the (dashboard) README convention, page-owned code lives in the
page's folder: chat_ui/compareUI/complianceUI components, the chat
hooks, and the playground-only llm_calls helpers move under
(dashboard)/playground/. Modules with non-playground consumers (chat
message primitives; fetch_models, chat_completion, responses_api) stay
at their lowest common ancestor in src/components/{chat_ui,llm_calls}
because legacy pages still import them. eslint-suppressions entries are
re-keyed to the new paths so the grandfathered baseline still applies.

* test(ui): teach sidebar e2e spec about migrated path routes

The sidebar spec asserted ?page=<key> for every item, which the
playground cutover correctly broke: the sidebar now links to
/ui/playground and the legacy URL redirects there. Drive the expected
URL from the migration fixture (now a page-id -> segment map) so
future cutovers only add a fixture entry. Also wrap one import line
in AgentBuilderView.tsx that the move left unformatted; the changed-
files prettier check flagged it.

ui/litellm-dashboard/e2e_tests/fixtures/migratedPages.ts

@@ -1,16 +1,23 @@
 /**
- * Source of truth for the App Router migration smoke (tests/migration/migratedPages.spec.ts).
+ * Source of truth for the App Router migration E2E suites.
  *
- * Add a route segment here once its migration has MERGED to the branch under test.
- * Both suites pick it up automatically:
- *   - default mount:           npm run e2e:migration
- *   - server-root-path mount:  SERVER_ROOT_PATH=/<root> npm run e2e:migration:root
+ * Add an entry (legacy sidebar page id -> route segment) once a page's migration
+ * has MERGED to the branch under test. Consumers pick it up automatically:
+ *   - migration smoke (tests/migration/migratedPages.spec.ts), via MIGRATED_E2E_SEGMENTS:
+ *       default mount:           npm run e2e:migration
+ *       server-root-path mount:  SERVER_ROOT_PATH=/<root> npm run e2e:migration:root
+ *   - navigation specs that assert per-page URLs (tests/navigation/sidebar.spec.ts)
  *
  * Keep this in lockstep with MIGRATED_PAGES in src/utils/migratedPages.ts.
- * Pending (uncomment as each PR lands): playground, and the leaf-pages batch
+ * Pending (add as each PR lands): the leaf-pages batch
  * (budgets, caching, cost-tracking, guardrails, guardrails-monitor, logs,
  * mcp-servers, memory, policies, projects, prompts, search-tools, skills,
  * tag-management, tool-policies, transform-request, ui-theme, vector-stores,
  * workflows, access-groups).
  */
-export const MIGRATED_E2E_SEGMENTS: string[] = ["api-reference"];
+export const MIGRATED_E2E_PAGES: Record<string, string> = {
+  api_ref: "api-reference",
+  "llm-playground": "playground",
+};
+
+export const MIGRATED_E2E_SEGMENTS: string[] = [...new Set(Object.values(MIGRATED_E2E_PAGES))];

ui/litellm-dashboard/e2e_tests/tests/navigation/sidebar.spec.ts

@@ -4,11 +4,23 @@ import { ADMIN_STORAGE_PATH } from "../../constants";
 import { Page } from "../../fixtures/pages";
 import { menuLabelToPage } from "../../fixtures/menuMappings";
 import { navigateToPage } from "../../helpers/navigation";
+import { MIGRATED_E2E_PAGES } from "../../fixtures/migratedPages";
+import type { Page as PlaywrightPage } from "@playwright/test";
 
 const sidebarButtons = {
   [Role.ProxyAdmin]: ["Virtual Keys", "Playground", "Models", "Usage", "Teams", "Internal Users", "AI Hub"],
 };
 
+/** Migrated pages live at a path route; legacy pages keep the ?page= query param. */
+async function expectPageUrl(page: PlaywrightPage, pageKey: string): Promise<void> {
+  const migratedSegment = MIGRATED_E2E_PAGES[pageKey];
+  if (migratedSegment) {
+    await expect(page).toHaveURL(new RegExp(`/ui/${migratedSegment}/?($|\\?)`));
+  } else {
+    await expect(page).toHaveURL(new RegExp(`[?&]page=${pageKey}(&|$)`));
+  }
+}
+
 const roles = [{ role: Role.ProxyAdmin, storage: ADMIN_STORAGE_PATH }];
 
 for (const { role, storage } of roles) {
@@ -35,8 +47,7 @@ for (const { role, storage } of roles) {
 
         await tab.click();
 
-        // Verify URL contains the correct page query parameter
-        await expect(page).toHaveURL(new RegExp(`[?&]page=${expectedPage}(&|$)`));
+        await expectPageUrl(page, expectedPage);
       }
     });
 
@@ -50,13 +61,14 @@ for (const { role, storage } of roles) {
 
       // Test direct navigation to verify the helper function works
       await navigateToPage(page, Page.ApiKeys);
-      await expect(page).toHaveURL(new RegExp(`[?&]page=${Page.ApiKeys}(&|$)`));
+      await expectPageUrl(page, Page.ApiKeys);
 
       await navigateToPage(page, Page.Models);
-      await expect(page).toHaveURL(new RegExp(`[?&]page=${Page.Models}(&|$)`));
+      await expectPageUrl(page, Page.Models);
 
+      // Migrated page: /ui?page=llm-playground redirects to the path route
       await navigateToPage(page, Page.LlmPlayground);
-      await expect(page).toHaveURL(new RegExp(`[?&]page=${Page.LlmPlayground}(&|$)`));
+      await expectPageUrl(page, Page.LlmPlayground);
     });
   });
 }

ui/litellm-dashboard/eslint-suppressions.json

@@ -1533,7 +1533,7 @@
       "count": 1
     }
   },
-  "src/components/playground/chat_ui/AdditionalModelSettings.tsx": {
+  "src/app/(dashboard)/playground/components/chat_ui/AdditionalModelSettings.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
@@ -1541,17 +1541,17 @@
       "count": 2
     }
   },
-  "src/components/playground/chat_ui/AgentBuilderView.tsx": {
+  "src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.tsx": {
     "react-hooks/set-state-in-effect": {
       "count": 5
     }
   },
-  "src/components/playground/chat_ui/ChatImageUtils.test.tsx": {
+  "src/app/(dashboard)/playground/components/chat_ui/ChatImageUtils.test.tsx": {
     "max-nested-callbacks": {
       "count": 1
     }
   },
-  "src/components/playground/chat_ui/ChatUI.tsx": {
+  "src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
@@ -1562,17 +1562,17 @@
       "count": 13
     }
   },
-  "src/components/playground/chat_ui/CodeInterpreterOutput.tsx": {
+  "src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterOutput.tsx": {
     "no-restricted-syntax": {
       "count": 2
     }
   },
-  "src/components/playground/chat_ui/CodeInterpreterTool.tsx": {
+  "src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterTool.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/playground/chat_ui/RealtimePlayground.tsx": {
+  "src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.tsx": {
     "react-hooks/immutability": {
       "count": 2
     },
@@ -1580,22 +1580,22 @@
       "count": 1
     }
   },
-  "src/components/playground/compareUI/CompareUI.tsx": {
+  "src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx": {
     "react-hooks/set-state-in-effect": {
       "count": 1
     }
   },
-  "src/components/playground/compareUI/components/ModelSelector.tsx": {
+  "src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/playground/complianceUI/ComplianceUI.tsx": {
+  "src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx": {
     "react-hooks/preserve-manual-memoization": {
       "count": 3
     }
   },
-  "src/components/playground/llm_calls/a2a_send_message.tsx": {
+  "src/app/(dashboard)/playground/llm_calls/a2a_send_message.tsx": {
     "max-params": {
       "count": 2
     },
@@ -1603,27 +1603,27 @@
       "count": 2
     }
   },
-  "src/components/playground/llm_calls/anthropic_messages.tsx": {
+  "src/app/(dashboard)/playground/llm_calls/anthropic_messages.tsx": {
     "max-params": {
       "count": 1
     }
   },
-  "src/components/playground/llm_calls/audio_speech.tsx": {
+  "src/app/(dashboard)/playground/llm_calls/audio_speech.tsx": {
     "max-params": {
       "count": 1
     }
   },
-  "src/components/playground/llm_calls/audio_transcriptions.tsx": {
+  "src/app/(dashboard)/playground/llm_calls/audio_transcriptions.tsx": {
     "max-params": {
       "count": 1
     }
   },
-  "src/components/playground/llm_calls/chat_completion.tsx": {
+  "src/components/llm_calls/chat_completion.tsx": {
     "max-params": {
       "count": 1
     }
   },
-  "src/components/playground/llm_calls/embeddings_api.tsx": {
+  "src/app/(dashboard)/playground/llm_calls/embeddings_api.tsx": {
     "max-params": {
       "count": 1
     },
@@ -1631,22 +1631,22 @@
       "count": 1
     }
   },
-  "src/components/playground/llm_calls/fetch_agents.tsx": {
+  "src/app/(dashboard)/playground/llm_calls/fetch_agents.tsx": {
     "no-restricted-syntax": {
       "count": 1
     }
   },
-  "src/components/playground/llm_calls/image_edits.tsx": {
+  "src/app/(dashboard)/playground/llm_calls/image_edits.tsx": {
     "max-params": {
       "count": 1
     }
   },
-  "src/components/playground/llm_calls/image_generation.tsx": {
+  "src/app/(dashboard)/playground/llm_calls/image_generation.tsx": {
     "max-params": {
       "count": 1
     }
   },
-  "src/components/playground/llm_calls/interactions_api.tsx": {
+  "src/app/(dashboard)/playground/llm_calls/interactions_api.tsx": {
     "max-params": {
       "count": 1
     },
@@ -1654,7 +1654,7 @@
       "count": 1
     }
   },
-  "src/components/playground/llm_calls/responses_api.tsx": {
+  "src/components/llm_calls/responses_api.tsx": {
     "max-params": {
       "count": 1
     }
@@ -2250,4 +2250,4 @@
       "count": 1
     }
   }
-}
+}

ui/litellm-dashboard/src/app/(dashboard)/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import ModelsAndEndpointsView 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";
@@ -354,8 +353,6 @@ function CreateKeyPageContent() {
               premiumUser={premiumUser}
               teams={teams}
             />
-          ) : page == "llm-playground" ? (
-            <PlaygroundPage />
           ) : page == "users" ? (
             <ViewUserDashboard
               userID={userID}

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.tsx

@@ -12,12 +12,18 @@ import {
 import { Button, Input, Modal, Select, Spin, Tabs } from "antd";
 import React, { useCallback, useEffect, useState } from "react";
 import CodeBlock from "@/app/(dashboard)/api-reference/components/CodeBlock";
-import NotificationsManager from "../../molecules/notifications_manager";
-import { keyCreateCall, modelCreateCall, modelDeleteCall, modelPatchUpdateCall, proxyBaseUrl } from "../../networking";
-import { fetchMCPServers } from "../../networking";
-import { MCPServer } from "../../mcp_tools/types";
-import { AgentModel, fetchAvailableAgentModels, MCPToolEntry } from "../llm_calls/fetch_agents";
-import { fetchAvailableModels, ModelGroup } from "../llm_calls/fetch_models";
+import NotificationsManager from "@/components/molecules/notifications_manager";
+import {
+  keyCreateCall,
+  modelCreateCall,
+  modelDeleteCall,
+  modelPatchUpdateCall,
+  proxyBaseUrl,
+} from "@/components/networking";
+import { fetchMCPServers } from "@/components/networking";
+import { MCPServer } from "@/components/mcp_tools/types";
+import { AgentModel, fetchAvailableAgentModels, MCPToolEntry } from "../../llm_calls/fetch_agents";
+import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models";
 import ComplianceUI from "../complianceUI/ComplianceUI";
 import ChatUI from "./ChatUI";
 

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AudioRenderer.test.tsx

@@ -1,7 +1,7 @@
 import { render } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
 import AudioRenderer from "./AudioRenderer";
-import { MessageType } from "./types";
+import { MessageType } from "@/components/chat_ui/types";
 
 describe("AudioRenderer", () => {
   it("should render the audio renderer", () => {

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AudioRenderer.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { MessageType } from "./types";
+import { MessageType } from "@/components/chat_ui/types";
 
 interface AudioRendererProps {
   message: MessageType;

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatImageRenderer.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Image from "next/image";
-import { MessageType } from "./types";
+import { MessageType } from "@/components/chat_ui/types";
 import { shouldShowChatAttachedImage } from "./ChatImageUtils";
 import { FilePdfOutlined } from "@ant-design/icons";
 

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatImageUtils.test.tsx

@@ -5,7 +5,7 @@ import {
   createChatDisplayMessage,
   shouldShowChatAttachedImage,
 } from "./ChatImageUtils";
-import { MessageType } from "./types";
+import { MessageType } from "@/components/chat_ui/types";
 
 describe("ChatImageUtils", () => {
   beforeEach(() => {

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatImageUtils.tsx

@@ -1,4 +1,4 @@
-import { MessageType } from "./types";
+import { MessageType } from "@/components/chat_ui/types";
 
 export interface ChatMultimodalContent {
   type: "text" | "image_url";

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatMessageBubble.test.tsx

@@ -1,8 +1,8 @@
 import { render, screen } from "@testing-library/react";
 import { describe, it, expect, vi } from "vitest";
 import ChatMessageBubble from "./ChatMessageBubble";
-import { EndpointType } from "./mode_endpoint_mapping";
-import { MessageType } from "./types";
+import { EndpointType } from "@/components/chat_ui/mode_endpoint_mapping";
+import { MessageType } from "@/components/chat_ui/types";
 
 // Mock child components to isolate bubble rendering logic
 vi.mock("react-markdown", () => ({
@@ -17,13 +17,13 @@ vi.mock("react-syntax-highlighter/dist/esm/styles/prism", () => ({
   coy: {},
 }));
 
-vi.mock("./ReasoningContent", () => ({
+vi.mock("@/components/chat_ui/ReasoningContent", () => ({
   default: ({ reasoningContent }: { reasoningContent: string }) => (
     <div data-testid="reasoning-content">{reasoningContent}</div>
   ),
 }));
 
-vi.mock("./MCPEventsDisplay", () => ({
+vi.mock("@/components/chat_ui/MCPEventsDisplay", () => ({
   default: ({ events }: { events: unknown[] }) => <div data-testid="mcp-events-display">{events.length} events</div>,
 }));
 
@@ -33,7 +33,7 @@ vi.mock("./SearchResultsDisplay", () => ({
   ),
 }));
 
-vi.mock("./ResponseMetrics", () => ({
+vi.mock("@/components/chat_ui/ResponseMetrics", () => ({
   default: ({ timeToFirstToken }: { timeToFirstToken?: number }) => (
     <div data-testid="response-metrics">TTFT: {timeToFirstToken}</div>
   ),

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatMessageBubble.tsx

@@ -3,19 +3,19 @@ import React from "react";
 import ReactMarkdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { coy } from "react-syntax-highlighter/dist/esm/styles/prism";
-import { CodeInterpreterResult } from "../llm_calls/code_interpreter_handler";
+import { CodeInterpreterResult } from "@/components/llm_calls/code_interpreter_handler";
 import A2AMetrics from "./A2AMetrics";
 import AudioRenderer from "./AudioRenderer";
 import ChatImageRenderer from "./ChatImageRenderer";
 import CodeInterpreterOutput from "./CodeInterpreterOutput";
-import { EndpointType } from "./mode_endpoint_mapping";
-import MCPEventsDisplay from "./MCPEventsDisplay";
-import type { MCPEvent } from "../../mcp_tools/types";
-import ReasoningContent from "./ReasoningContent";
-import ResponseMetrics from "./ResponseMetrics";
+import { EndpointType } from "@/components/chat_ui/mode_endpoint_mapping";
+import MCPEventsDisplay from "@/components/chat_ui/MCPEventsDisplay";
+import type { MCPEvent } from "@/components/mcp_tools/types";
+import ReasoningContent from "@/components/chat_ui/ReasoningContent";
+import ResponseMetrics from "@/components/chat_ui/ResponseMetrics";
 import ResponsesImageRenderer from "./ResponsesImageRenderer";
 import { SearchResultsDisplay } from "./SearchResultsDisplay";
-import { MessageType } from "./types";
+import { MessageType } from "@/components/chat_ui/types";
 
 interface ChatMessageBubbleProps {
   message: MessageType;

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.test.tsx

@@ -1,15 +1,15 @@
 import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import ChatUI from "./ChatUI";
-import * as fetchModelsModule from "../llm_calls/fetch_models";
+import * as fetchModelsModule from "@/components/llm_calls/fetch_models";
 
 // Mock the fetchAvailableModels function
-vi.mock("../llm_calls/fetch_models", () => ({
+vi.mock("@/components/llm_calls/fetch_models", () => ({
   fetchAvailableModels: vi.fn(),
 }));
 
 // Mock other networking functions that cause errors
-vi.mock("../networking", () => ({
+vi.mock("@/components/networking", () => ({
   tagListCall: vi.fn().mockResolvedValue({ data: [] }),
   vectorStoreListCall: vi.fn().mockResolvedValue({ data: [] }),
   getGuardrailsList: vi.fn().mockResolvedValue({ data: [] }),

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx

@@ -28,28 +28,28 @@ import ReactMarkdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { coy } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { v4 as uuidv4 } from "uuid";
-import GuardrailSelector from "../../guardrails/GuardrailSelector";
-import PolicySelector from "../../policies/PolicySelector";
-import MCPToolArgumentsForm, { MCPToolArgumentsFormRef } from "../../mcp_tools/MCPToolArgumentsForm";
-import { MCPServer } from "../../mcp_tools/types";
-import { ByokCredentialModal } from "../../mcp_tools/ByokCredentialModal";
-import NotificationsManager from "../../molecules/notifications_manager";
-import { callMCPTool, fetchMCPServers, fetchMCPToolsets, listMCPTools } from "../../networking";
-import { MCPToolset } from "../../mcp_tools/types";
-import TagSelector from "../../tag_management/TagSelector";
-import VectorStoreSelector from "../../vector_store_management/VectorStoreSelector";
-import { makeA2ASendMessageRequest } from "../llm_calls/a2a_send_message";
-import { makeAnthropicMessagesRequest } from "../llm_calls/anthropic_messages";
-import { makeOpenAIAudioSpeechRequest } from "../llm_calls/audio_speech";
-import { makeOpenAIAudioTranscriptionRequest } from "../llm_calls/audio_transcriptions";
-import { makeOpenAIChatCompletionRequest } from "../llm_calls/chat_completion";
-import { makeOpenAIEmbeddingsRequest } from "../llm_calls/embeddings_api";
-import { Agent, fetchAvailableAgents } from "../llm_calls/fetch_agents";
-import { fetchAvailableModels, ModelGroup } from "../llm_calls/fetch_models";
-import { makeOpenAIImageEditsRequest } from "../llm_calls/image_edits";
-import { makeOpenAIImageGenerationRequest } from "../llm_calls/image_generation";
-import { makeOpenAIResponsesRequest } from "../llm_calls/responses_api";
-import { makeInteractionsRequest } from "../llm_calls/interactions_api";
+import GuardrailSelector from "@/components/guardrails/GuardrailSelector";
+import PolicySelector from "@/components/policies/PolicySelector";
+import MCPToolArgumentsForm, { MCPToolArgumentsFormRef } from "@/components/mcp_tools/MCPToolArgumentsForm";
+import { MCPServer } from "@/components/mcp_tools/types";
+import { ByokCredentialModal } from "@/components/mcp_tools/ByokCredentialModal";
+import NotificationsManager from "@/components/molecules/notifications_manager";
+import { callMCPTool, fetchMCPServers, fetchMCPToolsets, listMCPTools } from "@/components/networking";
+import { MCPToolset } from "@/components/mcp_tools/types";
+import TagSelector from "@/components/tag_management/TagSelector";
+import VectorStoreSelector from "@/components/vector_store_management/VectorStoreSelector";
+import { makeA2ASendMessageRequest } from "../../llm_calls/a2a_send_message";
+import { makeAnthropicMessagesRequest } from "../../llm_calls/anthropic_messages";
+import { makeOpenAIAudioSpeechRequest } from "../../llm_calls/audio_speech";
+import { makeOpenAIAudioTranscriptionRequest } from "../../llm_calls/audio_transcriptions";
+import { makeOpenAIChatCompletionRequest } from "@/components/llm_calls/chat_completion";
+import { makeOpenAIEmbeddingsRequest } from "../../llm_calls/embeddings_api";
+import { Agent, fetchAvailableAgents } from "../../llm_calls/fetch_agents";
+import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models";
+import { makeOpenAIImageEditsRequest } from "../../llm_calls/image_edits";
+import { makeOpenAIImageGenerationRequest } from "../../llm_calls/image_generation";
+import { makeOpenAIResponsesRequest } from "@/components/llm_calls/responses_api";
+import { makeInteractionsRequest } from "../../llm_calls/interactions_api";
 import A2AMetrics from "./A2AMetrics";
 import AdditionalModelSettings from "./AdditionalModelSettings";
 import AudioRenderer from "./AudioRenderer";
@@ -59,23 +59,23 @@ import ChatImageUpload from "./ChatImageUpload";
 import { createChatDisplayMessage, createChatMultimodalMessage } from "./ChatImageUtils";
 import CodeInterpreterOutput from "./CodeInterpreterOutput";
 import CodeInterpreterTool from "./CodeInterpreterTool";
-import { generateCodeSnippet } from "./CodeSnippets";
+import { generateCodeSnippet } from "@/components/chat_ui/CodeSnippets";
 import EndpointSelector from "./EndpointSelector";
 import FilePreviewCard from "./FilePreviewCard";
 import ChatMessageBubble from "./ChatMessageBubble";
-import MCPEventsDisplay from "./MCPEventsDisplay";
-import { EndpointType, getEndpointType } from "./mode_endpoint_mapping";
-import ReasoningContent from "./ReasoningContent";
-import ResponseMetrics, { TokenUsage } from "./ResponseMetrics";
+import MCPEventsDisplay from "@/components/chat_ui/MCPEventsDisplay";
+import { EndpointType, getEndpointType } from "@/components/chat_ui/mode_endpoint_mapping";
+import ReasoningContent from "@/components/chat_ui/ReasoningContent";
+import ResponseMetrics, { TokenUsage } from "@/components/chat_ui/ResponseMetrics";
 import ResponsesImageRenderer from "./ResponsesImageRenderer";
 import ResponsesImageUpload from "./ResponsesImageUpload";
 import { createDisplayMessage, createMultimodalMessage } from "./ResponsesImageUtils";
 import { SearchResultsDisplay } from "./SearchResultsDisplay";
 import SessionManagement from "./SessionManagement";
 import RealtimePlayground from "./RealtimePlayground";
-import { A2ATaskMetadata, MessageType } from "./types";
-import { useCodeInterpreter } from "./useCodeInterpreter";
-import { useChatHistory } from "./useChatHistory";
+import { A2ATaskMetadata, MessageType } from "@/components/chat_ui/types";
+import { useCodeInterpreter } from "../../hooks/useCodeInterpreter";
+import { useChatHistory } from "../../hooks/useChatHistory";
 import { getSecureItem, setSecureItem } from "@/utils/secureStorage";
 
 const { TextArea } = Input;

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/EndpointUtils.test.tsx

@@ -1,10 +1,10 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import type { ModelGroup } from "../llm_calls/fetch_models";
+import type { ModelGroup } from "@/components/llm_calls/fetch_models";
 import { determineEndpointType } from "./EndpointUtils";
-import { EndpointType } from "./mode_endpoint_mapping";
+import { EndpointType } from "@/components/chat_ui/mode_endpoint_mapping";
 
 // Mock the getEndpointType function
-vi.mock("./mode_endpoint_mapping", () => ({
+vi.mock("@/components/chat_ui/mode_endpoint_mapping", () => ({
   EndpointType: {
     IMAGE: "image",
     VIDEO: "video",
@@ -32,7 +32,7 @@ vi.mock("./mode_endpoint_mapping", () => ({
 }));
 
 // Import the mocked function
-import { getEndpointType } from "./mode_endpoint_mapping";
+import { getEndpointType } from "@/components/chat_ui/mode_endpoint_mapping";
 
 describe("determineEndpointType", () => {
   beforeEach(() => {

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/EndpointUtils.tsx

@@ -1,5 +1,5 @@
-import { ModelGroup } from "../llm_calls/fetch_models";
-import { EndpointType, getEndpointType } from "./mode_endpoint_mapping";
+import { ModelGroup } from "@/components/llm_calls/fetch_models";
+import { EndpointType, getEndpointType } from "@/components/chat_ui/mode_endpoint_mapping";
 
 /**
  * Determines the appropriate endpoint type based on the selected model

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.tsx

@@ -3,7 +3,7 @@
 import { AudioMutedOutlined, AudioOutlined, CloseCircleOutlined, SendOutlined, SoundOutlined } from "@ant-design/icons";
 import { Button, Input, Select, Typography } from "antd";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { getProxyBaseUrl } from "../../networking";
+import { getProxyBaseUrl } from "@/components/networking";
 import { OPEN_AI_VOICE_SELECT_OPTIONS } from "./chatConstants";
 
 const { Text } = Typography;

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ResponsesImageRenderer.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { MessageType } from "./types";
+import { MessageType } from "@/components/chat_ui/types";
 import { shouldShowAttachedImage } from "./ResponsesImageUtils";
 import { FilePdfOutlined } from "@ant-design/icons";
 

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ResponsesImageUtils.tsx

@@ -1,4 +1,4 @@
-import { MessageType, MultimodalContent } from "./types";
+import { MessageType, MultimodalContent } from "@/components/chat_ui/types";
 
 export const convertImageToBase64 = (file: File): Promise<string> => {
   return new Promise((resolve, reject) => {

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/SearchResultsDisplay.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Button } from "antd";
-import { VectorStoreSearchResponse } from "./types";
+import { VectorStoreSearchResponse } from "@/components/chat_ui/types";
 import { DatabaseOutlined, FileTextOutlined, DownOutlined, RightOutlined } from "@ant-design/icons";
 
 interface SearchResultsDisplayProps {

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/SessionManagement.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { Switch, Tooltip } from "antd";
 import { InfoCircleOutlined, CopyOutlined } from "@ant-design/icons";
-import { EndpointType } from "./mode_endpoint_mapping";
-import NotificationsManager from "../../molecules/notifications_manager";
+import { EndpointType } from "@/components/chat_ui/mode_endpoint_mapping";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 
 interface SessionManagementProps {
   endpointType: string;

ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/chatConstants.ts

@@ -1,4 +1,4 @@
-import { EndpointType } from "./mode_endpoint_mapping";
+import { EndpointType } from "@/components/chat_ui/mode_endpoint_mapping";
 
 export const OPEN_AI_VOICES = {
   ALLOY: "alloy",

ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.test.tsx

@@ -2,13 +2,13 @@ import { render, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import CompareUI from "./CompareUI";
-import { makeOpenAIChatCompletionRequest } from "../llm_calls/chat_completion";
+import { makeOpenAIChatCompletionRequest } from "@/components/llm_calls/chat_completion";
 
-vi.mock("../llm_calls/fetch_models", () => ({
+vi.mock("@/components/llm_calls/fetch_models", () => ({
   fetchAvailableModels: vi.fn().mockResolvedValue([{ model_group: "gpt-4" }, { model_group: "gpt-3.5-turbo" }]),
 }));
 
-vi.mock("../llm_calls/chat_completion", () => ({
+vi.mock("@/components/llm_calls/chat_completion", () => ({
   makeOpenAIChatCompletionRequest: vi.fn().mockResolvedValue(undefined),
 }));
 

ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx

@@ -7,12 +7,12 @@ import { useEffect, useMemo, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
 import ChatImageUpload from "../chat_ui/ChatImageUpload";
 import { createChatDisplayMessage, createChatMultimodalMessage } from "../chat_ui/ChatImageUtils";
-import type { TokenUsage } from "../chat_ui/ResponseMetrics";
-import type { MessageType, VectorStoreSearchResponse } from "../chat_ui/types";
-import { makeOpenAIChatCompletionRequest } from "../llm_calls/chat_completion";
-import { fetchAvailableModels } from "../llm_calls/fetch_models";
-import { Agent, fetchAvailableAgents } from "../llm_calls/fetch_agents";
-import { makeA2AStreamMessageRequest } from "../llm_calls/a2a_send_message";
+import type { TokenUsage } from "@/components/chat_ui/ResponseMetrics";
+import type { MessageType, VectorStoreSearchResponse } from "@/components/chat_ui/types";
+import { makeOpenAIChatCompletionRequest } from "@/components/llm_calls/chat_completion";
+import { fetchAvailableModels } from "@/components/llm_calls/fetch_models";
+import { Agent, fetchAvailableAgents } from "../../llm_calls/fetch_agents";
+import { makeA2AStreamMessageRequest } from "../../llm_calls/a2a_send_message";
 import { ComparisonPanel } from "./components/ComparisonPanel";
 import { MessageInput } from "./components/MessageInput";
 import {

ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.test.tsx

@@ -18,15 +18,15 @@ vi.mock("./UnifiedSelector", () => ({
   ),
 }));
 
-vi.mock("../../../tag_management/TagSelector", () => ({
+vi.mock("@/components/tag_management/TagSelector", () => ({
   default: () => <div data-testid="tag-selector">TagSelector</div>,
 }));
 
-vi.mock("../../../vector_store_management/VectorStoreSelector", () => ({
+vi.mock("@/components/vector_store_management/VectorStoreSelector", () => ({
   default: () => <div data-testid="vector-store-selector">VectorStoreSelector</div>,
 }));
 
-vi.mock("../../../guardrails/GuardrailSelector", () => ({
+vi.mock("@/components/guardrails/GuardrailSelector", () => ({
   default: () => <div data-testid="guardrail-selector">GuardrailSelector</div>,
 }));
 

ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.tsx

@@ -3,9 +3,9 @@ import { useState } from "react";
 import { ComparisonInstance } from "../CompareUI";
 import { MessageDisplay } from "./MessageDisplay";
 import { UnifiedSelector } from "./UnifiedSelector";
-import TagSelector from "../../../tag_management/TagSelector";
-import VectorStoreSelector from "../../../vector_store_management/VectorStoreSelector";
-import GuardrailSelector from "../../../guardrails/GuardrailSelector";
+import TagSelector from "@/components/tag_management/TagSelector";
+import VectorStoreSelector from "@/components/vector_store_management/VectorStoreSelector";
+import GuardrailSelector from "@/components/guardrails/GuardrailSelector";
 import { Checkbox, Divider, Popover, Slider } from "antd";
 import { SelectorOption, EndpointConfig, isAgentEndpoint, getComparisonSelection } from "../endpoint_config";
 

ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/MessageDisplay.test.tsx

@@ -1,15 +1,15 @@
 import { render } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
-import type { MessageType } from "../../chat_ui/types";
+import type { MessageType } from "@/components/chat_ui/types";
 import { MessageDisplay } from "./MessageDisplay";
 
-vi.mock("../../chat_ui/ReasoningContent", () => ({
+vi.mock("@/components/chat_ui/ReasoningContent", () => ({
   default: ({ reasoningContent }: { reasoningContent: string }) => (
     <div data-testid="reasoning-content">{reasoningContent}</div>
   ),
 }));
 
-vi.mock("../../chat_ui/ResponseMetrics", () => ({
+vi.mock("@/components/chat_ui/ResponseMetrics", () => ({
   default: () => <div data-testid="response-metrics">ResponseMetrics</div>,
 }));
 

ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/MessageDisplay.tsx

@@ -4,10 +4,10 @@ import ReactMarkdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { coy } from "react-syntax-highlighter/dist/esm/styles/prism";
 import ChatImageRenderer from "../../chat_ui/ChatImageRenderer";
-import ReasoningContent from "../../chat_ui/ReasoningContent";
-import ResponseMetrics from "../../chat_ui/ResponseMetrics";
+import ReasoningContent from "@/components/chat_ui/ReasoningContent";
+import ResponseMetrics from "@/components/chat_ui/ResponseMetrics";
 import { SearchResultsDisplay } from "../../chat_ui/SearchResultsDisplay";
-import type { MessageType } from "../../chat_ui/types";
+import type { MessageType } from "@/components/chat_ui/types";
 
 interface MessageDisplayProps {
   messages: MessageType[];

ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/endpoint_config.test.ts

@@ -12,7 +12,7 @@ import {
   getComparisonSelection,
   hasValidSelection,
 } from "./endpoint_config";
-import { Agent } from "../llm_calls/fetch_agents";
+import { Agent } from "../../llm_calls/fetch_agents";
 
 describe("endpoint_config", () => {
   it("should export EndpointId constants", () => {

ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/endpoint_config.ts

@@ -3,7 +3,7 @@
  * Add new endpoints here to extend the comparison functionality.
  */
 
-import { Agent } from "../llm_calls/fetch_agents";
+import { Agent } from "../../llm_calls/fetch_agents";
 
 // Endpoint identifiers
 export const EndpointId = {

ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx

@@ -9,7 +9,7 @@ import {
 import { getGuardrailsList, testPoliciesAndGuardrails } from "@/components/networking";
 import PolicySelector, { getPolicyOptionEntries } from "@/components/policies/PolicySelector";
 import { Policy } from "@/components/policies/types";
-import { makeOpenAIChatCompletionRequest } from "../llm_calls/chat_completion";
+import { makeOpenAIChatCompletionRequest } from "@/components/llm_calls/chat_completion";
 import {
   AlertTriangle,
   BarChart3,

ui/litellm-dashboard/src/app/(dashboard)/playground/hooks/useChatHistory.ts

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from "react";
-import { MessageType, A2ATaskMetadata } from "./types";
-import { TokenUsage } from "./ResponseMetrics";
-import { MCPEvent } from "../../mcp_tools/types";
-import { truncateString } from "../../../utils/textUtils";
+import { MessageType, A2ATaskMetadata } from "@/components/chat_ui/types";
+import { TokenUsage } from "@/components/chat_ui/ResponseMetrics";
+import { MCPEvent } from "@/components/mcp_tools/types";
+import { truncateString } from "@/utils/textUtils";
 
 export interface UseChatHistoryReturn {
   // State

ui/litellm-dashboard/src/app/(dashboard)/playground/hooks/useCodeInterpreter.ts

@@ -4,7 +4,7 @@
  */
 
 import { useState, useCallback } from "react";
-import { CodeInterpreterResult } from "../llm_calls/code_interpreter_handler";
+import { CodeInterpreterResult } from "@/components/llm_calls/code_interpreter_handler";
 
 export interface UseCodeInterpreterReturn {
   // State
@@ -54,4 +54,4 @@ export function useCodeInterpreter(): UseCodeInterpreterReturn {
 }
 
 // Re-export the type for convenience
-export type { CodeInterpreterResult } from "../llm_calls/code_interpreter_handler";
+export type { CodeInterpreterResult } from "@/components/llm_calls/code_interpreter_handler";

ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/a2a_send_message.tsx

@@ -2,8 +2,8 @@
 // A2A Protocol (JSON-RPC 2.0) implementation for sending messages to agents
 
 import { v4 as uuidv4 } from "uuid";
-import { getProxyBaseUrl, getGlobalLitellmHeaderName } from "../../networking";
-import { A2ATaskMetadata } from "../chat_ui/types";
+import { getProxyBaseUrl, getGlobalLitellmHeaderName } from "@/components/networking";
+import { A2ATaskMetadata } from "@/components/chat_ui/types";
 
 interface A2AMessagePart {
   kind: "text";

ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/anthropic_messages.tsx

@@ -1,6 +1,6 @@
 import Anthropic from "@anthropic-ai/sdk";
-import { MessageType } from "../chat_ui/types";
-import { TokenUsage } from "../chat_ui/ResponseMetrics";
+import { MessageType } from "@/components/chat_ui/types";
+import { TokenUsage } from "@/components/chat_ui/ResponseMetrics";
 import { getProxyBaseUrl } from "@/components/networking";
 import NotificationManager from "@/components/molecules/notifications_manager";
 

ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/audio_speech.tsx

@@ -1,7 +1,7 @@
 import openai from "openai";
 import { getProxyBaseUrl } from "@/components/networking";
 import NotificationManager from "@/components/molecules/notifications_manager";
-import type { OpenAIVoice } from "../chat_ui/chatConstants";
+import type { OpenAIVoice } from "../components/chat_ui/chatConstants";
 
 export async function makeOpenAIAudioSpeechRequest(
   input: string,

ui/litellm-dashboard/src/app/(dashboard)/playground/llm_calls/fetch_agents.tsx

@@ -1,6 +1,6 @@
 // fetch_agents.tsx
 
-import { getProxyBaseUrl, getGlobalLitellmHeaderName, modelInfoCall } from "../../networking";
+import { getProxyBaseUrl, getGlobalLitellmHeaderName, modelInfoCall } from "@/components/networking";
 
 export interface Agent {
   agent_id: string;

ui/litellm-dashboard/src/app/(dashboard)/playground/page.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import AgentBuilderView from "@/components/playground/chat_ui/AgentBuilderView";
-import ChatUI from "@/components/playground/chat_ui/ChatUI";
-import CompareUI from "@/components/playground/compareUI/CompareUI";
-import ComplianceUI from "@/components/playground/complianceUI/ComplianceUI";
+import AgentBuilderView from "@/app/(dashboard)/playground/components/chat_ui/AgentBuilderView";
+import ChatUI from "@/app/(dashboard)/playground/components/chat_ui/ChatUI";
+import CompareUI from "@/app/(dashboard)/playground/components/compareUI/CompareUI";
+import ComplianceUI from "@/app/(dashboard)/playground/components/complianceUI/ComplianceUI";
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@tremor/react";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { fetchProxySettings } from "@/utils/proxyUtils";

ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.test.tsx

@@ -33,7 +33,7 @@ vi.mock("./pricing_calculator/index", () => ({
   default: () => <div data-testid="pricing-calculator">Pricing Calculator</div>,
 }));
 
-vi.mock("../playground/llm_calls/fetch_models", () => ({
+vi.mock("@/components/llm_calls/fetch_models", () => ({
   fetchAvailableModels: vi.fn().mockResolvedValue([]),
 }));
 

ui/litellm-dashboard/src/components/CostTrackingSettings/cost_tracking_settings.tsx

@@ -24,7 +24,7 @@ import { DocsMenu } from "../HelpLink";
 import HowItWorks from "./how_it_works";
 import { useDiscountConfig } from "./use_discount_config";
 import { useMarginConfig } from "./use_margin_config";
-import { fetchAvailableModels, ModelGroup } from "../playground/llm_calls/fetch_models";
+import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models";
 
 const DOCS_LINKS = [
   { label: "Custom pricing for models", href: "https://docs.litellm.ai/docs/proxy/custom_pricing" },

ui/litellm-dashboard/src/components/GuardrailsMonitor/EvaluationSettingsModal.tsx

@@ -1,7 +1,7 @@
 import { CloseOutlined, PlayCircleOutlined } from "@ant-design/icons";
 import { Button, Modal, Select, Input } from "antd";
 import React, { useEffect, useState } from "react";
-import { fetchAvailableModels, type ModelGroup } from "@/components/playground/llm_calls/fetch_models";
+import { fetchAvailableModels, type ModelGroup } from "@/components/llm_calls/fetch_models";
 
 const DEFAULT_PROMPT = `Evaluate whether this guardrail's decision was correct.
 Analyze the user input, the guardrail action taken, and determine if it was appropriate.

ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.test.tsx

@@ -14,7 +14,7 @@ vi.mock("@/app/(dashboard)/hooks/mcpSemanticFilterSettings/useUpdateMCPSemanticF
   useUpdateMCPSemanticFilterSettings: vi.fn(),
 }));
 
-vi.mock("@/components/playground/llm_calls/fetch_models", () => ({
+vi.mock("@/components/llm_calls/fetch_models", () => ({
   fetchAvailableModels: vi.fn().mockResolvedValue([]),
 }));
 

ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.tsx

@@ -21,7 +21,7 @@ import {
 } from "antd";
 import { QuestionCircleOutlined, CheckCircleOutlined, SaveOutlined } from "@ant-design/icons";
 import { useEffect, useState } from "react";
-import { fetchAvailableModels, ModelGroup } from "@/components/playground/llm_calls/fetch_models";
+import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models";
 import MCPSemanticFilterTestPanel from "./MCPSemanticFilterTestPanel";
 import { getCurlCommand, runSemanticFilterTest, TestResult } from "./semanticFilterTestUtils";
 

ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/AddFallbacks.test.tsx

@@ -2,9 +2,9 @@ import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import AddFallbacks, { Fallbacks } from "./AddFallbacks";
-import * as fetchModelsModule from "../../../playground/llm_calls/fetch_models";
+import * as fetchModelsModule from "@/components/llm_calls/fetch_models";
 
-vi.mock("../../../playground/llm_calls/fetch_models", () => ({
+vi.mock("@/components/llm_calls/fetch_models", () => ({
   fetchAvailableModels: vi.fn(),
 }));
 

ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/AddFallbacks.tsx

@@ -9,7 +9,7 @@ import { Button } from "antd";
 import React, { useEffect, useState } from "react";
 import MessageManager from "@/components/molecules/message_manager";
 import NotificationManager from "../../../molecules/notifications_manager";
-import { fetchAvailableModels, ModelGroup } from "../../../playground/llm_calls/fetch_models";
+import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models";
 import { AddFallbacksModal } from "./AddFallbacksModal";
 import { FallbackGroup } from "./FallbackGroupConfig";
 import { FallbackSelectionForm } from "./FallbackSelectionForm";

ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.test.tsx

@@ -3,14 +3,14 @@ import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import Fallbacks from "./Fallbacks";
 import * as networkingModule from "../../../networking";
-import * as fetchModelsModule from "../../../playground/llm_calls/fetch_models";
+import * as fetchModelsModule from "@/components/llm_calls/fetch_models";
 
 vi.mock("../../../networking", () => ({
   getCallbacksCall: vi.fn(),
   setCallbacksCall: vi.fn(),
 }));
 
-vi.mock("../../../playground/llm_calls/fetch_models", () => ({
+vi.mock("@/components/llm_calls/fetch_models", () => ({
   fetchAvailableModels: vi.fn(),
 }));
 

ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx

@@ -1,7 +1,7 @@
 import { InfoCircleOutlined } from "@ant-design/icons";
 import { Select as AntdSelect, Card, Divider, Space, Tooltip, Typography } from "antd";
 import React from "react";
-import { ModelGroup } from "../playground/llm_calls/fetch_models";
+import { ModelGroup } from "@/components/llm_calls/fetch_models";
 
 const { Text } = Typography;
 

ui/litellm-dashboard/src/components/add_model/RouterConfigBuilder.tsx

@@ -14,7 +14,7 @@ import {
   Typography,
 } from "antd";
 import React, { useEffect, useState } from "react";
-import { ModelGroup } from "../playground/llm_calls/fetch_models";
+import { ModelGroup } from "@/components/llm_calls/fetch_models";
 
 const { Text } = Typography;
 

ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx

@@ -6,7 +6,7 @@ import { modelAvailableCall } from "../networking";
 import ConnectionErrorDisplay from "./model_connection_test";
 import { all_admin_roles } from "@/utils/roles";
 import { handleAddAutoRouterSubmit } from "./handle_add_auto_router_submit";
-import { fetchAvailableModels, ModelGroup } from "../playground/llm_calls/fetch_models";
+import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models";
 import RouterConfigBuilder from "./RouterConfigBuilder";
 import ComplexityRouterConfig from "./ComplexityRouterConfig";
 import NotificationManager from "../molecules/notifications_manager";

ui/litellm-dashboard/src/components/cache_settings/CacheFieldRenderer.tsx

@@ -4,7 +4,7 @@ import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { NumberInput, TextInput } from "@tremor/react";
 import { Select } from "antd";
 import React, { useEffect, useState } from "react";
-import { fetchAvailableModels, ModelGroup } from "../playground/llm_calls/fetch_models";
+import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models";
 import NumericalInput from "../shared/numerical_input";
 
 interface CacheFieldRendererProps {

ui/litellm-dashboard/src/components/chat/ChatMessages.tsx

@@ -7,8 +7,8 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { coy } from "react-syntax-highlighter/dist/esm/styles/prism";
-import ReasoningContent from "../playground/chat_ui/ReasoningContent";
-import MCPEventsDisplay from "../playground/chat_ui/MCPEventsDisplay";
+import ReasoningContent from "@/components/chat_ui/ReasoningContent";
+import MCPEventsDisplay from "@/components/chat_ui/MCPEventsDisplay";
 import { ChatMessage } from "./types";
 
 const { Panel } = Collapse;

ui/litellm-dashboard/src/components/chat/ChatPage.tsx

@@ -27,9 +27,9 @@ import ChatMessages from "./ChatMessages";
 import MCPConnectPicker from "./MCPConnectPicker";
 import MCPAppsPanel from "./MCPAppsPanel";
 import MCPCredentialsTab from "./MCPCredentialsTab";
-import { fetchAvailableModels } from "../playground/llm_calls/fetch_models";
-import { makeOpenAIChatCompletionRequest } from "../playground/llm_calls/chat_completion";
-import { makeOpenAIResponsesRequest } from "../playground/llm_calls/responses_api";
+import { fetchAvailableModels } from "@/components/llm_calls/fetch_models";
+import { makeOpenAIChatCompletionRequest } from "@/components/llm_calls/chat_completion";
+import { makeOpenAIResponsesRequest } from "@/components/llm_calls/responses_api";
 import type { MCPEvent } from "./types";
 import { getProxyBaseUrl } from "@/components/networking";
 import { useUIConfig } from "@/app/(dashboard)/hooks/uiConfig/useUIConfig";

ui/litellm-dashboard/src/components/chat_ui/CodeSnippets.tsx

@@ -1,6 +1,6 @@
 import { MessageType } from "./types";
 import { EndpointType } from "./mode_endpoint_mapping";
-import { MCPServer } from "../../mcp_tools/types";
+import { MCPServer } from "@/components/mcp_tools/types";
 
 interface CodeGenMetadata {
   tags?: string[];

ui/litellm-dashboard/src/components/chat_ui/MCPEventsDisplay.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Typography, Collapse } from "antd";
-import type { MCPEvent } from "../../mcp_tools/types";
+import type { MCPEvent } from "@/components/mcp_tools/types";
 
 const { Text } = Typography;
 const { Panel } = Collapse;

ui/litellm-dashboard/src/components/common_components/ModelSelector.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import { TextInput, Text } from "@tremor/react";
 import { Select } from "antd";
 import { RobotOutlined } from "@ant-design/icons";
-import { fetchAvailableModels, ModelGroup } from "../playground/llm_calls/fetch_models";
+import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models";
 
 interface ModelSelectorProps {
   accessToken: string;

ui/litellm-dashboard/src/components/common_components/RouterSettingsAccordion.tsx

@@ -5,7 +5,7 @@ import RouterSettingsForm, { RouterSettingsFormValue } from "../router_settings/
 import { Fallbacks } from "../Settings/RouterSettings/Fallbacks/AddFallbacks";
 import { FallbackSelectionForm } from "../Settings/RouterSettings/Fallbacks/FallbackSelectionForm";
 import { FallbackGroup } from "../Settings/RouterSettings/Fallbacks/FallbackGroupConfig";
-import { fetchAvailableModels, ModelGroup } from "../playground/llm_calls/fetch_models";
+import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models";
 
 export interface RouterSettingsAccordionValue {
   router_settings: {

ui/litellm-dashboard/src/components/edit_auto_router/edit_auto_router_modal.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Modal, Form, Button, Select as AntdSelect } from "antd";
 import { Text, TextInput } from "@tremor/react";
 import { modelAvailableCall, modelPatchUpdateCall } from "../networking";
-import { fetchAvailableModels, ModelGroup } from "../playground/llm_calls/fetch_models";
+import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models";
 import RouterConfigBuilder from "../add_model/RouterConfigBuilder";
 import NotificationsManager from "../molecules/notifications_manager";
 

ui/litellm-dashboard/src/components/llm_calls/chat_completion.tsx

@@ -3,7 +3,7 @@ import { ChatCompletionMessageParam } from "openai/resources/chat/completions";
 import { TokenUsage } from "../chat_ui/ResponseMetrics";
 import { VectorStoreSearchResponse } from "../chat_ui/types";
 import { getProxyBaseUrl } from "@/components/networking";
-import { MCPServer, MCPToolset, type MCPEvent } from "../../mcp_tools/types";
+import { MCPServer, MCPToolset, type MCPEvent } from "@/components/mcp_tools/types";
 
 export async function makeOpenAIChatCompletionRequest(
   chatHistory: { role: string; content: string | any[] }[],

ui/litellm-dashboard/src/components/llm_calls/fetch_models.tsx

@@ -1,6 +1,6 @@
 // fetch_models.ts
 
-import { modelHubCall } from "../../networking";
+import { modelHubCall } from "@/components/networking";
 
 export interface ModelGroup {
   model_group: string;

ui/litellm-dashboard/src/components/llm_calls/responses_api.tsx

@@ -3,8 +3,8 @@ import { MessageType } from "../chat_ui/types";
 import { TokenUsage } from "../chat_ui/ResponseMetrics";
 import { getProxyBaseUrl } from "@/components/networking";
 import NotificationManager from "@/components/molecules/notifications_manager";
-import type { MCPEvent } from "../../mcp_tools/types";
-import { MCPServer, MCPToolset } from "../../mcp_tools/types";
+import type { MCPEvent } from "@/components/mcp_tools/types";
+import { MCPServer, MCPToolset } from "@/components/mcp_tools/types";
 import {
   CodeInterpreterResult,
   CodeInterpreterState,

ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/MessageBubble.tsx

@@ -3,7 +3,7 @@ import { RobotOutlined, UserOutlined } from "@ant-design/icons";
 import ReactMarkdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { coy } from "react-syntax-highlighter/dist/esm/styles/prism";
-import ResponseMetrics from "../../../playground/chat_ui/ResponseMetrics";
+import ResponseMetrics from "@/components/chat_ui/ResponseMetrics";
 import { Message } from "./types";
 
 interface MessageBubbleProps {

ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/types.ts

@@ -1,4 +1,4 @@
-import { TokenUsage } from "../../../playground/chat_ui/ResponseMetrics";
+import { TokenUsage } from "@/components/chat_ui/ResponseMetrics";
 
 export interface Message {
   role: string;

ui/litellm-dashboard/src/components/prompts/prompt_editor_view/conversation_panel/useConversation.ts

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from "react";
 import NotificationsManager from "../../../molecules/notifications_manager";
-import { TokenUsage } from "../../../playground/chat_ui/ResponseMetrics";
+import { TokenUsage } from "@/components/chat_ui/ResponseMetrics";
 import { Message } from "./types";
 import { convertToDotPrompt, extractVariables } from "../utils";
 import { getProxyBaseUrl, getGlobalLitellmHeaderName } from "../../../networking";

ui/litellm-dashboard/src/components/public_model_hub.tsx

@@ -18,9 +18,9 @@ import {
 } from "./networking";
 import { Plugin } from "./claude_code_plugins/types";
 import SkillHubDashboard from "./AIHub/SkillHubDashboard";
-import { generateCodeSnippet } from "./playground/chat_ui/CodeSnippets";
-import { getEndpointType } from "./playground/chat_ui/mode_endpoint_mapping";
-import { MessageType } from "./playground/chat_ui/types";
+import { generateCodeSnippet } from "@/components/chat_ui/CodeSnippets";
+import { getEndpointType } from "@/components/chat_ui/mode_endpoint_mapping";
+import { MessageType } from "@/components/chat_ui/types";
 import { getProviderLogoAndName } from "./provider_info_helpers";
 
 const { TabPane } = Tabs;

ui/litellm-dashboard/src/components/vector_store_management/S3VectorsConfig.test.tsx

@@ -1,10 +1,10 @@
 import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import S3VectorsConfig from "./S3VectorsConfig";
-import * as fetchModels from "../playground/llm_calls/fetch_models";
+import * as fetchModels from "@/components/llm_calls/fetch_models";
 
 // Mock fetchAvailableModels
-vi.mock("../playground/llm_calls/fetch_models", () => ({
+vi.mock("@/components/llm_calls/fetch_models", () => ({
   fetchAvailableModels: vi.fn(),
 }));