refactor(ui): colocate the mcp-servers view, keeping the shared mcp_tools surface

ui/litellm-dashboard/eslint-suppressions.json

@@ -1502,40 +1502,40 @@
       "count": 1
     }
   },
-  "src/components/UsagePage/components/EndpointUsage/components/EndpointUsageBarChart.tsx": {
+  "src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageBarChart.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/UsagePage/components/EndpointUsage/components/EndpointUsageLineChart.tsx": {
+  "src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageLineChart.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/UsagePage/components/EndpointUsage/components/EndpointUsageTable.tsx": {
+  "src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageTable.tsx": {
     "no-nested-ternary": {
       "count": 1
     }
   },
-  "src/components/UsagePage/components/EntityUsage/EntityUsage.tsx": {
+  "src/app/(dashboard)/usage/_components/components/EntityUsage/EntityUsage.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/UsagePage/components/EntityUsage/SpendByProvider.tsx": {
+  "src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/UsagePage/components/UsageAIChatPanel.tsx": {
+  "src/app/(dashboard)/usage/_components/components/UsageAIChatPanel.tsx": {
     "no-nested-ternary": {
       "count": 1
     },
     "react-hooks/immutability": {
       "count": 1
     }
   },
-  "src/components/UsagePage/components/UsagePageView.tsx": {
+  "src/app/(dashboard)/usage/_components/components/UsagePageView.tsx": {
     "no-nested-ternary": {
       "count": 1
     },
@@ -1549,7 +1549,7 @@
       "count": 3
     }
   },
-  "src/components/UsagePage/hooks/usePaginatedDailyActivity.ts": {
+  "src/app/(dashboard)/usage/_components/hooks/usePaginatedDailyActivity.ts": {
     "react-hooks/refs": {
       "count": 1
     },
@@ -1878,17 +1878,17 @@
       "count": 1
     }
   },
-  "src/components/mcp_tools/MCPLogoSelector.test.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/MCPLogoSelector.test.tsx": {
     "unused-imports/no-unused-imports": {
       "count": 1
     }
   },
-  "src/components/mcp_tools/MCPNetworkSettings.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.tsx": {
     "react-hooks/immutability": {
       "count": 2
     }
   },
-  "src/components/mcp_tools/MCPSubmissionsTab.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/MCPSubmissionsTab.tsx": {
     "react-hooks/set-state-in-effect": {
       "count": 1
     }
@@ -1898,7 +1898,7 @@
       "count": 5
     }
   },
-  "src/components/mcp_tools/MCPToolsetsTab.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/MCPToolsetsTab.tsx": {
     "no-nested-ternary": {
       "count": 1
     },
@@ -1920,20 +1920,20 @@
       "count": 1
     }
   },
-  "src/components/mcp_tools/OAuthFormFields.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/OAuthFormFields.tsx": {
     "no-nested-ternary": {
       "count": 1
     },
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/mcp_tools/OpenAPIQuickPicker.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/OpenAPIQuickPicker.tsx": {
     "react-hooks/set-state-in-effect": {
       "count": 1
     }
   },
-  "src/components/mcp_tools/ToolTestPanel.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/ToolTestPanel.tsx": {
     "no-nested-ternary": {
       "count": 3
     },
@@ -1944,12 +1944,12 @@
       "count": 1
     }
   },
-  "src/components/mcp_tools/UserEnvVarsModal.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/UserEnvVarsModal.tsx": {
     "no-nested-ternary": {
       "count": 2
     }
   },
-  "src/components/mcp_tools/create_mcp_server.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/create_mcp_server.tsx": {
     "no-nested-ternary": {
       "count": 1
     },
@@ -1960,38 +1960,38 @@
       "count": 4
     }
   },
-  "src/components/mcp_tools/mcp_connect.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_connect.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
     "react-hooks/static-components": {
       "count": 4
     }
   },
-  "src/components/mcp_tools/mcp_connection_status.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_connection_status.tsx": {
     "no-nested-ternary": {
       "count": 3
     },
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/mcp_tools/mcp_discovery.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_discovery.tsx": {
     "react-hooks/set-state-in-effect": {
       "count": 2
     }
   },
-  "src/components/mcp_tools/mcp_server_cost_config.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_server_cost_config.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/mcp_tools/mcp_server_cost_display.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_server_cost_display.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/mcp_tools/mcp_server_edit.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_server_edit.tsx": {
     "no-nested-ternary": {
       "count": 1
     },
@@ -2005,12 +2005,12 @@
       "count": 5
     }
   },
