Merge pull request #40312 from BerriAI/litellm_dashboard_deps_20260908

chore(ui): update dashboard dependencies

.github/workflows/test-litellm-ui-unit.yml

@@ -66,7 +66,7 @@ jobs:
           BASE_SHA: ${{ github.event.pull_request.base.sha }}
           HEAD_SHA: ${{ github.event.pull_request.head.sha }}
         run: |
-          full_suite() { npm run test -- --run --pool forks --poolOptions.forks.maxForks=14; }
+          full_suite() { npm run test -- --run --pool forks --maxWorkers=14; }
 
           if [ -z "$BASE_SHA" ]; then
             echo "Push to $GITHUB_REF_NAME: running the full suite"
@@ -95,4 +95,4 @@ jobs:
 
           echo "Pull request: running tests related to ${#changed_files[@]} changed UI files"
           npm run test -- related "${changed_files[@]}" --run --passWithNoTests \
-            --pool forks --poolOptions.forks.maxForks=14
+            --pool forks --maxWorkers=14

tests/test_litellm/test_select_ui_test_scope.py

@@ -29,7 +29,7 @@ SCOPE_SCRIPT = REPO_ROOT / ".github" / "scripts" / "select_ui_test_scope.sh"
 WORKFLOW = REPO_ROOT / ".github" / "workflows" / "test-litellm-ui-unit.yml"
 STEP_NAME = "Run UI unit tests (Vitest)"
 
-FULL_SUITE_ARGV = ["run", "test", "--", "--run", "--pool", "forks", "--poolOptions.forks.maxForks=14"]
+FULL_SUITE_ARGV = ["run", "test", "--", "--run", "--pool", "forks", "--maxWorkers=14"]
 
 NON_SRC_FILES = [
     "package.json",
@@ -135,7 +135,7 @@ def _related_argv(changed: list[str]) -> list[str]:
         "--passWithNoTests",
         "--pool",
         "forks",
-        "--poolOptions.forks.maxForks=14",
+        "--maxWorkers=14",
     ]
 
 

ui/litellm-dashboard/next.config.mjs

