From 3f3efea3016bb52d93601d32f326fd02e8ac4313 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Thu, 11 Sep 2025 15:12:21 -0700
Subject: [PATCH 01/42] test(test_gemini.py): add additional testing for
 additionalproperties case

---
 litellm/types/llms/vertex_ai.py               |  1 -
 tests/llm_translation/test_gemini.py          | 79 ++++++++++++++-----
 .../test_amazing_vertex_completion.py         | 50 +++++++++---
 3 files changed, 96 insertions(+), 34 deletions(-)

diff --git a/litellm/types/llms/vertex_ai.py b/litellm/types/llms/vertex_ai.py
index 2687b79f72..f17a284ddf 100644
--- a/litellm/types/llms/vertex_ai.py
+++ b/litellm/types/llms/vertex_ai.py
@@ -113,7 +113,6 @@ class Schema(TypedDict, total=False):
     pattern: str
     example: Any
     anyOf: List["Schema"]
-    additionalProperties: Any
 
 
 class FunctionDeclaration(TypedDict, total=False):
diff --git a/tests/llm_translation/test_gemini.py b/tests/llm_translation/test_gemini.py
index 47e3aaa814..122429a87a 100644
--- a/tests/llm_translation/test_gemini.py
+++ b/tests/llm_translation/test_gemini.py
@@ -269,7 +269,11 @@ def test_gemini_image_generation():
     assert len(response.choices[0].message.images) > 0
     assert response.choices[0].message.images[0]["image_url"] is not None
     assert response.choices[0].message.images[0]["image_url"]["url"] is not None
-    assert response.choices[0].message.images[0]["image_url"]["url"].startswith("data:image/png;base64,")
+    assert (
+        response.choices[0]
+        .message.images[0]["image_url"]["url"]
+        .startswith("data:image/png;base64,")
+    )
 
 
 def test_gemini_thinking():
@@ -661,7 +665,8 @@ def test_system_message_with_no_user_message():
     assert response is not None
 
     assert response.choices[0].message.content is not None
-  
+
+
 def get_current_weather(location, unit="fahrenheit"):
     """Get the current weather in a given location"""
     if "tokyo" in location.lower():
@@ -778,9 +783,9 @@ def test_gemini_reasoning_effort_minimal():
 
     # Test with different Gemini models to verify model-specific mapping
     test_cases = [
-        ("gemini/gemini-2.5-flash", 1),      # Flash: minimum 1 token
-        ("gemini/gemini-2.5-pro", 128),      # Pro: minimum 128 tokens  
-        ("gemini/gemini-2.5-flash-lite", 512), # Flash-Lite: minimum 512 tokens
+        ("gemini/gemini-2.5-flash", 1),  # Flash: minimum 1 token
+        ("gemini/gemini-2.5-pro", 128),  # Pro: minimum 128 tokens
+        ("gemini/gemini-2.5-flash-lite", 512),  # Flash-Lite: minimum 512 tokens
     ]
 
     for model, expected_min_budget in test_cases:
@@ -793,24 +798,32 @@ def test_gemini_reasoning_effort_minimal():
                 "reasoning_effort": "minimal",
             },
         )
-        
+
         # Verify that the thinking config is set correctly
         request_body = raw_request["raw_request_body"]
-        assert "generationConfig" in request_body, f"Model {model} should have generationConfig"
-        
+        assert (
+            "generationConfig" in request_body
+        ), f"Model {model} should have generationConfig"
+
         generation_config = request_body["generationConfig"]
-        assert "thinkingConfig" in generation_config, f"Model {model} should have thinkingConfig"
-        
+        assert (
+            "thinkingConfig" in generation_config
+        ), f"Model {model} should have thinkingConfig"
+
         thinking_config = generation_config["thinkingConfig"]
-        assert "thinkingBudget" in thinking_config, f"Model {model} should have thinkingBudget"
-        
+        assert (
+            "thinkingBudget" in thinking_config
+        ), f"Model {model} should have thinkingBudget"
+
         actual_budget = thinking_config["thinkingBudget"]
-        assert actual_budget == expected_min_budget, \
-            f"Model {model} should map 'minimal' to {expected_min_budget} tokens, got {actual_budget}"
-        
+        assert (
+            actual_budget == expected_min_budget
+        ), f"Model {model} should map 'minimal' to {expected_min_budget} tokens, got {actual_budget}"
+
         # Verify that includeThoughts is True for minimal reasoning effort
-        assert thinking_config.get("includeThoughts", True), \
-            f"Model {model} should have includeThoughts=True for minimal reasoning effort"
+        assert thinking_config.get(
+            "includeThoughts", True
+        ), f"Model {model} should have includeThoughts=True for minimal reasoning effort"
 
     # Test with unknown model (should use generic fallback)
     try:
@@ -822,15 +835,41 @@ def test_gemini_reasoning_effort_minimal():
                 "reasoning_effort": "minimal",
             },
         )
-        
+
         request_body = raw_request["raw_request_body"]
         generation_config = request_body["generationConfig"]
         thinking_config = generation_config["thinkingConfig"]
         # Should use generic fallback (128 tokens)
-        assert thinking_config["thinkingBudget"] == 128, \
-            "Unknown model should use generic fallback of 128 tokens"
+        assert (
+            thinking_config["thinkingBudget"] == 128
+        ), "Unknown model should use generic fallback of 128 tokens"
     except Exception as e:
         # If return_raw_request doesn't work for unknown models, that's okay
         # The important part is that our known models work correctly
         print(f"Note: Unknown model test skipped due to: {e}")
         pass
+
+
+def test_gemini_additional_properties_bug():
+    # Simple tool with additionalProperties (simulating the TypedDict issue)
+    tools = [
+        {
+            "type": "function",
+            "function": {
+                "name": "test_tool",
+                "description": "Test tool",
+                "parameters": {
+                    "type": "object",
+                    "properties": {"param1": {"type": "string"}},
+                    # This causes the error - any non-False value
+                    "additionalProperties": True,  # Could also be None, {}, etc.
+                },
+            },
+        }
+    ]
+
+    messages = [{"role": "user", "content": "Test message"}]
+
+    response = litellm.completion(
+        model="gemini/gemini-2.5-flash", messages=messages, tools=tools
+    )
diff --git a/tests/local_testing/test_amazing_vertex_completion.py b/tests/local_testing/test_amazing_vertex_completion.py
index a27fe738c7..d20f54bdd3 100644
--- a/tests/local_testing/test_amazing_vertex_completion.py
+++ b/tests/local_testing/test_amazing_vertex_completion.py
@@ -397,7 +397,7 @@ async def test_async_vertexai_response():
         | litellm.vertex_text_models
         | litellm.vertex_code_text_models
     )
-    
+
     test_models = random.sample(list(test_models), 1)
     test_models += list(litellm.vertex_language_models)  # always test gemini-pro
     for model in test_models:
@@ -504,7 +504,6 @@ async def test_async_vertexai_streaming_response():
             pytest.fail(f"An exception occurred: {e}")
 
 
-
 @pytest.mark.parametrize("load_pdf", [False])  # True,
 @pytest.mark.flaky(retries=3, delay=1)
 def test_completion_function_plus_pdf(load_pdf):
@@ -547,6 +546,7 @@ def test_completion_function_plus_pdf(load_pdf):
     except Exception as e:
         pytest.fail("Got={}".format(str(e)))
 
+
 def encode_image(image_path):
     import base64
 
@@ -910,7 +910,10 @@ async def test_partner_models_httpx(model, region, sync_mode):
     [
         ("vertex_ai/meta/llama-4-scout-17b-16e-instruct-maas", "us-east5"),
         ("vertex_ai/qwen/qwen3-coder-480b-a35b-instruct-maas", "us-south1"),
-        ("vertex_ai/mistral-large-2411", "us-central1"), # critical - we had this issue: https://github.com/BerriAI/litellm/issues/13888
+        (
+            "vertex_ai/mistral-large-2411",
+            "us-central1",
+        ),  # critical - we had this issue: https://github.com/BerriAI/litellm/issues/13888
         ("vertex_ai/openai/gpt-oss-20b-maas", "us-central1"),
     ],
 )
@@ -3827,7 +3830,7 @@ def test_vertex_ai_gemini_audio_ogg():
 @pytest.mark.asyncio
 async def test_vertex_ai_deepseek():
     """Test that deepseek models use the correct v1 API endpoint instead of v1beta1."""
-    #load_vertex_ai_credentials()
+    # load_vertex_ai_credentials()
     litellm._turn_on_debug()
     from litellm.llms.custom_httpx.http_handler import AsyncHTTPHandler
 
@@ -3840,21 +3843,17 @@ async def test_vertex_ai_deepseek():
             {
                 "message": {
                     "role": "assistant",
-                    "content": "Hello! How can I help you today?"
+                    "content": "Hello! How can I help you today?",
                 },
                 "index": 0,
-                "finish_reason": "stop"
+                "finish_reason": "stop",
             }
         ],
-        "usage": {
-            "prompt_tokens": 10,
-            "completion_tokens": 20,
-            "total_tokens": 30
-        },
-        "model": "deepseek-ai/deepseek-r1-0528-maas"
+        "usage": {"prompt_tokens": 10, "completion_tokens": 20, "total_tokens": 30},
+        "model": "deepseek-ai/deepseek-r1-0528-maas",
     }
     mock_response.status_code = 200
-    
+
     with patch.object(client, "post", return_value=mock_response) as mock_post:
         response = await acompletion(
             model="vertex_ai/deepseek-ai/deepseek-r1-0528-maas",
@@ -3900,3 +3899,28 @@ def test_gemini_grounding_on_streaming():
             vertex_ai_grounding_metadata_shows_up = True
         print(chunk)
     assert vertex_ai_grounding_metadata_shows_up
+
+
+def test_gemini_additional_properties_bug():
+    # Simple tool with additionalProperties (simulating the TypedDict issue)
+    tools = [
+        {
+            "type": "function",
+            "function": {
+                "name": "test_tool",
+                "description": "Test tool",
+                "parameters": {
+                    "type": "object",
+                    "properties": {"param1": {"type": "string"}},
+                    # This causes the error - any non-False value
+                    "additionalProperties": True,  # Could also be None, {}, etc.
+                },
+            },
+        }
+    ]
+
+    messages = [{"role": "user", "content": "Test message"}]
+
+    response = litellm.completion(
+        model="gemini/gemini-2.5-flash", messages=messages, tools=tools
+    )

From 84a7329dba2838d6de6e9c1e6a4a7c03dfb9076d Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Thu, 11 Sep 2025 16:04:06 -0700
Subject: [PATCH 02/42] fix(secret_managers/get_azure_Ad_token_providers.py):
 infer credential type from env var

don't default to ClientSecretCredential unless present in env var
---
 litellm/llms/azure/common_utils.py            |  4 ++-
 litellm/proxy/_new_secret_config.yaml         |  8 +++++
 .../get_azure_ad_token_provider.py            | 36 +++++++++++++++++--
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/litellm/llms/azure/common_utils.py b/litellm/llms/azure/common_utils.py
index 09b1888e04..b36375e416 100644
--- a/litellm/llms/azure/common_utils.py
+++ b/litellm/llms/azure/common_utils.py
@@ -561,7 +561,9 @@ class BaseAzureLLM(BaseOpenAILLM):
                 "Using Azure AD token provider based on Service Principal with Secret workflow for Azure Auth"
             )
             try:
-                azure_ad_token_provider = get_azure_ad_token_provider(azure_scope=scope)
+                azure_ad_token_provider = get_azure_ad_token_provider(
+                    azure_scope=scope,
+                )
             except ValueError:
                 verbose_logger.debug("Azure AD Token Provider could not be used.")
         if api_version is None:
diff --git a/litellm/proxy/_new_secret_config.yaml b/litellm/proxy/_new_secret_config.yaml
index c785dd05c4..be2a830386 100644
--- a/litellm/proxy/_new_secret_config.yaml
+++ b/litellm/proxy/_new_secret_config.yaml
@@ -7,3 +7,11 @@ model_list:
   - model_name: wildcard_models/*
     litellm_params:
       model: openai/*
+  - model_name: gpt-4o
+    litellm_params:
+      model: azure/gpt-4o
+      api_base: https://cog-cuda-atg-sage-eastus2.openai.azure.com
+      api_version: 2025-04-01-preview
+
+litellm_settings:
+  enable_azure_ad_token_refresh: true
\ No newline at end of file
diff --git a/litellm/secret_managers/get_azure_ad_token_provider.py b/litellm/secret_managers/get_azure_ad_token_provider.py
index e73c8f8d7a..184d959b96 100644
--- a/litellm/secret_managers/get_azure_ad_token_provider.py
+++ b/litellm/secret_managers/get_azure_ad_token_provider.py
@@ -1,11 +1,36 @@
 import os
 from typing import Any, Callable, Optional, Union
 
+from litellm._logging import verbose_logger
 from litellm.types.secret_managers.get_azure_ad_token_provider import (
     AzureCredentialType,
 )
 
 
+def infer_credential_type_from_environment() -> AzureCredentialType:
+    if (
+        os.environ.get("AZURE_CLIENT_ID")
+        and os.environ.get("AZURE_CLIENT_SECRET")
+        and os.environ.get("AZURE_TENANT_ID")
+    ):
+        return AzureCredentialType.ClientSecretCredential
+    elif os.environ.get("AZURE_CLIENT_ID"):
+        return AzureCredentialType.ManagedIdentityCredential
+    elif (
+        os.environ.get("AZURE_CLIENT_ID")
+        and os.environ.get("AZURE_TENANT_ID")
+        and os.environ.get("AZURE_CERTIFICATE_PATH")
+        and os.environ.get("AZURE_CERTIFICATE_PASSWORD")
+    ):
+        return AzureCredentialType.CertificateCredential
+    elif os.environ.get("AZURE_CERTIFICATE_PASSWORD"):
+        return AzureCredentialType.CertificateCredential
+    elif os.environ.get("AZURE_CERTIFICATE_PATH"):
+        return AzureCredentialType.CertificateCredential
+    else:
+        return AzureCredentialType.DefaultAzureCredential
+
+
 def get_azure_ad_token_provider(
     azure_scope: Optional[str] = None,
     azure_credential: Optional[AzureCredentialType] = None,
@@ -42,9 +67,14 @@ def get_azure_ad_token_provider(
         )
 
     cred: str = (
-        azure_credential.value if azure_credential else None
-        or os.environ.get("AZURE_CREDENTIAL", AzureCredentialType.ClientSecretCredential)
-        or AzureCredentialType.ClientSecretCredential
+        azure_credential.value
+        if azure_credential
+        else None
+        or os.environ.get("AZURE_CREDENTIAL")
+        or infer_credential_type_from_environment()
+    )
+    verbose_logger.info(
+        f"For Azure AD Token Provider, choosing credential type: {cred}"
     )
     credential: Optional[
         Union[

From d0732f55b3954da5a6853447a99fb8ae5a38edbe Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Thu, 11 Sep 2025 16:07:32 -0700
Subject: [PATCH 03/42] test(test_get_azure_ad_token_provider.py): add unit
 test to ensure default azure credentials used in the right context

---
 .../test_get_azure_ad_token_provider.py       | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/tests/test_litellm/secret_managers/test_get_azure_ad_token_provider.py b/tests/test_litellm/secret_managers/test_get_azure_ad_token_provider.py
index 85e55a5c30..f02f59cccc 100644
--- a/tests/test_litellm/secret_managers/test_get_azure_ad_token_provider.py
+++ b/tests/test_litellm/secret_managers/test_get_azure_ad_token_provider.py
@@ -214,3 +214,32 @@ class TestGetAzureAdTokenProvider:
         # Test that the returned callable works
         token = result()
         assert token == "mock-certificate-token"
+
+    @patch.dict(os.environ, {}, clear=True)  # Clear all environment variables
+    @patch("azure.identity.get_bearer_token_provider")
+    @patch("azure.identity.DefaultAzureCredential")
+    def test_get_azure_ad_token_provider_defaults_to_default_azure_credential(
+        self, mock_default_azure_credential, mock_get_bearer_token_provider
+    ):
+        """Test get_azure_ad_token_provider defaults to DefaultAzureCredential when no credentials are present."""
+        # Mock the Azure identity credential instance
+        mock_credential_instance = MagicMock()
+        mock_default_azure_credential.return_value = mock_credential_instance
+
+        # Mock the bearer token provider
+        mock_token_provider = MagicMock(return_value="mock-default-token")
+        mock_get_bearer_token_provider.return_value = mock_token_provider
+
+        # Call the function
+        result = get_azure_ad_token_provider()
+
+        # Assertions
+        assert callable(result)
+        mock_default_azure_credential.assert_called_once_with()
+        mock_get_bearer_token_provider.assert_called_once_with(
+            mock_credential_instance, "https://cognitiveservices.azure.com/.default"
+        )
+
+        # Test that the returned callable works
+        token = result()
+        assert token == "mock-default-token"

From 54e71bd0775adeab4df7015e334dd7ac3cbc551b Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Thu, 11 Sep 2025 16:10:13 -0700
Subject: [PATCH 04/42] fix(common_utils.py): add helpful message

---
 litellm/llms/azure/common_utils.py | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/litellm/llms/azure/common_utils.py b/litellm/llms/azure/common_utils.py
index b36375e416..7c744298fb 100644
--- a/litellm/llms/azure/common_utils.py
+++ b/litellm/llms/azure/common_utils.py
@@ -365,6 +365,11 @@ def get_azure_ad_token(
             azure_ad_token_provider = get_azure_ad_token_provider(azure_scope=scope)
         except ValueError:
             verbose_logger.debug("Azure AD Token Provider could not be used.")
+        except Exception as e:
+            verbose_logger.error(
+                f"Error calling Azure AD token provider: {str(e)}. Follow docs - https://docs.litellm.ai/docs/providers/azure/#azure-ad-token-refresh---defaultazurecredential"
+            )
+            raise e
 
         #########################################################
         # If litellm.enable_azure_ad_token_refresh is True and no other token provider is available,

From 03804cb1d29b1fc930c64089e03f7a08e17156f7 Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Sun, 5 Oct 2025 16:01:20 -0700
Subject: [PATCH 05/42] preliminary virtual-keys refactor

simplifies handleCreate function for CreateKeyModal

moved hooks, components, files where I want them

moved virtual-key page to (console) for common layout

added layout for refactored console file structure, sidebar

wired teams to refactored components

fixing type issue

wired new top level hook useAuthorized

Adds routing to unrefactored pages

Update leftnav.tsx

Update useAuthorized.ts

useAuthorized in virtual-keys/page and deprecation notices

prelim VirtualKeyViewPage, removed old comment

Delete page.tsx
---
 .../src/app/(console)/components/Sidebar.tsx  | 291 ++++++++
 .../components/modals/CreateUserModal.tsx     | 345 +++++++++
 .../src/app/(console)/hooks/useAuthorized.ts  |  23 +
 .../src/app/(console)/layout.tsx              |  46 ++
 .../virtual-keys/components/CreateKey.tsx     | 108 +++
 .../CreateKeyForm/KeyDetailsSection.tsx       | 148 ++++
 .../CreateKeyForm/OptionalSettingsSection.tsx | 458 ++++++++++++
 .../CreateKeyForm/OwnershipSection.tsx        | 130 ++++
 .../CreateKeyModal/CreateKeyModal.tsx         | 233 ++++++
 .../components/CreateKeyModal/hooks/index.ts  |   5 +
 .../hooks/useGuardrailsAndPrompts.ts          |  24 +
 .../hooks/useMcpAccessGroups.ts               |  21 +
 .../CreateKeyModal/hooks/useTeamModels.ts     |  26 +
 .../CreateKeyModal/hooks/useUserModels.ts     |  21 +
 .../CreateKeyModal/hooks/useUserSearch.ts     |  41 ++
 .../components/CreateKeyModal/networking.ts   |  84 +++
 .../components/CreateKeyModal/types.ts        |  17 +
 .../components/CreateKeyModal/utils.ts        | 187 +++++
 .../virtual-keys/components/KeyInfoView.tsx   | 697 ++++++++++++++++++
 .../virtual-keys/components/SaveKeyModal.tsx  |  58 ++
 .../VirtualKeysTable/VirtualKeysTable.tsx     | 666 +++++++++++++++++
 .../VirtualKeysTable/hooks/useFilterLogic.ts  | 189 +++++
 .../(console)/virtual-keys/hooks/useTeams.tsx |  20 +
 .../app/(console)/virtual-keys/networking.ts  |  17 +
 .../src/app/(console)/virtual-keys/page.tsx   |  52 ++
 ui/litellm-dashboard/src/app/page.tsx         |   2 -
 .../src/components/leftnav.tsx                |  50 +-
 .../organisms/create_key_button.tsx           |   8 +
 .../components/templates/view_key_table.tsx   |   7 +
 ui/litellm-dashboard/src/utils/roles.ts       |   2 +-
 30 files changed, 3941 insertions(+), 35 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/app/(console)/components/Sidebar.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(console)/components/modals/CreateUserModal.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(console)/hooks/useAuthorized.ts
 create mode 100644 ui/litellm-dashboard/src/app/(console)/layout.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKey.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/index.ts
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/networking.ts
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/types.ts
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/utils.ts
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/components/KeyInfoView.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/components/SaveKeyModal.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/components/VirtualKeysTable/hooks/useFilterLogic.ts
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/hooks/useTeams.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/networking.ts
 create mode 100644 ui/litellm-dashboard/src/app/(console)/virtual-keys/page.tsx

diff --git a/ui/litellm-dashboard/src/app/(console)/components/Sidebar.tsx b/ui/litellm-dashboard/src/app/(console)/components/Sidebar.tsx
new file mode 100644
index 0000000000..ad60ba626a
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/components/Sidebar.tsx
@@ -0,0 +1,291 @@
+import React from "react";
+import Link from "next/link";
+import { usePathname, useSearchParams } from "next/navigation";
+import { Layout, Menu, ConfigProvider } from "antd";
+import {
+  KeyOutlined,
+  PlayCircleOutlined,
+  BlockOutlined,
+  BarChartOutlined,
+  TeamOutlined,
+  BankOutlined,
+  UserOutlined,
+  SettingOutlined,
+  ApiOutlined,
+  AppstoreOutlined,
+  DatabaseOutlined,
+  FileTextOutlined,
+  LineChartOutlined,
+  SafetyOutlined,
+  ExperimentOutlined,
+  ToolOutlined,
+  TagsOutlined,
+  BgColorsOutlined,
+} from "@ant-design/icons";
+import { all_admin_roles, internalUserRoles, isAdminRole, rolesWithWriteAccess } from "@/utils/roles";
+import UsageIndicator from "@/components/usage_indicator";
+
+const { Sider } = Layout;
+
+interface SidebarProps {
+  accessToken: string | null;
+  userRole: string;
+  /** Used to highlight a menu item when pathname doesn't match (e.g., on non-routed pages) */
+  defaultSelectedKey?: string;
+  collapsed?: boolean;
+}
+
+interface MenuItem {
+  key: string;
+  page: string;
+  label: string;
+  roles?: string[];
+  children?: MenuItem[];
+  icon?: React.ReactNode;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ accessToken, userRole, defaultSelectedKey, collapsed = false }) => {
+  const menuItems: MenuItem[] = [
+    { key: "1", page: "api-keys", label: "Virtual Keys", icon: <KeyOutlined style={{ fontSize: 18 }} /> },
+    {
+      key: "3",
+      page: "llm-playground",
+      label: "Test Key",
+      icon: <PlayCircleOutlined style={{ fontSize: 18 }} />,
+      roles: rolesWithWriteAccess,
+    },
+    {
+      key: "2",
+      page: "models",
+      label: "Models + Endpoints",
+      icon: <BlockOutlined style={{ fontSize: 18 }} />,
+      roles: rolesWithWriteAccess,
+    },
+    {
+      key: "12",
+      page: "new_usage",
+      label: "Usage",
+      icon: <BarChartOutlined style={{ fontSize: 18 }} />,
+      roles: [...all_admin_roles, ...internalUserRoles],
+    },
+    { key: "6", page: "teams", label: "Teams", icon: <TeamOutlined style={{ fontSize: 18 }} /> },
+    {
+      key: "17",
+      page: "organizations",
+      label: "Organizations",
+      icon: <BankOutlined style={{ fontSize: 18 }} />,
+      roles: all_admin_roles,
+    },
+    {
+      key: "5",
+      page: "users",
+      label: "Internal Users",
+      icon: <UserOutlined style={{ fontSize: 18 }} />,
+      roles: all_admin_roles,
+    },
+    { key: "14", page: "api_ref", label: "API Reference", icon: <ApiOutlined style={{ fontSize: 18 }} /> },
+    { key: "16", page: "model-hub-table", label: "Model Hub", icon: <AppstoreOutlined style={{ fontSize: 18 }} /> },
+    { key: "15", page: "logs", label: "Logs", icon: <LineChartOutlined style={{ fontSize: 18 }} /> },
+    {
+      key: "11",
+      page: "guardrails",
+      label: "Guardrails",
+      icon: <SafetyOutlined style={{ fontSize: 18 }} />,
+      roles: all_admin_roles,
+    },
+    {
+      key: "26",
+      page: "tools",
+      label: "Tools",
+      icon: <ToolOutlined style={{ fontSize: 18 }} />,
+      children: [
+        { key: "18", page: "mcp-servers", label: "MCP Servers", icon: <ToolOutlined style={{ fontSize: 18 }} /> },
+        {
+          key: "21",
+          page: "vector-stores",
+          label: "Vector Stores",
+          icon: <DatabaseOutlined style={{ fontSize: 18 }} />,
+          roles: all_admin_roles,
+        },
+      ],
+    },
+    {
+      key: "experimental",
+      page: "experimental",
+      label: "Experimental",
+      icon: <ExperimentOutlined style={{ fontSize: 18 }} />,
+      children: [
+        {
+          key: "9",
+          page: "caching",
+          label: "Caching",
+          icon: <DatabaseOutlined style={{ fontSize: 18 }} />,
+          roles: all_admin_roles,
+        },
+        {
+          key: "25",
+          page: "prompts",
+          label: "Prompts",
+          icon: <FileTextOutlined style={{ fontSize: 18 }} />,
+          roles: all_admin_roles,
+        },
+        {
+          key: "10",
+          page: "budgets",
+          label: "Budgets",
+          icon: <BankOutlined style={{ fontSize: 18 }} />,
+          roles: all_admin_roles,
+        },
+        {
+          key: "20",
+          page: "transform-request",
+          label: "API Playground",
+          icon: <ApiOutlined style={{ fontSize: 18 }} />,
+          roles: [...all_admin_roles, ...internalUserRoles],
+        },
+        {
+          key: "19",
+          page: "tag-management",
+          label: "Tag Management",
+          icon: <TagsOutlined style={{ fontSize: 18 }} />,
+          roles: all_admin_roles,
+        },
+        { key: "4", page: "usage", label: "Old Usage", icon: <BarChartOutlined style={{ fontSize: 18 }} /> },
+      ],
+    },
+    {
+      key: "settings",
+      page: "settings",
+      label: "Settings",
+      icon: <SettingOutlined style={{ fontSize: 18 }} />,
+      roles: all_admin_roles,
+      children: [
+        {
+          key: "11",
+          page: "general-settings",
+          label: "Router Settings",
+          icon: <SettingOutlined style={{ fontSize: 18 }} />,
+          roles: all_admin_roles,
+        },
+        {
+          key: "8",
+          page: "settings",
+          label: "Logging & Alerts",
+          icon: <SettingOutlined style={{ fontSize: 18 }} />,
+          roles: all_admin_roles,
+        },
+        {
+          key: "13",
+          page: "admin-panel",
+          label: "Admin Settings",
+          icon: <SettingOutlined style={{ fontSize: 18 }} />,
+          roles: all_admin_roles,
+        },
+        {
+          key: "14",
+          page: "ui-theme",
+          label: "UI Theme",
+          icon: <BgColorsOutlined style={{ fontSize: 18 }} />,
+          roles: all_admin_roles,
+        },
+      ],
+    },
+  ];
+
+  // Role filtering (preserves original visibility behavior)
+  const filteredMenuItems: MenuItem[] = menuItems
+    .filter((item) => !item.roles || item.roles.includes(userRole))
+    .map((item) => ({
+      ...item,
+      children: item.children?.filter((child) => !child.roles || child.roles.includes(userRole)),
+    }));
+
+  // Highlight selection based on pathname or ?page=
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const pageParam = searchParams.get("page") || undefined;
+
+  const findMenuItemKey = (page: string): string => {
+    const top = filteredMenuItems.find((i) => i.page === page);
+    if (top) return top.key;
+    for (const i of filteredMenuItems) {
+      const child = i.children?.find((c) => c.page === page);
+      if (child) return child.key;
+    }
+    return "1";
+  };
+
+  const selectedMenuKey =
+    pathname === "/virtual-keys"
+      ? "1"
+      : pageParam
+        ? findMenuItemKey(pageParam)
+        : defaultSelectedKey
+          ? findMenuItemKey(defaultSelectedKey)
+          : "1";
+
+  // Root-only routing helper: always replace everything after the domain
+  const rootWithPage = (p: string) => ({ pathname: "/", query: { page: p } });
+
+  // Convert to AntD Menu items:
+  // - "Virtual Keys" still routes to /virtual-keys
+  // - All other items (and children) route to "/?page=<page>"
+  const antdItems = filteredMenuItems.map((item) => {
+    const isVirtualKeys = item.key === "1";
+    const label = isVirtualKeys ? (
+      <Link href="/virtual-keys">Virtual Keys</Link>
+    ) : (
+      <Link href={rootWithPage(item.page)}>{item.label}</Link>
+    );
+
+    return {
+      key: item.key,
+      icon: item.icon,
+      label,
+      children: item.children?.map((child) => ({
+        key: child.key,
+        icon: child.icon,
+        label: <Link href={rootWithPage(child.page)}>{child.label}</Link>,
+      })),
+    };
+  });
+
+  return (
+    <Layout style={{ minHeight: "100vh" }}>
+      <Sider
+        theme="light"
+        width={220}
+        collapsed={collapsed}
+        collapsedWidth={80}
+        collapsible
+        trigger={null}
+        style={{
+          transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+          position: "relative",
+        }}
+      >
+        <ConfigProvider
+          theme={{
+            components: {
+              Menu: { iconSize: 18, fontSize: 14 },
+            },
+          }}
+        >
+          <Menu
+            mode="inline"
+            selectedKeys={[selectedMenuKey]}
+            defaultOpenKeys={collapsed ? [] : ["llm-tools"]} /* kept to match original look */
+            inlineCollapsed={collapsed}
+            className="custom-sidebar-menu"
+            style={{ borderRight: 0, backgroundColor: "transparent", fontSize: 14 }}
+            items={antdItems as any}
+          />
+        </ConfigProvider>
+
+        {isAdminRole(userRole) && !collapsed && <UsageIndicator accessToken={accessToken} width={220} />}
+      </Sider>
+    </Layout>
+  );
+};
+
+export default Sidebar;
diff --git a/ui/litellm-dashboard/src/app/(console)/components/modals/CreateUserModal.tsx b/ui/litellm-dashboard/src/app/(console)/components/modals/CreateUserModal.tsx
new file mode 100644
index 0000000000..4caaceb662
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/components/modals/CreateUserModal.tsx
@@ -0,0 +1,345 @@
+// TODO: refactor
+import React, { useState, useEffect } from "react";
+import { Button, Modal, Form, Input, message, Select, InputNumber, Select as Select2 } from "antd";
+import {
+  Button as Button2,
+  Text,
+  TextInput,
+  SelectItem,
+  Accordion,
+  AccordionHeader,
+  AccordionBody,
+  Title,
+} from "@tremor/react";
+import NotificationsManager from "@/components/molecules/notifications_manager";
+const { Option } = Select;
+import { Tooltip } from "antd";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { useQueryClient } from "@tanstack/react-query";
+import OnboardingModal, { InvitationLink } from "@/components/onboarding_link";
+import {
+  getProxyBaseUrl,
+  getProxyUISettings,
+  invitationCreateCall,
+  modelAvailableCall,
+  Team,
+  userCreateCall,
+} from "@/components/networking";
+import { getModelDisplayName } from "@/components/key_team_helpers/fetch_available_models_team_key";
+import BulkCreateUsersButton from "@/components/bulk_create_users_button";
+import { fetchTeams } from "@/app/(console)/virtual-keys/networking";
+import useTeams from "@/app/(console)/virtual-keys/hooks/useTeams";
+import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+
+// Helper function to generate UUID compatible across all environments
+const generateUUID = (): string => {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  // Fallback UUID generation for environments without crypto.randomUUID
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0;
+    const v = c == "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+};
+
+interface CreateUserModalProps {
+  possibleUIRoles: null | Record<string, Record<string, string>>;
+  onUserCreated?: (userId: string) => void;
+  isEmbedded?: boolean;
+}
+
+interface UISettings {
+  PROXY_BASE_URL: string | null;
+  PROXY_LOGOUT_URL: string | null;
+  DEFAULT_TEAM_DISABLED: boolean;
+  SSO_ENABLED: boolean;
+}
+
+const CreateUserModal: React.FC<CreateUserModalProps> = ({ possibleUIRoles, onUserCreated, isEmbedded = false }) => {
+  const { userId: userID, accessToken } = useAuthorized();
+  const queryClient = useQueryClient();
+  const [uiSettings, setUISettings] = useState<UISettings | null>(null);
+  const [form] = Form.useForm();
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [apiuser, setApiuser] = useState<boolean>(false);
+  const [userModels, setUserModels] = useState<string[]>([]);
+  const [isInvitationLinkModalVisible, setIsInvitationLinkModalVisible] = useState(false);
+  const [invitationLinkData, setInvitationLinkData] = useState<InvitationLink | null>(null);
+  const [baseUrl, setBaseUrl] = useState<string | null>(null);
+  const teams = useTeams();
+
+  // get all models
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const userRole = "any"; // You may need to get the user role dynamically
+        const modelDataResponse = await modelAvailableCall(accessToken, userID, userRole);
+        // Assuming modelDataResponse.data contains an array of model objects with a 'model_name' property
+        const availableModels = [];
+        for (let i = 0; i < modelDataResponse.data.length; i++) {
+          const model = modelDataResponse.data[i];
+          availableModels.push(model.id);
+        }
+        console.log("Model data response:", modelDataResponse.data);
+        console.log("Available models:", availableModels);
+
+        // Assuming modelDataResponse.data contains an array of model names
+        setUserModels(availableModels);
+
+        // get ui settings
+        const uiSettingsResponse = await getProxyUISettings(accessToken);
+        console.log("uiSettingsResponse:", uiSettingsResponse);
+
+        setUISettings(uiSettingsResponse);
+      } catch (error) {
+        console.error("Error fetching model data:", error);
+      }
+    };
+
+    setBaseUrl(getProxyBaseUrl());
+
+    fetchData(); // Call the function to fetch model data when the component mounts
+  }, []); // Empty dependency array to run only once
+
+  const handleOk = () => {
+    setIsModalVisible(false);
+    form.resetFields();
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+    setApiuser(false);
+    form.resetFields();
+  };
+
+  const handleCreate = async (formValues: { user_id: string; models?: string[]; user_role: string }) => {
+    try {
+      NotificationsManager.info("Making API Call");
+      if (!isEmbedded) {
+        setIsModalVisible(true);
+      }
+      if ((!formValues.models || formValues.models.length === 0) && formValues.user_role !== "proxy_admin") {
+        console.log("formValues.user_role", formValues.user_role);
+        // If models is empty or undefined, set it to "no-default-models"
+        formValues.models = ["no-default-models"];
+      }
+      console.log("formValues in create user:", formValues);
+      const response = await userCreateCall(accessToken, null, formValues);
+      await queryClient.invalidateQueries({ queryKey: ["userList"] });
+      console.log("user create Response:", response);
+      setApiuser(true);
+      const user_id = response.data?.user_id || response.user_id;
+
+      // Call the callback if provided (for embedded mode)
+      if (onUserCreated && isEmbedded) {
+        onUserCreated(user_id);
+        form.resetFields();
+        return; // Skip the invitation flow when embedded
+      }
+
+      // only do invite link flow if sso is not enabled
+      if (!uiSettings?.SSO_ENABLED) {
+        invitationCreateCall(accessToken, user_id).then((data) => {
+          data.has_user_setup_sso = false;
+          setInvitationLinkData(data);
+          setIsInvitationLinkModalVisible(true);
+        });
+      } else {
+        // create an InvitationLink Object for this user for the SSO flow
+        // for SSO the invite link is the proxy base url since the User just needs to login
+        const invitationLink: InvitationLink = {
+          id: generateUUID(), // Generate a unique ID
+          user_id: user_id,
+          is_accepted: false,
+          accepted_at: null,
+          expires_at: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // Set expiry to 7 days from now
+          created_at: new Date(),
+          created_by: userID, // Assuming userID is the current user creating the invitation
+          updated_at: new Date(),
+          updated_by: userID,
+          has_user_setup_sso: true,
+        };
+        setInvitationLinkData(invitationLink);
+        setIsInvitationLinkModalVisible(true);
+      }
+
+      NotificationsManager.success("API user Created");
+      form.resetFields();
+      localStorage.removeItem("userData" + userID);
+    } catch (error: any) {
+      const errorMessage = error.response?.data?.detail || error?.message || "Error creating the user";
+      NotificationsManager.fromBackend(errorMessage);
+      console.error("Error creating the user:", error);
+    }
+  };
+
+  // Modify the return statement to handle embedded mode
+  if (isEmbedded) {
+    return (
+      <Form form={form} onFinish={handleCreate} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} labelAlign="left">
+        <Form.Item label="User Email" name="user_email">
+          <TextInput placeholder="" />
+        </Form.Item>
+        <Form.Item label="User Role" name="user_role">
+          <Select2>
+            {possibleUIRoles &&
+              Object.entries(possibleUIRoles).map(([role, { ui_label, description }]) => (
+                <SelectItem key={role} value={role} title={ui_label}>
+                  <div className="flex">
+                    {ui_label}{" "}
+                    <p className="ml-2" style={{ color: "gray", fontSize: "12px" }}>
+                      {description}
+                    </p>
+                  </div>
+                </SelectItem>
+              ))}
+          </Select2>
+        </Form.Item>
+        <Form.Item label="Team ID" name="team_id">
+          <Select placeholder="Select Team ID" style={{ width: "100%" }}>
+            {teams ? (
+              teams.map((team: any) => (
+                <Option key={team.team_id} value={team.team_id}>
+                  {team.team_alias}
+                </Option>
+              ))
+            ) : (
+              <Option key="default" value={null}>
+                Default Team
+              </Option>
+            )}
+          </Select>
+        </Form.Item>
+
+        <Form.Item label="Metadata" name="metadata">
+          <Input.TextArea rows={4} placeholder="Enter metadata as JSON" />
+        </Form.Item>
+
+        <div style={{ textAlign: "right", marginTop: "10px" }}>
+          <Button htmlType="submit">Create User</Button>
+        </div>
+      </Form>
+    );
+  }
+
+  // Original return for standalone mode
+  return (
+    <div className="flex gap-2">
+      <Button2 className="mb-0" onClick={() => setIsModalVisible(true)}>
+        + Invite User
+      </Button2>
+      <BulkCreateUsersButton accessToken={accessToken} teams={teams} possibleUIRoles={possibleUIRoles} />
+      <Modal
+        title="Invite User"
+        visible={isModalVisible}
+        width={800}
+        footer={null}
+        onOk={handleOk}
+        onCancel={handleCancel}
+      >
+        <Text className="mb-1">Create a User who can own keys</Text>
+        <Form form={form} onFinish={handleCreate} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} labelAlign="left">
+          <Form.Item label="User Email" name="user_email">
+            <TextInput placeholder="" />
+          </Form.Item>
+          <Form.Item
+            label={
+              <span>
+                Global Proxy Role{" "}
+                <Tooltip title="This is the role that the user will globally on the proxy. This role is independent of any team/org specific roles.">
+                  <InfoCircleOutlined />
+                </Tooltip>
+              </span>
+            }
+            name="user_role"
+          >
+            <Select2>
+              {possibleUIRoles &&
+                Object.entries(possibleUIRoles).map(([role, { ui_label, description }]) => (
+                  <SelectItem key={role} value={role} title={ui_label}>
+                    <div className="flex">
+                      {ui_label}{" "}
+                      <p className="ml-2" style={{ color: "gray", fontSize: "12px" }}>
+                        {description}
+                      </p>
+                    </div>
+                  </SelectItem>
+                ))}
+            </Select2>
+          </Form.Item>
+
+          <Form.Item
+            label="Team ID"
+            className="gap-2"
+            name="team_id"
+            help="If selected, user will be added as a 'user' role to the team."
+          >
+            <Select placeholder="Select Team ID" style={{ width: "100%" }}>
+              {teams ? (
+                teams.map((team: any) => (
+                  <Option key={team.team_id} value={team.team_id}>
+                    {team.team_alias}
+                  </Option>
+                ))
+              ) : (
+                <Option key="default" value={null}>
+                  Default Team
+                </Option>
+              )}
+            </Select>
+          </Form.Item>
+
+          <Form.Item label="Metadata" name="metadata">
+            <Input.TextArea rows={4} placeholder="Enter metadata as JSON" />
+          </Form.Item>
+          <Accordion>
+            <AccordionHeader>
+              <Title>Personal Key Creation</Title>
+            </AccordionHeader>
+            <AccordionBody>
+              <Form.Item
+                className="gap-2"
+                label={
+                  <span>
+                    Models{" "}
+                    <Tooltip title="Models user has access to, outside of team scope.">
+                      <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+                    </Tooltip>
+                  </span>
+                }
+                name="models"
+                help="Models user has access to, outside of team scope."
+              >
+                <Select2 mode="multiple" placeholder="Select models" style={{ width: "100%" }}>
+                  <Select2.Option key="all-proxy-models" value="all-proxy-models">
+                    All Proxy Models
+                  </Select2.Option>
+                  {userModels.map((model) => (
+                    <Select2.Option key={model} value={model}>
+                      {getModelDisplayName(model)}
+                    </Select2.Option>
+                  ))}
+                </Select2>
+              </Form.Item>
+            </AccordionBody>
+          </Accordion>
+          <div style={{ textAlign: "right", marginTop: "10px" }}>
+            <Button htmlType="submit">Create User</Button>
+          </div>
+        </Form>
+      </Modal>
+      {apiuser && (
+        <OnboardingModal
+          isInvitationLinkModalVisible={isInvitationLinkModalVisible}
+          setIsInvitationLinkModalVisible={setIsInvitationLinkModalVisible}
+          baseUrl={baseUrl || ""}
+          invitationLinkData={invitationLinkData}
+        />
+      )}
+    </div>
+  );
+};
+
+export default CreateUserModal;
diff --git a/ui/litellm-dashboard/src/app/(console)/hooks/useAuthorized.ts b/ui/litellm-dashboard/src/app/(console)/hooks/useAuthorized.ts
new file mode 100644
index 0000000000..45f5ee92ea
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/hooks/useAuthorized.ts
@@ -0,0 +1,23 @@
+import { Router } from "next/router";
+import { getCookie } from "@/utils/cookieUtils";
+import { useRouter } from "next/navigation";
+import { jwtDecode } from "jwt-decode";
+
+const useAuthorized = () => {
+  const token = getCookie("token");
+  const router = useRouter();
+
+  if (!token) {
+    router.replace("/sso/key/generate");
+  }
+
+  const decoded = jwtDecode(token as string) as { [key: string]: any };
+  const accessToken = decoded.key;
+  const userId = decoded.user_id;
+  const userRole = decoded.user_role;
+  const premiumUser = decoded.premium_user;
+
+  return { accessToken, userId, userRole, premiumUser };
+};
+
+export default useAuthorized;
diff --git a/ui/litellm-dashboard/src/app/(console)/layout.tsx b/ui/litellm-dashboard/src/app/(console)/layout.tsx
new file mode 100644
index 0000000000..cbfb5bdcb5
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/layout.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import React from "react";
+import Navbar from "@/components/navbar";
+import { ThemeProvider } from "@/contexts/ThemeContext";
+import Sidebar from "@/app/(console)/components/Sidebar";
+import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  const { accessToken, userRole } = useAuthorized();
+  const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
+
+  const toggleSidebar = () => setSidebarCollapsed((v) => !v);
+
+  return (
+    <ThemeProvider accessToken={""}>
+      <div className="flex flex-col min-h-screen">
+        <Navbar
+          isPublicPage={false}
+          sidebarCollapsed={sidebarCollapsed}
+          onToggleSidebar={toggleSidebar}
+          userID={null}
+          userEmail={null}
+          userRole={null}
+          premiumUser={false}
+          proxySettings={undefined}
+          setProxySettings={function (value: any): void {
+            throw new Error("Function not implemented.");
+          }}
+          accessToken={null}
+        />
+        <div className="flex flex-1 overflow-auto">
+          <div className="mt-2">
+            <Sidebar
+              collapsed={sidebarCollapsed}
+              accessToken={accessToken}
+              userRole={userRole}
+              defaultSelectedKey={""}
+            />
+          </div>
+          <main className="flex-1">{children}</main>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKey.tsx b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKey.tsx
new file mode 100644
index 0000000000..c8e0b1d8ce
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKey.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Button } from "@tremor/react";
+import { Modal, Form } from "antd";
+import { getPossibleUserRoles, Organization } from "@/components/networking";
+import { rolesWithWriteAccess } from "@/utils/roles";
+import { Team } from "@/components/key_team_helpers/key_list";
+import CreateKeyModal from "@/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyModal";
+import CreateUserModal from "@/app/(console)/components/modals/CreateUserModal";
+import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+
+interface CreateKeyProps {
+  team: Team | null;
+  userRole: string | null;
+  data: any[] | null;
+  addKey: (data: any) => void;
+}
+
+interface User {
+  user_id: string;
+  user_email: string;
+  role?: string;
+}
+
+interface UserOption {
+  label: string;
+  value: string;
+  user: User;
+}
+const CreateKey: React.FC<CreateKeyProps> = ({ team, userRole, data, addKey }) => {
+  const { accessToken } = useAuthorized();
+  const [form] = Form.useForm();
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [isCreateUserModalVisible, setIsCreateUserModalVisible] = useState(false);
+  const [newlyCreatedUserId, setNewlyCreatedUserId] = useState<string | null>(null);
+  const [possibleUIRoles, setPossibleUIRoles] = useState<Record<string, Record<string, string>>>({});
+
+  useEffect(() => {
+    const fetchPossibleRoles = async () => {
+      try {
+        if (accessToken) {
+          // Check if roles are cached in session storage
+          const cachedRoles = sessionStorage.getItem("possibleUserRoles");
+          if (cachedRoles) {
+            setPossibleUIRoles(JSON.parse(cachedRoles));
+          } else {
+            const availableUserRoles = await getPossibleUserRoles(accessToken);
+            sessionStorage.setItem("possibleUserRoles", JSON.stringify(availableUserRoles));
+            setPossibleUIRoles(availableUserRoles);
+          }
+        }
+      } catch (error) {
+        console.error("Error fetching possible user roles:", error);
+      }
+    };
+
+    fetchPossibleRoles();
+  }, [accessToken]);
+
+  // Add a callback function to handle user creation
+  const handleUserCreated = (userId: string) => {
+    setNewlyCreatedUserId(userId);
+    form.setFieldsValue({ user_id: userId });
+    setIsCreateUserModalVisible(false);
+  };
+
+  const handleUserSelect = (_value: string, option: UserOption): void => {
+    const selectedUser = option.user;
+    form.setFieldsValue({
+      user_id: selectedUser.user_id,
+    });
+  };
+
+  return (
+    <div>
+      {userRole && rolesWithWriteAccess.includes(userRole) && (
+        <Button className="mx-auto" onClick={() => setIsModalVisible(true)}>
+          + Create New Key
+        </Button>
+      )}
+      <CreateKeyModal
+        isModalVisible={isModalVisible}
+        form={form}
+        handleUserSelect={handleUserSelect}
+        setIsCreateUserModalVisible={setIsCreateUserModalVisible}
+        team={team}
+        setIsModalVisible={setIsModalVisible}
+        data={data}
+        addKey={addKey}
+      />
+
+      {isCreateUserModalVisible && (
+        <Modal
+          title="Create New User"
+          open={isCreateUserModalVisible}
+          onCancel={() => setIsCreateUserModalVisible(false)}
+          footer={null}
+          width={800}
+        >
+          <CreateUserModal possibleUIRoles={possibleUIRoles} onUserCreated={handleUserCreated} isEmbedded={true} />
+        </Modal>
+      )}
+    </div>
+  );
+};
+
+export default CreateKey;
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx
new file mode 100644
index 0000000000..54e9aaefed
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx
@@ -0,0 +1,148 @@
+import { TextInput, Title } from "@tremor/react";
+import { Form, FormInstance, Select, Tooltip } from "antd";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { getModelDisplayName } from "@/components/key_team_helpers/fetch_available_models_team_key";
+import React from "react";
+
+export interface KeyDetailsSectionProps {
+  form: FormInstance;
+  keyOwner: string;
+  modelsToPick: string[];
+  keyType: string;
+  setKeyType: (keyType: string) => void;
+}
+
+const { Option } = Select;
+
+const KeyDetailsSection = ({ form, keyOwner, keyType, modelsToPick, setKeyType }: KeyDetailsSectionProps) => {
+  return (
+    <div className="mb-8">
+      <Title className="mb-4">Key Details</Title>
+      <Form.Item
+        label={
+          <span>
+            {keyOwner === "you" || keyOwner === "another_user" ? "Key Name" : "Service Account ID"}{" "}
+            <Tooltip
+              title={
+                keyOwner === "you" || keyOwner === "another_user"
+                  ? "A descriptive name to identify this key"
+                  : "Unique identifier for this service account"
+              }
+            >
+              <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+            </Tooltip>
+          </span>
+        }
+        name="key_alias"
+        rules={[
+          {
+            required: true,
+            message: `Please input a ${keyOwner === "you" ? "key name" : "service account ID"}`,
+          },
+        ]}
+        help="required"
+      >
+        <TextInput placeholder="" />
+      </Form.Item>
+
+      <Form.Item
+        label={
+          <span>
+            Models{" "}
+            <Tooltip title="Select which models this key can access. Choose 'All Team Models' to grant access to all models available to the team">
+              <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+            </Tooltip>
+          </span>
+        }
+        name="models"
+        rules={
+          keyType === "management" || keyType === "read_only"
+            ? []
+            : [{ required: true, message: "Please select a model" }]
+        }
+        help={
+          keyType === "management" || keyType === "read_only"
+            ? "Models field is disabled for this key type"
+            : "required"
+        }
+        className="mt-4"
+      >
+        <Select
+          mode="multiple"
+          placeholder="Select models"
+          style={{ width: "100%" }}
+          disabled={keyType === "management" || keyType === "read_only"}
+          onChange={(values) => {
+            if (values.includes("all-team-models")) {
+              form.setFieldsValue({ models: ["all-team-models"] });
+            }
+          }}
+        >
+          <Option key="all-team-models" value="all-team-models">
+            All Team Models
+          </Option>
+          {modelsToPick.map((model: string) => (
+            <Option key={model} value={model}>
+              {getModelDisplayName(model)}
+            </Option>
+          ))}
+        </Select>
+      </Form.Item>
+
+      <Form.Item
+        label={
+          <span>
+            Key Type{" "}
+            <Tooltip title="Select the type of key to determine what routes and operations this key can access">
+              <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+            </Tooltip>
+          </span>
+        }
+        name="key_type"
+        initialValue="default"
+        className="mt-4"
+      >
+        <Select
+          defaultValue="default"
+          placeholder="Select key type"
+          style={{ width: "100%" }}
+          optionLabelProp="label"
+          onChange={(value) => {
+            setKeyType(value);
+            // Clear models field and disable if management or read_only
+            if (value === "management" || value === "read_only") {
+              form.setFieldsValue({ models: [] });
+            }
+          }}
+        >
+          <Option value="default" label="Default">
+            <div style={{ padding: "4px 0" }}>
+              <div style={{ fontWeight: 500 }}>Default</div>
+              <div style={{ fontSize: "11px", color: "#6b7280", marginTop: "2px" }}>
+                Can call LLM API + Management routes
+              </div>
+            </div>
+          </Option>
+          <Option value="llm_api" label="LLM API">
+            <div style={{ padding: "4px 0" }}>
+              <div style={{ fontWeight: 500 }}>LLM API</div>
+              <div style={{ fontSize: "11px", color: "#6b7280", marginTop: "2px" }}>
+                Can call only LLM API routes (chat/completions, embeddings, etc.)
+              </div>
+            </div>
+          </Option>
+          <Option value="management" label="Management">
+            <div style={{ padding: "4px 0" }}>
+              <div style={{ fontWeight: 500 }}>Management</div>
+              <div style={{ fontSize: "11px", color: "#6b7280", marginTop: "2px" }}>
+                Can call only management routes (user/team/key management)
+              </div>
+            </div>
+          </Option>
+        </Select>
+      </Form.Item>
+    </div>
+  );
+};
+
+export default KeyDetailsSection;
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx
new file mode 100644
index 0000000000..c879cdf595
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx
@@ -0,0 +1,458 @@
+import { Accordion, AccordionBody, AccordionHeader, Text, Title } from "@tremor/react";
+import { Form, FormInstance, Input, Select, Tooltip } from "antd";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { formatNumberWithCommas } from "@/utils/dataUtils";
+import NumericalInput from "@/components/shared/numerical_input";
+import BudgetDurationDropdown from "@/components/common_components/budget_duration_dropdown";
+import RateLimitTypeFormItem from "@/components/common_components/RateLimitTypeFormItem";
+import VectorStoreSelector from "@/components/vector_store_management/VectorStoreSelector";
+import MCPServerSelector from "@/components/mcp_server_management/MCPServerSelector";
+import PremiumLoggingSettings from "@/components/common_components/PremiumLoggingSettings";
+import ModelAliasManager from "@/components/common_components/ModelAliasManager";
+import KeyLifecycleSettings from "@/components/common_components/KeyLifecycleSettings";
+import { proxyBaseUrl } from "@/components/networking";
+import SchemaFormFields from "@/components/common_components/check_openapi_schema";
+import { Team } from "@/components/key_team_helpers/key_list";
+import React from "react";
+import { DefaultOptionType } from "rc-select/lib/Select";
+import { ModelAliases } from "@/app/(console)/virtual-keys/components/CreateKeyModal/types";
+
+export interface OptionalSettingsSectionProps {
+  form: FormInstance;
+  team: Team | null;
+  premiumUser: boolean;
+  guardrails: string[];
+  prompts: string[];
+  accessToken: string;
+  predefinedTags: DefaultOptionType[];
+  loggingSettings: any;
+  setLoggingSettings: (settings: any) => void;
+  disabledCallbacks: string[];
+  setDisabledCallbacks: (disabledCallbacks: string[]) => void;
+  modelAliases: ModelAliases;
+  setModelAliases: (aliases: ModelAliases) => void;
+  autoRotationEnabled: boolean;
+  setAutoRotationEnabled: (enabled: boolean) => void;
+  rotationInterval: string;
+  setRotationInterval: (interval: string) => void;
+}
+
+// TODO: break apart this component into smaller sections
+const OptionalSettingsSection = ({
+  form,
+  team,
+  premiumUser,
+  guardrails,
+  prompts,
+  accessToken,
+  predefinedTags,
+  loggingSettings,
+  setLoggingSettings,
+  disabledCallbacks,
+  setDisabledCallbacks,
+  modelAliases,
+  setModelAliases,
+  autoRotationEnabled,
+  setAutoRotationEnabled,
+  rotationInterval,
+  setRotationInterval,
+}: OptionalSettingsSectionProps) => {
+  return (
+    <div className="mb-8">
+      <Accordion className="mt-4 mb-4">
+        <AccordionHeader>
+          <Title className="m-0">Optional Settings</Title>
+        </AccordionHeader>
+        <AccordionBody>
+          <Form.Item
+            className="mt-4"
+            label={
+              <span>
+                Max Budget (USD){" "}
+                <Tooltip title="Maximum amount in USD this key can spend. When reached, the key will be blocked from making further requests">
+                  <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+                </Tooltip>
+              </span>
+            }
+            name="max_budget"
+            help={`Budget cannot exceed team max budget: $${team?.max_budget !== null && team?.max_budget !== undefined ? team?.max_budget : "unlimited"}`}
+            rules={[
+              {
+                validator: async (_, value) => {
+                  if (value && team && team.max_budget !== null && value > team.max_budget) {
+                    throw new Error(
+                      `Budget cannot exceed team max budget: $${formatNumberWithCommas(team.max_budget, 4)}`,
+                    );
+                  }
+                },
+              },
+            ]}
+          >
+            <NumericalInput step={0.01} precision={2} width={200} />
+          </Form.Item>
+          <Form.Item
+            className="mt-4"
+            label={
+              <span>
+                Reset Budget{" "}
+                <Tooltip title="How often the budget should reset. For example, setting 'daily' will reset the budget every 24 hours">
+                  <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+                </Tooltip>
+              </span>
+            }
+            name="budget_duration"
+            help={`Team Reset Budget: ${team?.budget_duration !== null && team?.budget_duration !== undefined ? team?.budget_duration : "None"}`}
+          >
+            <BudgetDurationDropdown onChange={(value) => form.setFieldValue("budget_duration", value)} />
+          </Form.Item>
+          <Form.Item
+            className="mt-4"
+            label={
+              <span>
+                Tokens per minute Limit (TPM){" "}
+                <Tooltip title="Maximum number of tokens this key can process per minute. Helps control usage and costs">
+                  <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+                </Tooltip>
+              </span>
+            }
+            name="tpm_limit"
+            help={`TPM cannot exceed team TPM limit: ${team?.tpm_limit !== null && team?.tpm_limit !== undefined ? team?.tpm_limit : "unlimited"}`}
+            rules={[
+              {
+                validator: async (_, value) => {
+                  if (value && team && team.tpm_limit !== null && value > team.tpm_limit) {
+                    throw new Error(`TPM limit cannot exceed team TPM limit: ${team.tpm_limit}`);
+                  }
+                },
+              },
+            ]}
+          >
+            <NumericalInput step={1} width={400} />
+          </Form.Item>
+          <RateLimitTypeFormItem
+            type="tpm"
+            name="tpm_limit_type"
+            className="mt-4"
+            initialValue={null}
+            form={form}
+            showDetailedDescriptions={true}
+          />
+          <Form.Item
+            className="mt-4"
+            label={
+              <span>
+                Requests per minute Limit (RPM){" "}
+                <Tooltip title="Maximum number of API requests this key can make per minute. Helps prevent abuse and manage load">
+                  <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+                </Tooltip>
+              </span>
+            }
+            name="rpm_limit"
+            help={`RPM cannot exceed team RPM limit: ${team?.rpm_limit !== null && team?.rpm_limit !== undefined ? team?.rpm_limit : "unlimited"}`}
+            rules={[
+              {
+                validator: async (_, value) => {
+                  if (value && team && team.rpm_limit !== null && value > team.rpm_limit) {
+                    throw new Error(`RPM limit cannot exceed team RPM limit: ${team.rpm_limit}`);
+                  }
+                },
+              },
+            ]}
+          >
+            <NumericalInput step={1} width={400} />
+          </Form.Item>
+          <RateLimitTypeFormItem
+            type="rpm"
+            name="rpm_limit_type"
+            className="mt-4"
+            initialValue={null}
+            form={form}
+            showDetailedDescriptions={true}
+          />
+          <Form.Item
+            label={
+              <span>
+                Guardrails{" "}
+                <Tooltip title="Apply safety guardrails to this key to filter content or enforce policies">
+                  <a
+                    href="https://docs.litellm.ai/docs/proxy/guardrails/quick_start"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={(e) => e.stopPropagation()} // Prevent accordion from collapsing when clicking link
+                  >
+                    <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+                  </a>
+                </Tooltip>
+              </span>
+            }
+            name="guardrails"
+            className="mt-4"
+            help={
+              premiumUser
+                ? "Select existing guardrails or enter new ones"
+                : "Premium feature - Upgrade to set guardrails by key"
+            }
+          >
+            <Select
+              mode="tags"
+              style={{ width: "100%" }}
+              disabled={!premiumUser}
+              placeholder={
+                !premiumUser ? "Premium feature - Upgrade to set guardrails by key" : "Select or enter guardrails"
+              }
+              options={guardrails.map((name) => ({ value: name, label: name }))}
+            />
+          </Form.Item>
+          <Form.Item
+            label={
+              <span>
+                Prompts{" "}
+                <Tooltip title="Allow this key to use specific prompt templates">
+                  <a
+                    href="https://docs.litellm.ai/docs/proxy/prompt_management"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={(e) => e.stopPropagation()} // Prevent accordion from collapsing when clicking link
+                  >
+                    <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+                  </a>
+                </Tooltip>
+              </span>
+            }
+            name="prompts"
+            className="mt-4"
+            help={
+              premiumUser
+                ? "Select existing prompts or enter new ones"
+                : "Premium feature - Upgrade to set prompts by key"
+            }
+          >
+            <Select
+              mode="tags"
+              style={{ width: "100%" }}
+              disabled={!premiumUser}
+              placeholder={!premiumUser ? "Premium feature - Upgrade to set prompts by key" : "Select or enter prompts"}
+              options={prompts.map((name) => ({ value: name, label: name }))}
+            />
+          </Form.Item>
+          <Form.Item
+            label={
+              <span>
+                Allowed Vector Stores{" "}
+                <Tooltip title="Select which vector stores this key can access. If none selected, the key will have access to all available vector stores">
+                  <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+                </Tooltip>
+              </span>
+            }
+            name="allowed_vector_store_ids"
+            className="mt-4"
+            help="Select vector stores this key can access. Leave empty for access to all vector stores"
+          >
+            <VectorStoreSelector
+              onChange={(values: string[]) => form.setFieldValue("allowed_vector_store_ids", values)}
+              value={form.getFieldValue("allowed_vector_store_ids")}
+              accessToken={accessToken}
+              placeholder="Select vector stores (optional)"
+            />
+          </Form.Item>
+
+          <Form.Item
+            label={
+              <span>
+                Allowed MCP Servers{" "}
+                <Tooltip title="Select which MCP servers or access groups this key can access. ">
+                  <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+                </Tooltip>
+              </span>
+            }
+            name="allowed_mcp_servers_and_groups"
+            className="mt-4"
+            help="Select MCP servers or access groups this key can access. "
+          >
+            <MCPServerSelector
+              onChange={(val: any) => form.setFieldValue("allowed_mcp_servers_and_groups", val)}
+              value={form.getFieldValue("allowed_mcp_servers_and_groups")}
+              accessToken={accessToken}
+              placeholder="Select MCP servers or access groups (optional)"
+            />
+          </Form.Item>
+
+          <Form.Item
+            label={
+              <span>
+                Metadata{" "}
+                <Tooltip title="JSON object with additional information about this key. Used for tracking or custom logic">
+                  <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+                </Tooltip>
+              </span>
+            }
+            name="metadata"
+            className="mt-4"
+          >
+            <Input.TextArea rows={4} placeholder="Enter metadata as JSON" />
+          </Form.Item>
+          <Form.Item
+            label={
+              <span>
+                Tags{" "}
+                <Tooltip title="Tags for tracking spend and/or doing tag-based routing. Used for analytics and filtering">
+                  <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+                </Tooltip>
+              </span>
+            }
+            name="tags"
+            className="mt-4"
+            help={`Tags for tracking spend and/or doing tag-based routing.`}
+          >
+            <Select
+              mode="tags"
+              style={{ width: "100%" }}
+              placeholder="Enter tags"
+              tokenSeparators={[","]}
+              options={predefinedTags}
+            />
+          </Form.Item>
+
+          {premiumUser ? (
+            <Accordion className="mt-4 mb-4">
+              <AccordionHeader>
+                <b>Logging Settings</b>
+              </AccordionHeader>
+              <AccordionBody>
+                <div className="mt-4">
+                  <PremiumLoggingSettings
+                    value={loggingSettings}
+                    onChange={setLoggingSettings}
+                    premiumUser={true}
+                    disabledCallbacks={disabledCallbacks}
+                    onDisabledCallbacksChange={setDisabledCallbacks}
+                  />
+                </div>
+              </AccordionBody>
+            </Accordion>
+          ) : (
+            <Tooltip
+              title={
+                <span>
+                  Key-level logging settings is an enterprise feature, get in touch -
+                  <a href="https://www.litellm.ai/enterprise" target="_blank">
+                    https://www.litellm.ai/enterprise
+                  </a>
+                </span>
+              }
+              placement="top"
+            >
+              <div style={{ position: "relative" }}>
+                <div style={{ opacity: 0.5 }}>
+                  <Accordion className="mt-4 mb-4">
+                    <AccordionHeader>
+                      <b>Logging Settings</b>
+                    </AccordionHeader>
+                    <AccordionBody>
+                      <div className="mt-4">
+                        <PremiumLoggingSettings
+                          value={loggingSettings}
+                          onChange={setLoggingSettings}
+                          premiumUser={false}
+                          disabledCallbacks={disabledCallbacks}
+                          onDisabledCallbacksChange={setDisabledCallbacks}
+                        />
+                      </div>
+                    </AccordionBody>
+                  </Accordion>
+                </div>
+                <div style={{ position: "absolute", inset: 0, cursor: "not-allowed" }} />
+              </div>
+            </Tooltip>
+          )}
+
+          <Accordion className="mt-4 mb-4">
+            <AccordionHeader>
+              <b>Model Aliases</b>
+            </AccordionHeader>
+            <AccordionBody>
+              <div className="mt-4">
+                <Text className="text-sm text-gray-600 mb-4">
+                  Create custom aliases for models that can be used in API calls. This allows you to create shortcuts
+                  for specific models.
+                </Text>
+                <ModelAliasManager
+                  accessToken={accessToken}
+                  initialModelAliases={modelAliases}
+                  onAliasUpdate={setModelAliases}
+                  showExampleConfig={false}
+                />
+              </div>
+            </AccordionBody>
+          </Accordion>
+
+          <Accordion className="mt-4 mb-4">
+            <AccordionHeader>
+              <b>Key Lifecycle</b>
+            </AccordionHeader>
+            <AccordionBody>
+              <div className="mt-4">
+                <KeyLifecycleSettings
+                  form={form}
+                  autoRotationEnabled={autoRotationEnabled}
+                  onAutoRotationChange={setAutoRotationEnabled}
+                  rotationInterval={rotationInterval}
+                  onRotationIntervalChange={setRotationInterval}
+                />
+              </div>
+            </AccordionBody>
+          </Accordion>
+          <Accordion className="mt-4 mb-4">
+            <AccordionHeader>
+              <div className="flex items-center gap-2">
+                <b>Advanced Settings</b>
+                <Tooltip
+                  title={
+                    <span>
+                      Learn more about advanced settings in our{" "}
+                      <a
+                        href={
+                          proxyBaseUrl
+                            ? `${proxyBaseUrl}/#/key%20management/generate_key_fn_key_generate_post`
+                            : `/#/key%20management/generate_key_fn_key_generate_post`
+                        }
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-blue-400 hover:text-blue-300"
+                      >
+                        documentation
+                      </a>
+                    </span>
+                  }
+                >
+                  <InfoCircleOutlined className="text-gray-400 hover:text-gray-300 cursor-help" />
+                </Tooltip>
+              </div>
+            </AccordionHeader>
+            <AccordionBody>
+              <SchemaFormFields
+                schemaComponent="GenerateKeyRequest"
+                form={form}
+                excludedFields={[
+                  "key_alias",
+                  "team_id",
+                  "models",
+                  "duration",
+                  "metadata",
+                  "tags",
+                  "guardrails",
+                  "max_budget",
+                  "budget_duration",
+                  "tpm_limit",
+                  "rpm_limit",
+                ]}
+              />
+            </AccordionBody>
+          </Accordion>
+        </AccordionBody>
+      </Accordion>
+    </div>
+  );
+};
+
+export default OptionalSettingsSection;
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx
new file mode 100644
index 0000000000..fdfb3893f6
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx
@@ -0,0 +1,130 @@
+import { Button as Button2, Form, Radio, Select, Tooltip } from "antd";
+import { Title } from "@tremor/react";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import TeamDropdown from "@/components/common_components/team_dropdown";
+import React from "react";
+import { Team } from "@/components/key_team_helpers/key_list";
+import { UserOption } from "@/app/(console)/virtual-keys/components/CreateKeyModal/types";
+
+interface OwnershipSectionProps {
+  team: Team | null;
+  teams: Team[] | null;
+  userRole: string | null;
+  userOptions: UserOption[];
+  keyOwner: string;
+  setKeyOwner: React.Dispatch<React.SetStateAction<string>>;
+  handleUserSearch: (q: string) => void;
+  userSearchLoading: boolean;
+  handleUserSelect: (q: string, option: UserOption) => void;
+  setSelectedCreateKeyTeam: React.Dispatch<React.SetStateAction<Team | null>>;
+  setIsCreateUserModalVisible: (visible: boolean) => void;
+}
+
+const OwnershipSection = ({
+  team,
+  teams,
+  userRole,
+  userOptions,
+  keyOwner,
+  setKeyOwner,
+  handleUserSearch,
+  userSearchLoading,
+  handleUserSelect,
+  setSelectedCreateKeyTeam,
+  setIsCreateUserModalVisible,
+}: OwnershipSectionProps) => {
+  return (
+    <div className="mb-8">
+      <Title className="mb-4">Key Ownership</Title>
+      <Form.Item
+        label={
+          <span>
+            Owned By{" "}
+            <Tooltip title="Select who will own this API key">
+              <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+            </Tooltip>
+          </span>
+        }
+        className="mb-4"
+      >
+        <Radio.Group onChange={(e) => setKeyOwner(e.target.value)} value={keyOwner}>
+          <Radio value="you">You</Radio>
+          <Radio value="service_account">Service Account</Radio>
+          {userRole === "Admin" && <Radio value="another_user">Another User</Radio>}
+        </Radio.Group>
+      </Form.Item>
+
+      {keyOwner === "another_user" && (
+        <Form.Item
+          label={
+            <span>
+              User ID{" "}
+              <Tooltip title="The user who will own this key and be responsible for its usage">
+                <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+              </Tooltip>
+            </span>
+          }
+          name="user_id"
+          className="mt-4"
+          rules={[
+            {
+              required: keyOwner === "another_user",
+              message: `Please input the user ID of the user you are assigning the key to`,
+            },
+          ]}
+        >
+          <div>
+            <div style={{ display: "flex", marginBottom: "8px" }}>
+              <Select
+                showSearch
+                placeholder="Type email to search for users"
+                filterOption={false}
+                onSearch={handleUserSearch}
+                onSelect={(value, option) => handleUserSelect(value, option as UserOption)}
+                options={userOptions}
+                loading={userSearchLoading}
+                allowClear
+                style={{ width: "100%" }}
+                notFoundContent={userSearchLoading ? "Searching..." : "No users found"}
+              />
+              <Button2 onClick={() => setIsCreateUserModalVisible(true)} style={{ marginLeft: "8px" }}>
+                Create User
+              </Button2>
+            </div>
+            <div className="text-xs text-gray-500">Search by email to find users</div>
+          </div>
+        </Form.Item>
+      )}
+      <Form.Item
+        label={
+          <span>
+            Team{" "}
+            <Tooltip title="The team this key belongs to, which determines available models and budget limits">
+              <InfoCircleOutlined style={{ marginLeft: "4px" }} />
+            </Tooltip>
+          </span>
+        }
+        name="team_id"
+        initialValue={team ? team.team_id : null}
+        className="mt-4"
+        rules={[
+          {
+            required: keyOwner === "service_account",
+            message: "Please select a team for the service account",
+          },
+        ]}
+        help={keyOwner === "service_account" ? "required" : ""}
+      >
+        <TeamDropdown
+          teams={teams}
+          onChange={(teamId) => {
+            const selectedTeam = teams?.find((t) => t.team_id === teamId) || null;
+            setSelectedCreateKeyTeam(selectedTeam);
+          }}
+        />
+      </Form.Item>
+    </div>
+  );
+};
+
+export default OwnershipSection;
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx
new file mode 100644
index 0000000000..9f4d7528a8
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx
@@ -0,0 +1,233 @@
+import { Button as Button2, Form, FormInstance, Modal } from "antd";
+import { Text } from "@tremor/react";
+import { keyCreateCall, keyCreateServiceAccountCall } from "@/components/networking";
+import React, { useEffect, useState } from "react";
+import { Team } from "@/components/key_team_helpers/key_list";
+import SaveKeyModal from "@/app/(console)/virtual-keys/components/SaveKeyModal";
+import NotificationsManager from "@/components/molecules/notifications_manager";
+import {
+  useGuardrailsAndPrompts,
+  useMcpAccessGroups,
+  useTeamModels,
+  useUserModels,
+  useUserSearch,
+} from "@/app/(console)/virtual-keys/components/CreateKeyModal/hooks";
+import OwnershipSection from "@/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection";
+import KeyDetailsSection from "@/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection";
+import OptionalSettingsSection from "@/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection";
+import { ModelAliases } from "@/app/(console)/virtual-keys/components/CreateKeyModal/types";
+import { getPredefinedTags, prepareFormValues } from "@/app/(console)/virtual-keys/components/CreateKeyModal/utils";
+import { fetchTeams } from "@/app/(console)/virtual-keys/networking";
+import useTeams from "@/app/(console)/virtual-keys/hooks/useTeams";
+import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+
+export interface CreateKeyModalProps {
+  isModalVisible: boolean;
+  setIsModalVisible: (isModalVisible: boolean) => void;
+  form: FormInstance;
+  handleUserSelect: (_value: string, option: UserOption) => void;
+  setIsCreateUserModalVisible: (visible: boolean) => void;
+  team: Team | null;
+  data: any[] | null;
+  addKey: (data: any) => void;
+}
+
+interface User {
+  user_id: string;
+  user_email: string;
+  role?: string;
+}
+
+interface UserOption {
+  label: string;
+  value: string;
+  user: User;
+}
+
+const CreateKeyModal = ({
+  isModalVisible,
+  setIsModalVisible,
+  form,
+  handleUserSelect,
+  setIsCreateUserModalVisible,
+  team,
+  data,
+  addKey,
+}: CreateKeyModalProps) => {
+  const { userId: userID, userRole, accessToken, premiumUser } = useAuthorized();
+  const [apiKey, setApiKey] = useState<string | null>(null);
+  const [keyOwner, setKeyOwner] = useState("you");
+  const [keyType, setKeyType] = useState<string>("default");
+
+  const [selectedCreateKeyTeam, setSelectedCreateKeyTeam] = useState<Team | null>(team);
+
+  const [softBudget, setSoftBudget] = useState<string | null>(null);
+  const [loggingSettings, setLoggingSettings] = useState<any[]>([]);
+  const [disabledCallbacks, setDisabledCallbacks] = useState<string[]>([]);
+  const [autoRotationEnabled, setAutoRotationEnabled] = useState<boolean>(false);
+  const [rotationInterval, setRotationInterval] = useState<string>("30d");
+  const [modelAliases, setModelAliases] = useState<ModelAliases>({});
+  const predefinedTags = getPredefinedTags(data);
+
+  const { options: userOptions, loading: userSearchLoading, onSearch: handleUserSearch } = useUserSearch();
+  const { guardrails, prompts } = useGuardrailsAndPrompts();
+  const teams = useTeams();
+  const mcpAccessGroups = useMcpAccessGroups();
+  const userModels = useUserModels();
+  const modelsToPick = useTeamModels(selectedCreateKeyTeam);
+
+  const isTeamSelectionRequired = modelsToPick.includes("no-default-models");
+  const isFormDisabled = isTeamSelectionRequired && !selectedCreateKeyTeam;
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+    setApiKey(null);
+    setSelectedCreateKeyTeam(null);
+    form.resetFields();
+    setLoggingSettings([]);
+    setDisabledCallbacks([]);
+    setKeyType("default");
+    setModelAliases({});
+    setAutoRotationEnabled(false);
+    setRotationInterval("30d");
+  };
+
+  const handleOk = () => {
+    setIsModalVisible(false);
+    form.resetFields();
+    setLoggingSettings([]);
+    setDisabledCallbacks([]);
+    setKeyType("default");
+    setModelAliases({});
+    setAutoRotationEnabled(false);
+    setRotationInterval("30d");
+  };
+
+  const handleCreate = async (formValues: Record<string, any>) => {
+    try {
+      const newKeyAlias = formValues?.key_alias ?? "";
+      const newKeyTeamId = formValues?.team_id ?? null;
+
+      const existingKeyAliases = data?.filter((k) => k.team_id === newKeyTeamId).map((k) => k.key_alias) ?? [];
+
+      if (existingKeyAliases.includes(newKeyAlias)) {
+        throw new Error(
+          `Key alias ${newKeyAlias} already exists for team with ID ${newKeyTeamId}, please provide another key alias`,
+        );
+      }
+
+      NotificationsManager.info("Making API Call");
+      setIsModalVisible(true);
+
+      const prepared = prepareFormValues(formValues, {
+        keyOwner,
+        userID,
+        loggingSettings,
+        disabledCallbacks,
+        autoRotationEnabled,
+        rotationInterval,
+        modelAliases,
+      });
+
+      let response;
+      if (keyOwner === "service_account") {
+        response = await keyCreateServiceAccountCall(accessToken, prepared);
+      } else {
+        response = await keyCreateCall(accessToken, userID, prepared);
+      }
+
+      // TODO: change logic to trigger API call in parent component
+      addKey(response);
+
+      setApiKey(response["key"]);
+      setSoftBudget(response["soft_budget"]);
+      NotificationsManager.success("API Key Created");
+      form.resetFields();
+      localStorage.removeItem("userData" + userID);
+    } catch (error) {
+      console.log("error in create key:", error);
+      NotificationsManager.fromBackend(`Error creating the key: ${error}`);
+    }
+  };
+
+  useEffect(() => {
+    form.setFieldValue("models", []);
+  }, [selectedCreateKeyTeam, accessToken, userID, userRole, form]);
+
+  return (
+    <div>
+      <Modal open={isModalVisible} width={1000} footer={null} onOk={handleOk} onCancel={handleCancel}>
+        <Form form={form} onFinish={handleCreate} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} labelAlign="left">
+          <OwnershipSection
+            team={team}
+            teams={teams}
+            userRole={userRole}
+            userOptions={userOptions}
+            keyOwner={keyOwner}
+            setKeyOwner={setKeyOwner}
+            handleUserSearch={handleUserSearch}
+            userSearchLoading={userSearchLoading}
+            handleUserSelect={handleUserSelect}
+            setSelectedCreateKeyTeam={setSelectedCreateKeyTeam}
+            setIsCreateUserModalVisible={setIsCreateUserModalVisible}
+          />
+
+          {/* Show message when team selection is required */}
+          {isFormDisabled && (
+            <div className="mb-8 p-4 bg-blue-50 border border-blue-200 rounded-md">
+              <Text className="text-blue-800 text-sm">
+                Please select a team to continue configuring your API key. If you do not see any teams, please contact
+                your Proxy Admin to either provide you with access to models or to add you to a team.
+              </Text>
+            </div>
+          )}
+
+          {/* Section 2: Key Details */}
+          {!isFormDisabled && (
+            <KeyDetailsSection
+              form={form}
+              keyOwner={keyOwner}
+              modelsToPick={modelsToPick}
+              keyType={keyType}
+              setKeyType={setKeyType}
+            />
+          )}
+
+          {/* Section 3: Optional Settings */}
+          {!isFormDisabled && (
+            <OptionalSettingsSection
+              form={form}
+              team={team}
+              premiumUser={premiumUser}
+              guardrails={guardrails}
+              prompts={prompts}
+              accessToken={accessToken}
+              predefinedTags={predefinedTags}
+              loggingSettings={loggingSettings}
+              setLoggingSettings={setLoggingSettings}
+              disabledCallbacks={disabledCallbacks}
+              setDisabledCallbacks={setDisabledCallbacks}
+              modelAliases={modelAliases}
+              setModelAliases={setModelAliases}
+              autoRotationEnabled={autoRotationEnabled}
+              setAutoRotationEnabled={setAutoRotationEnabled}
+              rotationInterval={rotationInterval}
+              setRotationInterval={setRotationInterval}
+            />
+          )}
+
+          <div style={{ textAlign: "right", marginTop: "10px" }}>
+            <Button2 htmlType="submit" disabled={isFormDisabled} style={{ opacity: isFormDisabled ? 0.5 : 1 }}>
+              Create Key
+            </Button2>
+          </div>
+        </Form>
+      </Modal>
+      {apiKey && (
+        <SaveKeyModal apiKey={apiKey} isModalVisible={isModalVisible} handleOk={handleOk} handleCancel={handleCancel} />
+      )}
+    </div>
+  );
+};
+
+export default CreateKeyModal;
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/index.ts b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/index.ts
new file mode 100644
index 0000000000..ca3c4a663b
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/index.ts
@@ -0,0 +1,5 @@
+export * from "./useGuardrailsAndPrompts";
+export * from "./useMcpAccessGroups";
+export * from "./useUserModels";
+export * from "./useTeamModels";
+export * from "./useUserSearch";
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts
new file mode 100644
index 0000000000..d092219f70
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts
@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { fetchGuardrails, fetchPrompts } from "@/app/(console)/virtual-keys/components/CreateKeyModal/networking";
+import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+
+export const useGuardrailsAndPrompts = () => {
+  const [guardrails, setGuardrails] = useState<string[]>([]);
+  const [prompts, setPrompts] = useState<string[]>([]);
+  const { accessToken } = useAuthorized();
+
+  useEffect(() => {
+    if (!accessToken) {
+      setGuardrails([]);
+      setPrompts([]);
+      return;
+    }
+    (async () => {
+      const [g, p] = await Promise.all([fetchGuardrails(accessToken), fetchPrompts(accessToken)]);
+      setGuardrails(g || []);
+      setPrompts(p || []);
+    })();
+  }, [accessToken]);
+
+  return { guardrails, prompts };
+};
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts
new file mode 100644
index 0000000000..8313f6e8d6
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts
@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+import { getMCPAccessGroups } from "@/app/(console)/virtual-keys/components/CreateKeyModal/networking";
+import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+
+export const useMcpAccessGroups = () => {
+  const [mcpAccessGroups, setMcpAccessGroups] = useState<string[]>([]);
+  const { accessToken } = useAuthorized();
+
+  useEffect(() => {
+    if (!accessToken) {
+      setMcpAccessGroups([]);
+      return;
+    }
+    (async () => {
+      const groups = await getMCPAccessGroups(accessToken);
+      setMcpAccessGroups(groups || []);
+    })();
+  }, [accessToken]);
+
+  return mcpAccessGroups;
+};
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts
new file mode 100644
index 0000000000..c28ef0ecdb
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts
@@ -0,0 +1,26 @@
+import { useEffect, useMemo, useState } from "react";
+import type { Team } from "@/components/key_team_helpers/key_list";
+import { fetchTeamModels } from "@/app/(console)/virtual-keys/components/CreateKeyModal/networking";
+import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+
+export const useTeamModels = (selectedTeam: Team | null) => {
+  const { userId: userID, userRole, accessToken } = useAuthorized();
+  const [modelsToPick, setModelsToPick] = useState<string[]>([]);
+
+  // turn array into a stable dep so it only re-runs when contents change
+  const selectedTeamModelsKey = useMemo(() => (selectedTeam?.models ?? []).join("|"), [selectedTeam?.models]);
+
+  useEffect(() => {
+    if (!userID || !userRole || !accessToken) {
+      setModelsToPick([]);
+      return;
+    }
+    (async () => {
+      const fetched = await fetchTeamModels(userID, userRole, accessToken, selectedTeam?.team_id ?? null);
+      const union = Array.from(new Set([...(selectedTeam?.models ?? []), ...(fetched || [])]));
+      setModelsToPick(union);
+    })();
+  }, [userID, userRole, accessToken, selectedTeam?.team_id, selectedTeamModelsKey, selectedTeam?.models]);
+
+  return modelsToPick;
+};
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts
new file mode 100644
index 0000000000..ddba6879cc
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts
@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+import { getUserModelNames } from "@/app/(console)/virtual-keys/components/CreateKeyModal/networking";
+import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+
+export const useUserModels = () => {
+  const { userId: userID, userRole, accessToken } = useAuthorized();
+  const [userModels, setUserModels] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (!userID || !userRole || !accessToken) {
+      setUserModels([]);
+      return;
+    }
+    (async () => {
+      const modelNames = await getUserModelNames(userID, userRole, accessToken);
+      setUserModels(modelNames || []);
+    })();
+  }, [userID, userRole, accessToken]);
+
+  return userModels;
+};
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts
new file mode 100644
index 0000000000..782beccf48
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts
@@ -0,0 +1,41 @@
+import { useEffect, useMemo, useState } from "react";
+import { debounce } from "lodash";
+import { searchUserOptionsByEmail } from "@/app/(console)/virtual-keys/components/CreateKeyModal/networking";
+import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+
+type User = { user_id: string; user_email: string; role?: string };
+export interface UserOption {
+  label: string;
+  value: string;
+  user: User;
+}
+
+export const useUserSearch = (delay = 300) => {
+  const { accessToken } = useAuthorized();
+  const [options, setOptions] = useState<UserOption[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const doSearch = async (raw: string) => {
+    const q = raw?.trim();
+    if (!q || !accessToken) {
+      setOptions([]);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await searchUserOptionsByEmail(accessToken, q);
+      setOptions(res || []);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const onSearch = useMemo(() => debounce(doSearch, delay), [accessToken, delay]);
+
+  useEffect(() => {
+    return () => onSearch.cancel();
+  }, [onSearch]);
+
+  return { options, loading, onSearch };
+};
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/networking.ts b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/networking.ts
new file mode 100644
index 0000000000..6cb4e2f7f0
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/networking.ts
@@ -0,0 +1,84 @@
+import {
+  fetchMCPAccessGroups,
+  getGuardrailsList,
+  getPromptsList,
+  modelAvailableCall,
+  User,
+  userFilterUICall,
+} from "@/components/networking";
+import { ModelAvailableResponse, UserOption } from "@/app/(console)/virtual-keys/components/CreateKeyModal/types";
+
+export const fetchGuardrails = async (accessToken: string) => {
+  try {
+    const response = await getGuardrailsList(accessToken);
+    return response.guardrails.map((g: { guardrail_name: string }) => g.guardrail_name);
+  } catch (error) {
+    console.error("Failed to fetch guardrails:", error);
+    return [];
+  }
+};
+
+export const fetchPrompts = async (accessToken: string) => {
+  try {
+    const response = await getPromptsList(accessToken);
+    return response.prompts.map((prompt) => prompt.prompt_id);
+  } catch (error) {
+    console.error("Failed to fetch prompts:", error);
+    return [];
+  }
+};
+
+export const searchUserOptionsByEmail = async (accessToken: string, emailQuery: string): Promise<UserOption[]> => {
+  const params = new URLSearchParams();
+  params.append("user_email", emailQuery);
+
+  const response = await userFilterUICall(accessToken, params);
+  const users: User[] = response;
+
+  return users.map((user) => ({
+    label: `${user.user_email} (${user.user_id})`,
+    value: user.user_id,
+    user,
+  }));
+};
+
+export const getUserModelNames = async (userID: string, userRole: string, accessToken: string): Promise<string[]> => {
+  const res: ModelAvailableResponse = await modelAvailableCall(accessToken, userID, userRole);
+  return (res?.data ?? []).map((m) => m.id);
+};
+
+export const fetchTeamModels = async (
+  userID: string,
+  userRole: string,
+  accessToken: string,
+  teamID: string | null,
+): Promise<string[]> => {
+  try {
+    if (userID === null || userRole === null) {
+      return [];
+    }
+
+    if (accessToken !== null) {
+      const model_available = await modelAvailableCall(accessToken, userID, userRole, true, teamID, true);
+      let available_model_names = model_available["data"].map((element: { id: string }) => element.id);
+      console.log("available_model_names:", available_model_names);
+      return available_model_names;
+    }
+    return [];
+  } catch (error) {
+    console.error("Error fetching user models:", error);
+    return [];
+  }
+};
+
+export const getMCPAccessGroups = async (accessToken: string): Promise<string[]> => {
+  try {
+    if (accessToken == null) {
+      return [];
+    }
+    return await fetchMCPAccessGroups(accessToken);
+  } catch (error) {
+    console.error("Failed to fetch MCP access groups:", error);
+    return [];
+  }
+};
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/types.ts b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/types.ts
new file mode 100644
index 0000000000..4d48df82d4
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/types.ts
@@ -0,0 +1,17 @@
+export interface User {
+  user_id: string;
+  user_email: string;
+  role?: string;
+}
+
+export interface UserOption {
+  label: string;
+  value: string;
+  user: User;
+}
+
+export type Model = { id: string };
+
+export type ModelAvailableResponse = { data: Model[] };
+
+export type ModelAliases = { [key: string]: string };
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/utils.ts b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/utils.ts
new file mode 100644
index 0000000000..066770cf46
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/utils.ts
@@ -0,0 +1,187 @@
+import { mapDisplayToInternalNames } from "@/components/callback_info_helpers";
+import { ModelAliases } from "@/app/(console)/virtual-keys/components/CreateKeyModal/types";
+
+export const getPredefinedTags = (data: any[] | null) => {
+  let allTags = [];
+
+  console.log("data:", JSON.stringify(data));
+
+  if (data) {
+    for (let key of data) {
+      if (key["metadata"] && key["metadata"]["tags"]) {
+        allTags.push(...key["metadata"]["tags"]);
+      }
+    }
+  }
+
+  const uniqueTags = Array.from(new Set(allTags)).map((tag) => ({
+    value: tag,
+    label: tag,
+  }));
+
+  console.log("uniqueTags:", uniqueTags);
+  return uniqueTags;
+};
+
+type AnyObj = Record<string, any>;
+
+type PrepareOptions = {
+  keyOwner: string;
+  userID: string;
+  loggingSettings: any[];
+  disabledCallbacks: string[];
+  autoRotationEnabled: boolean;
+  rotationInterval: string;
+  modelAliases: ModelAliases;
+};
+
+export function safeParseMetadata(metadataStr: string | undefined): AnyObj {
+  try {
+    return JSON.parse(metadataStr || "{}");
+  } catch (error) {
+    console.error("Error parsing metadata:", error);
+    return {};
+  }
+}
+
+export function withOwnerAssignments(
+  values: AnyObj,
+  { keyOwner, userID }: Pick<PrepareOptions, "keyOwner" | "userID">,
+): AnyObj {
+  // If owned by "you", set user_id
+  const base = keyOwner === "you" ? { ...values, user_id: userID } : { ...values };
+  return base;
+}
+
+export function enrichMetadata(
+  metadata: AnyObj,
+  values: AnyObj,
+  {
+    keyOwner,
+    loggingSettings,
+    disabledCallbacks,
+  }: Pick<PrepareOptions, "keyOwner" | "loggingSettings" | "disabledCallbacks">,
+): AnyObj {
+  let next = { ...metadata };
+
+  // If it's a service account, add the service_account_id to the metadata
+  if (keyOwner === "service_account") {
+    next = { ...next, service_account_id: values.key_alias };
+  }
+
+  // Add logging settings to the metadata
+  if (Array.isArray(loggingSettings) && loggingSettings.length > 0) {
+    next = { ...next, logging: loggingSettings.filter((config: any) => config?.callback_name) };
+  }
+
+  // Add disabled callbacks to the metadata
+  if (Array.isArray(disabledCallbacks) && disabledCallbacks.length > 0) {
+    const mappedDisabledCallbacks = mapDisplayToInternalNames(disabledCallbacks);
+    next = { ...next, litellm_disabled_callbacks: mappedDisabledCallbacks };
+  }
+
+  return next;
+}
+
+export function withAutoRotation(
+  values: AnyObj,
+  { autoRotationEnabled, rotationInterval }: Pick<PrepareOptions, "autoRotationEnabled" | "rotationInterval">,
+): AnyObj {
+  if (!autoRotationEnabled) return { ...values };
+  return { ...values, auto_rotate: true, rotation_interval: rotationInterval };
+}
+
+export function withDurationNoop(values: AnyObj): AnyObj {
+  // Preserve the original no-op logic: if duration exists, set it to itself
+  if (values.duration) {
+    return { ...values, duration: values.duration };
+  }
+  return { ...values };
+}
+
+export function mergeObjectPermission(values: AnyObj, patch: AnyObj): AnyObj {
+  const object_permission = { ...(values.object_permission || {}), ...patch };
+  return { ...values, object_permission };
+}
+
+export function withVectorStores(values: AnyObj): AnyObj {
+  const { allowed_vector_store_ids, ...rest } = values;
+  if (Array.isArray(allowed_vector_store_ids) && allowed_vector_store_ids.length > 0) {
+    const patched = mergeObjectPermission(rest, { vector_stores: allowed_vector_store_ids });
+    return patched; // original field removed by destructuring
+  }
+  return { ...values };
+}
+
+export function withMcpServersAndGroups(values: AnyObj): AnyObj {
+  const { allowed_mcp_servers_and_groups, ...rest } = values;
+  const servers = allowed_mcp_servers_and_groups?.servers;
+  const accessGroups = allowed_mcp_servers_and_groups?.accessGroups;
+
+  const hasServers = Array.isArray(servers) && servers.length > 0;
+  const hasAccessGroups = Array.isArray(accessGroups) && accessGroups.length > 0;
+
+  if (!hasServers && !hasAccessGroups) return { ...values };
+
+  let patched = { ...rest };
+  if (hasServers) patched = mergeObjectPermission(patched, { mcp_servers: servers });
+  if (hasAccessGroups) patched = mergeObjectPermission(patched, { mcp_access_groups: accessGroups });
+
+  // original field removed by destructuring
+  return patched;
+}
+
+export function withMcpAccessGroups(values: AnyObj): AnyObj {
+  const { allowed_mcp_access_groups, ...rest } = values;
+  if (Array.isArray(allowed_mcp_access_groups) && allowed_mcp_access_groups.length > 0) {
+    const patched = mergeObjectPermission(rest, { mcp_access_groups: allowed_mcp_access_groups });
+    return patched; // original field removed by destructuring
+  }
+  return { ...values };
+}
+
+function withAliases(values: AnyObj, modelAliases: ModelAliases): AnyObj {
+  if (modelAliases && Object.keys(modelAliases).length > 0) {
+    return { ...values, aliases: JSON.stringify(modelAliases) };
+  }
+  return { ...values };
+}
+
+function withMetadataString(values: AnyObj, metadata: AnyObj): AnyObj {
+  return { ...values, metadata: JSON.stringify(metadata) };
+}
+
+export function prepareFormValues(initialValues: AnyObj, opts: PrepareOptions): AnyObj {
+  // Step 1: assign user id if needed
+  let values = withOwnerAssignments(initialValues, { keyOwner: opts.keyOwner, userID: opts.userID });
+
+  // Step 2: metadata parse & enrichment
+  const parsedMetadata = safeParseMetadata(values.metadata);
+  const enrichedMetadata = enrichMetadata(parsedMetadata, values, {
+    keyOwner: opts.keyOwner,
+    loggingSettings: opts.loggingSettings,
+    disabledCallbacks: opts.disabledCallbacks,
+  });
+
+  // Step 3: auto-rotation
+  values = withAutoRotation(values, {
+    autoRotationEnabled: opts.autoRotationEnabled,
+    rotationInterval: opts.rotationInterval,
+  });
+
+  // Step 4: duration (no-op preservation)
+  values = withDurationNoop(values);
+
+  // Step 5: commit metadata string
+  values = withMetadataString(values, enrichedMetadata);
+
+  // Step 6: object_permission transformations
+  values = withVectorStores(values);
+  values = withMcpServersAndGroups(values);
+  values = withMcpAccessGroups(values);
+
+  // Step 7: aliases
+  values = withAliases(values, opts.modelAliases);
+
+  return values;
+}
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/KeyInfoView.tsx b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/KeyInfoView.tsx
new file mode 100644
index 0000000000..1c7185f1dc
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/KeyInfoView.tsx
@@ -0,0 +1,697 @@
+import React, { useEffect, useState } from "react";
+import {
+  Card,
+  Text,
+  Button,
+  Grid,
+  Tab,
+  TabList,
+  TabGroup,
+  TabPanel,
+  TabPanels,
+  Title,
+  Badge,
+} from "@tremor/react";
+import { ArrowLeftIcon, TrashIcon, RefreshIcon } from "@heroicons/react/outline";
+import { Form, Tooltip, Button as AntdButton } from "antd";
+import { copyToClipboard as utilCopyToClipboard, formatNumberWithCommas } from "@/utils/dataUtils";
+import { CopyIcon, CheckIcon } from "lucide-react";
+import { KeyResponse } from "@/components/key_team_helpers/key_list"
+import { mapDisplayToInternalNames, mapInternalToDisplayNames } from "@/components/callback_info_helpers"
+import NotificationManager from "@/components/molecules/notifications_manager"
+import { keyDeleteCall, keyUpdateCall } from "@/components/networking"
+import { parseErrorMessage } from "@/components/shared/errorUtils"
+import { rolesWithWriteAccess } from "@/utils/roles"
+import { RegenerateKeyModal } from "@/components/organisms/regenerate_key_modal"
+import ObjectPermissionsView from "@/components/object_permissions_view"
+import LoggingSettingsView from "@/components/logging_settings_view"
+import { extractLoggingSettings, formatMetadataForDisplay } from "@/components/key_info_utils"
+import AutoRotationView from "@/components/common_components/AutoRotationView"
+import { KeyEditView } from "@/components/templates/key_edit_view"
+
+
+interface KeyInfoViewProps {
+  keyId: string;
+  onClose: () => void;
+  keyData: KeyResponse | undefined;
+  onKeyDataUpdate?: (data: Partial<KeyResponse>) => void;
+  onDelete?: () => void;
+  accessToken: string | null;
+  userID: string | null;
+  userRole: string | null;
+  teams: any[] | null;
+  premiumUser: boolean;
+  setAccessToken?: (token: string) => void;
+  backButtonText?: string;
+}
+
+const KeyInfoView = ({
+                                      keyId,
+                                      onClose,
+                                      keyData,
+                                      accessToken,
+                                      userID,
+                                      userRole,
+                                      teams,
+                                      onKeyDataUpdate,
+                                      onDelete,
+                                      premiumUser,
+                                      setAccessToken,
+                                      backButtonText = "Back to Keys",
+                                    }: KeyInfoViewProps) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [form] = Form.useForm();
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [deleteConfirmInput, setDeleteConfirmInput] = useState("");
+  const [isRegenerateModalOpen, setIsRegenerateModalOpen] = useState(false);
+  const [copiedStates, setCopiedStates] = useState<Record<string, boolean>>({});
+
+  // Add local state to maintain key data and track regeneration
+  const [currentKeyData, setCurrentKeyData] = useState<KeyResponse | undefined>(keyData);
+  const [lastRegeneratedAt, setLastRegeneratedAt] = useState<Date | null>(null);
+  const [isRecentlyRegenerated, setIsRecentlyRegenerated] = useState(false);
+
+  // Update local state when keyData prop changes (but don't reset to undefined)
+  useEffect(() => {
+    if (keyData) {
+      setCurrentKeyData(keyData);
+    }
+  }, [keyData]);
+
+  // Reset recent regeneration indicator after 5 seconds
+  useEffect(() => {
+    if (isRecentlyRegenerated) {
+      const timer = setTimeout(() => {
+        setIsRecentlyRegenerated(false);
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [isRecentlyRegenerated]);
+
+  // Use currentKeyData instead of keyData throughout the component
+  if (!currentKeyData) {
+    return (
+      <div className="p-4">
+        <Button icon={ArrowLeftIcon} variant="light" onClick={onClose} className="mb-4">
+          {backButtonText}
+        </Button>
+        <Text>Key not found</Text>
+      </div>
+    );
+  }
+
+  const handleKeyUpdate = async (formValues: Record<string, any>) => {
+    try {
+      if (!accessToken) return;
+
+      const currentKey = formValues.token;
+      formValues.key = currentKey;
+
+      // Guard premium features
+      if (!premiumUser) {
+        delete formValues.guardrails;
+        delete formValues.prompts;
+      }
+
+      // Handle object_permission updates
+      if (formValues.vector_stores !== undefined) {
+        formValues.object_permission = {
+          ...currentKeyData.object_permission,
+          vector_stores: formValues.vector_stores || [],
+        };
+        // Remove vector_stores from the top level as it should be in object_permission
+        delete formValues.vector_stores;
+      }
+
+      if (formValues.mcp_servers_and_groups !== undefined) {
+        const { servers, accessGroups } = formValues.mcp_servers_and_groups || { servers: [], accessGroups: [] };
+        formValues.object_permission = {
+          ...currentKeyData.object_permission,
+          mcp_servers: servers || [],
+          mcp_access_groups: accessGroups || [],
+        };
+        // Remove mcp_servers_and_groups from the top level as it should be in object_permission
+        delete formValues.mcp_servers_and_groups;
+      }
+
+      // Convert metadata back to an object if it exists and is a string
+      if (formValues.metadata && typeof formValues.metadata === "string") {
+        try {
+          const parsedMetadata = JSON.parse(formValues.metadata);
+          formValues.metadata = {
+            ...parsedMetadata,
+            ...(formValues.guardrails?.length > 0 ? { guardrails: formValues.guardrails } : {}),
+            ...(formValues.logging_settings ? { logging: formValues.logging_settings } : {}),
+            ...(formValues.disabled_callbacks?.length > 0
+              ? {
+                litellm_disabled_callbacks: mapDisplayToInternalNames(formValues.disabled_callbacks),
+              }
+              : {}),
+          };
+        } catch (error) {
+          console.error("Error parsing metadata JSON:", error);
+          NotificationManager.error("Invalid metadata JSON");
+          return;
+        }
+      } else {
+        formValues.metadata = {
+          ...(formValues.metadata || {}),
+          ...(formValues.guardrails?.length > 0 ? { guardrails: formValues.guardrails } : {}),
+          ...(formValues.logging_settings ? { logging: formValues.logging_settings } : {}),
+          ...(formValues.disabled_callbacks?.length > 0
+            ? {
+              litellm_disabled_callbacks: mapDisplayToInternalNames(formValues.disabled_callbacks),
+            }
+            : {}),
+        };
+      }
+
+      delete formValues.logging_settings;
+
+      // Convert budget_duration to API format
+      if (formValues.budget_duration) {
+        const durationMap: Record<string, string> = {
+          daily: "24h",
+          weekly: "7d",
+          monthly: "30d",
+        };
+        formValues.budget_duration = durationMap[formValues.budget_duration];
+      }
+
+      const newKeyValues = await keyUpdateCall(accessToken, formValues);
+
+      // Update local state
+      setCurrentKeyData((prevData) => (prevData ? { ...prevData, ...newKeyValues } : undefined));
+
+      if (onKeyDataUpdate) {
+        onKeyDataUpdate(newKeyValues);
+      }
+      NotificationManager.success("Key updated successfully");
+      setIsEditing(false);
+      // Refresh key data here if needed
+    } catch (error) {
+      NotificationManager.fromBackend(parseErrorMessage(error));
+      console.error("Error updating key:", error);
+    }
+  };
+
+  const handleDelete = async () => {
+    try {
+      if (!accessToken) return;
+      await keyDeleteCall(accessToken as string, currentKeyData.token || currentKeyData.token_id);
+      NotificationManager.success("Key deleted successfully");
+      if (onDelete) {
+        onDelete();
+      }
+      onClose();
+    } catch (error) {
+      console.error("Error deleting the key:", error);
+      NotificationManager.fromBackend(error);
+    }
+    // Reset the confirmation input
+    setDeleteConfirmInput("");
+  };
+
+  const copyToClipboard = async (text: string, key: string) => {
+    const success = await utilCopyToClipboard(text);
+    if (success) {
+      setCopiedStates((prev) => ({ ...prev, [key]: true }));
+      setTimeout(() => {
+        setCopiedStates((prev) => ({ ...prev, [key]: false }));
+      }, 2000);
+    }
+  };
+
+  const handleRegenerateKeyUpdate = (updatedKeyData: Partial<KeyResponse>) => {
+    // Update local state immediately with ALL the new data
+    setCurrentKeyData((prevData) => {
+      if (!prevData) return undefined;
+      const newData = {
+        ...prevData,
+        ...updatedKeyData, // This should include the new token (key-id)
+        // Update the created_at to show when it was regenerated
+        created_at: new Date().toLocaleString(),
+      };
+      return newData;
+    });
+
+    // Track regeneration timestamp
+    setLastRegeneratedAt(new Date());
+    setIsRecentlyRegenerated(true);
+
+    if (onKeyDataUpdate) {
+      onKeyDataUpdate({
+        ...updatedKeyData,
+        created_at: new Date().toLocaleString(),
+      });
+    }
+  };
+
+  // Update the formatTimestamp function to use the desired date format
+  const formatTimestamp = (timestamp: string | Date) => {
+    const date = new Date(timestamp);
+    const dateStr = date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+    const timeStr = date.toLocaleTimeString("en-US", {
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: true,
+    });
+    return `${dateStr} at ${timeStr}`;
+  };
+
+  return (
+    <div className="w-full h-screen p-4">
+      <div className="flex justify-between items-center mb-6">
+        <div>
+          <Button icon={ArrowLeftIcon} variant="light" onClick={onClose} className="mb-4">
+            {backButtonText}
+          </Button>
+          <Title>{currentKeyData.key_alias || "API Key"}</Title>
+
+          <div className="flex items-center cursor-pointer mb-2 space-y-6">
+            <div>
+              <Text className="text-xs text-gray-400 uppercase tracking-wide mt-2">Key ID</Text>
+              <Text className="text-gray-500 font-mono text-sm">{currentKeyData.token_id || currentKeyData.token}</Text>
+            </div>
+            <AntdButton
+              type="text"
+              size="small"
+              icon={copiedStates["key-id"] ? <CheckIcon size={12} /> : <CopyIcon size={12} />}
+              onClick={() => copyToClipboard(currentKeyData.token_id || currentKeyData.token, "key-id")}
+              className={`ml-2 transition-all duration-200${
+                copiedStates["key-id"]
+                  ? "text-green-600 bg-green-50 border-green-200"
+                  : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"
+              }`}
+            />
+          </div>
+
+          {/* Add timestamp and regeneration indicator */}
+          <div className="flex items-center gap-2 flex-wrap">
+            <Text className="text-sm text-gray-500">
+              {currentKeyData.updated_at && currentKeyData.updated_at !== currentKeyData.created_at
+                ? `Updated: ${formatTimestamp(currentKeyData.updated_at)}`
+                : `Created: ${formatTimestamp(currentKeyData.created_at)}`}
+            </Text>
+
+            {isRecentlyRegenerated && (
+              <Badge color="green" size="xs" className="animate-pulse">
+                Recently Regenerated
+              </Badge>
+            )}
+
+            {lastRegeneratedAt && (
+              <Badge color="blue" size="xs">
+                Regenerated
+              </Badge>
+            )}
+          </div>
+        </div>
+        {userRole && rolesWithWriteAccess.includes(userRole) && (
+          <div className="flex gap-2">
+            <Tooltip
+              title={!premiumUser ? "This is a LiteLLM Enterprise feature, and requires a valid key to use." : ""}
+            >
+              <span className="inline-block">
+                <Button
+                  icon={RefreshIcon}
+                  variant="secondary"
+                  onClick={() => setIsRegenerateModalOpen(true)}
+                  className="flex items-center"
+                  disabled={!premiumUser}
+                >
+                  Regenerate Key
+                </Button>
+              </span>
+            </Tooltip>
+            <Button
+              icon={TrashIcon}
+              variant="secondary"
+              onClick={() => setIsDeleteModalOpen(true)}
+              className="flex items-center"
+            >
+              Delete Key
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* Add RegenerateKeyModal */}
+      <RegenerateKeyModal
+        selectedToken={currentKeyData}
+        visible={isRegenerateModalOpen}
+        onClose={() => setIsRegenerateModalOpen(false)}
+        accessToken={accessToken}
+        premiumUser={premiumUser}
+        setAccessToken={setAccessToken}
+        onKeyUpdate={handleRegenerateKeyUpdate}
+      />
+
+      {/* Delete Confirmation Modal */}
+      {isDeleteModalOpen &&
+        (() => {
+          const keyName = currentKeyData?.key_alias || currentKeyData?.token_id || "API Key";
+          const isValid = deleteConfirmInput === keyName;
+          return (
+            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+              <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl min-h-[380px] py-6 overflow-hidden transform transition-all flex flex-col justify-between">
+                <div>
+                  <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
+                    <h3 className="text-lg font-semibold text-gray-900">Delete Key</h3>
+                    <button
+                      onClick={() => {
+                        setIsDeleteModalOpen(false);
+                        setDeleteConfirmInput("");
+                      }}
+                      className="text-gray-400 hover:text-gray-500 focus:outline-none"
+                    >
+                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                    </button>
+                  </div>
+                  <div className="px-6 py-4">
+                    <div className="flex items-start gap-3 p-4 bg-red-50 border border-red-100 rounded-md mb-5">
+                      <div className="text-red-500 mt-0.5">
+                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.082 16.5c-.77.833.192 2.5 1.732 2.5z"
+                          />
+                        </svg>
+                      </div>
+                      <div>
+                        <p className="text-base font-medium text-red-600">
+                          Warning: You are about to delete this API key.
+                        </p>
+                        <p className="text-base text-red-600 mt-2">
+                          This action is irreversible and will immediately revoke access for any applications using this
+                          key.
+                        </p>
+                      </div>
+                    </div>
+                    <p className="text-base text-gray-600 mb-5">Are you sure you want to delete this API key?</p>
+                    <div className="mb-5">
+                      <label className="block text-base font-medium text-gray-700 mb-2">
+                        {`Type `}
+                        <span className="underline">{keyName}</span>
+                        {` to confirm deletion:`}
+                      </label>
+                      <input
+                        type="text"
+                        value={deleteConfirmInput}
+                        onChange={(e) => setDeleteConfirmInput(e.target.value)}
+                        placeholder="Enter key name exactly"
+                        className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-base"
+                        autoFocus
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div className="px-6 py-4 bg-gray-50 flex justify-end gap-4">
+                  <button
+                    onClick={() => {
+                      setIsDeleteModalOpen(false);
+                      setDeleteConfirmInput("");
+                    }}
+                    className="px-5 py-3 bg-white border border-gray-300 rounded-md text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={handleDelete}
+                    disabled={!isValid}
+                    className={`px-5 py-3 rounded-md text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 ${isValid ? "bg-red-600 hover:bg-red-700" : "bg-red-300 cursor-not-allowed"}`}
+                  >
+                    Delete Key
+                  </button>
+                </div>
+              </div>
+            </div>
+          );
+        })()}
+
+      <TabGroup>
+        <TabList className="mb-4">
+          <Tab>Overview</Tab>
+          <Tab>Settings</Tab>
+        </TabList>
+
+        <TabPanels>
+          {/* Overview Panel */}
+          <TabPanel>
+            <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-6">
+              <Card>
+                <Text>Spend</Text>
+                <div className="mt-2">
+                  <Title>${formatNumberWithCommas(currentKeyData.spend, 4)}</Title>
+                  <Text>
+                    of{" "}
+                    {currentKeyData.max_budget !== null
+                      ? `$${formatNumberWithCommas(currentKeyData.max_budget)}`
+                      : "Unlimited"}
+                  </Text>
+                </div>
+              </Card>
+
+              <Card>
+                <Text>Rate Limits</Text>
+                <div className="mt-2">
+                  <Text>TPM: {currentKeyData.tpm_limit !== null ? currentKeyData.tpm_limit : "Unlimited"}</Text>
+                  <Text>RPM: {currentKeyData.rpm_limit !== null ? currentKeyData.rpm_limit : "Unlimited"}</Text>
+                </div>
+              </Card>
+
+              <Card>
+                <Text>Models</Text>
+                <div className="mt-2 flex flex-wrap gap-2">
+                  {currentKeyData.models && currentKeyData.models.length > 0 ? (
+                    currentKeyData.models.map((model, index) => (
+                      <Badge key={index} color="red">
+                        {model}
+                      </Badge>
+                    ))
+                  ) : (
+                    <Text>No models specified</Text>
+                  )}
+                </div>
+              </Card>
+
+              <Card>
+                <ObjectPermissionsView
+                  objectPermission={currentKeyData.object_permission}
+                  variant="inline"
+                  accessToken={accessToken}
+                />
+              </Card>
+
+              <LoggingSettingsView
+                loggingConfigs={extractLoggingSettings(currentKeyData.metadata)}
+                disabledCallbacks={
+                  Array.isArray(currentKeyData.metadata?.litellm_disabled_callbacks)
+                    ? mapInternalToDisplayNames(currentKeyData.metadata.litellm_disabled_callbacks)
+                    : []
+                }
+                variant="card"
+              />
+
+              <AutoRotationView
+                autoRotate={currentKeyData.auto_rotate}
+                rotationInterval={currentKeyData.rotation_interval}
+                lastRotationAt={currentKeyData.last_rotation_at}
+                keyRotationAt={currentKeyData.key_rotation_at}
+                nextRotationAt={currentKeyData.next_rotation_at}
+                variant="card"
+              />
+            </Grid>
+          </TabPanel>
+
+          {/* Settings Panel */}
+          <TabPanel>
+            <Card className="overflow-y-auto max-h-[65vh]">
+              <div className="flex justify-between items-center mb-4">
+                <Title>Key Settings</Title>
+                {!isEditing && userRole && rolesWithWriteAccess.includes(userRole) && (
+                  <Button variant="light" onClick={() => setIsEditing(true)}>
+                    Edit Settings
+                  </Button>
+                )}
+              </div>
+
+              {isEditing ? (
+                <KeyEditView
+                  keyData={currentKeyData}
+                  onCancel={() => setIsEditing(false)}
+                  onSubmit={handleKeyUpdate}
+                  teams={teams}
+                  accessToken={accessToken}
+                  userID={userID}
+                  userRole={userRole}
+                  premiumUser={premiumUser}
+                />
+              ) : (
+                <div className="space-y-4">
+                  <div>
+                    <Text className="font-medium">Key ID</Text>
+                    <Text className="font-mono">{currentKeyData.token_id || currentKeyData.token}</Text>
+                  </div>
+
+                  <div>
+                    <Text className="font-medium">Key Alias</Text>
+                    <Text>{currentKeyData.key_alias || "Not Set"}</Text>
+                  </div>
+
+                  <div>
+                    <Text className="font-medium">Secret Key</Text>
+                    <Text className="font-mono">{currentKeyData.key_name}</Text>
+                  </div>
+
+                  <div>
+                    <Text className="font-medium">Team ID</Text>
+                    <Text>{currentKeyData.team_id || "Not Set"}</Text>
+                  </div>
+
+                  <div>
+                    <Text className="font-medium">Organization</Text>
+                    <Text>{currentKeyData.organization_id || "Not Set"}</Text>
+                  </div>
+
+                  <div>
+                    <Text className="font-medium">Created</Text>
+                    <Text>{formatTimestamp(currentKeyData.created_at)}</Text>
+                  </div>
+
+                  {lastRegeneratedAt && (
+                    <div>
+                      <Text className="font-medium">Last Regenerated</Text>
+                      <div className="flex items-center gap-2">
+                        <Text>{formatTimestamp(lastRegeneratedAt)}</Text>
+                        <Badge color="green" size="xs">
+                          Recent
+                        </Badge>
+                      </div>
+                    </div>
+                  )}
+
+                  <div>
+                    <Text className="font-medium">Expires</Text>
+                    <Text>{currentKeyData.expires ? formatTimestamp(currentKeyData.expires) : "Never"}</Text>
+                  </div>
+
+                  <AutoRotationView
+                    autoRotate={currentKeyData.auto_rotate}
+                    rotationInterval={currentKeyData.rotation_interval}
+                    lastRotationAt={currentKeyData.last_rotation_at}
+                    keyRotationAt={currentKeyData.key_rotation_at}
+                    nextRotationAt={currentKeyData.next_rotation_at}
+                    variant="inline"
+                    className="pt-4 border-t border-gray-200"
+                  />
+
+                  <div>
+                    <Text className="font-medium">Spend</Text>
+                    <Text>${formatNumberWithCommas(currentKeyData.spend, 4)} USD</Text>
+                  </div>
+
+                  <div>
+                    <Text className="font-medium">Budget</Text>
+                    <Text>
+                      {currentKeyData.max_budget !== null
+                        ? `$${formatNumberWithCommas(currentKeyData.max_budget, 2)}`
+                        : "Unlimited"}
+                    </Text>
+                  </div>
+
+                  <div>
+                    <Text className="font-medium">Prompts</Text>
+                    <Text>
+                      {Array.isArray(currentKeyData.metadata?.prompts) && currentKeyData.metadata.prompts.length > 0
+                        ? currentKeyData.metadata.prompts.map((prompt, index) => (
+                          <span key={index} className="px-2 mr-2 py-1 bg-blue-100 rounded text-xs">
+                              {prompt}
+                            </span>
+                        ))
+                        : "No prompts specified"}
+                    </Text>
+                  </div>
+
+                  <div>
+                    <Text className="font-medium">Models</Text>
+                    <div className="flex flex-wrap gap-2 mt-1">
+                      {currentKeyData.models && currentKeyData.models.length > 0 ? (
+                        currentKeyData.models.map((model, index) => (
+                          <span key={index} className="px-2 py-1 bg-blue-100 rounded text-xs">
+                            {model}
+                          </span>
+                        ))
+                      ) : (
+                        <Text>No models specified</Text>
+                      )}
+                    </div>
+                  </div>
+
+                  <div>
+                    <Text className="font-medium">Rate Limits</Text>
+                    <Text>TPM: {currentKeyData.tpm_limit !== null ? currentKeyData.tpm_limit : "Unlimited"}</Text>
+                    <Text>RPM: {currentKeyData.rpm_limit !== null ? currentKeyData.rpm_limit : "Unlimited"}</Text>
+                    <Text>
+                      Max Parallel Requests:{" "}
+                      {currentKeyData.max_parallel_requests !== null
+                        ? currentKeyData.max_parallel_requests
+                        : "Unlimited"}
+                    </Text>
+                    <Text>
+                      Model TPM Limits:{" "}
+                      {currentKeyData.metadata?.model_tpm_limit
+                        ? JSON.stringify(currentKeyData.metadata.model_tpm_limit)
+                        : "Unlimited"}
+                    </Text>
+                    <Text>
+                      Model RPM Limits:{" "}
+                      {currentKeyData.metadata?.model_rpm_limit
+                        ? JSON.stringify(currentKeyData.metadata.model_rpm_limit)
+                        : "Unlimited"}
+                    </Text>
+                  </div>
+
+                  <div>
+                    <Text className="font-medium">Metadata</Text>
+                    <pre className="bg-gray-100 p-2 rounded text-xs overflow-auto mt-1">
+                      {formatMetadataForDisplay(currentKeyData.metadata)}
+                    </pre>
+                  </div>
+
+                  <ObjectPermissionsView
+                    objectPermission={currentKeyData.object_permission}
+                    variant="inline"
+                    className="pt-4 border-t border-gray-200"
+                    accessToken={accessToken}
+                  />
+
+                  <LoggingSettingsView
+                    loggingConfigs={extractLoggingSettings(currentKeyData.metadata)}
+                    disabledCallbacks={
+                      Array.isArray(currentKeyData.metadata?.litellm_disabled_callbacks)
+                        ? mapInternalToDisplayNames(currentKeyData.metadata.litellm_disabled_callbacks)
+                        : []
+                    }
+                    variant="inline"
+                    className="pt-4 border-t border-gray-200"
+                  />
+                </div>
+              )}
+            </Card>
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
+    </div>
+  );
+}
+
+export default KeyInfoView;
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/SaveKeyModal.tsx b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/SaveKeyModal.tsx
new file mode 100644
index 0000000000..bd0d425c46
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/SaveKeyModal.tsx
@@ -0,0 +1,58 @@
+import { Button, Col, Grid, Text, Title } from "@tremor/react";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import { Modal } from "antd";
+import React from "react";
+import NotificationsManager from "@/components/molecules/notifications_manager";
+
+export interface SaveKeyModalProps {
+  apiKey: string;
+  isModalVisible: boolean;
+  handleOk: () => void;
+  handleCancel: () => void;
+}
+
+const SaveKeyModal = ({ apiKey, isModalVisible, handleOk, handleCancel }: SaveKeyModalProps) => {
+  const handleCopy = () => {
+    NotificationsManager.success("API Key copied to clipboard");
+  };
+
+  return (
+    <Modal open={isModalVisible} onOk={handleOk} onCancel={handleCancel} footer={null}>
+      <Grid numItems={1} className="gap-2 w-full">
+        <Title>Save your Key</Title>
+        <Col numColSpan={1}>
+          <p>
+            Please save this secret key somewhere safe and accessible. For security reasons,{" "}
+            <b>you will not be able to view it again</b> through your LiteLLM account. If you lose this secret key, you
+            will need to generate a new one.
+          </p>
+        </Col>
+        <Col numColSpan={1}>
+          {apiKey != null ? (
+            <div>
+              <Text className="mt-3">API Key:</Text>
+              <div
+                style={{
+                  background: "#f8f8f8",
+                  padding: "10px",
+                  borderRadius: "5px",
+                  marginBottom: "10px",
+                }}
+              >
+                <pre style={{ wordWrap: "break-word", whiteSpace: "normal" }}>{apiKey}</pre>
+              </div>
+
+              <CopyToClipboard text={apiKey} onCopy={handleCopy}>
+                <Button className="mt-3">Copy API Key</Button>
+              </CopyToClipboard>
+            </div>
+          ) : (
+            <Text>Key being created, this might take 30s</Text>
+          )}
+        </Col>
+      </Grid>
+    </Modal>
+  );
+};
+
+export default SaveKeyModal;
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
new file mode 100644
index 0000000000..5c32a736ae
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
@@ -0,0 +1,666 @@
+// TODO: refactor
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { ColumnDef } from "@tanstack/react-table";
+import { Button } from "@tremor/react";
+import { Tooltip } from "antd";
+import { updateExistingKeys } from "@/utils/dataUtils";
+import { flexRender, getCoreRowModel, getSortedRowModel, SortingState, useReactTable } from "@tanstack/react-table";
+import { Table, TableHead, TableHeaderCell, TableBody, TableRow, TableCell, Icon } from "@tremor/react";
+import { SwitchVerticalIcon, ChevronUpIcon, ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/outline";
+import { Badge, Text } from "@tremor/react";
+import { formatNumberWithCommas } from "@/utils/dataUtils";
+import { KeyResponse, Team } from "@/components/key_team_helpers/key_list";
+import { Organization, userListCall } from "@/components/networking";
+import { getModelDisplayName } from "@/components/key_team_helpers/fetch_available_models_team_key";
+import FilterComponent, { FilterOption } from "@/components/molecules/filter";
+import KeyInfoView from "@/components/templates/key_info_view";
+import { useFilterLogic } from "@/components/key_team_helpers/filter_logic";
+import useTeams from "@/app/(console)/virtual-keys/hooks/useTeams";
+import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+
+interface AllKeysTableProps {
+  keys: KeyResponse[];
+  setKeys: (keys: KeyResponse[] | ((prev: KeyResponse[]) => KeyResponse[])) => void;
+  isLoading?: boolean;
+  pagination: {
+    currentPage: number;
+    totalPages: number;
+    totalCount: number;
+  };
+  onPageChange: (page: number) => void;
+  pageSize?: number;
+  organizations: Organization[] | null;
+  refresh?: () => void;
+  onSortChange?: (sortBy: string, sortOrder: "asc" | "desc") => void;
+  currentSort?: {
+    sortBy: string;
+    sortOrder: "asc" | "desc";
+  };
+  setAccessToken?: (token: string) => void;
+}
+
+interface UserResponse {
+  user_id: string;
+  user_email: string;
+  user_role: string;
+}
+
+const VirtualKeysTable = ({
+  keys,
+  setKeys,
+  isLoading = false,
+  pagination,
+  onPageChange,
+  pageSize = 50,
+  organizations,
+  refresh,
+  onSortChange,
+  currentSort,
+  setAccessToken,
+}: AllKeysTableProps) => {
+  const { userId: userID, userRole, accessToken, premiumUser } = useAuthorized();
+  const teams = useTeams();
+  const [selectedKeyId, setSelectedKeyId] = useState<string | null>(null);
+  const [userList, setUserList] = useState<UserResponse[]>([]);
+  const [sorting, setSorting] = React.useState<SortingState>(() => {
+    if (currentSort) {
+      return [
+        {
+          id: currentSort.sortBy,
+          desc: currentSort.sortOrder === "desc",
+        },
+      ];
+    }
+    return [
+      {
+        id: "created_at",
+        desc: true,
+      },
+    ];
+  });
+  const [expandedAccordions, setExpandedAccordions] = useState<Record<string, boolean>>({});
+
+  // Use the filter logic hook
+
+  const { filters, filteredKeys, allKeyAliases, allTeams, allOrganizations, handleFilterChange, handleFilterReset } =
+    useFilterLogic({
+      keys,
+      teams,
+      organizations,
+      accessToken,
+    });
+
+  useEffect(() => {
+    if (accessToken) {
+      const user_IDs = keys.map((key) => key.user_id).filter((id) => id !== null);
+      const fetchUserList = async () => {
+        const userListData = await userListCall(accessToken, user_IDs, 1, 100);
+        setUserList(userListData.users);
+      };
+      fetchUserList();
+    }
+  }, [accessToken, keys]);
+
+  // Add a useEffect to call refresh when a key is created
+  useEffect(() => {
+    if (refresh) {
+      const handleStorageChange = () => {
+        refresh();
+      };
+
+      // Listen for storage events that might indicate a key was created
+      window.addEventListener("storage", handleStorageChange);
+
+      return () => {
+        window.removeEventListener("storage", handleStorageChange);
+      };
+    }
+  }, [refresh]);
+
+  const columns: ColumnDef<KeyResponse>[] = [
+    {
+      id: "expander",
+      header: () => null,
+      cell: ({ row }) =>
+        row.getCanExpand() ? (
+          <button onClick={row.getToggleExpandedHandler()} style={{ cursor: "pointer" }}>
+            {row.getIsExpanded() ? "▼" : "▶"}
+          </button>
+        ) : null,
+    },
+    {
+      id: "token",
+      accessorKey: "token",
+      header: "Key ID",
+      cell: (info) => (
+        <div className="overflow-hidden">
+          <Tooltip title={info.getValue() as string}>
+            <Button
+              size="xs"
+              variant="light"
+              className="font-mono text-blue-500 bg-blue-50 hover:bg-blue-100 text-xs font-normal px-2 py-0.5 text-left overflow-hidden truncate max-w-[200px]"
+              onClick={() => setSelectedKeyId(info.getValue() as string)}
+            >
+              {info.getValue() ? `${(info.getValue() as string).slice(0, 7)}...` : "-"}
+            </Button>
+          </Tooltip>
+        </div>
+      ),
+    },
+    {
+      id: "key_alias",
+      accessorKey: "key_alias",
+      header: "Key Alias",
+      cell: (info) => {
+        const value = info.getValue() as string;
+        return (
+          <Tooltip title={value}>{value ? (value.length > 20 ? `${value.slice(0, 20)}...` : value) : "-"}</Tooltip>
+        );
+      },
+    },
+    {
+      id: "key_name",
+      accessorKey: "key_name",
+      header: "Secret Key",
+      cell: (info) => <span className="font-mono text-xs">{info.getValue() as string}</span>,
+    },
+    {
+      id: "team_alias",
+      accessorKey: "team_id",
+      header: "Team Alias",
+      cell: ({ row, getValue }) => {
+        const teamId = getValue() as string;
+        const team = teams?.find((t) => t.team_id === teamId);
+        return team?.team_alias || "Unknown";
+      },
+    },
+    {
+      id: "team_id",
+      accessorKey: "team_id",
+      header: "Team ID",
+      cell: (info) => (
+        <Tooltip title={info.getValue() as string}>
+          {info.getValue() ? `${(info.getValue() as string).slice(0, 7)}...` : "-"}
+        </Tooltip>
+      ),
+    },
+    {
+      id: "organization_id",
+      accessorKey: "organization_id",
+      header: "Organization ID",
+      cell: (info) => (info.getValue() ? info.renderValue() : "-"),
+    },
+    {
+      id: "user_email",
+      accessorKey: "user_id",
+      header: "User Email",
+      cell: (info) => {
+        const userId = info.getValue() as string;
+        const user = userList.find((u) => u.user_id === userId);
+        return user?.user_email ? (
+          <Tooltip title={user?.user_email}>
+            <span>{user?.user_email.slice(0, 20)}...</span>
+          </Tooltip>
+        ) : (
+          "-"
+        );
+      },
+    },
+    {
+      id: "user_id",
+      accessorKey: "user_id",
+      header: "User ID",
+      cell: (info) => {
+        const userId = info.getValue() as string | null;
+        if (userId && userId.length > 15) {
+          return (
+            <Tooltip title={userId}>
+              <span>{userId.slice(0, 7)}...</span>
+            </Tooltip>
+          );
+        }
+        return userId ? userId : "-";
+      },
+    },
+    {
+      id: "created_at",
+      accessorKey: "created_at",
+      header: "Created At",
+      cell: (info) => {
+        const value = info.getValue();
+        return value ? new Date(value as string).toLocaleDateString() : "-";
+      },
+    },
+    {
+      id: "created_by",
+      accessorKey: "created_by",
+      header: "Created By",
+      cell: (info) => {
+        const value = info.getValue() as string | null;
+        if (value && value.length > 15) {
+          return (
+            <Tooltip title={value}>
+              <span>{value.slice(0, 7)}...</span>
+            </Tooltip>
+          );
+        }
+        return value;
+      },
+    },
+    {
+      id: "updated_at",
+      accessorKey: "updated_at",
+      header: "Updated At",
+      cell: (info) => {
+        const value = info.getValue();
+        return value ? new Date(value as string).toLocaleDateString() : "Never";
+      },
+    },
+    {
+      id: "expires",
+      accessorKey: "expires",
+      header: "Expires",
+      cell: (info) => {
+        const value = info.getValue();
+        return value ? new Date(value as string).toLocaleDateString() : "Never";
+      },
+    },
+    {
+      id: "spend",
+      accessorKey: "spend",
+      header: "Spend (USD)",
+      cell: (info) => formatNumberWithCommas(info.getValue() as number, 4),
+    },
+    {
+      id: "max_budget",
+      accessorKey: "max_budget",
+      header: "Budget (USD)",
+      cell: (info) => {
+        const maxBudget = info.getValue() as number | null;
+        if (maxBudget === null) {
+          return "Unlimited";
+        }
+        return `$${formatNumberWithCommas(maxBudget)}`;
+      },
+    },
+    {
+      id: "budget_reset_at",
+      accessorKey: "budget_reset_at",
+      header: "Budget Reset",
+      cell: (info) => {
+        const value = info.getValue();
+        return value ? new Date(value as string).toLocaleString() : "Never";
+      },
+    },
+    {
+      id: "models",
+      accessorKey: "models",
+      header: "Models",
+      cell: (info) => {
+        const models = info.getValue() as string[];
+        return (
+          <div className="flex flex-col py-2">
+            {Array.isArray(models) ? (
+              <div className="flex flex-col">
+                {models.length === 0 ? (
+                  <Badge size={"xs"} className="mb-1" color="red">
+                    <Text>All Proxy Models</Text>
+                  </Badge>
+                ) : (
+                  <>
+                    <div className="flex items-start">
+                      {models.length > 3 && (
+                        <div>
+                          <Icon
+                            icon={expandedAccordions[info.row.id] ? ChevronDownIcon : ChevronRightIcon}
+                            className="cursor-pointer"
+                            size="xs"
+                            onClick={() => {
+                              setExpandedAccordions((prev) => ({
+                                ...prev,
+                                [info.row.id]: !prev[info.row.id],
+                              }));
+                            }}
+                          />
+                        </div>
+                      )}
+                      <div className="flex flex-wrap gap-1">
+                        {models.slice(0, 3).map((model, index) =>
+                          model === "all-proxy-models" ? (
+                            <Badge key={index} size={"xs"} color="red">
+                              <Text>All Proxy Models</Text>
+                            </Badge>
+                          ) : (
+                            <Badge key={index} size={"xs"} color="blue">
+                              <Text>
+                                {model.length > 30
+                                  ? `${getModelDisplayName(model).slice(0, 30)}...`
+                                  : getModelDisplayName(model)}
+                              </Text>
+                            </Badge>
+                          ),
+                        )}
+                        {models.length > 3 && !expandedAccordions[info.row.id] && (
+                          <Badge size={"xs"} color="gray" className="cursor-pointer">
+                            <Text>
+                              +{models.length - 3} {models.length - 3 === 1 ? "more model" : "more models"}
+                            </Text>
+                          </Badge>
+                        )}
+                        {expandedAccordions[info.row.id] && (
+                          <div className="flex flex-wrap gap-1">
+                            {models.slice(3).map((model, index) =>
+                              model === "all-proxy-models" ? (
+                                <Badge key={index + 3} size={"xs"} color="red">
+                                  <Text>All Proxy Models</Text>
+                                </Badge>
+                              ) : (
+                                <Badge key={index + 3} size={"xs"} color="blue">
+                                  <Text>
+                                    {model.length > 30
+                                      ? `${getModelDisplayName(model).slice(0, 30)}...`
+                                      : getModelDisplayName(model)}
+                                  </Text>
+                                </Badge>
+                              ),
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+            ) : null}
+          </div>
+        );
+      },
+    },
+    {
+      id: "rate_limits",
+      header: "Rate Limits",
+      cell: ({ row }) => {
+        const key = row.original;
+        return (
+          <div>
+            <div>TPM: {key.tpm_limit !== null ? key.tpm_limit : "Unlimited"}</div>
+            <div>RPM: {key.rpm_limit !== null ? key.rpm_limit : "Unlimited"}</div>
+          </div>
+        );
+      },
+    },
+  ];
+
+  const filterOptions: FilterOption[] = [
+    {
+      name: "Team ID",
+      label: "Team ID",
+      isSearchable: true,
+      searchFn: async (searchText: string) => {
+        if (!allTeams || allTeams.length === 0) return [];
+
+        const filteredTeams = allTeams.filter(
+          (team) =>
+            team.team_id.toLowerCase().includes(searchText.toLowerCase()) ||
+            (team.team_alias && team.team_alias.toLowerCase().includes(searchText.toLowerCase())),
+        );
+
+        return filteredTeams.map((team) => ({
+          label: `${team.team_alias || team.team_id} (${team.team_id})`,
+          value: team.team_id,
+        }));
+      },
+    },
+    {
+      name: "Organization ID",
+      label: "Organization ID",
+      isSearchable: true,
+      searchFn: async (searchText: string) => {
+        if (!allOrganizations || allOrganizations.length === 0) return [];
+
+        const filteredOrgs = allOrganizations.filter(
+          (org) => org.organization_id?.toLowerCase().includes(searchText.toLowerCase()) ?? false,
+        );
+
+        return filteredOrgs
+          .filter((org) => org.organization_id !== null && org.organization_id !== undefined)
+          .map((org) => ({
+            label: `${org.organization_id || "Unknown"} (${org.organization_id})`,
+            value: org.organization_id as string,
+          }));
+      },
+    },
+    {
+      name: "Key Alias",
+      label: "Key Alias",
+      isSearchable: true,
+      searchFn: async (searchText) => {
+        const filteredKeyAliases = allKeyAliases.filter((key) => {
+          return key.toLowerCase().includes(searchText.toLowerCase());
+        });
+
+        return filteredKeyAliases.map((key) => {
+          return {
+            label: key,
+            value: key,
+          };
+        });
+      },
+    },
+    {
+      name: "User ID",
+      label: "User ID",
+      isSearchable: false,
+    },
+    {
+      name: "Key Hash",
+      label: "Key Hash",
+      isSearchable: false,
+    },
+  ];
+
+  console.log(`keys: ${JSON.stringify(keys)}`);
+
+  const table = useReactTable({
+    data: filteredKeys,
+    columns: columns.filter((col) => col.id !== "expander"),
+    state: {
+      sorting,
+    },
+    onSortingChange: (updaterOrValue) => {
+      const newSorting = typeof updaterOrValue === "function" ? updaterOrValue(sorting) : updaterOrValue;
+      console.log(`newSorting: ${JSON.stringify(newSorting)}`);
+      setSorting(newSorting);
+      if (newSorting && newSorting.length > 0) {
+        const sortState = newSorting[0];
+        const sortBy = sortState.id;
+        const sortOrder = sortState.desc ? "desc" : "asc";
+        console.log(`sortBy: ${sortBy}, sortOrder: ${sortOrder}`);
+        handleFilterChange({
+          ...filters,
+          "Sort By": sortBy,
+          "Sort Order": sortOrder,
+        });
+        onSortChange?.(sortBy, sortOrder);
+      }
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    enableSorting: true,
+    manualSorting: false,
+  });
+
+  // Update local sorting state when currentSort prop changes
+  React.useEffect(() => {
+    if (currentSort) {
+      setSorting([
+        {
+          id: currentSort.sortBy,
+          desc: currentSort.sortOrder === "desc",
+        },
+      ]);
+    }
+  }, [currentSort]);
+
+  return (
+    <div className="w-full h-full overflow-hidden">
+      {selectedKeyId ? (
+        <KeyInfoView
+          keyId={selectedKeyId}
+          onClose={() => setSelectedKeyId(null)}
+          keyData={filteredKeys.find((k) => k.token === selectedKeyId)}
+          onKeyDataUpdate={(updatedKeyData) => {
+            setKeys((keys) =>
+              keys.map((key) => {
+                if (key.token === updatedKeyData.token) {
+                  return updateExistingKeys(key, updatedKeyData);
+                }
+                return key;
+              }),
+            );
+            if (refresh) refresh(); // Minimal fix: refresh the full key list after an update
+          }}
+          onDelete={() => {
+            setKeys((keys) => keys.filter((key) => key.token !== selectedKeyId));
+            if (refresh) refresh(); // Minimal fix: refresh the full key list after a delete
+          }}
+          accessToken={accessToken}
+          userID={userID}
+          userRole={userRole}
+          teams={allTeams}
+          premiumUser={premiumUser}
+          setAccessToken={setAccessToken}
+        />
+      ) : (
+        <div className="border-b py-4 flex-1 overflow-hidden">
+          <div className="w-full mb-6">
+            <FilterComponent
+              options={filterOptions}
+              onApplyFilters={handleFilterChange}
+              initialValues={filters}
+              onResetFilters={handleFilterReset}
+            />
+          </div>
+
+          <div className="flex items-center justify-between w-full mb-4">
+            <span className="inline-flex text-sm text-gray-700">
+              Showing{" "}
+              {isLoading
+                ? "..."
+                : `${(pagination.currentPage - 1) * pageSize + 1} - ${Math.min(pagination.currentPage * pageSize, pagination.totalCount)}`}{" "}
+              of {isLoading ? "..." : pagination.totalCount} results
+            </span>
+
+            <div className="inline-flex items-center gap-2">
+              <span className="text-sm text-gray-700">
+                Page {isLoading ? "..." : pagination.currentPage} of {isLoading ? "..." : pagination.totalPages}
+              </span>
+
+              <button
+                onClick={() => onPageChange(pagination.currentPage - 1)}
+                disabled={isLoading || pagination.currentPage === 1}
+                className="px-3 py-1 text-sm border rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Previous
+              </button>
+
+              <button
+                onClick={() => onPageChange(pagination.currentPage + 1)}
+                disabled={isLoading || pagination.currentPage === pagination.totalPages}
+                className="px-3 py-1 text-sm border rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Next
+              </button>
+            </div>
+          </div>
+          <div className="h-[75vh] overflow-auto">
+            <div className="rounded-lg custom-border relative">
+              <div className="overflow-x-auto">
+                <Table className="[&_td]:py-0.5 [&_th]:py-1">
+                  <TableHead>
+                    {table.getHeaderGroups().map((headerGroup) => (
+                      <TableRow key={headerGroup.id}>
+                        {headerGroup.headers.map((header) => (
+                          <TableHeaderCell
+                            key={header.id}
+                            className={`py-1 h-8 ${
+                              header.id === "actions"
+                                ? "sticky right-0 bg-white shadow-[-4px_0_8px_-6px_rgba(0,0,0,0.1)]"
+                                : ""
+                            }`}
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            <div className="flex items-center justify-between gap-2">
+                              <div className="flex items-center">
+                                {header.isPlaceholder
+                                  ? null
+                                  : flexRender(header.column.columnDef.header, header.getContext())}
+                              </div>
+                              {header.id !== "actions" && (
+                                <div className="w-4">
+                                  {header.column.getIsSorted() ? (
+                                    {
+                                      asc: <ChevronUpIcon className="h-4 w-4 text-blue-500" />,
+                                      desc: <ChevronDownIcon className="h-4 w-4 text-blue-500" />,
+                                    }[header.column.getIsSorted() as string]
+                                  ) : (
+                                    <SwitchVerticalIcon className="h-4 w-4 text-gray-400" />
+                                  )}
+                                </div>
+                              )}
+                            </div>
+                          </TableHeaderCell>
+                        ))}
+                      </TableRow>
+                    ))}
+                  </TableHead>
+                  <TableBody>
+                    {isLoading ? (
+                      <TableRow>
+                        <TableCell colSpan={columns.length} className="h-8 text-center">
+                          <div className="text-center text-gray-500">
+                            <p>🚅 Loading keys...</p>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ) : filteredKeys.length > 0 ? (
+                      table.getRowModel().rows.map((row) => (
+                        <TableRow key={row.id} className="h-8">
+                          {row.getVisibleCells().map((cell) => (
+                            <TableCell
+                              key={cell.id}
+                              style={{
+                                maxWidth: "8-x",
+                                whiteSpace: "pre-wrap",
+                                overflow: "hidden",
+                              }}
+                              className={`py-0.5 max-h-8 overflow-hidden text-ellipsis whitespace-nowrap ${cell.column.id === "models" && (cell.getValue() as string[]).length > 3 ? "px-0" : ""}`}
+                            >
+                              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                            </TableCell>
+                          ))}
+                        </TableRow>
+                      ))
+                    ) : (
+                      <TableRow>
+                        <TableCell colSpan={columns.length} className="h-8 text-center">
+                          <div className="text-center text-gray-500">
+                            <p>No keys found</p>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    )}
+                  </TableBody>
+                </Table>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default VirtualKeysTable;
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/VirtualKeysTable/hooks/useFilterLogic.ts b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/VirtualKeysTable/hooks/useFilterLogic.ts
new file mode 100644
index 0000000000..ac174a554e
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/VirtualKeysTable/hooks/useFilterLogic.ts
@@ -0,0 +1,189 @@
+import { useCallback, useEffect, useState, useRef } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { debounce } from "lodash";
+import { KeyResponse, Team } from "@/components/key_team_helpers/key_list";
+import { keyListCall, Organization } from "@/components/networking";
+import { defaultPageSize } from "@/components/constants";
+import { fetchAllKeyAliases, fetchAllOrganizations, fetchAllTeams } from "@/components/key_team_helpers/filter_helpers";
+
+export interface FilterState {
+  "Team ID": string;
+  "Organization ID": string;
+  "Key Alias": string;
+  [key: string]: string;
+  "User ID": string;
+  "Sort By": string;
+  "Sort Order": string;
+}
+
+export function useFilterLogic({
+  keys,
+  teams,
+  organizations,
+  accessToken,
+}: {
+  keys: KeyResponse[];
+  teams: Team[] | null;
+  organizations: Organization[] | null;
+  accessToken: string | null;
+}) {
+  const defaultFilters: FilterState = {
+    "Team ID": "",
+    "Organization ID": "",
+    "Key Alias": "",
+    "User ID": "",
+    "Sort By": "created_at",
+    "Sort Order": "desc",
+  };
+  const [filters, setFilters] = useState<FilterState>(defaultFilters);
+  const [allTeams, setAllTeams] = useState<Team[]>(teams || []);
+  const [allOrganizations, setAllOrganizations] = useState<Organization[]>(organizations || []);
+  const [filteredKeys, setFilteredKeys] = useState<KeyResponse[]>(keys);
+  const lastSearchTimestamp = useRef(0);
+  const debouncedSearch = useCallback(
+    debounce(async (filters: FilterState) => {
+      if (!accessToken) {
+        return;
+      }
+
+      const currentTimestamp = Date.now();
+      lastSearchTimestamp.current = currentTimestamp;
+
+      try {
+        // Make the API call using userListCall with all filter parameters
+        const data = await keyListCall(
+          accessToken,
+          filters["Organization ID"] || null,
+          filters["Team ID"] || null,
+          filters["Key Alias"] || null,
+          filters["User ID"] || null,
+          filters["Key Hash"] || null,
+          1, // Reset to first page when searching
+          defaultPageSize,
+          filters["Sort By"] || null,
+          filters["Sort Order"] || null,
+        );
+
+        // Only update state if this is the most recent search
+        if (currentTimestamp === lastSearchTimestamp.current) {
+          if (data) {
+            setFilteredKeys(data.keys);
+            console.log("called from debouncedSearch filters:", JSON.stringify(filters));
+            console.log("called from debouncedSearch data:", JSON.stringify(data));
+          }
+        }
+      } catch (error) {
+        console.error("Error searching users:", error);
+      }
+    }, 300),
+    [accessToken],
+  );
+  // Apply filters to keys whenever keys or filters change
+  useEffect(() => {
+    if (!keys) {
+      setFilteredKeys([]);
+      return;
+    }
+
+    let result = [...keys];
+
+    // Apply Team ID filter
+    if (filters["Team ID"]) {
+      result = result.filter((key) => key.team_id === filters["Team ID"]);
+    }
+
+    // Apply Organization ID filter
+    if (filters["Organization ID"]) {
+      result = result.filter((key) => key.organization_id === filters["Organization ID"]);
+    }
+
+    setFilteredKeys(result);
+  }, [keys, filters]);
+
+  // Fetch all data for filters when component mounts
+  useEffect(() => {
+    const loadAllFilterData = async () => {
+      // Load all teams - no organization filter needed here
+      const teamsData = await fetchAllTeams(accessToken);
+      if (teamsData.length > 0) {
+        setAllTeams(teamsData);
+      }
+
+      // Load all organizations
+      const orgsData = await fetchAllOrganizations(accessToken);
+      if (orgsData.length > 0) {
+        setAllOrganizations(orgsData);
+      }
+    };
+
+    if (accessToken) {
+      loadAllFilterData();
+    }
+  }, [accessToken]);
+
+  const queryAllKeysQuery = useQuery({
+    queryKey: ["allKeys"],
+    queryFn: async () => {
+      if (!accessToken) throw new Error("Access token required");
+      return await fetchAllKeyAliases(accessToken);
+    },
+    enabled: !!accessToken,
+  });
+  const allKeyAliases = queryAllKeysQuery.data || [];
+
+  // Update teams and organizations when props change
+  useEffect(() => {
+    if (teams && teams.length > 0) {
+      setAllTeams((prevTeams) => {
+        // Only update if we don't already have a larger set of teams
+        return prevTeams.length < teams.length ? teams : prevTeams;
+      });
+    }
+  }, [teams]);
+
+  useEffect(() => {
+    if (organizations && organizations.length > 0) {
+      setAllOrganizations((prevOrgs) => {
+        // Only update if we don't already have a larger set of organizations
+        return prevOrgs.length < organizations.length ? organizations : prevOrgs;
+      });
+    }
+  }, [organizations]);
+
+  const handleFilterChange = (newFilters: Record<string, string>) => {
+    // Update filters state
+    setFilters({
+      "Team ID": newFilters["Team ID"] || "",
+      "Organization ID": newFilters["Organization ID"] || "",
+      "Key Alias": newFilters["Key Alias"] || "",
+      "User ID": newFilters["User ID"] || "",
+      "Sort By": newFilters["Sort By"] || "created_at",
+      "Sort Order": newFilters["Sort Order"] || "desc",
+    });
+
+    // Fetch keys based on new filters
+    const updatedFilters = {
+      ...filters,
+      ...newFilters,
+    };
+    debouncedSearch(updatedFilters);
+  };
+
+  const handleFilterReset = () => {
+    // Reset filters state
+    setFilters(defaultFilters);
+
+    // Reset selections
+    debouncedSearch(defaultFilters);
+  };
+
+  return {
+    filters,
+    filteredKeys,
+    allKeyAliases,
+    allTeams,
+    allOrganizations,
+    handleFilterChange,
+    handleFilterReset,
+  };
+}
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/hooks/useTeams.tsx b/ui/litellm-dashboard/src/app/(console)/virtual-keys/hooks/useTeams.tsx
new file mode 100644
index 0000000000..d1208737ec
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/hooks/useTeams.tsx
@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+import { fetchTeams } from "@/app/(console)/virtual-keys/networking";
+import { Team } from "@/components/key_team_helpers/key_list";
+import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+
+const useTeams = () => {
+  const [teams, setTeams] = useState<Team[]>([]);
+  const { accessToken, userId: userID, userRole } = useAuthorized();
+
+  useEffect(() => {
+    (async () => {
+      const fetched = await fetchTeams(accessToken, userID, userRole, null);
+      setTeams(fetched);
+    })();
+  }, [accessToken, userID, userRole]);
+
+  return teams;
+};
+
+export default useTeams;
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/networking.ts b/ui/litellm-dashboard/src/app/(console)/virtual-keys/networking.ts
new file mode 100644
index 0000000000..7fb09d61a5
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/networking.ts
@@ -0,0 +1,17 @@
+import { Organization, teamListCall } from "@/components/networking";
+
+export const fetchTeams = async (
+  accessToken: string,
+  userID: string | null,
+  userRole: string | null,
+  currentOrg: Organization | null,
+) => {
+  let givenTeams;
+  if (userRole != "Admin" && userRole != "Admin Viewer") {
+    givenTeams = await teamListCall(accessToken, currentOrg?.organization_id || null, userID);
+  } else {
+    givenTeams = await teamListCall(accessToken, currentOrg?.organization_id || null);
+  }
+
+  return givenTeams;
+};
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/page.tsx b/ui/litellm-dashboard/src/app/(console)/virtual-keys/page.tsx
new file mode 100644
index 0000000000..9554905088
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/page.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import VirtualKeysTable from "@/app/(console)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable";
+import { getCookie } from "@/utils/cookieUtils";
+import { jwtDecode } from "jwt-decode";
+import { useState } from "react";
+import useKeyList from "@/components/key_team_helpers/key_list";
+import { useRouter } from "next/navigation";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Col, Grid } from "@tremor/react";
+import CreateKey from "@/app/(console)/virtual-keys/components/CreateKey";
+import useAuthorized from "@/app/(console)/hooks/useAuthorized"
+
+const VirtualKeysPage = () => {
+  const {accessToken, userRole} = useAuthorized();
+  const [createClicked, setCreateClicked] = useState<boolean>(false);
+
+  const queryClient = new QueryClient();
+
+  const { keys, isLoading, error, pagination, refresh, setKeys } = useKeyList({
+    selectedKeyAlias: null,
+    currentOrg: null,
+    accessToken: accessToken || "",
+    createClicked,
+  });
+
+  const addKey = (data: any) => {
+    setKeys((prevData) => (prevData ? [...prevData, data] : [data]));
+    setCreateClicked(() => !createClicked);
+  };
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <div className="w-full mx-4 h-[75vh]">
+        <Grid numItems={1} className="gap-2 p-8 w-full mt-2">
+          <Col numColSpan={1} className="flex flex-col gap-2">
+            <CreateKey team={null} userRole={userRole} data={null} addKey={addKey} />
+            <VirtualKeysTable
+              keys={keys}
+              setKeys={setKeys}
+              pagination={pagination}
+              onPageChange={() => {}}
+              organizations={null}
+            />
+          </Col>
+        </Grid>
+      </div>
+    </QueryClientProvider>
+  );
+};
+
+export default VirtualKeysPage;
diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index 579e90e530..472b3f9a37 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -234,7 +234,6 @@ export default function CreateKeyPage() {
               teams={teams}
               keys={keys}
               setUserRole={setUserRole}
-              userEmail={userEmail}
               setUserEmail={setUserEmail}
               setTeams={setTeams}
               setKeys={setKeys}
@@ -275,7 +274,6 @@ export default function CreateKeyPage() {
                     teams={teams}
                     keys={keys}
                     setUserRole={setUserRole}
-                    userEmail={userEmail}
                     setUserEmail={setUserEmail}
                     setTeams={setTeams}
                     setKeys={setKeys}
diff --git a/ui/litellm-dashboard/src/components/leftnav.tsx b/ui/litellm-dashboard/src/components/leftnav.tsx
index e47691d3bb..d9326cb887 100644
--- a/ui/litellm-dashboard/src/components/leftnav.tsx
+++ b/ui/litellm-dashboard/src/components/leftnav.tsx
@@ -1,8 +1,4 @@
 import { Layout, Menu } from "antd";
-import Link from "next/link";
-import { List } from "postcss/lib/list";
-import { Text, Button } from "@tremor/react";
-import { useState } from "react";
 import {
   KeyOutlined,
   PlayCircleOutlined,
@@ -16,29 +12,17 @@ import {
   AppstoreOutlined,
   DatabaseOutlined,
   FileTextOutlined,
-  LineOutlined,
   LineChartOutlined,
   SafetyOutlined,
   ExperimentOutlined,
-  ThunderboltOutlined,
-  LockOutlined,
   ToolOutlined,
   TagsOutlined,
   BgColorsOutlined,
-  MenuFoldOutlined,
-  MenuUnfoldOutlined,
 } from "@ant-design/icons";
-import {
-  old_admin_roles,
-  v2_admin_role_names,
-  all_admin_roles,
-  rolesAllowedToSeeUsage,
-  rolesWithWriteAccess,
-  internalUserRoles,
-  isAdminRole,
-} from "../utils/roles";
+import { all_admin_roles, rolesWithWriteAccess, internalUserRoles, isAdminRole } from "../utils/roles";
 import UsageIndicator from "./usage_indicator";
 import { ConfigProvider } from "antd";
+import { useRouter } from "next/navigation";
 const { Sider } = Layout;
 
 // Define the props type
@@ -61,6 +45,7 @@ interface MenuItem {
 }
 
 const Sidebar: React.FC<SidebarProps> = ({ accessToken, setPage, userRole, defaultSelectedKey, collapsed = false }) => {
+  const router = useRouter();
   // Note: If a menu item does not have a role, it is visible to all roles.
   const menuItems: MenuItem[] = [
     {
@@ -252,6 +237,19 @@ const Sidebar: React.FC<SidebarProps> = ({ accessToken, setPage, userRole, defau
     return true;
   });
 
+  const navigateToPage = (page: string) => {
+    if (page === "api-keys") {
+      // Go to clean route and DO NOT call setPage to avoid any parent sync that re-adds ?page=api-keys
+      router.replace("/virtual-keys");
+      return;
+    }
+    const newSearchParams = new URLSearchParams(window.location.search);
+    newSearchParams.set("page", page);
+    // Use absolute root to replace everything after the domain
+    router.replace(`/?${newSearchParams.toString()}`);
+    setPage(page);
+  };
+
   return (
     <Layout style={{ minHeight: "100vh" }}>
       <Sider
@@ -295,21 +293,9 @@ const Sidebar: React.FC<SidebarProps> = ({ accessToken, setPage, userRole, defau
                 key: child.key,
                 icon: child.icon,
                 label: child.label,
-                onClick: () => {
-                  const newSearchParams = new URLSearchParams(window.location.search);
-                  newSearchParams.set("page", child.page);
-                  window.history.pushState(null, "", `?${newSearchParams.toString()}`);
-                  setPage(child.page);
-                },
+                onClick: () => navigateToPage(child.page),
               })),
-              onClick: !item.children
-                ? () => {
-                    const newSearchParams = new URLSearchParams(window.location.search);
-                    newSearchParams.set("page", item.page);
-                    window.history.pushState(null, "", `?${newSearchParams.toString()}`);
-                    setPage(item.page);
-                  }
-                : undefined,
+              onClick: !item.children ? () => navigateToPage(item.page) : undefined,
             }))}
           />
         </ConfigProvider>
diff --git a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
index c725466b98..20c1f5b3a3 100644
--- a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
@@ -131,6 +131,14 @@ export const fetchUserModels = async (
   }
 };
 
+
+/**
+ * ─────────────────────────────────────────────────────────────────────────
+ * @deprecated
+ * This component is being DEPRECATED in favor of src/app/(console)/virtual-keys/components/CreateKey.tsx
+ * Please contribute to the new refactor.
+ * ─────────────────────────────────────────────────────────────────────────
+ */
 const CreateKey: React.FC<CreateKeyProps> = ({
   userID,
   team,
diff --git a/ui/litellm-dashboard/src/components/templates/view_key_table.tsx b/ui/litellm-dashboard/src/components/templates/view_key_table.tsx
index bad8bdb983..f3ba12d56d 100644
--- a/ui/litellm-dashboard/src/components/templates/view_key_table.tsx
+++ b/ui/litellm-dashboard/src/components/templates/view_key_table.tsx
@@ -135,6 +135,13 @@ interface CombinedLimits {
   [key: string]: CombinedLimit; // Index signature allowing string keys
 }
 
+/**
+ * ─────────────────────────────────────────────────────────────────────────
+ * @deprecated
+ * This component is being DEPRECATED in favor of src/app/(console)/virtual-keys/components/VirtualKeysTable/
+ * Please contribute to the new refactor.
+ * ─────────────────────────────────────────────────────────────────────────
+ */
 const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
   userID,
   userRole,
diff --git a/ui/litellm-dashboard/src/utils/roles.ts b/ui/litellm-dashboard/src/utils/roles.ts
index aafeb010be..f542da105f 100644
--- a/ui/litellm-dashboard/src/utils/roles.ts
+++ b/ui/litellm-dashboard/src/utils/roles.ts
@@ -5,7 +5,7 @@ export const all_admin_roles = [...old_admin_roles, ...v2_admin_role_names];
 
 export const internalUserRoles = ["Internal User", "Internal Viewer"];
 export const rolesAllowedToSeeUsage = ["Admin", "Admin Viewer", "Internal User", "Internal Viewer"];
-export const rolesWithWriteAccess = ["Internal User", "Admin"];
+export const rolesWithWriteAccess = ["Internal User", "Admin", "proxy_admin"];
 
 // Helper function to check if a role is in all_admin_roles
 export const isAdminRole = (role: string): boolean => {

From 3f53d6b7ad32b7b55f9782f80e336bba55cd9a4c Mon Sep 17 00:00:00 2001
From: = <achintya.rajan03@gmail.com>
Date: Mon, 6 Oct 2025 09:45:58 -0700
Subject: [PATCH 06/42] Moved KeyInfoView to refactored folder, added
 deprecation notice

---
 .../components/VirtualKeysTable/VirtualKeysTable.tsx       | 2 +-
 .../src/components/templates/key_info_view.tsx             | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
index 5c32a736ae..cdbd7cee43 100644
--- a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
+++ b/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
@@ -15,10 +15,10 @@ import { KeyResponse, Team } from "@/components/key_team_helpers/key_list";
 import { Organization, userListCall } from "@/components/networking";
 import { getModelDisplayName } from "@/components/key_team_helpers/fetch_available_models_team_key";
 import FilterComponent, { FilterOption } from "@/components/molecules/filter";
-import KeyInfoView from "@/components/templates/key_info_view";
 import { useFilterLogic } from "@/components/key_team_helpers/filter_logic";
 import useTeams from "@/app/(console)/virtual-keys/hooks/useTeams";
 import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+import KeyInfoView from "@/app/(console)/virtual-keys/components/KeyInfoView";
 
 interface AllKeysTableProps {
   keys: KeyResponse[];
diff --git a/ui/litellm-dashboard/src/components/templates/key_info_view.tsx b/ui/litellm-dashboard/src/components/templates/key_info_view.tsx
index a5ec177425..0080924fb6 100644
--- a/ui/litellm-dashboard/src/components/templates/key_info_view.tsx
+++ b/ui/litellm-dashboard/src/components/templates/key_info_view.tsx
@@ -47,6 +47,13 @@ interface KeyInfoViewProps {
   backButtonText?: string;
 }
 
+/**
+ * ─────────────────────────────────────────────────────────────────────────
+ * @deprecated
+ * This component is being DEPRECATED in favor of src/app/(console)/virtual-keys/components/KeyInfoView.tsx
+ * Please contribute to the new refactor.
+ * ─────────────────────────────────────────────────────────────────────────
+ */
 export default function KeyInfoView({
   keyId,
   onClose,

From 53ee3e2634f956c059bbf3b5449a061a46ba6666 Mon Sep 17 00:00:00 2001
From: = <achintya.rajan03@gmail.com>
Date: Mon, 6 Oct 2025 10:28:48 -0700
Subject: [PATCH 07/42] refactoredUI feature flag

---
 .../components/{Sidebar.tsx => Sidebar2.tsx}  |  4 +-
 .../src/app/(console)/layout.tsx              |  4 +-
 ui/litellm-dashboard/src/app/page.tsx         | 24 +++++++---
 .../src/components/leftnav.tsx                | 46 +++++++++++--------
 .../src/components/navbar.tsx                 | 21 ++++++++-
 .../src/hooks/useFeatureFlags.ts              |  9 ++++
 6 files changed, 78 insertions(+), 30 deletions(-)
 rename ui/litellm-dashboard/src/app/(console)/components/{Sidebar.tsx => Sidebar2.tsx} (98%)
 create mode 100644 ui/litellm-dashboard/src/hooks/useFeatureFlags.ts

diff --git a/ui/litellm-dashboard/src/app/(console)/components/Sidebar.tsx b/ui/litellm-dashboard/src/app/(console)/components/Sidebar2.tsx
similarity index 98%
rename from ui/litellm-dashboard/src/app/(console)/components/Sidebar.tsx
rename to ui/litellm-dashboard/src/app/(console)/components/Sidebar2.tsx
index ad60ba626a..b2477243a0 100644
--- a/ui/litellm-dashboard/src/app/(console)/components/Sidebar.tsx
+++ b/ui/litellm-dashboard/src/app/(console)/components/Sidebar2.tsx
@@ -44,7 +44,7 @@ interface MenuItem {
   icon?: React.ReactNode;
 }
 
-const Sidebar: React.FC<SidebarProps> = ({ accessToken, userRole, defaultSelectedKey, collapsed = false }) => {
+const Sidebar2: React.FC<SidebarProps> = ({ accessToken, userRole, defaultSelectedKey, collapsed = false }) => {
   const menuItems: MenuItem[] = [
     { key: "1", page: "api-keys", label: "Virtual Keys", icon: <KeyOutlined style={{ fontSize: 18 }} /> },
     {
@@ -288,4 +288,4 @@ const Sidebar: React.FC<SidebarProps> = ({ accessToken, userRole, defaultSelecte
   );
 };
 
-export default Sidebar;
+export default Sidebar2;
diff --git a/ui/litellm-dashboard/src/app/(console)/layout.tsx b/ui/litellm-dashboard/src/app/(console)/layout.tsx
index cbfb5bdcb5..6ad84208f5 100644
--- a/ui/litellm-dashboard/src/app/(console)/layout.tsx
+++ b/ui/litellm-dashboard/src/app/(console)/layout.tsx
@@ -3,7 +3,7 @@
 import React from "react";
 import Navbar from "@/components/navbar";
 import { ThemeProvider } from "@/contexts/ThemeContext";
-import Sidebar from "@/app/(console)/components/Sidebar";
+import Sidebar2 from "@/app/(console)/components/Sidebar2";
 import useAuthorized from "@/app/(console)/hooks/useAuthorized";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
@@ -31,7 +31,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         />
         <div className="flex flex-1 overflow-auto">
           <div className="mt-2">
-            <Sidebar
+            <Sidebar2
               collapsed={sidebarCollapsed}
               accessToken={accessToken}
               userRole={userRole}
diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index 472b3f9a37..2e49b422b4 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -39,6 +39,8 @@ import VectorStoreManagement from "@/components/vector_store_management";
 import UIThemeSettings from "@/components/ui_theme_settings";
 import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import { cx } from "@/lib/cva.config";
+import useFeatureFlags from "@/hooks/useFeatureFlags";
+import Sidebar2 from "@/app/(console)/components/Sidebar2";
 
 function getCookie(name: string) {
   const cookieValue = document.cookie.split("; ").find((row) => row.startsWith(name + "="));
@@ -116,6 +118,8 @@ export default function CreateKeyPage() {
   const [authLoading, setAuthLoading] = useState(true);
   const [userID, setUserID] = useState<string | null>(null);
 
+  const { refactoredUIFlag, setRefactoredUIFlag } = useFeatureFlags();
+
   const invitation_id = searchParams.get("invitation_id");
 
   // Get page from URL, default to 'api-keys' if not present
@@ -254,16 +258,22 @@ export default function CreateKeyPage() {
                 isPublicPage={false}
                 sidebarCollapsed={sidebarCollapsed}
                 onToggleSidebar={toggleSidebar}
+                refactoredUIFlag={refactoredUIFlag}
+                setRefactoredUIFlag={setRefactoredUIFlag}
               />
               <div className="flex flex-1 overflow-auto">
                 <div className="mt-2">
-                  <Sidebar
-                    accessToken={accessToken}
-                    setPage={updatePage}
-                    userRole={userRole}
-                    defaultSelectedKey={page}
-                    collapsed={sidebarCollapsed}
-                  />
+                  {refactoredUIFlag ? (
+                    <Sidebar2 accessToken={accessToken} userRole={userRole} />
+                  ) : (
+                    <Sidebar
+                      accessToken={accessToken}
+                      setPage={updatePage}
+                      userRole={userRole}
+                      defaultSelectedKey={page}
+                      collapsed={sidebarCollapsed}
+                    />
+                  )}
                 </div>
 
                 {page == "api-keys" ? (
diff --git a/ui/litellm-dashboard/src/components/leftnav.tsx b/ui/litellm-dashboard/src/components/leftnav.tsx
index d9326cb887..34916cddb9 100644
--- a/ui/litellm-dashboard/src/components/leftnav.tsx
+++ b/ui/litellm-dashboard/src/components/leftnav.tsx
@@ -12,17 +12,29 @@ import {
   AppstoreOutlined,
   DatabaseOutlined,
   FileTextOutlined,
+  LineOutlined,
   LineChartOutlined,
   SafetyOutlined,
   ExperimentOutlined,
+  ThunderboltOutlined,
+  LockOutlined,
   ToolOutlined,
   TagsOutlined,
   BgColorsOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
 } from "@ant-design/icons";
-import { all_admin_roles, rolesWithWriteAccess, internalUserRoles, isAdminRole } from "../utils/roles";
+import {
+  old_admin_roles,
+  v2_admin_role_names,
+  all_admin_roles,
+  rolesAllowedToSeeUsage,
+  rolesWithWriteAccess,
+  internalUserRoles,
+  isAdminRole,
+} from "../utils/roles";
 import UsageIndicator from "./usage_indicator";
 import { ConfigProvider } from "antd";
-import { useRouter } from "next/navigation";
 const { Sider } = Layout;
 
 // Define the props type
@@ -45,7 +57,6 @@ interface MenuItem {
 }
 
 const Sidebar: React.FC<SidebarProps> = ({ accessToken, setPage, userRole, defaultSelectedKey, collapsed = false }) => {
-  const router = useRouter();
   // Note: If a menu item does not have a role, it is visible to all roles.
   const menuItems: MenuItem[] = [
     {
@@ -237,19 +248,6 @@ const Sidebar: React.FC<SidebarProps> = ({ accessToken, setPage, userRole, defau
     return true;
   });
 
-  const navigateToPage = (page: string) => {
-    if (page === "api-keys") {
-      // Go to clean route and DO NOT call setPage to avoid any parent sync that re-adds ?page=api-keys
-      router.replace("/virtual-keys");
-      return;
-    }
-    const newSearchParams = new URLSearchParams(window.location.search);
-    newSearchParams.set("page", page);
-    // Use absolute root to replace everything after the domain
-    router.replace(`/?${newSearchParams.toString()}`);
-    setPage(page);
-  };
-
   return (
     <Layout style={{ minHeight: "100vh" }}>
       <Sider
@@ -293,9 +291,21 @@ const Sidebar: React.FC<SidebarProps> = ({ accessToken, setPage, userRole, defau
                 key: child.key,
                 icon: child.icon,
                 label: child.label,
-                onClick: () => navigateToPage(child.page),
+                onClick: () => {
+                  const newSearchParams = new URLSearchParams(window.location.search);
+                  newSearchParams.set("page", child.page);
+                  window.history.pushState(null, "", `?${newSearchParams.toString()}`);
+                  setPage(child.page);
+                },
               })),
-              onClick: !item.children ? () => navigateToPage(item.page) : undefined,
+              onClick: !item.children
+                ? () => {
+                    const newSearchParams = new URLSearchParams(window.location.search);
+                    newSearchParams.set("page", item.page);
+                    window.history.pushState(null, "", `?${newSearchParams.toString()}`);
+                    setPage(item.page);
+                  }
+                : undefined,
             }))}
           />
         </ConfigProvider>
diff --git a/ui/litellm-dashboard/src/components/navbar.tsx b/ui/litellm-dashboard/src/components/navbar.tsx
index 0764288057..e4a9c21c44 100644
--- a/ui/litellm-dashboard/src/components/navbar.tsx
+++ b/ui/litellm-dashboard/src/components/navbar.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
 import React, { useState, useEffect } from "react";
 import type { MenuProps } from "antd";
-import { Dropdown, Tooltip } from "antd";
+import { Dropdown, Tooltip, Switch } from "antd";
 import { getProxyBaseUrl, Organization } from "@/components/networking";
 import { defaultOrg } from "@/components/common_components/default_org";
 import {
@@ -19,6 +19,7 @@ import { clearTokenCookies } from "@/utils/cookieUtils";
 import { fetchProxySettings } from "@/utils/proxyUtils";
 import { useTheme } from "@/contexts/ThemeContext";
 import { clearMCPAuthTokens } from "./mcp_tools/mcp_auth_storage";
+import useFeatureFlags from "@/hooks/useFeatureFlags";
 
 interface NavbarProps {
   userID: string | null;
@@ -31,6 +32,8 @@ interface NavbarProps {
   isPublicPage: boolean;
   sidebarCollapsed?: boolean;
   onToggleSidebar?: () => void;
+  refactoredUIFlag: boolean;
+  setRefactoredUIFlag: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const Navbar: React.FC<NavbarProps> = ({
@@ -44,6 +47,8 @@ const Navbar: React.FC<NavbarProps> = ({
   isPublicPage = false,
   sidebarCollapsed = false,
   onToggleSidebar,
+  refactoredUIFlag,
+  setRefactoredUIFlag,
 }) => {
   const baseUrl = getProxyBaseUrl();
   const [logoutUrl, setLogoutUrl] = useState("");
@@ -79,6 +84,8 @@ const Navbar: React.FC<NavbarProps> = ({
   const userItems: MenuProps["items"] = [
     {
       key: "user-info",
+      // Prevent dropdown from closing when interacting with the toggle
+      onClick: (info) => info.domEvent?.stopPropagation(),
       label: (
         <div className="px-3 py-3 border-b border-gray-100">
           <div className="flex items-center justify-between mb-3">
@@ -115,6 +122,18 @@ const Navbar: React.FC<NavbarProps> = ({
                 {userEmail || "Unknown"}
               </span>
             </div>
+
+            {/* NEW: Feature flag label + toggle below the email field */}
+            <div className="flex items-center text-sm pt-2 mt-2 border-t border-gray-100">
+              <span className="text-gray-500 text-xs">Refactored UI</span>
+              <Switch
+                className="ml-auto"
+                size="small"
+                checked={refactoredUIFlag}
+                onChange={(checked) => setRefactoredUIFlag(checked)}
+                aria-label="Toggle refactored UI feature flag"
+              />
+            </div>
           </div>
         </div>
       ),
diff --git a/ui/litellm-dashboard/src/hooks/useFeatureFlags.ts b/ui/litellm-dashboard/src/hooks/useFeatureFlags.ts
new file mode 100644
index 0000000000..b82f89e874
--- /dev/null
+++ b/ui/litellm-dashboard/src/hooks/useFeatureFlags.ts
@@ -0,0 +1,9 @@
+import { useState } from "react";
+
+const useFeatureFlags = () => {
+  const [refactoredUIFlag, setRefactoredUIFlag] = useState<boolean>(false);
+
+  return { refactoredUIFlag, setRefactoredUIFlag };
+};
+
+export default useFeatureFlags;

From 715c4999a290a528a54ac3ccf6b01d08ae6811e9 Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Mon, 6 Oct 2025 12:57:16 -0700
Subject: [PATCH 08/42] global feature flag state for app

---
 .../(console)/components/SidebarProvider.tsx  | 34 +++++++++++++++++++
 .../src/app/(console)/layout.tsx              |  1 +
 ui/litellm-dashboard/src/app/layout.tsx       |  5 ++-
 ui/litellm-dashboard/src/app/page.tsx         | 21 +++---------
 .../src/components/navbar.tsx                 |  7 ++--
 .../src/hooks/useFeatureFlags.ts              |  9 -----
 .../src/hooks/useFeatureFlags.tsx             | 26 ++++++++++++++
 7 files changed, 72 insertions(+), 31 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/app/(console)/components/SidebarProvider.tsx
 delete mode 100644 ui/litellm-dashboard/src/hooks/useFeatureFlags.ts
 create mode 100644 ui/litellm-dashboard/src/hooks/useFeatureFlags.tsx

diff --git a/ui/litellm-dashboard/src/app/(console)/components/SidebarProvider.tsx b/ui/litellm-dashboard/src/app/(console)/components/SidebarProvider.tsx
new file mode 100644
index 0000000000..a5e150da86
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(console)/components/SidebarProvider.tsx
@@ -0,0 +1,34 @@
+import Sidebar2 from "@/app/(console)/components/Sidebar2";
+import Sidebar from "@/components/leftnav";
+import React from "react";
+import useFeatureFlags from "@/hooks/useFeatureFlags";
+import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+
+interface SidebarProviderProps {
+  defaultSelectedKey: string;
+  sidebarCollapsed: boolean;
+  setPage: (page: string) => void;
+}
+
+const SidebarProvider = ({defaultSelectedKey, sidebarCollapsed, setPage}: SidebarProviderProps) => {
+
+  const {accessToken, userRole} = useAuthorized();
+  const { refactoredUIFlag, setRefactoredUIFlag } = useFeatureFlags();
+
+  return (
+    refactoredUIFlag ? (
+        <Sidebar2 accessToken={accessToken} userRole={userRole} />
+      ) : (
+        <Sidebar
+          accessToken={accessToken}
+          setPage={setPage}
+          userRole={userRole}
+          defaultSelectedKey={defaultSelectedKey}
+          collapsed={sidebarCollapsed}
+        />
+      )
+  );
+
+}
+
+export default SidebarProvider;
\ No newline at end of file
diff --git a/ui/litellm-dashboard/src/app/(console)/layout.tsx b/ui/litellm-dashboard/src/app/(console)/layout.tsx
index 6ad84208f5..595eeedc59 100644
--- a/ui/litellm-dashboard/src/app/(console)/layout.tsx
+++ b/ui/litellm-dashboard/src/app/(console)/layout.tsx
@@ -5,6 +5,7 @@ import Navbar from "@/components/navbar";
 import { ThemeProvider } from "@/contexts/ThemeContext";
 import Sidebar2 from "@/app/(console)/components/Sidebar2";
 import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+import useFeatureFlags, { FeatureFlagsProvider } from "@/hooks/useFeatureFlags";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   const { accessToken, userRole } = useAuthorized();
diff --git a/ui/litellm-dashboard/src/app/layout.tsx b/ui/litellm-dashboard/src/app/layout.tsx
index 95c485fe2f..8a37d0fa1b 100644
--- a/ui/litellm-dashboard/src/app/layout.tsx
+++ b/ui/litellm-dashboard/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { FeatureFlagsProvider } from "@/hooks/useFeatureFlags";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -17,7 +18,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <FeatureFlagsProvider>
+        <body className={inter.className}>{children}</body>
+      </FeatureFlagsProvider>
     </html>
   );
 }
diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index 2e49b422b4..eff997a3aa 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -39,8 +39,9 @@ import VectorStoreManagement from "@/components/vector_store_management";
 import UIThemeSettings from "@/components/ui_theme_settings";
 import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import { cx } from "@/lib/cva.config";
-import useFeatureFlags from "@/hooks/useFeatureFlags";
+import useFeatureFlags, { FeatureFlagsProvider } from "@/hooks/useFeatureFlags";
 import Sidebar2 from "@/app/(console)/components/Sidebar2";
+import SidebarProvider from "@/app/(console)/components/SidebarProvider";
 
 function getCookie(name: string) {
   const cookieValue = document.cookie.split("; ").find((row) => row.startsWith(name + "="));
@@ -118,8 +119,6 @@ export default function CreateKeyPage() {
   const [authLoading, setAuthLoading] = useState(true);
   const [userID, setUserID] = useState<string | null>(null);
 
-  const { refactoredUIFlag, setRefactoredUIFlag } = useFeatureFlags();
-
   const invitation_id = searchParams.get("invitation_id");
 
   // Get page from URL, default to 'api-keys' if not present
@@ -234,6 +233,7 @@ export default function CreateKeyPage() {
             <UserDashboard
               userID={userID}
               userRole={userRole}
+              userEmail={userEmail}
               premiumUser={premiumUser}
               teams={teams}
               keys={keys}
@@ -258,28 +258,17 @@ export default function CreateKeyPage() {
                 isPublicPage={false}
                 sidebarCollapsed={sidebarCollapsed}
                 onToggleSidebar={toggleSidebar}
-                refactoredUIFlag={refactoredUIFlag}
-                setRefactoredUIFlag={setRefactoredUIFlag}
               />
               <div className="flex flex-1 overflow-auto">
                 <div className="mt-2">
-                  {refactoredUIFlag ? (
-                    <Sidebar2 accessToken={accessToken} userRole={userRole} />
-                  ) : (
-                    <Sidebar
-                      accessToken={accessToken}
-                      setPage={updatePage}
-                      userRole={userRole}
-                      defaultSelectedKey={page}
-                      collapsed={sidebarCollapsed}
-                    />
-                  )}
+                  <SidebarProvider defaultSelectedKey={page} sidebarCollapsed={sidebarCollapsed} setPage={updatePage} />
                 </div>
 
                 {page == "api-keys" ? (
                   <UserDashboard
                     userID={userID}
                     userRole={userRole}
+                    userEmail={userEmail}
                     premiumUser={premiumUser}
                     teams={teams}
                     keys={keys}
diff --git a/ui/litellm-dashboard/src/components/navbar.tsx b/ui/litellm-dashboard/src/components/navbar.tsx
index e4a9c21c44..37cb5a1228 100644
--- a/ui/litellm-dashboard/src/components/navbar.tsx
+++ b/ui/litellm-dashboard/src/components/navbar.tsx
@@ -32,8 +32,6 @@ interface NavbarProps {
   isPublicPage: boolean;
   sidebarCollapsed?: boolean;
   onToggleSidebar?: () => void;
-  refactoredUIFlag: boolean;
-  setRefactoredUIFlag: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const Navbar: React.FC<NavbarProps> = ({
@@ -46,13 +44,12 @@ const Navbar: React.FC<NavbarProps> = ({
   accessToken,
   isPublicPage = false,
   sidebarCollapsed = false,
-  onToggleSidebar,
-  refactoredUIFlag,
-  setRefactoredUIFlag,
+  onToggleSidebar
 }) => {
   const baseUrl = getProxyBaseUrl();
   const [logoutUrl, setLogoutUrl] = useState("");
   const { logoUrl } = useTheme();
+  const { refactoredUIFlag, setRefactoredUIFlag } = useFeatureFlags();
 
   // Simple logo URL: use custom logo if available, otherwise default
   const imageUrl = logoUrl || `${baseUrl}/get_image`;
diff --git a/ui/litellm-dashboard/src/hooks/useFeatureFlags.ts b/ui/litellm-dashboard/src/hooks/useFeatureFlags.ts
deleted file mode 100644
index b82f89e874..0000000000
--- a/ui/litellm-dashboard/src/hooks/useFeatureFlags.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useState } from "react";
-
-const useFeatureFlags = () => {
-  const [refactoredUIFlag, setRefactoredUIFlag] = useState<boolean>(false);
-
-  return { refactoredUIFlag, setRefactoredUIFlag };
-};
-
-export default useFeatureFlags;
diff --git a/ui/litellm-dashboard/src/hooks/useFeatureFlags.tsx b/ui/litellm-dashboard/src/hooks/useFeatureFlags.tsx
new file mode 100644
index 0000000000..d50fdf46a6
--- /dev/null
+++ b/ui/litellm-dashboard/src/hooks/useFeatureFlags.tsx
@@ -0,0 +1,26 @@
+'use client';
+import React, {createContext, useContext, useState} from 'react';
+
+type Flags = {
+  refactoredUIFlag: boolean;
+  setRefactoredUIFlag: (v: boolean) => void;
+};
+
+const FeatureFlagsCtx = createContext<Flags | null>(null);
+
+export const FeatureFlagsProvider = ({ children }: { children: React.ReactNode }) => {
+  const [refactoredUIFlag, setRefactoredUIFlag] = useState(false);
+  return (
+    <FeatureFlagsCtx.Provider value={{ refactoredUIFlag, setRefactoredUIFlag }}>
+    {children}
+    </FeatureFlagsCtx.Provider>
+);
+}
+
+const useFeatureFlags = () => {
+  const ctx = useContext(FeatureFlagsCtx);
+  if (!ctx) throw new Error('useFeatureFlags must be used within FeatureFlagsProvider');
+  return ctx;
+}
+
+export default useFeatureFlags;

From f4d9e4869ad7c29647aed699de6e77e51584b4e8 Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Mon, 6 Oct 2025 13:33:38 -0700
Subject: [PATCH 09/42] renamed (console), added use clients

---
 .../components/Sidebar2.tsx                   |  4 +++-
 .../components/SidebarProvider.tsx            |  6 +++--
 .../components/modals/CreateUserModal.tsx     |  8 ++++---
 .../hooks/useAuthorized.ts                    |  3 ++-
 .../app/{(console) => dashboard}/layout.tsx   |  5 ++---
 .../virtual-keys/components/CreateKey.tsx     |  6 ++---
 .../CreateKeyForm/KeyDetailsSection.tsx       |  2 ++
 .../CreateKeyForm/OptionalSettingsSection.tsx |  4 +++-
 .../CreateKeyForm/OwnershipSection.tsx        |  4 +++-
 .../CreateKeyModal/CreateKeyModal.tsx         | 22 ++++++++++---------
 .../components/CreateKeyModal/hooks/index.ts  |  0
 .../hooks/useGuardrailsAndPrompts.ts          |  4 ++--
 .../hooks/useMcpAccessGroups.ts               |  4 ++--
 .../CreateKeyModal/hooks/useTeamModels.ts     |  4 ++--
 .../CreateKeyModal/hooks/useUserModels.ts     |  4 ++--
 .../CreateKeyModal/hooks/useUserSearch.ts     |  4 ++--
 .../components/CreateKeyModal/networking.ts   |  2 +-
 .../components/CreateKeyModal/types.ts        |  0
 .../components/CreateKeyModal/utils.ts        |  2 +-
 .../virtual-keys/components/KeyInfoView.tsx   |  2 ++
 .../virtual-keys/components/SaveKeyModal.tsx  |  2 ++
 .../VirtualKeysTable/VirtualKeysTable.tsx     |  8 +++----
 .../VirtualKeysTable/hooks/useFilterLogic.ts  |  0
 .../virtual-keys/hooks/useTeams.tsx           |  4 ++--
 .../virtual-keys/networking.ts                |  0
 .../virtual-keys/page.tsx                     |  9 +++-----
 ui/litellm-dashboard/src/app/page.tsx         |  4 ++--
 .../organisms/create_key_button.tsx           |  2 +-
 .../components/templates/key_info_view.tsx    |  2 +-
 .../components/templates/view_key_table.tsx   |  2 +-
 30 files changed, 69 insertions(+), 54 deletions(-)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/components/Sidebar2.tsx (99%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/components/SidebarProvider.tsx (86%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/components/modals/CreateUserModal.tsx (98%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/hooks/useAuthorized.ts (94%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/layout.tsx (86%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/components/CreateKey.tsx (94%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx (99%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx (99%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx (98%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx (91%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/components/CreateKeyModal/hooks/index.ts (100%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts (83%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts (80%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts (89%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts (81%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts (89%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/components/CreateKeyModal/networking.ts (95%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/components/CreateKeyModal/types.ts (100%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/components/CreateKeyModal/utils.ts (98%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/components/KeyInfoView.tsx (99%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/components/SaveKeyModal.tsx (99%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx (99%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/components/VirtualKeysTable/hooks/useFilterLogic.ts (100%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/hooks/useTeams.tsx (79%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/networking.ts (100%)
 rename ui/litellm-dashboard/src/app/{(console) => dashboard}/virtual-keys/page.tsx (81%)

diff --git a/ui/litellm-dashboard/src/app/(console)/components/Sidebar2.tsx b/ui/litellm-dashboard/src/app/dashboard/components/Sidebar2.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/app/(console)/components/Sidebar2.tsx
rename to ui/litellm-dashboard/src/app/dashboard/components/Sidebar2.tsx
index b2477243a0..9de9f2f136 100644
--- a/ui/litellm-dashboard/src/app/(console)/components/Sidebar2.tsx
+++ b/ui/litellm-dashboard/src/app/dashboard/components/Sidebar2.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
@@ -216,7 +218,7 @@ const Sidebar2: React.FC<SidebarProps> = ({ accessToken, userRole, defaultSelect
   };
 
   const selectedMenuKey =
-    pathname === "/virtual-keys"
+    pathname === "/dashboard/virtual-keys"
       ? "1"
       : pageParam
         ? findMenuItemKey(pageParam)
diff --git a/ui/litellm-dashboard/src/app/(console)/components/SidebarProvider.tsx b/ui/litellm-dashboard/src/app/dashboard/components/SidebarProvider.tsx
similarity index 86%
rename from ui/litellm-dashboard/src/app/(console)/components/SidebarProvider.tsx
rename to ui/litellm-dashboard/src/app/dashboard/components/SidebarProvider.tsx
index a5e150da86..8380493798 100644
--- a/ui/litellm-dashboard/src/app/(console)/components/SidebarProvider.tsx
+++ b/ui/litellm-dashboard/src/app/dashboard/components/SidebarProvider.tsx
@@ -1,8 +1,10 @@
-import Sidebar2 from "@/app/(console)/components/Sidebar2";
+"use client";
+
+import Sidebar2 from "@/app/dashboard/components/Sidebar2";
 import Sidebar from "@/components/leftnav";
 import React from "react";
 import useFeatureFlags from "@/hooks/useFeatureFlags";
-import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
 
 interface SidebarProviderProps {
   defaultSelectedKey: string;
diff --git a/ui/litellm-dashboard/src/app/(console)/components/modals/CreateUserModal.tsx b/ui/litellm-dashboard/src/app/dashboard/components/modals/CreateUserModal.tsx
similarity index 98%
rename from ui/litellm-dashboard/src/app/(console)/components/modals/CreateUserModal.tsx
rename to ui/litellm-dashboard/src/app/dashboard/components/modals/CreateUserModal.tsx
index 4caaceb662..8b16074b25 100644
--- a/ui/litellm-dashboard/src/app/(console)/components/modals/CreateUserModal.tsx
+++ b/ui/litellm-dashboard/src/app/dashboard/components/modals/CreateUserModal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // TODO: refactor
 import React, { useState, useEffect } from "react";
 import { Button, Modal, Form, Input, message, Select, InputNumber, Select as Select2 } from "antd";
@@ -27,9 +29,9 @@ import {
 } from "@/components/networking";
 import { getModelDisplayName } from "@/components/key_team_helpers/fetch_available_models_team_key";
 import BulkCreateUsersButton from "@/components/bulk_create_users_button";
-import { fetchTeams } from "@/app/(console)/virtual-keys/networking";
-import useTeams from "@/app/(console)/virtual-keys/hooks/useTeams";
-import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+import { fetchTeams } from "@/app/dashboard/virtual-keys/networking";
+import useTeams from "@/app/dashboard/virtual-keys/hooks/useTeams";
+import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
 
 // Helper function to generate UUID compatible across all environments
 const generateUUID = (): string => {
diff --git a/ui/litellm-dashboard/src/app/(console)/hooks/useAuthorized.ts b/ui/litellm-dashboard/src/app/dashboard/hooks/useAuthorized.ts
similarity index 94%
rename from ui/litellm-dashboard/src/app/(console)/hooks/useAuthorized.ts
rename to ui/litellm-dashboard/src/app/dashboard/hooks/useAuthorized.ts
index 45f5ee92ea..9d436d0566 100644
--- a/ui/litellm-dashboard/src/app/(console)/hooks/useAuthorized.ts
+++ b/ui/litellm-dashboard/src/app/dashboard/hooks/useAuthorized.ts
@@ -1,4 +1,5 @@
-import { Router } from "next/router";
+"use client";
+
 import { getCookie } from "@/utils/cookieUtils";
 import { useRouter } from "next/navigation";
 import { jwtDecode } from "jwt-decode";
diff --git a/ui/litellm-dashboard/src/app/(console)/layout.tsx b/ui/litellm-dashboard/src/app/dashboard/layout.tsx
similarity index 86%
rename from ui/litellm-dashboard/src/app/(console)/layout.tsx
rename to ui/litellm-dashboard/src/app/dashboard/layout.tsx
index 595eeedc59..851ecec665 100644
--- a/ui/litellm-dashboard/src/app/(console)/layout.tsx
+++ b/ui/litellm-dashboard/src/app/dashboard/layout.tsx
@@ -3,9 +3,8 @@
 import React from "react";
 import Navbar from "@/components/navbar";
 import { ThemeProvider } from "@/contexts/ThemeContext";
-import Sidebar2 from "@/app/(console)/components/Sidebar2";
-import useAuthorized from "@/app/(console)/hooks/useAuthorized";
-import useFeatureFlags, { FeatureFlagsProvider } from "@/hooks/useFeatureFlags";
+import Sidebar2 from "@/app/dashboard/components/Sidebar2";
+import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   const { accessToken, userRole } = useAuthorized();
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKey.tsx b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKey.tsx
similarity index 94%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKey.tsx
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKey.tsx
index c8e0b1d8ce..15dd713917 100644
--- a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKey.tsx
+++ b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKey.tsx
@@ -6,9 +6,9 @@ import { Modal, Form } from "antd";
 import { getPossibleUserRoles, Organization } from "@/components/networking";
 import { rolesWithWriteAccess } from "@/utils/roles";
 import { Team } from "@/components/key_team_helpers/key_list";
-import CreateKeyModal from "@/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyModal";
-import CreateUserModal from "@/app/(console)/components/modals/CreateUserModal";
-import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+import CreateKeyModal from "@/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyModal";
+import CreateUserModal from "@/app/dashboard/components/modals/CreateUserModal";
+import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
 
 interface CreateKeyProps {
   team: Team | null;
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx
index 54e9aaefed..33a8ae06cf 100644
--- a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx
+++ b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { TextInput, Title } from "@tremor/react";
 import { Form, FormInstance, Select, Tooltip } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx
index c879cdf595..65ebd2d571 100644
--- a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx
+++ b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Accordion, AccordionBody, AccordionHeader, Text, Title } from "@tremor/react";
 import { Form, FormInstance, Input, Select, Tooltip } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
@@ -15,7 +17,7 @@ import SchemaFormFields from "@/components/common_components/check_openapi_schem
 import { Team } from "@/components/key_team_helpers/key_list";
 import React from "react";
 import { DefaultOptionType } from "rc-select/lib/Select";
-import { ModelAliases } from "@/app/(console)/virtual-keys/components/CreateKeyModal/types";
+import { ModelAliases } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/types";
 
 export interface OptionalSettingsSectionProps {
   form: FormInstance;
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx
similarity index 98%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx
index fdfb3893f6..00c2e9a1e2 100644
--- a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx
+++ b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx
@@ -1,10 +1,12 @@
+"use client";
+
 import { Button as Button2, Form, Radio, Select, Tooltip } from "antd";
 import { Title } from "@tremor/react";
 import { InfoCircleOutlined } from "@ant-design/icons";
 import TeamDropdown from "@/components/common_components/team_dropdown";
 import React from "react";
 import { Team } from "@/components/key_team_helpers/key_list";
-import { UserOption } from "@/app/(console)/virtual-keys/components/CreateKeyModal/types";
+import { UserOption } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/types";
 
 interface OwnershipSectionProps {
   team: Team | null;
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx
similarity index 91%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx
index 9f4d7528a8..2bee7f72b1 100644
--- a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx
+++ b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx
@@ -1,9 +1,11 @@
+"use client";
+
 import { Button as Button2, Form, FormInstance, Modal } from "antd";
 import { Text } from "@tremor/react";
 import { keyCreateCall, keyCreateServiceAccountCall } from "@/components/networking";
 import React, { useEffect, useState } from "react";
 import { Team } from "@/components/key_team_helpers/key_list";
-import SaveKeyModal from "@/app/(console)/virtual-keys/components/SaveKeyModal";
+import SaveKeyModal from "@/app/dashboard/virtual-keys/components/SaveKeyModal";
 import NotificationsManager from "@/components/molecules/notifications_manager";
 import {
   useGuardrailsAndPrompts,
@@ -11,15 +13,15 @@ import {
   useTeamModels,
   useUserModels,
   useUserSearch,
-} from "@/app/(console)/virtual-keys/components/CreateKeyModal/hooks";
-import OwnershipSection from "@/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection";
-import KeyDetailsSection from "@/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection";
-import OptionalSettingsSection from "@/app/(console)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection";
-import { ModelAliases } from "@/app/(console)/virtual-keys/components/CreateKeyModal/types";
-import { getPredefinedTags, prepareFormValues } from "@/app/(console)/virtual-keys/components/CreateKeyModal/utils";
-import { fetchTeams } from "@/app/(console)/virtual-keys/networking";
-import useTeams from "@/app/(console)/virtual-keys/hooks/useTeams";
-import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+} from "@/app/dashboard/virtual-keys/components/CreateKeyModal/hooks";
+import OwnershipSection from "@/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection";
+import KeyDetailsSection from "@/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection";
+import OptionalSettingsSection from "@/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection";
+import { ModelAliases } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/types";
+import { getPredefinedTags, prepareFormValues } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/utils";
+import { fetchTeams } from "@/app/dashboard/virtual-keys/networking";
+import useTeams from "@/app/dashboard/virtual-keys/hooks/useTeams";
+import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
 
 export interface CreateKeyModalProps {
   isModalVisible: boolean;
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/index.ts b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/index.ts
similarity index 100%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/index.ts
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/index.ts
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts
similarity index 83%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts
index d092219f70..2445240e1e 100644
--- a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts
+++ b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { fetchGuardrails, fetchPrompts } from "@/app/(console)/virtual-keys/components/CreateKeyModal/networking";
-import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+import { fetchGuardrails, fetchPrompts } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/networking";
+import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
 
 export const useGuardrailsAndPrompts = () => {
   const [guardrails, setGuardrails] = useState<string[]>([]);
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts
similarity index 80%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts
index 8313f6e8d6..5007040000 100644
--- a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts
+++ b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { getMCPAccessGroups } from "@/app/(console)/virtual-keys/components/CreateKeyModal/networking";
-import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+import { getMCPAccessGroups } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/networking";
+import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
 
 export const useMcpAccessGroups = () => {
   const [mcpAccessGroups, setMcpAccessGroups] = useState<string[]>([]);
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts
similarity index 89%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts
index c28ef0ecdb..979337f5aa 100644
--- a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts
+++ b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import type { Team } from "@/components/key_team_helpers/key_list";
-import { fetchTeamModels } from "@/app/(console)/virtual-keys/components/CreateKeyModal/networking";
-import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+import { fetchTeamModels } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/networking";
+import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
 
 export const useTeamModels = (selectedTeam: Team | null) => {
   const { userId: userID, userRole, accessToken } = useAuthorized();
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts
similarity index 81%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts
index ddba6879cc..badcaf93d9 100644
--- a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts
+++ b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { getUserModelNames } from "@/app/(console)/virtual-keys/components/CreateKeyModal/networking";
-import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+import { getUserModelNames } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/networking";
+import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
 
 export const useUserModels = () => {
   const { userId: userID, userRole, accessToken } = useAuthorized();
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts
similarity index 89%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts
index 782beccf48..a3840bdc62 100644
--- a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts
+++ b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { debounce } from "lodash";
-import { searchUserOptionsByEmail } from "@/app/(console)/virtual-keys/components/CreateKeyModal/networking";
-import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+import { searchUserOptionsByEmail } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/networking";
+import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
 
 type User = { user_id: string; user_email: string; role?: string };
 export interface UserOption {
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/networking.ts b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/networking.ts
similarity index 95%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/networking.ts
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/networking.ts
index 6cb4e2f7f0..2277800dad 100644
--- a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/networking.ts
+++ b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/networking.ts
@@ -6,7 +6,7 @@ import {
   User,
   userFilterUICall,
 } from "@/components/networking";
-import { ModelAvailableResponse, UserOption } from "@/app/(console)/virtual-keys/components/CreateKeyModal/types";
+import { ModelAvailableResponse, UserOption } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/types";
 
 export const fetchGuardrails = async (accessToken: string) => {
   try {
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/types.ts b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/types.ts
similarity index 100%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/types.ts
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/types.ts
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/utils.ts b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/utils.ts
similarity index 98%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/utils.ts
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/utils.ts
index 066770cf46..73cd433e78 100644
--- a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/CreateKeyModal/utils.ts
+++ b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/utils.ts
@@ -1,5 +1,5 @@
 import { mapDisplayToInternalNames } from "@/components/callback_info_helpers";
-import { ModelAliases } from "@/app/(console)/virtual-keys/components/CreateKeyModal/types";
+import { ModelAliases } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/types";
 
 export const getPredefinedTags = (data: any[] | null) => {
   let allTags = [];
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/KeyInfoView.tsx b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/KeyInfoView.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/components/KeyInfoView.tsx
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/KeyInfoView.tsx
index 1c7185f1dc..9f9a47fbe1 100644
--- a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/KeyInfoView.tsx
+++ b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/KeyInfoView.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState } from "react";
 import {
   Card,
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/SaveKeyModal.tsx b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/SaveKeyModal.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/components/SaveKeyModal.tsx
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/SaveKeyModal.tsx
index bd0d425c46..fed678aadc 100644
--- a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/SaveKeyModal.tsx
+++ b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/SaveKeyModal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Button, Col, Grid, Text, Title } from "@tremor/react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { Modal } from "antd";
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
index cdbd7cee43..b7727a299b 100644
--- a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
+++ b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
@@ -1,5 +1,5 @@
-// TODO: refactor
 "use client";
+// TODO: refactor
 
 import React, { useEffect, useState } from "react";
 import { ColumnDef } from "@tanstack/react-table";
@@ -16,9 +16,9 @@ import { Organization, userListCall } from "@/components/networking";
 import { getModelDisplayName } from "@/components/key_team_helpers/fetch_available_models_team_key";
 import FilterComponent, { FilterOption } from "@/components/molecules/filter";
 import { useFilterLogic } from "@/components/key_team_helpers/filter_logic";
-import useTeams from "@/app/(console)/virtual-keys/hooks/useTeams";
-import useAuthorized from "@/app/(console)/hooks/useAuthorized";
-import KeyInfoView from "@/app/(console)/virtual-keys/components/KeyInfoView";
+import useTeams from "@/app/dashboard/virtual-keys/hooks/useTeams";
+import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
+import KeyInfoView from "@/app/dashboard/virtual-keys/components/KeyInfoView";
 
 interface AllKeysTableProps {
   keys: KeyResponse[];
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/components/VirtualKeysTable/hooks/useFilterLogic.ts b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/VirtualKeysTable/hooks/useFilterLogic.ts
similarity index 100%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/components/VirtualKeysTable/hooks/useFilterLogic.ts
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/VirtualKeysTable/hooks/useFilterLogic.ts
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/hooks/useTeams.tsx b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/hooks/useTeams.tsx
similarity index 79%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/hooks/useTeams.tsx
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/hooks/useTeams.tsx
index d1208737ec..92e5896e76 100644
--- a/ui/litellm-dashboard/src/app/(console)/virtual-keys/hooks/useTeams.tsx
+++ b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/hooks/useTeams.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { fetchTeams } from "@/app/(console)/virtual-keys/networking";
+import { fetchTeams } from "@/app/dashboard/virtual-keys/networking";
 import { Team } from "@/components/key_team_helpers/key_list";
-import useAuthorized from "@/app/(console)/hooks/useAuthorized";
+import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
 
 const useTeams = () => {
   const [teams, setTeams] = useState<Team[]>([]);
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/networking.ts b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/networking.ts
similarity index 100%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/networking.ts
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/networking.ts
diff --git a/ui/litellm-dashboard/src/app/(console)/virtual-keys/page.tsx b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/page.tsx
similarity index 81%
rename from ui/litellm-dashboard/src/app/(console)/virtual-keys/page.tsx
rename to ui/litellm-dashboard/src/app/dashboard/virtual-keys/page.tsx
index 9554905088..7dfc959867 100644
--- a/ui/litellm-dashboard/src/app/(console)/virtual-keys/page.tsx
+++ b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/page.tsx
@@ -1,15 +1,12 @@
 "use client";
 
-import VirtualKeysTable from "@/app/(console)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable";
-import { getCookie } from "@/utils/cookieUtils";
-import { jwtDecode } from "jwt-decode";
+import VirtualKeysTable from "@/app/dashboard/virtual-keys/components/VirtualKeysTable/VirtualKeysTable";
 import { useState } from "react";
 import useKeyList from "@/components/key_team_helpers/key_list";
-import { useRouter } from "next/navigation";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Col, Grid } from "@tremor/react";
-import CreateKey from "@/app/(console)/virtual-keys/components/CreateKey";
-import useAuthorized from "@/app/(console)/hooks/useAuthorized"
+import CreateKey from "@/app/dashboard/virtual-keys/components/CreateKey";
+import useAuthorized from "@/app/dashboard/hooks/useAuthorized"
 
 const VirtualKeysPage = () => {
   const {accessToken, userRole} = useAuthorized();
diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index eff997a3aa..3815df002b 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -40,8 +40,8 @@ import UIThemeSettings from "@/components/ui_theme_settings";
 import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import { cx } from "@/lib/cva.config";
 import useFeatureFlags, { FeatureFlagsProvider } from "@/hooks/useFeatureFlags";
-import Sidebar2 from "@/app/(console)/components/Sidebar2";
-import SidebarProvider from "@/app/(console)/components/SidebarProvider";
+import Sidebar2 from "@/app/dashboard/components/Sidebar2";
+import SidebarProvider from "@/app/dashboard/components/SidebarProvider";
 
 function getCookie(name: string) {
   const cookieValue = document.cookie.split("; ").find((row) => row.startsWith(name + "="));
diff --git a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
index 20c1f5b3a3..d4035e83f0 100644
--- a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
@@ -135,7 +135,7 @@ export const fetchUserModels = async (
 /**
  * ─────────────────────────────────────────────────────────────────────────
  * @deprecated
- * This component is being DEPRECATED in favor of src/app/(console)/virtual-keys/components/CreateKey.tsx
+ * This component is being DEPRECATED in favor of src/app/dashboard/virtual-keys/components/CreateKey.tsx
  * Please contribute to the new refactor.
  * ─────────────────────────────────────────────────────────────────────────
  */
diff --git a/ui/litellm-dashboard/src/components/templates/key_info_view.tsx b/ui/litellm-dashboard/src/components/templates/key_info_view.tsx
index 0080924fb6..ba04e2644a 100644
--- a/ui/litellm-dashboard/src/components/templates/key_info_view.tsx
+++ b/ui/litellm-dashboard/src/components/templates/key_info_view.tsx
@@ -50,7 +50,7 @@ interface KeyInfoViewProps {
 /**
  * ─────────────────────────────────────────────────────────────────────────
  * @deprecated
- * This component is being DEPRECATED in favor of src/app/(console)/virtual-keys/components/KeyInfoView.tsx
+ * This component is being DEPRECATED in favor of src/app/dashboard/virtual-keys/components/KeyInfoView.tsx
  * Please contribute to the new refactor.
  * ─────────────────────────────────────────────────────────────────────────
  */
diff --git a/ui/litellm-dashboard/src/components/templates/view_key_table.tsx b/ui/litellm-dashboard/src/components/templates/view_key_table.tsx
index f3ba12d56d..3fad7c0a35 100644
--- a/ui/litellm-dashboard/src/components/templates/view_key_table.tsx
+++ b/ui/litellm-dashboard/src/components/templates/view_key_table.tsx
@@ -138,7 +138,7 @@ interface CombinedLimits {
 /**
  * ─────────────────────────────────────────────────────────────────────────
  * @deprecated
- * This component is being DEPRECATED in favor of src/app/(console)/virtual-keys/components/VirtualKeysTable/
+ * This component is being DEPRECATED in favor of src/app/dashboard/virtual-keys/components/VirtualKeysTable/
  * Please contribute to the new refactor.
  * ─────────────────────────────────────────────────────────────────────────
  */

From cee408c0c06403b68837cd8cfc34d36c6a3ebc69 Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Mon, 6 Oct 2025 14:03:53 -0700
Subject: [PATCH 10/42] diagnosing next build issue

---
 .../src/app/dashboard/hooks/useAuthorized.ts  | 39 +++++++++++++------
 ui/litellm-dashboard/src/app/layout.tsx       |  9 +++--
 ui/litellm-dashboard/src/utils/cookieUtils.ts |  1 +
 3 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/dashboard/hooks/useAuthorized.ts b/ui/litellm-dashboard/src/app/dashboard/hooks/useAuthorized.ts
index 9d436d0566..74c0476f19 100644
--- a/ui/litellm-dashboard/src/app/dashboard/hooks/useAuthorized.ts
+++ b/ui/litellm-dashboard/src/app/dashboard/hooks/useAuthorized.ts
@@ -1,24 +1,41 @@
 "use client";
 
-import { getCookie } from "@/utils/cookieUtils";
+import { useEffect, useMemo } from "react";
+import { getCookie, clearTokenCookies } from "@/utils/cookieUtils";
 import { useRouter } from "next/navigation";
 import { jwtDecode } from "jwt-decode";
 
 const useAuthorized = () => {
-  const token = getCookie("token");
   const router = useRouter();
 
-  if (!token) {
-    router.replace("/sso/key/generate");
-  }
+  const token = typeof document !== "undefined" ? getCookie("token") : null;
 
-  const decoded = jwtDecode(token as string) as { [key: string]: any };
-  const accessToken = decoded.key;
-  const userId = decoded.user_id;
-  const userRole = decoded.user_role;
-  const premiumUser = decoded.premium_user;
+  // Redirect after mount if missing/invalid token
+  useEffect(() => {
+    if (!token) {
+      router.replace("/sso/key/generate");
+    }
+  }, [token, router]);
 
-  return { accessToken, userId, userRole, premiumUser };
+  // Decode safely
+  const decoded = useMemo(() => {
+    if (!token) return null;
+    try {
+      return jwtDecode(token) as Record<string, any>;
+    } catch {
+      // Bad token in cookie — clear and bounce
+      clearTokenCookies();
+      router.replace("/sso/key/generate");
+      return null;
+    }
+  }, [token, router]);
+
+  return {
+    accessToken: decoded?.key ?? null,
+    userId: decoded?.user_id ?? null,
+    userRole: decoded?.user_role ?? null,
+    premiumUser: decoded?.premium_user ?? null,
+  };
 };
 
 export default useAuthorized;
diff --git a/ui/litellm-dashboard/src/app/layout.tsx b/ui/litellm-dashboard/src/app/layout.tsx
index 8a37d0fa1b..9b6c027a56 100644
--- a/ui/litellm-dashboard/src/app/layout.tsx
+++ b/ui/litellm-dashboard/src/app/layout.tsx
@@ -18,9 +18,12 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <FeatureFlagsProvider>
-        <body className={inter.className}>{children}</body>
-      </FeatureFlagsProvider>
+
+        <body className={inter.className}>
+          <FeatureFlagsProvider>
+            {children}
+          </FeatureFlagsProvider>
+        </body>
     </html>
   );
 }
diff --git a/ui/litellm-dashboard/src/utils/cookieUtils.ts b/ui/litellm-dashboard/src/utils/cookieUtils.ts
index 2cc9ef61eb..e477a9f77e 100644
--- a/ui/litellm-dashboard/src/utils/cookieUtils.ts
+++ b/ui/litellm-dashboard/src/utils/cookieUtils.ts
@@ -37,6 +37,7 @@ export function clearTokenCookies() {
  * @returns The cookie value or null if not found
  */
 export function getCookie(name: string) {
+  if (typeof document === "undefined") return null;
   const cookieValue = document.cookie.split("; ").find((row) => row.startsWith(name + "="));
   return cookieValue ? cookieValue.split("=")[1] : null;
 }

From 00f61b214c04c5c78380f74898cdd50cbf2ccdd4 Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Mon, 6 Oct 2025 14:17:02 -0700
Subject: [PATCH 11/42] more window guards

---
 .../VirtualKeysTable/VirtualKeysTable.tsx     | 23 ++++++++++---------
 ui/litellm-dashboard/src/utils/cookieUtils.ts |  4 ++++
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
index b7727a299b..cbf10f9771 100644
--- a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
+++ b/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
@@ -105,18 +105,19 @@ const VirtualKeysTable = ({
 
   // Add a useEffect to call refresh when a key is created
   useEffect(() => {
-    if (refresh) {
-      const handleStorageChange = () => {
-        refresh();
-      };
-
-      // Listen for storage events that might indicate a key was created
-      window.addEventListener("storage", handleStorageChange);
-
-      return () => {
-        window.removeEventListener("storage", handleStorageChange);
-      };
+    if (!refresh || typeof window === "undefined") {
+      return;
     }
+    const handleStorageChange = () => {
+      refresh();
+    };
+
+    // Listen for storage events that might indicate a key was created
+    window.addEventListener("storage", handleStorageChange);
+
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+    };
   }, [refresh]);
 
   const columns: ColumnDef<KeyResponse>[] = [
diff --git a/ui/litellm-dashboard/src/utils/cookieUtils.ts b/ui/litellm-dashboard/src/utils/cookieUtils.ts
index e477a9f77e..23682fd6e8 100644
--- a/ui/litellm-dashboard/src/utils/cookieUtils.ts
+++ b/ui/litellm-dashboard/src/utils/cookieUtils.ts
@@ -6,6 +6,10 @@
  * Clears the token cookie from both root and /ui paths
  */
 export function clearTokenCookies() {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return;
+  }
+
   // Get the current domain
   const domain = window.location.hostname;
 

From b1f3553ae4b7b0140540eb910c540d6e77f1a863 Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Mon, 6 Oct 2025 14:28:12 -0700
Subject: [PATCH 12/42] Update networking.tsx

---
 .../src/components/networking.tsx             | 33 ++++++++++++++++---
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx
index 5f27c277d4..2ce673ee54 100644
--- a/ui/litellm-dashboard/src/components/networking.tsx
+++ b/ui/litellm-dashboard/src/components/networking.tsx
@@ -34,18 +34,34 @@ if (isLocal != true) {
   console.log = function () {};
 }
 
+const getWindowLocation = () => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  return window.location;
+};
+
 const updateProxyBaseUrl = (serverRootPath: string, receivedProxyBaseUrl: string | null = null) => {
   /**
    * Special function for updating the proxy base url. Should only be called by getUiConfig.
    */
-  const defaultProxyBaseUrl = isLocal ? "http://localhost:4000" : window.location.origin;
-  let initialProxyBaseUrl = receivedProxyBaseUrl || defaultProxyBaseUrl;
+  const browserLocation = getWindowLocation();
+  const resolvedDefaultProxyBaseUrl = isLocal ? "http://localhost:4000" : browserLocation?.origin ?? null;
+  let initialProxyBaseUrl = receivedProxyBaseUrl || resolvedDefaultProxyBaseUrl;
   console.log("proxyBaseUrl:", proxyBaseUrl);
   console.log("serverRootPath:", serverRootPath);
+
+  if (!initialProxyBaseUrl) {
+    proxyBaseUrl = proxyBaseUrl ?? null;
+    console.log("Updated proxyBaseUrl:", proxyBaseUrl);
+    return;
+  }
+
   if (serverRootPath.length > 0 && !initialProxyBaseUrl.endsWith(serverRootPath) && serverRootPath != "/") {
     initialProxyBaseUrl += serverRootPath;
-    proxyBaseUrl = initialProxyBaseUrl;
   }
+
+  proxyBaseUrl = initialProxyBaseUrl;
   console.log("Updated proxyBaseUrl:", proxyBaseUrl);
 };
 
@@ -54,7 +70,11 @@ const updateServerRootPath = (receivedServerRootPath: string) => {
 };
 
 export const getProxyBaseUrl = (): string => {
-  return proxyBaseUrl ? proxyBaseUrl : window.location.origin;
+  if (proxyBaseUrl) {
+    return proxyBaseUrl;
+  }
+  const browserLocation = getWindowLocation();
+  return browserLocation?.origin ?? "";
 };
 
 const HTTP_REQUEST = {
@@ -159,7 +179,10 @@ const handleError = async (errorData: string) => {
       NotificationsManager.info("UI Session Expired. Logging out.");
       lastErrorTime = currentTime;
       clearTokenCookies();
-      window.location.href = window.location.pathname;
+      const browserLocation = getWindowLocation();
+      if (browserLocation) {
+        window.location.href = browserLocation.pathname;
+      }
     }
     lastErrorTime = currentTime;
   } else {

From 6529ed4d620210efccc51912e413cb1ac4333041 Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Mon, 6 Oct 2025 19:21:34 -0700
Subject: [PATCH 13/42] hidden dashboard routing, dev and build env files

---
 ui/litellm-dashboard/.env.development         |  2 +
 ui/litellm-dashboard/.env.production          |  2 +
 .../components/Sidebar2.tsx                   | 33 ++++++--
 .../components/SidebarProvider.tsx            | 32 +++++++
 .../components/modals/CreateUserModal.tsx     |  6 +-
 .../hooks/useAuthorized.ts                    |  0
 .../app/{dashboard => (dashboard)}/layout.tsx |  4 +-
 .../virtual-keys/components/CreateKey.tsx     |  6 +-
 .../CreateKeyForm/KeyDetailsSection.tsx       |  0
 .../CreateKeyForm/OptionalSettingsSection.tsx |  2 +-
 .../CreateKeyForm/OwnershipSection.tsx        |  2 +-
 .../CreateKeyModal/CreateKeyModal.tsx         | 20 ++---
 .../components/CreateKeyModal/hooks/index.ts  |  0
 .../hooks/useGuardrailsAndPrompts.ts          |  4 +-
 .../hooks/useMcpAccessGroups.ts               |  4 +-
 .../CreateKeyModal/hooks/useTeamModels.ts     |  4 +-
 .../CreateKeyModal/hooks/useUserModels.ts     |  4 +-
 .../CreateKeyModal/hooks/useUserSearch.ts     |  4 +-
 .../components/CreateKeyModal/networking.ts   |  2 +-
 .../components/CreateKeyModal/types.ts        |  0
 .../components/CreateKeyModal/utils.ts        |  2 +-
 .../virtual-keys/components/KeyInfoView.tsx   |  0
 .../virtual-keys/components/SaveKeyModal.tsx  |  0
 .../VirtualKeysTable/VirtualKeysTable.tsx     |  6 +-
 .../VirtualKeysTable/hooks/useFilterLogic.ts  |  0
 .../virtual-keys/hooks/useTeams.tsx           |  4 +-
 .../virtual-keys/networking.ts                |  0
 .../virtual-keys/page.tsx                     |  8 +-
 .../dashboard/components/SidebarProvider.tsx  | 36 --------
 ui/litellm-dashboard/src/app/page.tsx         |  8 +-
 .../src/components/leftnav.tsx                | 37 +++++----
 .../organisms/create_key_button.tsx           |  3 +-
 .../components/templates/key_info_view.tsx    |  2 +-
 .../components/templates/view_key_table.tsx   |  2 +-
 .../src/hooks/useFeatureFlags.tsx             | 83 ++++++++++++++++---
 35 files changed, 208 insertions(+), 114 deletions(-)
 create mode 100644 ui/litellm-dashboard/.env.development
 create mode 100644 ui/litellm-dashboard/.env.production
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/components/Sidebar2.tsx (87%)
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/components/SidebarProvider.tsx
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/components/modals/CreateUserModal.tsx (98%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/hooks/useAuthorized.ts (100%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/layout.tsx (91%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/components/CreateKey.tsx (92%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx (100%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx (99%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx (97%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx (89%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/components/CreateKeyModal/hooks/index.ts (100%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts (76%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts (73%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts (85%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts (75%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts (84%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/components/CreateKeyModal/networking.ts (95%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/components/CreateKeyModal/types.ts (100%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/components/CreateKeyModal/utils.ts (98%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/components/KeyInfoView.tsx (100%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/components/SaveKeyModal.tsx (100%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx (99%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/components/VirtualKeysTable/hooks/useFilterLogic.ts (100%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/hooks/useTeams.tsx (77%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/networking.ts (100%)
 rename ui/litellm-dashboard/src/app/{dashboard => (dashboard)}/virtual-keys/page.tsx (81%)
 delete mode 100644 ui/litellm-dashboard/src/app/dashboard/components/SidebarProvider.tsx

diff --git a/ui/litellm-dashboard/.env.development b/ui/litellm-dashboard/.env.development
new file mode 100644
index 0000000000..b408125408
--- /dev/null
+++ b/ui/litellm-dashboard/.env.development
@@ -0,0 +1,2 @@
+NODE_ENV=development
+NEXT_PUBLIC_BASE_URL=""
\ No newline at end of file
diff --git a/ui/litellm-dashboard/.env.production b/ui/litellm-dashboard/.env.production
new file mode 100644
index 0000000000..1df897e7d2
--- /dev/null
+++ b/ui/litellm-dashboard/.env.production
@@ -0,0 +1,2 @@
+NODE_ENV=production
+NEXT_PUBLIC_BASE_URL="ui/"
\ No newline at end of file
diff --git a/ui/litellm-dashboard/src/app/dashboard/components/Sidebar2.tsx b/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx
similarity index 87%
rename from ui/litellm-dashboard/src/app/dashboard/components/Sidebar2.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx
index 9de9f2f136..209cf2e67f 100644
--- a/ui/litellm-dashboard/src/app/dashboard/components/Sidebar2.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx
@@ -46,6 +46,21 @@ interface MenuItem {
   icon?: React.ReactNode;
 }
 
+/** ---------- Base URL helpers ---------- */
+/** Normalizes NEXT_PUBLIC_BASE_URL into either "" or "/something" (no trailing slash). */
+const getBasePath = () => {
+  const raw = process.env.NEXT_PUBLIC_BASE_URL ?? "";
+  const trimmed = raw.replace(/^\/+|\/+$/g, ""); // strip leading/trailing slashes
+  return trimmed ? `/${trimmed}` : "";
+};
+
+/** Joins base path with a relative path like "virtual-keys" or "/virtual-keys" -> "/base/virtual-keys" */
+const withBase = (relativePath: string) => {
+  const base = getBasePath(); // "" or "/ui" (no trailing slash)
+  const rel = relativePath.replace(/^\/+/, ""); // drop any leading slash
+  return `${base}/${rel}`.replace(/\/{2,}/g, "/"); // collapse accidental doubles
+};
+
 const Sidebar2: React.FC<SidebarProps> = ({ accessToken, userRole, defaultSelectedKey, collapsed = false }) => {
   const menuItems: MenuItem[] = [
     { key: "1", page: "api-keys", label: "Virtual Keys", icon: <KeyOutlined style={{ fontSize: 18 }} /> },
@@ -217,8 +232,11 @@ const Sidebar2: React.FC<SidebarProps> = ({ accessToken, userRole, defaultSelect
     return "1";
   };
 
+  // Match Virtual Keys path with base prefix (e.g., "/virtual-keys" or "/ui/virtual-keys")
+  const virtualKeysPath = withBase("virtual-keys");
+
   const selectedMenuKey =
-    pathname === "/dashboard/virtual-keys"
+    pathname === virtualKeysPath
       ? "1"
       : pageParam
         ? findMenuItemKey(pageParam)
@@ -226,16 +244,19 @@ const Sidebar2: React.FC<SidebarProps> = ({ accessToken, userRole, defaultSelect
           ? findMenuItemKey(defaultSelectedKey)
           : "1";
 
-  // Root-only routing helper: always replace everything after the domain
-  const rootWithPage = (p: string) => ({ pathname: "/", query: { page: p } });
+  // Root-only routing helper: always replace everything after the domain, honoring base path
+  const rootWithPage = (p: string) => ({
+    pathname: getBasePath() || "/",
+    query: { page: p },
+  });
 
   // Convert to AntD Menu items:
-  // - "Virtual Keys" still routes to /virtual-keys
-  // - All other items (and children) route to "/?page=<page>"
+  // - "Virtual Keys" routes to "/<BASE>/virtual-keys"
+  // - All other items (and children) route to "/<BASE>/?page=<page>"
   const antdItems = filteredMenuItems.map((item) => {
     const isVirtualKeys = item.key === "1";
     const label = isVirtualKeys ? (
-      <Link href="/virtual-keys">Virtual Keys</Link>
+      <Link href={withBase("virtual-keys")}>Virtual Keys</Link>
     ) : (
       <Link href={rootWithPage(item.page)}>{item.label}</Link>
     );
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/components/SidebarProvider.tsx b/ui/litellm-dashboard/src/app/(dashboard)/components/SidebarProvider.tsx
new file mode 100644
index 0000000000..822a30e640
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/components/SidebarProvider.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import Sidebar2 from "@/app/(dashboard)/components/Sidebar2";
+import Sidebar from "@/components/leftnav";
+import React from "react";
+import useFeatureFlags from "@/hooks/useFeatureFlags";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+
+interface SidebarProviderProps {
+  defaultSelectedKey: string;
+  sidebarCollapsed: boolean;
+  setPage: (page: string) => void;
+}
+
+const SidebarProvider = ({ defaultSelectedKey, sidebarCollapsed, setPage }: SidebarProviderProps) => {
+  const { accessToken, userRole } = useAuthorized();
+  const { refactoredUIFlag, setRefactoredUIFlag } = useFeatureFlags();
+
+  return refactoredUIFlag ? (
+    <Sidebar2 accessToken={accessToken} userRole={userRole} />
+  ) : (
+    <Sidebar
+      accessToken={accessToken}
+      setPage={setPage}
+      userRole={userRole}
+      defaultSelectedKey={defaultSelectedKey}
+      collapsed={sidebarCollapsed}
+    />
+  );
+};
+
+export default SidebarProvider;
diff --git a/ui/litellm-dashboard/src/app/dashboard/components/modals/CreateUserModal.tsx b/ui/litellm-dashboard/src/app/(dashboard)/components/modals/CreateUserModal.tsx
similarity index 98%
rename from ui/litellm-dashboard/src/app/dashboard/components/modals/CreateUserModal.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/components/modals/CreateUserModal.tsx
index 8b16074b25..fce7f69192 100644
--- a/ui/litellm-dashboard/src/app/dashboard/components/modals/CreateUserModal.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/components/modals/CreateUserModal.tsx
@@ -29,9 +29,9 @@ import {
 } from "@/components/networking";
 import { getModelDisplayName } from "@/components/key_team_helpers/fetch_available_models_team_key";
 import BulkCreateUsersButton from "@/components/bulk_create_users_button";
-import { fetchTeams } from "@/app/dashboard/virtual-keys/networking";
-import useTeams from "@/app/dashboard/virtual-keys/hooks/useTeams";
-import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
+import { fetchTeams } from "@/app/(dashboard)/virtual-keys/networking";
+import useTeams from "@/app/(dashboard)/virtual-keys/hooks/useTeams";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 // Helper function to generate UUID compatible across all environments
 const generateUUID = (): string => {
diff --git a/ui/litellm-dashboard/src/app/dashboard/hooks/useAuthorized.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/useAuthorized.ts
similarity index 100%
rename from ui/litellm-dashboard/src/app/dashboard/hooks/useAuthorized.ts
rename to ui/litellm-dashboard/src/app/(dashboard)/hooks/useAuthorized.ts
diff --git a/ui/litellm-dashboard/src/app/dashboard/layout.tsx b/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx
similarity index 91%
rename from ui/litellm-dashboard/src/app/dashboard/layout.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/layout.tsx
index 851ecec665..ad8a82703f 100644
--- a/ui/litellm-dashboard/src/app/dashboard/layout.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx
@@ -3,8 +3,8 @@
 import React from "react";
 import Navbar from "@/components/navbar";
 import { ThemeProvider } from "@/contexts/ThemeContext";
-import Sidebar2 from "@/app/dashboard/components/Sidebar2";
-import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
+import Sidebar2 from "@/app/(dashboard)/components/Sidebar2";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   const { accessToken, userRole } = useAuthorized();
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKey.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKey.tsx
similarity index 92%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKey.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKey.tsx
index 15dd713917..82be28e495 100644
--- a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKey.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKey.tsx
@@ -6,9 +6,9 @@ import { Modal, Form } from "antd";
 import { getPossibleUserRoles, Organization } from "@/components/networking";
 import { rolesWithWriteAccess } from "@/utils/roles";
 import { Team } from "@/components/key_team_helpers/key_list";
-import CreateKeyModal from "@/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyModal";
-import CreateUserModal from "@/app/dashboard/components/modals/CreateUserModal";
-import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
+import CreateKeyModal from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyModal";
+import CreateUserModal from "@/app/(dashboard)/components/modals/CreateUserModal";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 interface CreateKeyProps {
   team: Team | null;
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx
index 65ebd2d571..b88f891944 100644
--- a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx
@@ -17,7 +17,7 @@ import SchemaFormFields from "@/components/common_components/check_openapi_schem
 import { Team } from "@/components/key_team_helpers/key_list";
 import React from "react";
 import { DefaultOptionType } from "rc-select/lib/Select";
-import { ModelAliases } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/types";
+import { ModelAliases } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/types";
 
 export interface OptionalSettingsSectionProps {
   form: FormInstance;
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx
similarity index 97%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx
index 00c2e9a1e2..f08b4ea367 100644
--- a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx
@@ -6,7 +6,7 @@ import { InfoCircleOutlined } from "@ant-design/icons";
 import TeamDropdown from "@/components/common_components/team_dropdown";
 import React from "react";
 import { Team } from "@/components/key_team_helpers/key_list";
-import { UserOption } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/types";
+import { UserOption } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/types";
 
 interface OwnershipSectionProps {
   team: Team | null;
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx
similarity index 89%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx
index 2bee7f72b1..cbe3db4e8f 100644
--- a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx
@@ -5,7 +5,7 @@ import { Text } from "@tremor/react";
 import { keyCreateCall, keyCreateServiceAccountCall } from "@/components/networking";
 import React, { useEffect, useState } from "react";
 import { Team } from "@/components/key_team_helpers/key_list";
-import SaveKeyModal from "@/app/dashboard/virtual-keys/components/SaveKeyModal";
+import SaveKeyModal from "@/app/(dashboard)/virtual-keys/components/SaveKeyModal";
 import NotificationsManager from "@/components/molecules/notifications_manager";
 import {
   useGuardrailsAndPrompts,
@@ -13,15 +13,15 @@ import {
   useTeamModels,
   useUserModels,
   useUserSearch,
-} from "@/app/dashboard/virtual-keys/components/CreateKeyModal/hooks";
-import OwnershipSection from "@/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection";
-import KeyDetailsSection from "@/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection";
-import OptionalSettingsSection from "@/app/dashboard/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection";
-import { ModelAliases } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/types";
-import { getPredefinedTags, prepareFormValues } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/utils";
-import { fetchTeams } from "@/app/dashboard/virtual-keys/networking";
-import useTeams from "@/app/dashboard/virtual-keys/hooks/useTeams";
-import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
+} from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks";
+import OwnershipSection from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection";
+import KeyDetailsSection from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection";
+import OptionalSettingsSection from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection";
+import { ModelAliases } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/types";
+import { getPredefinedTags, prepareFormValues } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/utils";
+import { fetchTeams } from "@/app/(dashboard)/virtual-keys/networking";
+import useTeams from "@/app/(dashboard)/virtual-keys/hooks/useTeams";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 export interface CreateKeyModalProps {
   isModalVisible: boolean;
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/index.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/index.ts
similarity index 100%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/index.ts
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/index.ts
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts
similarity index 76%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts
index 2445240e1e..f4718e8ba0 100644
--- a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { fetchGuardrails, fetchPrompts } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/networking";
-import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
+import { fetchGuardrails, fetchPrompts } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/networking";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 export const useGuardrailsAndPrompts = () => {
   const [guardrails, setGuardrails] = useState<string[]>([]);
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts
similarity index 73%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts
index 5007040000..998b392f77 100644
--- a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { getMCPAccessGroups } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/networking";
-import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
+import { getMCPAccessGroups } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/networking";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 export const useMcpAccessGroups = () => {
   const [mcpAccessGroups, setMcpAccessGroups] = useState<string[]>([]);
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts
similarity index 85%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts
index 979337f5aa..dd99de0615 100644
--- a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import type { Team } from "@/components/key_team_helpers/key_list";
-import { fetchTeamModels } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/networking";
-import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
+import { fetchTeamModels } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/networking";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 export const useTeamModels = (selectedTeam: Team | null) => {
   const { userId: userID, userRole, accessToken } = useAuthorized();
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts
similarity index 75%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts
index badcaf93d9..66b5520f06 100644
--- a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { getUserModelNames } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/networking";
-import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
+import { getUserModelNames } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/networking";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 export const useUserModels = () => {
   const { userId: userID, userRole, accessToken } = useAuthorized();
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts
similarity index 84%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts
index a3840bdc62..d266a51667 100644
--- a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { debounce } from "lodash";
-import { searchUserOptionsByEmail } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/networking";
-import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
+import { searchUserOptionsByEmail } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/networking";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 type User = { user_id: string; user_email: string; role?: string };
 export interface UserOption {
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/networking.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/networking.ts
similarity index 95%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/networking.ts
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/networking.ts
index 2277800dad..377f6d3113 100644
--- a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/networking.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/networking.ts
@@ -6,7 +6,7 @@ import {
   User,
   userFilterUICall,
 } from "@/components/networking";
-import { ModelAvailableResponse, UserOption } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/types";
+import { ModelAvailableResponse, UserOption } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/types";
 
 export const fetchGuardrails = async (accessToken: string) => {
   try {
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/types.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/types.ts
similarity index 100%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/types.ts
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/types.ts
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/utils.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/utils.ts
similarity index 98%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/utils.ts
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/utils.ts
index 73cd433e78..1fb40b8789 100644
--- a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/CreateKeyModal/utils.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/utils.ts
@@ -1,5 +1,5 @@
 import { mapDisplayToInternalNames } from "@/components/callback_info_helpers";
-import { ModelAliases } from "@/app/dashboard/virtual-keys/components/CreateKeyModal/types";
+import { ModelAliases } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/types";
 
 export const getPredefinedTags = (data: any[] | null) => {
   let allTags = [];
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/KeyInfoView.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/KeyInfoView.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/KeyInfoView.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/KeyInfoView.tsx
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/SaveKeyModal.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/SaveKeyModal.tsx
similarity index 100%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/SaveKeyModal.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/SaveKeyModal.tsx
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
similarity index 99%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
index cbf10f9771..015d8c43f9 100644
--- a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
@@ -16,9 +16,9 @@ import { Organization, userListCall } from "@/components/networking";
 import { getModelDisplayName } from "@/components/key_team_helpers/fetch_available_models_team_key";
 import FilterComponent, { FilterOption } from "@/components/molecules/filter";
 import { useFilterLogic } from "@/components/key_team_helpers/filter_logic";
-import useTeams from "@/app/dashboard/virtual-keys/hooks/useTeams";
-import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
-import KeyInfoView from "@/app/dashboard/virtual-keys/components/KeyInfoView";
+import useTeams from "@/app/(dashboard)/virtual-keys/hooks/useTeams";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import KeyInfoView from "@/app/(dashboard)/virtual-keys/components/KeyInfoView";
 
 interface AllKeysTableProps {
   keys: KeyResponse[];
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/VirtualKeysTable/hooks/useFilterLogic.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/VirtualKeysTable/hooks/useFilterLogic.ts
similarity index 100%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/components/VirtualKeysTable/hooks/useFilterLogic.ts
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/VirtualKeysTable/hooks/useFilterLogic.ts
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/hooks/useTeams.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/hooks/useTeams.tsx
similarity index 77%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/hooks/useTeams.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/hooks/useTeams.tsx
index 92e5896e76..5f04f8a28a 100644
--- a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/hooks/useTeams.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/hooks/useTeams.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { fetchTeams } from "@/app/dashboard/virtual-keys/networking";
+import { fetchTeams } from "@/app/(dashboard)/virtual-keys/networking";
 import { Team } from "@/components/key_team_helpers/key_list";
-import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 const useTeams = () => {
   const [teams, setTeams] = useState<Team[]>([]);
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/networking.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/networking.ts
similarity index 100%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/networking.ts
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/networking.ts
diff --git a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/page.tsx
similarity index 81%
rename from ui/litellm-dashboard/src/app/dashboard/virtual-keys/page.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/page.tsx
index 7dfc959867..611d92f1a3 100644
--- a/ui/litellm-dashboard/src/app/dashboard/virtual-keys/page.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/page.tsx
@@ -1,15 +1,15 @@
 "use client";
 
-import VirtualKeysTable from "@/app/dashboard/virtual-keys/components/VirtualKeysTable/VirtualKeysTable";
+import VirtualKeysTable from "@/app/(dashboard)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable";
 import { useState } from "react";
 import useKeyList from "@/components/key_team_helpers/key_list";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Col, Grid } from "@tremor/react";
-import CreateKey from "@/app/dashboard/virtual-keys/components/CreateKey";
-import useAuthorized from "@/app/dashboard/hooks/useAuthorized"
+import CreateKey from "@/app/(dashboard)/virtual-keys/components/CreateKey";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 const VirtualKeysPage = () => {
-  const {accessToken, userRole} = useAuthorized();
+  const { accessToken, userRole } = useAuthorized();
   const [createClicked, setCreateClicked] = useState<boolean>(false);
 
   const queryClient = new QueryClient();
diff --git a/ui/litellm-dashboard/src/app/dashboard/components/SidebarProvider.tsx b/ui/litellm-dashboard/src/app/dashboard/components/SidebarProvider.tsx
deleted file mode 100644
index 8380493798..0000000000
--- a/ui/litellm-dashboard/src/app/dashboard/components/SidebarProvider.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client";
-
-import Sidebar2 from "@/app/dashboard/components/Sidebar2";
-import Sidebar from "@/components/leftnav";
-import React from "react";
-import useFeatureFlags from "@/hooks/useFeatureFlags";
-import useAuthorized from "@/app/dashboard/hooks/useAuthorized";
-
-interface SidebarProviderProps {
-  defaultSelectedKey: string;
-  sidebarCollapsed: boolean;
-  setPage: (page: string) => void;
-}
-
-const SidebarProvider = ({defaultSelectedKey, sidebarCollapsed, setPage}: SidebarProviderProps) => {
-
-  const {accessToken, userRole} = useAuthorized();
-  const { refactoredUIFlag, setRefactoredUIFlag } = useFeatureFlags();
-
-  return (
-    refactoredUIFlag ? (
-        <Sidebar2 accessToken={accessToken} userRole={userRole} />
-      ) : (
-        <Sidebar
-          accessToken={accessToken}
-          setPage={setPage}
-          userRole={userRole}
-          defaultSelectedKey={defaultSelectedKey}
-          collapsed={sidebarCollapsed}
-        />
-      )
-  );
-
-}
-
-export default SidebarProvider;
\ No newline at end of file
diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index 3815df002b..8e25dc192c 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -40,8 +40,8 @@ import UIThemeSettings from "@/components/ui_theme_settings";
 import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import { cx } from "@/lib/cva.config";
 import useFeatureFlags, { FeatureFlagsProvider } from "@/hooks/useFeatureFlags";
-import Sidebar2 from "@/app/dashboard/components/Sidebar2";
-import SidebarProvider from "@/app/dashboard/components/SidebarProvider";
+import Sidebar2 from "@/app/(dashboard)/components/Sidebar2";
+import SidebarProvider from "@/app/(dashboard)/components/SidebarProvider";
 
 function getCookie(name: string) {
   const cookieValue = document.cookie.split("; ").find((row) => row.startsWith(name + "="));
@@ -126,6 +126,10 @@ export default function CreateKeyPage() {
     return searchParams.get("page") || "api-keys";
   });
 
+  useEffect(() => {
+    setPage(searchParams.get("page") || "api-keys");
+  }, [searchParams]);
+
   // Custom setPage function that updates URL
   const updatePage = (newPage: string) => {
     // Update URL without full page reload
diff --git a/ui/litellm-dashboard/src/components/leftnav.tsx b/ui/litellm-dashboard/src/components/leftnav.tsx
index 34916cddb9..a0d8d162c6 100644
--- a/ui/litellm-dashboard/src/components/leftnav.tsx
+++ b/ui/litellm-dashboard/src/components/leftnav.tsx
@@ -56,6 +56,17 @@ interface MenuItem {
   icon?: React.ReactNode;
 }
 
+/** ---------- Base URL helpers ---------- */
+/**
+ * Normalizes NEXT_PUBLIC_BASE_URL to either "/" or "/ui/" (always with a trailing slash).
+ * Supported env values: "" or "ui/".
+ */
+const getBasePath = () => {
+  const raw = process.env.NEXT_PUBLIC_BASE_URL ?? "";
+  const trimmed = raw.replace(/^\/+|\/+$/g, ""); // strip leading/trailing slashes
+  return trimmed ? `/${trimmed}/` : "/"; // ensure trailing slash
+};
+
 const Sidebar: React.FC<SidebarProps> = ({ accessToken, setPage, userRole, defaultSelectedKey, collapsed = false }) => {
   // Note: If a menu item does not have a role, it is visible to all roles.
   const menuItems: MenuItem[] = [
@@ -214,6 +225,7 @@ const Sidebar: React.FC<SidebarProps> = ({ accessToken, setPage, userRole, defau
       ],
     },
   ];
+
   // Find the menu item that matches the default page, including in submenus
   const findMenuItemKey = (page: string): string => {
     // Check top-level items
@@ -248,6 +260,15 @@ const Sidebar: React.FC<SidebarProps> = ({ accessToken, setPage, userRole, defau
     return true;
   });
 
+  // Centralized navigation that prefixes the base path ("/" or "/ui/")
+  const goTo = (page: string) => {
+    const base = getBasePath(); // "/" or "/ui/"
+    const newSearchParams = new URLSearchParams(window.location.search);
+    newSearchParams.set("page", page);
+    window.history.pushState(null, "", `${base}?${newSearchParams.toString()}`); // e.g. "/ui/?page=..."
+    setPage(page);
+  };
+
   return (
     <Layout style={{ minHeight: "100vh" }}>
       <Sider
@@ -291,21 +312,9 @@ const Sidebar: React.FC<SidebarProps> = ({ accessToken, setPage, userRole, defau
                 key: child.key,
                 icon: child.icon,
                 label: child.label,
-                onClick: () => {
-                  const newSearchParams = new URLSearchParams(window.location.search);
-                  newSearchParams.set("page", child.page);
-                  window.history.pushState(null, "", `?${newSearchParams.toString()}`);
-                  setPage(child.page);
-                },
+                onClick: () => goTo(child.page),
               })),
-              onClick: !item.children
-                ? () => {
-                    const newSearchParams = new URLSearchParams(window.location.search);
-                    newSearchParams.set("page", item.page);
-                    window.history.pushState(null, "", `?${newSearchParams.toString()}`);
-                    setPage(item.page);
-                  }
-                : undefined,
+              onClick: !item.children ? () => goTo(item.page) : undefined,
             }))}
           />
         </ConfigProvider>
diff --git a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
index d4035e83f0..c37d94abb1 100644
--- a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
@@ -131,11 +131,10 @@ export const fetchUserModels = async (
   }
 };
 
-
 /**
  * ─────────────────────────────────────────────────────────────────────────
  * @deprecated
- * This component is being DEPRECATED in favor of src/app/dashboard/virtual-keys/components/CreateKey.tsx
+ * This component is being DEPRECATED in favor of src/app/(dashboard)/virtual-keys/components/CreateKey.tsx
  * Please contribute to the new refactor.
  * ─────────────────────────────────────────────────────────────────────────
  */
diff --git a/ui/litellm-dashboard/src/components/templates/key_info_view.tsx b/ui/litellm-dashboard/src/components/templates/key_info_view.tsx
index ba04e2644a..26adaa11db 100644
--- a/ui/litellm-dashboard/src/components/templates/key_info_view.tsx
+++ b/ui/litellm-dashboard/src/components/templates/key_info_view.tsx
@@ -50,7 +50,7 @@ interface KeyInfoViewProps {
 /**
  * ─────────────────────────────────────────────────────────────────────────
  * @deprecated
- * This component is being DEPRECATED in favor of src/app/dashboard/virtual-keys/components/KeyInfoView.tsx
+ * This component is being DEPRECATED in favor of src/app/(dashboard)/virtual-keys/components/KeyInfoView.tsx
  * Please contribute to the new refactor.
  * ─────────────────────────────────────────────────────────────────────────
  */
diff --git a/ui/litellm-dashboard/src/components/templates/view_key_table.tsx b/ui/litellm-dashboard/src/components/templates/view_key_table.tsx
index 3fad7c0a35..d146d5ba79 100644
--- a/ui/litellm-dashboard/src/components/templates/view_key_table.tsx
+++ b/ui/litellm-dashboard/src/components/templates/view_key_table.tsx
@@ -138,7 +138,7 @@ interface CombinedLimits {
 /**
  * ─────────────────────────────────────────────────────────────────────────
  * @deprecated
- * This component is being DEPRECATED in favor of src/app/dashboard/virtual-keys/components/VirtualKeysTable/
+ * This component is being DEPRECATED in favor of src/app/(dashboard)/virtual-keys/components/VirtualKeysTable/
  * Please contribute to the new refactor.
  * ─────────────────────────────────────────────────────────────────────────
  */
diff --git a/ui/litellm-dashboard/src/hooks/useFeatureFlags.tsx b/ui/litellm-dashboard/src/hooks/useFeatureFlags.tsx
index d50fdf46a6..f1914f463a 100644
--- a/ui/litellm-dashboard/src/hooks/useFeatureFlags.tsx
+++ b/ui/litellm-dashboard/src/hooks/useFeatureFlags.tsx
@@ -1,26 +1,87 @@
-'use client';
-import React, {createContext, useContext, useState} from 'react';
+"use client";
+import React, { createContext, useContext, useEffect, useState } from "react";
 
 type Flags = {
   refactoredUIFlag: boolean;
   setRefactoredUIFlag: (v: boolean) => void;
 };
 
+const STORAGE_KEY = "feature.refactoredUIFlag";
+
 const FeatureFlagsCtx = createContext<Flags | null>(null);
 
-export const FeatureFlagsProvider = ({ children }: { children: React.ReactNode }) => {
-  const [refactoredUIFlag, setRefactoredUIFlag] = useState(false);
-  return (
-    <FeatureFlagsCtx.Provider value={{ refactoredUIFlag, setRefactoredUIFlag }}>
-    {children}
-    </FeatureFlagsCtx.Provider>
-);
+/** Safely read the flag from localStorage. If anything goes wrong, reset to false. */
+function readFlagSafely(): boolean {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw === null) {
+      localStorage.setItem(STORAGE_KEY, "false");
+      return false;
+    }
+
+    const v = raw.trim().toLowerCase();
+    if (v === "true" || v === "1") return true;
+    if (v === "false" || v === "0") return false;
+
+    // Last chance: try JSON.parse in case something odd was stored.
+    const parsed = JSON.parse(raw);
+    if (typeof parsed === "boolean") return parsed;
+
+    // Malformed → reset to false
+    localStorage.setItem(STORAGE_KEY, "false");
+    return false;
+  } catch {
+    // If even accessing localStorage throws, best effort reset then default to false
+    try {
+      localStorage.setItem(STORAGE_KEY, "false");
+    } catch {}
+    return false;
+  }
 }
 
+function writeFlagSafely(v: boolean) {
+  try {
+    localStorage.setItem(STORAGE_KEY, String(v));
+  } catch {
+    // Ignore write errors; state will still reflect the intended value.
+  }
+}
+
+export const FeatureFlagsProvider = ({ children }: { children: React.ReactNode }) => {
+  // Lazy init reads from localStorage only on the client
+  const [refactoredUIFlag, setRefactoredUIFlagState] = useState<boolean>(() => readFlagSafely());
+
+  const setRefactoredUIFlag = (v: boolean) => {
+    setRefactoredUIFlagState(v);
+    writeFlagSafely(v);
+  };
+
+  // Keep this flag in sync across tabs/windows.
+  useEffect(() => {
+    const onStorage = (e: StorageEvent) => {
+      if (e.key === STORAGE_KEY && e.newValue != null) {
+        const next = e.newValue.trim().toLowerCase();
+        setRefactoredUIFlagState(next === "true" || next === "1");
+      }
+      // If the key was cleared elsewhere, self-heal to false.
+      if (e.key === STORAGE_KEY && e.newValue === null) {
+        writeFlagSafely(false);
+        setRefactoredUIFlagState(false);
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, []);
+
+  return (
+    <FeatureFlagsCtx.Provider value={{ refactoredUIFlag, setRefactoredUIFlag }}>{children}</FeatureFlagsCtx.Provider>
+  );
+};
+
 const useFeatureFlags = () => {
   const ctx = useContext(FeatureFlagsCtx);
-  if (!ctx) throw new Error('useFeatureFlags must be used within FeatureFlagsProvider');
+  if (!ctx) throw new Error("useFeatureFlags must be used within FeatureFlagsProvider");
   return ctx;
-}
+};
 
 export default useFeatureFlags;

From eed19fb4abc6f1c68fa4680acf9436f8fab06869 Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Mon, 6 Oct 2025 19:36:40 -0700
Subject: [PATCH 14/42] slight improvement for Sidebar2

---
 .../app/(dashboard)/components/Sidebar2.tsx   | 60 ++++++++++++-------
 ui/litellm-dashboard/src/app/page.tsx         |  1 -
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx b/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx
index 209cf2e67f..37901b5e63 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx
@@ -1,8 +1,7 @@
 "use client";
 
 import React from "react";
-import Link from "next/link";
-import { usePathname, useSearchParams } from "next/navigation";
+import { usePathname, useSearchParams, useRouter } from "next/navigation";
 import { Layout, Menu, ConfigProvider } from "antd";
 import {
   KeyOutlined,
@@ -62,6 +61,11 @@ const withBase = (relativePath: string) => {
 };
 
 const Sidebar2: React.FC<SidebarProps> = ({ accessToken, userRole, defaultSelectedKey, collapsed = false }) => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  /** ---------- Menu model ---------- */
   const menuItems: MenuItem[] = [
     { key: "1", page: "api-keys", label: "Virtual Keys", icon: <KeyOutlined style={{ fontSize: 18 }} /> },
     {
@@ -217,9 +221,7 @@ const Sidebar2: React.FC<SidebarProps> = ({ accessToken, userRole, defaultSelect
       children: item.children?.filter((child) => !child.roles || child.roles.includes(userRole)),
     }));
 
-  // Highlight selection based on pathname or ?page=
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
+  /** ---------- Selection state ---------- */
   const pageParam = searchParams.get("page") || undefined;
 
   const findMenuItemKey = (page: string): string => {
@@ -244,31 +246,47 @@ const Sidebar2: React.FC<SidebarProps> = ({ accessToken, userRole, defaultSelect
           ? findMenuItemKey(defaultSelectedKey)
           : "1";
 
-  // Root-only routing helper: always replace everything after the domain, honoring base path
-  const rootWithPage = (p: string) => ({
-    pathname: getBasePath() || "/",
-    query: { page: p },
-  });
+  /** ---------- Navigation helpers (SPA only) ---------- */
+  // Build a root URL ("/" or "/base/") with an updated ?page=...
+  const goTo = (p: string) => {
+    const base = getBasePath() || "/";
+    const root = base.endsWith("/") ? base : `${base}/`;
+    const sp = new URLSearchParams(typeof window !== "undefined" ? window.location.search : "");
+    sp.set("page", p);
+    // Use Next router for client navigation on the SAME route (no hard fetch)
+    router.replace(`${root}?${sp.toString()}`, { scroll: false });
+  };
 
-  // Convert to AntD Menu items:
-  // - "Virtual Keys" routes to "/<BASE>/virtual-keys"
-  // - All other items (and children) route to "/<BASE>/?page=<page>"
+  // Keep the /virtual-keys path the same, but avoid route fetches/hard reloads.
+  const goToVirtualKeys = () => {
+    const base = getBasePath() || "/";
+    const root = base.endsWith("/") ? base : `${base}/`;
+    const sp = new URLSearchParams(typeof window !== "undefined" ? window.location.search : "");
+    sp.set("page", "api-keys");
+
+    // 1) Client transition to the root with ?page=api-keys so the view updates.
+    router.replace(`${root}?${sp.toString()}`, { scroll: false });
+
+    // 2) Cosmetic URL swap to ".../virtual-keys" without navigation (keeps path the same).
+    const vk = withBase("virtual-keys");
+    if (typeof window !== "undefined") {
+      window.history.replaceState(null, "", vk);
+    }
+  };
+
+  /** ---------- AntD items with onClick handlers ---------- */
   const antdItems = filteredMenuItems.map((item) => {
     const isVirtualKeys = item.key === "1";
-    const label = isVirtualKeys ? (
-      <Link href={withBase("virtual-keys")}>Virtual Keys</Link>
-    ) : (
-      <Link href={rootWithPage(item.page)}>{item.label}</Link>
-    );
-
     return {
       key: item.key,
       icon: item.icon,
-      label,
+      label: item.label, // plain text; click handled via onClick
+      onClick: !item.children ? (isVirtualKeys ? goToVirtualKeys : () => goTo(item.page)) : undefined,
       children: item.children?.map((child) => ({
         key: child.key,
         icon: child.icon,
-        label: <Link href={rootWithPage(child.page)}>{child.label}</Link>,
+        label: child.label,
+        onClick: () => goTo(child.page),
       })),
     };
   });
diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index 8e25dc192c..104ef41810 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -39,7 +39,6 @@ import VectorStoreManagement from "@/components/vector_store_management";
 import UIThemeSettings from "@/components/ui_theme_settings";
 import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import { cx } from "@/lib/cva.config";
-import useFeatureFlags, { FeatureFlagsProvider } from "@/hooks/useFeatureFlags";
 import Sidebar2 from "@/app/(dashboard)/components/Sidebar2";
 import SidebarProvider from "@/app/(dashboard)/components/SidebarProvider";
 

From 051c9a7c6192f5179e867ace63358f1bb67816a6 Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Mon, 6 Oct 2025 20:17:19 -0700
Subject: [PATCH 15/42] Sidebar2 uses FF now

---
 .../app/(dashboard)/components/Sidebar2.tsx   | 247 ++++++++----------
 .../components/SidebarProvider.tsx            |  32 ---
 .../src/app/(dashboard)/layout.tsx            |  26 +-
 ui/litellm-dashboard/src/app/page.tsx         |  18 +-
 4 files changed, 141 insertions(+), 182 deletions(-)
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/components/SidebarProvider.tsx

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx b/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx
index 37901b5e63..843a176f6e 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx
@@ -1,8 +1,5 @@
-"use client";
-
-import React from "react";
-import { usePathname, useSearchParams, useRouter } from "next/navigation";
-import { Layout, Menu, ConfigProvider } from "antd";
+import { Layout, Menu } from "antd";
+import { useRouter, usePathname } from "next/navigation"; // UPDATED: also usePathname to detect current route
 import {
   KeyOutlined,
   PlayCircleOutlined,
@@ -23,16 +20,18 @@ import {
   TagsOutlined,
   BgColorsOutlined,
 } from "@ant-design/icons";
+import { ConfigProvider } from "antd";
+import useFeatureFlags from "@/hooks/useFeatureFlags";
 import { all_admin_roles, internalUserRoles, isAdminRole, rolesWithWriteAccess } from "@/utils/roles";
 import UsageIndicator from "@/components/usage_indicator";
-
+import React from "react";
 const { Sider } = Layout;
 
 interface SidebarProps {
   accessToken: string | null;
+  setPage: (page: string) => void;
   userRole: string;
-  /** Used to highlight a menu item when pathname doesn't match (e.g., on non-routed pages) */
-  defaultSelectedKey?: string;
+  defaultSelectedKey: string;
   collapsed?: boolean;
 }
 
@@ -45,87 +44,77 @@ interface MenuItem {
   icon?: React.ReactNode;
 }
 
-/** ---------- Base URL helpers ---------- */
-/** Normalizes NEXT_PUBLIC_BASE_URL into either "" or "/something" (no trailing slash). */
-const getBasePath = () => {
-  const raw = process.env.NEXT_PUBLIC_BASE_URL ?? "";
-  const trimmed = raw.replace(/^\/+|\/+$/g, ""); // strip leading/trailing slashes
-  return trimmed ? `/${trimmed}` : "";
-};
-
-/** Joins base path with a relative path like "virtual-keys" or "/virtual-keys" -> "/base/virtual-keys" */
-const withBase = (relativePath: string) => {
-  const base = getBasePath(); // "" or "/ui" (no trailing slash)
-  const rel = relativePath.replace(/^\/+/, ""); // drop any leading slash
-  return `${base}/${rel}`.replace(/\/{2,}/g, "/"); // collapse accidental doubles
-};
-
-const Sidebar2: React.FC<SidebarProps> = ({ accessToken, userRole, defaultSelectedKey, collapsed = false }) => {
+const Sidebar2: React.FC<SidebarProps> = ({
+  accessToken,
+  setPage,
+  userRole,
+  defaultSelectedKey,
+  collapsed = false,
+}) => {
   const router = useRouter();
   const pathname = usePathname();
-  const searchParams = useSearchParams();
+  const { refactoredUIFlag } = useFeatureFlags();
 
-  /** ---------- Menu model ---------- */
   const menuItems: MenuItem[] = [
-    { key: "1", page: "api-keys", label: "Virtual Keys", icon: <KeyOutlined style={{ fontSize: 18 }} /> },
+    { key: "1", page: "api-keys", label: "Virtual Keys", icon: <KeyOutlined style={{ fontSize: "18px" }} /> },
     {
       key: "3",
       page: "llm-playground",
       label: "Test Key",
-      icon: <PlayCircleOutlined style={{ fontSize: 18 }} />,
+      icon: <PlayCircleOutlined style={{ fontSize: "18px" }} />,
       roles: rolesWithWriteAccess,
     },
     {
       key: "2",
       page: "models",
       label: "Models + Endpoints",
-      icon: <BlockOutlined style={{ fontSize: 18 }} />,
+      icon: <BlockOutlined style={{ fontSize: "18px" }} />,
       roles: rolesWithWriteAccess,
     },
     {
       key: "12",
       page: "new_usage",
       label: "Usage",
-      icon: <BarChartOutlined style={{ fontSize: 18 }} />,
+      icon: <BarChartOutlined style={{ fontSize: "18px" }} />,
       roles: [...all_admin_roles, ...internalUserRoles],
     },
-    { key: "6", page: "teams", label: "Teams", icon: <TeamOutlined style={{ fontSize: 18 }} /> },
+    { key: "6", page: "teams", label: "Teams", icon: <TeamOutlined style={{ fontSize: "18px" }} /> },
     {
       key: "17",
       page: "organizations",
       label: "Organizations",
-      icon: <BankOutlined style={{ fontSize: 18 }} />,
+      icon: <BankOutlined style={{ fontSize: "18px" }} />,
       roles: all_admin_roles,
     },
     {
       key: "5",
       page: "users",
       label: "Internal Users",
-      icon: <UserOutlined style={{ fontSize: 18 }} />,
+      icon: <UserOutlined style={{ fontSize: "18px" }} />,
       roles: all_admin_roles,
     },
-    { key: "14", page: "api_ref", label: "API Reference", icon: <ApiOutlined style={{ fontSize: 18 }} /> },
-    { key: "16", page: "model-hub-table", label: "Model Hub", icon: <AppstoreOutlined style={{ fontSize: 18 }} /> },
-    { key: "15", page: "logs", label: "Logs", icon: <LineChartOutlined style={{ fontSize: 18 }} /> },
+    { key: "14", page: "api_ref", label: "API Reference", icon: <ApiOutlined style={{ fontSize: "18px" }} /> },
+    { key: "16", page: "model-hub-table", label: "Model Hub", icon: <AppstoreOutlined style={{ fontSize: "18px" }} /> },
+    { key: "15", page: "logs", label: "Logs", icon: <LineChartOutlined style={{ fontSize: "18px" }} /> },
     {
       key: "11",
       page: "guardrails",
       label: "Guardrails",
-      icon: <SafetyOutlined style={{ fontSize: 18 }} />,
+      icon: <SafetyOutlined style={{ fontSize: "18px" }} />,
       roles: all_admin_roles,
     },
     {
       key: "26",
       page: "tools",
       label: "Tools",
-      icon: <ToolOutlined style={{ fontSize: 18 }} />,
+      icon: <ToolOutlined style={{ fontSize: "18px" }} />,
       children: [
-        { key: "18", page: "mcp-servers", label: "MCP Servers", icon: <ToolOutlined style={{ fontSize: 18 }} /> },
+        { key: "18", page: "mcp-servers", label: "MCP Servers", icon: <ToolOutlined style={{ fontSize: "18px" }} /> },
         {
           key: "21",
           page: "vector-stores",
           label: "Vector Stores",
-          icon: <DatabaseOutlined style={{ fontSize: 18 }} />,
+          icon: <DatabaseOutlined style={{ fontSize: "18px" }} />,
           roles: all_admin_roles,
         },
       ],
@@ -134,162 +123,145 @@ const Sidebar2: React.FC<SidebarProps> = ({ accessToken, userRole, defaultSelect
       key: "experimental",
       page: "experimental",
       label: "Experimental",
-      icon: <ExperimentOutlined style={{ fontSize: 18 }} />,
+      icon: <ExperimentOutlined style={{ fontSize: "18px" }} />,
       children: [
         {
           key: "9",
           page: "caching",
           label: "Caching",
-          icon: <DatabaseOutlined style={{ fontSize: 18 }} />,
+          icon: <DatabaseOutlined style={{ fontSize: "18px" }} />,
           roles: all_admin_roles,
         },
         {
           key: "25",
           page: "prompts",
           label: "Prompts",
-          icon: <FileTextOutlined style={{ fontSize: 18 }} />,
+          icon: <FileTextOutlined style={{ fontSize: "18px" }} />,
           roles: all_admin_roles,
         },
         {
           key: "10",
           page: "budgets",
           label: "Budgets",
-          icon: <BankOutlined style={{ fontSize: 18 }} />,
+          icon: <BankOutlined style={{ fontSize: "18px" }} />,
           roles: all_admin_roles,
         },
         {
           key: "20",
           page: "transform-request",
           label: "API Playground",
-          icon: <ApiOutlined style={{ fontSize: 18 }} />,
+          icon: <ApiOutlined style={{ fontSize: "18px" }} />,
           roles: [...all_admin_roles, ...internalUserRoles],
         },
         {
           key: "19",
           page: "tag-management",
           label: "Tag Management",
-          icon: <TagsOutlined style={{ fontSize: 18 }} />,
+          icon: <TagsOutlined style={{ fontSize: "18px" }} />,
           roles: all_admin_roles,
         },
-        { key: "4", page: "usage", label: "Old Usage", icon: <BarChartOutlined style={{ fontSize: 18 }} /> },
+        { key: "4", page: "usage", label: "Old Usage", icon: <BarChartOutlined style={{ fontSize: "18px" }} /> },
       ],
     },
     {
       key: "settings",
       page: "settings",
       label: "Settings",
-      icon: <SettingOutlined style={{ fontSize: 18 }} />,
+      icon: <SettingOutlined style={{ fontSize: "18px" }} />,
       roles: all_admin_roles,
       children: [
         {
           key: "11",
           page: "general-settings",
           label: "Router Settings",
-          icon: <SettingOutlined style={{ fontSize: 18 }} />,
+          icon: <SettingOutlined style={{ fontSize: "18px" }} />,
           roles: all_admin_roles,
         },
         {
           key: "8",
           page: "settings",
           label: "Logging & Alerts",
-          icon: <SettingOutlined style={{ fontSize: 18 }} />,
+          icon: <SettingOutlined style={{ fontSize: "18px" }} />,
           roles: all_admin_roles,
         },
         {
           key: "13",
           page: "admin-panel",
           label: "Admin Settings",
-          icon: <SettingOutlined style={{ fontSize: 18 }} />,
+          icon: <SettingOutlined style={{ fontSize: "18px" }} />,
           roles: all_admin_roles,
         },
         {
           key: "14",
           page: "ui-theme",
           label: "UI Theme",
-          icon: <BgColorsOutlined style={{ fontSize: 18 }} />,
+          icon: <BgColorsOutlined style={{ fontSize: "18px" }} />,
           roles: all_admin_roles,
         },
       ],
     },
   ];
 
-  // Role filtering (preserves original visibility behavior)
-  const filteredMenuItems: MenuItem[] = menuItems
-    .filter((item) => !item.roles || item.roles.includes(userRole))
-    .map((item) => ({
-      ...item,
-      children: item.children?.filter((child) => !child.roles || child.roles.includes(userRole)),
-    }));
-
-  /** ---------- Selection state ---------- */
-  const pageParam = searchParams.get("page") || undefined;
-
   const findMenuItemKey = (page: string): string => {
-    const top = filteredMenuItems.find((i) => i.page === page);
-    if (top) return top.key;
-    for (const i of filteredMenuItems) {
-      const child = i.children?.find((c) => c.page === page);
-      if (child) return child.key;
+    const topLevelItem = menuItems.find((item) => item.page === page);
+    if (topLevelItem) return topLevelItem.key;
+    for (const item of menuItems) {
+      if (item.children) {
+        const childItem = item.children.find((child) => child.page === page);
+        if (childItem) return childItem.key;
+      }
     }
     return "1";
   };
 
-  // Match Virtual Keys path with base prefix (e.g., "/virtual-keys" or "/ui/virtual-keys")
-  const virtualKeysPath = withBase("virtual-keys");
+  const selectedMenuKey = findMenuItemKey(defaultSelectedKey);
 
-  const selectedMenuKey =
-    pathname === virtualKeysPath
-      ? "1"
-      : pageParam
-        ? findMenuItemKey(pageParam)
-        : defaultSelectedKey
-          ? findMenuItemKey(defaultSelectedKey)
-          : "1";
+  const filteredMenuItems = menuItems.filter((item) => {
+    const hasParentAccess = !item.roles || item.roles.includes(userRole);
+    if (!hasParentAccess) return false;
+    if (item.children) {
+      item.children = item.children.filter((child) => !child.roles || child.roles.includes(userRole));
+    }
+    return true;
+  });
 
-  /** ---------- Navigation helpers (SPA only) ---------- */
-  // Build a root URL ("/" or "/base/") with an updated ?page=...
-  const goTo = (p: string) => {
-    const base = getBasePath() || "/";
-    const root = base.endsWith("/") ? base : `${base}/`;
-    const sp = new URLSearchParams(typeof window !== "undefined" ? window.location.search : "");
-    sp.set("page", p);
-    // Use Next router for client navigation on the SAME route (no hard fetch)
-    router.replace(`${root}?${sp.toString()}`, { scroll: false });
-  };
-
-  // Keep the /virtual-keys path the same, but avoid route fetches/hard reloads.
-  const goToVirtualKeys = () => {
-    const base = getBasePath() || "/";
-    const root = base.endsWith("/") ? base : `${base}/`;
-    const sp = new URLSearchParams(typeof window !== "undefined" ? window.location.search : "");
-    sp.set("page", "api-keys");
-
-    // 1) Client transition to the root with ?page=api-keys so the view updates.
-    router.replace(`${root}?${sp.toString()}`, { scroll: false });
-
-    // 2) Cosmetic URL swap to ".../virtual-keys" without navigation (keeps path the same).
-    const vk = withBase("virtual-keys");
-    if (typeof window !== "undefined") {
-      window.history.replaceState(null, "", vk);
+  // Helper: go to /?page=...; when on /virtual-keys with refactored UI, replace instead of appending
+  const pushToRootWithPage = (page: string, useReplace = false) => {
+    const params = new URLSearchParams();
+    params.set("page", page);
+    const url = `/?${params.toString()}`;
+    if (useReplace) {
+      router.replace(url);
+    } else {
+      router.push(url);
     }
   };
 
-  /** ---------- AntD items with onClick handlers ---------- */
-  const antdItems = filteredMenuItems.map((item) => {
-    const isVirtualKeys = item.key === "1";
-    return {
-      key: item.key,
-      icon: item.icon,
-      label: item.label, // plain text; click handled via onClick
-      onClick: !item.children ? (isVirtualKeys ? goToVirtualKeys : () => goTo(item.page)) : undefined,
-      children: item.children?.map((child) => ({
-        key: child.key,
-        icon: child.icon,
-        label: child.label,
-        onClick: () => goTo(child.page),
-      })),
-    };
-  });
+  // Centralized navigation that satisfies the requirement
+  const navigateToPage = (page: string) => {
+    // Special-case: Virtual Keys target
+    if (page === "api-keys") {
+      if (refactoredUIFlag) {
+        // Go to the dedicated /virtual-keys page
+        router.push("/virtual-keys");
+        return; // do not call setPage here (parity with previous behavior)
+      }
+      // Legacy behavior
+      pushToRootWithPage(page);
+      setPage(page);
+      return;
+    }
+
+    // All other pages
+    if (refactoredUIFlag) {
+      // If currently on /virtual-keys, REPLACE it with /?page=...
+      const onVirtualKeys = pathname?.startsWith("/virtual-keys");
+      pushToRootWithPage(page, onVirtualKeys);
+    } else {
+      pushToRootWithPage(page);
+    }
+    setPage(page);
+  };
 
   return (
     <Layout style={{ minHeight: "100vh" }}>
@@ -300,29 +272,36 @@ const Sidebar2: React.FC<SidebarProps> = ({ accessToken, userRole, defaultSelect
         collapsedWidth={80}
         collapsible
         trigger={null}
-        style={{
-          transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-          position: "relative",
-        }}
+        style={{ transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)", position: "relative" }}
       >
-        <ConfigProvider
-          theme={{
-            components: {
-              Menu: { iconSize: 18, fontSize: 14 },
-            },
-          }}
-        >
+        <ConfigProvider theme={{ components: { Menu: { iconSize: 18, fontSize: 14 } } }}>
           <Menu
             mode="inline"
             selectedKeys={[selectedMenuKey]}
-            defaultOpenKeys={collapsed ? [] : ["llm-tools"]} /* kept to match original look */
+            defaultOpenKeys={collapsed ? [] : ["llm-tools"]}
             inlineCollapsed={collapsed}
             className="custom-sidebar-menu"
-            style={{ borderRight: 0, backgroundColor: "transparent", fontSize: 14 }}
-            items={antdItems as any}
+            style={{ borderRight: 0, backgroundColor: "transparent", fontSize: "14px" }}
+            items={filteredMenuItems.map((item) => ({
+              key: item.key,
+              icon: item.icon,
+              label: item.label,
+              children: item.children?.map((child) => ({
+                key: child.key,
+                icon: child.icon,
+                label: child.label,
+                onClick: () => {
+                  navigateToPage(child.page);
+                },
+              })),
+              onClick: !item.children
+                ? () => {
+                    navigateToPage(item.page);
+                  }
+                : undefined,
+            }))}
           />
         </ConfigProvider>
-
         {isAdminRole(userRole) && !collapsed && <UsageIndicator accessToken={accessToken} width={220} />}
       </Sider>
     </Layout>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/components/SidebarProvider.tsx b/ui/litellm-dashboard/src/app/(dashboard)/components/SidebarProvider.tsx
deleted file mode 100644
index 822a30e640..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/components/SidebarProvider.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-"use client";
-
-import Sidebar2 from "@/app/(dashboard)/components/Sidebar2";
-import Sidebar from "@/components/leftnav";
-import React from "react";
-import useFeatureFlags from "@/hooks/useFeatureFlags";
-import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-
-interface SidebarProviderProps {
-  defaultSelectedKey: string;
-  sidebarCollapsed: boolean;
-  setPage: (page: string) => void;
-}
-
-const SidebarProvider = ({ defaultSelectedKey, sidebarCollapsed, setPage }: SidebarProviderProps) => {
-  const { accessToken, userRole } = useAuthorized();
-  const { refactoredUIFlag, setRefactoredUIFlag } = useFeatureFlags();
-
-  return refactoredUIFlag ? (
-    <Sidebar2 accessToken={accessToken} userRole={userRole} />
-  ) : (
-    <Sidebar
-      accessToken={accessToken}
-      setPage={setPage}
-      userRole={userRole}
-      defaultSelectedKey={defaultSelectedKey}
-      collapsed={sidebarCollapsed}
-    />
-  );
-};
-
-export default SidebarProvider;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx b/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx
index ad8a82703f..7e60443d24 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx
@@ -1,14 +1,31 @@
 "use client";
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Navbar from "@/components/navbar";
 import { ThemeProvider } from "@/contexts/ThemeContext";
 import Sidebar2 from "@/app/(dashboard)/components/Sidebar2";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import { useRouter, useSearchParams } from "next/navigation";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
   const { accessToken, userRole } = useAuthorized();
   const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
+  const [page, setPage] = useState(() => {
+    return searchParams.get("page") || "api-keys";
+  });
+
+  const updatePage = (newPage: string) => {
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.set("page", newPage);
+    router.push(`/?${newSearchParams.toString()}`); // absolute, not relative
+    setPage(newPage);
+  };
+
+  useEffect(() => {
+    setPage(searchParams.get("page") || "api-keys");
+  }, [searchParams]);
 
   const toggleSidebar = () => setSidebarCollapsed((v) => !v);
 
@@ -31,12 +48,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         />
         <div className="flex flex-1 overflow-auto">
           <div className="mt-2">
-            <Sidebar2
-              collapsed={sidebarCollapsed}
-              accessToken={accessToken}
-              userRole={userRole}
-              defaultSelectedKey={""}
-            />
+            <Sidebar2 defaultSelectedKey={page} setPage={updatePage} accessToken={accessToken} userRole={userRole} />
           </div>
           <main className="flex-1">{children}</main>
         </div>
diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index 104ef41810..d386df4b77 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { Suspense, useEffect, useState } from "react";
-import { useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { jwtDecode } from "jwt-decode";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Team } from "@/components/key_team_helpers/key_list";
@@ -23,7 +23,6 @@ import ModelHubTable from "@/components/model_hub_table";
 import NewUsagePage from "@/components/new_usage";
 import APIRef from "@/components/api_ref";
 import ChatUI from "@/components/chat_ui/ChatUI";
-import Sidebar from "@/components/leftnav";
 import Usage from "@/components/usage";
 import CacheDashboard from "@/components/cache_dashboard";
 import { getUiConfig, proxyBaseUrl, setGlobalLitellmHeaderName } from "@/components/networking";
@@ -40,7 +39,6 @@ import UIThemeSettings from "@/components/ui_theme_settings";
 import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import { cx } from "@/lib/cva.config";
 import Sidebar2 from "@/app/(dashboard)/components/Sidebar2";
-import SidebarProvider from "@/app/(dashboard)/components/SidebarProvider";
 
 function getCookie(name: string) {
   const cookieValue = document.cookie.split("; ").find((row) => row.startsWith(name + "="));
@@ -97,6 +95,7 @@ function LoadingScreen() {
 }
 
 export default function CreateKeyPage() {
+  const router = useRouter();
   const [userRole, setUserRole] = useState("");
   const [premiumUser, setPremiumUser] = useState(false);
   const [disabledPersonalKeyCreation, setDisabledPersonalKeyCreation] = useState(false);
@@ -131,13 +130,9 @@ export default function CreateKeyPage() {
 
   // Custom setPage function that updates URL
   const updatePage = (newPage: string) => {
-    // Update URL without full page reload
     const newSearchParams = new URLSearchParams(searchParams);
     newSearchParams.set("page", newPage);
-
-    // Use Next.js router to update URL
-    window.history.pushState(null, "", `?${newSearchParams.toString()}`);
-
+    router.push(`/?${newSearchParams.toString()}`); // absolute, not relative
     setPage(newPage);
   };
 
@@ -264,7 +259,12 @@ export default function CreateKeyPage() {
               />
               <div className="flex flex-1 overflow-auto">
                 <div className="mt-2">
-                  <SidebarProvider defaultSelectedKey={page} sidebarCollapsed={sidebarCollapsed} setPage={updatePage} />
+                  <Sidebar2
+                    defaultSelectedKey={page}
+                    setPage={updatePage}
+                    accessToken={accessToken}
+                    userRole={userRole}
+                  />
                 </div>
 
                 {page == "api-keys" ? (

From cc94fb87b5179936bf02cede86617eb043fbc2b4 Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Mon, 6 Oct 2025 20:32:47 -0700
Subject: [PATCH 16/42] added base URL helpers

---
 .../app/(dashboard)/components/Sidebar2.tsx   | 28 +++++++++++++++----
 .../src/app/(dashboard)/layout.tsx            | 17 ++++++++++-
 ui/litellm-dashboard/src/app/page.tsx         | 20 +++++++++++--
 3 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx b/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx
index 843a176f6e..95907f3def 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx
@@ -44,6 +44,24 @@ interface MenuItem {
   icon?: React.ReactNode;
 }
 
+/** ---- BASE URL HELPERS (shared pattern across files) ---- */
+function normalizeBasePrefix(raw: string | undefined | null): string {
+  const trimmed = (raw ?? "").trim();
+  if (!trimmed) return ""; // no base
+  // strip leading/trailing slashes then rebuild as "/segment/"
+  const core = trimmed.replace(/^\/+/, "").replace(/\/+$/, "");
+  return core ? `/${core}/` : "/";
+}
+const BASE_PREFIX = normalizeBasePrefix(process.env.NEXT_PUBLIC_BASE_URL);
+/** Builds an app-relative path under the configured base prefix. */
+function withBase(path: string): string {
+  // Accepts paths like "/virtual-keys" or "/?page=..." and prefixes with BASE_PREFIX when present.
+  const body = path.startsWith("/") ? path.slice(1) : path;
+  const combined = `${BASE_PREFIX}${body}`;
+  return combined.startsWith("/") ? combined : `/${combined}`;
+}
+/** -------------------------------------------------------- */
+
 const Sidebar2: React.FC<SidebarProps> = ({
   accessToken,
   setPage,
@@ -229,7 +247,7 @@ const Sidebar2: React.FC<SidebarProps> = ({
   const pushToRootWithPage = (page: string, useReplace = false) => {
     const params = new URLSearchParams();
     params.set("page", page);
-    const url = `/?${params.toString()}`;
+    const url = withBase(`/?${params.toString()}`);
     if (useReplace) {
       router.replace(url);
     } else {
@@ -242,8 +260,8 @@ const Sidebar2: React.FC<SidebarProps> = ({
     // Special-case: Virtual Keys target
     if (page === "api-keys") {
       if (refactoredUIFlag) {
-        // Go to the dedicated /virtual-keys page
-        router.push("/virtual-keys");
+        // Go to the dedicated /virtual-keys page (always under base)
+        router.push(withBase("/virtual-keys"));
         return; // do not call setPage here (parity with previous behavior)
       }
       // Legacy behavior
@@ -255,8 +273,8 @@ const Sidebar2: React.FC<SidebarProps> = ({
     // All other pages
     if (refactoredUIFlag) {
       // If currently on /virtual-keys, REPLACE it with /?page=...
-      const onVirtualKeys = pathname?.startsWith("/virtual-keys");
-      pushToRootWithPage(page, onVirtualKeys);
+      const onVirtualKeys = pathname?.startsWith(withBase("/virtual-keys"));
+      pushToRootWithPage(page, !!onVirtualKeys);
     } else {
       pushToRootWithPage(page);
     }
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx b/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx
index 7e60443d24..3d38a7362b 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx
@@ -7,6 +7,21 @@ import Sidebar2 from "@/app/(dashboard)/components/Sidebar2";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { useRouter, useSearchParams } from "next/navigation";
 
+/** ---- BASE URL HELPERS ---- */
+function normalizeBasePrefix(raw: string | undefined | null): string {
+  const trimmed = (raw ?? "").trim();
+  if (!trimmed) return "";
+  const core = trimmed.replace(/^\/+/, "").replace(/\/+$/, "");
+  return core ? `/${core}/` : "/";
+}
+const BASE_PREFIX = normalizeBasePrefix(process.env.NEXT_PUBLIC_BASE_URL);
+function withBase(path: string): string {
+  const body = path.startsWith("/") ? path.slice(1) : path;
+  const combined = `${BASE_PREFIX}${body}`;
+  return combined.startsWith("/") ? combined : `/${combined}`;
+}
+/** -------------------------------- */
+
 export default function Layout({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -19,7 +34,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   const updatePage = (newPage: string) => {
     const newSearchParams = new URLSearchParams(searchParams);
     newSearchParams.set("page", newPage);
-    router.push(`/?${newSearchParams.toString()}`); // absolute, not relative
+    router.push(withBase(`/?${newSearchParams.toString()}`)); // always under BASE
     setPage(newPage);
   };
 
diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index d386df4b77..b110858349 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -40,6 +40,21 @@ import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import { cx } from "@/lib/cva.config";
 import Sidebar2 from "@/app/(dashboard)/components/Sidebar2";
 
+/** ---- BASE URL HELPERS ---- */
+function normalizeBasePrefix(raw: string | undefined | null): string {
+  const trimmed = (raw ?? "").trim();
+  if (!trimmed) return "";
+  const core = trimmed.replace(/^\/+/, "").replace(/\/+$/, "");
+  return core ? `/${core}/` : "/";
+}
+const BASE_PREFIX = normalizeBasePrefix(process.env.NEXT_PUBLIC_BASE_URL);
+function withBase(path: string): string {
+  const body = path.startsWith("/") ? path.slice(1) : path;
+  const combined = `${BASE_PREFIX}${body}`;
+  return combined.startsWith("/") ? combined : `/${combined}`;
+}
+/** -------------------------------- */
+
 function getCookie(name: string) {
   const cookieValue = document.cookie.split("; ").find((row) => row.startsWith(name + "="));
   return cookieValue ? cookieValue.split("=")[1] : null;
@@ -128,11 +143,11 @@ export default function CreateKeyPage() {
     setPage(searchParams.get("page") || "api-keys");
   }, [searchParams]);
 
-  // Custom setPage function that updates URL
+  // Custom setPage function that updates URL (always under BASE)
   const updatePage = (newPage: string) => {
     const newSearchParams = new URLSearchParams(searchParams);
     newSearchParams.set("page", newPage);
-    router.push(`/?${newSearchParams.toString()}`); // absolute, not relative
+    router.push(withBase(`/?${newSearchParams.toString()}`));
     setPage(newPage);
   };
 
@@ -160,6 +175,7 @@ export default function CreateKeyPage() {
 
   useEffect(() => {
     if (redirectToLogin) {
+      // This is an external auth route (kept as-is, not app navigation).
       window.location.href = (proxyBaseUrl || "") + "/sso/key/generate";
     }
   }, [redirectToLogin]);

From 7ed4715a9b763faf15520989637f99f62828989c Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Mon, 6 Oct 2025 20:42:59 -0700
Subject: [PATCH 17/42] eliminates loading screen flash

---
 .../app/(dashboard)/components/Sidebar2.tsx   |  61 +-
 ui/litellm-dashboard/src/app/page.tsx         | 534 +++++++++---------
 2 files changed, 280 insertions(+), 315 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx b/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx
index 95907f3def..2ebfbc5d4f 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx
@@ -1,5 +1,5 @@
 import { Layout, Menu } from "antd";
-import { useRouter, usePathname } from "next/navigation"; // UPDATED: also usePathname to detect current route
+import { usePathname } from "next/navigation";
 import {
   KeyOutlined,
   PlayCircleOutlined,
@@ -44,23 +44,29 @@ interface MenuItem {
   icon?: React.ReactNode;
 }
 
-/** ---- BASE URL HELPERS (shared pattern across files) ---- */
+/** ---- BASE URL HELPERS ---- */
 function normalizeBasePrefix(raw: string | undefined | null): string {
   const trimmed = (raw ?? "").trim();
   if (!trimmed) return ""; // no base
-  // strip leading/trailing slashes then rebuild as "/segment/"
   const core = trimmed.replace(/^\/+/, "").replace(/\/+$/, "");
-  return core ? `/${core}/` : "/";
+  return core ? `/${core}` : "";
 }
 const BASE_PREFIX = normalizeBasePrefix(process.env.NEXT_PUBLIC_BASE_URL);
-/** Builds an app-relative path under the configured base prefix. */
+
+/** Build an absolute path under the configured base. */
 function withBase(path: string): string {
-  // Accepts paths like "/virtual-keys" or "/?page=..." and prefixes with BASE_PREFIX when present.
-  const body = path.startsWith("/") ? path.slice(1) : path;
-  const combined = `${BASE_PREFIX}${body}`;
-  return combined.startsWith("/") ? combined : `/${combined}`;
+  // path can be "/virtual-keys" or "/?page=..."
+  const p = path.startsWith("/") ? path : `/${path}`;
+  return `${BASE_PREFIX}${p}` || p;
 }
-/** -------------------------------------------------------- */
+
+/** History-based navigation to prevent hard reloads / suspense flashes */
+function softNavigate(url: string, replace = false) {
+  if (typeof window === "undefined") return;
+  if (replace) window.history.replaceState(null, "", url);
+  else window.history.pushState(null, "", url);
+}
+/** -------------------------------- */
 
 const Sidebar2: React.FC<SidebarProps> = ({
   accessToken,
@@ -69,7 +75,6 @@ const Sidebar2: React.FC<SidebarProps> = ({
   defaultSelectedKey,
   collapsed = false,
 }) => {
-  const router = useRouter();
   const pathname = usePathname();
   const { refactoredUIFlag } = useFeatureFlags();
 
@@ -243,38 +248,30 @@ const Sidebar2: React.FC<SidebarProps> = ({
     return true;
   });
 
-  // Helper: go to /?page=...; when on /virtual-keys with refactored UI, replace instead of appending
+  // Helper: update /?page=... under the configured base, WITHOUT triggering App Router nav
   const pushToRootWithPage = (page: string, useReplace = false) => {
     const params = new URLSearchParams();
     params.set("page", page);
     const url = withBase(`/?${params.toString()}`);
-    if (useReplace) {
-      router.replace(url);
-    } else {
-      router.push(url);
-    }
+    softNavigate(url, useReplace);
   };
 
-  // Centralized navigation that satisfies the requirement
   const navigateToPage = (page: string) => {
-    // Special-case: Virtual Keys target
     if (page === "api-keys") {
       if (refactoredUIFlag) {
-        // Go to the dedicated /virtual-keys page (always under base)
-        router.push(withBase("/virtual-keys"));
-        return; // do not call setPage here (parity with previous behavior)
+        // vanity URL, keep SPA alive
+        softNavigate(withBase("/virtual-keys"));
+        return; // don't call setPage to keep parity, UI already shows api-keys by default
       }
-      // Legacy behavior
       pushToRootWithPage(page);
       setPage(page);
       return;
     }
 
-    // All other pages
     if (refactoredUIFlag) {
-      // If currently on /virtual-keys, REPLACE it with /?page=...
-      const onVirtualKeys = pathname?.startsWith(withBase("/virtual-keys"));
-      pushToRootWithPage(page, !!onVirtualKeys);
+      const onVirtualKeys =
+        typeof window !== "undefined" && window.location.pathname.startsWith(withBase("/virtual-keys"));
+      pushToRootWithPage(page, onVirtualKeys);
     } else {
       pushToRootWithPage(page);
     }
@@ -308,15 +305,9 @@ const Sidebar2: React.FC<SidebarProps> = ({
                 key: child.key,
                 icon: child.icon,
                 label: child.label,
-                onClick: () => {
-                  navigateToPage(child.page);
-                },
+                onClick: () => navigateToPage(child.page),
               })),
-              onClick: !item.children
-                ? () => {
-                    navigateToPage(item.page);
-                  }
-                : undefined,
+              onClick: !item.children ? () => navigateToPage(item.page) : undefined,
             }))}
           />
         </ConfigProvider>
diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index b110858349..f83972e0c1 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import React, { Suspense, useEffect, useState } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+import React, { useEffect, useMemo, useState } from "react";
 import { jwtDecode } from "jwt-decode";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Team } from "@/components/key_team_helpers/key_list";
@@ -45,32 +44,28 @@ function normalizeBasePrefix(raw: string | undefined | null): string {
   const trimmed = (raw ?? "").trim();
   if (!trimmed) return "";
   const core = trimmed.replace(/^\/+/, "").replace(/\/+$/, "");
-  return core ? `/${core}/` : "/";
+  return core ? `/${core}` : "";
 }
 const BASE_PREFIX = normalizeBasePrefix(process.env.NEXT_PUBLIC_BASE_URL);
 function withBase(path: string): string {
-  const body = path.startsWith("/") ? path.slice(1) : path;
-  const combined = `${BASE_PREFIX}${body}`;
-  return combined.startsWith("/") ? combined : `/${combined}`;
+  const p = path.startsWith("/") ? path : `/${path}`;
+  return `${BASE_PREFIX}${p}` || p;
 }
 /** -------------------------------- */
 
 function getCookie(name: string) {
+  if (typeof document === "undefined") return null;
   const cookieValue = document.cookie.split("; ").find((row) => row.startsWith(name + "="));
   return cookieValue ? cookieValue.split("=")[1] : null;
 }
 
 function formatUserRole(userRole: string) {
-  if (!userRole) {
-    return "Undefined Role";
-  }
+  if (!userRole) return "Undefined Role";
   switch (userRole.toLowerCase()) {
     case "app_owner":
-      return "App Owner";
     case "demo_app_owner":
       return "App Owner";
     case "app_admin":
-      return "Admin";
     case "proxy_admin":
       return "Admin";
     case "proxy_admin_viewer":
@@ -80,7 +75,7 @@ function formatUserRole(userRole: string) {
     case "internal_user":
       return "Internal User";
     case "internal_user_viewer":
-    case "internal_viewer": // TODO:remove if deprecated
+    case "internal_viewer":
       return "Internal Viewer";
     case "app_user":
       return "App User";
@@ -100,7 +95,6 @@ function LoadingScreen() {
   return (
     <div className={cx("h-screen", "flex items-center justify-center gap-4")}>
       <div className="text-lg font-medium py-2 pr-4 border-r border-r-gray-200">🚅 LiteLLM</div>
-
       <div className="flex items-center justify-center gap-2">
         <UiLoadingSpinner className="size-4" />
         <span className="text-gray-600 text-sm">Loading...</span>
@@ -109,8 +103,17 @@ function LoadingScreen() {
   );
 }
 
+/** Derive the app "page" from the URL without triggering App Router navigations */
+function getPageFromLocation(loc: Location): string {
+  const sp = new URLSearchParams(loc.search);
+  const p = sp.get("page");
+  if (p) return p;
+  // vanity route for refactored UI
+  if (loc.pathname.endsWith("/virtual-keys")) return "api-keys";
+  return "api-keys";
+}
+
 export default function CreateKeyPage() {
-  const router = useRouter();
   const [userRole, setUserRole] = useState("");
   const [premiumUser, setPremiumUser] = useState(false);
   const [disabledPersonalKeyCreation, setDisabledPersonalKeyCreation] = useState(false);
@@ -119,55 +122,64 @@ export default function CreateKeyPage() {
   const [keys, setKeys] = useState<null | any[]>([]);
   const [organizations, setOrganizations] = useState<Organization[]>([]);
   const [userModels, setUserModels] = useState<string[]>([]);
-  const [proxySettings, setProxySettings] = useState<ProxySettings>({
-    PROXY_BASE_URL: "",
-    PROXY_LOGOUT_URL: "",
-  });
-
+  const [proxySettings, setProxySettings] = useState<ProxySettings>({ PROXY_BASE_URL: "", PROXY_LOGOUT_URL: "" });
   const [showSSOBanner, setShowSSOBanner] = useState<boolean>(true);
-  const searchParams = useSearchParams()!;
-  const [modelData, setModelData] = useState<any>({ data: [] });
+
+  // Stable local mirror of URLSearchParams (no suspense, no flashes)
+  const [searchParams, setSearchParams] = useState<URLSearchParams>(() =>
+    typeof window === "undefined" ? new URLSearchParams() : new URLSearchParams(window.location.search),
+  );
+  const invitation_id = useMemo(() => searchParams.get("invitation_id"), [searchParams]);
+
+  // Local page state (drives UI)
+  const [page, setPage] = useState<string>(() =>
+    typeof window === "undefined" ? "api-keys" : getPageFromLocation(window.location),
+  );
+
+  // Keep history/back/forward in sync with UI
+  useEffect(() => {
+    const onPop = () => {
+      if (typeof window === "undefined") return;
+      setSearchParams(new URLSearchParams(window.location.search));
+      setPage(getPageFromLocation(window.location));
+    };
+    window.addEventListener("popstate", onPop);
+    return () => window.removeEventListener("popstate", onPop);
+  }, []);
+
+  // Update URL without triggering App Router reload/suspense
+  const updatePage = (newPage: string) => {
+    if (typeof window === "undefined") return;
+    // 1) instant UI update
+    setPage(newPage);
+    // 2) URL update under base prefix
+    const sp = new URLSearchParams(window.location.search);
+    sp.set("page", newPage);
+    const url = withBase(`/?${sp.toString()}`);
+    window.history.pushState(null, "", url);
+    // 3) keep our local mirror in sync
+    setSearchParams(new URLSearchParams(sp));
+  };
+
   const [token, setToken] = useState<string | null>(null);
   const [createClicked, setCreateClicked] = useState<boolean>(false);
   const [authLoading, setAuthLoading] = useState(true);
   const [userID, setUserID] = useState<string | null>(null);
 
-  const invitation_id = searchParams.get("invitation_id");
-
-  // Get page from URL, default to 'api-keys' if not present
-  const [page, setPage] = useState(() => {
-    return searchParams.get("page") || "api-keys";
-  });
-
-  useEffect(() => {
-    setPage(searchParams.get("page") || "api-keys");
-  }, [searchParams]);
-
-  // Custom setPage function that updates URL (always under BASE)
-  const updatePage = (newPage: string) => {
-    const newSearchParams = new URLSearchParams(searchParams);
-    newSearchParams.set("page", newPage);
-    router.push(withBase(`/?${newSearchParams.toString()}`));
-    setPage(newPage);
-  };
-
   const [accessToken, setAccessToken] = useState<string | null>(null);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
 
-  const toggleSidebar = () => {
-    setSidebarCollapsed(!sidebarCollapsed);
-  };
+  const toggleSidebar = () => setSidebarCollapsed((v) => !v);
 
   const addKey = (data: any) => {
     setKeys((prevData) => (prevData ? [...prevData, data] : [data]));
-    setCreateClicked(() => !createClicked);
+    setCreateClicked((v) => !v);
   };
   const redirectToLogin = authLoading === false && token === null && invitation_id === null;
 
   useEffect(() => {
     const token = getCookie("token");
-    getUiConfig().then((data) => {
-      // get the information for constructing the proxy base url, and then set the token and auth loading
+    getUiConfig().then(() => {
       setToken(token);
       setAuthLoading(false);
     });
@@ -175,59 +187,33 @@ export default function CreateKeyPage() {
 
   useEffect(() => {
     if (redirectToLogin) {
-      // This is an external auth route (kept as-is, not app navigation).
       window.location.href = (proxyBaseUrl || "") + "/sso/key/generate";
     }
   }, [redirectToLogin]);
 
   useEffect(() => {
-    if (!token) {
-      return;
-    }
-
+    if (!token) return;
     const decoded = jwtDecode(token) as { [key: string]: any };
-    if (decoded) {
-      // set accessToken
-      setAccessToken(decoded.key);
+    if (!decoded) return;
 
-      setDisabledPersonalKeyCreation(decoded.disabled_non_admin_personal_key_creation);
+    setAccessToken(decoded.key);
+    setDisabledPersonalKeyCreation(decoded.disabled_non_admin_personal_key_creation);
 
-      // check if userRole is defined
-      if (decoded.user_role) {
-        const formattedUserRole = formatUserRole(decoded.user_role);
-        setUserRole(formattedUserRole);
-        if (formattedUserRole == "Admin Viewer") {
-          setPage("usage");
-        }
-      }
-
-      if (decoded.user_email) {
-        setUserEmail(decoded.user_email);
-      }
-
-      if (decoded.login_method) {
-        setShowSSOBanner(decoded.login_method == "username_password" ? true : false);
-      }
-
-      if (decoded.premium_user) {
-        setPremiumUser(decoded.premium_user);
-      }
-
-      if (decoded.auth_header_name) {
-        setGlobalLitellmHeaderName(decoded.auth_header_name);
-      }
-
-      if (decoded.user_id) {
-        setUserID(decoded.user_id);
-      }
+    if (decoded.user_role) {
+      const formattedUserRole = formatUserRole(decoded.user_role);
+      setUserRole(formattedUserRole);
+      if (formattedUserRole === "Admin Viewer") setPage("usage");
     }
+    if (decoded.user_email) setUserEmail(decoded.user_email);
+    if (decoded.login_method) setShowSSOBanner(decoded.login_method === "username_password");
+    if (decoded.premium_user) setPremiumUser(decoded.premium_user);
+    if (decoded.auth_header_name) setGlobalLitellmHeaderName(decoded.auth_header_name);
+    if (decoded.user_id) setUserID(decoded.user_id);
   }, [token]);
 
   useEffect(() => {
     if (accessToken && userID && userRole) {
       fetchUserModels(userID, userRole, accessToken, setUserModels);
-    }
-    if (accessToken && userID && userRole) {
       fetchTeams(accessToken, userID, userRole, null, setTeams);
     }
     if (accessToken) {
@@ -240,206 +226,194 @@ export default function CreateKeyPage() {
   }
 
   return (
-    <Suspense fallback={<LoadingScreen />}>
-      <QueryClientProvider client={queryClient}>
-        <ThemeProvider accessToken={accessToken}>
-          {invitation_id ? (
-            <UserDashboard
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider accessToken={accessToken}>
+        {invitation_id ? (
+          <UserDashboard
+            userID={userID}
+            userRole={userRole}
+            userEmail={userEmail}
+            premiumUser={premiumUser}
+            teams={teams}
+            keys={keys}
+            setUserRole={setUserRole}
+            setUserEmail={setUserEmail}
+            setTeams={setTeams}
+            setKeys={setKeys}
+            organizations={organizations}
+            addKey={addKey}
+            createClicked={createClicked}
+          />
+        ) : (
+          <div className="flex flex-col min-h-screen">
+            <Navbar
               userID={userID}
               userRole={userRole}
-              userEmail={userEmail}
               premiumUser={premiumUser}
-              teams={teams}
-              keys={keys}
-              setUserRole={setUserRole}
-              setUserEmail={setUserEmail}
-              setTeams={setTeams}
-              setKeys={setKeys}
-              organizations={organizations}
-              addKey={addKey}
-              createClicked={createClicked}
+              userEmail={userEmail}
+              setProxySettings={setProxySettings}
+              proxySettings={proxySettings}
+              accessToken={accessToken}
+              isPublicPage={false}
+              sidebarCollapsed={sidebarCollapsed}
+              onToggleSidebar={toggleSidebar}
             />
-          ) : (
-            <div className="flex flex-col min-h-screen">
-              <Navbar
-                userID={userID}
-                userRole={userRole}
-                premiumUser={premiumUser}
-                userEmail={userEmail}
-                setProxySettings={setProxySettings}
-                proxySettings={proxySettings}
-                accessToken={accessToken}
-                isPublicPage={false}
-                sidebarCollapsed={sidebarCollapsed}
-                onToggleSidebar={toggleSidebar}
-              />
-              <div className="flex flex-1 overflow-auto">
-                <div className="mt-2">
-                  <Sidebar2
-                    defaultSelectedKey={page}
-                    setPage={updatePage}
-                    accessToken={accessToken}
-                    userRole={userRole}
-                  />
-                </div>
-
-                {page == "api-keys" ? (
-                  <UserDashboard
-                    userID={userID}
-                    userRole={userRole}
-                    userEmail={userEmail}
-                    premiumUser={premiumUser}
-                    teams={teams}
-                    keys={keys}
-                    setUserRole={setUserRole}
-                    setUserEmail={setUserEmail}
-                    setTeams={setTeams}
-                    setKeys={setKeys}
-                    organizations={organizations}
-                    addKey={addKey}
-                    createClicked={createClicked}
-                  />
-                ) : page == "models" ? (
-                  <ModelDashboard
-                    userID={userID}
-                    userRole={userRole}
-                    token={token}
-                    keys={keys}
-                    accessToken={accessToken}
-                    modelData={modelData}
-                    setModelData={setModelData}
-                    premiumUser={premiumUser}
-                    teams={teams}
-                  />
-                ) : page == "llm-playground" ? (
-                  <ChatUI
-                    userID={userID}
-                    userRole={userRole}
-                    token={token}
-                    accessToken={accessToken}
-                    disabledPersonalKeyCreation={disabledPersonalKeyCreation}
-                  />
-                ) : page == "users" ? (
-                  <ViewUserDashboard
-                    userID={userID}
-                    userRole={userRole}
-                    token={token}
-                    keys={keys}
-                    teams={teams}
-                    accessToken={accessToken}
-                    setKeys={setKeys}
-                  />
-                ) : page == "teams" ? (
-                  <Teams
-                    teams={teams}
-                    setTeams={setTeams}
-                    searchParams={searchParams}
-                    accessToken={accessToken}
-                    userID={userID}
-                    userRole={userRole}
-                    organizations={organizations}
-                    premiumUser={premiumUser}
-                  />
-                ) : page == "organizations" ? (
-                  <Organizations
-                    organizations={organizations}
-                    setOrganizations={setOrganizations}
-                    userModels={userModels}
-                    accessToken={accessToken}
-                    userRole={userRole}
-                    premiumUser={premiumUser}
-                  />
-                ) : page == "admin-panel" ? (
-                  <AdminPanel
-                    setTeams={setTeams}
-                    searchParams={searchParams}
-                    accessToken={accessToken}
-                    userID={userID}
-                    showSSOBanner={showSSOBanner}
-                    premiumUser={premiumUser}
-                    proxySettings={proxySettings}
-                  />
-                ) : page == "api_ref" ? (
-                  <APIRef proxySettings={proxySettings} />
-                ) : page == "settings" ? (
-                  <Settings userID={userID} userRole={userRole} accessToken={accessToken} premiumUser={premiumUser} />
-                ) : page == "budgets" ? (
-                  <BudgetPanel accessToken={accessToken} />
-                ) : page == "guardrails" ? (
-                  <GuardrailsPanel accessToken={accessToken} userRole={userRole} />
-                ) : page == "prompts" ? (
-                  <PromptsPanel accessToken={accessToken} userRole={userRole} />
-                ) : page == "transform-request" ? (
-                  <TransformRequestPanel accessToken={accessToken} />
-                ) : page == "general-settings" ? (
-                  <GeneralSettings
-                    userID={userID}
-                    userRole={userRole}
-                    accessToken={accessToken}
-                    modelData={modelData}
-                  />
-                ) : page == "ui-theme" ? (
-                  <UIThemeSettings userID={userID} userRole={userRole} accessToken={accessToken} />
-                ) : page == "model-hub-table" ? (
-                  <ModelHubTable
-                    accessToken={accessToken}
-                    publicPage={false}
-                    premiumUser={premiumUser}
-                    userRole={userRole}
-                  />
-                ) : page == "caching" ? (
-                  <CacheDashboard
-                    userID={userID}
-                    userRole={userRole}
-                    token={token}
-                    accessToken={accessToken}
-                    premiumUser={premiumUser}
-                  />
-                ) : page == "pass-through-settings" ? (
-                  <PassThroughSettings
-                    userID={userID}
-                    userRole={userRole}
-                    accessToken={accessToken}
-                    modelData={modelData}
-                  />
-                ) : page == "logs" ? (
-                  <SpendLogsTable
-                    userID={userID}
-                    userRole={userRole}
-                    token={token}
-                    accessToken={accessToken}
-                    allTeams={(teams as Team[]) ?? []}
-                    premiumUser={premiumUser}
-                  />
-                ) : page == "mcp-servers" ? (
-                  <MCPServers accessToken={accessToken} userRole={userRole} userID={userID} />
-                ) : page == "tag-management" ? (
-                  <TagManagement accessToken={accessToken} userRole={userRole} userID={userID} />
-                ) : page == "vector-stores" ? (
-                  <VectorStoreManagement accessToken={accessToken} userRole={userRole} userID={userID} />
-                ) : page == "new_usage" ? (
-                  <NewUsagePage
-                    userID={userID}
-                    userRole={userRole}
-                    accessToken={accessToken}
-                    teams={(teams as Team[]) ?? []}
-                    premiumUser={premiumUser}
-                  />
-                ) : (
-                  <Usage
-                    userID={userID}
-                    userRole={userRole}
-                    token={token}
-                    accessToken={accessToken}
-                    keys={keys}
-                    premiumUser={premiumUser}
-                  />
-                )}
+            <div className="flex flex-1 overflow-auto">
+              <div className="mt-2">
+                <Sidebar2
+                  defaultSelectedKey={page}
+                  setPage={updatePage}
+                  accessToken={accessToken}
+                  userRole={userRole}
+                />
               </div>
+
+              {page === "api-keys" ? (
+                <UserDashboard
+                  userID={userID}
+                  userRole={userRole}
+                  userEmail={userEmail}
+                  premiumUser={premiumUser}
+                  teams={teams}
+                  keys={keys}
+                  setUserRole={setUserRole}
+                  setUserEmail={setUserEmail}
+                  setTeams={setTeams}
+                  setKeys={setKeys}
+                  organizations={organizations}
+                  addKey={addKey}
+                  createClicked={createClicked}
+                />
+              ) : page === "models" ? (
+                <ModelDashboard
+                  userID={userID}
+                  userRole={userRole}
+                  token={token}
+                  keys={keys}
+                  accessToken={accessToken}
+                  modelData={{ data: [] }}
+                  setModelData={() => {}}
+                  premiumUser={premiumUser}
+                  teams={teams}
+                />
+              ) : page === "llm-playground" ? (
+                <ChatUI
+                  userID={userID}
+                  userRole={userRole}
+                  token={token}
+                  accessToken={accessToken}
+                  disabledPersonalKeyCreation={disabledPersonalKeyCreation}
+                />
+              ) : page === "users" ? (
+                <ViewUserDashboard
+                  userID={userID}
+                  userRole={userRole}
+                  token={token}
+                  keys={keys}
+                  teams={teams}
+                  accessToken={accessToken}
+                  setKeys={setKeys}
+                />
+              ) : page === "teams" ? (
+                <Teams
+                  teams={teams}
+                  setTeams={setTeams}
+                  searchParams={searchParams}
+                  accessToken={accessToken}
+                  userID={userID}
+                  userRole={userRole}
+                  organizations={organizations}
+                  premiumUser={premiumUser}
+                />
+              ) : page === "organizations" ? (
+                <Organizations
+                  organizations={organizations}
+                  setOrganizations={setOrganizations}
+                  userModels={userModels}
+                  accessToken={accessToken}
+                  userRole={userRole}
+                  premiumUser={premiumUser}
+                />
+              ) : page === "admin-panel" ? (
+                <AdminPanel
+                  setTeams={setTeams}
+                  searchParams={searchParams}
+                  accessToken={accessToken}
+                  userID={userID}
+                  showSSOBanner={showSSOBanner}
+                  premiumUser={premiumUser}
+                  proxySettings={proxySettings}
+                />
+              ) : page === "api_ref" ? (
+                <APIRef proxySettings={proxySettings} />
+              ) : page === "settings" ? (
+                <Settings userID={userID} userRole={userRole} accessToken={accessToken} premiumUser={premiumUser} />
+              ) : page === "budgets" ? (
+                <BudgetPanel accessToken={accessToken} />
+              ) : page === "guardrails" ? (
+                <GuardrailsPanel accessToken={accessToken} userRole={userRole} />
+              ) : page === "prompts" ? (
+                <PromptsPanel accessToken={accessToken} userRole={userRole} />
+              ) : page === "transform-request" ? (
+                <TransformRequestPanel accessToken={accessToken} />
+              ) : page === "general-settings" ? (
+                <GeneralSettings userID={userID} userRole={userRole} accessToken={accessToken} modelData={{}} />
+              ) : page === "ui-theme" ? (
+                <UIThemeSettings userID={userID} userRole={userRole} accessToken={accessToken} />
+              ) : page === "model-hub-table" ? (
+                <ModelHubTable
+                  accessToken={accessToken}
+                  publicPage={false}
+                  premiumUser={premiumUser}
+                  userRole={userRole}
+                />
+              ) : page === "caching" ? (
+                <CacheDashboard
+                  userID={userID}
+                  userRole={userRole}
+                  token={token}
+                  accessToken={accessToken}
+                  premiumUser={premiumUser}
+                />
+              ) : page === "pass-through-settings" ? (
+                <PassThroughSettings userID={userID} userRole={userRole} accessToken={accessToken} modelData={{}} />
+              ) : page === "logs" ? (
+                <SpendLogsTable
+                  userID={userID}
+                  userRole={userRole}
+                  token={token}
+                  accessToken={accessToken}
+                  allTeams={(teams as Team[]) ?? []}
+                  premiumUser={premiumUser}
+                />
+              ) : page === "mcp-servers" ? (
+                <MCPServers accessToken={accessToken} userRole={userRole} userID={userID} />
+              ) : page === "tag-management" ? (
+                <TagManagement accessToken={accessToken} userRole={userRole} userID={userID} />
+              ) : page === "vector-stores" ? (
+                <VectorStoreManagement accessToken={accessToken} userRole={userRole} userID={userID} />
+              ) : page === "new_usage" ? (
+                <NewUsagePage
+                  userID={userID}
+                  userRole={userRole}
+                  accessToken={accessToken}
+                  teams={(teams as Team[]) ?? []}
+                  premiumUser={premiumUser}
+                />
+              ) : (
+                <Usage
+                  userID={userID}
+                  userRole={userRole}
+                  token={token}
+                  accessToken={accessToken}
+                  keys={keys}
+                  premiumUser={premiumUser}
+                />
+              )}
             </div>
-          )}
-        </ThemeProvider>
-      </QueryClientProvider>
-    </Suspense>
+          </div>
+        )}
+      </ThemeProvider>
+    </QueryClientProvider>
   );
 }

From 4de4e4af1a622028ed1091253f3a3899ccb512ae Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Tue, 7 Oct 2025 18:14:20 -0700
Subject: [PATCH 18/42] Update page.tsx

---
 ui/litellm-dashboard/src/app/page.tsx | 86 +++++++++++++++++++++++----
 1 file changed, 76 insertions(+), 10 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index 579e90e530..b300060926 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -41,8 +41,33 @@ import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import { cx } from "@/lib/cva.config";
 
 function getCookie(name: string) {
-  const cookieValue = document.cookie.split("; ").find((row) => row.startsWith(name + "="));
-  return cookieValue ? cookieValue.split("=")[1] : null;
+  // Safer cookie read + decoding; handles '=' inside values
+  const match = document.cookie.split("; ").find((row) => row.startsWith(name + "="));
+  if (!match) return null;
+  const value = match.slice(name.length + 1);
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+
+function deleteCookie(name: string, path = "/") {
+  // Best-effort client-side clear (works for non-HttpOnly cookies without Domain)
+  document.cookie = `${name}=; Max-Age=0; Path=${path}`;
+}
+
+function isJwtExpired(token: string): boolean {
+  try {
+    const decoded: any = jwtDecode(token);
+    if (decoded && typeof decoded.exp === "number") {
+      return decoded.exp * 1000 <= Date.now();
+    }
+    return false;
+  } catch {
+    // If we can't decode, treat as invalid/expired
+    return true;
+  }
 }
 
 function formatUserRole(userRole: string) {
@@ -149,17 +174,42 @@ export default function CreateKeyPage() {
   const redirectToLogin = authLoading === false && token === null && invitation_id === null;
 
   useEffect(() => {
-    const token = getCookie("token");
-    getUiConfig().then((data) => {
-      // get the information for constructing the proxy base url, and then set the token and auth loading
-      setToken(token);
-      setAuthLoading(false);
-    });
+    let cancelled = false;
+
+    (async () => {
+      try {
+        await getUiConfig(); // ensures proxyBaseUrl etc. are ready
+      } catch {
+        // proceed regardless; we still need to decide auth state
+      }
+
+      if (cancelled) return;
+
+      const raw = getCookie("token");
+      const valid = raw && !isJwtExpired(raw) ? raw : null;
+
+      // If token exists but is invalid/expired, clear it so downstream code
+      // doesn't keep trying to use it and cause redirect spasms.
+      if (raw && !valid) {
+        deleteCookie("token", "/");
+      }
+
+      if (!cancelled) {
+        setToken(valid);
+        setAuthLoading(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
   }, []);
 
   useEffect(() => {
     if (redirectToLogin) {
-      window.location.href = (proxyBaseUrl || "") + "/sso/key/generate";
+      // Replace instead of assigning to avoid back-button loops
+      const dest = (proxyBaseUrl || "") + "/sso/key/generate";
+      window.location.replace(dest);
     }
   }, [redirectToLogin]);
 
@@ -168,7 +218,23 @@ export default function CreateKeyPage() {
       return;
     }
 
-    const decoded = jwtDecode(token) as { [key: string]: any };
+    // Defensive: re-check expiry in case cookie changed after mount
+    if (isJwtExpired(token)) {
+      deleteCookie("token", "/");
+      setToken(null);
+      return;
+    }
+
+    let decoded: any = null;
+    try {
+      decoded = jwtDecode(token);
+    } catch {
+      // Malformed token → treat as unauthenticated
+      deleteCookie("token", "/");
+      setToken(null);
+      return;
+    }
+
     if (decoded) {
       // set accessToken
       setAccessToken(decoded.key);

From 7595acff424ad0b646320fb35ebc29e3fd487e15 Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Wed, 8 Oct 2025 12:03:44 -0700
Subject: [PATCH 19/42] empty commit for CI/CD


From 45ec1ffdaac1f0d668438280fe5a857b0dec22c6 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Wed, 8 Oct 2025 13:13:21 -0700
Subject: [PATCH 20/42] fix(ui/): set is sso modal visible to true for all
 users

allow backend to handle more complex state management
---
 litellm/model_prices_and_context_window_backup.json           | 3 +--
 .../out/{model_hub_table.html => model_hub_table/index.html}  | 0
 litellm/proxy/_experimental/out/onboarding.html               | 1 -
 ui/litellm-dashboard/src/components/admins.tsx                | 4 +---
 4 files changed, 2 insertions(+), 6 deletions(-)
 rename litellm/proxy/_experimental/out/{model_hub_table.html => model_hub_table/index.html} (100%)
 delete mode 100644 litellm/proxy/_experimental/out/onboarding.html

diff --git a/litellm/model_prices_and_context_window_backup.json b/litellm/model_prices_and_context_window_backup.json
index bdfc4fd020..29a6588774 100644
--- a/litellm/model_prices_and_context_window_backup.json
+++ b/litellm/model_prices_and_context_window_backup.json
@@ -13303,8 +13303,7 @@
         "supported_endpoints": [
             "/v1/images/generations",
             "/v1/images/edits"
-        ],
-        "supports_vision": true
+        ]
     },
     "gpt-realtime": {
         "cache_creation_input_audio_token_cost": 4e-07,
diff --git a/litellm/proxy/_experimental/out/model_hub_table.html b/litellm/proxy/_experimental/out/model_hub_table/index.html
similarity index 100%
rename from litellm/proxy/_experimental/out/model_hub_table.html
rename to litellm/proxy/_experimental/out/model_hub_table/index.html
diff --git a/litellm/proxy/_experimental/out/onboarding.html b/litellm/proxy/_experimental/out/onboarding.html
deleted file mode 100644
index 04c6c88676..0000000000
--- a/litellm/proxy/_experimental/out/onboarding.html
+++ /dev/null
@@ -1 +0,0 @@
-<!DOCTYPE html><html id="__next_error__"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="script" fetchPriority="low" href="/litellm-asset-prefix/_next/static/chunks/webpack-a426aae3231a8df1.js"/><script src="/litellm-asset-prefix/_next/static/chunks/fd9d1056-205af899b895cbac.js" async=""></script><script src="/litellm-asset-prefix/_next/static/chunks/117-6a9f6a591033d4a0.js" async=""></script><script src="/litellm-asset-prefix/_next/static/chunks/main-app-bb35cb240fbb9dca.js" async=""></script><title>LiteLLM Dashboard</title><meta name="description" content="LiteLLM Proxy Admin UI"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/><link rel="icon" href="./favicon.ico"/><meta name="next-size-adjust"/><script src="/litellm-asset-prefix/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body><script src="/litellm-asset-prefix/_next/static/chunks/webpack-a426aae3231a8df1.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/litellm-asset-prefix/_next/static/media/e4af272ccee01ff0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"/litellm-asset-prefix/_next/static/css/349654da14372cd9.css\",\"style\"]\n3:HL[\"/litellm-asset-prefix/_next/static/css/a94bb091dba1d4f2.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[12846,[],\"\"]\n6:I[19107,[],\"ClientPageRoot\"]\n7:I[12011,[\"665\",\"static/chunks/3014691f-b7b79b78e27792f3.js\",\"50\",\"static/chunks/50-d0da2dd7acce2eb9.js\",\"49\",\"static/chunks/49-036448f42c39b97c.js\",\"461\",\"static/chunks/app/onboarding/page-79017a4c39acd336.js\"],\"default\",1]\n8:I[4707,[],\"\"]\n9:I[36423,[],\"\"]\nb:I[61060,[],\"\"]\nc:[]\n"])</script><script>self.__next_f.push([1,"0:[\"$\",\"$L4\",null,{\"buildId\":\"0NP4pGCTzzyECenXO-S3V\",\"assetPrefix\":\"/litellm-asset-prefix\",\"urlParts\":[\"\",\"onboarding\"],\"initialTree\":[\"\",{\"children\":[\"onboarding\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"onboarding\",{\"children\":[\"__PAGE__\",{},[[\"$L5\",[\"$\",\"$L6\",null,{\"props\":{\"params\":{},\"searchParams\":{}},\"Component\":\"$7\"}],null],null],null]},[null,[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"onboarding\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/litellm-asset-prefix/_next/static/css/349654da14372cd9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/litellm-asset-prefix/_next/static/css/a94bb091dba1d4f2.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"__className_1c856b\",\"children\":[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}]}]}]],null],null],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$La\"],\"globalErrorComponent\":\"$b\",\"missingSlots\":\"$Wc\"}]\n"])</script><script>self.__next_f.push([1,"a:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"LiteLLM Dashboard\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"LiteLLM Proxy Admin UI\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],[\"$\",\"link\",\"5\",{\"rel\":\"icon\",\"href\":\"./favicon.ico\"}],[\"$\",\"meta\",\"6\",{\"name\":\"next-size-adjust\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file
diff --git a/ui/litellm-dashboard/src/components/admins.tsx b/ui/litellm-dashboard/src/components/admins.tsx
index 7c891c71dd..88ec208cb4 100644
--- a/ui/litellm-dashboard/src/components/admins.tsx
+++ b/ui/litellm-dashboard/src/components/admins.tsx
@@ -524,9 +524,7 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
                   <Button
                     style={{ width: "150px" }}
                     onClick={() =>
-                      premiumUser === true
-                        ? setIsAddSSOModalVisible(true)
-                        : NotificationsManager.fromBackend("Only premium users can add SSO")
+                      setIsAddSSOModalVisible(true)
                     }
                   >
                     {ssoConfigured ? "Edit SSO Settings" : "Add SSO"}

From d6852b11ae7502bd046c27fd00bb05f4a2d910eb Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Wed, 8 Oct 2025 13:41:00 -0700
Subject: [PATCH 21/42] Create CreateKeyPage.expiredToken.test.tsx

---
 .../tests/CreateKeyPage.expiredToken.test.tsx | 186 ++++++++++++++++++
 1 file changed, 186 insertions(+)
 create mode 100644 ui/litellm-dashboard/tests/CreateKeyPage.expiredToken.test.tsx

diff --git a/ui/litellm-dashboard/tests/CreateKeyPage.expiredToken.test.tsx b/ui/litellm-dashboard/tests/CreateKeyPage.expiredToken.test.tsx
new file mode 100644
index 0000000000..db2d131584
--- /dev/null
+++ b/ui/litellm-dashboard/tests/CreateKeyPage.expiredToken.test.tsx
@@ -0,0 +1,186 @@
+// @vitest-environment esm
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { vi, describe, it, beforeEach, afterEach, expect } from "vitest";
+
+/** ----------------------------
+ * Mocks
+ * --------------------------- */
+
+// next/navigation: just return empty URLSearchParams (no invitation/page)
+vi.mock("next/navigation", () => ({
+  useSearchParams: () => new URLSearchParams(""),
+}));
+
+// Networking layer
+vi.mock("@/components/networking", () => {
+  return {
+    // Called on mount; we don't care about its contents, only that it resolves
+    getUiConfig: vi.fn().mockResolvedValue({}),
+    // Used to build the redirect URL
+    proxyBaseUrl: "https://example.com",
+    // Called when decoding a valid token
+    setGlobalLitellmHeaderName: vi.fn(),
+    Organization: {} as any,
+  };
+});
+
+// jwt-decode: we’ll swap implementation per test via mockImplementation
+const jwtDecodeMock = vi.fn();
+vi.mock("jwt-decode", () => ({
+  jwtDecode: (token: string) => jwtDecodeMock(token),
+}));
+
+// Query client provider works fine unmocked
+
+// Super-light stubs for all heavy components so rendering doesn't explode
+const stub = (name: string) => () => <div data-testid={name} />;
+vi.mock("@/components/navbar", () => ({ default: stub("navbar") }));
+vi.mock("@/components/user_dashboard", () => ({ default: stub("user-dashboard") }));
+vi.mock("@/components/templates/model_dashboard", () => ({ default: stub("model-dashboard") }));
+vi.mock("@/components/view_users", () => ({ default: stub("view-users") }));
+vi.mock("@/components/teams", () => ({ default: stub("teams") }));
+vi.mock("@/components/organizations", () => ({
+  default: stub("organizations"),
+  fetchOrganizations: vi.fn(), // consumed in effects
+}));
+vi.mock("@/components/admins", () => ({ default: stub("admin-panel") }));
+vi.mock("@/components/settings", () => ({ default: stub("settings") }));
+vi.mock("@/components/general_settings", () => ({ default: stub("general-settings") }));
+vi.mock("@/components/pass_through_settings", () => ({ default: stub("pass-through-settings") }));
+vi.mock("@/components/budgets/budget_panel", () => ({ default: stub("budget-panel") }));
+vi.mock("@/components/view_logs", () => ({ default: stub("spend-logs") }));
+vi.mock("@/components/model_hub_table", () => ({ default: stub("model-hub-table") }));
+vi.mock("@/components/new_usage", () => ({ default: stub("new-usage") }));
+vi.mock("@/components/api_ref", () => ({ default: stub("api-ref") }));
+vi.mock("@/components/chat_ui/ChatUI", () => ({ default: stub("chat-ui") }));
+vi.mock("@/components/leftnav", () => ({ default: stub("sidebar") }));
+vi.mock("@/components/usage", () => ({ default: stub("usage") }));
+vi.mock("@/components/cache_dashboard", () => ({ default: stub("cache-dashboard") }));
+vi.mock("@/components/guardrails", () => ({ default: stub("guardrails") }));
+vi.mock("@/components/prompts", () => ({ default: stub("prompts") }));
+vi.mock("@/components/transform_request", () => ({ default: stub("transform-request") }));
+vi.mock("@/components/mcp_tools", () => ({ MCPServers: stub("mcp-servers") }));
+vi.mock("@/components/tag_management", () => ({ default: stub("tag-management") }));
+vi.mock("@/components/vector_store_management", () => ({ default: stub("vector-stores") }));
+vi.mock("@/components/ui_theme_settings", () => ({ default: stub("ui-theme-settings") }));
+vi.mock("@/components/organisms/create_key_button", () => ({ fetchUserModels: vi.fn() }));
+vi.mock("@/components/common_components/fetch_teams", () => ({ fetchTeams: vi.fn() }));
+vi.mock("@/components/ui/ui-loading-spinner", () => ({
+  UiLoadingSpinner: stub("spinner"),
+}));
+vi.mock("@/contexts/ThemeContext", () => ({
+  ThemeProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+vi.mock("@/lib/cva.config", () => ({
+  cx: (...args: string[]) => args.join(" "),
+}));
+
+import CreateKeyPage from "@/app/page";
+
+/** ----------------------------
+ * Helpers
+ * --------------------------- */
+
+function setCookie(raw: string) {
+  // JSDOM allows simple string assignment to document.cookie
+  document.cookie = raw;
+}
+
+function clearAllCookies() {
+  // JSDOM doesn't give an API to clear; overwrite with empty string
+  // plus ensure we wipe known names used by this app.
+  document.cookie = "token=; Max-Age=0; Path=/";
+}
+
+const originalLocation = window.location;
+
+beforeEach(() => {
+  // Fresh module state & DOM
+  vi.clearAllMocks();
+  clearAllCookies();
+
+  // Make location.replace spy-able to validate redirect
+  delete (window as any).location;
+  // minimal location object with replace and assign stubs
+  (window as any).location = {
+    ...originalLocation,
+    href: "http://localhost/",
+    assign: vi.fn(),
+    replace: vi.fn(),
+  };
+});
+
+afterEach(() => {
+  // Restore location to avoid leaking across test envs
+  delete (window as any).location;
+  (window as any).location = originalLocation;
+});
+
+/** ----------------------------
+ * Tests
+ * --------------------------- */
+
+describe("CreateKeyPage auth behavior", () => {
+  it("redirects to SSO when cookie token is expired and clears it (no spasms)", async () => {
+    // Arrange: expired token in cookie
+    setCookie("token=expiredtoken");
+
+    // jwtDecode returns past exp → expired
+    jwtDecodeMock.mockImplementation((tok: string) => {
+      expect(tok).toBe("expiredtoken");
+      return { exp: Math.floor(Date.now() / 1000) - 60 }; // expired 60s ago
+    });
+
+    // Spy on cookie writes to ensure we clear with Max-Age=0
+    const cookieSetSpy = vi.spyOn(document, "cookie", "set");
+
+    // Act
+    render(<CreateKeyPage />);
+
+    // Assert: we eventually redirect to SSO login (single replace, not assign/href)
+    await waitFor(() => {
+      expect(window.location.replace).toHaveBeenCalledWith("https://example.com/sso/key/generate");
+    });
+
+    // And we attempted to clear the cookie (defensive deletion)
+    const wroteDeletion = cookieSetSpy.mock.calls.some(
+      (args) => typeof args[0] === "string" && args[0].includes("Max-Age=0") && args[0].startsWith("token="),
+    );
+    expect(wroteDeletion).toBe(true);
+  });
+
+  it("does NOT redirect when token is valid and renders the app chrome", async () => {
+    // Arrange: valid token in cookie
+    setCookie("token=validtoken");
+
+    // jwtDecode returns future exp and expected shape
+    jwtDecodeMock.mockImplementation((tok: string) => {
+      expect(tok).toBe("validtoken");
+      return {
+        exp: Math.floor(Date.now() / 1000) + 60 * 60, // 1h in the future
+        key: "accessKey-123",
+        user_role: "app_user",
+        user_email: "user@example.com",
+        login_method: "username_password",
+        premium_user: false,
+        auth_header_name: "x-litellm-auth",
+        user_id: "u_123",
+      };
+    });
+
+    // Act
+    render(<CreateKeyPage />);
+
+    // Assert: no redirect
+    await waitFor(() => {
+      expect(window.location.replace).not.toHaveBeenCalled();
+    });
+
+    // And some top-level UI appears (Navbar stub)
+    await waitFor(() => {
+      expect(screen.getByTestId("navbar")).toBeInTheDocument();
+    });
+  });
+});

From fe2d4addfa7e63af84a34df2a732c469c94db55c Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Wed, 8 Oct 2025 14:10:09 -0700
Subject: [PATCH 22/42] Update CreateKeyPage.expiredToken.test.tsx

---
 .../tests/CreateKeyPage.expiredToken.test.tsx | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/ui/litellm-dashboard/tests/CreateKeyPage.expiredToken.test.tsx b/ui/litellm-dashboard/tests/CreateKeyPage.expiredToken.test.tsx
index db2d131584..93e15312f6 100644
--- a/ui/litellm-dashboard/tests/CreateKeyPage.expiredToken.test.tsx
+++ b/ui/litellm-dashboard/tests/CreateKeyPage.expiredToken.test.tsx
@@ -1,9 +1,19 @@
-// @vitest-environment esm
 import React from "react";
 import { render, screen, waitFor } from "@testing-library/react";
-import "@testing-library/jest-dom";
 import { vi, describe, it, beforeEach, afterEach, expect } from "vitest";
 
+/** ----------------------------
+ * Hoisted helpers for mocks (required by Vitest)
+ * --------------------------- */
+const { stub, jwtDecodeMock } = vi.hoisted(() => {
+  const React = require("react");
+  const stub = (name: string) => () => React.createElement("div", { "data-testid": name });
+  return {
+    stub,
+    jwtDecodeMock: vi.fn(),
+  };
+});
+
 /** ----------------------------
  * Mocks
  * --------------------------- */
@@ -22,20 +32,16 @@ vi.mock("@/components/networking", () => {
     proxyBaseUrl: "https://example.com",
     // Called when decoding a valid token
     setGlobalLitellmHeaderName: vi.fn(),
-    Organization: {} as any,
+    Organization: {},
   };
 });
 
 // jwt-decode: we’ll swap implementation per test via mockImplementation
-const jwtDecodeMock = vi.fn();
 vi.mock("jwt-decode", () => ({
   jwtDecode: (token: string) => jwtDecodeMock(token),
 }));
 
-// Query client provider works fine unmocked
-
 // Super-light stubs for all heavy components so rendering doesn't explode
-const stub = (name: string) => () => <div data-testid={name} />;
 vi.mock("@/components/navbar", () => ({ default: stub("navbar") }));
 vi.mock("@/components/user_dashboard", () => ({ default: stub("user-dashboard") }));
 vi.mock("@/components/templates/model_dashboard", () => ({ default: stub("model-dashboard") }));
@@ -70,9 +76,12 @@ vi.mock("@/components/common_components/fetch_teams", () => ({ fetchTeams: vi.fn
 vi.mock("@/components/ui/ui-loading-spinner", () => ({
   UiLoadingSpinner: stub("spinner"),
 }));
-vi.mock("@/contexts/ThemeContext", () => ({
-  ThemeProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-}));
+vi.mock("@/contexts/ThemeContext", () => {
+  const React = require("react");
+  return {
+    ThemeProvider: ({ children }: any) => React.createElement(React.Fragment, null, children),
+  };
+});
 vi.mock("@/lib/cva.config", () => ({
   cx: (...args: string[]) => args.join(" "),
 }));

From 386468ad77de16b9d80672faac007c5edb1ce07f Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Wed, 8 Oct 2025 14:17:23 -0700
Subject: [PATCH 23/42] feat: initial commit for openapi to mcp conversion

allows users to give openapi spec for a server, and litellm to serve it as an mcp
---
 .../mcp_server/openapi_to_mcp_generator.py    | 222 ++++++++++++++++++
 litellm/proxy/_new_secret_config.yaml         |  30 ++-
 2 files changed, 249 insertions(+), 3 deletions(-)
 create mode 100644 litellm/proxy/_experimental/mcp_server/openapi_to_mcp_generator.py

diff --git a/litellm/proxy/_experimental/mcp_server/openapi_to_mcp_generator.py b/litellm/proxy/_experimental/mcp_server/openapi_to_mcp_generator.py
new file mode 100644
index 0000000000..74e149a06e
--- /dev/null
+++ b/litellm/proxy/_experimental/mcp_server/openapi_to_mcp_generator.py
@@ -0,0 +1,222 @@
+"""
+This module is used to generate MCP tools from OpenAPI specs.
+"""
+
+import json
+from typing import Any, Dict
+
+import httpx
+
+from litellm._logging import verbose_logger
+from litellm.proxy._experimental.mcp_server.tool_registry import (
+    global_mcp_tool_registry,
+)
+
+# Store the base URL and headers globally
+BASE_URL = ""
+HEADERS: Dict[str, str] = {}
+
+
+def load_openapi_spec(filepath: str) -> Dict[str, Any]:
+    """Load OpenAPI specification from JSON file."""
+    with open(filepath, "r") as f:
+        return json.load(f)
+
+
+def get_base_url(spec: Dict[str, Any]) -> str:
+    """Extract base URL from OpenAPI spec."""
+    # OpenAPI 3.x
+    if "servers" in spec and spec["servers"]:
+        return spec["servers"][0]["url"]
+    # OpenAPI 2.x (Swagger)
+    elif "host" in spec:
+        scheme = spec.get("schemes", ["https"])[0]
+        base_path = spec.get("basePath", "")
+        return f"{scheme}://{spec['host']}{base_path}"
+    return ""
+
+
+def extract_parameters(operation: Dict[str, Any]) -> tuple:
+    """Extract parameter names from OpenAPI operation."""
+    path_params = []
+    query_params = []
+    body_params = []
+
+    # OpenAPI 3.x and 2.x parameters
+    if "parameters" in operation:
+        for param in operation["parameters"]:
+            param_name = param["name"]
+            if param.get("in") == "path":
+                path_params.append(param_name)
+            elif param.get("in") == "query":
+                query_params.append(param_name)
+            elif param.get("in") == "body":
+                body_params.append(param_name)
+
+    # OpenAPI 3.x requestBody
+    if "requestBody" in operation:
+        body_params.append("body")
+
+    return path_params, query_params, body_params
+
+
+def build_input_schema(operation: Dict[str, Any]) -> Dict[str, Any]:
+    """Build MCP input schema from OpenAPI operation."""
+    properties = {}
+    required = []
+
+    # Process parameters
+    if "parameters" in operation:
+        for param in operation["parameters"]:
+            param_name = param["name"]
+            param_schema = param.get("schema", {})
+            param_type = param_schema.get("type", "string")
+
+            properties[param_name] = {
+                "type": param_type,
+                "description": param.get("description", ""),
+            }
+
+            if param.get("required", False):
+                required.append(param_name)
+
+    # Process requestBody (OpenAPI 3.x)
+    if "requestBody" in operation:
+        request_body = operation["requestBody"]
+        content = request_body.get("content", {})
+
+        # Try to get JSON schema
+        if "application/json" in content:
+            schema = content["application/json"].get("schema", {})
+            properties["body"] = {
+                "type": "object",
+                "description": request_body.get("description", "Request body"),
+                "properties": schema.get("properties", {}),
+            }
+            if request_body.get("required", False):
+                required.append("body")
+
+    return {
+        "type": "object",
+        "properties": properties,
+        "required": required if required else [],
+    }
+
+
+def create_tool_function(
+    path: str, method: str, operation: Dict[str, Any], base_url: str
+):
+    """Create a tool function for an OpenAPI operation."""
+
+    path_params, query_params, body_params = extract_parameters(operation)
+    all_params = path_params + query_params + body_params
+
+    # Build function signature dynamically
+    if all_params:
+        params_str = ", ".join(f"{p}: str = ''" for p in all_params)
+    else:
+        params_str = ""
+
+    # Create the function code as a string
+    func_code = f'''
+async def tool_function({params_str}) -> str:
+    """Dynamically generated tool function."""
+    url = base_url + path
+    
+    # Replace path parameters
+    path_param_names = {path_params}
+    for param_name in path_param_names:
+        param_value = locals().get(param_name, "")
+        if param_value:
+            url = url.replace("{{" + param_name + "}}", str(param_value))
+    
+    # Build query params
+    query_param_names = {query_params}
+    params = {{}}
+    for param_name in query_param_names:
+        param_value = locals().get(param_name, "")
+        if param_value:
+            params[param_name] = param_value
+    
+    # Build request body
+    body_param_names = {body_params}
+    json_body = None
+    if body_param_names:
+        body_value = locals().get("body", {{}})
+        if isinstance(body_value, dict):
+            json_body = body_value
+        elif body_value:
+            # If it's a string, try to parse as JSON
+            import json as json_module
+            try:
+                json_body = json_module.loads(body_value) if isinstance(body_value, str) else {{"data": body_value}}
+            except:
+                json_body = {{"data": body_value}}
+    
+    # Make HTTP request
+    async with httpx.AsyncClient() as client:
+        if "{method.lower()}" == "get":
+            response = await client.get(url, params=params, headers=HEADERS)
+        elif "{method.lower()}" == "post":
+            response = await client.post(url, params=params, json=json_body, headers=HEADERS)
+        elif "{method.lower()}" == "put":
+            response = await client.put(url, params=params, json=json_body, headers=HEADERS)
+        elif "{method.lower()}" == "delete":
+            response = await client.delete(url, params=params, headers=HEADERS)
+        elif "{method.lower()}" == "patch":
+            response = await client.patch(url, params=params, json=json_body, headers=HEADERS)
+        else:
+            return "Unsupported HTTP method: {method}"
+        
+        return response.text
+'''
+
+    # Execute the function code to create the actual function
+    local_vars = {
+        "httpx": httpx,
+        "HEADERS": HEADERS,
+        "base_url": base_url,
+        "path": path,
+        "method": method,
+    }
+    exec(func_code, local_vars)
+
+    return local_vars["tool_function"]
+
+
+def register_tools_from_openapi(spec: Dict[str, Any], base_url: str):
+    """Register MCP tools from OpenAPI specification."""
+    paths = spec.get("paths", {})
+
+    for path, path_item in paths.items():
+        for method in ["get", "post", "put", "delete", "patch"]:
+            if method in path_item:
+                operation = path_item[method]
+
+                # Generate tool name
+                operation_id = operation.get(
+                    "operationId", f"{method}_{path.replace('/', '_')}"
+                )
+                tool_name = operation_id.replace(" ", "_").lower()
+
+                # Get description
+                description = operation.get(
+                    "summary", operation.get("description", f"{method.upper()} {path}")
+                )
+
+                # Build input schema
+                input_schema = build_input_schema(operation)
+
+                # Create tool function
+                tool_func = create_tool_function(path, method, operation, base_url)
+                tool_func.__name__ = tool_name
+                tool_func.__doc__ = description
+
+                # Register tool with local registry
+                global_mcp_tool_registry.register_tool(
+                    name=tool_name,
+                    description=description,
+                    input_schema=input_schema,
+                    handler=tool_func,
+                )
+                verbose_logger.debug(f"Registered tool: {tool_name}")
diff --git a/litellm/proxy/_new_secret_config.yaml b/litellm/proxy/_new_secret_config.yaml
index 52a6fc16ff..b62a6258db 100644
--- a/litellm/proxy/_new_secret_config.yaml
+++ b/litellm/proxy/_new_secret_config.yaml
@@ -1,6 +1,30 @@
 model_list:
   - model_name: gpt-5-mini
     litellm_params:
-      model: azure/gpt-5-mini-2
-      api_key: os.environ/AZURE_API_KEY_ALT
-      api_base: os.environ/AZURE_API_BASE_ALT
+      model: openai/gpt-4o-mini
+      api_base: "https://webhook.site/2f385e05-00aa-402b-86d1-efc9261471a5"
+      api_key: dummy
+  - model_name: "byok-wildcard/*"
+    litellm_params:
+      model: openai/*
+  - model_name: xai-grok-3
+    litellm_params:
+      model: xai/grok-3
+  - model_name: hosted_vllm/whisper-v3
+    litellm_params:
+      model: hosted_vllm/whisper-v3
+      api_base: "https://webhook.site/2f385e05-00aa-402b-86d1-efc9261471a5"
+      api_key: dummy
+
+mcp_servers:
+  my_api_mcp:
+    url: "http://0.0.0.0:8000"
+    spec_path: "/Users/krrishdholakia/Documents/temp_py_folder/openapi.json"
+    auth_type: none
+    allowed_tools: ["get_users", "create_user"]
+    access_groups: ["dev_group", "api_team"]
+
+
+litellm_settings:
+  callbacks: ["prometheus"]
+  custom_prometheus_metadata_labels: ["metadata.initiative", "metadata.business-unit"]  

From ff893cce42f980a2f55f358fa3cb4154ccfc8cac Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Wed, 8 Oct 2025 15:25:47 -0700
Subject: [PATCH 24/42] feat(mcp_server_manager.py): working call tools for
 openapi to mcp servers

---
 .../mcp_server/mcp_server_manager.py          | 242 ++++++++++++------
 .../types/mcp_server/mcp_server_manager.py    |   1 +
 2 files changed, 159 insertions(+), 84 deletions(-)

diff --git a/litellm/proxy/_experimental/mcp_server/mcp_server_manager.py b/litellm/proxy/_experimental/mcp_server/mcp_server_manager.py
index 10e40b76ef..fd1c3974c8 100644
--- a/litellm/proxy/_experimental/mcp_server/mcp_server_manager.py
+++ b/litellm/proxy/_experimental/mcp_server/mcp_server_manager.py
@@ -621,18 +621,20 @@ class MCPServerManager:
         Raises:
             HTTPException: If tool is not allowed for this key/team
         """
-        from litellm.proxy._experimental.mcp_server.auth.user_api_key_auth_mcp import MCPRequestHandler
-        
+        from litellm.proxy._experimental.mcp_server.auth.user_api_key_auth_mcp import (
+            MCPRequestHandler,
+        )
+
         if not user_api_key_auth:
             return
-        
+
         # Check if tool is allowed
         is_allowed = await MCPRequestHandler.is_tool_allowed_for_server(
             tool_name=tool_name,
             server_id=server.server_id,
             user_api_key_auth=user_api_key_auth,
         )
-        
+
         if not is_allowed:
             raise HTTPException(
                 status_code=403,
@@ -641,6 +643,64 @@ class MCPServerManager:
                 },
             )
 
+    async def _call_openapi_tool_handler(
+        self,
+        server: MCPServer,
+        tool_name: str,
+        arguments: Dict[str, Any],
+    ) -> CallToolResult:
+        """
+        Call an OpenAPI tool handler directly.
+
+        For OpenAPI servers, instead of using MCP protocol, we call the tool handler
+        that was registered during OpenAPI spec parsing. This handler makes direct
+        HTTP requests to the API.
+
+        Args:
+            tool_name: The full tool name (with prefix) to call
+            arguments: Tool arguments to pass to the handler
+
+        Returns:
+            CallToolResult with the response from the API
+        """
+        from mcp.types import TextContent
+
+        from litellm.proxy._experimental.mcp_server.tool_registry import (
+            global_mcp_tool_registry,
+        )
+
+        # Get the tool from the registry
+        tool = global_mcp_tool_registry.get_tool(f"{server.name}-{tool_name}")
+        if tool is None:
+            # Tool not found in registry
+            error_msg = f"OpenAPI tool {tool_name} not found in registry"
+            verbose_logger.error(error_msg)
+            return CallToolResult(
+                content=[TextContent(type="text", text=error_msg)],
+                isError=True,
+            )
+
+        try:
+            # Call the tool handler with the arguments
+            # The handler is an async function that makes the HTTP request
+            handler_result = await tool.handler(**arguments)
+
+            # Convert the handler result (string response) to CallToolResult format
+            result = CallToolResult(
+                content=[TextContent(type="text", text=str(handler_result))],
+                isError=False,
+            )
+
+            return result
+
+        except Exception as e:
+            error_msg = f"Error calling OpenAPI tool {tool_name}: {str(e)}"
+            verbose_logger.error(error_msg)
+            return CallToolResult(
+                content=[TextContent(type="text", text=error_msg)],
+                isError=True,
+            )
+
     async def pre_call_tool_check(
         self,
         name: str,
@@ -793,95 +853,109 @@ class MCPServerManager:
                 server=mcp_server,
             )
 
-        # Get server-specific auth header if available
-        server_auth_header: Optional[Union[Dict[str, str], str]] = None
-        if mcp_server_auth_headers and mcp_server.alias:
-            server_auth_header = mcp_server_auth_headers.get(mcp_server.alias)
-        elif mcp_server_auth_headers and mcp_server.server_name:
-            server_auth_header = mcp_server_auth_headers.get(mcp_server.server_name)
+        # Prepare tasks for during hooks
+        tasks = []
+        if proxy_logging_obj:
+            # Create synthetic LLM data for during hook processing
+            from litellm.types.llms.base import HiddenParams
+            from litellm.types.mcp import MCPDuringCallRequestObject
 
-        # Fall back to deprecated mcp_auth_header if no server-specific header found
-        if server_auth_header is None:
-            server_auth_header = mcp_auth_header
-
-        # oauth2 headers
-        extra_headers: Optional[Dict[str, str]] = None
-        if mcp_server.auth_type == MCPAuth.oauth2:
-            extra_headers = oauth2_headers
-
-        if mcp_server.extra_headers and raw_headers:
-            if extra_headers is None:
-                extra_headers = {}
-            for header in mcp_server.extra_headers:
-                if header in raw_headers:
-                    extra_headers[header] = raw_headers[header]
-
-        client = self._create_mcp_client(
-            server=mcp_server,
-            mcp_auth_header=server_auth_header,
-            extra_headers=extra_headers,
-        )
-
-        async with client:
-            # Use the original tool name (without prefix) for the actual call
-            call_tool_params = MCPCallToolRequestParams(
-                name=original_tool_name,
+            request_obj = MCPDuringCallRequestObject(
+                tool_name=name,
                 arguments=arguments,
+                server_name=server_name_from_prefix,
+                start_time=start_time.timestamp() if start_time else None,
+                hidden_params=HiddenParams(),
             )
-            tasks = []
-            if proxy_logging_obj:
-                # Create synthetic LLM data for during hook processing
-                from litellm.types.llms.base import HiddenParams
-                from litellm.types.mcp import MCPDuringCallRequestObject
 
-                request_obj = MCPDuringCallRequestObject(
-                    tool_name=name,
+            during_hook_kwargs = {
+                "name": name,
+                "arguments": arguments,
+                "server_name": server_name_from_prefix,
+                "user_api_key_auth": user_api_key_auth,
+            }
+
+            synthetic_llm_data = proxy_logging_obj._convert_mcp_to_llm_format(
+                request_obj, during_hook_kwargs
+            )
+
+            during_hook_task = asyncio.create_task(
+                proxy_logging_obj.during_call_hook(
+                    user_api_key_dict=user_api_key_auth,
+                    data=synthetic_llm_data,
+                    call_type="mcp_call",  # type: ignore
+                )
+            )
+            tasks.append(during_hook_task)
+
+        # For OpenAPI servers, call the tool handler directly instead of via MCP client
+        if mcp_server.spec_path:
+            verbose_logger.debug(
+                f"Calling OpenAPI tool {name} directly via HTTP handler"
+            )
+            tasks.append(
+                asyncio.create_task(
+                    self._call_openapi_tool_handler(mcp_server, name, arguments)
+                )
+            )
+        else:
+            # For regular MCP servers, use the MCP client
+            # Get server-specific auth header if available
+            server_auth_header: Optional[Union[Dict[str, str], str]] = None
+            if mcp_server_auth_headers and mcp_server.alias:
+                server_auth_header = mcp_server_auth_headers.get(mcp_server.alias)
+            elif mcp_server_auth_headers and mcp_server.server_name:
+                server_auth_header = mcp_server_auth_headers.get(mcp_server.server_name)
+
+            # Fall back to deprecated mcp_auth_header if no server-specific header found
+            if server_auth_header is None:
+                server_auth_header = mcp_auth_header
+
+            # oauth2 headers
+            extra_headers: Optional[Dict[str, str]] = None
+            if mcp_server.auth_type == MCPAuth.oauth2:
+                extra_headers = oauth2_headers
+
+            if mcp_server.extra_headers and raw_headers:
+                if extra_headers is None:
+                    extra_headers = {}
+                for header in mcp_server.extra_headers:
+                    if header in raw_headers:
+                        extra_headers[header] = raw_headers[header]
+
+            client = self._create_mcp_client(
+                server=mcp_server,
+                mcp_auth_header=server_auth_header,
+                extra_headers=extra_headers,
+            )
+
+            async with client:
+                # Use the original tool name (without prefix) for the actual call
+                call_tool_params = MCPCallToolRequestParams(
+                    name=original_tool_name,
                     arguments=arguments,
-                    server_name=server_name_from_prefix,
-                    start_time=start_time.timestamp() if start_time else None,
-                    hidden_params=HiddenParams(),
                 )
+                tasks.append(asyncio.create_task(client.call_tool(call_tool_params)))
 
-                during_hook_kwargs = {
-                    "name": name,
-                    "arguments": arguments,
-                    "server_name": server_name_from_prefix,
-                    "user_api_key_auth": user_api_key_auth,
-                }
+        try:
+            mcp_responses = await asyncio.gather(*tasks)
 
-                synthetic_llm_data = proxy_logging_obj._convert_mcp_to_llm_format(
-                    request_obj, during_hook_kwargs
-                )
+            # If proxy_logging_obj is None, the tool call result is at index 0
+            # If proxy_logging_obj is not None, the tool call result is at index 1 (after the during hook task)
+            result_index = 1 if proxy_logging_obj else 0
+            result = mcp_responses[result_index]
 
-                during_hook_task = asyncio.create_task(
-                    proxy_logging_obj.during_call_hook(
-                        user_api_key_dict=user_api_key_auth,
-                        data=synthetic_llm_data,
-                        call_type="mcp_call",  # type: ignore
-                    )
-                )
-                tasks.append(during_hook_task)
-
-            tasks.append(asyncio.create_task(client.call_tool(call_tool_params)))
-            try:
-                mcp_responses = await asyncio.gather(*tasks)
-
-                # If proxy_logging_obj is None, the tool call result is at index 0
-                # If proxy_logging_obj is not None, the tool call result is at index 1 (after the during hook task)
-                result_index = 1 if proxy_logging_obj else 0
-                result = mcp_responses[result_index]
-
-                return cast(CallToolResult, result)
-            except (
-                BlockedPiiEntityError,
-                GuardrailRaisedException,
-                HTTPException,
-            ) as e:
-                # Re-raise guardrail exceptions to properly fail the MCP call
-                verbose_logger.error(
-                    f"Guardrail blocked MCP tool call during result check: {str(e)}"
-                )
-                raise e
+            return cast(CallToolResult, result)
+        except (
+            BlockedPiiEntityError,
+            GuardrailRaisedException,
+            HTTPException,
+        ) as e:
+            # Re-raise guardrail exceptions to properly fail the MCP call
+            verbose_logger.error(
+                f"Guardrail blocked MCP tool call during result check: {str(e)}"
+            )
+            raise e
 
     #########################################################
     # End of Methods that call the upstream MCP servers
diff --git a/litellm/types/mcp_server/mcp_server_manager.py b/litellm/types/mcp_server/mcp_server_manager.py
index 3e0c2b20e3..73088329a6 100644
--- a/litellm/types/mcp_server/mcp_server_manager.py
+++ b/litellm/types/mcp_server/mcp_server_manager.py
@@ -16,6 +16,7 @@ class MCPServer(BaseModel):
     alias: Optional[str] = None
     server_name: Optional[str] = None
     url: Optional[str] = None
+    spec_path: Optional[str] = None
     transport: MCPTransportType
     auth_type: Optional[MCPAuthType] = None
     authentication_token: Optional[str] = None

From 1c317a35af0968067870013678b5f87efafe32bf Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Wed, 8 Oct 2025 15:01:28 -0700
Subject: [PATCH 25/42] feat(mcp/): initial working list tools for openapi spec
 mcp tools

---
 .../mcp_server/mcp_server_manager.py          | 172 +++++++++++++++++-
 .../mcp_server/openapi_to_mcp_generator.py    |  32 +++-
 .../proxy/_experimental/mcp_server/server.py  |  96 ++++++----
 .../_experimental/mcp_server/tool_registry.py |  22 ++-
 litellm/proxy/_new_secret_config.yaml         |   6 +-
 .../types/mcp_server/mcp_server_manager.py    |   1 +
 6 files changed, 275 insertions(+), 54 deletions(-)

diff --git a/litellm/proxy/_experimental/mcp_server/mcp_server_manager.py b/litellm/proxy/_experimental/mcp_server/mcp_server_manager.py
index fd1c3974c8..f7cd7a0a02 100644
--- a/litellm/proxy/_experimental/mcp_server/mcp_server_manager.py
+++ b/litellm/proxy/_experimental/mcp_server/mcp_server_manager.py
@@ -195,6 +195,7 @@ class MCPServerManager:
                 name=name_for_prefix,
                 alias=alias,
                 server_name=server_name,
+                spec_path=server_config.get("spec_path", None),
                 url=server_config.get("url", None) or "",
                 command=server_config.get("command", None) or "",
                 args=server_config.get("args", None) or [],
@@ -218,12 +219,170 @@ class MCPServerManager:
                 access_groups=server_config.get("access_groups", None),
             )
             self.config_mcp_servers[server_id] = new_server
+
+            # Check if this is an OpenAPI-based server
+            spec_path = server_config.get("spec_path", None)
+            if spec_path:
+                verbose_logger.info(
+                    f"Loading OpenAPI spec from {spec_path} for server {server_name}"
+                )
+                self._register_openapi_tools(
+                    spec_path=spec_path,
+                    server=new_server,
+                    base_url=server_config.get("url", ""),
+                )
+
         verbose_logger.debug(
             f"Loaded MCP Servers: {json.dumps(self.config_mcp_servers, indent=4, default=str)}"
         )
 
         self.initialize_tool_name_to_mcp_server_name_mapping()
 
+    def _register_openapi_tools(self, spec_path: str, server: MCPServer, base_url: str):
+        """
+        Register tools from an OpenAPI specification for a given server.
+
+        This creates "virtual" MCP tools from OpenAPI endpoints that are:
+        1. Registered in the global tool registry with server prefix
+        2. Mapped to the server for routing
+        3. Executed via the local tool handler
+
+        Args:
+            spec_path: Path to the OpenAPI specification file
+            server: The MCPServer instance to register tools for
+            base_url: Base URL for API calls
+        """
+        from litellm.proxy._experimental.mcp_server.openapi_to_mcp_generator import (
+            build_input_schema,
+            create_tool_function,
+        )
+        from litellm.proxy._experimental.mcp_server.openapi_to_mcp_generator import (
+            get_base_url as get_openapi_base_url,
+        )
+        from litellm.proxy._experimental.mcp_server.openapi_to_mcp_generator import (
+            load_openapi_spec,
+        )
+        from litellm.proxy._experimental.mcp_server.tool_registry import (
+            global_mcp_tool_registry,
+        )
+
+        try:
+            # Load OpenAPI spec
+            spec = load_openapi_spec(spec_path)
+
+            # Use base_url from config if provided, otherwise extract from spec
+            if not base_url:
+                base_url = get_openapi_base_url(spec)
+
+            verbose_logger.info(
+                f"Registering OpenAPI tools for server {server.name} with base URL: {base_url}"
+            )
+
+            # Get server prefix for tool naming
+            server_prefix = get_server_prefix(server)
+
+            # Build headers from server configuration
+            headers = {}
+
+            # Add authentication headers if configured
+            if server.authentication_token:
+                from litellm.types.mcp import MCPAuth
+
+                if server.auth_type == MCPAuth.bearer_token:
+                    headers["Authorization"] = f"Bearer {server.authentication_token}"
+                elif server.auth_type == MCPAuth.api_key:
+                    headers["Authorization"] = f"ApiKey {server.authentication_token}"
+                elif server.auth_type == MCPAuth.basic:
+                    headers["Authorization"] = f"Basic {server.authentication_token}"
+
+            # Add any extra headers from server config
+            # Note: extra_headers is a List[str] of header names to forward, not a dict
+            # For OpenAPI tools, we'll just use the authentication headers
+            # If extra_headers were needed, they would be processed separately
+
+            verbose_logger.debug(
+                f"Using headers for OpenAPI tools (excluding sensitive values): "
+                f"{list(headers.keys())}"
+            )
+
+            # Extract and register tools from OpenAPI paths
+            paths = spec.get("paths", {})
+            registered_count = 0
+
+            verbose_logger.debug(f"Processing {len(paths)} paths from OpenAPI spec")
+
+            for path, path_item in paths.items():
+                for method in ["get", "post", "put", "delete", "patch"]:
+                    if method not in path_item:
+                        continue
+
+                    operation = path_item[method]
+
+                    # Generate tool name (without prefix initially)
+                    operation_id = operation.get(
+                        "operationId", f"{method}_{path.replace('/', '_')}"
+                    )
+                    base_tool_name = operation_id.replace(" ", "_").lower()
+
+                    # Check if tool is allowed for this server
+                    if not self.check_allowed_or_banned_tools(base_tool_name, server):
+                        verbose_logger.debug(
+                            f"Skipping tool {base_tool_name} - not in allowed_tools for server {server.name}"
+                        )
+                        continue
+
+                    # Add server prefix to tool name
+                    prefixed_tool_name = add_server_prefix_to_tool_name(
+                        base_tool_name, server_prefix
+                    )
+
+                    # Get description
+                    description = operation.get(
+                        "summary",
+                        operation.get("description", f"{method.upper()} {path}"),
+                    )
+
+                    # Build input schema using imported function
+                    input_schema = build_input_schema(operation)
+
+                    # Create tool function with headers using imported function
+                    tool_func = create_tool_function(
+                        path, method, operation, base_url, headers=headers
+                    )
+                    tool_func.__name__ = prefixed_tool_name
+                    tool_func.__doc__ = description
+
+                    # Register tool with prefixed name in global registry
+                    global_mcp_tool_registry.register_tool(
+                        name=prefixed_tool_name,
+                        description=description,
+                        input_schema=input_schema,
+                        handler=tool_func,
+                    )
+
+                    # Update tool name to server name mapping (for both prefixed and base names)
+                    self.tool_name_to_mcp_server_name_mapping[base_tool_name] = (
+                        server_prefix
+                    )
+                    self.tool_name_to_mcp_server_name_mapping[prefixed_tool_name] = (
+                        server_prefix
+                    )
+
+                    registered_count += 1
+                    verbose_logger.debug(
+                        f"Registered OpenAPI tool: {prefixed_tool_name} for server {server.name}"
+                    )
+
+            verbose_logger.info(
+                f"Successfully registered {registered_count} OpenAPI tools for server {server.name}"
+            )
+
+        except Exception as e:
+            verbose_logger.error(
+                f"Failed to register OpenAPI tools for server {server.name}: {str(e)}"
+            )
+            raise e
+
     def remove_server(self, mcp_server: LiteLLM_MCPServerTable):
         """
         Remove a server from the registry
@@ -469,6 +628,10 @@ class MCPServerManager:
         Returns:
             List[MCPTool]: List of tools available on the server with prefixed names
         """
+        from litellm.proxy._experimental.mcp_server.tool_registry import (
+            global_mcp_tool_registry,
+        )
+
         verbose_logger.debug(f"Connecting to url: {server.url}")
         verbose_logger.info(f"_get_tools_from_server for {server.name}...")
 
@@ -481,7 +644,14 @@ class MCPServerManager:
                 extra_headers=extra_headers,
             )
 
-            tools = await self._fetch_tools_with_timeout(client, server.name)
+            ## HANDLE OPENAPI TOOLS
+            if server.spec_path:
+                _tools = global_mcp_tool_registry.list_tools(tool_prefix=server.name)
+                tools = global_mcp_tool_registry.convert_tools_to_mcp_sdk_tool_type(
+                    _tools
+                )
+            else:
+                tools = await self._fetch_tools_with_timeout(client, server.name)
 
             prefixed_or_original_tools = self._create_prefixed_tools(
                 tools, server, add_prefix=add_prefix
diff --git a/litellm/proxy/_experimental/mcp_server/openapi_to_mcp_generator.py b/litellm/proxy/_experimental/mcp_server/openapi_to_mcp_generator.py
index 74e149a06e..72288f8e67 100644
--- a/litellm/proxy/_experimental/mcp_server/openapi_to_mcp_generator.py
+++ b/litellm/proxy/_experimental/mcp_server/openapi_to_mcp_generator.py
@@ -3,7 +3,7 @@ This module is used to generate MCP tools from OpenAPI specs.
 """
 
 import json
-from typing import Any, Dict
+from typing import Any, Dict, Optional
 
 import httpx
 
@@ -104,9 +104,23 @@ def build_input_schema(operation: Dict[str, Any]) -> Dict[str, Any]:
 
 
 def create_tool_function(
-    path: str, method: str, operation: Dict[str, Any], base_url: str
+    path: str,
+    method: str,
+    operation: Dict[str, Any],
+    base_url: str,
+    headers: Optional[Dict[str, str]] = None,
 ):
-    """Create a tool function for an OpenAPI operation."""
+    """Create a tool function for an OpenAPI operation.
+
+    Args:
+        path: API endpoint path
+        method: HTTP method (get, post, put, delete, patch)
+        operation: OpenAPI operation object
+        base_url: Base URL for the API
+        headers: Optional headers to include in requests (e.g., authentication)
+    """
+    if headers is None:
+        headers = {}
 
     path_params, query_params, body_params = extract_parameters(operation)
     all_params = path_params + query_params + body_params
@@ -156,15 +170,15 @@ async def tool_function({params_str}) -> str:
     # Make HTTP request
     async with httpx.AsyncClient() as client:
         if "{method.lower()}" == "get":
-            response = await client.get(url, params=params, headers=HEADERS)
+            response = await client.get(url, params=params, headers=headers)
         elif "{method.lower()}" == "post":
-            response = await client.post(url, params=params, json=json_body, headers=HEADERS)
+            response = await client.post(url, params=params, json=json_body, headers=headers)
         elif "{method.lower()}" == "put":
-            response = await client.put(url, params=params, json=json_body, headers=HEADERS)
+            response = await client.put(url, params=params, json=json_body, headers=headers)
         elif "{method.lower()}" == "delete":
-            response = await client.delete(url, params=params, headers=HEADERS)
+            response = await client.delete(url, params=params, headers=headers)
         elif "{method.lower()}" == "patch":
-            response = await client.patch(url, params=params, json=json_body, headers=HEADERS)
+            response = await client.patch(url, params=params, json=json_body, headers=headers)
         else:
             return "Unsupported HTTP method: {method}"
         
@@ -174,7 +188,7 @@ async def tool_function({params_str}) -> str:
     # Execute the function code to create the actual function
     local_vars = {
         "httpx": httpx,
-        "HEADERS": HEADERS,
+        "headers": headers,
         "base_url": base_url,
         "path": path,
         "method": method,
diff --git a/litellm/proxy/_experimental/mcp_server/server.py b/litellm/proxy/_experimental/mcp_server/server.py
index d7ebfb805f..f38e44e99d 100644
--- a/litellm/proxy/_experimental/mcp_server/server.py
+++ b/litellm/proxy/_experimental/mcp_server/server.py
@@ -364,25 +364,25 @@ if MCP_AVAILABLE:
     def _tool_name_matches(tool_name: str, filter_list: List[str]) -> bool:
         """
         Check if a tool name matches any name in the filter list.
-        
+
         Checks both the full tool name and unprefixed version (without server prefix).
         This allows users to configure simple tool names regardless of prefixing.
-        
+
         Args:
             tool_name: The tool name to check (may be prefixed like "server-tool_name")
             filter_list: List of tool names to match against
-            
+
         Returns:
             True if the tool name (prefixed or unprefixed) is in the filter list
         """
         from litellm.proxy._experimental.mcp_server.utils import (
             get_server_name_prefix_tool_mcp,
         )
-        
+
         # Check if the full name is in the list
         if tool_name in filter_list:
             return True
-            
+
         # Check if the unprefixed name is in the list
         unprefixed_name, _ = get_server_name_prefix_tool_mcp(tool_name)
         return unprefixed_name in filter_list
@@ -393,34 +393,36 @@ if MCP_AVAILABLE:
     ) -> List[MCPTool]:
         """
         Filter tools by allowed/disallowed tools configuration.
-        
+
         If allowed_tools is set, only tools in that list are returned.
         If disallowed_tools is set, tools in that list are excluded.
         Tool names are matched with and without server prefixes for flexibility.
-        
+
         Args:
             tools: List of tools to filter
             mcp_server: Server configuration with allowed_tools/disallowed_tools
-            
+
         Returns:
             Filtered list of tools
         """
         tools_to_return = tools
-        
+
         # Filter by allowed_tools (whitelist)
         if mcp_server.allowed_tools:
             tools_to_return = [
-                tool for tool in tools 
+                tool
+                for tool in tools
                 if _tool_name_matches(tool.name, mcp_server.allowed_tools)
             ]
-                    
+
         # Filter by disallowed_tools (blacklist)
         if mcp_server.disallowed_tools:
             tools_to_return = [
-                tool for tool in tools_to_return
+                tool
+                for tool in tools_to_return
                 if not _tool_name_matches(tool.name, mcp_server.disallowed_tools)
             ]
-            
+
         return tools_to_return
 
     async def _get_tools_from_mcp_servers(
@@ -497,7 +499,7 @@ if MCP_AVAILABLE:
                     extra_headers=extra_headers,
                     add_prefix=add_prefix,
                 )
-                
+
                 filtered_tools = filter_tools_by_allowed_tools(tools, server)
                 
                 filtered_tools = await filter_tools_by_key_team_permissions(
@@ -507,7 +509,7 @@ if MCP_AVAILABLE:
                 )
                 
                 all_tools.extend(filtered_tools)
-                
+
                 verbose_logger.debug(
                     f"Successfully fetched {len(tools)} tools from server {server.name}, {len(filtered_tools)} after filtering"
                 )
@@ -680,33 +682,42 @@ if MCP_AVAILABLE:
                 standard_logging_mcp_tool_call
             )
             litellm_logging_obj.model = f"MCP: {name}"
-        # Try managed server tool first (pass the full prefixed name)
-        # Primary and recommended way to use MCP servers
+        # Check if tool exists in local registry first (for OpenAPI-based tools)
+        # These tools are registered with their prefixed names
         #########################################################
-        mcp_server: Optional[MCPServer] = (
-            global_mcp_server_manager._get_mcp_server_from_tool_name(name)
-        )
-        if mcp_server:
-            standard_logging_mcp_tool_call["mcp_server_cost_info"] = (
-                mcp_server.mcp_info or {}
-            ).get("mcp_server_cost_info")
-            response = await _handle_managed_mcp_tool(
-                name=name,  # Pass the full name (potentially prefixed)
-                arguments=arguments,
-                user_api_key_auth=user_api_key_auth,
-                mcp_auth_header=mcp_auth_header,
-                mcp_server_auth_headers=mcp_server_auth_headers,
-                oauth2_headers=oauth2_headers,
-                raw_headers=raw_headers,
-                litellm_logging_obj=litellm_logging_obj,
-            )
+        local_tool = global_mcp_tool_registry.get_tool(name)
+        if local_tool:
+            verbose_logger.debug(f"Executing local registry tool: {name}")
+            response = await _handle_local_mcp_tool(name, arguments)
 
-        # Fall back to local tool registry (use original name)
-        #########################################################
-        # Deprecated: Local MCP Server Tool
+        # Try managed MCP server tool (pass the full prefixed name)
+        # Primary and recommended way to use external MCP servers
         #########################################################
         else:
-            response = await _handle_local_mcp_tool(original_tool_name, arguments)
+            mcp_server: Optional[MCPServer] = (
+                global_mcp_server_manager._get_mcp_server_from_tool_name(name)
+            )
+            if mcp_server:
+                standard_logging_mcp_tool_call["mcp_server_cost_info"] = (
+                    mcp_server.mcp_info or {}
+                ).get("mcp_server_cost_info")
+                response = await _handle_managed_mcp_tool(
+                    name=name,  # Pass the full name (potentially prefixed)
+                    arguments=arguments,
+                    user_api_key_auth=user_api_key_auth,
+                    mcp_auth_header=mcp_auth_header,
+                    mcp_server_auth_headers=mcp_server_auth_headers,
+                    oauth2_headers=oauth2_headers,
+                    raw_headers=raw_headers,
+                    litellm_logging_obj=litellm_logging_obj,
+                )
+
+            # Fall back to local tool registry with original name (legacy support)
+            #########################################################
+            # Deprecated: Local MCP Server Tool
+            #########################################################
+            else:
+                response = await _handle_local_mcp_tool(original_tool_name, arguments)
 
         #########################################################
         # Post MCP Tool Call Hook
@@ -778,14 +789,21 @@ if MCP_AVAILABLE:
         Handle tool execution for local registry tools
         Note: Local tools don't use prefixes, so we use the original name
         """
+        import inspect
+
         tool = global_mcp_tool_registry.get_tool(name)
         if not tool:
             raise HTTPException(status_code=404, detail=f"Tool '{name}' not found")
 
         try:
-            result = tool.handler(**arguments)
+            # Check if handler is async or sync
+            if inspect.iscoroutinefunction(tool.handler):
+                result = await tool.handler(**arguments)
+            else:
+                result = tool.handler(**arguments)
             return [TextContent(text=str(result), type="text")]
         except Exception as e:
+            verbose_logger.exception(f"Error executing local tool {name}: {str(e)}")
             return [TextContent(text=f"Error: {str(e)}", type="text")]
 
     def _get_mcp_servers_in_path(path: str) -> Optional[List[str]]:
diff --git a/litellm/proxy/_experimental/mcp_server/tool_registry.py b/litellm/proxy/_experimental/mcp_server/tool_registry.py
index c08b797968..bc69095fc4 100644
--- a/litellm/proxy/_experimental/mcp_server/tool_registry.py
+++ b/litellm/proxy/_experimental/mcp_server/tool_registry.py
@@ -1,6 +1,8 @@
 import json
 from typing import Any, Callable, Dict, List, Optional
 
+from mcp.types import Tool as MCPToolSDKTool
+
 from litellm._logging import verbose_logger
 from litellm.proxy.types_utils.utils import get_instance_fn
 from litellm.types.mcp_server.tool_registry import MCPTool
@@ -39,12 +41,30 @@ class MCPToolRegistry:
         """
         return self.tools.get(name)
 
-    def list_tools(self) -> List[MCPTool]:
+    def list_tools(self, tool_prefix: Optional[str] = None) -> List[MCPTool]:
         """
         List all registered tools
         """
+        if tool_prefix:
+            return [
+                tool
+                for tool in self.tools.values()
+                if tool.name.startswith(tool_prefix)
+            ]
         return list(self.tools.values())
 
+    def convert_tools_to_mcp_sdk_tool_type(
+        self, tools: List[MCPTool]
+    ) -> List[MCPToolSDKTool]:
+        return [
+            MCPToolSDKTool(
+                name=tool.name,
+                description=tool.description,
+                inputSchema=tool.input_schema,
+            )
+            for tool in tools
+        ]
+
     def load_tools_from_config(
         self, mcp_tools_config: Optional[Dict[str, Any]] = None
     ) -> None:
diff --git a/litellm/proxy/_new_secret_config.yaml b/litellm/proxy/_new_secret_config.yaml
index b62a6258db..462d329420 100644
--- a/litellm/proxy/_new_secret_config.yaml
+++ b/litellm/proxy/_new_secret_config.yaml
@@ -18,11 +18,9 @@ model_list:
 
 mcp_servers:
   my_api_mcp:
-    url: "http://0.0.0.0:8000"
-    spec_path: "/Users/krrishdholakia/Documents/temp_py_folder/openapi.json"
+    url: "http://0.0.0.0:8090"
+    spec_path: "/Users/krrishdholakia/Documents/temp_py_folder/example_openapi.json"
     auth_type: none
-    allowed_tools: ["get_users", "create_user"]
-    access_groups: ["dev_group", "api_team"]
 
 
 litellm_settings:
diff --git a/litellm/types/mcp_server/mcp_server_manager.py b/litellm/types/mcp_server/mcp_server_manager.py
index 73088329a6..254c5355c6 100644
--- a/litellm/types/mcp_server/mcp_server_manager.py
+++ b/litellm/types/mcp_server/mcp_server_manager.py
@@ -18,6 +18,7 @@ class MCPServer(BaseModel):
     url: Optional[str] = None
     spec_path: Optional[str] = None
     transport: MCPTransportType
+    spec_path: Optional[str] = None
     auth_type: Optional[MCPAuthType] = None
     authentication_token: Optional[str] = None
     mcp_info: Optional[MCPInfo] = None

From 28698933fc4346a92824b69d6652330a17ea04a1 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Wed, 8 Oct 2025 15:59:42 -0700
Subject: [PATCH 26/42] feat(mcp_server_manager.py): ensure list tools for
 openapi servers works as expected

---
 .../mcp_server/mcp_server_manager.py          |  7 --
 .../proxy/_experimental/mcp_server/server.py  | 34 ++------
 litellm/proxy/_new_secret_config.yaml         |  1 +
 .../types/mcp_server/mcp_server_manager.py    |  1 -
 .../mcp_server/test_mcp_server.py             | 79 ++++++++++++++++++-
 5 files changed, 84 insertions(+), 38 deletions(-)

diff --git a/litellm/proxy/_experimental/mcp_server/mcp_server_manager.py b/litellm/proxy/_experimental/mcp_server/mcp_server_manager.py
index f7cd7a0a02..334e984ba9 100644
--- a/litellm/proxy/_experimental/mcp_server/mcp_server_manager.py
+++ b/litellm/proxy/_experimental/mcp_server/mcp_server_manager.py
@@ -324,13 +324,6 @@ class MCPServerManager:
                     )
                     base_tool_name = operation_id.replace(" ", "_").lower()
 
-                    # Check if tool is allowed for this server
-                    if not self.check_allowed_or_banned_tools(base_tool_name, server):
-                        verbose_logger.debug(
-                            f"Skipping tool {base_tool_name} - not in allowed_tools for server {server.name}"
-                        )
-                        continue
-
                     # Add server prefix to tool name
                     prefixed_tool_name = add_server_prefix_to_tool_name(
                         base_tool_name, server_prefix
diff --git a/litellm/proxy/_experimental/mcp_server/server.py b/litellm/proxy/_experimental/mcp_server/server.py
index f38e44e99d..37157b4e0a 100644
--- a/litellm/proxy/_experimental/mcp_server/server.py
+++ b/litellm/proxy/_experimental/mcp_server/server.py
@@ -501,13 +501,13 @@ if MCP_AVAILABLE:
                 )
 
                 filtered_tools = filter_tools_by_allowed_tools(tools, server)
-                
+
                 filtered_tools = await filter_tools_by_key_team_permissions(
                     tools=filtered_tools,
                     server_id=server_id,
                     user_api_key_auth=user_api_key_auth,
                 )
-                
+
                 all_tools.extend(filtered_tools)
 
                 verbose_logger.debug(
@@ -522,6 +522,7 @@ if MCP_AVAILABLE:
         verbose_logger.info(
             f"Successfully fetched {len(all_tools)} tools total from all MCP servers"
         )
+
         return all_tools
 
     async def filter_tools_by_key_team_permissions(
@@ -531,7 +532,7 @@ if MCP_AVAILABLE:
     ) -> List[MCPTool]:
         """
         Filter tools based on key/team mcp_tool_permissions.
-        
+
         Note: Tool names in the DB are stored without server prefixes,
         but tool names from MCP servers are prefixed. We need to strip
         the prefix before comparing.
@@ -553,7 +554,7 @@ if MCP_AVAILABLE:
         else:
             # No restrictions, return all tools
             filtered_tools = tools
-        
+
         return filtered_tools
 
     async def _list_mcp_tools(
@@ -598,30 +599,7 @@ if MCP_AVAILABLE:
             )
             # Continue with empty managed tools list instead of failing completely
 
-        # Get tools from local registry
-        local_tools = []
-        try:
-            local_tools_raw = global_mcp_tool_registry.list_tools()
-
-            # Convert local tools to MCPTool format
-            for tool in local_tools_raw:
-                # Convert from litellm.types.mcp_server.tool_registry.MCPTool to mcp.types.Tool
-                mcp_tool = MCPTool(
-                    name=tool.name,
-                    description=tool.description,
-                    inputSchema=tool.input_schema,
-                )
-                local_tools.append(mcp_tool)
-        except Exception as e:
-            verbose_logger.exception(
-                f"Error getting tools from local registry: {str(e)}"
-            )
-            # Continue with empty local tools list instead of failing completely
-
-        # Combine all tools
-        all_tools = managed_tools + local_tools
-
-        return all_tools
+        return managed_tools
 
     @client
     async def call_mcp_tool(
diff --git a/litellm/proxy/_new_secret_config.yaml b/litellm/proxy/_new_secret_config.yaml
index 462d329420..95c6869b95 100644
--- a/litellm/proxy/_new_secret_config.yaml
+++ b/litellm/proxy/_new_secret_config.yaml
@@ -21,6 +21,7 @@ mcp_servers:
     url: "http://0.0.0.0:8090"
     spec_path: "/Users/krrishdholakia/Documents/temp_py_folder/example_openapi.json"
     auth_type: none
+    allowed_tools: ["getpetbyid", "my_api_mcp-findpetsbystatus"]
 
 
 litellm_settings:
diff --git a/litellm/types/mcp_server/mcp_server_manager.py b/litellm/types/mcp_server/mcp_server_manager.py
index 254c5355c6..a247dc3f61 100644
--- a/litellm/types/mcp_server/mcp_server_manager.py
+++ b/litellm/types/mcp_server/mcp_server_manager.py
@@ -16,7 +16,6 @@ class MCPServer(BaseModel):
     alias: Optional[str] = None
     server_name: Optional[str] = None
     url: Optional[str] = None
-    spec_path: Optional[str] = None
     transport: MCPTransportType
     spec_path: Optional[str] = None
     auth_type: Optional[MCPAuthType] = None
diff --git a/tests/test_litellm/proxy/_experimental/mcp_server/test_mcp_server.py b/tests/test_litellm/proxy/_experimental/mcp_server/test_mcp_server.py
index 66871aefc1..769785b921 100644
--- a/tests/test_litellm/proxy/_experimental/mcp_server/test_mcp_server.py
+++ b/tests/test_litellm/proxy/_experimental/mcp_server/test_mcp_server.py
@@ -1001,7 +1001,7 @@ async def test_list_tools_with_no_tool_permissions_shows_all():
 async def test_list_tools_strips_prefix_when_matching_permissions():
     """
     Test that tool permission filtering correctly strips prefixes from tool names.
-    
+
     Tools from MCP servers are prefixed (e.g., "GITMCP-fetch_litellm_documentation"),
     but allowed tools in DB are stored without prefix (e.g., "fetch_litellm_documentation").
     The filtering should strip the prefix before comparing.
@@ -1056,7 +1056,9 @@ async def test_list_tools_strips_prefix_when_matching_permissions():
         tool1.inputSchema = {}
 
         tool2 = MagicMock()
-        tool2.name = "GITMCP-search_litellm_documentation"  # Prefixed, not in allowed list
+        tool2.name = (
+            "GITMCP-search_litellm_documentation"  # Prefixed, not in allowed list
+        )
         tool2.description = "Search docs"
         tool2.inputSchema = {}
 
@@ -1093,3 +1095,76 @@ async def test_list_tools_strips_prefix_when_matching_permissions():
         "GITMCP-fetch_litellm_documentation",
         "GITMCP-search_litellm_code",
     ]
+
+
+def test_filter_tools_by_allowed_tools():
+    """Test that filter_tools_by_allowed_tools filters tools correctly"""
+    from mcp.types import Tool
+
+    from litellm.proxy._experimental.mcp_server.server import (
+        filter_tools_by_allowed_tools,
+    )
+    from litellm.types.mcp import MCPTransport
+    from litellm.types.mcp_server.mcp_server_manager import MCPServer
+
+    mcp_server = MCPServer(
+        server_id="my_api_mcp",
+        name="my_api_mcp",
+        alias="my_api_mcp",
+        transport=MCPTransport.http,
+        allowed_tools=["getpetbyid", "my_api_mcp-findpetsbystatus"],
+        disallowed_tools=None,
+    )
+    tools_to_return = [
+        Tool(
+            name="my_api_mcp-getpetbyid",
+            title=None,
+            description="Find pet by ID",
+            inputSchema={
+                "type": "object",
+                "properties": {"petId": {"type": "integer", "description": ""}},
+                "required": ["petId"],
+            },
+            outputSchema=None,
+            annotations=None,
+        ),
+        Tool(
+            name="my_api_mcp-findpetsbystatus",
+            title=None,
+            description="Finds Pets by status",
+            inputSchema={
+                "type": "object",
+                "properties": {"status": {"type": "string", "description": ""}},
+                "required": ["status"],
+            },
+            outputSchema=None,
+            annotations=None,
+        ),
+        Tool(
+            name="my_api_mcp-addpet",
+            title=None,
+            description="Add a new pet to the store",
+            inputSchema={
+                "type": "object",
+                "properties": {
+                    "body": {
+                        "type": "object",
+                        "description": "Request body",
+                        "properties": {
+                            "name": {"type": "string"},
+                            "status": {"type": "string"},
+                        },
+                    }
+                },
+                "required": ["body"],
+            },
+            outputSchema=None,
+            annotations=None,
+        ),
+    ]
+
+    filtered_tools = filter_tools_by_allowed_tools(tools_to_return, mcp_server)
+
+    assert len(filtered_tools) == 2
+    assert filtered_tools[0].name == "my_api_mcp-getpetbyid"
+    assert filtered_tools[1].name == "my_api_mcp-findpetsbystatus"

From cd13e533a2e26182a4dd1268e3790afd29aa434c Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Wed, 8 Oct 2025 16:06:17 -0700
Subject: [PATCH 27/42] feat(mcp_server_manager.py): expand allowed/disallowed
 list

---
 .../mcp_server/mcp_server_manager.py          | 10 ++-
 .../mcp_server/test_mcp_server_manager.py     | 72 +++++++++++++++++++
 2 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/litellm/proxy/_experimental/mcp_server/mcp_server_manager.py b/litellm/proxy/_experimental/mcp_server/mcp_server_manager.py
index 334e984ba9..3c27a65f06 100644
--- a/litellm/proxy/_experimental/mcp_server/mcp_server_manager.py
+++ b/litellm/proxy/_experimental/mcp_server/mcp_server_manager.py
@@ -760,9 +760,15 @@ class MCPServerManager:
         Check if the tool is allowed or banned for the given server
         """
         if server.allowed_tools:
-            return tool_name in server.allowed_tools
+            return (
+                tool_name in server.allowed_tools
+                or f"{server.name}-{tool_name}" in server.allowed_tools
+            )
         if server.disallowed_tools:
-            return tool_name not in server.disallowed_tools
+            return (
+                tool_name not in server.disallowed_tools
+                and f"{server.name}-{tool_name}" not in server.disallowed_tools
+            )
         return True
 
     async def check_tool_permission_for_key_team(
diff --git a/tests/test_litellm/proxy/_experimental/mcp_server/test_mcp_server_manager.py b/tests/test_litellm/proxy/_experimental/mcp_server/test_mcp_server_manager.py
index 1bf5c0abb8..0476f290a0 100644
--- a/tests/test_litellm/proxy/_experimental/mcp_server/test_mcp_server_manager.py
+++ b/tests/test_litellm/proxy/_experimental/mcp_server/test_mcp_server_manager.py
@@ -1150,6 +1150,78 @@ class TestMCPServerManager:
             user_api_key_auth=user_auth,
         )
 
+    @pytest.mark.asyncio
+    async def test_allowed_tools_with_mixed_prefixed_and_unprefixed_names(self):
+        """
+        Test that allowed_tools works with both unprefixed and prefixed tool names.
+        This tests the scenario where allowed_tools = ["getpetbyid", "my_api_mcp-findpetsbystatus"]
+        Both getpetbyid (unprefixed) and findpetsbystatus (called unprefixed but allowed via prefix) should work.
+        """
+        manager = MCPServerManager()
+
+        # Create server with mixed prefixed/unprefixed allowed_tools
+        server = MCPServer(
+            server_id="my_api_mcp",
+            name="my_api_mcp",
+            transport=MCPTransport.stdio,
+            allowed_tools=["getpetbyid", "my_api_mcp-findpetsbystatus"],
+            disallowed_tools=None,
+        )
+
+        # Mock dependencies - set object_permission and object_permission_id to None
+        # so permission checks return None (no restrictions)
+        user_api_key_auth = MagicMock()
+        user_api_key_auth.object_permission = None
+        user_api_key_auth.object_permission_id = None
+        proxy_logging_obj = MagicMock()
+
+        # Mock the async methods that pre_call_tool_check calls
+        proxy_logging_obj._create_mcp_request_object_from_kwargs = MagicMock(
+            return_value={}
+        )
+        proxy_logging_obj._convert_mcp_to_llm_format = MagicMock(return_value={})
+        proxy_logging_obj.pre_call_hook = AsyncMock(return_value={})
+
+        # Test 1: Call getpetbyid (unprefixed in allowed_tools) - should succeed
+        await manager.pre_call_tool_check(
+            name="getpetbyid",
+            arguments={"petId": "1"},
+            server_name_from_prefix="my_api_mcp",
+            user_api_key_auth=user_api_key_auth,
+            proxy_logging_obj=proxy_logging_obj,
+            server=server,
+        )
+
+        # Test 2: Call findpetsbystatus (prefixed in allowed_tools as "my_api_mcp-findpetsbystatus") - should succeed
+        await manager.pre_call_tool_check(
+            name="findpetsbystatus",
+            arguments={"status": "available"},
+            server_name_from_prefix="my_api_mcp",
+            user_api_key_auth=user_api_key_auth,
+            proxy_logging_obj=proxy_logging_obj,
+            server=server,
+        )
+
+        # Test 3: Call a tool that's not in allowed_tools - should fail
+        with pytest.raises(HTTPException) as exc_info:
+            await manager.pre_call_tool_check(
+                name="deletepet",
+                arguments={"petId": "1"},
+                server_name_from_prefix="my_api_mcp",
+                user_api_key_auth=user_api_key_auth,
+                proxy_logging_obj=proxy_logging_obj,
+                server=server,
+            )
+
+        assert exc_info.value.status_code == 403
+        assert (
+            "Tool deletepet is not allowed for server my_api_mcp"
+            in exc_info.value.detail["error"]
+        )
+        assert (
+            "Contact proxy admin to allow this tool" in exc_info.value.detail["error"]
+        )
+
 
 if __name__ == "__main__":
     pytest.main([__file__])

From e4317030bf6f8ab799803ff496c07c37875f2e88 Mon Sep 17 00:00:00 2001
From: Sandesh Ghanta <sghanta05@gmail.com>
Date: Wed, 8 Oct 2025 16:44:40 -0700
Subject: [PATCH 28/42] Add gpt-5-pro-2025-10-06 to model costs

---
 model_prices_and_context_window.json | 33 ++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/model_prices_and_context_window.json b/model_prices_and_context_window.json
index 29a6588774..06cb67e56c 100644
--- a/model_prices_and_context_window.json
+++ b/model_prices_and_context_window.json
@@ -12975,6 +12975,39 @@
         "supports_vision": true,
         "supports_web_search": true
     },
+    "gpt-5-pro-2025-10-06": {
+        "input_cost_per_token": 1.5e-05,
+        "input_cost_per_token_batches": 7.5e-06,
+        "litellm_provider": "openai",
+        "max_input_tokens": 400000,
+        "max_output_tokens": 272000,
+        "max_tokens": 272000,
+        "mode": "responses",
+        "output_cost_per_token": 1.2e-04,
+        "output_cost_per_token_batches": 6e-05,
+        "supported_endpoints": [
+            "/v1/batch",
+            "/v1/responses"
+        ],
+        "supported_modalities": [
+            "text",
+            "image"
+        ],
+        "supported_output_modalities": [
+            "text"
+        ],
+        "supports_function_calling": true,
+        "supports_native_streaming": false,
+        "supports_parallel_function_calling": true,
+        "supports_pdf_input": true,
+        "supports_prompt_caching": true,
+        "supports_reasoning": true,
+        "supports_response_schema": true,
+        "supports_system_messages": true,
+        "supports_tool_choice": true,
+        "supports_vision": true,
+        "supports_web_search": true
+    },
     "gpt-5-codex": {
         "cache_read_input_token_cost": 1.25e-07,
         "input_cost_per_token": 1.25e-06,

From 861750790be55fa50df2592d82b7af4e87375e5c Mon Sep 17 00:00:00 2001
From: Pierre-Emmanuel MERCIER <77622864+btpemercier@users.noreply.github.com>
Date: Fri, 5 Sep 2025 19:35:11 +0200
Subject: [PATCH 29/42] feat: add redis ssl and username support (#11319)

---
 docs/my-website/docs/proxy/caching.md |   2 +
 litellm/_redis.py                     |  19 +++--
 tests/test_litellm/test_redis.py      | 109 ++++++++++++++++++++++++++
 3 files changed, 124 insertions(+), 6 deletions(-)
 create mode 100644 tests/test_litellm/test_redis.py

diff --git a/docs/my-website/docs/proxy/caching.md b/docs/my-website/docs/proxy/caching.md
index 617609cf08..9cfd796d90 100644
--- a/docs/my-website/docs/proxy/caching.md
+++ b/docs/my-website/docs/proxy/caching.md
@@ -278,6 +278,8 @@ Set either `REDIS_URL` or the `REDIS_HOST` in your os environment, to enable cac
   REDIS_HOST = ""       # REDIS_HOST='redis-18841.c274.us-east-1-3.ec2.cloud.redislabs.com'
   REDIS_PORT = ""       # REDIS_PORT='18841'
   REDIS_PASSWORD = ""   # REDIS_PASSWORD='liteLlmIsAmazing'
+  REDIS_USERNAME = ""   # REDIS_USERNAME='my-redis-username' [OPTIONAL] if your redis server requires a username
+  REDIS_SSL = "True"    # REDIS_SSL='True' to enable SSL by default is False
   ```
 
 **Additional kwargs**  
diff --git a/litellm/_redis.py b/litellm/_redis.py
index bcb305985f..e6ac323ff5 100644
--- a/litellm/_redis.py
+++ b/litellm/_redis.py
@@ -177,14 +177,21 @@ def get_redis_url_from_environment():
         raise ValueError(
             "Either 'REDIS_URL' or both 'REDIS_HOST' and 'REDIS_PORT' must be specified for Redis."
         )
-
-    if "REDIS_PASSWORD" in os.environ:
-        redis_password = f":{os.environ['REDIS_PASSWORD']}@"
+    
+    if "REDIS_SSL" in os.environ and os.environ["REDIS_SSL"].lower() == "true":
+        redis_protocol = "rediss"
     else:
-        redis_password = ""
-
+        redis_protocol = "redis"
+    
+    # Build authentication part of URL
+    auth_part = ""
+    if "REDIS_USERNAME" in os.environ and "REDIS_PASSWORD" in os.environ:
+        auth_part = f"{os.environ['REDIS_USERNAME']}:{os.environ['REDIS_PASSWORD']}@"
+    elif "REDIS_PASSWORD" in os.environ:
+        auth_part = f"{os.environ['REDIS_PASSWORD']}@"
+    
     return (
-        f"redis://{redis_password}{os.environ['REDIS_HOST']}:{os.environ['REDIS_PORT']}"
+        f"{redis_protocol}://{auth_part}{os.environ['REDIS_HOST']}:{os.environ['REDIS_PORT']}"
     )
 
 
diff --git a/tests/test_litellm/test_redis.py b/tests/test_litellm/test_redis.py
new file mode 100644
index 0000000000..991126c2fe
--- /dev/null
+++ b/tests/test_litellm/test_redis.py
@@ -0,0 +1,109 @@
+from litellm._redis import get_redis_url_from_environment
+import os
+import pytest
+
+def test_get_redis_url_from_environment_single_url(monkeypatch):
+    """Test when REDIS_URL is directly provided"""
+    # Set the environment variable
+    monkeypatch.setenv("REDIS_URL", "redis://redis-server:6379/0")
+
+    # Call the function to get the Redis URL
+    redis_url = get_redis_url_from_environment()
+
+    # Assert that the returned URL matches the expected value
+    assert redis_url == "redis://redis-server:6379/0"
+
+def test_get_redis_url_from_environment_host_port(monkeypatch):
+    """Test when REDIS_HOST and REDIS_PORT are provided"""
+    # Set the environment variables
+    monkeypatch.setenv("REDIS_HOST", "redis-server")
+    monkeypatch.setenv("REDIS_PORT", "6379")
+
+    # Call the function to get the Redis URL
+    redis_url = get_redis_url_from_environment()
+
+    # Assert that the returned URL matches the expected value
+    assert redis_url == "redis://redis-server:6379"
+
+def test_get_redis_url_from_environment_with_ssl(monkeypatch):
+    """Test when SSL is enabled"""
+    # Set the environment variables
+    monkeypatch.setenv("REDIS_HOST", "redis-server")
+    monkeypatch.setenv("REDIS_PORT", "6379")
+    monkeypatch.setenv("REDIS_SSL", "true")
+
+    # Call the function to get the Redis URL
+    redis_url = get_redis_url_from_environment()
+
+    # Assert that the returned URL uses rediss:// protocol
+    assert redis_url == "rediss://redis-server:6379"
+
+def test_get_redis_url_from_environment_with_username_password(monkeypatch):
+    """Test when username and password are provided"""
+    # Set the environment variables
+    monkeypatch.setenv("REDIS_HOST", "redis-server")
+    monkeypatch.setenv("REDIS_PORT", "6379")
+    monkeypatch.setenv("REDIS_USERNAME", "user")
+    monkeypatch.setenv("REDIS_PASSWORD", "password")
+
+    # Call the function to get the Redis URL
+    redis_url = get_redis_url_from_environment()
+
+    # Assert that the returned URL includes username:password@
+    assert redis_url == "redis://user:password@redis-server:6379"
+
+def test_get_redis_url_from_environment_with_password_only(monkeypatch):
+    """Test when only password is provided"""
+    # Set the environment variables
+    monkeypatch.setenv("REDIS_HOST", "redis-server")
+    monkeypatch.setenv("REDIS_PORT", "6379")
+    monkeypatch.setenv("REDIS_PASSWORD", "password")
+
+    # Call the function to get the Redis URL
+    redis_url = get_redis_url_from_environment()
+
+    # Assert that the returned URL includes :password@
+    assert redis_url == "redis://password@redis-server:6379"
+
+def test_get_redis_url_from_environment_with_all_options(monkeypatch):
+    """Test when all options are provided"""
+    # Set the environment variables
+    monkeypatch.setenv("REDIS_HOST", "redis-server")
+    monkeypatch.setenv("REDIS_PORT", "6379")
+    monkeypatch.setenv("REDIS_USERNAME", "user")
+    monkeypatch.setenv("REDIS_PASSWORD", "password")
+    monkeypatch.setenv("REDIS_SSL", "true")
+
+    # Call the function to get the Redis URL
+    redis_url = get_redis_url_from_environment()
+
+    # Assert that the returned URL includes all components
+    assert redis_url == "rediss://user:password@redis-server:6379"
+
+def test_get_redis_url_from_environment_missing_host_port(monkeypatch):
+    """Test error when required variables are missing"""
+    # Make sure these environment variables don't exist
+    monkeypatch.delenv("REDIS_URL", raising=False)
+    monkeypatch.delenv("REDIS_HOST", raising=False)
+    monkeypatch.delenv("REDIS_PORT", raising=False)
+
+    # Call the function and expect a ValueError
+    with pytest.raises(ValueError) as excinfo:
+        get_redis_url_from_environment()
+    
+    # Check the error message
+    assert "Either 'REDIS_URL' or both 'REDIS_HOST' and 'REDIS_PORT' must be specified" in str(excinfo.value)
+
+def test_get_redis_url_from_environment_missing_port(monkeypatch):
+    """Test error when only REDIS_HOST is provided but REDIS_PORT is missing"""
+    # Make sure REDIS_URL doesn't exist and set only REDIS_HOST
+    monkeypatch.delenv("REDIS_URL", raising=False)
+    monkeypatch.delenv("REDIS_PORT", raising=False)
+    monkeypatch.setenv("REDIS_HOST", "redis-server")
+
+    # Call the function and expect a ValueError
+    with pytest.raises(ValueError) as excinfo:
+        get_redis_url_from_environment()
+    
+    # Check the error message
+    assert "Either 'REDIS_URL' or both 'REDIS_HOST' and 'REDIS_PORT' must be specified" in str(excinfo.value)

From 2b0df22dc549f8c394ea7864285569122e302b75 Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Wed, 8 Oct 2025 17:07:46 -0700
Subject: [PATCH 30/42] next routing, feature flagged via sidebar

---
 .../app/(dashboard)/api-reference/page.tsx    |  17 +
 .../app/(dashboard)/components/Sidebar2.tsx   | 319 +++++----
 .../components/SidebarProvider.tsx            |  29 +
 .../components/modals/CreateUserModal.tsx     |   2 +-
 .../experimental/api-playground/page.tsx      |  12 +
 .../(dashboard)/experimental/budgets/page.tsx |  12 +
 .../(dashboard)/experimental/caching/page.tsx |  20 +
 .../experimental/old-usage/page.tsx           |  23 +
 .../(dashboard)/experimental/prompts/page.tsx |  12 +
 .../experimental/tag-management/page.tsx      |  12 +
 .../src/app/(dashboard)/guardrails/page.tsx   |  12 +
 .../app/(dashboard)/hooks/useAuthorized.ts    |   5 +-
 .../src/app/(dashboard)/logs/page.tsx         |  28 +
 .../src/app/(dashboard)/model-hub/page.tsx    |  12 +
 .../(dashboard)/models-and-endpoints/page.tsx |  29 +
 .../app/(dashboard)/organizations/page.tsx    |  34 +
 .../settings/admin-settings/page.tsx          |  29 +
 .../settings/logging-and-alerts/page.tsx      |  12 +
 .../settings/router-settings/page.tsx         |  12 +
 .../(dashboard)/settings/ui-theme/page.tsx    |  12 +
 .../src/app/(dashboard)/teams/page.tsx        |  35 +
 .../src/app/(dashboard)/test-key/page.tsx     |  20 +
 .../(dashboard)/tools/mcp-servers/page.tsx    |  19 +
 .../(dashboard)/tools/vector-stores/page.tsx  |  12 +
 .../src/app/(dashboard)/usage/page.tsx        |  22 +
 .../src/app/(dashboard)/users/page.tsx        |  31 +
 .../VirtualKeysTable/VirtualKeysTable.tsx     |   2 +-
 .../virtual-keys/hooks/useTeams.tsx           |   4 +-
 ui/litellm-dashboard/src/app/page.tsx         | 619 ++++++++++--------
 29 files changed, 1010 insertions(+), 397 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/api-reference/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/components/SidebarProvider.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/experimental/api-playground/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/experimental/budgets/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/experimental/caching/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/experimental/old-usage/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/experimental/prompts/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/experimental/tag-management/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/guardrails/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/logs/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/model-hub/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/organizations/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/settings/admin-settings/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/settings/logging-and-alerts/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/settings/router-settings/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/settings/ui-theme/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/teams/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/test-key/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/tools/mcp-servers/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/tools/vector-stores/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/usage/page.tsx
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/users/page.tsx

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/api-reference/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/api-reference/page.tsx
new file mode 100644
index 0000000000..265a6d8195
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/api-reference/page.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import APIRef from "@/components/api_ref";
+import { useState } from "react";
+
+interface ProxySettings {
+  PROXY_BASE_URL: string;
+  PROXY_LOGOUT_URL: string;
+}
+
+const APIReferencePage = () => {
+  const [proxySettings, setProxySettings] = useState<ProxySettings>({ PROXY_BASE_URL: "", PROXY_LOGOUT_URL: "" });
+
+  return <APIRef proxySettings={proxySettings} />;
+};
+
+export default APIReferencePage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx b/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx
index 2ebfbc5d4f..96bb9b5a4b 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx
@@ -1,5 +1,6 @@
-import { Layout, Menu } from "antd";
-import { usePathname } from "next/navigation";
+"use client";
+
+import { Layout, Menu, ConfigProvider } from "antd";
 import {
   KeyOutlined,
   PlayCircleOutlined,
@@ -18,126 +19,191 @@ import {
   ExperimentOutlined,
   ToolOutlined,
   TagsOutlined,
-  BgColorsOutlined,
 } from "@ant-design/icons";
-import { ConfigProvider } from "antd";
-import useFeatureFlags from "@/hooks/useFeatureFlags";
+// import {
+//   all_admin_roles,
+//   rolesWithWriteAccess,
+//   internalUserRoles,
+//   isAdminRole,
+// } from "../utils/roles";
+// import UsageIndicator from "./usage_indicator";
+import * as React from "react";
+import { useRouter, usePathname } from "next/navigation";
 import { all_admin_roles, internalUserRoles, isAdminRole, rolesWithWriteAccess } from "@/utils/roles";
 import UsageIndicator from "@/components/usage_indicator";
-import React from "react";
+
 const { Sider } = Layout;
 
+// -------- Types --------
 interface SidebarProps {
   accessToken: string | null;
-  setPage: (page: string) => void;
   userRole: string;
+  /** Fallback selection id (legacy), used if path can't be matched */
   defaultSelectedKey: string;
   collapsed?: boolean;
 }
 
-interface MenuItem {
+interface MenuItemCfg {
   key: string;
-  page: string;
+  page: string; // legacy id; we map this to a path below
   label: string;
   roles?: string[];
-  children?: MenuItem[];
+  children?: MenuItemCfg[];
   icon?: React.ReactNode;
 }
 
-/** ---- BASE URL HELPERS ---- */
-function normalizeBasePrefix(raw: string | undefined | null): string {
-  const trimmed = (raw ?? "").trim();
-  if (!trimmed) return ""; // no base
-  const core = trimmed.replace(/^\/+/, "").replace(/\/+$/, "");
-  return core ? `/${core}` : "";
-}
-const BASE_PREFIX = normalizeBasePrefix(process.env.NEXT_PUBLIC_BASE_URL);
+/** ---------- Base URL helpers ---------- */
+/**
+ * Normalizes NEXT_PUBLIC_BASE_URL to either "/" or "/ui/" (always with a trailing slash).
+ * Supported env values: "" or "ui/".
+ */
+const getBasePath = () => {
+  const raw = process.env.NEXT_PUBLIC_BASE_URL ?? "";
+  const trimmed = raw.replace(/^\/+|\/+$/g, ""); // strip leading/trailing slashes
+  return trimmed ? `/${trimmed}/` : "/"; // ensure trailing slash
+};
 
-/** Build an absolute path under the configured base. */
-function withBase(path: string): string {
-  // path can be "/virtual-keys" or "/?page=..."
-  const p = path.startsWith("/") ? path : `/${path}`;
-  return `${BASE_PREFIX}${p}` || p;
-}
+/** Map legacy `page` ids to real app routes (relative, no leading slash). */
+const routeFor = (slug: string): string => {
+  switch (slug) {
+    // top level
+    case "api-keys":
+      return "virtual-keys";
+    case "llm-playground":
+      return "test-key";
+    case "models":
+      return "models-and-endpoints";
+    case "new_usage":
+      return "usage";
+    case "teams":
+      return "teams";
+    case "organizations":
+      return "organizations";
+    case "users":
+      return "users";
+    case "api_ref":
+      return "api-reference";
+    case "model-hub-table":
+      // If you intend the newer in-dashboard page, use "model-hub".
+      return "model-hub";
+    case "logs":
+      return "logs";
+    case "guardrails":
+      return "guardrails";
 
-/** History-based navigation to prevent hard reloads / suspense flashes */
-function softNavigate(url: string, replace = false) {
-  if (typeof window === "undefined") return;
-  if (replace) window.history.replaceState(null, "", url);
-  else window.history.pushState(null, "", url);
-}
-/** -------------------------------- */
+    // tools
+    case "mcp-servers":
+      return "tools/mcp-servers";
+    case "vector-stores":
+      return "tools/vector-stores";
 
-const Sidebar2: React.FC<SidebarProps> = ({
-  accessToken,
-  setPage,
-  userRole,
-  defaultSelectedKey,
-  collapsed = false,
-}) => {
-  const pathname = usePathname();
-  const { refactoredUIFlag } = useFeatureFlags();
+    // experimental
+    case "caching":
+      return "experimental/caching";
+    case "prompts":
+      return "experimental/prompts";
+    case "budgets":
+      return "experimental/budgets";
+    case "transform-request":
+      return "experimental/api-playground";
+    case "tag-management":
+      return "experimental/tag-management";
+    case "usage": // "Old Usage"
+      return "experimental/old-usage";
 
-  const menuItems: MenuItem[] = [
-    { key: "1", page: "api-keys", label: "Virtual Keys", icon: <KeyOutlined style={{ fontSize: "18px" }} /> },
+    // settings
+    case "general-settings":
+      return "settings/router-settings";
+    case "settings": // "Logging & Alerts"
+      return "settings/logging-and-alerts";
+    case "admin-panel":
+      return "settings/admin-settings";
+    case "ui-theme":
+      return "settings/ui-theme";
+
+    default:
+      // treat as already a relative path
+      return slug.replace(/^\/+/, "");
+  }
+};
+
+/** Prefix base path ("/" or "/ui/") */
+const toHref = (slugOrPath: string) => {
+  const base = getBasePath(); // "/" or "/ui/"
+  const rel = routeFor(slugOrPath).replace(/^\/+|\/+$/g, "");
+  return `${base}${rel}`;
+};
+
+const Sidebar2: React.FC<SidebarProps> = ({ accessToken, userRole, defaultSelectedKey, collapsed = false }) => {
+  const router = useRouter();
+  const pathname = usePathname() || "/";
+
+  // ----- Menu config (unchanged labels/icons; same appearance) -----
+  const menuItems: MenuItemCfg[] = [
+    { key: "1", page: "api-keys", label: "Virtual Keys", icon: <KeyOutlined style={{ fontSize: 18 }} /> },
     {
       key: "3",
       page: "llm-playground",
       label: "Test Key",
-      icon: <PlayCircleOutlined style={{ fontSize: "18px" }} />,
+      icon: <PlayCircleOutlined style={{ fontSize: 18 }} />,
       roles: rolesWithWriteAccess,
     },
     {
       key: "2",
       page: "models",
       label: "Models + Endpoints",
-      icon: <BlockOutlined style={{ fontSize: "18px" }} />,
+      icon: <BlockOutlined style={{ fontSize: 18 }} />,
       roles: rolesWithWriteAccess,
     },
     {
       key: "12",
       page: "new_usage",
       label: "Usage",
-      icon: <BarChartOutlined style={{ fontSize: "18px" }} />,
+      icon: <BarChartOutlined style={{ fontSize: 18 }} />,
       roles: [...all_admin_roles, ...internalUserRoles],
     },
-    { key: "6", page: "teams", label: "Teams", icon: <TeamOutlined style={{ fontSize: "18px" }} /> },
+    { key: "6", page: "teams", label: "Teams", icon: <TeamOutlined style={{ fontSize: 18 }} /> },
     {
       key: "17",
       page: "organizations",
       label: "Organizations",
-      icon: <BankOutlined style={{ fontSize: "18px" }} />,
+      icon: <BankOutlined style={{ fontSize: 18 }} />,
       roles: all_admin_roles,
     },
     {
       key: "5",
       page: "users",
       label: "Internal Users",
-      icon: <UserOutlined style={{ fontSize: "18px" }} />,
+      icon: <UserOutlined style={{ fontSize: 18 }} />,
       roles: all_admin_roles,
     },
-    { key: "14", page: "api_ref", label: "API Reference", icon: <ApiOutlined style={{ fontSize: "18px" }} /> },
-    { key: "16", page: "model-hub-table", label: "Model Hub", icon: <AppstoreOutlined style={{ fontSize: "18px" }} /> },
-    { key: "15", page: "logs", label: "Logs", icon: <LineChartOutlined style={{ fontSize: "18px" }} /> },
+    { key: "14", page: "api_ref", label: "API Reference", icon: <ApiOutlined style={{ fontSize: 18 }} /> },
+    {
+      key: "16",
+      page: "model-hub-table",
+      label: "Model Hub",
+      icon: <AppstoreOutlined style={{ fontSize: 18 }} />,
+    },
+    { key: "15", page: "logs", label: "Logs", icon: <LineChartOutlined style={{ fontSize: 18 }} /> },
     {
       key: "11",
       page: "guardrails",
       label: "Guardrails",
-      icon: <SafetyOutlined style={{ fontSize: "18px" }} />,
+      icon: <SafetyOutlined style={{ fontSize: 18 }} />,
       roles: all_admin_roles,
     },
     {
       key: "26",
       page: "tools",
       label: "Tools",
-      icon: <ToolOutlined style={{ fontSize: "18px" }} />,
+      icon: <ToolOutlined style={{ fontSize: 18 }} />,
       children: [
-        { key: "18", page: "mcp-servers", label: "MCP Servers", icon: <ToolOutlined style={{ fontSize: "18px" }} /> },
+        { key: "18", page: "mcp-servers", label: "MCP Servers", icon: <ToolOutlined style={{ fontSize: 18 }} /> },
         {
           key: "21",
           page: "vector-stores",
           label: "Vector Stores",
-          icon: <DatabaseOutlined style={{ fontSize: "18px" }} />,
+          icon: <DatabaseOutlined style={{ fontSize: 18 }} />,
           roles: all_admin_roles,
         },
       ],
@@ -146,136 +212,135 @@ const Sidebar2: React.FC<SidebarProps> = ({
       key: "experimental",
       page: "experimental",
       label: "Experimental",
-      icon: <ExperimentOutlined style={{ fontSize: "18px" }} />,
+      icon: <ExperimentOutlined style={{ fontSize: 18 }} />,
       children: [
         {
           key: "9",
           page: "caching",
           label: "Caching",
-          icon: <DatabaseOutlined style={{ fontSize: "18px" }} />,
+          icon: <DatabaseOutlined style={{ fontSize: 18 }} />,
           roles: all_admin_roles,
         },
         {
           key: "25",
           page: "prompts",
           label: "Prompts",
-          icon: <FileTextOutlined style={{ fontSize: "18px" }} />,
+          icon: <FileTextOutlined style={{ fontSize: 18 }} />,
           roles: all_admin_roles,
         },
         {
           key: "10",
           page: "budgets",
           label: "Budgets",
-          icon: <BankOutlined style={{ fontSize: "18px" }} />,
+          icon: <BankOutlined style={{ fontSize: 18 }} />,
           roles: all_admin_roles,
         },
         {
           key: "20",
           page: "transform-request",
           label: "API Playground",
-          icon: <ApiOutlined style={{ fontSize: "18px" }} />,
+          icon: <ApiOutlined style={{ fontSize: 18 }} />,
           roles: [...all_admin_roles, ...internalUserRoles],
         },
         {
           key: "19",
           page: "tag-management",
           label: "Tag Management",
-          icon: <TagsOutlined style={{ fontSize: "18px" }} />,
+          icon: <TagsOutlined style={{ fontSize: 18 }} />,
           roles: all_admin_roles,
         },
-        { key: "4", page: "usage", label: "Old Usage", icon: <BarChartOutlined style={{ fontSize: "18px" }} /> },
+        { key: "4", page: "usage", label: "Old Usage", icon: <BarChartOutlined style={{ fontSize: 18 }} /> },
       ],
     },
     {
       key: "settings",
       page: "settings",
       label: "Settings",
-      icon: <SettingOutlined style={{ fontSize: "18px" }} />,
+      icon: <SettingOutlined style={{ fontSize: 18 }} />,
       roles: all_admin_roles,
       children: [
         {
           key: "11",
           page: "general-settings",
           label: "Router Settings",
-          icon: <SettingOutlined style={{ fontSize: "18px" }} />,
+          icon: <SettingOutlined style={{ fontSize: 18 }} />,
           roles: all_admin_roles,
         },
         {
           key: "8",
           page: "settings",
           label: "Logging & Alerts",
-          icon: <SettingOutlined style={{ fontSize: "18px" }} />,
+          icon: <SettingOutlined style={{ fontSize: 18 }} />,
           roles: all_admin_roles,
         },
         {
           key: "13",
           page: "admin-panel",
           label: "Admin Settings",
-          icon: <SettingOutlined style={{ fontSize: "18px" }} />,
+          icon: <SettingOutlined style={{ fontSize: 18 }} />,
           roles: all_admin_roles,
         },
         {
           key: "14",
           page: "ui-theme",
           label: "UI Theme",
-          icon: <BgColorsOutlined style={{ fontSize: "18px" }} />,
+          icon: <SettingOutlined style={{ fontSize: 18 }} />,
           roles: all_admin_roles,
         },
       ],
     },
   ];
 
-  const findMenuItemKey = (page: string): string => {
-    const topLevelItem = menuItems.find((item) => item.page === page);
-    if (topLevelItem) return topLevelItem.key;
-    for (const item of menuItems) {
+  // ----- Filter by role without mutating originals -----
+  const filteredMenuItems = React.useMemo<MenuItemCfg[]>(() => {
+    return menuItems
+      .filter((item) => !item.roles || item.roles.includes(userRole))
+      .map((item) => ({
+        ...item,
+        children: item.children ? item.children.filter((c) => !c.roles || c.roles.includes(userRole)) : undefined,
+      }));
+  }, [userRole]);
+
+  // ----- Compute selected key from current path -----
+  const selectedMenuKey = React.useMemo(() => {
+    const base = getBasePath();
+    // strip base prefix and leading slash -> "virtual-keys", "tools/mcp-servers", etc.
+    const rel = pathname.startsWith(base) ? pathname.slice(base.length) : pathname.replace(/^\/+/, "");
+    const relLower = rel.toLowerCase();
+
+    const matchesPath = (slug: string) => {
+      const route = routeFor(slug).toLowerCase();
+      return relLower === route || relLower.startsWith(`${route}/`);
+    };
+
+    // search top-level
+    for (const item of filteredMenuItems) {
+      if (!item.children && matchesPath(item.page)) return item.key;
       if (item.children) {
-        const childItem = item.children.find((child) => child.page === page);
-        if (childItem) return childItem.key;
+        for (const child of item.children) {
+          if (matchesPath(child.page)) return child.key;
+        }
       }
     }
+
+    // fallback to legacy defaultSelectedKey mapping
+    const fallback = filteredMenuItems.find((i) => i.page === defaultSelectedKey)?.key;
+    if (fallback) return fallback;
+
+    for (const item of filteredMenuItems) {
+      if (item.children?.some((c) => c.page === defaultSelectedKey)) {
+        const child = item.children.find((c) => c.page === defaultSelectedKey)!;
+        return child.key;
+      }
+    }
+
     return "1";
-  };
+  }, [pathname, filteredMenuItems, defaultSelectedKey]);
 
-  const selectedMenuKey = findMenuItemKey(defaultSelectedKey);
-
-  const filteredMenuItems = menuItems.filter((item) => {
-    const hasParentAccess = !item.roles || item.roles.includes(userRole);
-    if (!hasParentAccess) return false;
-    if (item.children) {
-      item.children = item.children.filter((child) => !child.roles || child.roles.includes(userRole));
-    }
-    return true;
-  });
-
-  // Helper: update /?page=... under the configured base, WITHOUT triggering App Router nav
-  const pushToRootWithPage = (page: string, useReplace = false) => {
-    const params = new URLSearchParams();
-    params.set("page", page);
-    const url = withBase(`/?${params.toString()}`);
-    softNavigate(url, useReplace);
-  };
-
-  const navigateToPage = (page: string) => {
-    if (page === "api-keys") {
-      if (refactoredUIFlag) {
-        // vanity URL, keep SPA alive
-        softNavigate(withBase("/virtual-keys"));
-        return; // don't call setPage to keep parity, UI already shows api-keys by default
-      }
-      pushToRootWithPage(page);
-      setPage(page);
-      return;
-    }
-
-    if (refactoredUIFlag) {
-      const onVirtualKeys =
-        typeof window !== "undefined" && window.location.pathname.startsWith(withBase("/virtual-keys"));
-      pushToRootWithPage(page, onVirtualKeys);
-    } else {
-      pushToRootWithPage(page);
-    }
-    setPage(page);
+  // ----- Navigation -----
+  const goTo = (slug: string) => {
+    const href = toHref(slug);
+    router.push(href);
   };
 
   return (
@@ -287,16 +352,32 @@ const Sidebar2: React.FC<SidebarProps> = ({
         collapsedWidth={80}
         collapsible
         trigger={null}
-        style={{ transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)", position: "relative" }}
+        style={{
+          transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+          position: "relative",
+        }}
       >
-        <ConfigProvider theme={{ components: { Menu: { iconSize: 18, fontSize: 14 } } }}>
+        <ConfigProvider
+          theme={{
+            components: {
+              Menu: {
+                iconSize: 18,
+                fontSize: 14,
+              },
+            },
+          }}
+        >
           <Menu
             mode="inline"
             selectedKeys={[selectedMenuKey]}
-            defaultOpenKeys={collapsed ? [] : ["llm-tools"]}
+            defaultOpenKeys={collapsed ? [] : ["llm-tools"]} // kept to preserve original appearance
             inlineCollapsed={collapsed}
             className="custom-sidebar-menu"
-            style={{ borderRight: 0, backgroundColor: "transparent", fontSize: "14px" }}
+            style={{
+              borderRight: 0,
+              backgroundColor: "transparent",
+              fontSize: "14px",
+            }}
             items={filteredMenuItems.map((item) => ({
               key: item.key,
               icon: item.icon,
@@ -305,9 +386,9 @@ const Sidebar2: React.FC<SidebarProps> = ({
                 key: child.key,
                 icon: child.icon,
                 label: child.label,
-                onClick: () => navigateToPage(child.page),
+                onClick: () => goTo(child.page),
               })),
-              onClick: !item.children ? () => navigateToPage(item.page) : undefined,
+              onClick: !item.children ? () => goTo(item.page) : undefined,
             }))}
           />
         </ConfigProvider>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/components/SidebarProvider.tsx b/ui/litellm-dashboard/src/app/(dashboard)/components/SidebarProvider.tsx
new file mode 100644
index 0000000000..cb7f0f1a32
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/components/SidebarProvider.tsx
@@ -0,0 +1,29 @@
+import useFeatureFlags from "@/hooks/useFeatureFlags";
+import Sidebar from "@/components/leftnav";
+import Sidebar2 from "@/app/(dashboard)/components/Sidebar2";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+
+interface SidebarProviderProps {
+  defaultSelectedKey: string;
+  setPage: (newPage: string) => void;
+  sidebarCollapsed: boolean;
+}
+
+const SidebarProvider = ({ setPage, defaultSelectedKey, sidebarCollapsed }: SidebarProviderProps) => {
+  const { refactoredUIFlag } = useFeatureFlags();
+  const { accessToken, userRole } = useAuthorized();
+
+  return refactoredUIFlag ? (
+    <Sidebar2 accessToken={accessToken} defaultSelectedKey={defaultSelectedKey} userRole={userRole} />
+  ) : (
+    <Sidebar
+      accessToken={accessToken}
+      setPage={setPage}
+      userRole={userRole}
+      defaultSelectedKey={defaultSelectedKey}
+      collapsed={sidebarCollapsed}
+    />
+  );
+};
+
+export default SidebarProvider;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/components/modals/CreateUserModal.tsx b/ui/litellm-dashboard/src/app/(dashboard)/components/modals/CreateUserModal.tsx
index fce7f69192..9eb4191be1 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/components/modals/CreateUserModal.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/components/modals/CreateUserModal.tsx
@@ -70,7 +70,7 @@ const CreateUserModal: React.FC<CreateUserModalProps> = ({ possibleUIRoles, onUs
   const [isInvitationLinkModalVisible, setIsInvitationLinkModalVisible] = useState(false);
   const [invitationLinkData, setInvitationLinkData] = useState<InvitationLink | null>(null);
   const [baseUrl, setBaseUrl] = useState<string | null>(null);
-  const teams = useTeams();
+  const { teams } = useTeams();
 
   // get all models
   useEffect(() => {
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/experimental/api-playground/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/experimental/api-playground/page.tsx
new file mode 100644
index 0000000000..0948b7626d
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/experimental/api-playground/page.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import TransformRequestPanel from "@/components/transform_request";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+
+const APIPlaygroundPage = () => {
+  const { accessToken } = useAuthorized();
+
+  return <TransformRequestPanel accessToken={accessToken} />;
+};
+
+export default APIPlaygroundPage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/experimental/budgets/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/experimental/budgets/page.tsx
new file mode 100644
index 0000000000..e49bd342c0
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/experimental/budgets/page.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import BudgetPanel from "@/components/budgets/budget_panel";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+
+const BudgetsPage = () => {
+  const { accessToken } = useAuthorized();
+
+  return <BudgetPanel accessToken={accessToken} />;
+};
+
+export default BudgetsPage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/experimental/caching/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/experimental/caching/page.tsx
new file mode 100644
index 0000000000..6dcbcdc697
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/experimental/caching/page.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import CacheDashboard from "@/components/cache_dashboard";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+
+const CachingPage = () => {
+  const { token, accessToken, userRole, userId, premiumUser } = useAuthorized();
+
+  return (
+    <CacheDashboard
+      accessToken={accessToken}
+      token={token}
+      userRole={userRole}
+      userID={userId}
+      premiumUser={premiumUser}
+    />
+  );
+};
+
+export default CachingPage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/experimental/old-usage/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/experimental/old-usage/page.tsx
new file mode 100644
index 0000000000..9521f4f69f
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/experimental/old-usage/page.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import Usage from "@/components/usage";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import { useState } from "react";
+
+const OldUsagePage = () => {
+  const { accessToken, token, userRole, userId, premiumUser } = useAuthorized();
+  const [keys, setKeys] = useState<null | any[]>([]);
+
+  return (
+    <Usage
+      accessToken={accessToken}
+      token={token}
+      userRole={userRole}
+      userID={userId}
+      keys={keys}
+      premiumUser={premiumUser}
+    />
+  );
+};
+
+export default OldUsagePage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/experimental/prompts/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/experimental/prompts/page.tsx
new file mode 100644
index 0000000000..0836a03b7e
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/experimental/prompts/page.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import PromptsPanel from "@/components/prompts";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+
+const PromptsPage = () => {
+  const { accessToken } = useAuthorized();
+
+  return <PromptsPanel accessToken={accessToken} />;
+};
+
+export default PromptsPage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/experimental/tag-management/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/experimental/tag-management/page.tsx
new file mode 100644
index 0000000000..0e686387b3
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/experimental/tag-management/page.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import TagManagement from "@/components/tag_management";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+
+const TagManagementPage = () => {
+  const { accessToken, userId, userRole } = useAuthorized();
+
+  return <TagManagement accessToken={accessToken} userID={userId} userRole={userRole} />;
+};
+
+export default TagManagementPage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/page.tsx
new file mode 100644
index 0000000000..50cee215eb
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/page.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import GuardrailsPanel from "@/components/guardrails";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+
+const GuardrailsPage = () => {
+  const { accessToken } = useAuthorized();
+
+  return <GuardrailsPanel accessToken={accessToken} />;
+};
+
+export default GuardrailsPage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/useAuthorized.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/useAuthorized.ts
index 74c0476f19..ebb0c34592 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/useAuthorized.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/useAuthorized.ts
@@ -1,9 +1,9 @@
 "use client";
 
 import { useEffect, useMemo } from "react";
-import { getCookie, clearTokenCookies } from "@/utils/cookieUtils";
 import { useRouter } from "next/navigation";
 import { jwtDecode } from "jwt-decode";
+import { clearTokenCookies, getCookie } from "@/utils/cookieUtils";
 
 const useAuthorized = () => {
   const router = useRouter();
@@ -31,10 +31,13 @@ const useAuthorized = () => {
   }, [token, router]);
 
   return {
+    token: token,
     accessToken: decoded?.key ?? null,
     userId: decoded?.user_id ?? null,
     userRole: decoded?.user_role ?? null,
     premiumUser: decoded?.premium_user ?? null,
+    disabledPersonalKeyCreation: decoded?.disabled_non_admin_personal_key_creation ?? null,
+    showSSOBanner: decoded?.login_method === "username_password" ?? false,
   };
 };
 
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/logs/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/logs/page.tsx
new file mode 100644
index 0000000000..4c6e7acc19
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/logs/page.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import SpendLogsTable from "@/components/view_logs";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import useTeams from "@/app/(dashboard)/virtual-keys/hooks/useTeams";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const LogsPage = () => {
+  const { accessToken, token, userRole, userId, premiumUser } = useAuthorized();
+  const { teams } = useTeams();
+
+  const queryClient = new QueryClient();
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <SpendLogsTable
+        accessToken={accessToken}
+        token={token}
+        userRole={userRole}
+        userID={userId}
+        allTeams={teams || []}
+        premiumUser={premiumUser}
+      />
+    </QueryClientProvider>
+  );
+};
+
+export default LogsPage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/model-hub/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/model-hub/page.tsx
new file mode 100644
index 0000000000..86967b660f
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/model-hub/page.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import ModelHubTable from "@/components/model_hub_table";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+
+const ModelHubPage = () => {
+  const { accessToken, premiumUser, userRole } = useAuthorized();
+
+  return <ModelHubTable accessToken={accessToken} publicPage={false} premiumUser={premiumUser} userRole={userRole} />;
+};
+
+export default ModelHubPage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.tsx
new file mode 100644
index 0000000000..2c523ea403
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import ModelDashboard from "@/components/templates/model_dashboard";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import useTeams from "@/app/(dashboard)/virtual-keys/hooks/useTeams";
+import { useState } from "react";
+
+const ModelsAndEndpointsPage = () => {
+  const { token, accessToken, userRole, userId, premiumUser } = useAuthorized();
+  const [keys, setKeys] = useState<null | any[]>([]);
+
+  const { teams } = useTeams();
+
+  return (
+    <ModelDashboard
+      accessToken={accessToken}
+      token={token}
+      userRole={userRole}
+      userID={userId}
+      modelData={{ data: [] }}
+      keys={keys}
+      setModelData={() => {}}
+      premiumUser={premiumUser}
+      teams={teams}
+    />
+  );
+};
+
+export default ModelsAndEndpointsPage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/organizations/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/organizations/page.tsx
new file mode 100644
index 0000000000..6112fac316
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/organizations/page.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import Organizations, { fetchOrganizations } from "@/components/organizations";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import { useEffect, useState } from "react";
+import { Organization } from "@/components/networking";
+import { fetchUserModels } from "@/components/organisms/create_key_button";
+
+const OrganizationsPage = () => {
+  const { userId: userID, accessToken, userRole, premiumUser } = useAuthorized();
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
+  const [userModels, setUserModels] = useState<string[]>([]);
+
+  useEffect(() => {
+    fetchOrganizations(accessToken, setOrganizations).then(() => {});
+  }, [accessToken]);
+
+  useEffect(() => {
+    fetchUserModels(userID, userRole, accessToken, setUserModels).then(() => {});
+  }, [userID, userRole, accessToken]);
+
+  return (
+    <Organizations
+      organizations={organizations}
+      userRole={userRole}
+      userModels={userModels}
+      accessToken={accessToken}
+      setOrganizations={setOrganizations}
+      premiumUser={premiumUser}
+    />
+  );
+};
+
+export default OrganizationsPage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/settings/admin-settings/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/settings/admin-settings/page.tsx
new file mode 100644
index 0000000000..a851ce766a
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/settings/admin-settings/page.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import AdminPanel from "@/components/admins";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import { useState } from "react";
+import { Team } from "@/components/key_team_helpers/key_list";
+import useTeams from "@/app/(dashboard)/virtual-keys/hooks/useTeams";
+
+const AdminSettings = () => {
+  const { teams, setTeams } = useTeams();
+
+  const [searchParams, setSearchParams] = useState<URLSearchParams>(() =>
+    typeof window === "undefined" ? new URLSearchParams() : new URLSearchParams(window.location.search),
+  );
+  const { accessToken, userId, premiumUser, showSSOBanner } = useAuthorized();
+
+  return (
+    <AdminPanel
+      searchParams={searchParams}
+      accessToken={accessToken}
+      userID={userId}
+      setTeams={setTeams}
+      showSSOBanner={showSSOBanner}
+      premiumUser={premiumUser}
+    />
+  );
+};
+
+export default AdminSettings;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/settings/logging-and-alerts/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/settings/logging-and-alerts/page.tsx
new file mode 100644
index 0000000000..b13e3c42f9
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/settings/logging-and-alerts/page.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import Settings from "@/components/settings";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+
+const LoggingAndAlertsPage = () => {
+  const { accessToken, userRole, userId, premiumUser } = useAuthorized();
+
+  return <Settings accessToken={accessToken} userRole={userRole} userID={userId} premiumUser={premiumUser} />;
+};
+
+export default LoggingAndAlertsPage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/settings/router-settings/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/settings/router-settings/page.tsx
new file mode 100644
index 0000000000..2b5463cd81
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/settings/router-settings/page.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import GeneralSettings from "@/components/general_settings";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+
+const RouterSettingsPage = () => {
+  const { accessToken, userRole, userId } = useAuthorized();
+
+  return <GeneralSettings accessToken={accessToken} userRole={userRole} userID={userId} modelData={{}} />;
+};
+
+export default RouterSettingsPage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/settings/ui-theme/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/settings/ui-theme/page.tsx
new file mode 100644
index 0000000000..c6826cf11d
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/settings/ui-theme/page.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import UIThemeSettings from "@/components/ui_theme_settings";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+
+const UIThemePage = () => {
+  const { userId, userRole, accessToken } = useAuthorized();
+
+  return <UIThemeSettings userID={userId} userRole={userRole} accessToken={accessToken} />;
+};
+
+export default UIThemePage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/teams/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/teams/page.tsx
new file mode 100644
index 0000000000..f1f0460d53
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/teams/page.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import Teams from "@/components/teams";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import useTeams from "@/app/(dashboard)/virtual-keys/hooks/useTeams";
+import { useEffect, useState } from "react";
+import { Organization } from "@/components/networking";
+import { fetchOrganizations } from "@/components/organizations";
+
+const TeamsPage = () => {
+  const { accessToken, userId, userRole } = useAuthorized();
+  const { teams, setTeams } = useTeams();
+  const [searchParams, setSearchParams] = useState<URLSearchParams>(() =>
+    typeof window === "undefined" ? new URLSearchParams() : new URLSearchParams(window.location.search),
+  );
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
+
+  useEffect(() => {
+    fetchOrganizations(accessToken, setOrganizations).then(() => {});
+  }, [accessToken]);
+
+  return (
+    <Teams
+      teams={teams}
+      searchParams={searchParams}
+      accessToken={accessToken}
+      setTeams={setTeams}
+      userID={userId}
+      userRole={userRole}
+      organizations={organizations}
+    />
+  );
+};
+
+export default TeamsPage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/test-key/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/test-key/page.tsx
new file mode 100644
index 0000000000..6324f3c555
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/test-key/page.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import ChatUI from "@/components/chat_ui/ChatUI";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+
+const TestKeyPage = () => {
+  const { token, accessToken, userRole, userId, disabledPersonalKeyCreation } = useAuthorized();
+
+  return (
+    <ChatUI
+      accessToken={accessToken}
+      token={token}
+      userRole={userRole}
+      userID={userId}
+      disabledPersonalKeyCreation={disabledPersonalKeyCreation}
+    />
+  );
+};
+
+export default TestKeyPage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/tools/mcp-servers/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/tools/mcp-servers/page.tsx
new file mode 100644
index 0000000000..1bea7ac74a
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/tools/mcp-servers/page.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { MCPServers } from "@/components/mcp_tools";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const MCPServersPage = () => {
+  const { accessToken, userRole, userId } = useAuthorized();
+
+  const queryClient = new QueryClient();
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <MCPServers accessToken={accessToken} userRole={userRole} userID={userId} />
+    </QueryClientProvider>
+  );
+};
+
+export default MCPServersPage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/tools/vector-stores/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/tools/vector-stores/page.tsx
new file mode 100644
index 0000000000..8516a0faa1
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/tools/vector-stores/page.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import VectorStoreManagement from "@/components/vector_store_management";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+
+const VectorStoresPage = () => {
+  const { accessToken, userId, userRole } = useAuthorized();
+
+  return <VectorStoreManagement accessToken={accessToken} userID={userId} userRole={userRole} />;
+};
+
+export default VectorStoresPage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/page.tsx
new file mode 100644
index 0000000000..c20b13c67d
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/page.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import NewUsagePage from "@/components/new_usage";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import useTeams from "@/app/(dashboard)/virtual-keys/hooks/useTeams";
+
+const UsagePage = () => {
+  const { accessToken, userRole, userId, premiumUser } = useAuthorized();
+  const { teams } = useTeams();
+
+  return (
+    <NewUsagePage
+      accessToken={accessToken}
+      userRole={userRole}
+      userID={userId}
+      teams={teams ?? []}
+      premiumUser={premiumUser}
+    />
+  );
+};
+
+export default UsagePage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/users/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/users/page.tsx
new file mode 100644
index 0000000000..dd53166574
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/users/page.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import ViewUserDashboard from "@/components/view_users";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import useTeams from "@/app/(dashboard)/virtual-keys/hooks/useTeams";
+import { useState } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const UsersPage = () => {
+  const { accessToken, userRole, userId, token } = useAuthorized();
+  const [keys, setKeys] = useState<null | any[]>([]);
+
+  const { teams } = useTeams();
+  const queryClient = new QueryClient();
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ViewUserDashboard
+        accessToken={accessToken}
+        token={token}
+        keys={keys}
+        userRole={userRole}
+        userID={userId}
+        teams={teams as any}
+        setKeys={setKeys}
+      />
+    </QueryClientProvider>
+  );
+};
+
+export default UsersPage;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
index 015d8c43f9..180d3336f1 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
@@ -61,7 +61,7 @@ const VirtualKeysTable = ({
   setAccessToken,
 }: AllKeysTableProps) => {
   const { userId: userID, userRole, accessToken, premiumUser } = useAuthorized();
-  const teams = useTeams();
+  const { teams } = useTeams();
   const [selectedKeyId, setSelectedKeyId] = useState<string | null>(null);
   const [userList, setUserList] = useState<UserResponse[]>([]);
   const [sorting, setSorting] = React.useState<SortingState>(() => {
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/hooks/useTeams.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/hooks/useTeams.tsx
index 5f04f8a28a..7ba7a2fea5 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/hooks/useTeams.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/hooks/useTeams.tsx
@@ -4,7 +4,7 @@ import { Team } from "@/components/key_team_helpers/key_list";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 const useTeams = () => {
-  const [teams, setTeams] = useState<Team[]>([]);
+  const [teams, setTeams] = useState<Team[] | null>([]);
   const { accessToken, userId: userID, userRole } = useAuthorized();
 
   useEffect(() => {
@@ -14,7 +14,7 @@ const useTeams = () => {
     })();
   }, [accessToken, userID, userRole]);
 
-  return teams;
+  return { teams, setTeams };
 };
 
 export default useTeams;
diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index f83972e0c1..ceee52399e 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import React, { useEffect, useMemo, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
+import { useSearchParams } from "next/navigation";
 import { jwtDecode } from "jwt-decode";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Team } from "@/components/key_team_helpers/key_list";
@@ -22,6 +23,7 @@ import ModelHubTable from "@/components/model_hub_table";
 import NewUsagePage from "@/components/new_usage";
 import APIRef from "@/components/api_ref";
 import ChatUI from "@/components/chat_ui/ChatUI";
+import Sidebar from "@/components/leftnav";
 import Usage from "@/components/usage";
 import CacheDashboard from "@/components/cache_dashboard";
 import { getUiConfig, proxyBaseUrl, setGlobalLitellmHeaderName } from "@/components/networking";
@@ -37,35 +39,50 @@ import VectorStoreManagement from "@/components/vector_store_management";
 import UIThemeSettings from "@/components/ui_theme_settings";
 import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import { cx } from "@/lib/cva.config";
-import Sidebar2 from "@/app/(dashboard)/components/Sidebar2";
-
-/** ---- BASE URL HELPERS ---- */
-function normalizeBasePrefix(raw: string | undefined | null): string {
-  const trimmed = (raw ?? "").trim();
-  if (!trimmed) return "";
-  const core = trimmed.replace(/^\/+/, "").replace(/\/+$/, "");
-  return core ? `/${core}` : "";
-}
-const BASE_PREFIX = normalizeBasePrefix(process.env.NEXT_PUBLIC_BASE_URL);
-function withBase(path: string): string {
-  const p = path.startsWith("/") ? path : `/${path}`;
-  return `${BASE_PREFIX}${p}` || p;
-}
-/** -------------------------------- */
+import useFeatureFlags from "@/hooks/useFeatureFlags";
+import SidebarProvider from "@/app/(dashboard)/components/SidebarProvider";
 
 function getCookie(name: string) {
-  if (typeof document === "undefined") return null;
-  const cookieValue = document.cookie.split("; ").find((row) => row.startsWith(name + "="));
-  return cookieValue ? cookieValue.split("=")[1] : null;
+  // Safer cookie read + decoding; handles '=' inside values
+  const match = document.cookie.split("; ").find((row) => row.startsWith(name + "="));
+  if (!match) return null;
+  const value = match.slice(name.length + 1);
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+
+function deleteCookie(name: string, path = "/") {
+  // Best-effort client-side clear (works for non-HttpOnly cookies without Domain)
+  document.cookie = `${name}=; Max-Age=0; Path=${path}`;
+}
+
+function isJwtExpired(token: string): boolean {
+  try {
+    const decoded: any = jwtDecode(token);
+    if (decoded && typeof decoded.exp === "number") {
+      return decoded.exp * 1000 <= Date.now();
+    }
+    return false;
+  } catch {
+    // If we can't decode, treat as invalid/expired
+    return true;
+  }
 }
 
 function formatUserRole(userRole: string) {
-  if (!userRole) return "Undefined Role";
+  if (!userRole) {
+    return "Undefined Role";
+  }
   switch (userRole.toLowerCase()) {
     case "app_owner":
+      return "App Owner";
     case "demo_app_owner":
       return "App Owner";
     case "app_admin":
+      return "Admin";
     case "proxy_admin":
       return "Admin";
     case "proxy_admin_viewer":
@@ -75,7 +92,7 @@ function formatUserRole(userRole: string) {
     case "internal_user":
       return "Internal User";
     case "internal_user_viewer":
-    case "internal_viewer":
+    case "internal_viewer": // TODO:remove if deprecated
       return "Internal Viewer";
     case "app_user":
       return "App User";
@@ -95,6 +112,7 @@ function LoadingScreen() {
   return (
     <div className={cx("h-screen", "flex items-center justify-center gap-4")}>
       <div className="text-lg font-medium py-2 pr-4 border-r border-r-gray-200">🚅 LiteLLM</div>
+
       <div className="flex items-center justify-center gap-2">
         <UiLoadingSpinner className="size-4" />
         <span className="text-gray-600 text-sm">Loading...</span>
@@ -103,16 +121,6 @@ function LoadingScreen() {
   );
 }
 
-/** Derive the app "page" from the URL without triggering App Router navigations */
-function getPageFromLocation(loc: Location): string {
-  const sp = new URLSearchParams(loc.search);
-  const p = sp.get("page");
-  if (p) return p;
-  // vanity route for refactored UI
-  if (loc.pathname.endsWith("/virtual-keys")) return "api-keys";
-  return "api-keys";
-}
-
 export default function CreateKeyPage() {
   const [userRole, setUserRole] = useState("");
   const [premiumUser, setPremiumUser] = useState(false);
@@ -122,98 +130,156 @@ export default function CreateKeyPage() {
   const [keys, setKeys] = useState<null | any[]>([]);
   const [organizations, setOrganizations] = useState<Organization[]>([]);
   const [userModels, setUserModels] = useState<string[]>([]);
-  const [proxySettings, setProxySettings] = useState<ProxySettings>({ PROXY_BASE_URL: "", PROXY_LOGOUT_URL: "" });
+  const [proxySettings, setProxySettings] = useState<ProxySettings>({
+    PROXY_BASE_URL: "",
+    PROXY_LOGOUT_URL: "",
+  });
+
   const [showSSOBanner, setShowSSOBanner] = useState<boolean>(true);
-
-  // Stable local mirror of URLSearchParams (no suspense, no flashes)
-  const [searchParams, setSearchParams] = useState<URLSearchParams>(() =>
-    typeof window === "undefined" ? new URLSearchParams() : new URLSearchParams(window.location.search),
-  );
-  const invitation_id = useMemo(() => searchParams.get("invitation_id"), [searchParams]);
-
-  // Local page state (drives UI)
-  const [page, setPage] = useState<string>(() =>
-    typeof window === "undefined" ? "api-keys" : getPageFromLocation(window.location),
-  );
-
-  // Keep history/back/forward in sync with UI
-  useEffect(() => {
-    const onPop = () => {
-      if (typeof window === "undefined") return;
-      setSearchParams(new URLSearchParams(window.location.search));
-      setPage(getPageFromLocation(window.location));
-    };
-    window.addEventListener("popstate", onPop);
-    return () => window.removeEventListener("popstate", onPop);
-  }, []);
-
-  // Update URL without triggering App Router reload/suspense
-  const updatePage = (newPage: string) => {
-    if (typeof window === "undefined") return;
-    // 1) instant UI update
-    setPage(newPage);
-    // 2) URL update under base prefix
-    const sp = new URLSearchParams(window.location.search);
-    sp.set("page", newPage);
-    const url = withBase(`/?${sp.toString()}`);
-    window.history.pushState(null, "", url);
-    // 3) keep our local mirror in sync
-    setSearchParams(new URLSearchParams(sp));
-  };
-
+  const searchParams = useSearchParams()!;
+  const [modelData, setModelData] = useState<any>({ data: [] });
   const [token, setToken] = useState<string | null>(null);
   const [createClicked, setCreateClicked] = useState<boolean>(false);
   const [authLoading, setAuthLoading] = useState(true);
   const [userID, setUserID] = useState<string | null>(null);
+  const { refactoredUIFlag } = useFeatureFlags();
+
+  const invitation_id = searchParams.get("invitation_id");
+
+  // Get page from URL, default to 'api-keys' if not present
+  const [page, setPage] = useState(() => {
+    return searchParams.get("page") || "api-keys";
+  });
+
+  // Custom setPage function that updates URL
+  const updatePage = (newPage: string) => {
+    // Update URL without full page reload
+    const newSearchParams = new URLSearchParams(searchParams);
+    newSearchParams.set("page", newPage);
+
+    // Use Next.js router to update URL
+    window.history.pushState(null, "", `?${newSearchParams.toString()}`);
+
+    setPage(newPage);
+  };
 
   const [accessToken, setAccessToken] = useState<string | null>(null);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
 
-  const toggleSidebar = () => setSidebarCollapsed((v) => !v);
+  const toggleSidebar = () => {
+    setSidebarCollapsed(!sidebarCollapsed);
+  };
 
   const addKey = (data: any) => {
     setKeys((prevData) => (prevData ? [...prevData, data] : [data]));
-    setCreateClicked((v) => !v);
+    setCreateClicked(() => !createClicked);
   };
   const redirectToLogin = authLoading === false && token === null && invitation_id === null;
 
   useEffect(() => {
-    const token = getCookie("token");
-    getUiConfig().then(() => {
-      setToken(token);
-      setAuthLoading(false);
-    });
+    let cancelled = false;
+
+    (async () => {
+      try {
+        await getUiConfig(); // ensures proxyBaseUrl etc. are ready
+      } catch {
+        // proceed regardless; we still need to decide auth state
+      }
+
+      if (cancelled) return;
+
+      const raw = getCookie("token");
+      const valid = raw && !isJwtExpired(raw) ? raw : null;
+
+      // If token exists but is invalid/expired, clear it so downstream code
+      // doesn't keep trying to use it and cause redirect spasms.
+      if (raw && !valid) {
+        deleteCookie("token", "/");
+      }
+
+      if (!cancelled) {
+        setToken(valid);
+        setAuthLoading(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
   }, []);
 
   useEffect(() => {
     if (redirectToLogin) {
-      window.location.href = (proxyBaseUrl || "") + "/sso/key/generate";
+      // Replace instead of assigning to avoid back-button loops
+      const dest = (proxyBaseUrl || "") + "/sso/key/generate";
+      window.location.replace(dest);
     }
   }, [redirectToLogin]);
 
   useEffect(() => {
-    if (!token) return;
-    const decoded = jwtDecode(token) as { [key: string]: any };
-    if (!decoded) return;
+    if (!token) {
+      return;
+    }
 
-    setAccessToken(decoded.key);
-    setDisabledPersonalKeyCreation(decoded.disabled_non_admin_personal_key_creation);
+    // Defensive: re-check expiry in case cookie changed after mount
+    if (isJwtExpired(token)) {
+      deleteCookie("token", "/");
+      setToken(null);
+      return;
+    }
 
-    if (decoded.user_role) {
-      const formattedUserRole = formatUserRole(decoded.user_role);
-      setUserRole(formattedUserRole);
-      if (formattedUserRole === "Admin Viewer") setPage("usage");
+    let decoded: any = null;
+    try {
+      decoded = jwtDecode(token);
+    } catch {
+      // Malformed token → treat as unauthenticated
+      deleteCookie("token", "/");
+      setToken(null);
+      return;
+    }
+
+    if (decoded) {
+      // set accessToken
+      setAccessToken(decoded.key);
+
+      setDisabledPersonalKeyCreation(decoded.disabled_non_admin_personal_key_creation);
+
+      // check if userRole is defined
+      if (decoded.user_role) {
+        const formattedUserRole = formatUserRole(decoded.user_role);
+        setUserRole(formattedUserRole);
+        if (formattedUserRole == "Admin Viewer") {
+          setPage("usage");
+        }
+      }
+
+      if (decoded.user_email) {
+        setUserEmail(decoded.user_email);
+      }
+
+      if (decoded.login_method) {
+        setShowSSOBanner(decoded.login_method == "username_password" ? true : false);
+      }
+
+      if (decoded.premium_user) {
+        setPremiumUser(decoded.premium_user);
+      }
+
+      if (decoded.auth_header_name) {
+        setGlobalLitellmHeaderName(decoded.auth_header_name);
+      }
+
+      if (decoded.user_id) {
+        setUserID(decoded.user_id);
+      }
     }
-    if (decoded.user_email) setUserEmail(decoded.user_email);
-    if (decoded.login_method) setShowSSOBanner(decoded.login_method === "username_password");
-    if (decoded.premium_user) setPremiumUser(decoded.premium_user);
-    if (decoded.auth_header_name) setGlobalLitellmHeaderName(decoded.auth_header_name);
-    if (decoded.user_id) setUserID(decoded.user_id);
   }, [token]);
 
   useEffect(() => {
     if (accessToken && userID && userRole) {
       fetchUserModels(userID, userRole, accessToken, setUserModels);
+    }
+    if (accessToken && userID && userRole) {
       fetchTeams(accessToken, userID, userRole, null, setTeams);
     }
     if (accessToken) {
@@ -226,194 +292,201 @@ export default function CreateKeyPage() {
   }
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider accessToken={accessToken}>
-        {invitation_id ? (
-          <UserDashboard
-            userID={userID}
-            userRole={userRole}
-            userEmail={userEmail}
-            premiumUser={premiumUser}
-            teams={teams}
-            keys={keys}
-            setUserRole={setUserRole}
-            setUserEmail={setUserEmail}
-            setTeams={setTeams}
-            setKeys={setKeys}
-            organizations={organizations}
-            addKey={addKey}
-            createClicked={createClicked}
-          />
-        ) : (
-          <div className="flex flex-col min-h-screen">
-            <Navbar
+    <Suspense fallback={<LoadingScreen />}>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider accessToken={accessToken}>
+          {invitation_id ? (
+            <UserDashboard
               userID={userID}
               userRole={userRole}
               premiumUser={premiumUser}
+              teams={teams}
+              keys={keys}
+              setUserRole={setUserRole}
               userEmail={userEmail}
-              setProxySettings={setProxySettings}
-              proxySettings={proxySettings}
-              accessToken={accessToken}
-              isPublicPage={false}
-              sidebarCollapsed={sidebarCollapsed}
-              onToggleSidebar={toggleSidebar}
+              setUserEmail={setUserEmail}
+              setTeams={setTeams}
+              setKeys={setKeys}
+              organizations={organizations}
+              addKey={addKey}
+              createClicked={createClicked}
             />
-            <div className="flex flex-1 overflow-auto">
-              <div className="mt-2">
-                <Sidebar2
-                  defaultSelectedKey={page}
-                  setPage={updatePage}
-                  accessToken={accessToken}
-                  userRole={userRole}
-                />
-              </div>
+          ) : (
+            <div className="flex flex-col min-h-screen">
+              <Navbar
+                userID={userID}
+                userRole={userRole}
+                premiumUser={premiumUser}
+                userEmail={userEmail}
+                setProxySettings={setProxySettings}
+                proxySettings={proxySettings}
+                accessToken={accessToken}
+                isPublicPage={false}
+                sidebarCollapsed={sidebarCollapsed}
+                onToggleSidebar={toggleSidebar}
+              />
+              <div className="flex flex-1 overflow-auto">
+                <div className="mt-2">
+                  <SidebarProvider setPage={updatePage} defaultSelectedKey={page} sidebarCollapsed={sidebarCollapsed} />
+                </div>
 
-              {page === "api-keys" ? (
-                <UserDashboard
-                  userID={userID}
-                  userRole={userRole}
-                  userEmail={userEmail}
-                  premiumUser={premiumUser}
-                  teams={teams}
-                  keys={keys}
-                  setUserRole={setUserRole}
-                  setUserEmail={setUserEmail}
-                  setTeams={setTeams}
-                  setKeys={setKeys}
-                  organizations={organizations}
-                  addKey={addKey}
-                  createClicked={createClicked}
-                />
-              ) : page === "models" ? (
-                <ModelDashboard
-                  userID={userID}
-                  userRole={userRole}
-                  token={token}
-                  keys={keys}
-                  accessToken={accessToken}
-                  modelData={{ data: [] }}
-                  setModelData={() => {}}
-                  premiumUser={premiumUser}
-                  teams={teams}
-                />
-              ) : page === "llm-playground" ? (
-                <ChatUI
-                  userID={userID}
-                  userRole={userRole}
-                  token={token}
-                  accessToken={accessToken}
-                  disabledPersonalKeyCreation={disabledPersonalKeyCreation}
-                />
-              ) : page === "users" ? (
-                <ViewUserDashboard
-                  userID={userID}
-                  userRole={userRole}
-                  token={token}
-                  keys={keys}
-                  teams={teams}
-                  accessToken={accessToken}
-                  setKeys={setKeys}
-                />
-              ) : page === "teams" ? (
-                <Teams
-                  teams={teams}
-                  setTeams={setTeams}
-                  searchParams={searchParams}
-                  accessToken={accessToken}
-                  userID={userID}
-                  userRole={userRole}
-                  organizations={organizations}
-                  premiumUser={premiumUser}
-                />
-              ) : page === "organizations" ? (
-                <Organizations
-                  organizations={organizations}
-                  setOrganizations={setOrganizations}
-                  userModels={userModels}
-                  accessToken={accessToken}
-                  userRole={userRole}
-                  premiumUser={premiumUser}
-                />
-              ) : page === "admin-panel" ? (
-                <AdminPanel
-                  setTeams={setTeams}
-                  searchParams={searchParams}
-                  accessToken={accessToken}
-                  userID={userID}
-                  showSSOBanner={showSSOBanner}
-                  premiumUser={premiumUser}
-                  proxySettings={proxySettings}
-                />
-              ) : page === "api_ref" ? (
-                <APIRef proxySettings={proxySettings} />
-              ) : page === "settings" ? (
-                <Settings userID={userID} userRole={userRole} accessToken={accessToken} premiumUser={premiumUser} />
-              ) : page === "budgets" ? (
-                <BudgetPanel accessToken={accessToken} />
-              ) : page === "guardrails" ? (
-                <GuardrailsPanel accessToken={accessToken} userRole={userRole} />
-              ) : page === "prompts" ? (
-                <PromptsPanel accessToken={accessToken} userRole={userRole} />
-              ) : page === "transform-request" ? (
-                <TransformRequestPanel accessToken={accessToken} />
-              ) : page === "general-settings" ? (
-                <GeneralSettings userID={userID} userRole={userRole} accessToken={accessToken} modelData={{}} />
-              ) : page === "ui-theme" ? (
-                <UIThemeSettings userID={userID} userRole={userRole} accessToken={accessToken} />
-              ) : page === "model-hub-table" ? (
-                <ModelHubTable
-                  accessToken={accessToken}
-                  publicPage={false}
-                  premiumUser={premiumUser}
-                  userRole={userRole}
-                />
-              ) : page === "caching" ? (
-                <CacheDashboard
-                  userID={userID}
-                  userRole={userRole}
-                  token={token}
-                  accessToken={accessToken}
-                  premiumUser={premiumUser}
-                />
-              ) : page === "pass-through-settings" ? (
-                <PassThroughSettings userID={userID} userRole={userRole} accessToken={accessToken} modelData={{}} />
-              ) : page === "logs" ? (
-                <SpendLogsTable
-                  userID={userID}
-                  userRole={userRole}
-                  token={token}
-                  accessToken={accessToken}
-                  allTeams={(teams as Team[]) ?? []}
-                  premiumUser={premiumUser}
-                />
-              ) : page === "mcp-servers" ? (
-                <MCPServers accessToken={accessToken} userRole={userRole} userID={userID} />
-              ) : page === "tag-management" ? (
-                <TagManagement accessToken={accessToken} userRole={userRole} userID={userID} />
-              ) : page === "vector-stores" ? (
-                <VectorStoreManagement accessToken={accessToken} userRole={userRole} userID={userID} />
-              ) : page === "new_usage" ? (
-                <NewUsagePage
-                  userID={userID}
-                  userRole={userRole}
-                  accessToken={accessToken}
-                  teams={(teams as Team[]) ?? []}
-                  premiumUser={premiumUser}
-                />
-              ) : (
-                <Usage
-                  userID={userID}
-                  userRole={userRole}
-                  token={token}
-                  accessToken={accessToken}
-                  keys={keys}
-                  premiumUser={premiumUser}
-                />
-              )}
+                {page == "api-keys" ? (
+                  <UserDashboard
+                    userID={userID}
+                    userRole={userRole}
+                    premiumUser={premiumUser}
+                    teams={teams}
+                    keys={keys}
+                    setUserRole={setUserRole}
+                    userEmail={userEmail}
+                    setUserEmail={setUserEmail}
+                    setTeams={setTeams}
+                    setKeys={setKeys}
+                    organizations={organizations}
+                    addKey={addKey}
+                    createClicked={createClicked}
+                  />
+                ) : page == "models" ? (
+                  <ModelDashboard
+                    userID={userID}
+                    userRole={userRole}
+                    token={token}
+                    keys={keys}
+                    accessToken={accessToken}
+                    modelData={modelData}
+                    setModelData={setModelData}
+                    premiumUser={premiumUser}
+                    teams={teams}
+                  />
+                ) : page == "llm-playground" ? (
+                  <ChatUI
+                    userID={userID}
+                    userRole={userRole}
+                    token={token}
+                    accessToken={accessToken}
+                    disabledPersonalKeyCreation={disabledPersonalKeyCreation}
+                  />
+                ) : page == "users" ? (
+                  <ViewUserDashboard
+                    userID={userID}
+                    userRole={userRole}
+                    token={token}
+                    keys={keys}
+                    teams={teams}
+                    accessToken={accessToken}
+                    setKeys={setKeys}
+                  />
+                ) : page == "teams" ? (
+                  <Teams
+                    teams={teams}
+                    setTeams={setTeams}
+                    searchParams={searchParams}
+                    accessToken={accessToken}
+                    userID={userID}
+                    userRole={userRole}
+                    organizations={organizations}
+                    premiumUser={premiumUser}
+                  />
+                ) : page == "organizations" ? (
+                  <Organizations
+                    organizations={organizations}
+                    setOrganizations={setOrganizations}
+                    userModels={userModels}
+                    accessToken={accessToken}
+                    userRole={userRole}
+                    premiumUser={premiumUser}
+                  />
+                ) : page == "admin-panel" ? (
+                  <AdminPanel
+                    setTeams={setTeams}
+                    searchParams={searchParams}
+                    accessToken={accessToken}
+                    userID={userID}
+                    showSSOBanner={showSSOBanner}
+                    premiumUser={premiumUser}
+                    proxySettings={proxySettings}
+                  />
+                ) : page == "api_ref" ? (
+                  <APIRef proxySettings={proxySettings} />
+                ) : page == "settings" ? (
+                  <Settings userID={userID} userRole={userRole} accessToken={accessToken} premiumUser={premiumUser} />
+                ) : page == "budgets" ? (
+                  <BudgetPanel accessToken={accessToken} />
+                ) : page == "guardrails" ? (
+                  <GuardrailsPanel accessToken={accessToken} userRole={userRole} />
+                ) : page == "prompts" ? (
+                  <PromptsPanel accessToken={accessToken} userRole={userRole} />
+                ) : page == "transform-request" ? (
+                  <TransformRequestPanel accessToken={accessToken} />
+                ) : page == "general-settings" ? (
+                  <GeneralSettings
+                    userID={userID}
+                    userRole={userRole}
+                    accessToken={accessToken}
+                    modelData={modelData}
+                  />
+                ) : page == "ui-theme" ? (
+                  <UIThemeSettings userID={userID} userRole={userRole} accessToken={accessToken} />
+                ) : page == "model-hub-table" ? (
+                  <ModelHubTable
+                    accessToken={accessToken}
+                    publicPage={false}
+                    premiumUser={premiumUser}
+                    userRole={userRole}
+                  />
+                ) : page == "caching" ? (
+                  <CacheDashboard
+                    userID={userID}
+                    userRole={userRole}
+                    token={token}
+                    accessToken={accessToken}
+                    premiumUser={premiumUser}
+                  />
+                ) : page == "pass-through-settings" ? (
+                  <PassThroughSettings
+                    userID={userID}
+                    userRole={userRole}
+                    accessToken={accessToken}
+                    modelData={modelData}
+                  />
+                ) : page == "logs" ? (
+                  <SpendLogsTable
+                    userID={userID}
+                    userRole={userRole}
+                    token={token}
+                    accessToken={accessToken}
+                    allTeams={(teams as Team[]) ?? []}
+                    premiumUser={premiumUser}
+                  />
+                ) : page == "mcp-servers" ? (
+                  <MCPServers accessToken={accessToken} userRole={userRole} userID={userID} />
+                ) : page == "tag-management" ? (
+                  <TagManagement accessToken={accessToken} userRole={userRole} userID={userID} />
+                ) : page == "vector-stores" ? (
+                  <VectorStoreManagement accessToken={accessToken} userRole={userRole} userID={userID} />
+                ) : page == "new_usage" ? (
+                  <NewUsagePage
+                    userID={userID}
+                    userRole={userRole}
+                    accessToken={accessToken}
+                    teams={(teams as Team[]) ?? []}
+                    premiumUser={premiumUser}
+                  />
+                ) : (
+                  <Usage
+                    userID={userID}
+                    userRole={userRole}
+                    token={token}
+                    accessToken={accessToken}
+                    keys={keys}
+                    premiumUser={premiumUser}
+                  />
+                )}
+              </div>
             </div>
-          </div>
-        )}
-      </ThemeProvider>
-    </QueryClientProvider>
+          )}
+        </ThemeProvider>
+      </QueryClientProvider>
+    </Suspense>
   );
 }

From 825a040524dfca7b343b7427d30df5a7a0ff5f30 Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Wed, 8 Oct 2025 17:38:42 -0700
Subject: [PATCH 31/42] moved virtual-key-refactor to its own branch

---
 .../components/modals/CreateUserModal.tsx     |   3 +-
 .../app/(dashboard)/hooks/useAuthorized.ts    |   1 +
 .../{virtual-keys => }/hooks/useTeams.tsx     |   2 +-
 .../src/app/(dashboard)/logs/page.tsx         |   2 +-
 .../(dashboard)/models-and-endpoints/page.tsx |   2 +-
 .../{virtual-keys => }/networking.ts          |   0
 .../settings/admin-settings/page.tsx          |   2 +-
 .../src/app/(dashboard)/teams/page.tsx        |   2 +-
 .../src/app/(dashboard)/usage/page.tsx        |   2 +-
 .../src/app/(dashboard)/users/page.tsx        |   2 +-
 .../virtual-keys/components/CreateKey.tsx     | 108 ---
 .../CreateKeyForm/KeyDetailsSection.tsx       | 150 ----
 .../CreateKeyForm/OptionalSettingsSection.tsx | 460 ------------
 .../CreateKeyForm/OwnershipSection.tsx        | 132 ----
 .../CreateKeyModal/CreateKeyModal.tsx         | 235 ------
 .../components/CreateKeyModal/hooks/index.ts  |   5 -
 .../hooks/useGuardrailsAndPrompts.ts          |  24 -
 .../hooks/useMcpAccessGroups.ts               |  21 -
 .../CreateKeyModal/hooks/useTeamModels.ts     |  26 -
 .../CreateKeyModal/hooks/useUserModels.ts     |  21 -
 .../CreateKeyModal/hooks/useUserSearch.ts     |  41 -
 .../components/CreateKeyModal/networking.ts   |  84 ---
 .../components/CreateKeyModal/types.ts        |  17 -
 .../components/CreateKeyModal/utils.ts        | 187 -----
 .../virtual-keys/components/KeyInfoView.tsx   | 699 ------------------
 .../virtual-keys/components/SaveKeyModal.tsx  |  60 --
 .../VirtualKeysTable/VirtualKeysTable.tsx     | 667 -----------------
 .../VirtualKeysTable/hooks/useFilterLogic.ts  | 189 -----
 .../src/app/(dashboard)/virtual-keys/page.tsx |  41 +-
 .../components/templates/view_key_table.tsx   |   9 +-
 .../src/components/user_dashboard.tsx         |   5 +-
 .../src/components/view_users.tsx             |   2 +
 32 files changed, 37 insertions(+), 3164 deletions(-)
 rename ui/litellm-dashboard/src/app/(dashboard)/{virtual-keys => }/hooks/useTeams.tsx (88%)
 rename ui/litellm-dashboard/src/app/(dashboard)/{virtual-keys => }/networking.ts (100%)
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKey.tsx
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/index.ts
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/networking.ts
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/types.ts
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/utils.ts
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/KeyInfoView.tsx
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/SaveKeyModal.tsx
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/VirtualKeysTable/hooks/useFilterLogic.ts

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/components/modals/CreateUserModal.tsx b/ui/litellm-dashboard/src/app/(dashboard)/components/modals/CreateUserModal.tsx
index 9eb4191be1..be3ea48bf2 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/components/modals/CreateUserModal.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/components/modals/CreateUserModal.tsx
@@ -29,8 +29,7 @@ import {
 } from "@/components/networking";
 import { getModelDisplayName } from "@/components/key_team_helpers/fetch_available_models_team_key";
 import BulkCreateUsersButton from "@/components/bulk_create_users_button";
-import { fetchTeams } from "@/app/(dashboard)/virtual-keys/networking";
-import useTeams from "@/app/(dashboard)/virtual-keys/hooks/useTeams";
+import useTeams from "@/app/(dashboard)/hooks/useTeams";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 
 // Helper function to generate UUID compatible across all environments
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/useAuthorized.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/useAuthorized.ts
index ebb0c34592..435000f9c8 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/useAuthorized.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/useAuthorized.ts
@@ -34,6 +34,7 @@ const useAuthorized = () => {
     token: token,
     accessToken: decoded?.key ?? null,
     userId: decoded?.user_id ?? null,
+    userEmail: decoded?.user_email ?? null,
     userRole: decoded?.user_role ?? null,
     premiumUser: decoded?.premium_user ?? null,
     disabledPersonalKeyCreation: decoded?.disabled_non_admin_personal_key_creation ?? null,
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/hooks/useTeams.tsx b/ui/litellm-dashboard/src/app/(dashboard)/hooks/useTeams.tsx
similarity index 88%
rename from ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/hooks/useTeams.tsx
rename to ui/litellm-dashboard/src/app/(dashboard)/hooks/useTeams.tsx
index 7ba7a2fea5..64cbf624f9 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/hooks/useTeams.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/useTeams.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { fetchTeams } from "@/app/(dashboard)/virtual-keys/networking";
 import { Team } from "@/components/key_team_helpers/key_list";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import { fetchTeams } from "@/app/(dashboard)/networking";
 
 const useTeams = () => {
   const [teams, setTeams] = useState<Team[] | null>([]);
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/logs/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/logs/page.tsx
index 4c6e7acc19..b04a12e230 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/logs/page.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/logs/page.tsx
@@ -2,7 +2,7 @@
 
 import SpendLogsTable from "@/components/view_logs";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-import useTeams from "@/app/(dashboard)/virtual-keys/hooks/useTeams";
+import useTeams from "@/app/(dashboard)/hooks/useTeams";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 const LogsPage = () => {
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.tsx
index 2c523ea403..b661e4de3e 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.tsx
@@ -2,7 +2,7 @@
 
 import ModelDashboard from "@/components/templates/model_dashboard";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-import useTeams from "@/app/(dashboard)/virtual-keys/hooks/useTeams";
+import useTeams from "@/app/(dashboard)/hooks/useTeams";
 import { useState } from "react";
 
 const ModelsAndEndpointsPage = () => {
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/networking.ts b/ui/litellm-dashboard/src/app/(dashboard)/networking.ts
similarity index 100%
rename from ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/networking.ts
rename to ui/litellm-dashboard/src/app/(dashboard)/networking.ts
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/settings/admin-settings/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/settings/admin-settings/page.tsx
index a851ce766a..c99242f0c3 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/settings/admin-settings/page.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/settings/admin-settings/page.tsx
@@ -4,7 +4,7 @@ import AdminPanel from "@/components/admins";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { useState } from "react";
 import { Team } from "@/components/key_team_helpers/key_list";
-import useTeams from "@/app/(dashboard)/virtual-keys/hooks/useTeams";
+import useTeams from "@/app/(dashboard)/hooks/useTeams";
 
 const AdminSettings = () => {
   const { teams, setTeams } = useTeams();
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/teams/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/teams/page.tsx
index f1f0460d53..42e6d250ee 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/teams/page.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/teams/page.tsx
@@ -2,7 +2,7 @@
 
 import Teams from "@/components/teams";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-import useTeams from "@/app/(dashboard)/virtual-keys/hooks/useTeams";
+import useTeams from "@/app/(dashboard)/hooks/useTeams";
 import { useEffect, useState } from "react";
 import { Organization } from "@/components/networking";
 import { fetchOrganizations } from "@/components/organizations";
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/page.tsx
index c20b13c67d..e4b44e5a45 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/usage/page.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/page.tsx
@@ -2,7 +2,7 @@
 
 import NewUsagePage from "@/components/new_usage";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-import useTeams from "@/app/(dashboard)/virtual-keys/hooks/useTeams";
+import useTeams from "@/app/(dashboard)/hooks/useTeams";
 
 const UsagePage = () => {
   const { accessToken, userRole, userId, premiumUser } = useAuthorized();
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/users/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/users/page.tsx
index dd53166574..7cf401873d 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/users/page.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/users/page.tsx
@@ -2,7 +2,7 @@
 
 import ViewUserDashboard from "@/components/view_users";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-import useTeams from "@/app/(dashboard)/virtual-keys/hooks/useTeams";
+import useTeams from "@/app/(dashboard)/hooks/useTeams";
 import { useState } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKey.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKey.tsx
deleted file mode 100644
index 82be28e495..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKey.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-"use client";
-
-import React, { useState, useEffect } from "react";
-import { Button } from "@tremor/react";
-import { Modal, Form } from "antd";
-import { getPossibleUserRoles, Organization } from "@/components/networking";
-import { rolesWithWriteAccess } from "@/utils/roles";
-import { Team } from "@/components/key_team_helpers/key_list";
-import CreateKeyModal from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyModal";
-import CreateUserModal from "@/app/(dashboard)/components/modals/CreateUserModal";
-import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-
-interface CreateKeyProps {
-  team: Team | null;
-  userRole: string | null;
-  data: any[] | null;
-  addKey: (data: any) => void;
-}
-
-interface User {
-  user_id: string;
-  user_email: string;
-  role?: string;
-}
-
-interface UserOption {
-  label: string;
-  value: string;
-  user: User;
-}
-const CreateKey: React.FC<CreateKeyProps> = ({ team, userRole, data, addKey }) => {
-  const { accessToken } = useAuthorized();
-  const [form] = Form.useForm();
-  const [isModalVisible, setIsModalVisible] = useState(false);
-  const [isCreateUserModalVisible, setIsCreateUserModalVisible] = useState(false);
-  const [newlyCreatedUserId, setNewlyCreatedUserId] = useState<string | null>(null);
-  const [possibleUIRoles, setPossibleUIRoles] = useState<Record<string, Record<string, string>>>({});
-
-  useEffect(() => {
-    const fetchPossibleRoles = async () => {
-      try {
-        if (accessToken) {
-          // Check if roles are cached in session storage
-          const cachedRoles = sessionStorage.getItem("possibleUserRoles");
-          if (cachedRoles) {
-            setPossibleUIRoles(JSON.parse(cachedRoles));
-          } else {
-            const availableUserRoles = await getPossibleUserRoles(accessToken);
-            sessionStorage.setItem("possibleUserRoles", JSON.stringify(availableUserRoles));
-            setPossibleUIRoles(availableUserRoles);
-          }
-        }
-      } catch (error) {
-        console.error("Error fetching possible user roles:", error);
-      }
-    };
-
-    fetchPossibleRoles();
-  }, [accessToken]);
-
-  // Add a callback function to handle user creation
-  const handleUserCreated = (userId: string) => {
-    setNewlyCreatedUserId(userId);
-    form.setFieldsValue({ user_id: userId });
-    setIsCreateUserModalVisible(false);
-  };
-
-  const handleUserSelect = (_value: string, option: UserOption): void => {
-    const selectedUser = option.user;
-    form.setFieldsValue({
-      user_id: selectedUser.user_id,
-    });
-  };
-
-  return (
-    <div>
-      {userRole && rolesWithWriteAccess.includes(userRole) && (
-        <Button className="mx-auto" onClick={() => setIsModalVisible(true)}>
-          + Create New Key
-        </Button>
-      )}
-      <CreateKeyModal
-        isModalVisible={isModalVisible}
-        form={form}
-        handleUserSelect={handleUserSelect}
-        setIsCreateUserModalVisible={setIsCreateUserModalVisible}
-        team={team}
-        setIsModalVisible={setIsModalVisible}
-        data={data}
-        addKey={addKey}
-      />
-
-      {isCreateUserModalVisible && (
-        <Modal
-          title="Create New User"
-          open={isCreateUserModalVisible}
-          onCancel={() => setIsCreateUserModalVisible(false)}
-          footer={null}
-          width={800}
-        >
-          <CreateUserModal possibleUIRoles={possibleUIRoles} onUserCreated={handleUserCreated} isEmbedded={true} />
-        </Modal>
-      )}
-    </div>
-  );
-};
-
-export default CreateKey;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx
deleted file mode 100644
index 33a8ae06cf..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-"use client";
-
-import { TextInput, Title } from "@tremor/react";
-import { Form, FormInstance, Select, Tooltip } from "antd";
-import { InfoCircleOutlined } from "@ant-design/icons";
-import { getModelDisplayName } from "@/components/key_team_helpers/fetch_available_models_team_key";
-import React from "react";
-
-export interface KeyDetailsSectionProps {
-  form: FormInstance;
-  keyOwner: string;
-  modelsToPick: string[];
-  keyType: string;
-  setKeyType: (keyType: string) => void;
-}
-
-const { Option } = Select;
-
-const KeyDetailsSection = ({ form, keyOwner, keyType, modelsToPick, setKeyType }: KeyDetailsSectionProps) => {
-  return (
-    <div className="mb-8">
-      <Title className="mb-4">Key Details</Title>
-      <Form.Item
-        label={
-          <span>
-            {keyOwner === "you" || keyOwner === "another_user" ? "Key Name" : "Service Account ID"}{" "}
-            <Tooltip
-              title={
-                keyOwner === "you" || keyOwner === "another_user"
-                  ? "A descriptive name to identify this key"
-                  : "Unique identifier for this service account"
-              }
-            >
-              <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-            </Tooltip>
-          </span>
-        }
-        name="key_alias"
-        rules={[
-          {
-            required: true,
-            message: `Please input a ${keyOwner === "you" ? "key name" : "service account ID"}`,
-          },
-        ]}
-        help="required"
-      >
-        <TextInput placeholder="" />
-      </Form.Item>
-
-      <Form.Item
-        label={
-          <span>
-            Models{" "}
-            <Tooltip title="Select which models this key can access. Choose 'All Team Models' to grant access to all models available to the team">
-              <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-            </Tooltip>
-          </span>
-        }
-        name="models"
-        rules={
-          keyType === "management" || keyType === "read_only"
-            ? []
-            : [{ required: true, message: "Please select a model" }]
-        }
-        help={
-          keyType === "management" || keyType === "read_only"
-            ? "Models field is disabled for this key type"
-            : "required"
-        }
-        className="mt-4"
-      >
-        <Select
-          mode="multiple"
-          placeholder="Select models"
-          style={{ width: "100%" }}
-          disabled={keyType === "management" || keyType === "read_only"}
-          onChange={(values) => {
-            if (values.includes("all-team-models")) {
-              form.setFieldsValue({ models: ["all-team-models"] });
-            }
-          }}
-        >
-          <Option key="all-team-models" value="all-team-models">
-            All Team Models
-          </Option>
-          {modelsToPick.map((model: string) => (
-            <Option key={model} value={model}>
-              {getModelDisplayName(model)}
-            </Option>
-          ))}
-        </Select>
-      </Form.Item>
-
-      <Form.Item
-        label={
-          <span>
-            Key Type{" "}
-            <Tooltip title="Select the type of key to determine what routes and operations this key can access">
-              <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-            </Tooltip>
-          </span>
-        }
-        name="key_type"
-        initialValue="default"
-        className="mt-4"
-      >
-        <Select
-          defaultValue="default"
-          placeholder="Select key type"
-          style={{ width: "100%" }}
-          optionLabelProp="label"
-          onChange={(value) => {
-            setKeyType(value);
-            // Clear models field and disable if management or read_only
-            if (value === "management" || value === "read_only") {
-              form.setFieldsValue({ models: [] });
-            }
-          }}
-        >
-          <Option value="default" label="Default">
-            <div style={{ padding: "4px 0" }}>
-              <div style={{ fontWeight: 500 }}>Default</div>
-              <div style={{ fontSize: "11px", color: "#6b7280", marginTop: "2px" }}>
-                Can call LLM API + Management routes
-              </div>
-            </div>
-          </Option>
-          <Option value="llm_api" label="LLM API">
-            <div style={{ padding: "4px 0" }}>
-              <div style={{ fontWeight: 500 }}>LLM API</div>
-              <div style={{ fontSize: "11px", color: "#6b7280", marginTop: "2px" }}>
-                Can call only LLM API routes (chat/completions, embeddings, etc.)
-              </div>
-            </div>
-          </Option>
-          <Option value="management" label="Management">
-            <div style={{ padding: "4px 0" }}>
-              <div style={{ fontWeight: 500 }}>Management</div>
-              <div style={{ fontSize: "11px", color: "#6b7280", marginTop: "2px" }}>
-                Can call only management routes (user/team/key management)
-              </div>
-            </div>
-          </Option>
-        </Select>
-      </Form.Item>
-    </div>
-  );
-};
-
-export default KeyDetailsSection;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx
deleted file mode 100644
index b88f891944..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection.tsx
+++ /dev/null
@@ -1,460 +0,0 @@
-"use client";
-
-import { Accordion, AccordionBody, AccordionHeader, Text, Title } from "@tremor/react";
-import { Form, FormInstance, Input, Select, Tooltip } from "antd";
-import { InfoCircleOutlined } from "@ant-design/icons";
-import { formatNumberWithCommas } from "@/utils/dataUtils";
-import NumericalInput from "@/components/shared/numerical_input";
-import BudgetDurationDropdown from "@/components/common_components/budget_duration_dropdown";
-import RateLimitTypeFormItem from "@/components/common_components/RateLimitTypeFormItem";
-import VectorStoreSelector from "@/components/vector_store_management/VectorStoreSelector";
-import MCPServerSelector from "@/components/mcp_server_management/MCPServerSelector";
-import PremiumLoggingSettings from "@/components/common_components/PremiumLoggingSettings";
-import ModelAliasManager from "@/components/common_components/ModelAliasManager";
-import KeyLifecycleSettings from "@/components/common_components/KeyLifecycleSettings";
-import { proxyBaseUrl } from "@/components/networking";
-import SchemaFormFields from "@/components/common_components/check_openapi_schema";
-import { Team } from "@/components/key_team_helpers/key_list";
-import React from "react";
-import { DefaultOptionType } from "rc-select/lib/Select";
-import { ModelAliases } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/types";
-
-export interface OptionalSettingsSectionProps {
-  form: FormInstance;
-  team: Team | null;
-  premiumUser: boolean;
-  guardrails: string[];
-  prompts: string[];
-  accessToken: string;
-  predefinedTags: DefaultOptionType[];
-  loggingSettings: any;
-  setLoggingSettings: (settings: any) => void;
-  disabledCallbacks: string[];
-  setDisabledCallbacks: (disabledCallbacks: string[]) => void;
-  modelAliases: ModelAliases;
-  setModelAliases: (aliases: ModelAliases) => void;
-  autoRotationEnabled: boolean;
-  setAutoRotationEnabled: (enabled: boolean) => void;
-  rotationInterval: string;
-  setRotationInterval: (interval: string) => void;
-}
-
-// TODO: break apart this component into smaller sections
-const OptionalSettingsSection = ({
-  form,
-  team,
-  premiumUser,
-  guardrails,
-  prompts,
-  accessToken,
-  predefinedTags,
-  loggingSettings,
-  setLoggingSettings,
-  disabledCallbacks,
-  setDisabledCallbacks,
-  modelAliases,
-  setModelAliases,
-  autoRotationEnabled,
-  setAutoRotationEnabled,
-  rotationInterval,
-  setRotationInterval,
-}: OptionalSettingsSectionProps) => {
-  return (
-    <div className="mb-8">
-      <Accordion className="mt-4 mb-4">
-        <AccordionHeader>
-          <Title className="m-0">Optional Settings</Title>
-        </AccordionHeader>
-        <AccordionBody>
-          <Form.Item
-            className="mt-4"
-            label={
-              <span>
-                Max Budget (USD){" "}
-                <Tooltip title="Maximum amount in USD this key can spend. When reached, the key will be blocked from making further requests">
-                  <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-                </Tooltip>
-              </span>
-            }
-            name="max_budget"
-            help={`Budget cannot exceed team max budget: $${team?.max_budget !== null && team?.max_budget !== undefined ? team?.max_budget : "unlimited"}`}
-            rules={[
-              {
-                validator: async (_, value) => {
-                  if (value && team && team.max_budget !== null && value > team.max_budget) {
-                    throw new Error(
-                      `Budget cannot exceed team max budget: $${formatNumberWithCommas(team.max_budget, 4)}`,
-                    );
-                  }
-                },
-              },
-            ]}
-          >
-            <NumericalInput step={0.01} precision={2} width={200} />
-          </Form.Item>
-          <Form.Item
-            className="mt-4"
-            label={
-              <span>
-                Reset Budget{" "}
-                <Tooltip title="How often the budget should reset. For example, setting 'daily' will reset the budget every 24 hours">
-                  <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-                </Tooltip>
-              </span>
-            }
-            name="budget_duration"
-            help={`Team Reset Budget: ${team?.budget_duration !== null && team?.budget_duration !== undefined ? team?.budget_duration : "None"}`}
-          >
-            <BudgetDurationDropdown onChange={(value) => form.setFieldValue("budget_duration", value)} />
-          </Form.Item>
-          <Form.Item
-            className="mt-4"
-            label={
-              <span>
-                Tokens per minute Limit (TPM){" "}
-                <Tooltip title="Maximum number of tokens this key can process per minute. Helps control usage and costs">
-                  <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-                </Tooltip>
-              </span>
-            }
-            name="tpm_limit"
-            help={`TPM cannot exceed team TPM limit: ${team?.tpm_limit !== null && team?.tpm_limit !== undefined ? team?.tpm_limit : "unlimited"}`}
-            rules={[
-              {
-                validator: async (_, value) => {
-                  if (value && team && team.tpm_limit !== null && value > team.tpm_limit) {
-                    throw new Error(`TPM limit cannot exceed team TPM limit: ${team.tpm_limit}`);
-                  }
-                },
-              },
-            ]}
-          >
-            <NumericalInput step={1} width={400} />
-          </Form.Item>
-          <RateLimitTypeFormItem
-            type="tpm"
-            name="tpm_limit_type"
-            className="mt-4"
-            initialValue={null}
-            form={form}
-            showDetailedDescriptions={true}
-          />
-          <Form.Item
-            className="mt-4"
-            label={
-              <span>
-                Requests per minute Limit (RPM){" "}
-                <Tooltip title="Maximum number of API requests this key can make per minute. Helps prevent abuse and manage load">
-                  <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-                </Tooltip>
-              </span>
-            }
-            name="rpm_limit"
-            help={`RPM cannot exceed team RPM limit: ${team?.rpm_limit !== null && team?.rpm_limit !== undefined ? team?.rpm_limit : "unlimited"}`}
-            rules={[
-              {
-                validator: async (_, value) => {
-                  if (value && team && team.rpm_limit !== null && value > team.rpm_limit) {
-                    throw new Error(`RPM limit cannot exceed team RPM limit: ${team.rpm_limit}`);
-                  }
-                },
-              },
-            ]}
-          >
-            <NumericalInput step={1} width={400} />
-          </Form.Item>
-          <RateLimitTypeFormItem
-            type="rpm"
-            name="rpm_limit_type"
-            className="mt-4"
-            initialValue={null}
-            form={form}
-            showDetailedDescriptions={true}
-          />
-          <Form.Item
-            label={
-              <span>
-                Guardrails{" "}
-                <Tooltip title="Apply safety guardrails to this key to filter content or enforce policies">
-                  <a
-                    href="https://docs.litellm.ai/docs/proxy/guardrails/quick_start"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    onClick={(e) => e.stopPropagation()} // Prevent accordion from collapsing when clicking link
-                  >
-                    <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-                  </a>
-                </Tooltip>
-              </span>
-            }
-            name="guardrails"
-            className="mt-4"
-            help={
-              premiumUser
-                ? "Select existing guardrails or enter new ones"
-                : "Premium feature - Upgrade to set guardrails by key"
-            }
-          >
-            <Select
-              mode="tags"
-              style={{ width: "100%" }}
-              disabled={!premiumUser}
-              placeholder={
-                !premiumUser ? "Premium feature - Upgrade to set guardrails by key" : "Select or enter guardrails"
-              }
-              options={guardrails.map((name) => ({ value: name, label: name }))}
-            />
-          </Form.Item>
-          <Form.Item
-            label={
-              <span>
-                Prompts{" "}
-                <Tooltip title="Allow this key to use specific prompt templates">
-                  <a
-                    href="https://docs.litellm.ai/docs/proxy/prompt_management"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    onClick={(e) => e.stopPropagation()} // Prevent accordion from collapsing when clicking link
-                  >
-                    <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-                  </a>
-                </Tooltip>
-              </span>
-            }
-            name="prompts"
-            className="mt-4"
-            help={
-              premiumUser
-                ? "Select existing prompts or enter new ones"
-                : "Premium feature - Upgrade to set prompts by key"
-            }
-          >
-            <Select
-              mode="tags"
-              style={{ width: "100%" }}
-              disabled={!premiumUser}
-              placeholder={!premiumUser ? "Premium feature - Upgrade to set prompts by key" : "Select or enter prompts"}
-              options={prompts.map((name) => ({ value: name, label: name }))}
-            />
-          </Form.Item>
-          <Form.Item
-            label={
-              <span>
-                Allowed Vector Stores{" "}
-                <Tooltip title="Select which vector stores this key can access. If none selected, the key will have access to all available vector stores">
-                  <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-                </Tooltip>
-              </span>
-            }
-            name="allowed_vector_store_ids"
-            className="mt-4"
-            help="Select vector stores this key can access. Leave empty for access to all vector stores"
-          >
-            <VectorStoreSelector
-              onChange={(values: string[]) => form.setFieldValue("allowed_vector_store_ids", values)}
-              value={form.getFieldValue("allowed_vector_store_ids")}
-              accessToken={accessToken}
-              placeholder="Select vector stores (optional)"
-            />
-          </Form.Item>
-
-          <Form.Item
-            label={
-              <span>
-                Allowed MCP Servers{" "}
-                <Tooltip title="Select which MCP servers or access groups this key can access. ">
-                  <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-                </Tooltip>
-              </span>
-            }
-            name="allowed_mcp_servers_and_groups"
-            className="mt-4"
-            help="Select MCP servers or access groups this key can access. "
-          >
-            <MCPServerSelector
-              onChange={(val: any) => form.setFieldValue("allowed_mcp_servers_and_groups", val)}
-              value={form.getFieldValue("allowed_mcp_servers_and_groups")}
-              accessToken={accessToken}
-              placeholder="Select MCP servers or access groups (optional)"
-            />
-          </Form.Item>
-
-          <Form.Item
-            label={
-              <span>
-                Metadata{" "}
-                <Tooltip title="JSON object with additional information about this key. Used for tracking or custom logic">
-                  <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-                </Tooltip>
-              </span>
-            }
-            name="metadata"
-            className="mt-4"
-          >
-            <Input.TextArea rows={4} placeholder="Enter metadata as JSON" />
-          </Form.Item>
-          <Form.Item
-            label={
-              <span>
-                Tags{" "}
-                <Tooltip title="Tags for tracking spend and/or doing tag-based routing. Used for analytics and filtering">
-                  <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-                </Tooltip>
-              </span>
-            }
-            name="tags"
-            className="mt-4"
-            help={`Tags for tracking spend and/or doing tag-based routing.`}
-          >
-            <Select
-              mode="tags"
-              style={{ width: "100%" }}
-              placeholder="Enter tags"
-              tokenSeparators={[","]}
-              options={predefinedTags}
-            />
-          </Form.Item>
-
-          {premiumUser ? (
-            <Accordion className="mt-4 mb-4">
-              <AccordionHeader>
-                <b>Logging Settings</b>
-              </AccordionHeader>
-              <AccordionBody>
-                <div className="mt-4">
-                  <PremiumLoggingSettings
-                    value={loggingSettings}
-                    onChange={setLoggingSettings}
-                    premiumUser={true}
-                    disabledCallbacks={disabledCallbacks}
-                    onDisabledCallbacksChange={setDisabledCallbacks}
-                  />
-                </div>
-              </AccordionBody>
-            </Accordion>
-          ) : (
-            <Tooltip
-              title={
-                <span>
-                  Key-level logging settings is an enterprise feature, get in touch -
-                  <a href="https://www.litellm.ai/enterprise" target="_blank">
-                    https://www.litellm.ai/enterprise
-                  </a>
-                </span>
-              }
-              placement="top"
-            >
-              <div style={{ position: "relative" }}>
-                <div style={{ opacity: 0.5 }}>
-                  <Accordion className="mt-4 mb-4">
-                    <AccordionHeader>
-                      <b>Logging Settings</b>
-                    </AccordionHeader>
-                    <AccordionBody>
-                      <div className="mt-4">
-                        <PremiumLoggingSettings
-                          value={loggingSettings}
-                          onChange={setLoggingSettings}
-                          premiumUser={false}
-                          disabledCallbacks={disabledCallbacks}
-                          onDisabledCallbacksChange={setDisabledCallbacks}
-                        />
-                      </div>
-                    </AccordionBody>
-                  </Accordion>
-                </div>
-                <div style={{ position: "absolute", inset: 0, cursor: "not-allowed" }} />
-              </div>
-            </Tooltip>
-          )}
-
-          <Accordion className="mt-4 mb-4">
-            <AccordionHeader>
-              <b>Model Aliases</b>
-            </AccordionHeader>
-            <AccordionBody>
-              <div className="mt-4">
-                <Text className="text-sm text-gray-600 mb-4">
-                  Create custom aliases for models that can be used in API calls. This allows you to create shortcuts
-                  for specific models.
-                </Text>
-                <ModelAliasManager
-                  accessToken={accessToken}
-                  initialModelAliases={modelAliases}
-                  onAliasUpdate={setModelAliases}
-                  showExampleConfig={false}
-                />
-              </div>
-            </AccordionBody>
-          </Accordion>
-
-          <Accordion className="mt-4 mb-4">
-            <AccordionHeader>
-              <b>Key Lifecycle</b>
-            </AccordionHeader>
-            <AccordionBody>
-              <div className="mt-4">
-                <KeyLifecycleSettings
-                  form={form}
-                  autoRotationEnabled={autoRotationEnabled}
-                  onAutoRotationChange={setAutoRotationEnabled}
-                  rotationInterval={rotationInterval}
-                  onRotationIntervalChange={setRotationInterval}
-                />
-              </div>
-            </AccordionBody>
-          </Accordion>
-          <Accordion className="mt-4 mb-4">
-            <AccordionHeader>
-              <div className="flex items-center gap-2">
-                <b>Advanced Settings</b>
-                <Tooltip
-                  title={
-                    <span>
-                      Learn more about advanced settings in our{" "}
-                      <a
-                        href={
-                          proxyBaseUrl
-                            ? `${proxyBaseUrl}/#/key%20management/generate_key_fn_key_generate_post`
-                            : `/#/key%20management/generate_key_fn_key_generate_post`
-                        }
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-blue-400 hover:text-blue-300"
-                      >
-                        documentation
-                      </a>
-                    </span>
-                  }
-                >
-                  <InfoCircleOutlined className="text-gray-400 hover:text-gray-300 cursor-help" />
-                </Tooltip>
-              </div>
-            </AccordionHeader>
-            <AccordionBody>
-              <SchemaFormFields
-                schemaComponent="GenerateKeyRequest"
-                form={form}
-                excludedFields={[
-                  "key_alias",
-                  "team_id",
-                  "models",
-                  "duration",
-                  "metadata",
-                  "tags",
-                  "guardrails",
-                  "max_budget",
-                  "budget_duration",
-                  "tpm_limit",
-                  "rpm_limit",
-                ]}
-              />
-            </AccordionBody>
-          </Accordion>
-        </AccordionBody>
-      </Accordion>
-    </div>
-  );
-};
-
-export default OptionalSettingsSection;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx
deleted file mode 100644
index f08b4ea367..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-"use client";
-
-import { Button as Button2, Form, Radio, Select, Tooltip } from "antd";
-import { Title } from "@tremor/react";
-import { InfoCircleOutlined } from "@ant-design/icons";
-import TeamDropdown from "@/components/common_components/team_dropdown";
-import React from "react";
-import { Team } from "@/components/key_team_helpers/key_list";
-import { UserOption } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/types";
-
-interface OwnershipSectionProps {
-  team: Team | null;
-  teams: Team[] | null;
-  userRole: string | null;
-  userOptions: UserOption[];
-  keyOwner: string;
-  setKeyOwner: React.Dispatch<React.SetStateAction<string>>;
-  handleUserSearch: (q: string) => void;
-  userSearchLoading: boolean;
-  handleUserSelect: (q: string, option: UserOption) => void;
-  setSelectedCreateKeyTeam: React.Dispatch<React.SetStateAction<Team | null>>;
-  setIsCreateUserModalVisible: (visible: boolean) => void;
-}
-
-const OwnershipSection = ({
-  team,
-  teams,
-  userRole,
-  userOptions,
-  keyOwner,
-  setKeyOwner,
-  handleUserSearch,
-  userSearchLoading,
-  handleUserSelect,
-  setSelectedCreateKeyTeam,
-  setIsCreateUserModalVisible,
-}: OwnershipSectionProps) => {
-  return (
-    <div className="mb-8">
-      <Title className="mb-4">Key Ownership</Title>
-      <Form.Item
-        label={
-          <span>
-            Owned By{" "}
-            <Tooltip title="Select who will own this API key">
-              <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-            </Tooltip>
-          </span>
-        }
-        className="mb-4"
-      >
-        <Radio.Group onChange={(e) => setKeyOwner(e.target.value)} value={keyOwner}>
-          <Radio value="you">You</Radio>
-          <Radio value="service_account">Service Account</Radio>
-          {userRole === "Admin" && <Radio value="another_user">Another User</Radio>}
-        </Radio.Group>
-      </Form.Item>
-
-      {keyOwner === "another_user" && (
-        <Form.Item
-          label={
-            <span>
-              User ID{" "}
-              <Tooltip title="The user who will own this key and be responsible for its usage">
-                <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-              </Tooltip>
-            </span>
-          }
-          name="user_id"
-          className="mt-4"
-          rules={[
-            {
-              required: keyOwner === "another_user",
-              message: `Please input the user ID of the user you are assigning the key to`,
-            },
-          ]}
-        >
-          <div>
-            <div style={{ display: "flex", marginBottom: "8px" }}>
-              <Select
-                showSearch
-                placeholder="Type email to search for users"
-                filterOption={false}
-                onSearch={handleUserSearch}
-                onSelect={(value, option) => handleUserSelect(value, option as UserOption)}
-                options={userOptions}
-                loading={userSearchLoading}
-                allowClear
-                style={{ width: "100%" }}
-                notFoundContent={userSearchLoading ? "Searching..." : "No users found"}
-              />
-              <Button2 onClick={() => setIsCreateUserModalVisible(true)} style={{ marginLeft: "8px" }}>
-                Create User
-              </Button2>
-            </div>
-            <div className="text-xs text-gray-500">Search by email to find users</div>
-          </div>
-        </Form.Item>
-      )}
-      <Form.Item
-        label={
-          <span>
-            Team{" "}
-            <Tooltip title="The team this key belongs to, which determines available models and budget limits">
-              <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-            </Tooltip>
-          </span>
-        }
-        name="team_id"
-        initialValue={team ? team.team_id : null}
-        className="mt-4"
-        rules={[
-          {
-            required: keyOwner === "service_account",
-            message: "Please select a team for the service account",
-          },
-        ]}
-        help={keyOwner === "service_account" ? "required" : ""}
-      >
-        <TeamDropdown
-          teams={teams}
-          onChange={(teamId) => {
-            const selectedTeam = teams?.find((t) => t.team_id === teamId) || null;
-            setSelectedCreateKeyTeam(selectedTeam);
-          }}
-        />
-      </Form.Item>
-    </div>
-  );
-};
-
-export default OwnershipSection;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx
deleted file mode 100644
index cbe3db4e8f..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyModal.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-"use client";
-
-import { Button as Button2, Form, FormInstance, Modal } from "antd";
-import { Text } from "@tremor/react";
-import { keyCreateCall, keyCreateServiceAccountCall } from "@/components/networking";
-import React, { useEffect, useState } from "react";
-import { Team } from "@/components/key_team_helpers/key_list";
-import SaveKeyModal from "@/app/(dashboard)/virtual-keys/components/SaveKeyModal";
-import NotificationsManager from "@/components/molecules/notifications_manager";
-import {
-  useGuardrailsAndPrompts,
-  useMcpAccessGroups,
-  useTeamModels,
-  useUserModels,
-  useUserSearch,
-} from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks";
-import OwnershipSection from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OwnershipSection";
-import KeyDetailsSection from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/KeyDetailsSection";
-import OptionalSettingsSection from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/CreateKeyForm/OptionalSettingsSection";
-import { ModelAliases } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/types";
-import { getPredefinedTags, prepareFormValues } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/utils";
-import { fetchTeams } from "@/app/(dashboard)/virtual-keys/networking";
-import useTeams from "@/app/(dashboard)/virtual-keys/hooks/useTeams";
-import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-
-export interface CreateKeyModalProps {
-  isModalVisible: boolean;
-  setIsModalVisible: (isModalVisible: boolean) => void;
-  form: FormInstance;
-  handleUserSelect: (_value: string, option: UserOption) => void;
-  setIsCreateUserModalVisible: (visible: boolean) => void;
-  team: Team | null;
-  data: any[] | null;
-  addKey: (data: any) => void;
-}
-
-interface User {
-  user_id: string;
-  user_email: string;
-  role?: string;
-}
-
-interface UserOption {
-  label: string;
-  value: string;
-  user: User;
-}
-
-const CreateKeyModal = ({
-  isModalVisible,
-  setIsModalVisible,
-  form,
-  handleUserSelect,
-  setIsCreateUserModalVisible,
-  team,
-  data,
-  addKey,
-}: CreateKeyModalProps) => {
-  const { userId: userID, userRole, accessToken, premiumUser } = useAuthorized();
-  const [apiKey, setApiKey] = useState<string | null>(null);
-  const [keyOwner, setKeyOwner] = useState("you");
-  const [keyType, setKeyType] = useState<string>("default");
-
-  const [selectedCreateKeyTeam, setSelectedCreateKeyTeam] = useState<Team | null>(team);
-
-  const [softBudget, setSoftBudget] = useState<string | null>(null);
-  const [loggingSettings, setLoggingSettings] = useState<any[]>([]);
-  const [disabledCallbacks, setDisabledCallbacks] = useState<string[]>([]);
-  const [autoRotationEnabled, setAutoRotationEnabled] = useState<boolean>(false);
-  const [rotationInterval, setRotationInterval] = useState<string>("30d");
-  const [modelAliases, setModelAliases] = useState<ModelAliases>({});
-  const predefinedTags = getPredefinedTags(data);
-
-  const { options: userOptions, loading: userSearchLoading, onSearch: handleUserSearch } = useUserSearch();
-  const { guardrails, prompts } = useGuardrailsAndPrompts();
-  const teams = useTeams();
-  const mcpAccessGroups = useMcpAccessGroups();
-  const userModels = useUserModels();
-  const modelsToPick = useTeamModels(selectedCreateKeyTeam);
-
-  const isTeamSelectionRequired = modelsToPick.includes("no-default-models");
-  const isFormDisabled = isTeamSelectionRequired && !selectedCreateKeyTeam;
-
-  const handleCancel = () => {
-    setIsModalVisible(false);
-    setApiKey(null);
-    setSelectedCreateKeyTeam(null);
-    form.resetFields();
-    setLoggingSettings([]);
-    setDisabledCallbacks([]);
-    setKeyType("default");
-    setModelAliases({});
-    setAutoRotationEnabled(false);
-    setRotationInterval("30d");
-  };
-
-  const handleOk = () => {
-    setIsModalVisible(false);
-    form.resetFields();
-    setLoggingSettings([]);
-    setDisabledCallbacks([]);
-    setKeyType("default");
-    setModelAliases({});
-    setAutoRotationEnabled(false);
-    setRotationInterval("30d");
-  };
-
-  const handleCreate = async (formValues: Record<string, any>) => {
-    try {
-      const newKeyAlias = formValues?.key_alias ?? "";
-      const newKeyTeamId = formValues?.team_id ?? null;
-
-      const existingKeyAliases = data?.filter((k) => k.team_id === newKeyTeamId).map((k) => k.key_alias) ?? [];
-
-      if (existingKeyAliases.includes(newKeyAlias)) {
-        throw new Error(
-          `Key alias ${newKeyAlias} already exists for team with ID ${newKeyTeamId}, please provide another key alias`,
-        );
-      }
-
-      NotificationsManager.info("Making API Call");
-      setIsModalVisible(true);
-
-      const prepared = prepareFormValues(formValues, {
-        keyOwner,
-        userID,
-        loggingSettings,
-        disabledCallbacks,
-        autoRotationEnabled,
-        rotationInterval,
-        modelAliases,
-      });
-
-      let response;
-      if (keyOwner === "service_account") {
-        response = await keyCreateServiceAccountCall(accessToken, prepared);
-      } else {
-        response = await keyCreateCall(accessToken, userID, prepared);
-      }
-
-      // TODO: change logic to trigger API call in parent component
-      addKey(response);
-
-      setApiKey(response["key"]);
-      setSoftBudget(response["soft_budget"]);
-      NotificationsManager.success("API Key Created");
-      form.resetFields();
-      localStorage.removeItem("userData" + userID);
-    } catch (error) {
-      console.log("error in create key:", error);
-      NotificationsManager.fromBackend(`Error creating the key: ${error}`);
-    }
-  };
-
-  useEffect(() => {
-    form.setFieldValue("models", []);
-  }, [selectedCreateKeyTeam, accessToken, userID, userRole, form]);
-
-  return (
-    <div>
-      <Modal open={isModalVisible} width={1000} footer={null} onOk={handleOk} onCancel={handleCancel}>
-        <Form form={form} onFinish={handleCreate} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} labelAlign="left">
-          <OwnershipSection
-            team={team}
-            teams={teams}
-            userRole={userRole}
-            userOptions={userOptions}
-            keyOwner={keyOwner}
-            setKeyOwner={setKeyOwner}
-            handleUserSearch={handleUserSearch}
-            userSearchLoading={userSearchLoading}
-            handleUserSelect={handleUserSelect}
-            setSelectedCreateKeyTeam={setSelectedCreateKeyTeam}
-            setIsCreateUserModalVisible={setIsCreateUserModalVisible}
-          />
-
-          {/* Show message when team selection is required */}
-          {isFormDisabled && (
-            <div className="mb-8 p-4 bg-blue-50 border border-blue-200 rounded-md">
-              <Text className="text-blue-800 text-sm">
-                Please select a team to continue configuring your API key. If you do not see any teams, please contact
-                your Proxy Admin to either provide you with access to models or to add you to a team.
-              </Text>
-            </div>
-          )}
-
-          {/* Section 2: Key Details */}
-          {!isFormDisabled && (
-            <KeyDetailsSection
-              form={form}
-              keyOwner={keyOwner}
-              modelsToPick={modelsToPick}
-              keyType={keyType}
-              setKeyType={setKeyType}
-            />
-          )}
-
-          {/* Section 3: Optional Settings */}
-          {!isFormDisabled && (
-            <OptionalSettingsSection
-              form={form}
-              team={team}
-              premiumUser={premiumUser}
-              guardrails={guardrails}
-              prompts={prompts}
-              accessToken={accessToken}
-              predefinedTags={predefinedTags}
-              loggingSettings={loggingSettings}
-              setLoggingSettings={setLoggingSettings}
-              disabledCallbacks={disabledCallbacks}
-              setDisabledCallbacks={setDisabledCallbacks}
-              modelAliases={modelAliases}
-              setModelAliases={setModelAliases}
-              autoRotationEnabled={autoRotationEnabled}
-              setAutoRotationEnabled={setAutoRotationEnabled}
-              rotationInterval={rotationInterval}
-              setRotationInterval={setRotationInterval}
-            />
-          )}
-
-          <div style={{ textAlign: "right", marginTop: "10px" }}>
-            <Button2 htmlType="submit" disabled={isFormDisabled} style={{ opacity: isFormDisabled ? 0.5 : 1 }}>
-              Create Key
-            </Button2>
-          </div>
-        </Form>
-      </Modal>
-      {apiKey && (
-        <SaveKeyModal apiKey={apiKey} isModalVisible={isModalVisible} handleOk={handleOk} handleCancel={handleCancel} />
-      )}
-    </div>
-  );
-};
-
-export default CreateKeyModal;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/index.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/index.ts
deleted file mode 100644
index ca3c4a663b..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from "./useGuardrailsAndPrompts";
-export * from "./useMcpAccessGroups";
-export * from "./useUserModels";
-export * from "./useTeamModels";
-export * from "./useUserSearch";
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts
deleted file mode 100644
index f4718e8ba0..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useGuardrailsAndPrompts.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useEffect, useState } from "react";
-import { fetchGuardrails, fetchPrompts } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/networking";
-import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-
-export const useGuardrailsAndPrompts = () => {
-  const [guardrails, setGuardrails] = useState<string[]>([]);
-  const [prompts, setPrompts] = useState<string[]>([]);
-  const { accessToken } = useAuthorized();
-
-  useEffect(() => {
-    if (!accessToken) {
-      setGuardrails([]);
-      setPrompts([]);
-      return;
-    }
-    (async () => {
-      const [g, p] = await Promise.all([fetchGuardrails(accessToken), fetchPrompts(accessToken)]);
-      setGuardrails(g || []);
-      setPrompts(p || []);
-    })();
-  }, [accessToken]);
-
-  return { guardrails, prompts };
-};
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts
deleted file mode 100644
index 998b392f77..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useMcpAccessGroups.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useEffect, useState } from "react";
-import { getMCPAccessGroups } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/networking";
-import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-
-export const useMcpAccessGroups = () => {
-  const [mcpAccessGroups, setMcpAccessGroups] = useState<string[]>([]);
-  const { accessToken } = useAuthorized();
-
-  useEffect(() => {
-    if (!accessToken) {
-      setMcpAccessGroups([]);
-      return;
-    }
-    (async () => {
-      const groups = await getMCPAccessGroups(accessToken);
-      setMcpAccessGroups(groups || []);
-    })();
-  }, [accessToken]);
-
-  return mcpAccessGroups;
-};
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts
deleted file mode 100644
index dd99de0615..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useTeamModels.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import type { Team } from "@/components/key_team_helpers/key_list";
-import { fetchTeamModels } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/networking";
-import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-
-export const useTeamModels = (selectedTeam: Team | null) => {
-  const { userId: userID, userRole, accessToken } = useAuthorized();
-  const [modelsToPick, setModelsToPick] = useState<string[]>([]);
-
-  // turn array into a stable dep so it only re-runs when contents change
-  const selectedTeamModelsKey = useMemo(() => (selectedTeam?.models ?? []).join("|"), [selectedTeam?.models]);
-
-  useEffect(() => {
-    if (!userID || !userRole || !accessToken) {
-      setModelsToPick([]);
-      return;
-    }
-    (async () => {
-      const fetched = await fetchTeamModels(userID, userRole, accessToken, selectedTeam?.team_id ?? null);
-      const union = Array.from(new Set([...(selectedTeam?.models ?? []), ...(fetched || [])]));
-      setModelsToPick(union);
-    })();
-  }, [userID, userRole, accessToken, selectedTeam?.team_id, selectedTeamModelsKey, selectedTeam?.models]);
-
-  return modelsToPick;
-};
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts
deleted file mode 100644
index 66b5520f06..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useUserModels.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useEffect, useState } from "react";
-import { getUserModelNames } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/networking";
-import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-
-export const useUserModels = () => {
-  const { userId: userID, userRole, accessToken } = useAuthorized();
-  const [userModels, setUserModels] = useState<string[]>([]);
-
-  useEffect(() => {
-    if (!userID || !userRole || !accessToken) {
-      setUserModels([]);
-      return;
-    }
-    (async () => {
-      const modelNames = await getUserModelNames(userID, userRole, accessToken);
-      setUserModels(modelNames || []);
-    })();
-  }, [userID, userRole, accessToken]);
-
-  return userModels;
-};
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts
deleted file mode 100644
index d266a51667..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/hooks/useUserSearch.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import { debounce } from "lodash";
-import { searchUserOptionsByEmail } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/networking";
-import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-
-type User = { user_id: string; user_email: string; role?: string };
-export interface UserOption {
-  label: string;
-  value: string;
-  user: User;
-}
-
-export const useUserSearch = (delay = 300) => {
-  const { accessToken } = useAuthorized();
-  const [options, setOptions] = useState<UserOption[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  const doSearch = async (raw: string) => {
-    const q = raw?.trim();
-    if (!q || !accessToken) {
-      setOptions([]);
-      setLoading(false);
-      return;
-    }
-    setLoading(true);
-    try {
-      const res = await searchUserOptionsByEmail(accessToken, q);
-      setOptions(res || []);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const onSearch = useMemo(() => debounce(doSearch, delay), [accessToken, delay]);
-
-  useEffect(() => {
-    return () => onSearch.cancel();
-  }, [onSearch]);
-
-  return { options, loading, onSearch };
-};
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/networking.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/networking.ts
deleted file mode 100644
index 377f6d3113..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/networking.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import {
-  fetchMCPAccessGroups,
-  getGuardrailsList,
-  getPromptsList,
-  modelAvailableCall,
-  User,
-  userFilterUICall,
-} from "@/components/networking";
-import { ModelAvailableResponse, UserOption } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/types";
-
-export const fetchGuardrails = async (accessToken: string) => {
-  try {
-    const response = await getGuardrailsList(accessToken);
-    return response.guardrails.map((g: { guardrail_name: string }) => g.guardrail_name);
-  } catch (error) {
-    console.error("Failed to fetch guardrails:", error);
-    return [];
-  }
-};
-
-export const fetchPrompts = async (accessToken: string) => {
-  try {
-    const response = await getPromptsList(accessToken);
-    return response.prompts.map((prompt) => prompt.prompt_id);
-  } catch (error) {
-    console.error("Failed to fetch prompts:", error);
-    return [];
-  }
-};
-
-export const searchUserOptionsByEmail = async (accessToken: string, emailQuery: string): Promise<UserOption[]> => {
-  const params = new URLSearchParams();
-  params.append("user_email", emailQuery);
-
-  const response = await userFilterUICall(accessToken, params);
-  const users: User[] = response;
-
-  return users.map((user) => ({
-    label: `${user.user_email} (${user.user_id})`,
-    value: user.user_id,
-    user,
-  }));
-};
-
-export const getUserModelNames = async (userID: string, userRole: string, accessToken: string): Promise<string[]> => {
-  const res: ModelAvailableResponse = await modelAvailableCall(accessToken, userID, userRole);
-  return (res?.data ?? []).map((m) => m.id);
-};
-
-export const fetchTeamModels = async (
-  userID: string,
-  userRole: string,
-  accessToken: string,
-  teamID: string | null,
-): Promise<string[]> => {
-  try {
-    if (userID === null || userRole === null) {
-      return [];
-    }
-
-    if (accessToken !== null) {
-      const model_available = await modelAvailableCall(accessToken, userID, userRole, true, teamID, true);
-      let available_model_names = model_available["data"].map((element: { id: string }) => element.id);
-      console.log("available_model_names:", available_model_names);
-      return available_model_names;
-    }
-    return [];
-  } catch (error) {
-    console.error("Error fetching user models:", error);
-    return [];
-  }
-};
-
-export const getMCPAccessGroups = async (accessToken: string): Promise<string[]> => {
-  try {
-    if (accessToken == null) {
-      return [];
-    }
-    return await fetchMCPAccessGroups(accessToken);
-  } catch (error) {
-    console.error("Failed to fetch MCP access groups:", error);
-    return [];
-  }
-};
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/types.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/types.ts
deleted file mode 100644
index 4d48df82d4..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/types.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export interface User {
-  user_id: string;
-  user_email: string;
-  role?: string;
-}
-
-export interface UserOption {
-  label: string;
-  value: string;
-  user: User;
-}
-
-export type Model = { id: string };
-
-export type ModelAvailableResponse = { data: Model[] };
-
-export type ModelAliases = { [key: string]: string };
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/utils.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/utils.ts
deleted file mode 100644
index 1fb40b8789..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/CreateKeyModal/utils.ts
+++ /dev/null
@@ -1,187 +0,0 @@
-import { mapDisplayToInternalNames } from "@/components/callback_info_helpers";
-import { ModelAliases } from "@/app/(dashboard)/virtual-keys/components/CreateKeyModal/types";
-
-export const getPredefinedTags = (data: any[] | null) => {
-  let allTags = [];
-
-  console.log("data:", JSON.stringify(data));
-
-  if (data) {
-    for (let key of data) {
-      if (key["metadata"] && key["metadata"]["tags"]) {
-        allTags.push(...key["metadata"]["tags"]);
-      }
-    }
-  }
-
-  const uniqueTags = Array.from(new Set(allTags)).map((tag) => ({
-    value: tag,
-    label: tag,
-  }));
-
-  console.log("uniqueTags:", uniqueTags);
-  return uniqueTags;
-};
-
-type AnyObj = Record<string, any>;
-
-type PrepareOptions = {
-  keyOwner: string;
-  userID: string;
-  loggingSettings: any[];
-  disabledCallbacks: string[];
-  autoRotationEnabled: boolean;
-  rotationInterval: string;
-  modelAliases: ModelAliases;
-};
-
-export function safeParseMetadata(metadataStr: string | undefined): AnyObj {
-  try {
-    return JSON.parse(metadataStr || "{}");
-  } catch (error) {
-    console.error("Error parsing metadata:", error);
-    return {};
-  }
-}
-
-export function withOwnerAssignments(
-  values: AnyObj,
-  { keyOwner, userID }: Pick<PrepareOptions, "keyOwner" | "userID">,
-): AnyObj {
-  // If owned by "you", set user_id
-  const base = keyOwner === "you" ? { ...values, user_id: userID } : { ...values };
-  return base;
-}
-
-export function enrichMetadata(
-  metadata: AnyObj,
-  values: AnyObj,
-  {
-    keyOwner,
-    loggingSettings,
-    disabledCallbacks,
-  }: Pick<PrepareOptions, "keyOwner" | "loggingSettings" | "disabledCallbacks">,
-): AnyObj {
-  let next = { ...metadata };
-
-  // If it's a service account, add the service_account_id to the metadata
-  if (keyOwner === "service_account") {
-    next = { ...next, service_account_id: values.key_alias };
-  }
-
-  // Add logging settings to the metadata
-  if (Array.isArray(loggingSettings) && loggingSettings.length > 0) {
-    next = { ...next, logging: loggingSettings.filter((config: any) => config?.callback_name) };
-  }
-
-  // Add disabled callbacks to the metadata
-  if (Array.isArray(disabledCallbacks) && disabledCallbacks.length > 0) {
-    const mappedDisabledCallbacks = mapDisplayToInternalNames(disabledCallbacks);
-    next = { ...next, litellm_disabled_callbacks: mappedDisabledCallbacks };
-  }
-
-  return next;
-}
-
-export function withAutoRotation(
-  values: AnyObj,
-  { autoRotationEnabled, rotationInterval }: Pick<PrepareOptions, "autoRotationEnabled" | "rotationInterval">,
-): AnyObj {
-  if (!autoRotationEnabled) return { ...values };
-  return { ...values, auto_rotate: true, rotation_interval: rotationInterval };
-}
-
-export function withDurationNoop(values: AnyObj): AnyObj {
-  // Preserve the original no-op logic: if duration exists, set it to itself
-  if (values.duration) {
-    return { ...values, duration: values.duration };
-  }
-  return { ...values };
-}
-
-export function mergeObjectPermission(values: AnyObj, patch: AnyObj): AnyObj {
-  const object_permission = { ...(values.object_permission || {}), ...patch };
-  return { ...values, object_permission };
-}
-
-export function withVectorStores(values: AnyObj): AnyObj {
-  const { allowed_vector_store_ids, ...rest } = values;
-  if (Array.isArray(allowed_vector_store_ids) && allowed_vector_store_ids.length > 0) {
-    const patched = mergeObjectPermission(rest, { vector_stores: allowed_vector_store_ids });
-    return patched; // original field removed by destructuring
-  }
-  return { ...values };
-}
-
-export function withMcpServersAndGroups(values: AnyObj): AnyObj {
-  const { allowed_mcp_servers_and_groups, ...rest } = values;
-  const servers = allowed_mcp_servers_and_groups?.servers;
-  const accessGroups = allowed_mcp_servers_and_groups?.accessGroups;
-
-  const hasServers = Array.isArray(servers) && servers.length > 0;
-  const hasAccessGroups = Array.isArray(accessGroups) && accessGroups.length > 0;
-
-  if (!hasServers && !hasAccessGroups) return { ...values };
-
-  let patched = { ...rest };
-  if (hasServers) patched = mergeObjectPermission(patched, { mcp_servers: servers });
-  if (hasAccessGroups) patched = mergeObjectPermission(patched, { mcp_access_groups: accessGroups });
-
-  // original field removed by destructuring
-  return patched;
-}
-
-export function withMcpAccessGroups(values: AnyObj): AnyObj {
-  const { allowed_mcp_access_groups, ...rest } = values;
-  if (Array.isArray(allowed_mcp_access_groups) && allowed_mcp_access_groups.length > 0) {
-    const patched = mergeObjectPermission(rest, { mcp_access_groups: allowed_mcp_access_groups });
-    return patched; // original field removed by destructuring
-  }
-  return { ...values };
-}
-
-function withAliases(values: AnyObj, modelAliases: ModelAliases): AnyObj {
-  if (modelAliases && Object.keys(modelAliases).length > 0) {
-    return { ...values, aliases: JSON.stringify(modelAliases) };
-  }
-  return { ...values };
-}
-
-function withMetadataString(values: AnyObj, metadata: AnyObj): AnyObj {
-  return { ...values, metadata: JSON.stringify(metadata) };
-}
-
-export function prepareFormValues(initialValues: AnyObj, opts: PrepareOptions): AnyObj {
-  // Step 1: assign user id if needed
-  let values = withOwnerAssignments(initialValues, { keyOwner: opts.keyOwner, userID: opts.userID });
-
-  // Step 2: metadata parse & enrichment
-  const parsedMetadata = safeParseMetadata(values.metadata);
-  const enrichedMetadata = enrichMetadata(parsedMetadata, values, {
-    keyOwner: opts.keyOwner,
-    loggingSettings: opts.loggingSettings,
-    disabledCallbacks: opts.disabledCallbacks,
-  });
-
-  // Step 3: auto-rotation
-  values = withAutoRotation(values, {
-    autoRotationEnabled: opts.autoRotationEnabled,
-    rotationInterval: opts.rotationInterval,
-  });
-
-  // Step 4: duration (no-op preservation)
-  values = withDurationNoop(values);
-
-  // Step 5: commit metadata string
-  values = withMetadataString(values, enrichedMetadata);
-
-  // Step 6: object_permission transformations
-  values = withVectorStores(values);
-  values = withMcpServersAndGroups(values);
-  values = withMcpAccessGroups(values);
-
-  // Step 7: aliases
-  values = withAliases(values, opts.modelAliases);
-
-  return values;
-}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/KeyInfoView.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/KeyInfoView.tsx
deleted file mode 100644
index 9f9a47fbe1..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/KeyInfoView.tsx
+++ /dev/null
@@ -1,699 +0,0 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import {
-  Card,
-  Text,
-  Button,
-  Grid,
-  Tab,
-  TabList,
-  TabGroup,
-  TabPanel,
-  TabPanels,
-  Title,
-  Badge,
-} from "@tremor/react";
-import { ArrowLeftIcon, TrashIcon, RefreshIcon } from "@heroicons/react/outline";
-import { Form, Tooltip, Button as AntdButton } from "antd";
-import { copyToClipboard as utilCopyToClipboard, formatNumberWithCommas } from "@/utils/dataUtils";
-import { CopyIcon, CheckIcon } from "lucide-react";
-import { KeyResponse } from "@/components/key_team_helpers/key_list"
-import { mapDisplayToInternalNames, mapInternalToDisplayNames } from "@/components/callback_info_helpers"
-import NotificationManager from "@/components/molecules/notifications_manager"
-import { keyDeleteCall, keyUpdateCall } from "@/components/networking"
-import { parseErrorMessage } from "@/components/shared/errorUtils"
-import { rolesWithWriteAccess } from "@/utils/roles"
-import { RegenerateKeyModal } from "@/components/organisms/regenerate_key_modal"
-import ObjectPermissionsView from "@/components/object_permissions_view"
-import LoggingSettingsView from "@/components/logging_settings_view"
-import { extractLoggingSettings, formatMetadataForDisplay } from "@/components/key_info_utils"
-import AutoRotationView from "@/components/common_components/AutoRotationView"
-import { KeyEditView } from "@/components/templates/key_edit_view"
-
-
-interface KeyInfoViewProps {
-  keyId: string;
-  onClose: () => void;
-  keyData: KeyResponse | undefined;
-  onKeyDataUpdate?: (data: Partial<KeyResponse>) => void;
-  onDelete?: () => void;
-  accessToken: string | null;
-  userID: string | null;
-  userRole: string | null;
-  teams: any[] | null;
-  premiumUser: boolean;
-  setAccessToken?: (token: string) => void;
-  backButtonText?: string;
-}
-
-const KeyInfoView = ({
-                                      keyId,
-                                      onClose,
-                                      keyData,
-                                      accessToken,
-                                      userID,
-                                      userRole,
-                                      teams,
-                                      onKeyDataUpdate,
-                                      onDelete,
-                                      premiumUser,
-                                      setAccessToken,
-                                      backButtonText = "Back to Keys",
-                                    }: KeyInfoViewProps) => {
-  const [isEditing, setIsEditing] = useState(false);
-  const [form] = Form.useForm();
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [deleteConfirmInput, setDeleteConfirmInput] = useState("");
-  const [isRegenerateModalOpen, setIsRegenerateModalOpen] = useState(false);
-  const [copiedStates, setCopiedStates] = useState<Record<string, boolean>>({});
-
-  // Add local state to maintain key data and track regeneration
-  const [currentKeyData, setCurrentKeyData] = useState<KeyResponse | undefined>(keyData);
-  const [lastRegeneratedAt, setLastRegeneratedAt] = useState<Date | null>(null);
-  const [isRecentlyRegenerated, setIsRecentlyRegenerated] = useState(false);
-
-  // Update local state when keyData prop changes (but don't reset to undefined)
-  useEffect(() => {
-    if (keyData) {
-      setCurrentKeyData(keyData);
-    }
-  }, [keyData]);
-
-  // Reset recent regeneration indicator after 5 seconds
-  useEffect(() => {
-    if (isRecentlyRegenerated) {
-      const timer = setTimeout(() => {
-        setIsRecentlyRegenerated(false);
-      }, 5000);
-      return () => clearTimeout(timer);
-    }
-  }, [isRecentlyRegenerated]);
-
-  // Use currentKeyData instead of keyData throughout the component
-  if (!currentKeyData) {
-    return (
-      <div className="p-4">
-        <Button icon={ArrowLeftIcon} variant="light" onClick={onClose} className="mb-4">
-          {backButtonText}
-        </Button>
-        <Text>Key not found</Text>
-      </div>
-    );
-  }
-
-  const handleKeyUpdate = async (formValues: Record<string, any>) => {
-    try {
-      if (!accessToken) return;
-
-      const currentKey = formValues.token;
-      formValues.key = currentKey;
-
-      // Guard premium features
-      if (!premiumUser) {
-        delete formValues.guardrails;
-        delete formValues.prompts;
-      }
-
-      // Handle object_permission updates
-      if (formValues.vector_stores !== undefined) {
-        formValues.object_permission = {
-          ...currentKeyData.object_permission,
-          vector_stores: formValues.vector_stores || [],
-        };
-        // Remove vector_stores from the top level as it should be in object_permission
-        delete formValues.vector_stores;
-      }
-
-      if (formValues.mcp_servers_and_groups !== undefined) {
-        const { servers, accessGroups } = formValues.mcp_servers_and_groups || { servers: [], accessGroups: [] };
-        formValues.object_permission = {
-          ...currentKeyData.object_permission,
-          mcp_servers: servers || [],
-          mcp_access_groups: accessGroups || [],
-        };
-        // Remove mcp_servers_and_groups from the top level as it should be in object_permission
-        delete formValues.mcp_servers_and_groups;
-      }
-
-      // Convert metadata back to an object if it exists and is a string
-      if (formValues.metadata && typeof formValues.metadata === "string") {
-        try {
-          const parsedMetadata = JSON.parse(formValues.metadata);
-          formValues.metadata = {
-            ...parsedMetadata,
-            ...(formValues.guardrails?.length > 0 ? { guardrails: formValues.guardrails } : {}),
-            ...(formValues.logging_settings ? { logging: formValues.logging_settings } : {}),
-            ...(formValues.disabled_callbacks?.length > 0
-              ? {
-                litellm_disabled_callbacks: mapDisplayToInternalNames(formValues.disabled_callbacks),
-              }
-              : {}),
-          };
-        } catch (error) {
-          console.error("Error parsing metadata JSON:", error);
-          NotificationManager.error("Invalid metadata JSON");
-          return;
-        }
-      } else {
-        formValues.metadata = {
-          ...(formValues.metadata || {}),
-          ...(formValues.guardrails?.length > 0 ? { guardrails: formValues.guardrails } : {}),
-          ...(formValues.logging_settings ? { logging: formValues.logging_settings } : {}),
-          ...(formValues.disabled_callbacks?.length > 0
-            ? {
-              litellm_disabled_callbacks: mapDisplayToInternalNames(formValues.disabled_callbacks),
-            }
-            : {}),
-        };
-      }
-
-      delete formValues.logging_settings;
-
-      // Convert budget_duration to API format
-      if (formValues.budget_duration) {
-        const durationMap: Record<string, string> = {
-          daily: "24h",
-          weekly: "7d",
-          monthly: "30d",
-        };
-        formValues.budget_duration = durationMap[formValues.budget_duration];
-      }
-
-      const newKeyValues = await keyUpdateCall(accessToken, formValues);
-
-      // Update local state
-      setCurrentKeyData((prevData) => (prevData ? { ...prevData, ...newKeyValues } : undefined));
-
-      if (onKeyDataUpdate) {
-        onKeyDataUpdate(newKeyValues);
-      }
-      NotificationManager.success("Key updated successfully");
-      setIsEditing(false);
-      // Refresh key data here if needed
-    } catch (error) {
-      NotificationManager.fromBackend(parseErrorMessage(error));
-      console.error("Error updating key:", error);
-    }
-  };
-
-  const handleDelete = async () => {
-    try {
-      if (!accessToken) return;
-      await keyDeleteCall(accessToken as string, currentKeyData.token || currentKeyData.token_id);
-      NotificationManager.success("Key deleted successfully");
-      if (onDelete) {
-        onDelete();
-      }
-      onClose();
-    } catch (error) {
-      console.error("Error deleting the key:", error);
-      NotificationManager.fromBackend(error);
-    }
-    // Reset the confirmation input
-    setDeleteConfirmInput("");
-  };
-
-  const copyToClipboard = async (text: string, key: string) => {
-    const success = await utilCopyToClipboard(text);
-    if (success) {
-      setCopiedStates((prev) => ({ ...prev, [key]: true }));
-      setTimeout(() => {
-        setCopiedStates((prev) => ({ ...prev, [key]: false }));
-      }, 2000);
-    }
-  };
-
-  const handleRegenerateKeyUpdate = (updatedKeyData: Partial<KeyResponse>) => {
-    // Update local state immediately with ALL the new data
-    setCurrentKeyData((prevData) => {
-      if (!prevData) return undefined;
-      const newData = {
-        ...prevData,
-        ...updatedKeyData, // This should include the new token (key-id)
-        // Update the created_at to show when it was regenerated
-        created_at: new Date().toLocaleString(),
-      };
-      return newData;
-    });
-
-    // Track regeneration timestamp
-    setLastRegeneratedAt(new Date());
-    setIsRecentlyRegenerated(true);
-
-    if (onKeyDataUpdate) {
-      onKeyDataUpdate({
-        ...updatedKeyData,
-        created_at: new Date().toLocaleString(),
-      });
-    }
-  };
-
-  // Update the formatTimestamp function to use the desired date format
-  const formatTimestamp = (timestamp: string | Date) => {
-    const date = new Date(timestamp);
-    const dateStr = date.toLocaleDateString("en-US", {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    });
-    const timeStr = date.toLocaleTimeString("en-US", {
-      hour: "numeric",
-      minute: "2-digit",
-      hour12: true,
-    });
-    return `${dateStr} at ${timeStr}`;
-  };
-
-  return (
-    <div className="w-full h-screen p-4">
-      <div className="flex justify-between items-center mb-6">
-        <div>
-          <Button icon={ArrowLeftIcon} variant="light" onClick={onClose} className="mb-4">
-            {backButtonText}
-          </Button>
-          <Title>{currentKeyData.key_alias || "API Key"}</Title>
-
-          <div className="flex items-center cursor-pointer mb-2 space-y-6">
-            <div>
-              <Text className="text-xs text-gray-400 uppercase tracking-wide mt-2">Key ID</Text>
-              <Text className="text-gray-500 font-mono text-sm">{currentKeyData.token_id || currentKeyData.token}</Text>
-            </div>
-            <AntdButton
-              type="text"
-              size="small"
-              icon={copiedStates["key-id"] ? <CheckIcon size={12} /> : <CopyIcon size={12} />}
-              onClick={() => copyToClipboard(currentKeyData.token_id || currentKeyData.token, "key-id")}
-              className={`ml-2 transition-all duration-200${
-                copiedStates["key-id"]
-                  ? "text-green-600 bg-green-50 border-green-200"
-                  : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"
-              }`}
-            />
-          </div>
-
-          {/* Add timestamp and regeneration indicator */}
-          <div className="flex items-center gap-2 flex-wrap">
-            <Text className="text-sm text-gray-500">
-              {currentKeyData.updated_at && currentKeyData.updated_at !== currentKeyData.created_at
-                ? `Updated: ${formatTimestamp(currentKeyData.updated_at)}`
-                : `Created: ${formatTimestamp(currentKeyData.created_at)}`}
-            </Text>
-
-            {isRecentlyRegenerated && (
-              <Badge color="green" size="xs" className="animate-pulse">
-                Recently Regenerated
-              </Badge>
-            )}
-
-            {lastRegeneratedAt && (
-              <Badge color="blue" size="xs">
-                Regenerated
-              </Badge>
-            )}
-          </div>
-        </div>
-        {userRole && rolesWithWriteAccess.includes(userRole) && (
-          <div className="flex gap-2">
-            <Tooltip
-              title={!premiumUser ? "This is a LiteLLM Enterprise feature, and requires a valid key to use." : ""}
-            >
-              <span className="inline-block">
-                <Button
-                  icon={RefreshIcon}
-                  variant="secondary"
-                  onClick={() => setIsRegenerateModalOpen(true)}
-                  className="flex items-center"
-                  disabled={!premiumUser}
-                >
-                  Regenerate Key
-                </Button>
-              </span>
-            </Tooltip>
-            <Button
-              icon={TrashIcon}
-              variant="secondary"
-              onClick={() => setIsDeleteModalOpen(true)}
-              className="flex items-center"
-            >
-              Delete Key
-            </Button>
-          </div>
-        )}
-      </div>
-
-      {/* Add RegenerateKeyModal */}
-      <RegenerateKeyModal
-        selectedToken={currentKeyData}
-        visible={isRegenerateModalOpen}
-        onClose={() => setIsRegenerateModalOpen(false)}
-        accessToken={accessToken}
-        premiumUser={premiumUser}
-        setAccessToken={setAccessToken}
-        onKeyUpdate={handleRegenerateKeyUpdate}
-      />
-
-      {/* Delete Confirmation Modal */}
-      {isDeleteModalOpen &&
-        (() => {
-          const keyName = currentKeyData?.key_alias || currentKeyData?.token_id || "API Key";
-          const isValid = deleteConfirmInput === keyName;
-          return (
-            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-              <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl min-h-[380px] py-6 overflow-hidden transform transition-all flex flex-col justify-between">
-                <div>
-                  <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
-                    <h3 className="text-lg font-semibold text-gray-900">Delete Key</h3>
-                    <button
-                      onClick={() => {
-                        setIsDeleteModalOpen(false);
-                        setDeleteConfirmInput("");
-                      }}
-                      className="text-gray-400 hover:text-gray-500 focus:outline-none"
-                    >
-                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                      </svg>
-                    </button>
-                  </div>
-                  <div className="px-6 py-4">
-                    <div className="flex items-start gap-3 p-4 bg-red-50 border border-red-100 rounded-md mb-5">
-                      <div className="text-red-500 mt-0.5">
-                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.082 16.5c-.77.833.192 2.5 1.732 2.5z"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <p className="text-base font-medium text-red-600">
-                          Warning: You are about to delete this API key.
-                        </p>
-                        <p className="text-base text-red-600 mt-2">
-                          This action is irreversible and will immediately revoke access for any applications using this
-                          key.
-                        </p>
-                      </div>
-                    </div>
-                    <p className="text-base text-gray-600 mb-5">Are you sure you want to delete this API key?</p>
-                    <div className="mb-5">
-                      <label className="block text-base font-medium text-gray-700 mb-2">
-                        {`Type `}
-                        <span className="underline">{keyName}</span>
-                        {` to confirm deletion:`}
-                      </label>
-                      <input
-                        type="text"
-                        value={deleteConfirmInput}
-                        onChange={(e) => setDeleteConfirmInput(e.target.value)}
-                        placeholder="Enter key name exactly"
-                        className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-base"
-                        autoFocus
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div className="px-6 py-4 bg-gray-50 flex justify-end gap-4">
-                  <button
-                    onClick={() => {
-                      setIsDeleteModalOpen(false);
-                      setDeleteConfirmInput("");
-                    }}
-                    className="px-5 py-3 bg-white border border-gray-300 rounded-md text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    onClick={handleDelete}
-                    disabled={!isValid}
-                    className={`px-5 py-3 rounded-md text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 ${isValid ? "bg-red-600 hover:bg-red-700" : "bg-red-300 cursor-not-allowed"}`}
-                  >
-                    Delete Key
-                  </button>
-                </div>
-              </div>
-            </div>
-          );
-        })()}
-
-      <TabGroup>
-        <TabList className="mb-4">
-          <Tab>Overview</Tab>
-          <Tab>Settings</Tab>
-        </TabList>
-
-        <TabPanels>
-          {/* Overview Panel */}
-          <TabPanel>
-            <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-6">
-              <Card>
-                <Text>Spend</Text>
-                <div className="mt-2">
-                  <Title>${formatNumberWithCommas(currentKeyData.spend, 4)}</Title>
-                  <Text>
-                    of{" "}
-                    {currentKeyData.max_budget !== null
-                      ? `$${formatNumberWithCommas(currentKeyData.max_budget)}`
-                      : "Unlimited"}
-                  </Text>
-                </div>
-              </Card>
-
-              <Card>
-                <Text>Rate Limits</Text>
-                <div className="mt-2">
-                  <Text>TPM: {currentKeyData.tpm_limit !== null ? currentKeyData.tpm_limit : "Unlimited"}</Text>
-                  <Text>RPM: {currentKeyData.rpm_limit !== null ? currentKeyData.rpm_limit : "Unlimited"}</Text>
-                </div>
-              </Card>
-
-              <Card>
-                <Text>Models</Text>
-                <div className="mt-2 flex flex-wrap gap-2">
-                  {currentKeyData.models && currentKeyData.models.length > 0 ? (
-                    currentKeyData.models.map((model, index) => (
-                      <Badge key={index} color="red">
-                        {model}
-                      </Badge>
-                    ))
-                  ) : (
-                    <Text>No models specified</Text>
-                  )}
-                </div>
-              </Card>
-
-              <Card>
-                <ObjectPermissionsView
-                  objectPermission={currentKeyData.object_permission}
-                  variant="inline"
-                  accessToken={accessToken}
-                />
-              </Card>
-
-              <LoggingSettingsView
-                loggingConfigs={extractLoggingSettings(currentKeyData.metadata)}
-                disabledCallbacks={
-                  Array.isArray(currentKeyData.metadata?.litellm_disabled_callbacks)
-                    ? mapInternalToDisplayNames(currentKeyData.metadata.litellm_disabled_callbacks)
-                    : []
-                }
-                variant="card"
-              />
-
-              <AutoRotationView
-                autoRotate={currentKeyData.auto_rotate}
-                rotationInterval={currentKeyData.rotation_interval}
-                lastRotationAt={currentKeyData.last_rotation_at}
-                keyRotationAt={currentKeyData.key_rotation_at}
-                nextRotationAt={currentKeyData.next_rotation_at}
-                variant="card"
-              />
-            </Grid>
-          </TabPanel>
-
-          {/* Settings Panel */}
-          <TabPanel>
-            <Card className="overflow-y-auto max-h-[65vh]">
-              <div className="flex justify-between items-center mb-4">
-                <Title>Key Settings</Title>
-                {!isEditing && userRole && rolesWithWriteAccess.includes(userRole) && (
-                  <Button variant="light" onClick={() => setIsEditing(true)}>
-                    Edit Settings
-                  </Button>
-                )}
-              </div>
-
-              {isEditing ? (
-                <KeyEditView
-                  keyData={currentKeyData}
-                  onCancel={() => setIsEditing(false)}
-                  onSubmit={handleKeyUpdate}
-                  teams={teams}
-                  accessToken={accessToken}
-                  userID={userID}
-                  userRole={userRole}
-                  premiumUser={premiumUser}
-                />
-              ) : (
-                <div className="space-y-4">
-                  <div>
-                    <Text className="font-medium">Key ID</Text>
-                    <Text className="font-mono">{currentKeyData.token_id || currentKeyData.token}</Text>
-                  </div>
-
-                  <div>
-                    <Text className="font-medium">Key Alias</Text>
-                    <Text>{currentKeyData.key_alias || "Not Set"}</Text>
-                  </div>
-
-                  <div>
-                    <Text className="font-medium">Secret Key</Text>
-                    <Text className="font-mono">{currentKeyData.key_name}</Text>
-                  </div>
-
-                  <div>
-                    <Text className="font-medium">Team ID</Text>
-                    <Text>{currentKeyData.team_id || "Not Set"}</Text>
-                  </div>
-
-                  <div>
-                    <Text className="font-medium">Organization</Text>
-                    <Text>{currentKeyData.organization_id || "Not Set"}</Text>
-                  </div>
-
-                  <div>
-                    <Text className="font-medium">Created</Text>
-                    <Text>{formatTimestamp(currentKeyData.created_at)}</Text>
-                  </div>
-
-                  {lastRegeneratedAt && (
-                    <div>
-                      <Text className="font-medium">Last Regenerated</Text>
-                      <div className="flex items-center gap-2">
-                        <Text>{formatTimestamp(lastRegeneratedAt)}</Text>
-                        <Badge color="green" size="xs">
-                          Recent
-                        </Badge>
-                      </div>
-                    </div>
-                  )}
-
-                  <div>
-                    <Text className="font-medium">Expires</Text>
-                    <Text>{currentKeyData.expires ? formatTimestamp(currentKeyData.expires) : "Never"}</Text>
-                  </div>
-
-                  <AutoRotationView
-                    autoRotate={currentKeyData.auto_rotate}
-                    rotationInterval={currentKeyData.rotation_interval}
-                    lastRotationAt={currentKeyData.last_rotation_at}
-                    keyRotationAt={currentKeyData.key_rotation_at}
-                    nextRotationAt={currentKeyData.next_rotation_at}
-                    variant="inline"
-                    className="pt-4 border-t border-gray-200"
-                  />
-
-                  <div>
-                    <Text className="font-medium">Spend</Text>
-                    <Text>${formatNumberWithCommas(currentKeyData.spend, 4)} USD</Text>
-                  </div>
-
-                  <div>
-                    <Text className="font-medium">Budget</Text>
-                    <Text>
-                      {currentKeyData.max_budget !== null
-                        ? `$${formatNumberWithCommas(currentKeyData.max_budget, 2)}`
-                        : "Unlimited"}
-                    </Text>
-                  </div>
-
-                  <div>
-                    <Text className="font-medium">Prompts</Text>
-                    <Text>
-                      {Array.isArray(currentKeyData.metadata?.prompts) && currentKeyData.metadata.prompts.length > 0
-                        ? currentKeyData.metadata.prompts.map((prompt, index) => (
-                          <span key={index} className="px-2 mr-2 py-1 bg-blue-100 rounded text-xs">
-                              {prompt}
-                            </span>
-                        ))
-                        : "No prompts specified"}
-                    </Text>
-                  </div>
-
-                  <div>
-                    <Text className="font-medium">Models</Text>
-                    <div className="flex flex-wrap gap-2 mt-1">
-                      {currentKeyData.models && currentKeyData.models.length > 0 ? (
-                        currentKeyData.models.map((model, index) => (
-                          <span key={index} className="px-2 py-1 bg-blue-100 rounded text-xs">
-                            {model}
-                          </span>
-                        ))
-                      ) : (
-                        <Text>No models specified</Text>
-                      )}
-                    </div>
-                  </div>
-
-                  <div>
-                    <Text className="font-medium">Rate Limits</Text>
-                    <Text>TPM: {currentKeyData.tpm_limit !== null ? currentKeyData.tpm_limit : "Unlimited"}</Text>
-                    <Text>RPM: {currentKeyData.rpm_limit !== null ? currentKeyData.rpm_limit : "Unlimited"}</Text>
-                    <Text>
-                      Max Parallel Requests:{" "}
-                      {currentKeyData.max_parallel_requests !== null
-                        ? currentKeyData.max_parallel_requests
-                        : "Unlimited"}
-                    </Text>
-                    <Text>
-                      Model TPM Limits:{" "}
-                      {currentKeyData.metadata?.model_tpm_limit
-                        ? JSON.stringify(currentKeyData.metadata.model_tpm_limit)
-                        : "Unlimited"}
-                    </Text>
-                    <Text>
-                      Model RPM Limits:{" "}
-                      {currentKeyData.metadata?.model_rpm_limit
-                        ? JSON.stringify(currentKeyData.metadata.model_rpm_limit)
-                        : "Unlimited"}
-                    </Text>
-                  </div>
-
-                  <div>
-                    <Text className="font-medium">Metadata</Text>
-                    <pre className="bg-gray-100 p-2 rounded text-xs overflow-auto mt-1">
-                      {formatMetadataForDisplay(currentKeyData.metadata)}
-                    </pre>
-                  </div>
-
-                  <ObjectPermissionsView
-                    objectPermission={currentKeyData.object_permission}
-                    variant="inline"
-                    className="pt-4 border-t border-gray-200"
-                    accessToken={accessToken}
-                  />
-
-                  <LoggingSettingsView
-                    loggingConfigs={extractLoggingSettings(currentKeyData.metadata)}
-                    disabledCallbacks={
-                      Array.isArray(currentKeyData.metadata?.litellm_disabled_callbacks)
-                        ? mapInternalToDisplayNames(currentKeyData.metadata.litellm_disabled_callbacks)
-                        : []
-                    }
-                    variant="inline"
-                    className="pt-4 border-t border-gray-200"
-                  />
-                </div>
-              )}
-            </Card>
-          </TabPanel>
-        </TabPanels>
-      </TabGroup>
-    </div>
-  );
-}
-
-export default KeyInfoView;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/SaveKeyModal.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/SaveKeyModal.tsx
deleted file mode 100644
index fed678aadc..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/SaveKeyModal.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-"use client";
-
-import { Button, Col, Grid, Text, Title } from "@tremor/react";
-import { CopyToClipboard } from "react-copy-to-clipboard";
-import { Modal } from "antd";
-import React from "react";
-import NotificationsManager from "@/components/molecules/notifications_manager";
-
-export interface SaveKeyModalProps {
-  apiKey: string;
-  isModalVisible: boolean;
-  handleOk: () => void;
-  handleCancel: () => void;
-}
-
-const SaveKeyModal = ({ apiKey, isModalVisible, handleOk, handleCancel }: SaveKeyModalProps) => {
-  const handleCopy = () => {
-    NotificationsManager.success("API Key copied to clipboard");
-  };
-
-  return (
-    <Modal open={isModalVisible} onOk={handleOk} onCancel={handleCancel} footer={null}>
-      <Grid numItems={1} className="gap-2 w-full">
-        <Title>Save your Key</Title>
-        <Col numColSpan={1}>
-          <p>
-            Please save this secret key somewhere safe and accessible. For security reasons,{" "}
-            <b>you will not be able to view it again</b> through your LiteLLM account. If you lose this secret key, you
-            will need to generate a new one.
-          </p>
-        </Col>
-        <Col numColSpan={1}>
-          {apiKey != null ? (
-            <div>
-              <Text className="mt-3">API Key:</Text>
-              <div
-                style={{
-                  background: "#f8f8f8",
-                  padding: "10px",
-                  borderRadius: "5px",
-                  marginBottom: "10px",
-                }}
-              >
-                <pre style={{ wordWrap: "break-word", whiteSpace: "normal" }}>{apiKey}</pre>
-              </div>
-
-              <CopyToClipboard text={apiKey} onCopy={handleCopy}>
-                <Button className="mt-3">Copy API Key</Button>
-              </CopyToClipboard>
-            </div>
-          ) : (
-            <Text>Key being created, this might take 30s</Text>
-          )}
-        </Col>
-      </Grid>
-    </Modal>
-  );
-};
-
-export default SaveKeyModal;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
deleted file mode 100644
index 180d3336f1..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable.tsx
+++ /dev/null
@@ -1,667 +0,0 @@
-"use client";
-// TODO: refactor
-
-import React, { useEffect, useState } from "react";
-import { ColumnDef } from "@tanstack/react-table";
-import { Button } from "@tremor/react";
-import { Tooltip } from "antd";
-import { updateExistingKeys } from "@/utils/dataUtils";
-import { flexRender, getCoreRowModel, getSortedRowModel, SortingState, useReactTable } from "@tanstack/react-table";
-import { Table, TableHead, TableHeaderCell, TableBody, TableRow, TableCell, Icon } from "@tremor/react";
-import { SwitchVerticalIcon, ChevronUpIcon, ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/outline";
-import { Badge, Text } from "@tremor/react";
-import { formatNumberWithCommas } from "@/utils/dataUtils";
-import { KeyResponse, Team } from "@/components/key_team_helpers/key_list";
-import { Organization, userListCall } from "@/components/networking";
-import { getModelDisplayName } from "@/components/key_team_helpers/fetch_available_models_team_key";
-import FilterComponent, { FilterOption } from "@/components/molecules/filter";
-import { useFilterLogic } from "@/components/key_team_helpers/filter_logic";
-import useTeams from "@/app/(dashboard)/virtual-keys/hooks/useTeams";
-import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-import KeyInfoView from "@/app/(dashboard)/virtual-keys/components/KeyInfoView";
-
-interface AllKeysTableProps {
-  keys: KeyResponse[];
-  setKeys: (keys: KeyResponse[] | ((prev: KeyResponse[]) => KeyResponse[])) => void;
-  isLoading?: boolean;
-  pagination: {
-    currentPage: number;
-    totalPages: number;
-    totalCount: number;
-  };
-  onPageChange: (page: number) => void;
-  pageSize?: number;
-  organizations: Organization[] | null;
-  refresh?: () => void;
-  onSortChange?: (sortBy: string, sortOrder: "asc" | "desc") => void;
-  currentSort?: {
-    sortBy: string;
-    sortOrder: "asc" | "desc";
-  };
-  setAccessToken?: (token: string) => void;
-}
-
-interface UserResponse {
-  user_id: string;
-  user_email: string;
-  user_role: string;
-}
-
-const VirtualKeysTable = ({
-  keys,
-  setKeys,
-  isLoading = false,
-  pagination,
-  onPageChange,
-  pageSize = 50,
-  organizations,
-  refresh,
-  onSortChange,
-  currentSort,
-  setAccessToken,
-}: AllKeysTableProps) => {
-  const { userId: userID, userRole, accessToken, premiumUser } = useAuthorized();
-  const { teams } = useTeams();
-  const [selectedKeyId, setSelectedKeyId] = useState<string | null>(null);
-  const [userList, setUserList] = useState<UserResponse[]>([]);
-  const [sorting, setSorting] = React.useState<SortingState>(() => {
-    if (currentSort) {
-      return [
-        {
-          id: currentSort.sortBy,
-          desc: currentSort.sortOrder === "desc",
-        },
-      ];
-    }
-    return [
-      {
-        id: "created_at",
-        desc: true,
-      },
-    ];
-  });
-  const [expandedAccordions, setExpandedAccordions] = useState<Record<string, boolean>>({});
-
-  // Use the filter logic hook
-
-  const { filters, filteredKeys, allKeyAliases, allTeams, allOrganizations, handleFilterChange, handleFilterReset } =
-    useFilterLogic({
-      keys,
-      teams,
-      organizations,
-      accessToken,
-    });
-
-  useEffect(() => {
-    if (accessToken) {
-      const user_IDs = keys.map((key) => key.user_id).filter((id) => id !== null);
-      const fetchUserList = async () => {
-        const userListData = await userListCall(accessToken, user_IDs, 1, 100);
-        setUserList(userListData.users);
-      };
-      fetchUserList();
-    }
-  }, [accessToken, keys]);
-
-  // Add a useEffect to call refresh when a key is created
-  useEffect(() => {
-    if (!refresh || typeof window === "undefined") {
-      return;
-    }
-    const handleStorageChange = () => {
-      refresh();
-    };
-
-    // Listen for storage events that might indicate a key was created
-    window.addEventListener("storage", handleStorageChange);
-
-    return () => {
-      window.removeEventListener("storage", handleStorageChange);
-    };
-  }, [refresh]);
-
-  const columns: ColumnDef<KeyResponse>[] = [
-    {
-      id: "expander",
-      header: () => null,
-      cell: ({ row }) =>
-        row.getCanExpand() ? (
-          <button onClick={row.getToggleExpandedHandler()} style={{ cursor: "pointer" }}>
-            {row.getIsExpanded() ? "▼" : "▶"}
-          </button>
-        ) : null,
-    },
-    {
-      id: "token",
-      accessorKey: "token",
-      header: "Key ID",
-      cell: (info) => (
-        <div className="overflow-hidden">
-          <Tooltip title={info.getValue() as string}>
-            <Button
-              size="xs"
-              variant="light"
-              className="font-mono text-blue-500 bg-blue-50 hover:bg-blue-100 text-xs font-normal px-2 py-0.5 text-left overflow-hidden truncate max-w-[200px]"
-              onClick={() => setSelectedKeyId(info.getValue() as string)}
-            >
-              {info.getValue() ? `${(info.getValue() as string).slice(0, 7)}...` : "-"}
-            </Button>
-          </Tooltip>
-        </div>
-      ),
-    },
-    {
-      id: "key_alias",
-      accessorKey: "key_alias",
-      header: "Key Alias",
-      cell: (info) => {
-        const value = info.getValue() as string;
-        return (
-          <Tooltip title={value}>{value ? (value.length > 20 ? `${value.slice(0, 20)}...` : value) : "-"}</Tooltip>
-        );
-      },
-    },
-    {
-      id: "key_name",
-      accessorKey: "key_name",
-      header: "Secret Key",
-      cell: (info) => <span className="font-mono text-xs">{info.getValue() as string}</span>,
-    },
-    {
-      id: "team_alias",
-      accessorKey: "team_id",
-      header: "Team Alias",
-      cell: ({ row, getValue }) => {
-        const teamId = getValue() as string;
-        const team = teams?.find((t) => t.team_id === teamId);
-        return team?.team_alias || "Unknown";
-      },
-    },
-    {
-      id: "team_id",
-      accessorKey: "team_id",
-      header: "Team ID",
-      cell: (info) => (
-        <Tooltip title={info.getValue() as string}>
-          {info.getValue() ? `${(info.getValue() as string).slice(0, 7)}...` : "-"}
-        </Tooltip>
-      ),
-    },
-    {
-      id: "organization_id",
-      accessorKey: "organization_id",
-      header: "Organization ID",
-      cell: (info) => (info.getValue() ? info.renderValue() : "-"),
-    },
-    {
-      id: "user_email",
-      accessorKey: "user_id",
-      header: "User Email",
-      cell: (info) => {
-        const userId = info.getValue() as string;
-        const user = userList.find((u) => u.user_id === userId);
-        return user?.user_email ? (
-          <Tooltip title={user?.user_email}>
-            <span>{user?.user_email.slice(0, 20)}...</span>
-          </Tooltip>
-        ) : (
-          "-"
-        );
-      },
-    },
-    {
-      id: "user_id",
-      accessorKey: "user_id",
-      header: "User ID",
-      cell: (info) => {
-        const userId = info.getValue() as string | null;
-        if (userId && userId.length > 15) {
-          return (
-            <Tooltip title={userId}>
-              <span>{userId.slice(0, 7)}...</span>
-            </Tooltip>
-          );
-        }
-        return userId ? userId : "-";
-      },
-    },
-    {
-      id: "created_at",
-      accessorKey: "created_at",
-      header: "Created At",
-      cell: (info) => {
-        const value = info.getValue();
-        return value ? new Date(value as string).toLocaleDateString() : "-";
-      },
-    },
-    {
-      id: "created_by",
-      accessorKey: "created_by",
-      header: "Created By",
-      cell: (info) => {
-        const value = info.getValue() as string | null;
-        if (value && value.length > 15) {
-          return (
-            <Tooltip title={value}>
-              <span>{value.slice(0, 7)}...</span>
-            </Tooltip>
-          );
-        }
-        return value;
-      },
-    },
-    {
-      id: "updated_at",
-      accessorKey: "updated_at",
-      header: "Updated At",
-      cell: (info) => {
-        const value = info.getValue();
-        return value ? new Date(value as string).toLocaleDateString() : "Never";
-      },
-    },
-    {
-      id: "expires",
-      accessorKey: "expires",
-      header: "Expires",
-      cell: (info) => {
-        const value = info.getValue();
-        return value ? new Date(value as string).toLocaleDateString() : "Never";
-      },
-    },
-    {
-      id: "spend",
-      accessorKey: "spend",
-      header: "Spend (USD)",
-      cell: (info) => formatNumberWithCommas(info.getValue() as number, 4),
-    },
-    {
-      id: "max_budget",
-      accessorKey: "max_budget",
-      header: "Budget (USD)",
-      cell: (info) => {
-        const maxBudget = info.getValue() as number | null;
-        if (maxBudget === null) {
-          return "Unlimited";
-        }
-        return `$${formatNumberWithCommas(maxBudget)}`;
-      },
-    },
-    {
-      id: "budget_reset_at",
-      accessorKey: "budget_reset_at",
-      header: "Budget Reset",
-      cell: (info) => {
-        const value = info.getValue();
-        return value ? new Date(value as string).toLocaleString() : "Never";
-      },
-    },
-    {
-      id: "models",
-      accessorKey: "models",
-      header: "Models",
-      cell: (info) => {
-        const models = info.getValue() as string[];
-        return (
-          <div className="flex flex-col py-2">
-            {Array.isArray(models) ? (
-              <div className="flex flex-col">
-                {models.length === 0 ? (
-                  <Badge size={"xs"} className="mb-1" color="red">
-                    <Text>All Proxy Models</Text>
-                  </Badge>
-                ) : (
-                  <>
-                    <div className="flex items-start">
-                      {models.length > 3 && (
-                        <div>
-                          <Icon
-                            icon={expandedAccordions[info.row.id] ? ChevronDownIcon : ChevronRightIcon}
-                            className="cursor-pointer"
-                            size="xs"
-                            onClick={() => {
-                              setExpandedAccordions((prev) => ({
-                                ...prev,
-                                [info.row.id]: !prev[info.row.id],
-                              }));
-                            }}
-                          />
-                        </div>
-                      )}
-                      <div className="flex flex-wrap gap-1">
-                        {models.slice(0, 3).map((model, index) =>
-                          model === "all-proxy-models" ? (
-                            <Badge key={index} size={"xs"} color="red">
-                              <Text>All Proxy Models</Text>
-                            </Badge>
-                          ) : (
-                            <Badge key={index} size={"xs"} color="blue">
-                              <Text>
-                                {model.length > 30
-                                  ? `${getModelDisplayName(model).slice(0, 30)}...`
-                                  : getModelDisplayName(model)}
-                              </Text>
-                            </Badge>
-                          ),
-                        )}
-                        {models.length > 3 && !expandedAccordions[info.row.id] && (
-                          <Badge size={"xs"} color="gray" className="cursor-pointer">
-                            <Text>
-                              +{models.length - 3} {models.length - 3 === 1 ? "more model" : "more models"}
-                            </Text>
-                          </Badge>
-                        )}
-                        {expandedAccordions[info.row.id] && (
-                          <div className="flex flex-wrap gap-1">
-                            {models.slice(3).map((model, index) =>
-                              model === "all-proxy-models" ? (
-                                <Badge key={index + 3} size={"xs"} color="red">
-                                  <Text>All Proxy Models</Text>
-                                </Badge>
-                              ) : (
-                                <Badge key={index + 3} size={"xs"} color="blue">
-                                  <Text>
-                                    {model.length > 30
-                                      ? `${getModelDisplayName(model).slice(0, 30)}...`
-                                      : getModelDisplayName(model)}
-                                  </Text>
-                                </Badge>
-                              ),
-                            )}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </>
-                )}
-              </div>
-            ) : null}
-          </div>
-        );
-      },
-    },
-    {
-      id: "rate_limits",
-      header: "Rate Limits",
-      cell: ({ row }) => {
-        const key = row.original;
-        return (
-          <div>
-            <div>TPM: {key.tpm_limit !== null ? key.tpm_limit : "Unlimited"}</div>
-            <div>RPM: {key.rpm_limit !== null ? key.rpm_limit : "Unlimited"}</div>
-          </div>
-        );
-      },
-    },
-  ];
-
-  const filterOptions: FilterOption[] = [
-    {
-      name: "Team ID",
-      label: "Team ID",
-      isSearchable: true,
-      searchFn: async (searchText: string) => {
-        if (!allTeams || allTeams.length === 0) return [];
-
-        const filteredTeams = allTeams.filter(
-          (team) =>
-            team.team_id.toLowerCase().includes(searchText.toLowerCase()) ||
-            (team.team_alias && team.team_alias.toLowerCase().includes(searchText.toLowerCase())),
-        );
-
-        return filteredTeams.map((team) => ({
-          label: `${team.team_alias || team.team_id} (${team.team_id})`,
-          value: team.team_id,
-        }));
-      },
-    },
-    {
-      name: "Organization ID",
-      label: "Organization ID",
-      isSearchable: true,
-      searchFn: async (searchText: string) => {
-        if (!allOrganizations || allOrganizations.length === 0) return [];
-
-        const filteredOrgs = allOrganizations.filter(
-          (org) => org.organization_id?.toLowerCase().includes(searchText.toLowerCase()) ?? false,
-        );
-
-        return filteredOrgs
-          .filter((org) => org.organization_id !== null && org.organization_id !== undefined)
-          .map((org) => ({
-            label: `${org.organization_id || "Unknown"} (${org.organization_id})`,
-            value: org.organization_id as string,
-          }));
-      },
-    },
-    {
-      name: "Key Alias",
-      label: "Key Alias",
-      isSearchable: true,
-      searchFn: async (searchText) => {
-        const filteredKeyAliases = allKeyAliases.filter((key) => {
-          return key.toLowerCase().includes(searchText.toLowerCase());
-        });
-
-        return filteredKeyAliases.map((key) => {
-          return {
-            label: key,
-            value: key,
-          };
-        });
-      },
-    },
-    {
-      name: "User ID",
-      label: "User ID",
-      isSearchable: false,
-    },
-    {
-      name: "Key Hash",
-      label: "Key Hash",
-      isSearchable: false,
-    },
-  ];
-
-  console.log(`keys: ${JSON.stringify(keys)}`);
-
-  const table = useReactTable({
-    data: filteredKeys,
-    columns: columns.filter((col) => col.id !== "expander"),
-    state: {
-      sorting,
-    },
-    onSortingChange: (updaterOrValue) => {
-      const newSorting = typeof updaterOrValue === "function" ? updaterOrValue(sorting) : updaterOrValue;
-      console.log(`newSorting: ${JSON.stringify(newSorting)}`);
-      setSorting(newSorting);
-      if (newSorting && newSorting.length > 0) {
-        const sortState = newSorting[0];
-        const sortBy = sortState.id;
-        const sortOrder = sortState.desc ? "desc" : "asc";
-        console.log(`sortBy: ${sortBy}, sortOrder: ${sortOrder}`);
-        handleFilterChange({
-          ...filters,
-          "Sort By": sortBy,
-          "Sort Order": sortOrder,
-        });
-        onSortChange?.(sortBy, sortOrder);
-      }
-    },
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    enableSorting: true,
-    manualSorting: false,
-  });
-
-  // Update local sorting state when currentSort prop changes
-  React.useEffect(() => {
-    if (currentSort) {
-      setSorting([
-        {
-          id: currentSort.sortBy,
-          desc: currentSort.sortOrder === "desc",
-        },
-      ]);
-    }
-  }, [currentSort]);
-
-  return (
-    <div className="w-full h-full overflow-hidden">
-      {selectedKeyId ? (
-        <KeyInfoView
-          keyId={selectedKeyId}
-          onClose={() => setSelectedKeyId(null)}
-          keyData={filteredKeys.find((k) => k.token === selectedKeyId)}
-          onKeyDataUpdate={(updatedKeyData) => {
-            setKeys((keys) =>
-              keys.map((key) => {
-                if (key.token === updatedKeyData.token) {
-                  return updateExistingKeys(key, updatedKeyData);
-                }
-                return key;
-              }),
-            );
-            if (refresh) refresh(); // Minimal fix: refresh the full key list after an update
-          }}
-          onDelete={() => {
-            setKeys((keys) => keys.filter((key) => key.token !== selectedKeyId));
-            if (refresh) refresh(); // Minimal fix: refresh the full key list after a delete
-          }}
-          accessToken={accessToken}
-          userID={userID}
-          userRole={userRole}
-          teams={allTeams}
-          premiumUser={premiumUser}
-          setAccessToken={setAccessToken}
-        />
-      ) : (
-        <div className="border-b py-4 flex-1 overflow-hidden">
-          <div className="w-full mb-6">
-            <FilterComponent
-              options={filterOptions}
-              onApplyFilters={handleFilterChange}
-              initialValues={filters}
-              onResetFilters={handleFilterReset}
-            />
-          </div>
-
-          <div className="flex items-center justify-between w-full mb-4">
-            <span className="inline-flex text-sm text-gray-700">
-              Showing{" "}
-              {isLoading
-                ? "..."
-                : `${(pagination.currentPage - 1) * pageSize + 1} - ${Math.min(pagination.currentPage * pageSize, pagination.totalCount)}`}{" "}
-              of {isLoading ? "..." : pagination.totalCount} results
-            </span>
-
-            <div className="inline-flex items-center gap-2">
-              <span className="text-sm text-gray-700">
-                Page {isLoading ? "..." : pagination.currentPage} of {isLoading ? "..." : pagination.totalPages}
-              </span>
-
-              <button
-                onClick={() => onPageChange(pagination.currentPage - 1)}
-                disabled={isLoading || pagination.currentPage === 1}
-                className="px-3 py-1 text-sm border rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                Previous
-              </button>
-
-              <button
-                onClick={() => onPageChange(pagination.currentPage + 1)}
-                disabled={isLoading || pagination.currentPage === pagination.totalPages}
-                className="px-3 py-1 text-sm border rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                Next
-              </button>
-            </div>
-          </div>
-          <div className="h-[75vh] overflow-auto">
-            <div className="rounded-lg custom-border relative">
-              <div className="overflow-x-auto">
-                <Table className="[&_td]:py-0.5 [&_th]:py-1">
-                  <TableHead>
-                    {table.getHeaderGroups().map((headerGroup) => (
-                      <TableRow key={headerGroup.id}>
-                        {headerGroup.headers.map((header) => (
-                          <TableHeaderCell
-                            key={header.id}
-                            className={`py-1 h-8 ${
-                              header.id === "actions"
-                                ? "sticky right-0 bg-white shadow-[-4px_0_8px_-6px_rgba(0,0,0,0.1)]"
-                                : ""
-                            }`}
-                            onClick={header.column.getToggleSortingHandler()}
-                          >
-                            <div className="flex items-center justify-between gap-2">
-                              <div className="flex items-center">
-                                {header.isPlaceholder
-                                  ? null
-                                  : flexRender(header.column.columnDef.header, header.getContext())}
-                              </div>
-                              {header.id !== "actions" && (
-                                <div className="w-4">
-                                  {header.column.getIsSorted() ? (
-                                    {
-                                      asc: <ChevronUpIcon className="h-4 w-4 text-blue-500" />,
-                                      desc: <ChevronDownIcon className="h-4 w-4 text-blue-500" />,
-                                    }[header.column.getIsSorted() as string]
-                                  ) : (
-                                    <SwitchVerticalIcon className="h-4 w-4 text-gray-400" />
-                                  )}
-                                </div>
-                              )}
-                            </div>
-                          </TableHeaderCell>
-                        ))}
-                      </TableRow>
-                    ))}
-                  </TableHead>
-                  <TableBody>
-                    {isLoading ? (
-                      <TableRow>
-                        <TableCell colSpan={columns.length} className="h-8 text-center">
-                          <div className="text-center text-gray-500">
-                            <p>🚅 Loading keys...</p>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    ) : filteredKeys.length > 0 ? (
-                      table.getRowModel().rows.map((row) => (
-                        <TableRow key={row.id} className="h-8">
-                          {row.getVisibleCells().map((cell) => (
-                            <TableCell
-                              key={cell.id}
-                              style={{
-                                maxWidth: "8-x",
-                                whiteSpace: "pre-wrap",
-                                overflow: "hidden",
-                              }}
-                              className={`py-0.5 max-h-8 overflow-hidden text-ellipsis whitespace-nowrap ${cell.column.id === "models" && (cell.getValue() as string[]).length > 3 ? "px-0" : ""}`}
-                            >
-                              {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                            </TableCell>
-                          ))}
-                        </TableRow>
-                      ))
-                    ) : (
-                      <TableRow>
-                        <TableCell colSpan={columns.length} className="h-8 text-center">
-                          <div className="text-center text-gray-500">
-                            <p>No keys found</p>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    )}
-                  </TableBody>
-                </Table>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default VirtualKeysTable;
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/VirtualKeysTable/hooks/useFilterLogic.ts b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/VirtualKeysTable/hooks/useFilterLogic.ts
deleted file mode 100644
index ac174a554e..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/components/VirtualKeysTable/hooks/useFilterLogic.ts
+++ /dev/null
@@ -1,189 +0,0 @@
-import { useCallback, useEffect, useState, useRef } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { debounce } from "lodash";
-import { KeyResponse, Team } from "@/components/key_team_helpers/key_list";
-import { keyListCall, Organization } from "@/components/networking";
-import { defaultPageSize } from "@/components/constants";
-import { fetchAllKeyAliases, fetchAllOrganizations, fetchAllTeams } from "@/components/key_team_helpers/filter_helpers";
-
-export interface FilterState {
-  "Team ID": string;
-  "Organization ID": string;
-  "Key Alias": string;
-  [key: string]: string;
-  "User ID": string;
-  "Sort By": string;
-  "Sort Order": string;
-}
-
-export function useFilterLogic({
-  keys,
-  teams,
-  organizations,
-  accessToken,
-}: {
-  keys: KeyResponse[];
-  teams: Team[] | null;
-  organizations: Organization[] | null;
-  accessToken: string | null;
-}) {
-  const defaultFilters: FilterState = {
-    "Team ID": "",
-    "Organization ID": "",
-    "Key Alias": "",
-    "User ID": "",
-    "Sort By": "created_at",
-    "Sort Order": "desc",
-  };
-  const [filters, setFilters] = useState<FilterState>(defaultFilters);
-  const [allTeams, setAllTeams] = useState<Team[]>(teams || []);
-  const [allOrganizations, setAllOrganizations] = useState<Organization[]>(organizations || []);
-  const [filteredKeys, setFilteredKeys] = useState<KeyResponse[]>(keys);
-  const lastSearchTimestamp = useRef(0);
-  const debouncedSearch = useCallback(
-    debounce(async (filters: FilterState) => {
-      if (!accessToken) {
-        return;
-      }
-
-      const currentTimestamp = Date.now();
-      lastSearchTimestamp.current = currentTimestamp;
-
-      try {
-        // Make the API call using userListCall with all filter parameters
-        const data = await keyListCall(
-          accessToken,
-          filters["Organization ID"] || null,
-          filters["Team ID"] || null,
-          filters["Key Alias"] || null,
-          filters["User ID"] || null,
-          filters["Key Hash"] || null,
-          1, // Reset to first page when searching
-          defaultPageSize,
-          filters["Sort By"] || null,
-          filters["Sort Order"] || null,
-        );
-
-        // Only update state if this is the most recent search
-        if (currentTimestamp === lastSearchTimestamp.current) {
-          if (data) {
-            setFilteredKeys(data.keys);
-            console.log("called from debouncedSearch filters:", JSON.stringify(filters));
-            console.log("called from debouncedSearch data:", JSON.stringify(data));
-          }
-        }
-      } catch (error) {
-        console.error("Error searching users:", error);
-      }
-    }, 300),
-    [accessToken],
-  );
-  // Apply filters to keys whenever keys or filters change
-  useEffect(() => {
-    if (!keys) {
-      setFilteredKeys([]);
-      return;
-    }
-
-    let result = [...keys];
-
-    // Apply Team ID filter
-    if (filters["Team ID"]) {
-      result = result.filter((key) => key.team_id === filters["Team ID"]);
-    }
-
-    // Apply Organization ID filter
-    if (filters["Organization ID"]) {
-      result = result.filter((key) => key.organization_id === filters["Organization ID"]);
-    }
-
-    setFilteredKeys(result);
-  }, [keys, filters]);
-
-  // Fetch all data for filters when component mounts
-  useEffect(() => {
-    const loadAllFilterData = async () => {
-      // Load all teams - no organization filter needed here
-      const teamsData = await fetchAllTeams(accessToken);
-      if (teamsData.length > 0) {
-        setAllTeams(teamsData);
-      }
-
-      // Load all organizations
-      const orgsData = await fetchAllOrganizations(accessToken);
-      if (orgsData.length > 0) {
-        setAllOrganizations(orgsData);
-      }
-    };
-
-    if (accessToken) {
-      loadAllFilterData();
-    }
-  }, [accessToken]);
-
-  const queryAllKeysQuery = useQuery({
-    queryKey: ["allKeys"],
-    queryFn: async () => {
-      if (!accessToken) throw new Error("Access token required");
-      return await fetchAllKeyAliases(accessToken);
-    },
-    enabled: !!accessToken,
-  });
-  const allKeyAliases = queryAllKeysQuery.data || [];
-
-  // Update teams and organizations when props change
-  useEffect(() => {
-    if (teams && teams.length > 0) {
-      setAllTeams((prevTeams) => {
-        // Only update if we don't already have a larger set of teams
-        return prevTeams.length < teams.length ? teams : prevTeams;
-      });
-    }
-  }, [teams]);
-
-  useEffect(() => {
-    if (organizations && organizations.length > 0) {
-      setAllOrganizations((prevOrgs) => {
-        // Only update if we don't already have a larger set of organizations
-        return prevOrgs.length < organizations.length ? organizations : prevOrgs;
-      });
-    }
-  }, [organizations]);
-
-  const handleFilterChange = (newFilters: Record<string, string>) => {
-    // Update filters state
-    setFilters({
-      "Team ID": newFilters["Team ID"] || "",
-      "Organization ID": newFilters["Organization ID"] || "",
-      "Key Alias": newFilters["Key Alias"] || "",
-      "User ID": newFilters["User ID"] || "",
-      "Sort By": newFilters["Sort By"] || "created_at",
-      "Sort Order": newFilters["Sort Order"] || "desc",
-    });
-
-    // Fetch keys based on new filters
-    const updatedFilters = {
-      ...filters,
-      ...newFilters,
-    };
-    debouncedSearch(updatedFilters);
-  };
-
-  const handleFilterReset = () => {
-    // Reset filters state
-    setFilters(defaultFilters);
-
-    // Reset selections
-    debouncedSearch(defaultFilters);
-  };
-
-  return {
-    filters,
-    filteredKeys,
-    allKeyAliases,
-    allTeams,
-    allOrganizations,
-    handleFilterChange,
-    handleFilterReset,
-  };
-}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/page.tsx
index 611d92f1a3..56f780b296 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/page.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/virtual-keys/page.tsx
@@ -1,16 +1,18 @@
 "use client";
 
-import VirtualKeysTable from "@/app/(dashboard)/virtual-keys/components/VirtualKeysTable/VirtualKeysTable";
 import { useState } from "react";
-import useKeyList from "@/components/key_team_helpers/key_list";
+import useKeyList, { KeyResponse } from "@/components/key_team_helpers/key_list";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Col, Grid } from "@tremor/react";
-import CreateKey from "@/app/(dashboard)/virtual-keys/components/CreateKey";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import UserDashboard from "@/components/user_dashboard";
+import useTeams from "@/app/(dashboard)/hooks/useTeams";
+import { Organization } from "@/components/networking";
 
 const VirtualKeysPage = () => {
-  const { accessToken, userRole } = useAuthorized();
+  const { accessToken, userRole, userId, premiumUser, userEmail } = useAuthorized();
+  const { teams, setTeams } = useTeams();
   const [createClicked, setCreateClicked] = useState<boolean>(false);
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
 
   const queryClient = new QueryClient();
 
@@ -28,20 +30,21 @@ const VirtualKeysPage = () => {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <div className="w-full mx-4 h-[75vh]">
-        <Grid numItems={1} className="gap-2 p-8 w-full mt-2">
-          <Col numColSpan={1} className="flex flex-col gap-2">
-            <CreateKey team={null} userRole={userRole} data={null} addKey={addKey} />
-            <VirtualKeysTable
-              keys={keys}
-              setKeys={setKeys}
-              pagination={pagination}
-              onPageChange={() => {}}
-              organizations={null}
-            />
-          </Col>
-        </Grid>
-      </div>
+      <UserDashboard
+        userID={userId}
+        userRole={userRole}
+        userEmail={userEmail}
+        teams={teams}
+        keys={keys}
+        setUserRole={() => {}}
+        setUserEmail={() => {}}
+        setTeams={setTeams}
+        setKeys={setKeys}
+        premiumUser={premiumUser}
+        organizations={organizations}
+        addKey={addKey}
+        createClicked={createClicked}
+      />
     </QueryClientProvider>
   );
 };
diff --git a/ui/litellm-dashboard/src/components/templates/view_key_table.tsx b/ui/litellm-dashboard/src/components/templates/view_key_table.tsx
index d146d5ba79..86903d5553 100644
--- a/ui/litellm-dashboard/src/components/templates/view_key_table.tsx
+++ b/ui/litellm-dashboard/src/components/templates/view_key_table.tsx
@@ -90,7 +90,7 @@ interface ViewKeyTableProps {
   selectedTeam: Team | null;
   setSelectedTeam: React.Dispatch<React.SetStateAction<any | null>>;
   data: KeyResponse[] | null;
-  setData: React.Dispatch<React.SetStateAction<any[] | null>>;
+  setData: (keys: KeyResponse[]) => void;
   teams: Team[] | null;
   premiumUser: boolean;
   currentOrg: Organization | null;
@@ -135,13 +135,6 @@ interface CombinedLimits {
   [key: string]: CombinedLimit; // Index signature allowing string keys
 }
 
-/**
- * ─────────────────────────────────────────────────────────────────────────
- * @deprecated
- * This component is being DEPRECATED in favor of src/app/(dashboard)/virtual-keys/components/VirtualKeysTable/
- * Please contribute to the new refactor.
- * ─────────────────────────────────────────────────────────────────────────
- */
 const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
   userID,
   userRole,
diff --git a/ui/litellm-dashboard/src/components/user_dashboard.tsx b/ui/litellm-dashboard/src/components/user_dashboard.tsx
index b6470e4952..4d98b37a8f 100644
--- a/ui/litellm-dashboard/src/components/user_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/user_dashboard.tsx
@@ -20,11 +20,12 @@ import ViewUserTeam from "./view_user_team";
 import DashboardTeam from "./dashboard_default_team";
 import Onboarding from "../app/onboarding/page";
 import { useSearchParams, useRouter } from "next/navigation";
-import { Team } from "./key_team_helpers/key_list";
+import { KeyResponse, Team } from "./key_team_helpers/key_list";
 import { jwtDecode } from "jwt-decode";
 import { Typography } from "antd";
 import { clearTokenCookies } from "@/utils/cookieUtils";
 import { clearMCPAuthTokens } from "./mcp_tools/mcp_auth_storage";
+import { Setter } from "@/types";
 
 export interface ProxySettings {
   PROXY_BASE_URL: string | null;
@@ -56,7 +57,7 @@ interface UserDashboardProps {
   setUserRole: React.Dispatch<React.SetStateAction<string>>;
   setUserEmail: React.Dispatch<React.SetStateAction<string | null>>;
   setTeams: React.Dispatch<React.SetStateAction<Team[] | null>>;
-  setKeys: React.Dispatch<React.SetStateAction<Object[] | null>>;
+  setKeys: (keys: KeyResponse[]) => void;
   premiumUser: boolean;
   organizations: Organization[] | null;
   addKey: (data: any) => void;
diff --git a/ui/litellm-dashboard/src/components/view_users.tsx b/ui/litellm-dashboard/src/components/view_users.tsx
index 19479ce21a..7fcb7f54b8 100644
--- a/ui/litellm-dashboard/src/components/view_users.tsx
+++ b/ui/litellm-dashboard/src/components/view_users.tsx
@@ -30,6 +30,8 @@ import { updateExistingKeys } from "@/utils/dataUtils";
 import { useDebouncedState } from "@tanstack/react-pacer/debouncer";
 import { isAdminRole } from "@/utils/roles";
 import NotificationsManager from "./molecules/notifications_manager";
+import { Setter } from "@/types";
+import { KeyResponse } from "@/components/key_team_helpers/key_list";
 
 interface ViewUserDashboardProps {
   accessToken: string | null;

From 97031dc8eeac09b3576c6a40dffdce5d59084de5 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Wed, 8 Oct 2025 17:41:04 -0700
Subject: [PATCH 32/42] Fix - (openrouter): move cache_control to content
 blocks for claude/gemini (#15345)

* test_openrouter_transform_request_with_cache_control

* fix CacheControlSupportedModels

* test_openrouter_transform_request_with_cache_control_gemini
---
 .../llms/openrouter/chat/transformation.py    |  66 +++++-
 .../test_openrouter_chat_transformation.py    | 203 ++++++++++++++++++
 2 files changed, 268 insertions(+), 1 deletion(-)

diff --git a/litellm/llms/openrouter/chat/transformation.py b/litellm/llms/openrouter/chat/transformation.py
index bf57218c91..a47689a30b 100644
--- a/litellm/llms/openrouter/chat/transformation.py
+++ b/litellm/llms/openrouter/chat/transformation.py
@@ -6,6 +6,7 @@ Calls done in OpenAI/openai.py as OpenRouter is openai-compatible.
 Docs: https://openrouter.ai/docs/parameters
 """
 
+from enum import Enum
 from typing import Any, AsyncIterator, Iterator, List, Optional, Tuple, Union
 
 import httpx
@@ -20,6 +21,12 @@ from ...openai.chat.gpt_transformation import OpenAIGPTConfig
 from ..common_utils import OpenRouterException
 
 
+class CacheControlSupportedModels(str, Enum):
+    """Models that support cache_control in content blocks."""
+    CLAUDE = "claude"
+    GEMINI = "gemini"
+
+
 class OpenrouterConfig(OpenAIGPTConfig):
     def map_openai_params(
         self,
@@ -48,19 +55,73 @@ class OpenrouterConfig(OpenAIGPTConfig):
         )
         return mapped_openai_params
 
+    def _supports_cache_control_in_content(self, model: str) -> bool:
+        """
+        Check if the model supports cache_control in content blocks.
+        
+        Returns:
+            bool: True if model supports cache_control (Claude or Gemini models)
+        """
+        model_lower = model.lower()
+        return any(
+            supported_model.value in model_lower
+            for supported_model in CacheControlSupportedModels
+        )
+
     def remove_cache_control_flag_from_messages_and_tools(
         self,
         model: str,
         messages: List[AllMessageValues],
         tools: Optional[List["ChatCompletionToolParam"]] = None,
     ) -> Tuple[List[AllMessageValues], Optional[List["ChatCompletionToolParam"]]]:
-        if "claude" in model.lower():  # don't remove 'cache_control' flag
+        if self._supports_cache_control_in_content(model):
             return messages, tools
         else:
             return super().remove_cache_control_flag_from_messages_and_tools(
                 model, messages, tools
             )
 
+    def _move_cache_control_to_content(
+        self, messages: List[AllMessageValues]
+    ) -> List[AllMessageValues]:
+        """
+        Move cache_control from message level to content blocks.
+        OpenRouter requires cache_control to be inside content blocks, not at message level.
+        
+        When cache_control is at message level, it's added to ALL content blocks
+        to cache the entire message content.
+        """
+        transformed_messages = []
+        for message in messages:
+            message_copy = dict(message)
+            cache_control = message_copy.pop("cache_control", None)
+            
+            if cache_control is not None:
+                content = message_copy.get("content")
+                
+                if isinstance(content, list):
+                    # Content is already a list, add cache_control to all blocks
+                    if len(content) > 0:
+                        content_copy = []
+                        for block in content:
+                            block_copy = dict(block)
+                            block_copy["cache_control"] = cache_control
+                            content_copy.append(block_copy)
+                        message_copy["content"] = content_copy
+                else:
+                    # Content is a string, convert to structured format
+                    message_copy["content"] = [
+                        {
+                            "type": "text",
+                            "text": content,
+                            "cache_control": cache_control,
+                        }
+                    ]
+            
+            transformed_messages.append(message_copy)
+        
+        return transformed_messages
+
     def transform_request(
         self,
         model: str,
@@ -75,6 +136,9 @@ class OpenrouterConfig(OpenAIGPTConfig):
         Returns:
             dict: The transformed request. Sent as the body of the API call.
         """
+        if self._supports_cache_control_in_content(model):
+            messages = self._move_cache_control_to_content(messages)
+        
         extra_body = optional_params.pop("extra_body", {})
         response = super().transform_request(
             model, messages, optional_params, litellm_params, headers
diff --git a/tests/test_litellm/llms/openrouter/chat/test_openrouter_chat_transformation.py b/tests/test_litellm/llms/openrouter/chat/test_openrouter_chat_transformation.py
index 02eb872aba..ff81ba84c0 100644
--- a/tests/test_litellm/llms/openrouter/chat/test_openrouter_chat_transformation.py
+++ b/tests/test_litellm/llms/openrouter/chat/test_openrouter_chat_transformation.py
@@ -114,3 +114,206 @@ def test_openrouter_cache_control_flag_removal():
         headers={},
     )
     assert transformed_request["messages"][0].get("cache_control") is None
+
+
+
+def test_openrouter_transform_request_with_cache_control():
+    """
+    Test transform_request moves cache_control from message level to content blocks (string content).
+    
+    Input:
+    {
+        "role": "user",
+        "content": "what are the key terms...",
+        "cache_control": {"type": "ephemeral"}
+    }
+    
+    Expected Output:
+    {
+        "role": "user",
+        "content": [
+            {
+                "type": "text",
+                "text": "what are the key terms...",
+                "cache_control": {"type": "ephemeral"}
+            }
+        ]
+    }
+    """
+    import json
+    config = OpenrouterConfig()
+    
+    messages = [
+        {
+            "role": "system",
+            "content": [
+                {
+                    "type": "text",
+                    "text": "You are an AI assistant tasked with analyzing legal documents."
+                },
+                {
+                    "type": "text",
+                    "text": "Here is the full text of a complex legal agreement"
+                }
+            ]
+        },
+        {
+            "role": "user",
+            "content": "what are the key terms and conditions in this agreement?",
+            "cache_control": {"type": "ephemeral"}
+        }
+    ]
+    
+    transformed_request = config.transform_request(
+        model="openrouter/anthropic/claude-3-5-sonnet-20240620",
+        messages=messages,
+        optional_params={},
+        litellm_params={},
+        headers={},
+    )
+    
+    print("\n=== Transformed Request ===")
+    print(json.dumps(transformed_request, indent=4, default=str))
+    
+    assert "messages" in transformed_request
+    assert len(transformed_request["messages"]) == 2
+    
+    user_message = transformed_request["messages"][1]
+    assert user_message["role"] == "user"
+    assert isinstance(user_message["content"], list)
+    assert user_message["content"][0]["type"] == "text"
+    assert user_message["content"][0]["cache_control"] == {"type": "ephemeral"}
+
+
+def test_openrouter_transform_request_with_cache_control_list_content():
+    """
+    Test transform_request moves cache_control to all content blocks when content is already a list.
+    
+    Input:
+    {
+        "role": "system",
+        "content": [
+            {"type": "text", "text": "You are a historian..."},
+            {"type": "text", "text": "HUGE TEXT BODY"}
+        ],
+        "cache_control": {"type": "ephemeral"}
+    }
+    
+    Expected Output:
+    {
+        "role": "system",
+        "content": [
+            {
+                "type": "text",
+                "text": "You are a historian...",
+                "cache_control": {"type": "ephemeral"}
+            },
+            {
+                "type": "text",
+                "text": "HUGE TEXT BODY",
+                "cache_control": {"type": "ephemeral"}
+            }
+        ]
+    }
+    """
+    import json
+    config = OpenrouterConfig()
+    
+    messages = [
+        {
+            "role": "system",
+            "content": [
+                {
+                    "type": "text",
+                    "text": "You are a historian studying the fall of the Roman Empire."
+                },
+                {
+                    "type": "text",
+                    "text": "HUGE TEXT BODY"
+                }
+            ],
+            "cache_control": {"type": "ephemeral"}
+        },
+        {
+            "role": "user",
+            "content": "What triggered the collapse?"
+        }
+    ]
+    
+    transformed_request = config.transform_request(
+        model="openrouter/anthropic/claude-3-5-sonnet-20240620",
+        messages=messages,
+        optional_params={},
+        litellm_params={},
+        headers={},
+    )
+    
+    print("\n=== Transformed Request (List Content) ===")
+    print(json.dumps(transformed_request, indent=4, default=str))
+    
+    assert "messages" in transformed_request
+    assert len(transformed_request["messages"]) == 2
+    
+    system_message = transformed_request["messages"][0]
+    assert system_message["role"] == "system"
+    assert isinstance(system_message["content"], list)
+    assert len(system_message["content"]) == 2
+    assert system_message["content"][0]["cache_control"] == {"type": "ephemeral"}
+    assert system_message["content"][1]["cache_control"] == {"type": "ephemeral"}
+    assert "cache_control" not in system_message
+
+
+def test_openrouter_transform_request_with_cache_control_gemini():
+    """
+    Test transform_request moves cache_control to content blocks for Gemini models.
+    
+    Input:
+    {
+        "role": "user",
+        "content": "Analyze this data",
+        "cache_control": {"type": "ephemeral"}
+    }
+    
+    Expected Output:
+    {
+        "role": "user",
+        "content": [
+            {
+                "type": "text",
+                "text": "Analyze this data",
+                "cache_control": {"type": "ephemeral"}
+            }
+        ]
+    }
+    """
+    import json
+    config = OpenrouterConfig()
+    
+    messages = [
+        {
+            "role": "user",
+            "content": "Analyze this data",
+            "cache_control": {"type": "ephemeral"}
+        }
+    ]
+    
+    transformed_request = config.transform_request(
+        model="openrouter/google/gemini-2.0-flash-exp:free",
+        messages=messages,
+        optional_params={},
+        litellm_params={},
+        headers={},
+    )
+    
+    print("\n=== Transformed Request (Gemini) ===")
+    print(json.dumps(transformed_request, indent=4, default=str))
+    
+    assert "messages" in transformed_request
+    assert len(transformed_request["messages"]) == 1
+    
+    user_message = transformed_request["messages"][0]
+    assert user_message["role"] == "user"
+    assert isinstance(user_message["content"], list)
+    assert user_message["content"][0]["type"] == "text"
+    assert user_message["content"][0]["cache_control"] == {"type": "ephemeral"}
+    
\ No newline at end of file

From 3beb4a0797baee8694804b02aaa171be312ba1de Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Wed, 8 Oct 2025 17:54:48 -0700
Subject: [PATCH 33/42] added reload to base URL when FF is turned off

---
 .../src/app/(dashboard)/layout.tsx            |  2 +-
 ui/litellm-dashboard/src/app/page.tsx         |  1 -
 .../src/hooks/useFeatureFlags.tsx             | 25 +++++++++++++++++++
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx b/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx
index 3d38a7362b..68ab361356 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx
@@ -63,7 +63,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         />
         <div className="flex flex-1 overflow-auto">
           <div className="mt-2">
-            <Sidebar2 defaultSelectedKey={page} setPage={updatePage} accessToken={accessToken} userRole={userRole} />
+            <Sidebar2 defaultSelectedKey={page} accessToken={accessToken} userRole={userRole} />
           </div>
           <main className="flex-1">{children}</main>
         </div>
diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index ceee52399e..cefa680fc8 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -23,7 +23,6 @@ import ModelHubTable from "@/components/model_hub_table";
 import NewUsagePage from "@/components/new_usage";
 import APIRef from "@/components/api_ref";
 import ChatUI from "@/components/chat_ui/ChatUI";
-import Sidebar from "@/components/leftnav";
 import Usage from "@/components/usage";
 import CacheDashboard from "@/components/cache_dashboard";
 import { getUiConfig, proxyBaseUrl, setGlobalLitellmHeaderName } from "@/components/networking";
diff --git a/ui/litellm-dashboard/src/hooks/useFeatureFlags.tsx b/ui/litellm-dashboard/src/hooks/useFeatureFlags.tsx
index f1914f463a..d3d676d2d2 100644
--- a/ui/litellm-dashboard/src/hooks/useFeatureFlags.tsx
+++ b/ui/litellm-dashboard/src/hooks/useFeatureFlags.tsx
@@ -1,5 +1,13 @@
 "use client";
+
+const getBasePath = () => {
+  const raw = process.env.NEXT_PUBLIC_BASE_URL ?? "";
+  const trimmed = raw.replace(/^\/+|\/+$/g, ""); // strip leading/trailing slashes
+  return trimmed ? `/${trimmed}/` : "/"; // ensure trailing slash
+};
+
 import React, { createContext, useContext, useEffect, useState } from "react";
+import { useRouter } from "next/navigation"; // ⟵ add this
 
 type Flags = {
   refactoredUIFlag: boolean;
@@ -48,6 +56,8 @@ function writeFlagSafely(v: boolean) {
 }
 
 export const FeatureFlagsProvider = ({ children }: { children: React.ReactNode }) => {
+  const router = useRouter(); // ⟵ add this
+
   // Lazy init reads from localStorage only on the client
   const [refactoredUIFlag, setRefactoredUIFlagState] = useState<boolean>(() => readFlagSafely());
 
@@ -73,6 +83,21 @@ export const FeatureFlagsProvider = ({ children }: { children: React.ReactNode }
     return () => window.removeEventListener("storage", onStorage);
   }, []);
 
+  // Redirect to base path the moment the flag is OFF.
+  useEffect(() => {
+    if (refactoredUIFlag) return; // only act when turned off
+
+    const base = getBasePath();
+    const normalize = (p: string) => (p.endsWith("/") ? p : p + "/");
+    const current = normalize(window.location.pathname);
+
+    // Avoid a redirect loop if we're already at the base path.
+    if (current !== base) {
+      // Replace so the "off" redirect doesn't pollute history.
+      router.replace(base);
+    }
+  }, [refactoredUIFlag, router]);
+
   return (
     <FeatureFlagsCtx.Provider value={{ refactoredUIFlag, setRefactoredUIFlag }}>{children}</FeatureFlagsCtx.Provider>
   );

From ff4eda0ea67730da3363f2d151decb9ee3ce4e9c Mon Sep 17 00:00:00 2001
From: Achintya Rajan <achintya.rajan03@gmail.com>
Date: Wed, 8 Oct 2025 18:00:15 -0700
Subject: [PATCH 34/42] removed unscoped changes (will be added later)

---
 .../components/modals/CreateUserModal.tsx     | 346 ------------------
 .../src/components/leftnav.tsx                |  41 +--
 2 files changed, 18 insertions(+), 369 deletions(-)
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/components/modals/CreateUserModal.tsx

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/components/modals/CreateUserModal.tsx b/ui/litellm-dashboard/src/app/(dashboard)/components/modals/CreateUserModal.tsx
deleted file mode 100644
index be3ea48bf2..0000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/components/modals/CreateUserModal.tsx
+++ /dev/null
@@ -1,346 +0,0 @@
-"use client";
-
-// TODO: refactor
-import React, { useState, useEffect } from "react";
-import { Button, Modal, Form, Input, message, Select, InputNumber, Select as Select2 } from "antd";
-import {
-  Button as Button2,
-  Text,
-  TextInput,
-  SelectItem,
-  Accordion,
-  AccordionHeader,
-  AccordionBody,
-  Title,
-} from "@tremor/react";
-import NotificationsManager from "@/components/molecules/notifications_manager";
-const { Option } = Select;
-import { Tooltip } from "antd";
-import { InfoCircleOutlined } from "@ant-design/icons";
-import { useQueryClient } from "@tanstack/react-query";
-import OnboardingModal, { InvitationLink } from "@/components/onboarding_link";
-import {
-  getProxyBaseUrl,
-  getProxyUISettings,
-  invitationCreateCall,
-  modelAvailableCall,
-  Team,
-  userCreateCall,
-} from "@/components/networking";
-import { getModelDisplayName } from "@/components/key_team_helpers/fetch_available_models_team_key";
-import BulkCreateUsersButton from "@/components/bulk_create_users_button";
-import useTeams from "@/app/(dashboard)/hooks/useTeams";
-import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-
-// Helper function to generate UUID compatible across all environments
-const generateUUID = (): string => {
-  if (typeof crypto !== "undefined" && crypto.randomUUID) {
-    return crypto.randomUUID();
-  }
-  // Fallback UUID generation for environments without crypto.randomUUID
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
-    const r = (Math.random() * 16) | 0;
-    const v = c == "x" ? r : (r & 0x3) | 0x8;
-    return v.toString(16);
-  });
-};
-
-interface CreateUserModalProps {
-  possibleUIRoles: null | Record<string, Record<string, string>>;
-  onUserCreated?: (userId: string) => void;
-  isEmbedded?: boolean;
-}
-
-interface UISettings {
-  PROXY_BASE_URL: string | null;
-  PROXY_LOGOUT_URL: string | null;
-  DEFAULT_TEAM_DISABLED: boolean;
-  SSO_ENABLED: boolean;
-}
-
-const CreateUserModal: React.FC<CreateUserModalProps> = ({ possibleUIRoles, onUserCreated, isEmbedded = false }) => {
-  const { userId: userID, accessToken } = useAuthorized();
-  const queryClient = useQueryClient();
-  const [uiSettings, setUISettings] = useState<UISettings | null>(null);
-  const [form] = Form.useForm();
-  const [isModalVisible, setIsModalVisible] = useState(false);
-  const [apiuser, setApiuser] = useState<boolean>(false);
-  const [userModels, setUserModels] = useState<string[]>([]);
-  const [isInvitationLinkModalVisible, setIsInvitationLinkModalVisible] = useState(false);
-  const [invitationLinkData, setInvitationLinkData] = useState<InvitationLink | null>(null);
-  const [baseUrl, setBaseUrl] = useState<string | null>(null);
-  const { teams } = useTeams();
-
-  // get all models
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const userRole = "any"; // You may need to get the user role dynamically
-        const modelDataResponse = await modelAvailableCall(accessToken, userID, userRole);
-        // Assuming modelDataResponse.data contains an array of model objects with a 'model_name' property
-        const availableModels = [];
-        for (let i = 0; i < modelDataResponse.data.length; i++) {
-          const model = modelDataResponse.data[i];
-          availableModels.push(model.id);
-        }
-        console.log("Model data response:", modelDataResponse.data);
-        console.log("Available models:", availableModels);
-
-        // Assuming modelDataResponse.data contains an array of model names
-        setUserModels(availableModels);
-
-        // get ui settings
-        const uiSettingsResponse = await getProxyUISettings(accessToken);
-        console.log("uiSettingsResponse:", uiSettingsResponse);
-
-        setUISettings(uiSettingsResponse);
-      } catch (error) {
-        console.error("Error fetching model data:", error);
-      }
-    };
-
-    setBaseUrl(getProxyBaseUrl());
-
-    fetchData(); // Call the function to fetch model data when the component mounts
-  }, []); // Empty dependency array to run only once
-
-  const handleOk = () => {
-    setIsModalVisible(false);
-    form.resetFields();
-  };
-
-  const handleCancel = () => {
-    setIsModalVisible(false);
-    setApiuser(false);
-    form.resetFields();
-  };
-
-  const handleCreate = async (formValues: { user_id: string; models?: string[]; user_role: string }) => {
-    try {
-      NotificationsManager.info("Making API Call");
-      if (!isEmbedded) {
-        setIsModalVisible(true);
-      }
-      if ((!formValues.models || formValues.models.length === 0) && formValues.user_role !== "proxy_admin") {
-        console.log("formValues.user_role", formValues.user_role);
-        // If models is empty or undefined, set it to "no-default-models"
-        formValues.models = ["no-default-models"];
-      }
-      console.log("formValues in create user:", formValues);
-      const response = await userCreateCall(accessToken, null, formValues);
-      await queryClient.invalidateQueries({ queryKey: ["userList"] });
-      console.log("user create Response:", response);
-      setApiuser(true);
-      const user_id = response.data?.user_id || response.user_id;
-
-      // Call the callback if provided (for embedded mode)
-      if (onUserCreated && isEmbedded) {
-        onUserCreated(user_id);
-        form.resetFields();
-        return; // Skip the invitation flow when embedded
-      }
-
-      // only do invite link flow if sso is not enabled
-      if (!uiSettings?.SSO_ENABLED) {
-        invitationCreateCall(accessToken, user_id).then((data) => {
-          data.has_user_setup_sso = false;
-          setInvitationLinkData(data);
-          setIsInvitationLinkModalVisible(true);
-        });
-      } else {
-        // create an InvitationLink Object for this user for the SSO flow
-        // for SSO the invite link is the proxy base url since the User just needs to login
-        const invitationLink: InvitationLink = {
-          id: generateUUID(), // Generate a unique ID
-          user_id: user_id,
-          is_accepted: false,
-          accepted_at: null,
-          expires_at: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // Set expiry to 7 days from now
-          created_at: new Date(),
-          created_by: userID, // Assuming userID is the current user creating the invitation
-          updated_at: new Date(),
-          updated_by: userID,
-          has_user_setup_sso: true,
-        };
-        setInvitationLinkData(invitationLink);
-        setIsInvitationLinkModalVisible(true);
-      }
-
-      NotificationsManager.success("API user Created");
-      form.resetFields();
-      localStorage.removeItem("userData" + userID);
-    } catch (error: any) {
-      const errorMessage = error.response?.data?.detail || error?.message || "Error creating the user";
-      NotificationsManager.fromBackend(errorMessage);
-      console.error("Error creating the user:", error);
-    }
-  };
-
-  // Modify the return statement to handle embedded mode
-  if (isEmbedded) {
-    return (
-      <Form form={form} onFinish={handleCreate} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} labelAlign="left">
-        <Form.Item label="User Email" name="user_email">
-          <TextInput placeholder="" />
-        </Form.Item>
-        <Form.Item label="User Role" name="user_role">
-          <Select2>
-            {possibleUIRoles &&
-              Object.entries(possibleUIRoles).map(([role, { ui_label, description }]) => (
-                <SelectItem key={role} value={role} title={ui_label}>
-                  <div className="flex">
-                    {ui_label}{" "}
-                    <p className="ml-2" style={{ color: "gray", fontSize: "12px" }}>
-                      {description}
-                    </p>
-                  </div>
-                </SelectItem>
-              ))}
-          </Select2>
-        </Form.Item>
-        <Form.Item label="Team ID" name="team_id">
-          <Select placeholder="Select Team ID" style={{ width: "100%" }}>
-            {teams ? (
-              teams.map((team: any) => (
-                <Option key={team.team_id} value={team.team_id}>
-                  {team.team_alias}
-                </Option>
-              ))
-            ) : (
-              <Option key="default" value={null}>
-                Default Team
-              </Option>
-            )}
-          </Select>
-        </Form.Item>
-
-        <Form.Item label="Metadata" name="metadata">
-          <Input.TextArea rows={4} placeholder="Enter metadata as JSON" />
-        </Form.Item>
-
-        <div style={{ textAlign: "right", marginTop: "10px" }}>
-          <Button htmlType="submit">Create User</Button>
-        </div>
-      </Form>
-    );
-  }
-
-  // Original return for standalone mode
-  return (
-    <div className="flex gap-2">
-      <Button2 className="mb-0" onClick={() => setIsModalVisible(true)}>
-        + Invite User
-      </Button2>
-      <BulkCreateUsersButton accessToken={accessToken} teams={teams} possibleUIRoles={possibleUIRoles} />
-      <Modal
-        title="Invite User"
-        visible={isModalVisible}
-        width={800}
-        footer={null}
-        onOk={handleOk}
-        onCancel={handleCancel}
-      >
-        <Text className="mb-1">Create a User who can own keys</Text>
-        <Form form={form} onFinish={handleCreate} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} labelAlign="left">
-          <Form.Item label="User Email" name="user_email">
-            <TextInput placeholder="" />
-          </Form.Item>
-          <Form.Item
-            label={
-              <span>
-                Global Proxy Role{" "}
-                <Tooltip title="This is the role that the user will globally on the proxy. This role is independent of any team/org specific roles.">
-                  <InfoCircleOutlined />
-                </Tooltip>
-              </span>
-            }
-            name="user_role"
-          >
-            <Select2>
-              {possibleUIRoles &&
-                Object.entries(possibleUIRoles).map(([role, { ui_label, description }]) => (
-                  <SelectItem key={role} value={role} title={ui_label}>
-                    <div className="flex">
-                      {ui_label}{" "}
-                      <p className="ml-2" style={{ color: "gray", fontSize: "12px" }}>
-                        {description}
-                      </p>
-                    </div>
-                  </SelectItem>
-                ))}
-            </Select2>
-          </Form.Item>
-
-          <Form.Item
-            label="Team ID"
-            className="gap-2"
-            name="team_id"
-            help="If selected, user will be added as a 'user' role to the team."
-          >
-            <Select placeholder="Select Team ID" style={{ width: "100%" }}>
-              {teams ? (
-                teams.map((team: any) => (
-                  <Option key={team.team_id} value={team.team_id}>
-                    {team.team_alias}
-                  </Option>
-                ))
-              ) : (
-                <Option key="default" value={null}>
-                  Default Team
-                </Option>
-              )}
-            </Select>
-          </Form.Item>
-
-          <Form.Item label="Metadata" name="metadata">
-            <Input.TextArea rows={4} placeholder="Enter metadata as JSON" />
-          </Form.Item>
-          <Accordion>
-            <AccordionHeader>
-              <Title>Personal Key Creation</Title>
-            </AccordionHeader>
-            <AccordionBody>
-              <Form.Item
-                className="gap-2"
-                label={
-                  <span>
-                    Models{" "}
-                    <Tooltip title="Models user has access to, outside of team scope.">
-                      <InfoCircleOutlined style={{ marginLeft: "4px" }} />
-                    </Tooltip>
-                  </span>
-                }
-                name="models"
-                help="Models user has access to, outside of team scope."
-              >
-                <Select2 mode="multiple" placeholder="Select models" style={{ width: "100%" }}>
-                  <Select2.Option key="all-proxy-models" value="all-proxy-models">
-                    All Proxy Models
-                  </Select2.Option>
-                  {userModels.map((model) => (
-                    <Select2.Option key={model} value={model}>
-                      {getModelDisplayName(model)}
-                    </Select2.Option>
-                  ))}
-                </Select2>
-              </Form.Item>
-            </AccordionBody>
-          </Accordion>
-          <div style={{ textAlign: "right", marginTop: "10px" }}>
-            <Button htmlType="submit">Create User</Button>
-          </div>
-        </Form>
-      </Modal>
-      {apiuser && (
-        <OnboardingModal
-          isInvitationLinkModalVisible={isInvitationLinkModalVisible}
-          setIsInvitationLinkModalVisible={setIsInvitationLinkModalVisible}
-          baseUrl={baseUrl || ""}
-          invitationLinkData={invitationLinkData}
-        />
-      )}
-    </div>
-  );
-};
-
-export default CreateUserModal;
diff --git a/ui/litellm-dashboard/src/components/leftnav.tsx b/ui/litellm-dashboard/src/components/leftnav.tsx
index a0d8d162c6..e47691d3bb 100644
--- a/ui/litellm-dashboard/src/components/leftnav.tsx
+++ b/ui/litellm-dashboard/src/components/leftnav.tsx
@@ -1,4 +1,8 @@
 import { Layout, Menu } from "antd";
+import Link from "next/link";
+import { List } from "postcss/lib/list";
+import { Text, Button } from "@tremor/react";
+import { useState } from "react";
 import {
   KeyOutlined,
   PlayCircleOutlined,
@@ -56,17 +60,6 @@ interface MenuItem {
   icon?: React.ReactNode;
 }
 
-/** ---------- Base URL helpers ---------- */
-/**
- * Normalizes NEXT_PUBLIC_BASE_URL to either "/" or "/ui/" (always with a trailing slash).
- * Supported env values: "" or "ui/".
- */
-const getBasePath = () => {
-  const raw = process.env.NEXT_PUBLIC_BASE_URL ?? "";
-  const trimmed = raw.replace(/^\/+|\/+$/g, ""); // strip leading/trailing slashes
-  return trimmed ? `/${trimmed}/` : "/"; // ensure trailing slash
-};
-
 const Sidebar: React.FC<SidebarProps> = ({ accessToken, setPage, userRole, defaultSelectedKey, collapsed = false }) => {
   // Note: If a menu item does not have a role, it is visible to all roles.
   const menuItems: MenuItem[] = [
@@ -225,7 +218,6 @@ const Sidebar: React.FC<SidebarProps> = ({ accessToken, setPage, userRole, defau
       ],
     },
   ];
-
   // Find the menu item that matches the default page, including in submenus
   const findMenuItemKey = (page: string): string => {
     // Check top-level items
@@ -260,15 +252,6 @@ const Sidebar: React.FC<SidebarProps> = ({ accessToken, setPage, userRole, defau
     return true;
   });
 
-  // Centralized navigation that prefixes the base path ("/" or "/ui/")
-  const goTo = (page: string) => {
-    const base = getBasePath(); // "/" or "/ui/"
-    const newSearchParams = new URLSearchParams(window.location.search);
-    newSearchParams.set("page", page);
-    window.history.pushState(null, "", `${base}?${newSearchParams.toString()}`); // e.g. "/ui/?page=..."
-    setPage(page);
-  };
-
   return (
     <Layout style={{ minHeight: "100vh" }}>
       <Sider
@@ -312,9 +295,21 @@ const Sidebar: React.FC<SidebarProps> = ({ accessToken, setPage, userRole, defau
                 key: child.key,
                 icon: child.icon,
                 label: child.label,
-                onClick: () => goTo(child.page),
+                onClick: () => {
+                  const newSearchParams = new URLSearchParams(window.location.search);
+                  newSearchParams.set("page", child.page);
+                  window.history.pushState(null, "", `?${newSearchParams.toString()}`);
+                  setPage(child.page);
+                },
               })),
-              onClick: !item.children ? () => goTo(item.page) : undefined,
+              onClick: !item.children
+                ? () => {
+                    const newSearchParams = new URLSearchParams(window.location.search);
+                    newSearchParams.set("page", item.page);
+                    window.history.pushState(null, "", `?${newSearchParams.toString()}`);
+                    setPage(item.page);
+                  }
+                : undefined,
             }))}
           />
         </ConfigProvider>

From 2f42c806cbba2693b222026ec6cbc99432dff716 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Wed, 8 Oct 2025 18:10:43 -0700
Subject: [PATCH 35/42] [Fix] x-litellm-cache-key header not being returned on
 cache hit (#15348)

* fix: x-cache-key

* test_cache_key_in_hidden_params_acompletion

* fix: remove_cache_control_flag_from_messages_and_tools
---
 litellm/caching/caching_handler.py            | 16 ++----
 .../llms/openai/chat/gpt_transformation.py    |  8 +--
 tests/local_testing/test_caching.py           | 53 +++++++++++++++++++
 3 files changed, 62 insertions(+), 15 deletions(-)

diff --git a/litellm/caching/caching_handler.py b/litellm/caching/caching_handler.py
index 17cd50f75a..6bbc323122 100644
--- a/litellm/caching/caching_handler.py
+++ b/litellm/caching/caching_handler.py
@@ -14,10 +14,10 @@ It utilizes the (RedisCache, s3Cache, RedisSemanticCache, QdrantSemanticCache, I
 In each method it will call the appropriate method from caching.py
 """
 
-import time
 import asyncio
 import datetime
 import inspect
+import time
 from typing import (
     TYPE_CHECKING,
     Any,
@@ -62,12 +62,10 @@ else:
     LiteLLMLoggingObj = Any
 
 
-from litellm.litellm_core_utils.streaming_handler import CustomStreamWrapper
-
-
 from litellm.litellm_core_utils.core_helpers import (
-_get_parent_otel_span_from_kwargs,
+    _get_parent_otel_span_from_kwargs,
 )
+from litellm.litellm_core_utils.streaming_handler import CustomStreamWrapper
 
 
 class CachingHandlerResponse(BaseModel):
@@ -214,9 +212,7 @@ class LLMCachingHandler:
                             end_time=end_time,
                             cache_hit=cache_hit,
                         )
-                    cache_key = litellm.cache._get_preset_cache_key_from_kwargs(
-                        **kwargs
-                    )
+                    cache_key = litellm.cache.get_cache_key(**kwargs)
                     if (
                         isinstance(cached_result, BaseModel)
                         or isinstance(cached_result, CustomStreamWrapper)
@@ -330,9 +326,7 @@ class LLMCachingHandler:
                         end_time=end_time,
                         cache_hit=cache_hit
                     )
-                    cache_key = litellm.cache._get_preset_cache_key_from_kwargs(
-                        **kwargs
-                    )
+                    cache_key = litellm.cache.get_cache_key(**kwargs)
                     if (
                         isinstance(cached_result, BaseModel)
                         or isinstance(cached_result, CustomStreamWrapper)
diff --git a/litellm/llms/openai/chat/gpt_transformation.py b/litellm/llms/openai/chat/gpt_transformation.py
index 204916e3a4..3e18617905 100644
--- a/litellm/llms/openai/chat/gpt_transformation.py
+++ b/litellm/llms/openai/chat/gpt_transformation.py
@@ -397,13 +397,13 @@ class OpenAIGPTConfig(BaseLLMModelInfo, BaseConfig):
         )
         from litellm.types.llms.openai import ChatCompletionToolParam
 
-        for message in messages:
-            message = cast(
+        for i, message in enumerate(messages):
+            messages[i] = cast(
                 AllMessageValues, filter_value_from_dict(message, "cache_control")  # type: ignore
             )
         if tools is not None:
-            for tool in tools:
-                tool = cast(
+            for i, tool in enumerate(tools):
+                tools[i] = cast(
                     ChatCompletionToolParam,
                     filter_value_from_dict(tool, "cache_control"),  # type: ignore
                 )
diff --git a/tests/local_testing/test_caching.py b/tests/local_testing/test_caching.py
index ee3082a9d3..30bacfff8b 100644
--- a/tests/local_testing/test_caching.py
+++ b/tests/local_testing/test_caching.py
@@ -2765,3 +2765,56 @@ def test_caching_thinking_args_hit():  # test in memory cache
     except Exception as e:
         print(f"error occurred: {traceback.format_exc()}")
         pytest.fail(f"Error occurred: {e}")
+
+
+@pytest.mark.asyncio
+async def test_cache_key_in_hidden_params_acompletion():
+    """
+    Test that cache_key is present in _hidden_params on cache hits for acompletion.
+    
+    Validates fix for missing x-litellm-cache-key header on proxy cache hits.
+    """
+    litellm.cache = Cache(
+        type="redis",
+        host=os.environ["REDIS_HOST"],
+        port=os.environ["REDIS_PORT"],
+        password=os.environ["REDIS_PASSWORD"],
+    )
+    
+    unique_content = f"test cache key hidden params {uuid.uuid4()}"
+    messages = [{"role": "user", "content": unique_content}]
+    
+    # First call - cache miss
+    response1 = await litellm.acompletion(
+        model="gpt-3.5-turbo",
+        messages=messages,
+        mock_response="test response",
+        caching=True,
+    )
+    
+    print(f"Response 1 _hidden_params: {response1._hidden_params}")
+    assert response1._hidden_params.get("cache_hit") is not True
+    
+    await asyncio.sleep(0.5)
+    
+    # Second call - cache hit
+    response2 = await litellm.acompletion(
+        model="gpt-3.5-turbo",
+        messages=messages,
+        mock_response="test response",
+        caching=True,
+    )
+    
+    print(f"Response 2 _hidden_params: {response2._hidden_params}")
+    
+    # Verify cache hit occurred
+    assert response2._hidden_params.get("cache_hit") is True
+    
+    # Verify cache_key is present in _hidden_params
+    assert "cache_key" in response2._hidden_params
+    assert response2._hidden_params["cache_key"] is not None
+    
+    # Verify both responses have same ID (cache hit)
+    assert response1.id == response2.id
+    
+    litellm.cache = None

From 422631409678036468a9fdc927c4cdca3a9196a7 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Wed, 8 Oct 2025 18:31:26 -0700
Subject: [PATCH 36/42] Add native Responses API support for litellm_proxy
 provider (#15347)

* Initial plan

* Add native Responses API support for litellm_proxy provider

Co-authored-by: ishaan-jaff <29436595+ishaan-jaff@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: ishaan-jaff <29436595+ishaan-jaff@users.noreply.github.com>
---
 litellm/__init__.py                           |  3 +
 .../litellm_proxy/responses/transformation.py | 48 +++++++++++
 litellm/utils.py                              |  2 +
 tests/local_testing/test_config.py            | 21 +++++
 tests/test_litellm_proxy_responses_config.py  | 84 +++++++++++++++++++
 5 files changed, 158 insertions(+)
 create mode 100644 litellm/llms/litellm_proxy/responses/transformation.py
 create mode 100644 tests/test_litellm_proxy_responses_config.py

diff --git a/litellm/__init__.py b/litellm/__init__.py
index 60cf327c26..e461c88efd 100644
--- a/litellm/__init__.py
+++ b/litellm/__init__.py
@@ -1190,6 +1190,9 @@ from .llms.azure.responses.transformation import AzureOpenAIResponsesAPIConfig
 from .llms.azure.responses.o_series_transformation import (
     AzureOpenAIOSeriesResponsesAPIConfig,
 )
+from .llms.litellm_proxy.responses.transformation import (
+    LiteLLMProxyResponsesAPIConfig,
+)
 from .llms.openai.chat.o_series_transformation import (
     OpenAIOSeriesConfig as OpenAIO1Config,  # maintain backwards compatibility
     OpenAIOSeriesConfig,
diff --git a/litellm/llms/litellm_proxy/responses/transformation.py b/litellm/llms/litellm_proxy/responses/transformation.py
new file mode 100644
index 0000000000..0b81d8be7d
--- /dev/null
+++ b/litellm/llms/litellm_proxy/responses/transformation.py
@@ -0,0 +1,48 @@
+"""
+Responses API transformation for LiteLLM Proxy provider.
+
+LiteLLM Proxy supports the OpenAI Responses API natively when the underlying model supports it.
+This config enables pass-through behavior to the proxy's /v1/responses endpoint.
+"""
+
+from typing import Optional
+
+from litellm.llms.openai.responses.transformation import OpenAIResponsesAPIConfig
+from litellm.secret_managers.main import get_secret_str
+from litellm.types.utils import LlmProviders
+
+
+class LiteLLMProxyResponsesAPIConfig(OpenAIResponsesAPIConfig):
+    """
+    Configuration for LiteLLM Proxy Responses API support.
+    
+    Extends OpenAI's config since the proxy follows OpenAI's API spec,
+    but uses LITELLM_PROXY_API_BASE for the base URL.
+    """
+
+    @property
+    def custom_llm_provider(self) -> LlmProviders:
+        return LlmProviders.LITELLM_PROXY
+
+    def get_complete_url(
+        self,
+        api_base: Optional[str],
+        litellm_params: dict,
+    ) -> str:
+        """
+        Get the endpoint for LiteLLM Proxy responses API.
+        
+        Uses LITELLM_PROXY_API_BASE environment variable if api_base is not provided.
+        """
+        api_base = api_base or get_secret_str("LITELLM_PROXY_API_BASE")
+        
+        if api_base is None:
+            raise ValueError(
+                "api_base not set for LiteLLM Proxy responses API. "
+                "Set via api_base parameter or LITELLM_PROXY_API_BASE environment variable"
+            )
+
+        # Remove trailing slashes
+        api_base = api_base.rstrip("/")
+
+        return f"{api_base}/responses"
diff --git a/litellm/utils.py b/litellm/utils.py
index 47250615ef..5861d703a3 100644
--- a/litellm/utils.py
+++ b/litellm/utils.py
@@ -7305,6 +7305,8 @@ class ProviderConfigManager:
                 return litellm.AzureOpenAIOSeriesResponsesAPIConfig()
             else:
                 return litellm.AzureOpenAIResponsesAPIConfig()
+        elif litellm.LlmProviders.LITELLM_PROXY == provider:
+            return litellm.LiteLLMProxyResponsesAPIConfig()
         return None
 
     @staticmethod
diff --git a/tests/local_testing/test_config.py b/tests/local_testing/test_config.py
index a0a31c2e78..5d8fae282c 100644
--- a/tests/local_testing/test_config.py
+++ b/tests/local_testing/test_config.py
@@ -401,3 +401,24 @@ def test_provider_config_manager_bedrock_converse_like():
 #             model="gpt-3.5-turbo", provider=LlmProviders(provider)
 #         )
 #         _check_provider_config(config, provider)
+
+
+def test_litellm_proxy_responses_api_config():
+    """Test that litellm_proxy provider returns correct Responses API config"""
+    from litellm.llms.litellm_proxy.responses.transformation import (
+        LiteLLMProxyResponsesAPIConfig,
+    )
+
+    config = ProviderConfigManager.get_provider_responses_api_config(
+        model="litellm_proxy/gpt-4",
+        provider=LlmProviders.LITELLM_PROXY,
+    )
+    print(f"config: {config}")
+    assert config is not None, "Config should not be None for litellm_proxy provider"
+    assert isinstance(
+        config, LiteLLMProxyResponsesAPIConfig
+    ), f"Expected LiteLLMProxyResponsesAPIConfig, got {type(config)}"
+    assert (
+        config.custom_llm_provider == LlmProviders.LITELLM_PROXY
+    ), "custom_llm_provider should be LITELLM_PROXY"
+
diff --git a/tests/test_litellm_proxy_responses_config.py b/tests/test_litellm_proxy_responses_config.py
new file mode 100644
index 0000000000..6242a9dbf3
--- /dev/null
+++ b/tests/test_litellm_proxy_responses_config.py
@@ -0,0 +1,84 @@
+"""
+Unit test for LiteLLM Proxy Responses API configuration.
+"""
+
+import pytest
+
+from litellm.types.utils import LlmProviders
+from litellm.utils import ProviderConfigManager
+
+
+def test_litellm_proxy_responses_api_config():
+    """Test that litellm_proxy provider returns correct Responses API config"""
+    from litellm.llms.litellm_proxy.responses.transformation import (
+        LiteLLMProxyResponsesAPIConfig,
+    )
+
+    config = ProviderConfigManager.get_provider_responses_api_config(
+        model="litellm_proxy/gpt-4",
+        provider=LlmProviders.LITELLM_PROXY,
+    )
+    print(f"config: {config}")
+    assert config is not None, "Config should not be None for litellm_proxy provider"
+    assert isinstance(
+        config, LiteLLMProxyResponsesAPIConfig
+    ), f"Expected LiteLLMProxyResponsesAPIConfig, got {type(config)}"
+    assert (
+        config.custom_llm_provider == LlmProviders.LITELLM_PROXY
+    ), "custom_llm_provider should be LITELLM_PROXY"
+
+
+def test_litellm_proxy_responses_api_config_get_complete_url():
+    """Test that get_complete_url works correctly"""
+    import os
+    from litellm.llms.litellm_proxy.responses.transformation import (
+        LiteLLMProxyResponsesAPIConfig,
+    )
+
+    config = LiteLLMProxyResponsesAPIConfig()
+
+    # Test with explicit api_base
+    url = config.get_complete_url(
+        api_base="https://my-proxy.example.com",
+        litellm_params={},
+    )
+    assert url == "https://my-proxy.example.com/responses"
+
+    # Test with trailing slash
+    url = config.get_complete_url(
+        api_base="https://my-proxy.example.com/",
+        litellm_params={},
+    )
+    assert url == "https://my-proxy.example.com/responses"
+
+    # Test that it raises error when api_base is None and env var is not set
+    if "LITELLM_PROXY_API_BASE" in os.environ:
+        del os.environ["LITELLM_PROXY_API_BASE"]
+    
+    with pytest.raises(ValueError, match="api_base not set"):
+        config.get_complete_url(api_base=None, litellm_params={})
+
+
+def test_litellm_proxy_responses_api_config_inherits_from_openai():
+    """Test that LiteLLMProxyResponsesAPIConfig extends OpenAI config properly"""
+    from litellm.llms.litellm_proxy.responses.transformation import (
+        LiteLLMProxyResponsesAPIConfig,
+    )
+    from litellm.llms.openai.responses.transformation import (
+        OpenAIResponsesAPIConfig,
+    )
+
+    config = LiteLLMProxyResponsesAPIConfig()
+    
+    # Should inherit from OpenAI config
+    assert isinstance(config, OpenAIResponsesAPIConfig)
+    
+    # Should have the correct provider set
+    assert config.custom_llm_provider == LlmProviders.LITELLM_PROXY
+
+
+if __name__ == "__main__":
+    test_litellm_proxy_responses_api_config()
+    test_litellm_proxy_responses_api_config_get_complete_url()
+    test_litellm_proxy_responses_api_config_inherits_from_openai()
+    print("All tests passed!")

From c4022ade497a18cb41be464bc7bce938fb589ca3 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Wed, 8 Oct 2025 18:34:30 -0700
Subject: [PATCH 37/42] test mapped tests MCP

---
 ...odel_prices_and_context_window_backup.json |  33 ++++++
 .../auth/test_user_api_key_auth_mcp.py        | 112 ++++++++++--------
 .../test_team_endpoints.py                    |   7 +-
 3 files changed, 100 insertions(+), 52 deletions(-)

diff --git a/litellm/model_prices_and_context_window_backup.json b/litellm/model_prices_and_context_window_backup.json
index 29a6588774..06cb67e56c 100644
--- a/litellm/model_prices_and_context_window_backup.json
+++ b/litellm/model_prices_and_context_window_backup.json
@@ -12975,6 +12975,39 @@
         "supports_vision": true,
         "supports_web_search": true
     },
+    "gpt-5-pro-2025-10-06": {
+        "input_cost_per_token": 1.5e-05,
+        "input_cost_per_token_batches": 7.5e-06,
+        "litellm_provider": "openai",
+        "max_input_tokens": 400000,
+        "max_output_tokens": 272000,
+        "max_tokens": 272000,
+        "mode": "responses",
+        "output_cost_per_token": 1.2e-04,
+        "output_cost_per_token_batches": 6e-05,
+        "supported_endpoints": [
+            "/v1/batch",
+            "/v1/responses"
+        ],
+        "supported_modalities": [
+            "text",
+            "image"
+        ],
+        "supported_output_modalities": [
+            "text"
+        ],
+        "supports_function_calling": true,
+        "supports_native_streaming": false,
+        "supports_parallel_function_calling": true,
+        "supports_pdf_input": true,
+        "supports_prompt_caching": true,
+        "supports_reasoning": true,
+        "supports_response_schema": true,
+        "supports_system_messages": true,
+        "supports_tool_choice": true,
+        "supports_vision": true,
+        "supports_web_search": true
+    },
     "gpt-5-codex": {
         "cache_read_input_token_cost": 1.25e-07,
         "input_cost_per_token": 1.25e-06,
diff --git a/tests/test_litellm/proxy/_experimental/mcp_server/auth/test_user_api_key_auth_mcp.py b/tests/test_litellm/proxy/_experimental/mcp_server/auth/test_user_api_key_auth_mcp.py
index 7da941db39..7927aa7f48 100644
--- a/tests/test_litellm/proxy/_experimental/mcp_server/auth/test_user_api_key_auth_mcp.py
+++ b/tests/test_litellm/proxy/_experimental/mcp_server/auth/test_user_api_key_auth_mcp.py
@@ -1053,7 +1053,7 @@ async def test_get_team_object_permission_with_already_loaded_permission():
     from the team object without making an additional DB call.
     """
     from litellm.proxy._types import LiteLLM_ObjectPermissionTable, LiteLLM_TeamTable
-    
+
     # Create mock object permission
     mock_object_permission = LiteLLM_ObjectPermissionTable(
         object_permission_id="perm-123",
@@ -1077,28 +1077,34 @@ async def test_get_team_object_permission_with_already_loaded_permission():
     )
     
     # Mock get_team_object to return our team with loaded permission
+    # Also need to mock prisma_client from proxy_server
+    mock_prisma = MagicMock()
     with patch(
-        "litellm.proxy._experimental.mcp_server.auth.user_api_key_auth_mcp.get_team_object"
-    ) as mock_get_team:
+        "litellm.proxy.proxy_server.prisma_client",
+        mock_prisma,
+    ):
         with patch(
-            "litellm.proxy._experimental.mcp_server.auth.user_api_key_auth_mcp.get_object_permission"
-        ) as mock_get_perm:
-            mock_get_team.return_value = mock_team_obj
-            
-            # Call the method
-            result = await MCPRequestHandler._get_team_object_permission(
-                mock_user_auth
-            )
-            
-            # Assert we got the object permission
-            assert result == mock_object_permission
-            assert result.mcp_servers == ["server1", "server2"]
-            
-            # Verify get_team_object was called
-            mock_get_team.assert_called_once()
-            
-            # Verify get_object_permission was NOT called (since it was already loaded)
-            mock_get_perm.assert_not_called()
+            "litellm.proxy.auth.auth_checks.get_team_object"
+        ) as mock_get_team:
+            with patch(
+                "litellm.proxy.auth.auth_checks.get_object_permission"
+            ) as mock_get_perm:
+                mock_get_team.return_value = mock_team_obj
+                
+                # Call the method
+                result = await MCPRequestHandler._get_team_object_permission(
+                    mock_user_auth
+                )
+                
+                # Assert we got the object permission
+                assert result == mock_object_permission
+                assert result.mcp_servers == ["server1", "server2"]
+                
+                # Verify get_team_object was called
+                mock_get_team.assert_called_once()
+                
+                # Verify get_object_permission was NOT called (since it was already loaded)
+                mock_get_perm.assert_not_called()
 
 
 @pytest.mark.asyncio
@@ -1108,7 +1114,7 @@ async def test_get_team_object_permission_fetches_from_db_when_not_loaded():
     is not loaded but object_permission_id exists.
     """
     from litellm.proxy._types import LiteLLM_ObjectPermissionTable, LiteLLM_TeamTable
-    
+
     # Create mock object permission (to be returned from DB)
     mock_object_permission = LiteLLM_ObjectPermissionTable(
         object_permission_id="perm-456",
@@ -1132,35 +1138,41 @@ async def test_get_team_object_permission_fetches_from_db_when_not_loaded():
     )
     
     # Mock the methods
+    # Also need to mock prisma_client from proxy_server
+    mock_prisma = MagicMock()
     with patch(
-        "litellm.proxy._experimental.mcp_server.auth.user_api_key_auth_mcp.get_team_object"
-    ) as mock_get_team:
+        "litellm.proxy.proxy_server.prisma_client",
+        mock_prisma,
+    ):
         with patch(
-            "litellm.proxy._experimental.mcp_server.auth.user_api_key_auth_mcp.get_object_permission"
-        ) as mock_get_perm:
-            mock_get_team.return_value = mock_team_obj
-            mock_get_perm.return_value = mock_object_permission
-            
-            # Call the method
-            result = await MCPRequestHandler._get_team_object_permission(
-                mock_user_auth
-            )
-            
-            # Assert we got the object permission
-            assert result == mock_object_permission
-            assert result.mcp_servers == ["server3", "server4"]
-            
-            # Verify get_team_object was called
-            mock_get_team.assert_called_once()
-            
-            # Verify get_object_permission WAS called (since it wasn't loaded)
-            mock_get_perm.assert_called_once_with(
-                object_permission_id="perm-456",
-                prisma_client=mock.ANY,
-                user_api_key_cache=mock.ANY,
-                parent_otel_span=mock_user_auth.parent_otel_span,
-                proxy_logging_obj=mock.ANY,
-            )
+            "litellm.proxy.auth.auth_checks.get_team_object"
+        ) as mock_get_team:
+            with patch(
+                "litellm.proxy.auth.auth_checks.get_object_permission"
+            ) as mock_get_perm:
+                mock_get_team.return_value = mock_team_obj
+                mock_get_perm.return_value = mock_object_permission
+                
+                # Call the method
+                result = await MCPRequestHandler._get_team_object_permission(
+                    mock_user_auth
+                )
+                
+                # Assert we got the object permission
+                assert result == mock_object_permission
+                assert result.mcp_servers == ["server3", "server4"]
+                
+                # Verify get_team_object was called
+                mock_get_team.assert_called_once()
+                
+                # Verify get_object_permission WAS called (since it wasn't loaded)
+                mock_get_perm.assert_called_once_with(
+                    object_permission_id="perm-456",
+                    prisma_client=mock.ANY,
+                    user_api_key_cache=mock.ANY,
+                    parent_otel_span=mock_user_auth.parent_otel_span,
+                    proxy_logging_obj=mock.ANY,
+                )
 
 
 @pytest.mark.asyncio
@@ -1170,7 +1182,7 @@ async def test_get_allowed_mcp_servers_for_team_uses_helper():
     helper which handles both loaded and unloaded object_permission cases.
     """
     from litellm.proxy._types import LiteLLM_ObjectPermissionTable
-    
+
     # Create mock object permission with servers and access groups
     mock_object_permission = LiteLLM_ObjectPermissionTable(
         object_permission_id="perm-789",
diff --git a/tests/test_litellm/proxy/management_endpoints/test_team_endpoints.py b/tests/test_litellm/proxy/management_endpoints/test_team_endpoints.py
index 929ec41e09..99325693b5 100644
--- a/tests/test_litellm/proxy/management_endpoints/test_team_endpoints.py
+++ b/tests/test_litellm/proxy/management_endpoints/test_team_endpoints.py
@@ -2,7 +2,6 @@ import asyncio
 import json
 import os
 import sys
-from litellm._uuid import uuid
 from typing import Optional, cast
 from unittest.mock import AsyncMock, MagicMock, patch
 
@@ -10,6 +9,8 @@ import pytest
 from fastapi import HTTPException
 from fastapi.testclient import TestClient
 
+from litellm._uuid import uuid
+
 sys.path.insert(
     0, os.path.abspath("../../../")
 )  # Adds the parent directory to the system path
@@ -412,8 +413,10 @@ async def test_new_team_with_mcp_tool_permissions(mock_db_client, mock_admin_aut
     )
 
     # Verify mcp_tool_permissions was stored
+    import json
     assert "mcp_tool_permissions" in created_permission_data
-    assert created_permission_data["mcp_tool_permissions"] == {
+    # mcp_tool_permissions is stored as a JSON string
+    assert json.loads(created_permission_data["mcp_tool_permissions"]) == {
         "server_a": ["read_wiki_structure", "read_wiki_contents"],
         "server_b": ["ask_question"],
     }

From d28ecbc900584426dd36395e2b2403e196e73d9b Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Wed, 8 Oct 2025 18:45:13 -0700
Subject: [PATCH 38/42] feat(ui_sso.py): support mapping app roles from azure
 entra id to litellm user roles

Closes LIT-1228
---
 litellm/proxy/management_endpoints/types.py  | 40 +++++++++-
 litellm/proxy/management_endpoints/ui_sso.py | 80 +++++++++++++++++++-
 2 files changed, 115 insertions(+), 5 deletions(-)

diff --git a/litellm/proxy/management_endpoints/types.py b/litellm/proxy/management_endpoints/types.py
index 0e811669d1..ad2ad0a5fe 100644
--- a/litellm/proxy/management_endpoints/types.py
+++ b/litellm/proxy/management_endpoints/types.py
@@ -4,10 +4,48 @@ Types for the management endpoints
 Might include fastapi/proxy requirements.txt related imports
 """
 
-from typing import List
+from typing import List, Optional, cast
 
 from fastapi_sso.sso.base import OpenID
 
+from litellm.proxy._types import LitellmUserRoles
+
+
+def is_valid_litellm_user_role(role_str: str) -> bool:
+    """
+    Check if a string is a valid LitellmUserRoles enum value (case-insensitive).
+
+    Args:
+        role_str: String to validate (e.g., "proxy_admin", "PROXY_ADMIN", "internal_user")
+
+    Returns:
+        True if the string matches a valid LitellmUserRoles value, False otherwise
+    """
+    try:
+        # Use _value2member_map_ for O(1) lookup, case-insensitive
+        return role_str.lower() in LitellmUserRoles._value2member_map_
+    except Exception:
+        return False
+
+
+def get_litellm_user_role(role_str: str) -> Optional[LitellmUserRoles]:
+    """
+    Convert a string to a LitellmUserRoles enum if valid (case-insensitive).
+
+    Args:
+        role_str: String to convert (e.g., "proxy_admin", "PROXY_ADMIN", "internal_user")
+
+    Returns:
+        LitellmUserRoles enum if valid, None otherwise
+    """
+    try:
+        # Use _value2member_map_ for O(1) lookup, case-insensitive
+        result = LitellmUserRoles._value2member_map_.get(role_str.lower())
+        return cast(Optional[LitellmUserRoles], result)
+    except Exception:
+        return None
+
 
 class CustomOpenID(OpenID):
     team_ids: List[str]
+    user_role: Optional[LitellmUserRoles] = None
diff --git a/litellm/proxy/management_endpoints/ui_sso.py b/litellm/proxy/management_endpoints/ui_sso.py
index 9eec551fb7..d8f426e1ae 100644
--- a/litellm/proxy/management_endpoints/ui_sso.py
+++ b/litellm/proxy/management_endpoints/ui_sso.py
@@ -58,7 +58,7 @@ from litellm.proxy.management_endpoints.sso_helper_utils import (
     has_admin_ui_access,
 )
 from litellm.proxy.management_endpoints.team_endpoints import new_team, team_member_add
-from litellm.proxy.management_endpoints.types import CustomOpenID
+from litellm.proxy.management_endpoints.types import CustomOpenID, get_litellm_user_role
 from litellm.proxy.utils import (
     PrismaClient,
     ProxyLogging,
@@ -277,6 +277,7 @@ def generic_response_convertor(
         last_name=response.get(generic_user_last_name_attribute_name),
         provider=response.get(generic_provider_attribute_name),
         team_ids=all_teams,
+        user_role=None,
     )
 
 
@@ -1145,7 +1146,7 @@ class SSOAuthenticationHandler:
     ) -> str:
         """
         Get the redirect URL for SSO
-        
+
         Note: existing_key is not added to the URL to avoid changing the callback URL.
         It should be passed via the state parameter instead.
         """
@@ -1348,7 +1349,7 @@ class SSOAuthenticationHandler:
         Checks the request 'source' if a cli state token was passed in
 
         This is used to authenticate through the CLI login flow.
-        
+
         The state parameter format is: {PREFIX}:{key}:{existing_key}
         - If existing_key is provided, it's included in the state
         - The state parameter is used to pass data through the OAuth flow without changing the callback URL
@@ -1673,22 +1674,49 @@ class MicrosoftSSOHandler:
             access_token=microsoft_sso.access_token
         )
 
+        # Extract app roles from the id_token JWT
+        app_roles = MicrosoftSSOHandler.get_app_roles_from_id_token(
+            id_token=microsoft_sso.id_token
+        )
+        verbose_proxy_logger.debug(f"Extracted app roles from id_token: {app_roles}")
+
+        # Combine groups and app roles
+        user_role: Optional[LitellmUserRoles] = None
+        if app_roles:
+            # Check if any app role is a valid LitellmUserRoles
+            for role_str in app_roles:
+                role = get_litellm_user_role(role_str)
+                if role is not None:
+                    user_role = role
+                    verbose_proxy_logger.debug(
+                        f"Found valid LitellmUserRoles '{role.value}' in app_roles"
+                    )
+                    break
+
+        verbose_proxy_logger.debug(
+            f"Combined team_ids (groups + app roles): {user_team_ids}"
+        )
+
         # if user is trying to get the raw sso response for debugging, return the raw sso response
         if return_raw_sso_response:
             original_msft_result[MicrosoftSSOHandler.GRAPH_API_RESPONSE_KEY] = (
                 user_team_ids
             )
+            original_msft_result["app_roles"] = app_roles
             return original_msft_result or {}
 
         result = MicrosoftSSOHandler.openid_from_response(
             response=original_msft_result,
             team_ids=user_team_ids,
+            user_role=user_role,
         )
         return result
 
     @staticmethod
     def openid_from_response(
-        response: Optional[dict], team_ids: List[str]
+        response: Optional[dict],
+        team_ids: List[str],
+        user_role: Optional[LitellmUserRoles],
     ) -> CustomOpenID:
         response = response or {}
         verbose_proxy_logger.debug(f"Microsoft SSO Callback Response: {response}")
@@ -1700,10 +1728,54 @@ class MicrosoftSSOHandler:
             first_name=response.get("givenName"),
             last_name=response.get("surname"),
             team_ids=team_ids,
+            user_role=user_role,
         )
         verbose_proxy_logger.debug(f"Microsoft SSO OpenID Response: {openid_response}")
         return openid_response
 
+    @staticmethod
+    def get_app_roles_from_id_token(id_token: Optional[str]) -> List[str]:
+        """
+        Extract app roles from the Microsoft Entra ID (Azure AD) id_token JWT.
+
+        App roles are assigned in the Azure AD Enterprise Application and appear
+        in the 'roles' claim of the id_token.
+
+        Args:
+            id_token (Optional[str]): The JWT id_token from Microsoft SSO
+
+        Returns:
+            List[str]: List of app role names assigned to the user
+        """
+        if not id_token:
+            verbose_proxy_logger.debug("No id_token provided for app role extraction")
+            return []
+
+        try:
+            import jwt
+
+            # Decode the JWT without signature verification
+            # (signature is already verified by fastapi_sso)
+            decoded_token = jwt.decode(id_token, options={"verify_signature": False})
+
+            # Extract roles claim from the token
+            roles = decoded_token.get("roles", [])
+
+            if roles and isinstance(roles, list):
+                verbose_proxy_logger.debug(
+                    f"Found {len(roles)} app role(s) in id_token: {roles}"
+                )
+                return roles
+            else:
+                verbose_proxy_logger.debug(
+                    "No app roles found in id_token or roles claim is not a list"
+                )
+                return []
+
+        except Exception as e:
+            verbose_proxy_logger.error(f"Error extracting app roles from id_token: {e}")
+            return []
+
     @staticmethod
     async def get_user_groups_from_graph_api(
         access_token: Optional[str] = None,

From ff3f356416562dc27b5648876e69e22e02f7ced4 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Wed, 8 Oct 2025 18:46:28 -0700
Subject: [PATCH 39/42] docs(docs/): add app role support to docs

---
 docs/my-website/docs/proxy/admin_ui_sso.md | 17 +++++++
 docs/my-website/docs/tutorials/msft_sso.md | 52 ++++++++++++++++++++++
 2 files changed, 69 insertions(+)

diff --git a/docs/my-website/docs/proxy/admin_ui_sso.md b/docs/my-website/docs/proxy/admin_ui_sso.md
index 32bf97410c..439aae6f96 100644
--- a/docs/my-website/docs/proxy/admin_ui_sso.md
+++ b/docs/my-website/docs/proxy/admin_ui_sso.md
@@ -81,6 +81,23 @@ MICROSOFT_TENANT="5a39737
     http://localhost:4000/sso/callback
     ```
 
+**Using App Roles for User Permissions**
+
+You can assign user roles directly from Entra ID using App Roles. LiteLLM will automatically read the app roles from the JWT token and assign the corresponding role to the user.
+
+Supported roles:
+- `proxy_admin` - Admin over the platform
+- `proxy_admin_viewer` - Can login, view all keys, view all spend (read-only)
+- `org_admin` - Admin over a specific organization
+- `internal_user` - Can login, view/create/delete their own keys, view their spend
+
+To set up app roles:
+1. Navigate to your App Registration on https://portal.azure.com/
+2. Go to "App roles" and create a new app role
+3. Use one of the supported role names above (e.g., `proxy_admin`)
+4. Assign users to these roles in your Enterprise Application
+5. When users sign in via SSO, LiteLLM will automatically assign them the corresponding role
+
 </TabItem>
 
 <TabItem value="Generic" label="Generic SSO Provider">
diff --git a/docs/my-website/docs/tutorials/msft_sso.md b/docs/my-website/docs/tutorials/msft_sso.md
index f7ad6440f2..d24a289669 100644
--- a/docs/my-website/docs/tutorials/msft_sso.md
+++ b/docs/my-website/docs/tutorials/msft_sso.md
@@ -140,6 +140,58 @@ litellm_settings:
 <Image img={require('../../img/msft_default_settings.png')}  style={{ width: '900px', height: 'auto' }} />
 
 
+## 4. Using Entra ID App Roles for User Permissions
+
+You can assign user roles directly from Entra ID using App Roles. LiteLLM will automatically read the app roles from the JWT token during SSO sign-in and assign the corresponding role to the user.
+
+### 4.1 Supported Roles
+
+LiteLLM supports the following app roles (case-insensitive):
+
+- `proxy_admin` - Admin over the entire LiteLLM platform
+- `proxy_admin_viewer` - Read-only admin access (can view all keys and spend)
+- `org_admin` - Admin over a specific organization (can create teams and users within their org)
+- `internal_user` - Standard user (can create/view/delete their own keys and view their own spend)
+
+### 4.2 Create App Roles in Entra ID
+
+1. Navigate to your App Registration on https://portal.azure.com/
+2. Go to **App roles** > **Create app role**
+
+<Image img={require('../../img/entra_app_roles_1.png')}  style={{ width: '800px', height: 'auto' }} />
+
+3. Configure the app role:
+   - **Display name**: Proxy Admin (or your preferred display name)
+   - **Value**: `proxy_admin` (use one of the supported role values above)
+   - **Description**: Administrator access to LiteLLM proxy
+   - **Allowed member types**: Users/Groups
+
+<Image img={require('../../img/entra_app_roles_2.png')}  style={{ width: '800px', height: 'auto' }} />
+
+4. Click **Apply** to save the role
+
+### 4.3 Assign Users to App Roles
+
+1. Navigate to **Enterprise Applications** on https://portal.azure.com/
+2. Select your LiteLLM application
+3. Go to **Users and groups** > **Add user/group**
+4. Select the user and assign them to one of the app roles you created
+
+<Image img={require('../../img/entra_app_roles_3.png')}  style={{ width: '800px', height: 'auto' }} />
+
+### 4.4 Test the Role Assignment
+
+1. Sign in to LiteLLM UI via SSO as a user with an assigned app role
+2. LiteLLM will automatically extract the app role from the JWT token
+3. The user will be assigned the corresponding LiteLLM role in the database
+4. The user's permissions will reflect their assigned role
+
+**How it works:**
+- When a user signs in via Microsoft SSO, LiteLLM extracts the `roles` claim from the JWT `id_token`
+- If any of the roles match a valid LiteLLM role (case-insensitive), that role is assigned to the user
+- If multiple roles are present, LiteLLM uses the first valid role it finds
+- This role assignment persists in the LiteLLM database and determines the user's access level
+
 ## Video Walkthrough
 
 This walks through setting up sso auto-add for **Microsoft Entra ID**

From 8eafb7a8fa93023d7b520bda3d22f4a1ac761758 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Wed, 8 Oct 2025 18:50:42 -0700
Subject: [PATCH 40/42] docs: doc improvements

---
 docs/my-website/docs/proxy/admin_ui_sso.md                    | 4 ++--
 .../out/{model_hub_table.html => model_hub_table/index.html}  | 0
 litellm/proxy/_experimental/out/onboarding.html               | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)
 rename litellm/proxy/_experimental/out/{model_hub_table.html => model_hub_table/index.html} (100%)
 delete mode 100644 litellm/proxy/_experimental/out/onboarding.html

diff --git a/docs/my-website/docs/proxy/admin_ui_sso.md b/docs/my-website/docs/proxy/admin_ui_sso.md
index 439aae6f96..bd18dd9c69 100644
--- a/docs/my-website/docs/proxy/admin_ui_sso.md
+++ b/docs/my-website/docs/proxy/admin_ui_sso.md
@@ -88,8 +88,8 @@ You can assign user roles directly from Entra ID using App Roles. LiteLLM will a
 Supported roles:
 - `proxy_admin` - Admin over the platform
 - `proxy_admin_viewer` - Can login, view all keys, view all spend (read-only)
-- `org_admin` - Admin over a specific organization
-- `internal_user` - Can login, view/create/delete their own keys, view their spend
+- `internal_user` - Normal user. Can login, view spend and depending on team-member permissions - view/create/delete their own keys.
+
 
 To set up app roles:
 1. Navigate to your App Registration on https://portal.azure.com/
diff --git a/litellm/proxy/_experimental/out/model_hub_table.html b/litellm/proxy/_experimental/out/model_hub_table/index.html
similarity index 100%
rename from litellm/proxy/_experimental/out/model_hub_table.html
rename to litellm/proxy/_experimental/out/model_hub_table/index.html
diff --git a/litellm/proxy/_experimental/out/onboarding.html b/litellm/proxy/_experimental/out/onboarding.html
deleted file mode 100644
index 04c6c88676..0000000000
--- a/litellm/proxy/_experimental/out/onboarding.html
+++ /dev/null
@@ -1 +0,0 @@
-<!DOCTYPE html><html id="__next_error__"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="script" fetchPriority="low" href="/litellm-asset-prefix/_next/static/chunks/webpack-a426aae3231a8df1.js"/><script src="/litellm-asset-prefix/_next/static/chunks/fd9d1056-205af899b895cbac.js" async=""></script><script src="/litellm-asset-prefix/_next/static/chunks/117-6a9f6a591033d4a0.js" async=""></script><script src="/litellm-asset-prefix/_next/static/chunks/main-app-bb35cb240fbb9dca.js" async=""></script><title>LiteLLM Dashboard</title><meta name="description" content="LiteLLM Proxy Admin UI"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/><link rel="icon" href="./favicon.ico"/><meta name="next-size-adjust"/><script src="/litellm-asset-prefix/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body><script src="/litellm-asset-prefix/_next/static/chunks/webpack-a426aae3231a8df1.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/litellm-asset-prefix/_next/static/media/e4af272ccee01ff0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"/litellm-asset-prefix/_next/static/css/349654da14372cd9.css\",\"style\"]\n3:HL[\"/litellm-asset-prefix/_next/static/css/a94bb091dba1d4f2.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[12846,[],\"\"]\n6:I[19107,[],\"ClientPageRoot\"]\n7:I[12011,[\"665\",\"static/chunks/3014691f-b7b79b78e27792f3.js\",\"50\",\"static/chunks/50-d0da2dd7acce2eb9.js\",\"49\",\"static/chunks/49-036448f42c39b97c.js\",\"461\",\"static/chunks/app/onboarding/page-79017a4c39acd336.js\"],\"default\",1]\n8:I[4707,[],\"\"]\n9:I[36423,[],\"\"]\nb:I[61060,[],\"\"]\nc:[]\n"])</script><script>self.__next_f.push([1,"0:[\"$\",\"$L4\",null,{\"buildId\":\"0NP4pGCTzzyECenXO-S3V\",\"assetPrefix\":\"/litellm-asset-prefix\",\"urlParts\":[\"\",\"onboarding\"],\"initialTree\":[\"\",{\"children\":[\"onboarding\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"onboarding\",{\"children\":[\"__PAGE__\",{},[[\"$L5\",[\"$\",\"$L6\",null,{\"props\":{\"params\":{},\"searchParams\":{}},\"Component\":\"$7\"}],null],null],null]},[null,[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"onboarding\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/litellm-asset-prefix/_next/static/css/349654da14372cd9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/litellm-asset-prefix/_next/static/css/a94bb091dba1d4f2.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"__className_1c856b\",\"children\":[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L9\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}]}]}]],null],null],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$La\"],\"globalErrorComponent\":\"$b\",\"missingSlots\":\"$Wc\"}]\n"])</script><script>self.__next_f.push([1,"a:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"LiteLLM Dashboard\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"LiteLLM Proxy Admin UI\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],[\"$\",\"link\",\"5\",{\"rel\":\"icon\",\"href\":\"./favicon.ico\"}],[\"$\",\"meta\",\"6\",{\"name\":\"next-size-adjust\"}]]\n5:null\n"])</script></body></html>
\ No newline at end of file

From 697f99c1d5be1ffc6fc9d3dea1fb150f3860f0eb Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Wed, 8 Oct 2025 18:59:00 -0700
Subject: [PATCH 41/42] docs: doc improvements

---
 docs/my-website/docs/tutorials/msft_sso.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/docs/my-website/docs/tutorials/msft_sso.md b/docs/my-website/docs/tutorials/msft_sso.md
index d24a289669..2936f27297 100644
--- a/docs/my-website/docs/tutorials/msft_sso.md
+++ b/docs/my-website/docs/tutorials/msft_sso.md
@@ -158,15 +158,12 @@ LiteLLM supports the following app roles (case-insensitive):
 1. Navigate to your App Registration on https://portal.azure.com/
 2. Go to **App roles** > **Create app role**
 
-<Image img={require('../../img/entra_app_roles_1.png')}  style={{ width: '800px', height: 'auto' }} />
-
 3. Configure the app role:
    - **Display name**: Proxy Admin (or your preferred display name)
    - **Value**: `proxy_admin` (use one of the supported role values above)
    - **Description**: Administrator access to LiteLLM proxy
    - **Allowed member types**: Users/Groups
 
-<Image img={require('../../img/entra_app_roles_2.png')}  style={{ width: '800px', height: 'auto' }} />
 
 4. Click **Apply** to save the role
 
@@ -177,7 +174,6 @@ LiteLLM supports the following app roles (case-insensitive):
 3. Go to **Users and groups** > **Add user/group**
 4. Select the user and assign them to one of the app roles you created
 
-<Image img={require('../../img/entra_app_roles_3.png')}  style={{ width: '800px', height: 'auto' }} />
 
 ### 4.4 Test the Role Assignment
 

From e2b7b05774ba4403f9a8c2efa12d65b348b07919 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Wed, 8 Oct 2025 19:16:22 -0700
Subject: [PATCH 42/42] docs(mcp.md): document new openapi to mcp tool support

---
 docs/my-website/docs/mcp.md | 195 ++++++++++++++++++++++++++++++++++++
 1 file changed, 195 insertions(+)

diff --git a/docs/my-website/docs/mcp.md b/docs/my-website/docs/mcp.md
index 9365b0a554..462306e961 100644
--- a/docs/my-website/docs/mcp.md
+++ b/docs/my-website/docs/mcp.md
@@ -246,6 +246,201 @@ litellm_settings:
 </TabItem>
 </Tabs>
 
+## Converting OpenAPI Specs to MCP Servers
+
+LiteLLM can automatically convert OpenAPI specifications into MCP servers, allowing you to expose any REST API as MCP tools. This is useful when you have existing APIs with OpenAPI/Swagger documentation and want to make them available as MCP tools.
+
+### Benefits
+
+- **Rapid Integration**: Convert existing APIs to MCP tools without writing custom MCP server code
+- **Automatic Tool Generation**: LiteLLM automatically generates MCP tools from your OpenAPI spec
+- **Unified Interface**: Use the same MCP interface for both native MCP servers and OpenAPI-based APIs
+- **Easy Testing**: Test and iterate on API integrations quickly
+
+### Configuration
+
+Add your OpenAPI-based MCP server to your `config.yaml`:
+
+```yaml title="config.yaml - OpenAPI to MCP" showLineNumbers
+model_list:
+  - model_name: gpt-4o
+    litellm_params:
+      model: openai/gpt-4o
+      api_key: sk-xxxxxxx
+
+mcp_servers:
+  # OpenAPI Spec Example - Petstore API
+  petstore_mcp:
+    url: "https://petstore.swagger.io/v2"
+    spec_path: "/path/to/openapi.json"
+    auth_type: "none"
+  
+  # OpenAPI Spec with API Key Authentication
+  my_api_mcp:
+    url: "http://0.0.0.0:8090"
+    spec_path: "/path/to/openapi.json"
+    auth_type: "api_key"
+    auth_value: "your-api-key-here"
+  
+  # OpenAPI Spec with Bearer Token
+  secured_api_mcp:
+    url: "https://api.example.com"
+    spec_path: "/path/to/openapi.json" 
+    auth_type: "bearer_token"
+    auth_value: "your-bearer-token"
+```
+
+### Configuration Parameters
+
+| Parameter | Required | Description |
+|-----------|----------|-------------|
+| `url` | Yes | The base URL of your API endpoint |
+| `spec_path` | Yes | Path or URL to your OpenAPI specification file (JSON or YAML) |
+| `auth_type` | No | Authentication type: `none`, `api_key`, `bearer_token`, `basic`, `authorization` |
+| `auth_value` | No | Authentication value (required if `auth_type` is set) |
+| `description` | No | Optional description for the MCP server |
+| `allowed_tools` | No | List of specific tools to allow (see [MCP Tool Filtering](#mcp-tool-filtering)) |
+| `disallowed_tools` | No | List of specific tools to block (see [MCP Tool Filtering](#mcp-tool-filtering)) |
+
+### Usage Example
+
+Once configured, you can use the OpenAPI-based MCP server just like any other MCP server:
+
+<Tabs>
+<TabItem value="fastmcp" label="Python FastMCP">
+
+```python title="Using OpenAPI-based MCP Server" showLineNumbers
+from fastmcp import Client
+import asyncio
+
+# Standard MCP configuration
+config = {
+    "mcpServers": {
+        "petstore": {
+            "url": "http://localhost:4000/petstore_mcp/mcp",
+            "headers": {
+                "x-litellm-api-key": "Bearer sk-1234"
+            }
+        }
+    }
+}
+
+# Create a client that connects to the server
+client = Client(config)
+
+async def main():
+    async with client:
+        # List available tools generated from OpenAPI spec
+        tools = await client.list_tools()
+        print(f"Available tools: {[tool.name for tool in tools]}")
+
+        # Example: Get a pet by ID (from Petstore API)
+        response = await client.call_tool(
+            name="getpetbyid", 
+            arguments={"petId": "1"}
+        )
+        print(f"Response:\n{response}\n")
+
+        # Example: Find pets by status
+        response = await client.call_tool(
+            name="findpetsbystatus", 
+            arguments={"status": "available"}
+        )
+        print(f"Response:\n{response}\n")
+
+if __name__ == "__main__":
+    asyncio.run(main())
+```
+
+</TabItem>
+
+<TabItem value="cursor" label="Cursor IDE">
+
+```json title="Cursor MCP Configuration for OpenAPI Server" showLineNumbers
+{
+  "mcpServers": {
+    "Petstore": {
+      "url": "http://localhost:4000/petstore_mcp/mcp",
+      "headers": {
+        "x-litellm-api-key": "Bearer $LITELLM_API_KEY"
+      }
+    }
+  }
+}
+```
+
+</TabItem>
+
+<TabItem value="openai" label="OpenAI Responses API">
+
+```bash title="Using OpenAPI MCP Server with OpenAI" showLineNumbers
+curl --location 'https://api.openai.com/v1/responses' \
+--header 'Content-Type: application/json' \
+--header "Authorization: Bearer $OPENAI_API_KEY" \
+--data '{
+    "model": "gpt-4o",
+    "tools": [
+        {
+            "type": "mcp",
+            "server_label": "petstore",
+            "server_url": "http://localhost:4000/petstore_mcp/mcp",
+            "require_approval": "never",
+            "headers": {
+                "x-litellm-api-key": "Bearer YOUR_LITELLM_API_KEY"
+            }
+        }
+    ],
+    "input": "Find all available pets in the petstore",
+    "tool_choice": "required"
+}'
+```
+
+</TabItem>
+</Tabs>
+
+### How It Works
+
+1. **Spec Loading**: LiteLLM loads your OpenAPI specification from the provided `spec_path`
+2. **Tool Generation**: Each API endpoint in the spec becomes an MCP tool
+3. **Parameter Mapping**: OpenAPI parameters are automatically mapped to MCP tool parameters
+4. **Request Handling**: When a tool is called, LiteLLM converts the MCP request to the appropriate HTTP request
+5. **Response Translation**: API responses are converted back to MCP format
+
+### OpenAPI Spec Requirements
+
+Your OpenAPI specification should follow standard OpenAPI/Swagger conventions:
+- **Supported versions**: OpenAPI 3.0.x, OpenAPI 3.1.x, Swagger 2.0
+- **Required fields**: `paths`, `info` sections should be properly defined
+- **Operation IDs**: Each operation should have a unique `operationId` (this becomes the tool name)
+- **Parameters**: Request parameters should be properly documented with types and descriptions
+
+### Example OpenAPI Spec Structure
+
+```yaml title="sample-openapi.yaml" showLineNumbers
+openapi: 3.0.0
+info:
+  title: My API
+  version: 1.0.0
+paths:
+  /pets/{petId}:
+    get:
+      operationId: getPetById
+      summary: Get a pet by ID
+      parameters:
+        - name: petId
+          in: path
+          required: true
+          schema:
+            type: integer
+      responses:
+        '200':
+          description: Successful response
+          content:
+            application/json:
+              schema:
+                type: object
+```
+
 ## MCP Tool Filtering
 
 Control which tools are available from your MCP servers. You can either allow only specific tools or block dangerous ones.