-  "src/components/mcp_tools/mcp_server_view.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_server_view.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/mcp_tools/mcp_servers.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_servers.tsx": {
     "no-nested-ternary": {
       "count": 1
     },
@@ -2021,12 +2021,12 @@
       "count": 2
     }
   },
-  "src/components/mcp_tools/mcp_tool_configuration.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_tool_configuration.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/mcp_tools/mcp_tools.tsx": {
+  "src/app/(dashboard)/mcp-servers/_components/mcp_tools.tsx": {
     "no-nested-ternary": {
       "count": 1
     },
@@ -2558,4 +2558,4 @@
       "count": 1
     }
   }
-}
+}

ui/litellm-dashboard/src/components/mcp_tools/DcrBridgeToggle.tsx → ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/DcrBridgeToggle.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Form, Switch, Tooltip } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
-import { isClientForwardedTokenMode } from "./types";
+import { isClientForwardedTokenMode } from "@/components/mcp_tools/types";
 
 /**
  * DCR-bridge toggle for the client-forwarded token modes (true_passthrough /

ui/litellm-dashboard/src/components/mcp_tools/MCPNetworkSettings.tsx → ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.tsx

@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from "react";
 import { Select, Button, Card, Typography, Spin, Tag } from "antd";
 import { SaveOutlined, PlusOutlined } from "@ant-design/icons";
-import { DeprecationBanner } from "../DeprecationBanner";
+import { DeprecationBanner } from "@/components/DeprecationBanner";
 import {
   getGeneralSettingsCall,
   updateConfigFieldSetting,
   deleteConfigFieldSetting,
   fetchMCPClientIp,
-} from "../networking";
+} from "@/components/networking";
 
 const { Text } = Typography;
 
@@ -33,7 +33,7 @@
   useEffect(() => {
     loadSettings();
     detectCurrentIp();
   }, [accessToken]);
 
   const loadSettings = async () => {
     if (!accessToken) return;

ui/litellm-dashboard/src/components/mcp_tools/MCPPermissionManagement.tsx → ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPPermissionManagement.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { Alert, Form, Select, Tooltip, Collapse, Input, Space, Button, Switch } from "antd";
 import { InfoCircleOutlined, MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
-import { MCPServer, AUTH_TYPE } from "./types";
+import { MCPServer, AUTH_TYPE } from "@/components/mcp_tools/types";
 const { Panel } = Collapse;
 
 interface MCPPermissionManagementProps {
@@ -21,7 +21,7 @@
   searchValue,
   setSearchValue,
   getAccessGroupOptions,
 }) => {
   const form = Form.useFormInstance();
   const watchedAuthType = Form.useWatch("auth_type", form);
   const isOAuth2 = watchedAuthType === AUTH_TYPE.OAUTH2;

ui/litellm-dashboard/src/components/mcp_tools/MCPServerCard.test.tsx → ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPServerCard.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 import { describe, it, expect, vi } from "vitest";
 import MCPServerCard from "./MCPServerCard";
-import type { MCPServer } from "./types";
+import type { MCPServer } from "@/components/mcp_tools/types";
 
 const baseServer: MCPServer = {
   server_id: "srv-1",

ui/litellm-dashboard/src/components/mcp_tools/MCPServerCard.tsx → ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPServerCard.tsx

@@ -8,7 +8,7 @@
   MoreOutlined,
   ThunderboltOutlined,
 } from "@ant-design/icons";
-import { AUTH_TYPE, type MCPServer } from "./types";
+import { AUTH_TYPE, type MCPServer } from "@/components/mcp_tools/types";
 import { getMaskedAndFullUrl } from "./utils";
 
 const { Text } = Typography;
@@ -47,7 +47,7 @@
   onByokConnect,
   onOpenFillFields,
   onDelete,
 }) => {
   const alias = server.alias || server.server_name || "";
   const name = server.server_name || alias || server.server_id;
   // Logo is sourced exclusively from the admin-set `mcp_info.logo_url`.
@@ -108,7 +108,7 @@
 
   const menuItems: MenuProps["items"] = [];
   if (onRecheckHealth) {
     menuItems.push({
       key: "test-connection",
       label: "Test Connection",
       icon: <ThunderboltOutlined />,
@@ -123,7 +123,7 @@
     if (menuItems.length > 0) {
       menuItems.push({ key: "divider", type: "divider" });
     }
     menuItems.push({
       key: "delete",
       label: "Delete",
       icon: <DeleteOutlined />,
@@ -149,7 +149,7 @@
     >
       <div className="flex items-start gap-3">
         {logoUrl ? (
           <img
             src={logoUrl}
             alt={`${name} logo`}
             className="h-10 w-10 shrink-0 rounded-sm object-contain"

ui/litellm-dashboard/src/components/mcp_tools/MCPStandardsSettings.test.tsx → ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPStandardsSettings.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { FIELD_GROUPS, MCP_REQUIRED_FIELD_DEFS, SETTINGS_KEY } from "./MCPStandardsSettings";
-import { MCPServer } from "./types";
+import { MCPServer } from "@/components/mcp_tools/types";
 
 const makeServer = (overrides: Partial<MCPServer> = {}): MCPServer => ({
   server_id: "s1",

ui/litellm-dashboard/src/components/mcp_tools/MCPStandardsSettings.tsx → ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPStandardsSettings.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { MCPServer } from "./types";
+import { MCPServer } from "@/components/mcp_tools/types";
 
 export interface RequiredFieldDef {
   key: string;

ui/litellm-dashboard/src/components/mcp_tools/MCPSubmissionsTab.tsx → ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPSubmissionsTab.tsx

@@ -18,7 +18,7 @@
   getGeneralSettingsCall,
   updateConfigFieldSetting,
 } from "@/components/networking";
-import { MCPServer, MCPSubmissionsSummary } from "./types";
+import { MCPServer, MCPSubmissionsSummary } from "@/components/mcp_tools/types";
 import { FIELD_GROUPS, MCP_REQUIRED_FIELD_DEFS, SETTINGS_KEY } from "./MCPStandardsSettings";
 import NotificationsManager from "@/components/molecules/notifications_manager";
 
@@ -257,7 +257,7 @@
   requiredFields: string[];
 };
 
 function MCPServerCard({ server, onApprove, onReject, requiredFields }: MCPServerCardProps) {
   const approvalStatus = (server.approval_status ?? "active") as MCPStatus;
   const statusCfg = STATUS_CONFIG[approvalStatus] ?? STATUS_CONFIG["active"];
 
@@ -436,7 +436,7 @@
 }
 
 export function MCPSubmissionsTab({ accessToken }: MCPSubmissionsTabProps) {
   const [summary, setSummary] = useState<MCPSubmissionsSummary>({
     total: 0,
     pending_review: 0,
     active: 0,

ui/litellm-dashboard/src/components/mcp_tools/MCPToolsetsTab.tsx → ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPToolsetsTab.tsx

@@ -7,9 +7,15 @@ import { useMCPToolsets } from "@/app/(dashboard)/hooks/mcpServers/useMCPToolset
 import { useMCPServers } from "@/app/(dashboard)/hooks/mcpServers/useMCPServers";
 import { useQueryClient } from "@tanstack/react-query";
 import { DateCell, IdCell } from "@/components/shared/table_cells";
-import { DataTable } from "../view_logs/table";
-import { createMCPToolset, updateMCPToolset, deleteMCPToolset, listMCPTools, getProxyBaseUrl } from "../networking";
-import { MCPToolset, MCPToolsetTool } from "./types";
+import { DataTable } from "@/components/view_logs/table";
+import {
+  createMCPToolset,
+  updateMCPToolset,
+  deleteMCPToolset,
+  listMCPTools,
+  getProxyBaseUrl,
+} from "@/components/networking";
+import { MCPToolset, MCPToolsetTool } from "@/components/mcp_tools/types";
 
 const { Text: AntdText } = Typography;
 

ui/litellm-dashboard/src/components/mcp_tools/OAuthFormFields.tsx → ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/OAuthFormFields.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Form, Input, InputNumber, Select, Tooltip } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
 import { Button, TextInput } from "@tremor/react";
-import { OAUTH_FLOW } from "./types";
+import { OAUTH_FLOW } from "@/components/mcp_tools/types";
 import TokenEndpointAuthMethodField from "./TokenEndpointAuthMethodField";
 
 interface OAuthFlowStatus {

ui/litellm-dashboard/src/components/mcp_tools/OpenAPIFormSection.tsx → ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/OpenAPIFormSection.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Form, Input, Tooltip } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
 import { FormInstance } from "antd/es/form";
-import { AUTH_TYPE, OAUTH_FLOW } from "./types";
+import { AUTH_TYPE, OAUTH_FLOW } from "@/components/mcp_tools/types";
 import OpenAPIQuickPicker, { OpenAPIRegistryEntry, OpenAPIKeyTool } from "./OpenAPIQuickPicker";
 
 interface OpenAPIFormSectionProps {

ui/litellm-dashboard/src/components/mcp_tools/OpenAPIQuickPicker.tsx → ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/OpenAPIQuickPicker.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Spin } from "antd";
-import { fetchOpenAPIRegistry } from "../networking";
+import { fetchOpenAPIRegistry } from "@/components/networking";
 
 export interface OpenAPIKeyTool {
   name: string;

ui/litellm-dashboard/src/components/mcp_tools/PassthroughAuthorizeSection.tsx → ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/PassthroughAuthorizeSection.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Button, Checkbox, Form, Input } from "antd";
 import DcrBridgeToggle from "./DcrBridgeToggle";
-import { credentialAuthClass, isClientForwardedTokenMode } from "./types";
+import { credentialAuthClass, isClientForwardedTokenMode } from "@/components/mcp_tools/types";
 
 interface PassthroughOAuthFlow {
   startOAuthFlow: () => void | Promise<void>;

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

@@ -3,9 +3,9 @@ import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 
 import { ToolTestPanel } from "./ToolTestPanel";
-import { InputSchema, MCPTool } from "./types";
+import { InputSchema, MCPTool } from "@/components/mcp_tools/types";
 
-vi.mock("../molecules/notifications_manager", () => ({
+vi.mock("@/components/molecules/notifications_manager", () => ({
   default: {
     success: vi.fn(),
     fromBackend: vi.fn(),

ui/litellm-dashboard/src/components/mcp_tools/ToolTestPanel.tsx → ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/ToolTestPanel.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { Button, TextInput } from "@tremor/react";
-import { MCPTool, InputSchema, InputSchemaProperty } from "./types";
+import { MCPTool, InputSchema, InputSchemaProperty } from "@/components/mcp_tools/types";
 import { resolveLogoSrc } from "@/lib/assetPaths";
 import { Form, Select, Tooltip } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
-import NotificationsManager from "../molecules/notifications_manager";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 
 const isPlainObject = (value: unknown): value is Record<string, any> =>
   typeof value === "object" && value !== null && !Array.isArray(value);

ui/litellm-dashboard/src/components/mcp_tools/TruePassthroughWarning.tsx → ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/TruePassthroughWarning.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Alert } from "antd";
-import { AUTH_TYPE } from "./types";
+import { AUTH_TYPE } from "@/components/mcp_tools/types";
 
 /**
  * Warning shown in the create/edit MCP server forms when auth_type

ui/litellm-dashboard/src/components/mcp_tools/UserEnvVarsModal.tsx → ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/UserEnvVarsModal.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { Modal, Form, Input, Button, Alert, Spin, Tag, Typography } from "antd";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { MCPServer, MCPUserEnvVarsStatus } from "./types";
-import { getMCPUserEnvVars, storeMCPUserEnvVars } from "../networking";
-import NotificationsManager from "../molecules/notifications_manager";
+import { MCPServer, MCPUserEnvVarsStatus } from "@/components/mcp_tools/types";
+import { getMCPUserEnvVars, storeMCPUserEnvVars } from "@/components/networking";
+import NotificationsManager from "@/components/molecules/notifications_manager";
 
 const { Text, Title } = Typography;
 

ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.test.tsx → ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/create_mcp_server.test.tsx

@@ -1,12 +1,12 @@
 import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import * as networking from "../networking";
+import * as networking from "@/components/networking";
 import { setToken } from "@/utils/mcpTokenStore";
 import CreateMCPServer from "./create_mcp_server";
 import { selectAntOption } from "./testUtils";
 
-vi.mock("../networking", () => ({
+vi.mock("@/components/networking", () => ({
   createMCPServer: vi.fn(),
   fetchOpenAPIRegistry: vi.fn().mockResolvedValue({ apis: [] }),
   registerMCPServer: vi.fn(),