@@ -7,6 +7,9 @@ const __dirname = path.dirname(__filename);
 
 const nextConfig = {
   output: "export",
+  experimental: {
+    useTypeScriptCli: false,
+  },
   compiler: {
     removeConsole: process.env.NODE_ENV === "production" ? { exclude: ["error", "warn"] } : false,
   },

ui/litellm-dashboard/package.json

@@ -40,7 +40,7 @@
     "jwt-decode": "4.0.0",
     "lucide-react": "0.513.0",
     "moment": "2.30.1",
-    "next": "16.2.11",
+    "next": "16.3.3",
     "next-themes": "^0.4.6",
     "nuqs": "^2.9.4",
     "openai": "4.104.0",
@@ -74,10 +74,10 @@
     "@types/react-copy-to-clipboard": "5.0.7",
     "@types/react-dom": "19.2.4",
     "@types/react-syntax-highlighter": "15.5.13",
-    "@vitest/coverage-v8": "3.2.6",
-    "@vitest/ui": "3.2.6",
+    "@vitest/coverage-v8": "4.1.11",
+    "@vitest/ui": "4.1.11",
     "eslint": "9.39.2",
-    "eslint-config-next": "16.2.11",
+    "eslint-config-next": "16.3.3",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-jest-dom": "5.10.1",
     "eslint-plugin-testing-library": "7.16.2",
@@ -91,11 +91,12 @@
     "tw-animate-css": "1.4.0",
     "typescript": "5.9.3",
     "typescript-eslint": "8.60.1",
-    "vitest": "3.2.6"
+    "vite": "7.3.5",
+    "vitest": "4.1.11"
   },
   "overrides": {
     "prismjs": "1.30.0",
-    "js-yaml": "4.3.1",
+    "js-yaml": "4.3.2",
     "brace-expansion": "5.0.9",
     "glob": "13.0.0",
     "minimatch": "10.2.4",
@@ -104,7 +105,7 @@
     "axios": "1.13.6",
     "postcss": "8.5.23",
     "esbuild": "0.28.1",
-    "sharp": "^0.35.0"
+    "sharp": "^0.35.4"
   },
   "engines": {
     "node": ">=24.14.1",

ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/access-group-create/AccessGroupCreateDialog.test.tsx

@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it, vi, type Mock } from "vitest";
 
 vi.mock("@/components/ModelSelect/ModelSelect", () => ({
   ModelSelect: ({ onChange }: { onChange: (values: string[]) => void }) => (
@@ -32,7 +32,7 @@ const Harness = ({ createAccessGroup }: { createAccessGroup: (body: unknown) =>
   );
 };
 
-const renderDialog = (overrides?: { createAccessGroup?: ReturnType<typeof vi.fn> }) => {
+const renderDialog = (overrides?: { createAccessGroup?: Mock }) => {
   const createAccessGroup = overrides?.createAccessGroup ?? vi.fn().mockResolvedValue({});
   const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
   render(

ui/litellm-dashboard/src/app/(dashboard)/hooks/cloudzero/useCloudZeroCreate.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { describe, it, expect, vi, beforeEach, afterEach, type Mock } from "vitest";
 import { renderHook, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React, { ReactNode } from "react";
@@ -28,7 +28,7 @@ vi.mock("@/components/networking", () => ({
 
 describe("useCloudZeroCreate", () => {
   let queryClient: QueryClient;
-  let fetchSpy: ReturnType<typeof vi.fn>;
+  let fetchSpy: Mock;
 
   beforeEach(() => {
     queryClient = new QueryClient({

ui/litellm-dashboard/src/app/(dashboard)/hooks/cloudzero/useCloudZeroDryRun.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { describe, it, expect, vi, beforeEach, afterEach, type Mock } from "vitest";
 import { renderHook, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React, { ReactNode } from "react";
@@ -28,7 +28,7 @@ vi.mock("@/components/networking", () => ({
 
 describe("useCloudZeroDryRun", () => {
   let queryClient: QueryClient;
-  let fetchSpy: ReturnType<typeof vi.fn>;
+  let fetchSpy: Mock;
 
   beforeEach(() => {
     queryClient = new QueryClient({

ui/litellm-dashboard/src/app/(dashboard)/hooks/cloudzero/useCloudZeroExport.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { describe, it, expect, vi, beforeEach, afterEach, type Mock } from "vitest";
 import { renderHook, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React, { ReactNode } from "react";
@@ -28,7 +28,7 @@ vi.mock("@/components/networking", () => ({
 
 describe("useCloudZeroExport", () => {
   let queryClient: QueryClient;
-  let fetchSpy: ReturnType<typeof vi.fn>;
+  let fetchSpy: Mock;
 
   beforeEach(() => {
     queryClient = new QueryClient({

ui/litellm-dashboard/src/app/(dashboard)/hooks/cloudzero/useCloudZeroSettings.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { describe, it, expect, vi, beforeEach, afterEach, type Mock } from "vitest";
 import { renderHook, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React, { ReactNode } from "react";
@@ -54,7 +54,7 @@ const mockCloudZeroSettings: CloudZeroSettings = {
 
 describe("useCloudZeroSettings", () => {
   let queryClient: QueryClient;
-  let fetchSpy: ReturnType<typeof vi.fn>;
+  let fetchSpy: Mock;
 
   beforeEach(() => {
     queryClient = new QueryClient({
@@ -69,6 +69,7 @@ describe("useCloudZeroSettings", () => {
     });
 
     vi.clearAllMocks();
+    mockGetProxyBaseUrl.mockReset();
 
     fetchSpy = vi.fn();
     global.fetch = fetchSpy;
@@ -240,7 +241,7 @@ describe("useCloudZeroSettings", () => {
 
 describe("useCloudZeroUpdateSettings", () => {
   let queryClient: QueryClient;
-  let fetchSpy: ReturnType<typeof vi.fn>;
+  let fetchSpy: Mock;
 
   beforeEach(() => {
     queryClient = new QueryClient({
@@ -255,6 +256,7 @@ describe("useCloudZeroUpdateSettings", () => {
     });
 
     vi.clearAllMocks();
+    mockGetProxyBaseUrl.mockReset();
 
     fetchSpy = vi.fn();
     global.fetch = fetchSpy;
@@ -481,7 +483,7 @@ describe("useCloudZeroUpdateSettings", () => {
 
 describe("useCloudZeroDeleteSettings", () => {
   let queryClient: QueryClient;
-  let fetchSpy: ReturnType<typeof vi.fn>;
+  let fetchSpy: Mock;
 
   beforeEach(() => {
     queryClient = new QueryClient({
@@ -496,6 +498,7 @@ describe("useCloudZeroDeleteSettings", () => {
     });
 
     vi.clearAllMocks();
+    mockGetProxyBaseUrl.mockReset();
 
     fetchSpy = vi.fn();
     global.fetch = fetchSpy;

ui/litellm-dashboard/src/app/(dashboard)/hooks/proxyConfig/useProxyConfig.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { describe, it, expect, vi, beforeEach, afterEach, type Mock } from "vitest";
 import { renderHook, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React, { ReactNode } from "react";
@@ -109,7 +109,7 @@ vi.mock("../common/queryKeysFactory", () => ({
 
 describe("useProxyConfig", () => {
   let queryClient: QueryClient;
-  let fetchSpy: ReturnType<typeof vi.fn>;
+  let fetchSpy: Mock;
 
   beforeEach(() => {
     queryClient = new QueryClient({
@@ -277,7 +277,7 @@ describe("useProxyConfig", () => {
 
 describe("useDeleteProxyConfigField", () => {
   let queryClient: QueryClient;
-  let fetchSpy: ReturnType<typeof vi.fn>;
+  let fetchSpy: Mock;
 
   beforeEach(() => {
     queryClient = new QueryClient({
@@ -452,7 +452,7 @@ describe("useDeleteProxyConfigField", () => {
 });
 
 describe("getProxyConfigCall", () => {
-  let fetchSpy: ReturnType<typeof vi.fn>;
+  let fetchSpy: Mock;
   let consoleErrorSpy: ReturnType<typeof vi.spyOn>;
 
   beforeEach(() => {
@@ -508,7 +508,7 @@ describe("getProxyConfigCall", () => {
 });
 
 describe("deleteProxyConfigFieldCall", () => {
-  let fetchSpy: ReturnType<typeof vi.fn>;
+  let fetchSpy: Mock;
   let consoleErrorSpy: ReturnType<typeof vi.spyOn>;
 
   beforeEach(() => {

ui/litellm-dashboard/src/app/(dashboard)/hooks/storeModelInDB/useStoreModelInDB.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { describe, it, expect, vi, beforeEach, afterEach, type Mock } from "vitest";
 import { renderHook, waitFor } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React, { ReactNode } from "react";
@@ -11,7 +11,7 @@ vi.mock("@/components/networking", () => ({
 
 describe("useStoreModelInDB", () => {
   let queryClient: QueryClient;
-  let fetchSpy: ReturnType<typeof vi.fn>;
+  let fetchSpy: Mock;
 
   beforeEach(() => {
     queryClient = new QueryClient({

ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/ToolTestPanel.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import type { UserEvent } from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it, vi, type Mock } from "vitest";
 
 import { ToolTestPanel } from "./ToolTestPanel";
 import { InputSchema, MCPTool } from "@/components/mcp_tools/types";
@@ -341,7 +341,7 @@ describe("ToolTestPanel argument payload", () => {
 });
 
 describe("ToolTestPanel schema changes under a stable tool name", () => {
-  const renderWith = (schema: InputSchema, onSubmit: ReturnType<typeof vi.fn>) => (
+  const renderWith = (schema: InputSchema, onSubmit: Mock) => (
     <ToolTestPanel
       tool={buildTool(schema)}
       onSubmit={onSubmit}

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

@@ -9,7 +9,9 @@ vi.mock("@/components/networking", () => ({
 const mockMessagesStream = vi.fn();
 
 vi.mock("@anthropic-ai/sdk", () => ({
-  default: vi.fn(() => ({ messages: { stream: mockMessagesStream } })),
+  default: vi.fn(function () {
+    return { messages: { stream: mockMessagesStream } };
+  }),
 }));
 
 describe("anthropic_messages prompt cache usage", () => {

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

@@ -20,13 +20,15 @@ describe("audio_speech", () => {
     });
 
     // Mock the OpenAI constructor and its methods
-    (OpenAI as any).mockImplementation(() => ({
-      audio: {
-        speech: {
-          create: mockCreate,
+    (OpenAI as any).mockImplementation(function () {
+      return {
+        audio: {
+          speech: {
+            create: mockCreate,
+          },
         },
-      },
-    }));
+      };
+    });
   });
 
   afterEach(() => {

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

@@ -16,13 +16,15 @@ describe("audio_transcription", () => {
     });
 
     // Mock the OpenAI constructor and its methods
-    (OpenAI as any).mockImplementation(() => ({
-      audio: {
-        transcriptions: {
-          create: mockCreate,
+    (OpenAI as any).mockImplementation(function () {
+      return {
+        audio: {
+          transcriptions: {
+            create: mockCreate,
+          },
         },
-      },
-    }));
+      };
+    });
   });
 
   afterEach(() => {

ui/litellm-dashboard/src/app/(dashboard)/users/_components/default-user-settings/DefaultUserSettingsForm.test.tsx

@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi, type Mock } from "vitest";
 
 vi.mock("@/app/(dashboard)/hooks/teams/useTeams", () => ({
   useInfiniteTeams: () => ({
@@ -65,10 +65,7 @@ const SAVED_BODY = {
   teams: [{ team_id: "team-alpha", max_budget_in_team: 25, user_role: "user" }],
 };
 
-const renderForm = (overrides?: {
-  fetchSettings?: ReturnType<typeof vi.fn>;
-  updateSettings?: ReturnType<typeof vi.fn>;
-}) => {
+const renderForm = (overrides?: { fetchSettings?: Mock; updateSettings?: Mock }) => {
   const fetchSettings = overrides?.fetchSettings ?? vi.fn().mockResolvedValue(SETTINGS);
   const updateSettings = overrides?.updateSettings ?? vi.fn().mockResolvedValue(undefined);
   const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });

ui/litellm-dashboard/src/app/(dashboard)/users/_components/view_users/UsersTable.test.tsx

@@ -3,7 +3,7 @@ import type { PaginationState, RowSelectionState, SortingState } from "@tanstack
 import { render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { useState } from "react";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it, vi, type Mock } from "vitest";
 
 import { UserInfo } from "@/components/networking";
 
@@ -39,7 +39,7 @@ interface HarnessOverrides {
   onUserClick?: (userId: string, openInEditMode?: boolean) => void;
   onDeleteUser?: (user: UserInfo) => void;
   onResetPassword?: (userId: string) => void;
-  onSortingChange?: ReturnType<typeof vi.fn>;
+  onSortingChange?: Mock;
 }
 
 /**

ui/litellm-dashboard/src/components/add_model/ClassifierPromptEditor.integration.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, renderWithProviders, screen } from "../../../tests/test-utils";
 import userEvent from "@testing-library/user-event";
-import { vi } from "vitest";
+import { vi, type Mock } from "vitest";
 import ClassifierPromptEditor from "./ClassifierPromptEditor";
 import { ClassificationRubric } from "./ComplexityRouterConfig";
 vi.mock(
@@ -26,7 +26,7 @@ beforeEach(() => {
 
 interface OpenEditorOptions {
   systemPrompt?: string;
-  onChange?: ReturnType<typeof vi.fn>;
+  onChange?: Mock;
   contextWindowSize?: number;
   tierLabels?: Record<string, string>;
   classificationRubric?: ClassificationRubric;

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

@@ -1,7 +1,7 @@
 import { fireEvent, renderWithProviders, screen, within } from "../../../tests/test-utils";
 import userEvent from "@testing-library/user-event";
 import React from "react";
-import { vi } from "vitest";
+import { vi, type Mock } from "vitest";
 import ComplexityRouterConfig, { ComplexityRouterConfigValue } from "./ComplexityRouterConfig";
 vi.mock(
   "@/app/(dashboard)/hooks/autoRouter/useComplexityScorerDefaults",
@@ -1701,7 +1701,7 @@ describe("classifier vision settings", () => {
     classifier_llm_config: { model: "gpt-3.5-turbo", timeout_ms: 3000 },
   };
 
-  const VisionFixture = ({ onChange = vi.fn() }: { onChange?: ReturnType<typeof vi.fn> }) => {
+  const VisionFixture = ({ onChange = vi.fn() }: { onChange?: Mock }) => {
     const [value, setValue] = React.useState(llmValue);
     return (
       <ComplexityRouterConfig

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

@@ -20,7 +20,9 @@ const mockClient = {
 
 vi.mock("openai", () => ({
   default: {
-    OpenAI: vi.fn(() => mockClient),
+    OpenAI: vi.fn(function () {
+      return mockClient;
+    }),
   },
 }));
 

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

@@ -16,7 +16,9 @@ const mockClient = {
 
 vi.mock("openai", () => ({
   default: {
-    OpenAI: vi.fn(() => mockClient),
+    OpenAI: vi.fn(function () {
+      return mockClient;
+    }),
   },
 }));
 

ui/litellm-dashboard/src/components/organization/org-create/OrgCreateDialog.test.tsx

@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it, vi, type Mock } from "vitest";
 
 vi.mock("@/components/ModelSelect/ModelSelect", () => ({
   ModelSelect: ({ onChange }: { onChange: (values: string[]) => void }) => (
@@ -46,7 +46,7 @@ const Harness = ({ createOrganization }: { createOrganization: (body: unknown) =
   );
 };
 
-const renderDialog = (overrides?: { createOrganization?: ReturnType<typeof vi.fn> }) => {
+const renderDialog = (overrides?: { createOrganization?: Mock }) => {
   const createOrganization = overrides?.createOrganization ?? vi.fn().mockResolvedValue({});
   const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
   render(

ui/litellm-dashboard/src/components/organization/org-settings/OrgSettingsForm.test.tsx

@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it, vi, type Mock } from "vitest";
 
 vi.mock("@/components/ModelSelect/ModelSelect", () => ({
   ModelSelect: ({ onChange }: { onChange: (values: string[]) => void }) => (
@@ -67,11 +67,7 @@ const org: Organization = {
   },
 };
 
-const renderForm = (overrides?: {
-  patchOrganization?: ReturnType<typeof vi.fn>;
-  onSaved?: () => void;
-  org?: Organization;
-}) => {
+const renderForm = (overrides?: { patchOrganization?: Mock; onSaved?: () => void; org?: Organization }) => {
   const patchOrganization = overrides?.patchOrganization ?? vi.fn().mockResolvedValue({});
   const onSaved = overrides?.onSaved ?? vi.fn();
   const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });