From 651268f756ad46325a34ea14062a8a1472ff3dde Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrish+github@berri.ai>
Date: Tue, 30 Jun 2026 21:27:30 -0700
Subject: [PATCH 01/10] feat(ui): restore Chat page behind admin-gated
 enable_chat_ui flag

Reintroduces the /ui/chat page and its components (removed in #30178 as
unreachable dead code) now that it has a real entry point: an
enable_chat_ui UI setting, off by default, that shows a Chat nav item
in the sidebar when turned on. The page lets users chat with an LLM
and connect their own MCP server credentials via OAuth (used
automatically for their subsequent tool calls) rather than a shared
credential.

(cherry picked from commit ec6d71b76a96b60c67940200e9299c52b65fbc60)
---
 .../proxy_setting_endpoints.py                |    6 +
 ui/litellm-dashboard/eslint-metrics.json      |    2 +-
 ui/litellm-dashboard/eslint-suppressions.json |  932 +++++-----
 .../components/SidebarProvider.tsx            |    6 +
 ui/litellm-dashboard/src/app/chat/page.tsx    |   27 +
 .../AdminSettings/UISettings/UISettings.tsx   |   33 +
 .../src/components/chat/ChatMessages.tsx      |  590 +++++++
 .../src/components/chat/ChatPage.tsx          | 1512 +++++++++++++++++
 .../src/components/chat/ConversationList.tsx  |  450 +++++
 .../src/components/chat/MCPAppsPanel.tsx      |  726 ++++++++
 .../src/components/chat/MCPConnectPicker.tsx  |  171 ++
 .../src/components/chat/MCPCredentialsTab.tsx |  166 ++
 .../src/components/chat/types.ts              |   25 +
 .../src/components/chat/useChatHistory.ts     |  213 +++
 .../src/components/leftnav.test.tsx           |   10 +
 .../src/components/leftnav.tsx                |   16 +
 .../src/components/page_metadata.ts           |    1 +
 .../src/utils/migratedPages.ts                |    1 +
 18 files changed, 4441 insertions(+), 446 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/app/chat/page.tsx
 create mode 100644 ui/litellm-dashboard/src/components/chat/ChatMessages.tsx
 create mode 100644 ui/litellm-dashboard/src/components/chat/ChatPage.tsx
 create mode 100644 ui/litellm-dashboard/src/components/chat/ConversationList.tsx
 create mode 100644 ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx
 create mode 100644 ui/litellm-dashboard/src/components/chat/MCPConnectPicker.tsx
 create mode 100644 ui/litellm-dashboard/src/components/chat/MCPCredentialsTab.tsx
 create mode 100644 ui/litellm-dashboard/src/components/chat/types.ts
 create mode 100644 ui/litellm-dashboard/src/components/chat/useChatHistory.ts

diff --git a/litellm/proxy/ui_crud_endpoints/proxy_setting_endpoints.py b/litellm/proxy/ui_crud_endpoints/proxy_setting_endpoints.py
index e4f68a1e9dbb..97a1e280b34b 100644
--- a/litellm/proxy/ui_crud_endpoints/proxy_setting_endpoints.py
+++ b/litellm/proxy/ui_crud_endpoints/proxy_setting_endpoints.py
@@ -176,6 +176,11 @@ class UISettings(BaseModel):
         description="If true, org admins cannot generate API keys via /key/generate.",
     )
 
+    enable_chat_ui: bool = Field(
+        default=False,
+        description="If true, shows the Chat page in the UI sidebar, letting users chat with an LLM and connect their own MCP server credentials via OAuth.",
+    )
+
 
 class UISettingsResponse(SettingsResponse):
     """Response model for UI settings"""
@@ -199,6 +204,7 @@ class UISettingsResponse(SettingsResponse):
     "scope_user_search_to_org",
     "disable_custom_api_keys",
     "disable_key_generate_for_org_admin",
+    "enable_chat_ui",
 }
 
 # Flags that must be synced from the persisted UISettings into
diff --git a/ui/litellm-dashboard/eslint-metrics.json b/ui/litellm-dashboard/eslint-metrics.json
index 09ad247391b9..8ba28795c6ff 100644
--- a/ui/litellm-dashboard/eslint-metrics.json
+++ b/ui/litellm-dashboard/eslint-metrics.json
@@ -1,5 +1,5 @@
 {
   "@typescript-eslint/no-explicit-any": 2014,
-  "complexity": 126,
+  "complexity": 128,
   "max-depth": 61
 }
diff --git a/ui/litellm-dashboard/eslint-suppressions.json b/ui/litellm-dashboard/eslint-suppressions.json
index 7a3c8f4a42c0..181ad324894b 100644
--- a/ui/litellm-dashboard/eslint-suppressions.json
+++ b/ui/litellm-dashboard/eslint-suppressions.json
@@ -4,6 +4,155 @@
       "count": 1
     }
   },
+  "src/app/(dashboard)/budgets/components/budget_modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/budgets/components/budget_panel.test.tsx": {
+    "unused-imports/no-unused-imports": {
+      "count": 2
+    }
+  },
+  "src/app/(dashboard)/budgets/components/budget_panel.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/budgets/components/edit_budget_modal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/caching/components/cache_dashboard.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react-hooks/purity": {
+      "count": 1
+    },
+    "react-hooks/set-state-in-effect": {
+      "count": 2
+    }
+  },
+  "src/app/(dashboard)/caching/components/cache_health.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/caching/components/cache_settings/CacheFieldRenderer.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/caching/components/cache_settings/RedisTypeSelector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/caching/components/cache_settings/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/cost-tracking/components/add_margin_form.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/cost-tracking/components/add_provider_form.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/cost-tracking/components/cost_tracking_settings.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/cost-tracking/components/how_it_works.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_cost_results.test.tsx": {
+    "unused-imports/no-unused-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_cost_results.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_export_dropdown.test.tsx": {
+    "unused-imports/no-unused-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_export_dropdown.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/cost-tracking/components/pricing_calculator/use_multi_cost_estimate.ts": {
+    "no-restricted-syntax": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/cost-tracking/components/provider_discount_table.test.tsx": {
+    "unused-imports/no-unused-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/cost-tracking/components/provider_discount_table.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/cost-tracking/components/provider_display_helpers.test.ts": {
+    "unused-imports/no-unused-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/cost-tracking/components/provider_margin_table.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/cost-tracking/components/use_discount_config.ts": {
+    "no-restricted-syntax": {
+      "count": 2
+    }
+  },
+  "src/app/(dashboard)/cost-tracking/components/use_margin_config.ts": {
+    "no-restricted-syntax": {
+      "count": 2
+    }
+  },
+  "src/app/(dashboard)/guardrails-monitor/components/EvaluationSettingsModal.tsx": {
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/guardrails-monitor/components/GuardrailsMonitorView.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/guardrails-monitor/components/ScoreChart.test.tsx": {
+    "react/display-name": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/guardrails-monitor/components/ScoreChart.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
   "src/app/(dashboard)/hooks/accessGroups/useAccessGroupDetails.ts": {
     "no-restricted-syntax": {
       "count": 1
@@ -144,68 +293,348 @@
       "count": 2
     }
   },
-  "src/app/(dashboard)/hooks/router/useRouterFields.ts": {
-    "no-restricted-syntax": {
+  "src/app/(dashboard)/hooks/router/useRouterFields.ts": {
+    "no-restricted-syntax": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/hooks/storeModelInDB/useStoreModelInDB.ts": {
+    "no-restricted-syntax": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/hooks/storeRequestInSpendLogs/useStoreRequestInSpendLogs.ts": {
+    "no-restricted-syntax": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/hooks/teams/useTeams.ts": {
+    "no-restricted-syntax": {
+      "count": 2
+    }
+  },
+  "src/app/(dashboard)/memory/components/MemoryView.tsx": {
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react-hooks/preserve-manual-memoization": {
+      "count": 4
+    }
+  },
+  "src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.test.tsx": {
+    "max-params": {
+      "count": 1
+    },
+    "unused-imports/no-unused-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react-hooks/set-state-in-effect": {
+      "count": 3
+    }
+  },
+  "src/app/(dashboard)/models-and-endpoints/components/ModelRetrySettingsTab.test.tsx": {
+    "react/display-name": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/models-and-endpoints/components/ModelRetrySettingsTab.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/models-and-endpoints/components/PriceDataManagementTab.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/playground/components/chat_ui/AdditionalModelSettings.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react-hooks/set-state-in-effect": {
+      "count": 2
+    }
+  },
+  "src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.tsx": {
+    "react-hooks/set-state-in-effect": {
+      "count": 5
+    }
+  },
+  "src/app/(dashboard)/playground/components/chat_ui/ChatImageUtils.test.tsx": {
+    "max-nested-callbacks": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react-hooks/set-state-in-effect": {
+      "count": 4
+    },
+    "unused-imports/no-unused-imports": {
+      "count": 13
+    }
+  },
+  "src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterOutput.tsx": {
+    "no-restricted-syntax": {
+      "count": 2
+    }
+  },
+  "src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterTool.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.tsx": {
+    "react-hooks/immutability": {
+      "count": 2
+    },
+    "react-hooks/preserve-manual-memoization": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx": {
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx": {
+    "react-hooks/preserve-manual-memoization": {
+      "count": 3
+    }
+  },
+  "src/app/(dashboard)/playground/llm_calls/a2a_send_message.tsx": {
+    "max-params": {
+      "count": 2
+    },
+    "no-restricted-syntax": {
+      "count": 2
+    }
+  },
+  "src/app/(dashboard)/playground/llm_calls/anthropic_messages.tsx": {
+    "max-params": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/playground/llm_calls/audio_speech.tsx": {
+    "max-params": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/playground/llm_calls/audio_transcriptions.tsx": {
+    "max-params": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/playground/llm_calls/embeddings_api.tsx": {
+    "max-params": {
+      "count": 1
+    },
+    "no-restricted-syntax": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/playground/llm_calls/fetch_agents.tsx": {
+    "no-restricted-syntax": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/playground/llm_calls/image_edits.tsx": {
+    "max-params": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/playground/llm_calls/image_generation.tsx": {
+    "max-params": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/playground/llm_calls/interactions_api.tsx": {
+    "max-params": {
+      "count": 1
+    },
+    "no-restricted-syntax": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/playground/page.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/projects/components/ProjectDetailsPage.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/projects/components/ProjectKeysSection.tsx": {
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/projects/components/ProjectModals/ProjectBaseForm.tsx": {
+    "react-hooks/set-state-in-effect": {
+      "count": 2
+    }
+  },
+  "src/app/(dashboard)/projects/components/ProjectsPage.tsx": {
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/prompts/components/add_prompt_form.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/prompts/components/index.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/prompts/components/prompt_editor_view/DeveloperMessageCard.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/prompts/components/prompt_editor_view/ModelConfigCard.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/prompts/components/prompt_editor_view/PromptCodeSnippets.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react-hooks/set-state-in-effect": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/prompts/components/prompt_editor_view/PromptEditorHeader.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/prompts/components/prompt_editor_view/PromptMessagesCard.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/prompts/components/prompt_editor_view/PublishModal.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/prompts/components/prompt_editor_view/ToolsCard.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/prompts/components/prompt_editor_view/VersionHistorySidePanel.test.tsx": {
+    "max-nested-callbacks": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/prompts/components/prompt_editor_view/VersionHistorySidePanel.tsx": {
+    "react-hooks/immutability": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/prompts/components/prompt_editor_view/conversation_panel/MessageInput.tsx": {
+    "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/app/(dashboard)/hooks/storeModelInDB/useStoreModelInDB.ts": {
-    "no-restricted-syntax": {
+  "src/app/(dashboard)/prompts/components/prompt_editor_view/conversation_panel/index.tsx": {
+    "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/app/(dashboard)/hooks/storeRequestInSpendLogs/useStoreRequestInSpendLogs.ts": {
+  "src/app/(dashboard)/prompts/components/prompt_editor_view/conversation_panel/useConversation.ts": {
     "no-restricted-syntax": {
       "count": 1
     }
   },
-  "src/app/(dashboard)/hooks/teams/useTeams.ts": {
-    "no-restricted-syntax": {
+  "src/app/(dashboard)/prompts/components/prompt_info.tsx": {
+    "no-restricted-imports": {
+      "count": 1
+    },
+    "react-hooks/set-state-in-effect": {
       "count": 2
     }
   },
-  "src/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView.tsx": {
+  "src/app/(dashboard)/prompts/components/prompt_table.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "react-hooks/preserve-manual-memoization": {
-      "count": 4
     }
   },
-  "src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.test.tsx": {
-    "max-params": {
+  "src/app/(dashboard)/search-tools/_components/CreateSearchTools.tsx": {
+    "no-restricted-imports": {
       "count": 1
     },
-    "unused-imports/no-unused-imports": {
+    "react-hooks/set-state-in-effect": {
       "count": 1
     }
   },
-  "src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.tsx": {
+  "src/app/(dashboard)/search-tools/_components/SearchToolTester.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "react-hooks/set-state-in-effect": {
-      "count": 3
     }
   },
-  "src/app/(dashboard)/models-and-endpoints/components/ModelRetrySettingsTab.test.tsx": {
-    "react/display-name": {
+  "src/app/(dashboard)/search-tools/_components/SearchToolView.tsx": {
+    "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/app/(dashboard)/models-and-endpoints/components/ModelRetrySettingsTab.tsx": {
+  "src/app/(dashboard)/search-tools/_components/SearchTools.tsx": {
     "no-restricted-imports": {
       "count": 1
+    },
+    "react-hooks/static-components": {
+      "count": 1
     }
   },
-  "src/app/(dashboard)/models-and-endpoints/components/PriceDataManagementTab.tsx": {
+  "src/app/(dashboard)/transform-request/TransformRequestPanel.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/app/(dashboard)/playground/page.tsx": {
+  "src/app/(dashboard)/ui-theme/UIThemeSettings.tsx": {
     "no-restricted-imports": {
       "count": 1
+    },
+    "no-restricted-syntax": {
+      "count": 3
+    },
+    "react-hooks/immutability": {
+      "count": 1
+    }
+  },
+  "src/app/(dashboard)/workflows/WorkflowRuns.tsx": {
+    "no-restricted-syntax": {
+      "count": 3
+    },
+    "react-hooks/set-state-in-effect": {
+      "count": 1
     }
   },
   "src/app/login/LoginPage.tsx": {
@@ -293,81 +722,6 @@
       "count": 1
     }
   },
-  "src/app/(dashboard)/cost-tracking/components/add_margin_form.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/cost-tracking/components/add_provider_form.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/cost-tracking/components/cost_tracking_settings.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/cost-tracking/components/how_it_works.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_cost_results.test.tsx": {
-    "unused-imports/no-unused-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_cost_results.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_export_dropdown.test.tsx": {
-    "unused-imports/no-unused-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/cost-tracking/components/pricing_calculator/multi_export_dropdown.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/cost-tracking/components/pricing_calculator/use_multi_cost_estimate.ts": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/cost-tracking/components/provider_discount_table.test.tsx": {
-    "unused-imports/no-unused-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/cost-tracking/components/provider_discount_table.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/cost-tracking/components/provider_display_helpers.test.ts": {
-    "unused-imports/no-unused-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/cost-tracking/components/provider_margin_table.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/cost-tracking/components/use_discount_config.ts": {
-    "no-restricted-syntax": {
-      "count": 2
-    }
-  },
-  "src/app/(dashboard)/cost-tracking/components/use_margin_config.ts": {
-    "no-restricted-syntax": {
-      "count": 2
-    }
-  },
   "src/components/CreateUserButton.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -419,36 +773,11 @@
       "count": 1
     }
   },
-  "src/app/(dashboard)/guardrails-monitor/components/EvaluationSettingsModal.tsx": {
-    "react-hooks/set-state-in-effect": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/guardrails-monitor/components/GuardrailsMonitorView.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/guardrails-monitor/components/ScoreChart.test.tsx": {
-    "react/display-name": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/guardrails-monitor/components/ScoreChart.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/components/HelpLink.test.tsx": {
     "unused-imports/no-unused-imports": {
       "count": 1
     }
   },
-  "src/app/(dashboard)/memory/components/MemoryView.tsx": {
-    "react-hooks/set-state-in-effect": {
-      "count": 1
-    }
-  },
   "src/components/Navbar/BlogDropdown/BlogDropdown.test.tsx": {
     "max-nested-callbacks": {
       "count": 12
@@ -472,26 +801,6 @@
       "count": 4
     }
   },
-  "src/app/(dashboard)/projects/components/ProjectDetailsPage.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/projects/components/ProjectKeysSection.tsx": {
-    "react-hooks/set-state-in-effect": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/projects/components/ProjectModals/ProjectBaseForm.tsx": {
-    "react-hooks/set-state-in-effect": {
-      "count": 2
-    }
-  },
-  "src/app/(dashboard)/projects/components/ProjectsPage.tsx": {
-    "react-hooks/set-state-in-effect": {
-      "count": 1
-    }
-  },
   "src/components/SCIM.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -505,32 +814,6 @@
       "count": 1
     }
   },
-  "src/app/(dashboard)/search-tools/_components/CreateSearchTools.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "react-hooks/set-state-in-effect": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/search-tools/_components/SearchToolTester.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/search-tools/_components/SearchToolView.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/search-tools/_components/SearchTools.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "react-hooks/static-components": {
-      "count": 1
-    }
-  },
   "src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterSettings.tsx": {
     "react-hooks/set-state-in-effect": {
       "count": 1
@@ -750,7 +1033,7 @@
       "count": 1
     },
     "react-hooks/set-state-in-effect": {
-      "count": 2
+      "count": 1
     }
   },
   "src/components/agents/add_agent_form.tsx": {
@@ -790,26 +1073,6 @@
       "count": 1
     }
   },
-  "src/app/(dashboard)/budgets/components/budget_modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/budgets/components/budget_panel.test.tsx": {
-    "unused-imports/no-unused-imports": {
-      "count": 2
-    }
-  },
-  "src/app/(dashboard)/budgets/components/budget_panel.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/budgets/components/edit_budget_modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/components/bulk_create_users_button.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -818,33 +1081,36 @@
       "count": 1
     }
   },
-  "src/app/(dashboard)/caching/components/cache_dashboard.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "react-hooks/purity": {
+  "src/components/chat/ChatMessages.tsx": {
+    "react-hooks/refs": {
       "count": 1
+    }
+  },
+  "src/components/chat/ChatPage.tsx": {
+    "max-params": {
+      "count": 2
     },
     "react-hooks/set-state-in-effect": {
       "count": 2
-    }
-  },
-  "src/app/(dashboard)/caching/components/cache_health.tsx": {
-    "no-restricted-imports": {
+    },
+    "unused-imports/no-unused-imports": {
       "count": 1
     }
   },
-  "src/app/(dashboard)/caching/components/cache_settings/CacheFieldRenderer.tsx": {
-    "no-restricted-imports": {
+  "src/components/chat/ConversationList.tsx": {
+    "react-hooks/set-state-in-effect": {
       "count": 1
     }
   },
-  "src/app/(dashboard)/caching/components/cache_settings/RedisTypeSelector.tsx": {
-    "no-restricted-imports": {
-      "count": 1
+  "src/components/chat/MCPAppsPanel.tsx": {
+    "max-nested-callbacks": {
+      "count": 2
+    },
+    "react-hooks/set-state-in-effect": {
+      "count": 2
     }
   },
-  "src/app/(dashboard)/caching/components/cache_settings/index.tsx": {
+  "src/components/chat/MCPCredentialsTab.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
@@ -852,6 +1118,11 @@
       "count": 1
     }
   },
+  "src/components/chat/useChatHistory.ts": {
+    "react-hooks/set-state-in-effect": {
+      "count": 3
+    }
+  },
   "src/components/claude_code_plugins.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -1138,6 +1409,16 @@
       "count": 1
     }
   },
+  "src/components/llm_calls/chat_completion.tsx": {
+    "max-params": {
+      "count": 1
+    }
+  },
+  "src/components/llm_calls/responses_api.tsx": {
+    "max-params": {
+      "count": 1
+    }
+  },
   "src/components/mcp_hub_table_columns.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -1464,132 +1745,6 @@
       "count": 1
     }
   },
-  "src/app/(dashboard)/playground/components/chat_ui/AdditionalModelSettings.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "react-hooks/set-state-in-effect": {
-      "count": 2
-    }
-  },
-  "src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.tsx": {
-    "react-hooks/set-state-in-effect": {
-      "count": 5
-    }
-  },
-  "src/app/(dashboard)/playground/components/chat_ui/ChatImageUtils.test.tsx": {
-    "max-nested-callbacks": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "react-hooks/set-state-in-effect": {
-      "count": 4
-    },
-    "unused-imports/no-unused-imports": {
-      "count": 13
-    }
-  },
-  "src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterOutput.tsx": {
-    "no-restricted-syntax": {
-      "count": 2
-    }
-  },
-  "src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterTool.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.tsx": {
-    "react-hooks/immutability": {
-      "count": 2
-    },
-    "react-hooks/preserve-manual-memoization": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx": {
-    "react-hooks/set-state-in-effect": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx": {
-    "react-hooks/preserve-manual-memoization": {
-      "count": 3
-    }
-  },
-  "src/app/(dashboard)/playground/llm_calls/a2a_send_message.tsx": {
-    "max-params": {
-      "count": 2
-    },
-    "no-restricted-syntax": {
-      "count": 2
-    }
-  },
-  "src/app/(dashboard)/playground/llm_calls/anthropic_messages.tsx": {
-    "max-params": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/playground/llm_calls/audio_speech.tsx": {
-    "max-params": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/playground/llm_calls/audio_transcriptions.tsx": {
-    "max-params": {
-      "count": 1
-    }
-  },
-  "src/components/llm_calls/chat_completion.tsx": {
-    "max-params": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/playground/llm_calls/embeddings_api.tsx": {
-    "max-params": {
-      "count": 1
-    },
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/playground/llm_calls/fetch_agents.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/playground/llm_calls/image_edits.tsx": {
-    "max-params": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/playground/llm_calls/image_generation.tsx": {
-    "max-params": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/playground/llm_calls/interactions_api.tsx": {
-    "max-params": {
-      "count": 1
-    },
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
-  "src/components/llm_calls/responses_api.tsx": {
-    "max-params": {
-      "count": 1
-    }
-  },
   "src/components/policies/add_attachment_form.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -1705,87 +1860,6 @@
       "count": 2
     }
   },
-  "src/app/(dashboard)/prompts/components/add_prompt_form.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/prompts/components/prompt_editor_view/DeveloperMessageCard.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/prompts/components/prompt_editor_view/ModelConfigCard.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/prompts/components/prompt_editor_view/PromptCodeSnippets.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "react-hooks/set-state-in-effect": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/prompts/components/prompt_editor_view/PromptEditorHeader.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/prompts/components/prompt_editor_view/PromptMessagesCard.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/prompts/components/prompt_editor_view/PublishModal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/prompts/components/prompt_editor_view/ToolsCard.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/prompts/components/prompt_editor_view/VersionHistorySidePanel.test.tsx": {
-    "max-nested-callbacks": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/prompts/components/prompt_editor_view/VersionHistorySidePanel.tsx": {
-    "react-hooks/immutability": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/prompts/components/prompt_editor_view/conversation_panel/MessageInput.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/prompts/components/prompt_editor_view/conversation_panel/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/prompts/components/prompt_editor_view/conversation_panel/useConversation.ts": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/prompts/components/prompt_info.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "react-hooks/set-state-in-effect": {
-      "count": 2
-    }
-  },
-  "src/app/(dashboard)/prompts/components/prompt_table.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/components/public_model_hub.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -1914,22 +1988,6 @@
       "count": 1
     }
   },
-  "src/app/(dashboard)/transform-request/TransformRequestPanel.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "src/app/(dashboard)/ui-theme/UIThemeSettings.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "no-restricted-syntax": {
-      "count": 3
-    },
-    "react-hooks/immutability": {
-      "count": 1
-    }
-  },
   "src/components/usage.tsx": {
     "no-restricted-imports": {
       "count": 2
@@ -2076,14 +2134,6 @@
       "count": 1
     }
   },
-  "src/app/(dashboard)/workflows/WorkflowRuns.tsx": {
-    "no-restricted-syntax": {
-      "count": 3
-    },
-    "react-hooks/set-state-in-effect": {
-      "count": 1
-    }
-  },
   "src/contexts/AuthContext.tsx": {
     "react-hooks/set-state-in-effect": {
       "count": 1
@@ -2162,13 +2212,5 @@
     "react/display-name": {
       "count": 1
     }
-  },
-  "src/app/(dashboard)/prompts/components/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "react-hooks/set-state-in-effect": {
-      "count": 1
-    }
   }
-}
+}
\ No newline at end of file
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/components/SidebarProvider.tsx b/ui/litellm-dashboard/src/app/(dashboard)/components/SidebarProvider.tsx
index 1e091314ecdc..4629def86f35 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/components/SidebarProvider.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/components/SidebarProvider.tsx
@@ -15,6 +15,7 @@ const SidebarProvider = ({ setPage, defaultSelectedKey, sidebarCollapsed }: Side
   const { accessToken } = useAuthorized();
   const [enabledPagesInternalUsers, setEnabledPagesInternalUsers] = useState<string[] | null>(null);
   const [enableProjectsUI, setEnableProjectsUI] = useState<boolean>(false);
+  const [enableChatUI, setEnableChatUI] = useState<boolean>(false);
   const [disableAgentsForInternalUsers, setDisableAgentsForInternalUsers] = useState<boolean>(false);
   const [allowAgentsForTeamAdmins, setAllowAgentsForTeamAdmins] = useState<boolean>(false);
   const [disableVectorStoresForInternalUsers, setDisableVectorStoresForInternalUsers] = useState<boolean>(false);
@@ -46,6 +47,10 @@ const SidebarProvider = ({ setPage, defaultSelectedKey, sidebarCollapsed }: Side
           setEnableProjectsUI(Boolean(settings.values.enable_projects_ui));
         }
 
+        if (settings?.values?.enable_chat_ui !== undefined) {
+          setEnableChatUI(Boolean(settings.values.enable_chat_ui));
+        }
+
         if (settings?.values?.disable_agents_for_internal_users !== undefined) {
           setDisableAgentsForInternalUsers(Boolean(settings.values.disable_agents_for_internal_users));
         }
@@ -76,6 +81,7 @@ const SidebarProvider = ({ setPage, defaultSelectedKey, sidebarCollapsed }: Side
       collapsed={sidebarCollapsed}
       enabledPagesInternalUsers={enabledPagesInternalUsers}
       enableProjectsUI={enableProjectsUI}
+      enableChatUI={enableChatUI}
       disableAgentsForInternalUsers={disableAgentsForInternalUsers}
       allowAgentsForTeamAdmins={allowAgentsForTeamAdmins}
       disableVectorStoresForInternalUsers={disableVectorStoresForInternalUsers}
diff --git a/ui/litellm-dashboard/src/app/chat/page.tsx b/ui/litellm-dashboard/src/app/chat/page.tsx
new file mode 100644
index 000000000000..5046f1628778
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/chat/page.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { Suspense } from "react";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import ChatPage from "@/components/chat/ChatPage";
+
+// ChatPage uses useSearchParams() which requires a Suspense boundary for static export.
+const ChatPageContent = () => {
+  const { accessToken, userRole, userId, userEmail } = useAuthorized();
+
+  return (
+    <ChatPage
+      accessToken={accessToken ?? ""}
+      userRole={userRole ?? ""}
+      userId={userId ?? ""}
+      userEmail={userEmail ?? ""}
+    />
+  );
+};
+
+const ChatPageRoute = () => (
+  <Suspense>
+    <ChatPageContent />
+  </Suspense>
+);
+
+export default ChatPageRoute;
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/UISettings.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/UISettings.tsx
index 9ce0d9088382..ec970c348738 100644
--- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/UISettings.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/UISettings.tsx
@@ -19,6 +19,7 @@ export default function UISettings() {
   const forwardClientHeadersProperty = schema?.properties?.forward_client_headers_to_llm_api;
   const forwardLLMProviderAuthHeadersProperty = schema?.properties?.forward_llm_provider_auth_headers;
   const enableProjectsUIProperty = schema?.properties?.enable_projects_ui;
+  const enableChatUIProperty = schema?.properties?.enable_chat_ui;
   const enabledPagesProperty = schema?.properties?.enabled_ui_pages_internal_users;
   const disableAgentsProperty = schema?.properties?.disable_agents_for_internal_users;
   const allowAgentsTeamAdminsProperty = schema?.properties?.allow_agents_for_team_admins;
@@ -114,6 +115,21 @@ export default function UISettings() {
     );
   };
 
+  const handleToggleEnableChatUI = (checked: boolean) => {
+    updateSettings(
+      { enable_chat_ui: checked },
+      {
+        onSuccess: () => {
+          NotificationManager.success("UI settings updated successfully. Refreshing page...");
+          setTimeout(() => window.location.reload(), 1000);
+        },
+        onError: (error) => {
+          NotificationManager.fromBackend(error);
+        },
+      },
+    );
+  };
+
   const handleToggleRequireAuthForPublicAIHub = (checked: boolean) => {
     updateSettings(
       { require_auth_for_public_ai_hub: checked },
@@ -335,6 +351,23 @@ export default function UISettings() {
             </Space>
           )}
 
+          <Space align="start" size="middle">
+            <Switch
+              checked={Boolean(values.enable_chat_ui)}
+              disabled={isUpdating}
+              loading={isUpdating}
+              onChange={handleToggleEnableChatUI}
+              aria-label={enableChatUIProperty?.description ?? "Enable Chat page"}
+            />
+            <Space direction="vertical" size={4}>
+              <Typography.Text strong>[BETA] Enable Chat page (page will refresh)</Typography.Text>
+              <Typography.Text type="secondary">
+                {enableChatUIProperty?.description ??
+                  "If enabled, shows the Chat page in the UI sidebar, letting users chat with an LLM and connect their own MCP server credentials via OAuth."}
+              </Typography.Text>
+            </Space>
+          </Space>
+
           <Divider />
 
           {/* Agents access control */}
diff --git a/ui/litellm-dashboard/src/components/chat/ChatMessages.tsx b/ui/litellm-dashboard/src/components/chat/ChatMessages.tsx
new file mode 100644
index 000000000000..53877be1737b
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/chat/ChatMessages.tsx
@@ -0,0 +1,590 @@
+"use client";
+
+import { ToolOutlined, CopyOutlined, CheckOutlined, EditOutlined } from "@ant-design/icons";
+import { Collapse, Tooltip } from "antd";
+import React, { useEffect, useRef, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { coy } from "react-syntax-highlighter/dist/esm/styles/prism";
+import ReasoningContent from "@/components/chat_ui/ReasoningContent";
+import MCPEventsDisplay from "@/components/chat_ui/MCPEventsDisplay";
+import { ChatMessage } from "./types";
+
+const { Panel } = Collapse;
+
+// Keys whose values must be redacted in tool args display
+const REDACTED_KEY_PATTERNS = /token|key|secret|password|auth/i;
+
+function redactSensitiveValues(obj: Record<string, unknown>): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(obj)) {
+    if (REDACTED_KEY_PATTERNS.test(k)) {
+      result[k] = "[redacted]";
+    } else if (Array.isArray(v)) {
+      result[k] = v.map((item) =>
+        item !== null && typeof item === "object" && !Array.isArray(item)
+          ? redactSensitiveValues(item as Record<string, unknown>)
+          : item,
+      );
+    } else if (v !== null && typeof v === "object") {
+      result[k] = redactSensitiveValues(v as Record<string, unknown>);
+    } else {
+      result[k] = v;
+    }
+  }
+  return result;
+}
+
+function formatTimestamp(ts: number): string {
+  const d = new Date(ts);
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mm = String(d.getMinutes()).padStart(2, "0");
+  return `${hh}:${mm}`;
+}
+
+// Shared markdown code renderer matching ReasoningContent style.
+// react-markdown v9 removed the `inline` prop; detect fenced blocks via language className.
+function MarkdownCodeRenderer({
+  node,
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<"code"> & { node?: unknown }) {
+  const match = /language-(\w+)/.exec(className || "");
+  return match ? (
+    <SyntaxHighlighter
+      style={coy as Record<string, React.CSSProperties>}
+      language={match[1]}
+      PreTag="div"
+      className="rounded-md my-2"
+      {...(props as Record<string, unknown>)}
+    >
+      {String(children).replace(/\n$/, "")}
+    </SyntaxHighlighter>
+  ) : (
+    <code className={`${className ?? ""} px-1.5 py-0.5 rounded bg-gray-100 text-sm font-mono`} {...props}>
+      {children}
+    </code>
+  );
+}
+
+// ------- Sub-components -------
+
+interface UserBubbleProps {
+  message: ChatMessage;
+  onEdit?: (messageId: string, newContent: string) => void;
+  isStreaming?: boolean;
+}
+
+function UserBubble({ message, onEdit, isStreaming }: UserBubbleProps) {
+  const [hovered, setHovered] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [editValue, setEditValue] = useState(message.content);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (editing && textareaRef.current) {
+      textareaRef.current.focus();
+      textareaRef.current.selectionStart = textareaRef.current.value.length;
+    }
+  }, [editing]);
+
+  // Auto-resize textarea
+  useEffect(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    ta.style.height = `${ta.scrollHeight}px`;
+  }, [editValue, editing]);
+
+  const handleSave = () => {
+    const trimmed = editValue.trim();
+    if (trimmed && trimmed !== message.content && onEdit) {
+      onEdit(message.id, trimmed);
+    }
+    setEditing(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSave();
+    }
+    if (e.key === "Escape") {
+      setEditValue(message.content);
+      setEditing(false);
+    }
+  };
+
+  if (editing) {
+    return (
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end" }}>
+        <div
+          style={{
+            width: "72%",
+            background: "#fff",
+            border: "1.5px solid #1677ff",
+            borderRadius: 12,
+            overflow: "hidden",
+            boxShadow: "0 0 0 3px rgba(22,119,255,0.1)",
+          }}
+        >
+          <textarea
+            ref={textareaRef}
+            value={editValue}
+            onChange={(e) => setEditValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            style={{
+              width: "100%",
+              padding: "10px 14px",
+              border: "none",
+              outline: "none",
+              resize: "none",
+              fontSize: 14,
+              lineHeight: "1.6",
+              color: "#111827",
+              fontFamily: "inherit",
+              background: "transparent",
+              boxSizing: "border-box",
+              minHeight: 40,
+            }}
+          />
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "flex-end",
+              gap: 8,
+              padding: "6px 10px 8px",
+              borderTop: "1px solid #f0f0f0",
+            }}
+          >
+            <button
+              onClick={() => {
+                setEditValue(message.content);
+                setEditing(false);
+              }}
+              style={{
+                padding: "4px 12px",
+                borderRadius: 6,
+                border: "1px solid #d1d5db",
+                background: "#fff",
+                color: "#374151",
+                fontSize: 13,
+                cursor: "pointer",
+              }}
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSave}
+              disabled={!editValue.trim()}
+              style={{
+                padding: "4px 12px",
+                borderRadius: 6,
+                border: "none",
+                background: editValue.trim() ? "#1677ff" : "#f3f4f6",
+                color: editValue.trim() ? "#fff" : "#9ca3af",
+                fontSize: 13,
+                fontWeight: 500,
+                cursor: editValue.trim() ? "pointer" : "not-allowed",
+              }}
+            >
+              Save &amp; Send
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", width: "100%" }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <div style={{ display: "flex", alignItems: "flex-end", gap: 6, maxWidth: "72%" }}>
+        {/* Edit button — appears on hover, to the left of the bubble */}
+        {hovered && !isStreaming && onEdit && (
+          <Tooltip title="Edit message">
+            <button
+              onClick={() => {
+                setEditValue(message.content);
+                setEditing(true);
+              }}
+              style={{
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                padding: "4px 6px",
+                borderRadius: 5,
+                color: "#9ca3af",
+                fontSize: 13,
+                flexShrink: 0,
+                display: "flex",
+                alignItems: "center",
+                transition: "color 0.15s",
+              }}
+              onMouseEnter={(e) => {
+                (e.currentTarget as HTMLButtonElement).style.color = "#6b7280";
+              }}
+              onMouseLeave={(e) => {
+                (e.currentTarget as HTMLButtonElement).style.color = "#9ca3af";
+              }}
+            >
+              <EditOutlined />
+            </button>
+          </Tooltip>
+        )}
+        <div
+          style={{
+            backgroundColor: "#f0f2f5",
+            borderRadius: 16,
+            padding: "10px 14px",
+            fontSize: 14,
+            lineHeight: "1.6",
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word",
+            color: "#111827",
+          }}
+        >
+          {message.content}
+        </div>
+      </div>
+      <span style={{ fontSize: 11, color: "#9ca3af", marginTop: 4 }}>{formatTimestamp(message.timestamp)}</span>
+    </div>
+  );
+}
+
+interface AssistantBubbleProps {
+  message: ChatMessage;
+  isLastMessage: boolean;
+  isStreaming: boolean;
+  isTypingIndicator: boolean;
+  /** MCP events stored on the message — rendered inline below the response. */
+  mcpEvents?: ChatMessage["mcpEvents"];
+}
+
+function AssistantBubble({ message, isLastMessage, isStreaming, isTypingIndicator, mcpEvents }: AssistantBubbleProps) {
+  // Ref to control ReasoningContent collapse on streaming end.
+  // ReasoningContent manages its own expanded state; we use a key to
+  // remount it (collapsed by default) when streaming finishes.
+  const reasoningKeyRef = useRef<number>(0);
+  const prevStreamingRef = useRef<boolean>(isStreaming);
+
+  useEffect(() => {
+    if (prevStreamingRef.current && !isStreaming) {
+      // Streaming just stopped — bump the key to remount ReasoningContent
+      // with isExpanded default (false won't work since it starts expanded).
+      // ReasoningContent always starts expanded on mount; we accept that
+      // behaviour and leave collapse-on-finish as a best-effort remount.
+      reasoningKeyRef.current += 1;
+    }
+    prevStreamingRef.current = isStreaming;
+  }, [isStreaming]);
+
+  const showReasoningPlaceholder = isLastMessage && isStreaming && !message.reasoningContent;
+
+  const showReasoning = !!message.reasoningContent || showReasoningPlaceholder;
+
+  if (isTypingIndicator) {
+    return (
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 4, padding: "10px 4px" }}>
+          <TypingDots />
+        </div>
+      </div>
+    );
+  }
+
+  // Split content at trailing "[stopped]"
+  let mainContent = message.content;
+  let stoppedSuffix = false;
+  if (mainContent.endsWith("[stopped]")) {
+    mainContent = mainContent.slice(0, -"[stopped]".length);
+    stoppedSuffix = true;
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", maxWidth: "80%" }}>
+      {showReasoning &&
+        (showReasoningPlaceholder ? (
+          <ThinkingPlaceholder />
+        ) : (
+          <ReasoningContent key={reasoningKeyRef.current} reasoningContent={message.reasoningContent!} />
+        ))}
+
+      <div
+        style={{
+          fontSize: 14,
+          lineHeight: "1.7",
+          color: "#111827",
+          wordBreak: "break-word",
+        }}
+      >
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          components={{
+            code: MarkdownCodeRenderer as React.ComponentType<React.ComponentPropsWithoutRef<"code">>,
+          }}
+        >
+          {mainContent}
+        </ReactMarkdown>
+        {stoppedSuffix && <span style={{ color: "#9ca3af", fontStyle: "italic" }}> [stopped]</span>}
+      </div>
+
+      <CopyButton text={mainContent} />
+      {mcpEvents && mcpEvents.length > 0 && (
+        <div style={{ marginTop: 8, maxWidth: "100%" }}>
+          <MCPEventsDisplay events={mcpEvents} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      })
+      .catch(() => {
+        // clipboard not available (non-HTTPS or permission denied) — silently no-op
+      });
+  };
+
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 4, marginTop: 6 }}>
+      <Tooltip title={copied ? "Copied!" : "Copy"}>
+        <button
+          onClick={handleCopy}
+          style={{
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            padding: "4px 6px",
+            borderRadius: 5,
+            color: copied ? "#52c41a" : "#9ca3af",
+            fontSize: 13,
+            display: "flex",
+            alignItems: "center",
+            gap: 4,
+            transition: "color 0.15s",
+          }}
+          onMouseEnter={(e) => {
+            if (!copied) (e.currentTarget as HTMLButtonElement).style.color = "#6b7280";
+          }}
+          onMouseLeave={(e) => {
+            if (!copied) (e.currentTarget as HTMLButtonElement).style.color = "#9ca3af";
+          }}
+        >
+          {copied ? <CheckOutlined /> : <CopyOutlined />}
+        </button>
+      </Tooltip>
+    </div>
+  );
+}
+
+function ThinkingPlaceholder() {
+  return (
+    <>
+      <style>{`
+        @keyframes thinking-pulse {
+          0%, 100% { opacity: 0.4; }
+          50% { opacity: 1; }
+        }
+        .chat-thinking-text {
+          animation: thinking-pulse 1.4s ease-in-out infinite;
+        }
+      `}</style>
+      <div
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 6,
+          padding: "4px 10px",
+          marginBottom: 8,
+          backgroundColor: "#f9fafb",
+          border: "1px solid #e5e7eb",
+          borderRadius: 8,
+          fontSize: 12,
+          color: "#6b7280",
+        }}
+      >
+        <span className="chat-thinking-text">Thinking...</span>
+      </div>
+    </>
+  );
+}
+
+function TypingDots() {
+  return (
+    <>
+      <style>{`
+        @keyframes chat-typing-bounce {
+          0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+          30% { transform: translateY(-4px); opacity: 1; }
+        }
+        .chat-dot {
+          width: 7px;
+          height: 7px;
+          border-radius: 50%;
+          background-color: #9ca3af;
+          animation: chat-typing-bounce 1.2s ease-in-out infinite;
+        }
+        .chat-dot:nth-child(2) { animation-delay: 0.2s; }
+        .chat-dot:nth-child(3) { animation-delay: 0.4s; }
+      `}</style>
+      <div className="chat-dot" />
+      <div className="chat-dot" />
+      <div className="chat-dot" />
+    </>
+  );
+}
+
+interface ToolCardProps {
+  message: ChatMessage;
+}
+
+function ToolCard({ message }: ToolCardProps) {
+  const redactedArgs = message.toolArgs ? redactSensitiveValues(message.toolArgs) : undefined;
+
+  return (
+    <div style={{ maxWidth: "80%" }}>
+      <Collapse
+        size="small"
+        style={{
+          backgroundColor: "#fafafa",
+          border: "1px solid #e5e7eb",
+          borderRadius: 8,
+        }}
+      >
+        <Panel
+          header={
+            <span style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 13 }}>
+              <ToolOutlined style={{ color: "#6b7280" }} />
+              <span style={{ color: "#374151", fontWeight: 500 }}>{message.toolName ?? "Tool call"}</span>
+            </span>
+          }
+          key="tool"
+        >
+          {redactedArgs !== undefined && (
+            <div style={{ marginBottom: message.toolResult ? 12 : 0 }}>
+              <div
+                style={{
+                  fontSize: 11,
+                  fontWeight: 600,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.05em",
+                  color: "#9ca3af",
+                  marginBottom: 4,
+                }}
+              >
+                Arguments
+              </div>
+              <pre
+                style={{
+                  margin: 0,
+                  padding: "8px 10px",
+                  backgroundColor: "#f3f4f6",
+                  borderRadius: 6,
+                  fontSize: 12,
+                  fontFamily:
+                    'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+                  whiteSpace: "pre-wrap",
+                  wordBreak: "break-word",
+                  color: "#374151",
+                }}
+              >
+                {JSON.stringify(redactedArgs, null, 2)}
+              </pre>
+            </div>
+          )}
+
+          {message.toolResult && (
+            <div>
+              <div
+                style={{
+                  fontSize: 11,
+                  fontWeight: 600,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.05em",
+                  color: "#9ca3af",
+                  marginBottom: 4,
+                }}
+              >
+                Result
+              </div>
+              <div
+                style={{
+                  fontSize: 13,
+                  color: "#374151",
+                  whiteSpace: "pre-wrap",
+                  wordBreak: "break-word",
+                  fontFamily:
+                    'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+                }}
+              >
+                {message.toolResult}
+              </div>
+            </div>
+          )}
+        </Panel>
+      </Collapse>
+      <div style={{ fontSize: 11, color: "#9ca3af", marginTop: 4 }}>{formatTimestamp(message.timestamp)}</div>
+    </div>
+  );
+}
+
+// ------- Main component -------
+
+interface Props {
+  messages: ChatMessage[];
+  isStreaming: boolean;
+  onEditMessage?: (messageId: string, newContent: string) => void;
+}
+
+const ChatMessages: React.FC<Props> = ({ messages, isStreaming, onEditMessage }) => {
+  // Scrolling is managed by ChatPage.tsx (scroll lock during streaming,
+  // scroll-to-bottom on new message). No auto-scroll here.
+
+  const lastIndex = messages.length - 1;
+  const lastMsg = messages[lastIndex] ?? null;
+  const isTypingIndicator = isStreaming && lastMsg !== null && lastMsg.role === "assistant" && lastMsg.content === "";
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+      {messages.map((msg, idx) => {
+        const isLastMessage = idx === lastIndex;
+
+        if (msg.role === "user") {
+          return <UserBubble key={msg.id} message={msg} onEdit={onEditMessage} isStreaming={isStreaming} />;
+        }
+
+        if (msg.role === "tool") {
+          return <ToolCard key={msg.id} message={msg} />;
+        }
+
+        // assistant
+        return (
+          <AssistantBubble
+            key={msg.id}
+            message={msg}
+            isLastMessage={isLastMessage}
+            isStreaming={isStreaming}
+            isTypingIndicator={isLastMessage && isTypingIndicator}
+            mcpEvents={msg.mcpEvents}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default ChatMessages;
diff --git a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
new file mode 100644
index 000000000000..2a7fdb75eb86
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
@@ -0,0 +1,1512 @@
+"use client";
+
+import React, { useCallback, useEffect, useRef, useState, useLayoutEffect } from "react";
+import { Tooltip, Skeleton, Popover } from "antd";
+import MessageManager from "@/components/molecules/message_manager";
+import {
+  SettingOutlined,
+  PlusOutlined,
+  EditOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  SearchOutlined,
+  MessageOutlined,
+  AppstoreOutlined,
+  KeyOutlined,
+  ArrowLeftOutlined,
+  DownOutlined,
+  CloseOutlined,
+  CheckOutlined,
+} from "@ant-design/icons";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useChatHistory } from "./useChatHistory";
+import ConversationList from "./ConversationList";
+import ChatMessages from "./ChatMessages";
+import MCPConnectPicker from "./MCPConnectPicker";
+import MCPAppsPanel from "./MCPAppsPanel";
+import MCPCredentialsTab from "./MCPCredentialsTab";
+import { fetchAvailableModels } from "@/components/llm_calls/fetch_models";
+import { makeOpenAIChatCompletionRequest } from "@/components/llm_calls/chat_completion";
+import { makeOpenAIResponsesRequest } from "@/components/llm_calls/responses_api";
+import type { MCPEvent } from "./types";
+import { getProxyBaseUrl } from "@/components/networking";
+import { useUIConfig } from "@/app/(dashboard)/hooks/uiConfig/useUIConfig";
+import { getProviderLogoAndName } from "@/components/provider_info_helpers";
+
+interface ChatPageProps {
+  accessToken: string;
+  userRole: string;
+  userId: string;
+  userEmail?: string;
+}
+
+const SUGGESTIONS = ["Write", "Learn", "Code", "Brainstorm"];
+const MAX_COMPARISON_MODELS = 3;
+const LOCALSTORAGE_MODEL_KEY = "litellm_chat_selected_models";
+
+function getGreeting(): string {
+  const h = new Date().getHours();
+  if (h >= 5 && h < 12) return "Good morning";
+  if (h >= 12 && h < 17) return "Good afternoon";
+  return "Good evening";
+}
+
+// Build the chat UI URL respecting server root path (e.g. /api/v1/ui/chat)
+function getChatUrl(root: string, id?: string): string {
+  return id ? `${root}/ui/chat?id=${id}` : `${root}/ui/chat`;
+}
+
+// Build the dashboard root URL (e.g. /api/v1/ui/)
+function getDashboardUrl(root: string): string {
+  const base = process.env.NEXT_PUBLIC_BASE_URL ?? "";
+  const trimmed = base.replace(/^\/+|\/+$/g, "");
+  return trimmed ? `${root}/${trimmed}/` : `${root}/`;
+}
+
+// Extract provider from model name for logo lookup.
+// Handles prefixed models ("groq/llama-3"), and detects well-known providers by keyword.
+function getProviderFromModelName(modelName: string): string {
+  if (!modelName) return "";
+  const lower = modelName.toLowerCase();
+  const slash = lower.indexOf("/");
+  if (slash > 0) return lower.slice(0, slash);
+  // Keyword matching — order matters (more specific first)
+  if (lower.includes("claude")) return "anthropic";
+  if (lower.includes("gemini")) return "gemini";
+  if (lower.includes("gpt") || lower.includes("chatgpt") || /^o[0-9]/.test(lower)) return "openai";
+  if (lower.includes("mistral") || lower.includes("codestral")) return "mistral";
+  if (lower.includes("llama")) return "meta_llama";
+  if (lower.includes("deepseek")) return "deepseek";
+  if (lower.includes("grok")) return "xai";
+  if (lower.includes("command")) return "cohere";
+  if (lower.includes("nova") || lower.includes("titan")) return "bedrock";
+  return "";
+}
+
+interface ComparisonExchange {
+  userMessage: string;
+  responses: Record<string, string>; // model → accumulated response text
+}
+
+// Module-level async helper — each model gets its own independent Promise so they all run in parallel.
+async function streamToModel(
+  model: string,
+  messages: Array<{ role: "user" | "assistant"; content: string }>,
+  accessToken: string,
+  mcpServers: string[],
+  signal: AbortSignal,
+  onChunk: (model: string, chunk: string) => void,
+  onDone: (model: string) => void,
+): Promise<void> {
+  try {
+    await makeOpenAIChatCompletionRequest(
+      messages,
+      (chunk: string) => onChunk(model, chunk),
+      model,
+      accessToken,
+      undefined, // tags
+      signal,
+      undefined, // onReasoningContent
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined, // positions 8-13
+      mcpServers.length > 0 ? mcpServers : undefined, // position 14: selectedMCPServers
+    );
+  } catch (err: unknown) {
+    // Surface real errors in the response card; ignore user-triggered aborts
+    if (!(err instanceof Error && err.name === "AbortError")) {
+      const msg = err instanceof Error ? err.message : String(err);
+      onChunk(model, `\n\n_Error: ${msg}_`);
+    }
+  } finally {
+    onDone(model);
+  }
+}
+
+const ChatPage: React.FC<ChatPageProps> = ({ accessToken, userRole, userId, userEmail }) => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const activeConversationId = searchParams.get("id");
+  const { data: uiConfig } = useUIConfig();
+  const uiRoot =
+    uiConfig?.server_root_path && uiConfig.server_root_path !== "/"
+      ? uiConfig.server_root_path.replace(/\/+$/, "")
+      : "";
+  const logoSrc = `${getProxyBaseUrl()}/get_image`;
+
+  const [selectedModels, setSelectedModels] = useState<string[]>([]);
+  const [models, setModels] = useState<string[]>([]);
+  const [isLoadingModels, setIsLoadingModels] = useState(true);
+  const [modelSelectorOpen, setModelSelectorOpen] = useState(false);
+  const [modelSearchText, setModelSearchText] = useState("");
+
+  const [selectedMCPServers, setSelectedMCPServers] = useState<string[]>([]);
+  const [responsesSessionId, setResponsesSessionId] = useState<string | null>(null);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [inputText, setInputText] = useState("");
+  const [mcpPopoverOpen, setMcpPopoverOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const _oauthReturn = searchParams?.get("mcpOauthReturn");
+  const [sidebarView, setSidebarView] = useState<"chats" | "apps" | "credentials">(
+    _oauthReturn === "apps" ? "apps" : "chats",
+  );
+  const [storageBannerDismissed, setStorageBannerDismissed] = useState(false);
+
+  // Comparison mode state (active when selectedModels.length > 1)
+  // Each exchange holds the user message + per-model responses so we can do multi-turn comparison.
+  const [comparisonExchanges, setComparisonExchanges] = useState<ComparisonExchange[]>([]);
+  const [comparisonStreamingSet, setComparisonStreamingSet] = useState<Set<string>>(new Set());
+  const comparisonAbortControllersRef = useRef<Record<string, AbortController>>({});
+
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const messagesScrollRef = useRef<HTMLDivElement>(null);
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const streamScrollLock = useRef<number | null>(null);
+
+  const {
+    conversations,
+    activeConversation,
+    storageUnavailable,
+    staleId,
+    createConversation,
+    appendMessage,
+    updateLastAssistantMessage,
+    truncateFromMessage,
+    deleteConversation,
+    renameConversation,
+  } = useChatHistory(activeConversationId);
+
+  // Clean up the OAuth return param after it's been consumed
+  useEffect(() => {
+    if (_oauthReturn && typeof window !== "undefined") {
+      const url = new URL(window.location.href);
+      url.searchParams.delete("mcpOauthReturn");
+      window.history.replaceState({}, "", url.toString());
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Load models
+  useEffect(() => {
+    if (!accessToken) return;
+    setIsLoadingModels(true);
+    fetchAvailableModels(accessToken)
+      .then((data) => {
+        const names = (data || []).map((m: { model_group?: string }) => m.model_group ?? "").filter(Boolean);
+        setModels(names);
+        try {
+          const saved = localStorage.getItem(LOCALSTORAGE_MODEL_KEY);
+          if (saved) {
+            const parsed: unknown = JSON.parse(saved);
+            if (Array.isArray(parsed)) {
+              const valid = (parsed as string[]).filter((m) => names.includes(m));
+              if (valid.length > 0) {
+                setSelectedModels(valid);
+                return;
+              }
+            }
+          }
+        } catch {
+          // ignore parse errors
+        }
+        if (names.length > 0) {
+          setSelectedModels([names[0]]);
+          localStorage.setItem(LOCALSTORAGE_MODEL_KEY, JSON.stringify([names[0]]));
+        }
+      })
+      .catch(() => MessageManager.error("Could not load models"))
+      .finally(() => setIsLoadingModels(false));
+  }, [accessToken]);
+
+  useEffect(() => {
+    if (staleId) router.replace(getChatUrl(uiRoot));
+  }, [staleId, router]);
+
+  // Reset the responses session when switching between conversations so that
+  // previous_response_id from conversation A is never sent for conversation B.
+  useEffect(() => {
+    setResponsesSessionId(null);
+  }, [activeConversationId]);
+
+  const toggleModel = useCallback((model: string) => {
+    setSelectedModels((prev) => {
+      let next: string[];
+      if (prev.includes(model)) {
+        next = prev.filter((m) => m !== model);
+      } else if (prev.length >= MAX_COMPARISON_MODELS) {
+        return prev;
+      } else {
+        next = [...prev, model];
+      }
+      localStorage.setItem(LOCALSTORAGE_MODEL_KEY, JSON.stringify(next));
+      return next;
+    });
+  }, []);
+
+  const isComparisonMode = selectedModels.length > 1;
+  const isAnyStreaming = isStreaming || comparisonStreamingSet.size > 0;
+
+  const handleSend = useCallback(
+    async (text: string, historyOverride?: Array<{ role: "user" | "assistant"; content: string }>) => {
+      const trimmed = text.trim();
+      if (!trimmed || selectedModels.length === 0 || isStreaming) return;
+      const model = selectedModels[0];
+      setInputText("");
+
+      let convId = activeConversationId;
+      if (!convId) {
+        convId = createConversation(model);
+        setResponsesSessionId(null); // new conversation starts a fresh session
+        router.push(getChatUrl(uiRoot, convId));
+      }
+
+      appendMessage(convId, { role: "user", content: trimmed });
+      appendMessage(convId, { role: "assistant", content: "" });
+
+      setIsStreaming(true);
+      abortControllerRef.current = new AbortController();
+
+      // When historyOverride is set (edit / retry), the existing server-side
+      // session chain covers messages that were just truncated and is no longer
+      // valid for the rewritten history.  Eagerly clear the session so that a
+      // failed/aborted edit does not leave a stale session ID that contaminates
+      // the next regular send.
+      if (historyOverride) {
+        setResponsesSessionId(null);
+      }
+
+      // On a normal continuation turn with an active session, the Responses API
+      // already holds the prior context server-side, so we only pass the new
+      // user message (sending the full history would double-count it).
+      //
+      // On the very first turn (no session yet), we send the full history.
+      const previousResponseId = historyOverride ? null : responsesSessionId;
+
+      const history: Array<{ role: "user" | "assistant"; content: string }> = historyOverride
+        ? [...historyOverride, { role: "user" as const, content: trimmed }]
+        : previousResponseId
+          ? [{ role: "user" as const, content: trimmed }]
+          : [
+              // Explicitly filter to only user/assistant roles — tool messages
+              // lack a required tool_call_id and would cause API errors.
+              ...(activeConversation?.messages ?? [])
+                .filter(
+                  (m): m is typeof m & { role: "user" | "assistant" } => m.role === "user" || m.role === "assistant",
+                )
+                .map((m) => ({ role: m.role, content: m.content })),
+              { role: "user" as const, content: trimmed },
+            ];
+
+      let accumulatedContent = "";
+      let accumulatedReasoning = "";
+      // MCP events accumulated locally so we can persist them to the message
+      // without relying on component state (which would cause stale closures).
+      const accumulatedMCPEvents: MCPEvent[] = [];
+      // Track clean completion so partial events are not shown on error/abort.
+      let streamCompletedCleanly = false;
+
+      try {
+        await makeOpenAIResponsesRequest(
+          history,
+          (_role: string, chunk: string) => {
+            accumulatedContent += chunk;
+            updateLastAssistantMessage(convId!, { content: accumulatedContent });
+          },
+          model,
+          accessToken,
+          undefined, // tags
+          abortControllerRef.current.signal,
+          (rc: string) => {
+            accumulatedReasoning += rc;
+            updateLastAssistantMessage(convId!, { reasoningContent: accumulatedReasoning });
+          },
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          selectedMCPServers.length > 0 ? selectedMCPServers : undefined,
+          previousResponseId,
+          (id: string) => setResponsesSessionId(id),
+          (event: MCPEvent) => {
+            // Accumulate locally only — persisted once in finally to avoid
+            // one full localStorage write per MCP event during streaming.
+            accumulatedMCPEvents.push(event);
+          },
+        );
+        streamCompletedCleanly = true;
+      } catch (err: unknown) {
+        if (err instanceof Error && err.name === "AbortError") {
+          updateLastAssistantMessage(convId!, {
+            content: accumulatedContent + " [stopped]",
+          });
+        } else {
+          updateLastAssistantMessage(convId!, {
+            content: "[Something went wrong. The partial response has been saved.]",
+          });
+        }
+      } finally {
+        // Only persist MCP events on clean completion — partial events from an
+        // aborted or errored turn would show incomplete tool calls to the user.
+        if (accumulatedMCPEvents.length > 0 && streamCompletedCleanly) {
+          updateLastAssistantMessage(convId!, { mcpEvents: accumulatedMCPEvents });
+        }
+        setIsStreaming(false);
+        abortControllerRef.current = null;
+      }
+    },
+    [
+      activeConversationId,
+      activeConversation,
+      selectedModels,
+      selectedMCPServers,
+      accessToken,
+      createConversation,
+      appendMessage,
+      updateLastAssistantMessage,
+      router,
+      isStreaming,
+      responsesSessionId,
+    ],
+  );
+
+  const handleSendComparison = useCallback(
+    (text: string, currentExchanges: ComparisonExchange[]) => {
+      const trimmed = text.trim();
+      if (!trimmed || selectedModels.length === 0 || isAnyStreaming) return;
+      setInputText("");
+
+      // Append a new exchange with empty responses
+      const newExchange: ComparisonExchange = { userMessage: trimmed, responses: {} };
+      const newExchangeIdx = currentExchanges.length;
+      setComparisonExchanges((prev) => [...prev, newExchange]);
+      setComparisonStreamingSet(new Set(selectedModels));
+
+      const controllers: Record<string, AbortController> = {};
+      selectedModels.forEach((m) => {
+        controllers[m] = new AbortController();
+      });
+      comparisonAbortControllersRef.current = controllers;
+
+      // Launch all model streams simultaneously — Promise.allSettled ensures they run in parallel
+      // (streamToModel handles its own errors internally so these promises won't reject)
+      void Promise.allSettled(
+        selectedModels.map((model) => {
+          // Build per-model history: each model's past responses become its own context
+          const history: Array<{ role: "user" | "assistant"; content: string }> = [];
+          for (const ex of currentExchanges) {
+            history.push({ role: "user", content: ex.userMessage });
+            history.push({ role: "assistant", content: ex.responses[model] ?? "" });
+          }
+          history.push({ role: "user", content: trimmed });
+
+          return streamToModel(
+            model,
+            history,
+            accessToken,
+            selectedMCPServers,
+            controllers[model].signal,
+            (m, chunk) =>
+              setComparisonExchanges((prev) => {
+                const updated = [...prev];
+                const ex = { ...updated[newExchangeIdx] };
+                ex.responses = { ...ex.responses, [m]: (ex.responses[m] ?? "") + chunk };
+                updated[newExchangeIdx] = ex;
+                return updated;
+              }),
+            (m) =>
+              setComparisonStreamingSet((prev) => {
+                const next = new Set(prev);
+                next.delete(m);
+                return next;
+              }),
+          );
+        }),
+      );
+    },
+    [selectedModels, accessToken, selectedMCPServers, isAnyStreaming],
+  );
+
+  const handleStop = useCallback(() => {
+    abortControllerRef.current?.abort();
+    Object.values(comparisonAbortControllersRef.current).forEach((c) => c.abort());
+    comparisonAbortControllersRef.current = {};
+  }, []);
+
+  const handleEditAndResend = useCallback(
+    (messageId: string, newContent: string) => {
+      if (!activeConversationId || isStreaming) return;
+      // Compute the truncated history synchronously before the async state update lands,
+      // so handleSend receives the correct pre-edit context rather than the stale closure value.
+      const msgs = activeConversation?.messages ?? [];
+      const idx = msgs.findIndex((m) => m.id === messageId);
+      const priorMessages = (idx === -1 ? msgs : msgs.slice(0, idx))
+        .filter((m) => m.role === "user" || m.role === "assistant")
+        .map((m) => ({ role: m.role as "user" | "assistant", content: m.content }));
+      truncateFromMessage(activeConversationId, messageId);
+      handleSend(newContent, priorMessages);
+    },
+    [activeConversationId, isStreaming, activeConversation, truncateFromMessage, handleSend],
+  );
+
+  const handleSubmit = useCallback(
+    (text: string) => {
+      if (isComparisonMode) {
+        handleSendComparison(text, comparisonExchanges);
+      } else {
+        handleSend(text);
+      }
+    },
+    [isComparisonMode, handleSend, handleSendComparison, comparisonExchanges],
+  );
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(inputText);
+    }
+  };
+
+  // Auto-resize textarea
+  useEffect(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    ta.style.height = `${Math.min(ta.scrollHeight, 180)}px`;
+  }, [inputText]);
+
+  // Track scroll position to show/hide scroll-to-bottom button
+  useEffect(() => {
+    const el = messagesScrollRef.current;
+    if (!el) return;
+    const onScroll = () => {
+      const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+      setShowScrollButton(distFromBottom > 120);
+      if (streamScrollLock.current !== null) {
+        streamScrollLock.current = el.scrollTop; // track user-initiated scroll
+      }
+    };
+    el.addEventListener("scroll", onScroll, { passive: true });
+    return () => el.removeEventListener("scroll", onScroll);
+  }, [activeConversation]);
+
+  // Start/stop the scroll lock when streaming begins/ends
+  useEffect(() => {
+    const el = messagesScrollRef.current;
+    if (isStreaming) {
+      streamScrollLock.current = el?.scrollTop ?? 0;
+    } else {
+      streamScrollLock.current = null;
+    }
+  }, [isStreaming]);
+
+  // After every render during streaming, restore the locked scroll position
+  useLayoutEffect(() => {
+    if (streamScrollLock.current === null) return;
+    const el = messagesScrollRef.current;
+    if (!el) return;
+    el.scrollTop = streamScrollLock.current;
+  });
+
+  // Scroll to bottom only when message COUNT increases (new message added)
+  const prevMsgCountRef = useRef(0);
+  useLayoutEffect(() => {
+    const count = activeConversation?.messages?.length ?? 0;
+    const prev = prevMsgCountRef.current;
+    prevMsgCountRef.current = count;
+    if (count > prev) {
+      const el = messagesScrollRef.current;
+      if (el) el.scrollTop = el.scrollHeight;
+    }
+  }, [activeConversation?.messages]);
+
+  const showBlankState = !isComparisonMode
+    ? !activeConversation || activeConversation.messages.length === 0
+    : comparisonExchanges.length === 0;
+  const displayName = userEmail?.split("@")[0] ?? userId ?? "";
+  const greeting = displayName ? `${getGreeting()}, ${displayName}` : getGreeting();
+  const dashboardUrl = getDashboardUrl(uiRoot);
+
+  // Filtered models: selected ones float to the top, then alphabetical
+  const filteredModels = (
+    modelSearchText ? models.filter((m) => m.toLowerCase().includes(modelSearchText.toLowerCase())) : models
+  ).sort((a, b) => {
+    const aSelected = selectedModels.includes(a);
+    const bSelected = selectedModels.includes(b);
+    if (aSelected && !bSelected) return -1;
+    if (!aSelected && bSelected) return 1;
+    return 0;
+  });
+
+  // ---- Model selector popover content ----
+  const modelSelectorContent = (
+    <div style={{ width: 280, maxHeight: 400, display: "flex", flexDirection: "column" }}>
+      <div style={{ padding: "8px 8px 4px" }}>
+        <input
+          autoFocus
+          value={modelSearchText}
+          onChange={(e) => setModelSearchText(e.target.value)}
+          placeholder="Search models..."
+          style={{
+            width: "100%",
+            padding: "6px 10px",
+            border: "1px solid #d1d5db",
+            borderRadius: 6,
+            fontSize: 13,
+            outline: "none",
+            boxSizing: "border-box",
+          }}
+        />
+      </div>
+      {selectedModels.length >= MAX_COMPARISON_MODELS && (
+        <div style={{ padding: "4px 12px", fontSize: 12, color: "#6b7280" }}>
+          Max {MAX_COMPARISON_MODELS} models selected — deselect one to change.
+        </div>
+      )}
+      <div style={{ flex: 1, overflowY: "auto" }}>
+        {filteredModels.map((m) => {
+          const checked = selectedModels.includes(m);
+          const disabled = !checked && selectedModels.length >= MAX_COMPARISON_MODELS;
+          const provider = getProviderFromModelName(m);
+          const { logo } = provider ? getProviderLogoAndName(provider) : { logo: "" };
+          return (
+            <button
+              key={m}
+              disabled={disabled}
+              onClick={() => toggleModel(m)}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                width: "100%",
+                padding: "7px 12px",
+                background: checked ? "#eff6ff" : "transparent",
+                border: "none",
+                cursor: disabled ? "not-allowed" : "pointer",
+                textAlign: "left",
+                opacity: disabled ? 0.45 : 1,
+                borderRadius: 4,
+              }}
+            >
+              <span
+                style={{
+                  width: 16,
+                  height: 16,
+                  borderRadius: 3,
+                  border: `1.5px solid ${checked ? "#1677ff" : "#d1d5db"}`,
+                  background: checked ? "#1677ff" : "#fff",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  flexShrink: 0,
+                  transition: "all 0.1s",
+                }}
+              >
+                {checked && <CheckOutlined style={{ fontSize: 10, color: "#fff" }} />}
+              </span>
+              {logo ? (
+                <img
+                  src={logo}
+                  alt=""
+                  style={{ width: 16, height: 16, objectFit: "contain", flexShrink: 0 }}
+                  onError={(e) => {
+                    (e.currentTarget as HTMLImageElement).style.display = "none";
+                  }}
+                />
+              ) : (
+                <span style={{ width: 16, flexShrink: 0 }} />
+              )}
+              <span
+                style={{
+                  fontSize: 13,
+                  color: "#111827",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {m}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+
+  // ---- Sidebar nav item renderer ----
+  const sidebarNavItem = (icon: React.ReactNode, label: string, onClick: () => void, active = false, kbd?: string) => (
+    <Tooltip title={sidebarCollapsed ? label : undefined} placement="right" key={label}>
+      <button
+        onClick={onClick}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 10,
+          padding: "8px 10px",
+          width: "100%",
+          borderRadius: 7,
+          border: "none",
+          cursor: "pointer",
+          background: active ? "#e8f4ff" : "transparent",
+          color: active ? "#1677ff" : "#374151",
+          textAlign: "left",
+          fontSize: 14,
+          justifyContent: sidebarCollapsed ? "center" : "flex-start",
+          transition: "background 0.12s",
+        }}
+        onMouseEnter={(e) => {
+          if (!active) (e.currentTarget as HTMLButtonElement).style.background = "#f5f5f5";
+        }}
+        onMouseLeave={(e) => {
+          (e.currentTarget as HTMLButtonElement).style.background = active ? "#e8f4ff" : "transparent";
+        }}
+      >
+        <span style={{ fontSize: 16, flexShrink: 0 }}>{icon}</span>
+        {!sidebarCollapsed && (
+          <>
+            <span style={{ flex: 1 }}>{label}</span>
+            {kbd && <span style={{ fontSize: 11, color: "#9ca3af" }}>{kbd}</span>}
+          </>
+        )}
+      </button>
+    </Tooltip>
+  );
+
+  // ---- Model selector trigger button ----
+  const modelSelectorTrigger = isLoadingModels ? (
+    <Skeleton.Input active style={{ width: 160, height: 28 }} />
+  ) : (
+    <Popover
+      open={modelSelectorOpen}
+      onOpenChange={(open) => {
+        setModelSelectorOpen(open);
+        if (!open) setModelSearchText("");
+      }}
+      content={modelSelectorContent}
+      trigger="click"
+      placement="bottomLeft"
+    >
+      <button
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          padding: "5px 10px",
+          borderRadius: 7,
+          border: "1px solid transparent",
+          cursor: "pointer",
+          background: "transparent",
+          color: "#111827",
+          fontSize: 14,
+          fontWeight: 500,
+          maxWidth: 480,
+          overflow: "hidden",
+        }}
+        onMouseEnter={(e) => {
+          (e.currentTarget as HTMLButtonElement).style.background = "#f5f5f5";
+        }}
+        onMouseLeave={(e) => {
+          (e.currentTarget as HTMLButtonElement).style.background = "transparent";
+        }}
+      >
+        {selectedModels.length === 0 ? (
+          <span style={{ color: "#9ca3af" }}>Select model</span>
+        ) : selectedModels.length === 1 ? (
+          <>
+            {(() => {
+              const provider = getProviderFromModelName(selectedModels[0]);
+              const { logo } = provider ? getProviderLogoAndName(provider) : { logo: "" };
+              return logo ? (
+                <img
+                  src={logo}
+                  alt=""
+                  style={{ width: 18, height: 18, objectFit: "contain", flexShrink: 0 }}
+                  onError={(e) => {
+                    (e.currentTarget as HTMLImageElement).style.display = "none";
+                  }}
+                />
+              ) : null;
+            })()}
+            <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: 240 }}>
+              {selectedModels[0]}
+            </span>
+          </>
+        ) : (
+          <div style={{ display: "flex", alignItems: "center", gap: 4, flexWrap: "nowrap", overflow: "hidden" }}>
+            {selectedModels.map((m) => {
+              const provider = getProviderFromModelName(m);
+              const { logo } = provider ? getProviderLogoAndName(provider) : { logo: "" };
+              return (
+                <span
+                  key={m}
+                  style={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 4,
+                    padding: "2px 8px",
+                    background: "#f0f4ff",
+                    borderRadius: 10,
+                    fontSize: 12,
+                    color: "#1677ff",
+                    fontWeight: 500,
+                    flexShrink: 0,
+                  }}
+                >
+                  {logo && (
+                    <img
+                      src={logo}
+                      alt=""
+                      style={{ width: 13, height: 13, objectFit: "contain" }}
+                      onError={(e) => {
+                        (e.currentTarget as HTMLImageElement).style.display = "none";
+                      }}
+                    />
+                  )}
+                  <span style={{ maxWidth: 120, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                    {m}
+                  </span>
+                </span>
+              );
+            })}
+          </div>
+        )}
+        <DownOutlined style={{ fontSize: 10, color: "#9ca3af", flexShrink: 0, marginLeft: 2 }} />
+      </button>
+    </Popover>
+  );
+
+  // ---- Shared input bar ----
+  const inputBar = (inConversation: boolean) => (
+    <div
+      style={{
+        background: "#fff",
+        borderRadius: 12,
+        border: "1px solid #e5e7eb",
+        boxShadow: "0 1px 6px rgba(0,0,0,0.06)",
+        overflow: "hidden",
+      }}
+    >
+      <textarea
+        ref={textareaRef}
+        value={inputText}
+        onChange={(e) => setInputText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={inConversation ? "Send a message..." : "How can I help you today?"}
+        style={{
+          width: "100%",
+          minHeight: inConversation ? 52 : 80,
+          padding: inConversation ? "16px 20px 8px" : "20px 20px 8px",
+          border: "none",
+          outline: "none",
+          resize: "none",
+          fontSize: 15,
+          color: "#111827",
+          background: "transparent",
+          fontFamily: "inherit",
+          boxSizing: "border-box",
+        }}
+      />
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: inConversation ? "4px 12px 10px" : "8px 12px 12px",
+          borderTop: "1px solid #f3f4f6",
+        }}
+      >
+        <Popover
+          open={mcpPopoverOpen}
+          onOpenChange={setMcpPopoverOpen}
+          content={
+            <MCPConnectPicker
+              accessToken={accessToken}
+              selectedServers={selectedMCPServers}
+              onChange={setSelectedMCPServers}
+            />
+          }
+          trigger="click"
+          placement="topLeft"
+        >
+          <button
+            style={{
+              background: "none",
+              border: "1px solid #d1d5db",
+              borderRadius: 6,
+              padding: "5px 10px",
+              cursor: "pointer",
+              fontSize: 14,
+              color: "#6b7280",
+              display: "flex",
+              alignItems: "center",
+              gap: 4,
+            }}
+          >
+            <PlusOutlined />
+            {selectedMCPServers.length > 0 && (
+              <span style={{ fontSize: 12, color: "#1677ff", fontWeight: 500 }}>{selectedMCPServers.length}</span>
+            )}
+          </button>
+        </Popover>
+
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          {!isComparisonMode && (
+            <span
+              style={{
+                fontSize: 12,
+                color: "#9ca3af",
+                maxWidth: 160,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {inConversation
+                ? selectedMCPServers.length > 0
+                  ? `${selectedMCPServers.length} tool${selectedMCPServers.length > 1 ? "s" : ""} connected`
+                  : ""
+                : selectedModels[0] || "No model"}
+            </span>
+          )}
+          {isAnyStreaming ? (
+            <button
+              onClick={handleStop}
+              style={{
+                background: "none",
+                border: "1.5px solid #d1d5db",
+                borderRadius: "50%",
+                width: 32,
+                height: 32,
+                cursor: "pointer",
+                color: "#374151",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexShrink: 0,
+                transition: "border-color 0.15s",
+              }}
+              onMouseEnter={(e) => {
+                (e.currentTarget as HTMLButtonElement).style.borderColor = "#9ca3af";
+              }}
+              onMouseLeave={(e) => {
+                (e.currentTarget as HTMLButtonElement).style.borderColor = "#d1d5db";
+              }}
+            >
+              <div style={{ width: 10, height: 10, background: "#374151", borderRadius: 2 }} />
+            </button>
+          ) : (
+            <button
+              onClick={() => handleSubmit(inputText)}
+              disabled={!inputText.trim() || isLoadingModels || selectedModels.length === 0}
+              style={{
+                background: inputText.trim() && selectedModels.length > 0 ? "#1677ff" : "#f3f4f6",
+                border: "none",
+                borderRadius: 7,
+                padding: "7px 16px",
+                cursor: inputText.trim() && selectedModels.length > 0 ? "pointer" : "not-allowed",
+                color: inputText.trim() && selectedModels.length > 0 ? "#fff" : "#9ca3af",
+                fontSize: 14,
+                fontWeight: 500,
+                transition: "background 0.15s",
+              }}
+            >
+              Send
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        height: "100vh",
+        width: "100vw",
+        background: "#ffffff",
+        fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+        overflow: "hidden",
+      }}
+    >
+      {/* ===== LEFT SIDEBAR ===== */}
+      <div
+        style={{
+          width: sidebarCollapsed ? 56 : 260,
+          flexShrink: 0,
+          background: "#f9fafb",
+          borderRight: "1px solid #e5e7eb",
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+        }}
+      >
+        {/* Sidebar header: logo + collapse button */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            padding: "12px 10px",
+            justifyContent: sidebarCollapsed ? "center" : "space-between",
+            flexShrink: 0,
+          }}
+        >
+          {!sidebarCollapsed && (
+            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+              <img
+                src={logoSrc}
+                alt="LiteLLM"
+                style={{ height: 28, maxWidth: 120, objectFit: "contain", flexShrink: 0 }}
+              />
+              <span style={{ fontWeight: 700, fontSize: 15, color: "#111827", letterSpacing: "-0.01em" }}>LiteLLM</span>
+            </div>
+          )}
+          <Tooltip title={sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"} placement="right">
+            <button
+              onClick={() => setSidebarCollapsed((v) => !v)}
+              style={{
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                padding: 6,
+                borderRadius: 7,
+                color: "#6b7280",
+                fontSize: 16,
+                display: "flex",
+                alignItems: "center",
+              }}
+            >
+              {sidebarCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+            </button>
+          </Tooltip>
+        </div>
+
+        {/* Sidebar nav buttons */}
+        <div style={{ padding: "0 8px 4px", flexShrink: 0 }}>
+          {sidebarNavItem(<EditOutlined />, "New chat", () => router.push(getChatUrl(uiRoot)))}
+          {sidebarNavItem(<SearchOutlined />, "Search chats", () => setSidebarView("chats"))}
+        </div>
+
+        <div style={{ height: 1, background: "#e5e7eb", margin: "4px 8px", flexShrink: 0 }} />
+
+        {/* Chats / Apps tabs + Back to console */}
+        <div style={{ padding: "4px 8px", flexShrink: 0 }}>
+          {sidebarNavItem(<MessageOutlined />, "Chats", () => setSidebarView("chats"), sidebarView === "chats")}
+          {sidebarNavItem(<AppstoreOutlined />, "Apps", () => setSidebarView("apps"), sidebarView === "apps")}
+          {sidebarNavItem(
+            <KeyOutlined />,
+            "Credentials",
+            () => setSidebarView("credentials"),
+            sidebarView === "credentials",
+          )}
+          <Tooltip title={sidebarCollapsed ? "Back to Developer Console UI" : undefined} placement="right">
+            <a
+              href={dashboardUrl}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 10,
+                padding: "8px 10px",
+                width: "100%",
+                borderRadius: 7,
+                color: "#6b7280",
+                textDecoration: "none",
+                fontSize: 14,
+                justifyContent: sidebarCollapsed ? "center" : "flex-start",
+                boxSizing: "border-box",
+              }}
+              onMouseEnter={(e) => {
+                (e.currentTarget as HTMLAnchorElement).style.background = "#f5f5f5";
+              }}
+              onMouseLeave={(e) => {
+                (e.currentTarget as HTMLAnchorElement).style.background = "transparent";
+              }}
+            >
+              <ArrowLeftOutlined style={{ fontSize: 16, flexShrink: 0 }} />
+              {!sidebarCollapsed && <span>Back to Developer Console UI</span>}
+            </a>
+          </Tooltip>
+        </div>
+
+        <div style={{ height: 1, background: "#e5e7eb", margin: "4px 8px", flexShrink: 0 }} />
+
+        {/* Sidebar content — only conversation list, only when in chats view and expanded */}
+        {!sidebarCollapsed && sidebarView === "chats" && (
+          <div style={{ flex: 1, overflow: "hidden", display: "flex", flexDirection: "column" }}>
+            <ConversationList
+              conversations={conversations}
+              activeConversationId={activeConversationId}
+              onSelect={(id) => router.push(getChatUrl(uiRoot, id))}
+              onDelete={deleteConversation}
+              onNewChat={() => router.push(getChatUrl(uiRoot))}
+              onRename={renameConversation}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* ===== MAIN AREA ===== */}
+      <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", minWidth: 0 }}>
+        {/* Top bar */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "8px 16px",
+            flexShrink: 0,
+            borderBottom: "1px solid #f0f0f0",
+            background: "#fff",
+            height: 48,
+          }}
+        >
+          {/* Left: model selector */}
+          <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0, flex: 1 }}>
+            {modelSelectorTrigger}
+          </div>
+
+          {/* Right: settings */}
+          <div style={{ display: "flex", alignItems: "center", gap: 4, flexShrink: 0 }}>
+            <Tooltip title="Settings">
+              <button
+                style={{
+                  background: "none",
+                  border: "none",
+                  cursor: "pointer",
+                  padding: 7,
+                  borderRadius: 7,
+                  color: "#6b7280",
+                  fontSize: 16,
+                  display: "flex",
+                  alignItems: "center",
+                }}
+              >
+                <SettingOutlined />
+              </button>
+            </Tooltip>
+          </div>
+        </div>
+
+        {/* Storage warning banner */}
+        {storageUnavailable && !storageBannerDismissed && (
+          <div
+            style={{
+              background: "#fffbe6",
+              borderBottom: "1px solid #ffe58f",
+              padding: "6px 20px",
+              fontSize: 13,
+              color: "#874d00",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <span>Chat history won&apos;t be saved in this browser session.</span>
+            <button
+              onClick={() => setStorageBannerDismissed(true)}
+              style={{ background: "none", border: "none", cursor: "pointer", fontSize: 16, color: "#874d00" }}
+            >
+              ×
+            </button>
+          </div>
+        )}
+
+        {/* Content area */}
+        <div
+          style={{
+            flex: 1,
+            minHeight: 0,
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column",
+            background: "#fff",
+          }}
+        >
+          {/* ---- Apps page view ---- */}
+          {sidebarView === "apps" ? (
+            <div
+              style={{
+                flex: 1,
+                minHeight: 0,
+                overflow: "auto",
+                maxWidth: 800,
+                margin: "0 auto",
+                width: "100%",
+                padding: "32px 24px",
+              }}
+            >
+              <MCPAppsPanel
+                accessToken={accessToken}
+                selectedServers={selectedMCPServers}
+                onChange={setSelectedMCPServers}
+              />
+            </div>
+          ) : sidebarView === "credentials" ? (
+            /* ---- Credentials view ---- */
+            <div
+              style={{
+                flex: 1,
+                minHeight: 0,
+                overflow: "auto",
+                maxWidth: 800,
+                margin: "0 auto",
+                width: "100%",
+                padding: "32px 24px",
+              }}
+            >
+              <MCPCredentialsTab accessToken={accessToken} />
+            </div>
+          ) : showBlankState ? (
+            /* ---- Blank state ---- */
+            <div
+              style={{
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "0 24px 80px",
+              }}
+            >
+              {/* Greeting */}
+              <h1
+                style={{
+                  margin: "0 0 32px",
+                  fontSize: 28,
+                  fontWeight: 600,
+                  color: "#111827",
+                  fontFamily: "inherit",
+                  letterSpacing: "-0.01em",
+                  textAlign: "center",
+                }}
+              >
+                {isComparisonMode ? `Compare ${selectedModels.length} models` : greeting}
+              </h1>
+
+              {isComparisonMode ? (
+                <p style={{ margin: "-16px 0 24px", fontSize: 14, color: "#6b7280", textAlign: "center" }}>
+                  Send a message to see responses side-by-side
+                </p>
+              ) : (
+                <p
+                  style={{
+                    margin: "-16px 0 28px",
+                    fontSize: 14,
+                    color: "#6b7280",
+                    textAlign: "center",
+                    maxWidth: 520,
+                    lineHeight: 1.6,
+                  }}
+                >
+                  Chat with 100+ LLMs + MCP tools — authenticate once, use them here.{" "}
+                  <button
+                    onClick={() => setSidebarView("apps")}
+                    style={{
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      color: "#1677ff",
+                      fontSize: 14,
+                      padding: 0,
+                      fontWeight: 500,
+                    }}
+                  >
+                    Open Apps →
+                  </button>
+                </p>
+              )}
+
+              {/* Input card */}
+              <div style={{ width: "100%", maxWidth: 680 }}>{inputBar(false)}</div>
+
+              {/* Suggestion chips — only in single-model mode */}
+              {!isComparisonMode && (
+                <div style={{ display: "flex", gap: 8, marginTop: 14, flexWrap: "wrap", justifyContent: "center" }}>
+                  {SUGGESTIONS.map((s) => (
+                    <button
+                      key={s}
+                      onClick={() => setInputText(s + ": ")}
+                      style={{
+                        background: "#f9fafb",
+                        border: "1px solid #e5e7eb",
+                        borderRadius: 20,
+                        padding: "7px 16px",
+                        fontSize: 14,
+                        color: "#374151",
+                        cursor: "pointer",
+                      }}
+                      onMouseEnter={(e) => {
+                        (e.currentTarget as HTMLButtonElement).style.background = "#f3f4f6";
+                      }}
+                      onMouseLeave={(e) => {
+                        (e.currentTarget as HTMLButtonElement).style.background = "#f9fafb";
+                      }}
+                    >
+                      {s}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          ) : (
+            /* ---- Active conversation (single-model or comparison) ---- */
+            <div
+              style={{
+                flex: 1,
+                minHeight: 0,
+                display: "flex",
+                flexDirection: "column",
+                maxWidth: isComparisonMode ? (selectedModels.length >= 3 ? 1200 : 960) : 760,
+                margin: "0 auto",
+                width: "100%",
+                padding: "0 24px",
+                position: "relative",
+              }}
+            >
+              <div
+                ref={messagesScrollRef}
+                style={{ flex: 1, minHeight: 0, overflow: "auto", paddingTop: 24, overflowAnchor: "none" }}
+              >
+                {isComparisonMode ? (
+                  /* Comparison: multi-turn exchanges, each with user bubble + side-by-side response cards */
+                  <div style={{ paddingBottom: 8 }}>
+                    {comparisonExchanges.map((exchange, exchangeIdx) => {
+                      const isLastExchange = exchangeIdx === comparisonExchanges.length - 1;
+                      return (
+                        <div key={exchangeIdx} style={{ marginBottom: 32 }}>
+                          {/* User message bubble */}
+                          <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 20 }}>
+                            <div
+                              style={{
+                                background: "#f3f4f6",
+                                borderRadius: 16,
+                                padding: "10px 16px",
+                                maxWidth: "75%",
+                                fontSize: 14,
+                                color: "#111827",
+                                lineHeight: 1.5,
+                              }}
+                            >
+                              {exchange.userMessage}
+                            </div>
+                          </div>
+
+                          {/* Response cards side-by-side */}
+                          <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
+                            {selectedModels.map((model, idx) => {
+                              const provider = getProviderFromModelName(model);
+                              const { logo } = provider ? getProviderLogoAndName(provider) : { logo: "" };
+                              const responseText = exchange.responses[model] ?? "";
+                              const isModelStreaming = isLastExchange && comparisonStreamingSet.has(model);
+                              return (
+                                <div
+                                  key={model}
+                                  style={{
+                                    flex: 1,
+                                    border: "1px solid #e5e7eb",
+                                    borderRadius: 12,
+                                    overflow: "hidden",
+                                    minWidth: 0,
+                                  }}
+                                >
+                                  {/* Card header — only show on first exchange */}
+                                  {exchangeIdx === 0 && (
+                                    <div
+                                      style={{
+                                        padding: "10px 14px",
+                                        borderBottom: "1px solid #f0f0f0",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: 8,
+                                        background: "#fafafa",
+                                      }}
+                                    >
+                                      {logo ? (
+                                        <img
+                                          src={logo}
+                                          alt=""
+                                          style={{ width: 18, height: 18, objectFit: "contain", flexShrink: 0 }}
+                                          onError={(e) => {
+                                            (e.currentTarget as HTMLImageElement).style.display = "none";
+                                          }}
+                                        />
+                                      ) : (
+                                        <div
+                                          style={{
+                                            width: 18,
+                                            height: 18,
+                                            borderRadius: "50%",
+                                            background: "#e5e7eb",
+                                            flexShrink: 0,
+                                          }}
+                                        />
+                                      )}
+                                      <span style={{ fontWeight: 600, fontSize: 12, color: "#374151" }}>
+                                        Response {idx + 1}
+                                      </span>
+                                      <span
+                                        style={{
+                                          fontSize: 11,
+                                          color: "#9ca3af",
+                                          overflow: "hidden",
+                                          textOverflow: "ellipsis",
+                                          whiteSpace: "nowrap",
+                                          flex: 1,
+                                          minWidth: 0,
+                                        }}
+                                      >
+                                        {model}
+                                      </span>
+                                    </div>
+                                  )}
+                                  {/* Card body */}
+                                  <div style={{ padding: "14px 16px", minHeight: 60, position: "relative" }}>
+                                    {isModelStreaming && (
+                                      <span
+                                        style={{
+                                          position: "absolute",
+                                          top: 10,
+                                          right: 12,
+                                          fontSize: 9,
+                                          color: "#1677ff",
+                                        }}
+                                      >
+                                        ●
+                                      </span>
+                                    )}
+                                    {responseText ? (
+                                      <ReactMarkdown
+                                        remarkPlugins={[remarkGfm]}
+                                        components={{
+                                          p: ({ children }) => (
+                                            <p
+                                              style={{
+                                                margin: "0 0 10px",
+                                                lineHeight: 1.6,
+                                                fontSize: 14,
+                                                color: "#111827",
+                                              }}
+                                            >
+                                              {children}
+                                            </p>
+                                          ),
+                                          code: ({ className, children }) => {
+                                            const isBlock = /language-(\w+)/.exec(className || "");
+                                            if (isBlock) {
+                                              return (
+                                                <pre
+                                                  style={{
+                                                    background: "#f8f9fa",
+                                                    padding: "10px 12px",
+                                                    borderRadius: 6,
+                                                    overflow: "auto",
+                                                    fontSize: 13,
+                                                    margin: "8px 0",
+                                                  }}
+                                                >
+                                                  <code>{children}</code>
+                                                </pre>
+                                              );
+                                            }
+                                            return (
+                                              <code
+                                                style={{
+                                                  background: "#f3f4f6",
+                                                  padding: "2px 5px",
+                                                  borderRadius: 3,
+                                                  fontSize: 13,
+                                                }}
+                                              >
+                                                {children}
+                                              </code>
+                                            );
+                                          },
+                                        }}
+                                      >
+                                        {responseText}
+                                      </ReactMarkdown>
+                                    ) : isModelStreaming ? (
+                                      <span style={{ color: "#9ca3af", fontSize: 14 }}>Generating…</span>
+                                    ) : (
+                                      <span style={{ color: "#9ca3af", fontSize: 14 }}>—</span>
+                                    )}
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                ) : (
+                  <ChatMessages
+                    messages={activeConversation!.messages}
+                    isStreaming={isStreaming}
+                    onEditMessage={handleEditAndResend}
+                  />
+                )}
+              </div>
+              {showScrollButton && (
+                <button
+                  onClick={() => {
+                    const el = messagesScrollRef.current;
+                    if (el) {
+                      el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+                      if (streamScrollLock.current !== null) {
+                        streamScrollLock.current = el.scrollHeight;
+                      }
+                    }
+                  }}
+                  style={{
+                    position: "absolute",
+                    bottom: 100,
+                    left: "50%",
+                    transform: "translateX(-50%)",
+                    width: 34,
+                    height: 34,
+                    borderRadius: "50%",
+                    background: "rgba(255,255,255,0.75)",
+                    backdropFilter: "blur(6px)",
+                    WebkitBackdropFilter: "blur(6px)",
+                    border: "1px solid rgba(0,0,0,0.1)",
+                    boxShadow: "0 1px 4px rgba(0,0,0,0.08)",
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    color: "#6b7280",
+                    zIndex: 10,
+                    transition: "background 0.15s",
+                  }}
+                  onMouseEnter={(e) => {
+                    (e.currentTarget as HTMLButtonElement).style.background = "rgba(255,255,255,0.95)";
+                  }}
+                  onMouseLeave={(e) => {
+                    (e.currentTarget as HTMLButtonElement).style.background = "rgba(255,255,255,0.75)";
+                  }}
+                  aria-label="Scroll to bottom"
+                >
+                  <DownOutlined style={{ fontSize: 12 }} />
+                </button>
+              )}
+
+              {/* Input bar (in conversation) */}
+              <div style={{ padding: "12px 0 24px" }}>{inputBar(true)}</div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatPage;
diff --git a/ui/litellm-dashboard/src/components/chat/ConversationList.tsx b/ui/litellm-dashboard/src/components/chat/ConversationList.tsx
new file mode 100644
index 000000000000..f75ee8fa40ad
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/chat/ConversationList.tsx
@@ -0,0 +1,450 @@
+"use client";
+
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { Button, Input, Modal, Popconfirm, Tooltip, Avatar, Typography } from "antd";
+import {
+  EditOutlined,
+  DeleteOutlined,
+  PlusOutlined,
+  SearchOutlined,
+  UserOutlined,
+  MessageOutlined,
+} from "@ant-design/icons";
+import dayjs from "dayjs";
+import { Conversation } from "./types";
+
+const { Text } = Typography;
+
+interface Props {
+  conversations: Conversation[];
+  activeConversationId: string | null;
+  onSelect: (id: string) => void;
+  onDelete: (id: string) => void;
+  onNewChat: () => void;
+  onRename: (id: string, newTitle: string) => void;
+}
+
+// ---- Date grouping helpers ----
+
+type DateGroup = "Today" | "Yesterday" | "Last 7 Days" | "Older";
+
+const getDateGroup = (timestamp: number): DateGroup => {
+  const now = dayjs();
+  const date = dayjs(timestamp);
+
+  if (date.isSame(now, "day")) return "Today";
+  if (date.isSame(now.subtract(1, "day"), "day")) return "Yesterday";
+  if (date.isAfter(now.subtract(7, "day"))) return "Last 7 Days";
+  return "Older";
+};
+
+const DATE_GROUP_ORDER: DateGroup[] = ["Today", "Yesterday", "Last 7 Days", "Older"];
+
+interface GroupedConversations {
+  group: DateGroup;
+  items: Conversation[];
+}
+
+const groupConversations = (conversations: Conversation[]): GroupedConversations[] => {
+  const map = new Map<DateGroup, Conversation[]>();
+
+  for (const conv of conversations) {
+    const group = getDateGroup(conv.updatedAt);
+    if (!map.has(group)) map.set(group, []);
+    map.get(group)!.push(conv);
+  }
+
+  return DATE_GROUP_ORDER.filter((g) => map.has(g)).map((g) => ({
+    group: g,
+    items: map.get(g)!,
+  }));
+};
+
+// ---- Single conversation row ----
+
+interface ConversationRowProps {
+  conv: Conversation;
+  isActive: boolean;
+  onSelect: (id: string) => void;
+  onDelete: (id: string) => void;
+  onRename: (id: string, newTitle: string) => void;
+}
+
+const ConversationRow: React.FC<ConversationRowProps> = ({ conv, isActive, onSelect, onDelete, onRename }) => {
+  const [editing, setEditing] = useState(false);
+  const [editValue, setEditValue] = useState(conv.title);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editing]);
+
+  const startEditing = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setEditValue(conv.title);
+    setEditing(true);
+  };
+
+  const commitRename = () => {
+    const trimmed = editValue.trim();
+    if (trimmed && trimmed !== conv.title) {
+      onRename(conv.id, trimmed);
+    }
+    setEditing(false);
+  };
+
+  const cancelEditing = () => {
+    setEditValue(conv.title);
+    setEditing(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commitRename();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      cancelEditing();
+    }
+  };
+
+  const truncatedTitle = conv.title.length > 40 ? conv.title.slice(0, 40) + "…" : conv.title;
+
+  return (
+    <div
+      onClick={() => !editing && onSelect(conv.id)}
+      className="conversation-row group"
+      style={{
+        display: "flex",
+        alignItems: "center",
+        padding: "6px 8px",
+        borderRadius: 6,
+        cursor: editing ? "default" : "pointer",
+        backgroundColor: isActive ? "#e6f4ff" : "transparent",
+        transition: "background-color 0.15s",
+        minHeight: 34,
+        position: "relative",
+      }}
+      onMouseEnter={(e) => {
+        if (!isActive) {
+          (e.currentTarget as HTMLDivElement).style.backgroundColor = "#f5f5f5";
+        }
+      }}
+      onMouseLeave={(e) => {
+        if (!isActive) {
+          (e.currentTarget as HTMLDivElement).style.backgroundColor = "transparent";
+        }
+      }}
+    >
+      {editing ? (
+        <Input
+          ref={(node) => {
+            inputRef.current = node?.input ?? null;
+          }}
+          size="small"
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={commitRename}
+          onClick={(e) => e.stopPropagation()}
+          style={{ flex: 1, fontSize: 13 }}
+        />
+      ) : (
+        <>
+          <Text
+            style={{
+              flex: 1,
+              fontSize: 13,
+              color: isActive ? "#1677ff" : "#333",
+              overflow: "hidden",
+              whiteSpace: "nowrap",
+              textOverflow: "ellipsis",
+              fontWeight: isActive ? 500 : 400,
+            }}
+            title={conv.title}
+          >
+            {truncatedTitle}
+          </Text>
+
+          {/* Action icons — visible only on hover via CSS opacity */}
+          <div
+            className="conversation-actions"
+            style={{
+              display: "flex",
+              gap: 2,
+              opacity: 0,
+              transition: "opacity 0.15s",
+              flexShrink: 0,
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Tooltip title="Rename">
+              <Button
+                type="text"
+                size="small"
+                icon={<EditOutlined style={{ fontSize: 12 }} />}
+                onClick={startEditing}
+                style={{ width: 22, height: 22, padding: 0, minWidth: 22 }}
+              />
+            </Tooltip>
+            <Popconfirm
+              title="Delete this conversation?"
+              onConfirm={() => onDelete(conv.id)}
+              okText="Delete"
+              cancelText="Cancel"
+              okButtonProps={{ danger: true }}
+            >
+              <Tooltip title="Delete">
+                <Button
+                  type="text"
+                  size="small"
+                  danger
+                  icon={<DeleteOutlined style={{ fontSize: 12 }} />}
+                  style={{ width: 22, height: 22, padding: 0, minWidth: 22 }}
+                />
+              </Tooltip>
+            </Popconfirm>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+// ---- Cmd+K search modal ----
+
+interface SearchModalProps {
+  open: boolean;
+  conversations: Conversation[];
+  onSelect: (id: string) => void;
+  onClose: () => void;
+}
+
+const SearchModal: React.FC<SearchModalProps> = ({ open, conversations, onSelect, onClose }) => {
+  const [query, setQuery] = useState("");
+
+  useEffect(() => {
+    if (!open) setQuery("");
+  }, [open]);
+
+  const filtered = query.trim()
+    ? conversations.filter((c) => c.title.toLowerCase().includes(query.trim().toLowerCase()))
+    : conversations;
+
+  const handleSelect = (id: string) => {
+    onSelect(id);
+    onClose();
+  };
+
+  return (
+    <Modal
+      open={open}
+      onCancel={onClose}
+      footer={null}
+      title={null}
+      width={480}
+      styles={{ body: { padding: "16px 16px 8px" } }}
+    >
+      <Input
+        autoFocus
+        prefix={<SearchOutlined style={{ color: "#bbb" }} />}
+        placeholder="Search conversations…"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        style={{ marginBottom: 12 }}
+        allowClear
+      />
+
+      <div style={{ maxHeight: 320, overflowY: "auto" }}>
+        {filtered.length === 0 ? (
+          <div style={{ textAlign: "center", padding: "24px 0", color: "#999" }}>No conversations found</div>
+        ) : (
+          filtered.map((conv) => {
+            const truncated = conv.title.length > 55 ? conv.title.slice(0, 55) + "…" : conv.title;
+            return (
+              <div
+                key={conv.id}
+                onClick={() => handleSelect(conv.id)}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  padding: "8px 10px",
+                  borderRadius: 6,
+                  cursor: "pointer",
+                  transition: "background-color 0.1s",
+                }}
+                onMouseEnter={(e) => {
+                  (e.currentTarget as HTMLDivElement).style.backgroundColor = "#f0f5ff";
+                }}
+                onMouseLeave={(e) => {
+                  (e.currentTarget as HTMLDivElement).style.backgroundColor = "transparent";
+                }}
+              >
+                <MessageOutlined style={{ color: "#999", flexShrink: 0 }} />
+                <Text style={{ fontSize: 13 }}>{truncated}</Text>
+                <Text type="secondary" style={{ fontSize: 11, marginLeft: "auto", flexShrink: 0 }}>
+                  {dayjs(conv.updatedAt).format("MMM D")}
+                </Text>
+              </div>
+            );
+          })
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+// ---- Main ConversationList component ----
+
+const ConversationList: React.FC<Props> = ({
+  conversations,
+  activeConversationId,
+  onSelect,
+  onDelete,
+  onNewChat,
+  onRename,
+}) => {
+  const [searchModalOpen, setSearchModalOpen] = useState(false);
+
+  // Cmd+K / Ctrl+K listener
+  const handleGlobalKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      setSearchModalOpen((prev) => !prev);
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleGlobalKeyDown);
+    return () => document.removeEventListener("keydown", handleGlobalKeyDown);
+  }, [handleGlobalKeyDown]);
+
+  const grouped = groupConversations(conversations);
+
+  return (
+    <>
+      {/* Hover-reveal CSS for action icons */}
+      <style>{`
+        .conversation-row:hover .conversation-actions {
+          opacity: 1 !important;
+        }
+      `}</style>
+
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          width: "100%",
+          overflow: "hidden",
+        }}
+      >
+        {/* Top: New Chat button */}
+        <div style={{ padding: "12px 10px 8px" }}>
+          <Tooltip
+            title="Chats are saved locally in this browser. All requests are logged in Spend → Logs."
+            placement="right"
+          >
+            <Button type="primary" icon={<PlusOutlined />} onClick={onNewChat} style={{ width: "100%" }}>
+              New Chat
+            </Button>
+          </Tooltip>
+        </div>
+
+        {/* Conversation list (scrollable) */}
+        <div
+          style={{
+            flex: 1,
+            overflowY: "auto",
+            padding: "0 6px",
+          }}
+        >
+          {grouped.length === 0 ? (
+            <div
+              style={{
+                textAlign: "center",
+                color: "#bbb",
+                fontSize: 12,
+                marginTop: 32,
+                padding: "0 12px",
+              }}
+            >
+              No conversations yet.
+              <br />
+              Start a new chat above.
+            </div>
+          ) : (
+            grouped.map(({ group, items }) => (
+              <div key={group} style={{ marginBottom: 8 }}>
+                <div
+                  style={{
+                    fontSize: 11,
+                    fontWeight: 600,
+                    color: "#999",
+                    textTransform: "uppercase",
+                    letterSpacing: "0.04em",
+                    padding: "8px 8px 4px",
+                  }}
+                >
+                  {group}
+                </div>
+                {items.map((conv) => (
+                  <ConversationRow
+                    key={conv.id}
+                    conv={conv}
+                    isActive={conv.id === activeConversationId}
+                    onSelect={onSelect}
+                    onDelete={onDelete}
+                    onRename={onRename}
+                  />
+                ))}
+              </div>
+            ))
+          )}
+        </div>
+
+        {/* Bottom: user avatar placeholder */}
+        <div
+          style={{
+            padding: "10px 12px",
+            borderTop: "1px solid #f0f0f0",
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+          }}
+        >
+          <Avatar
+            size={28}
+            icon={<UserOutlined />}
+            style={{ backgroundColor: "#e0e7ff", color: "#4f46e5", flexShrink: 0 }}
+          />
+          <Text
+            style={{
+              fontSize: 13,
+              color: "#555",
+              overflow: "hidden",
+              whiteSpace: "nowrap",
+              textOverflow: "ellipsis",
+            }}
+          >
+            My Account
+          </Text>
+        </div>
+      </div>
+
+      {/* Cmd+K search modal */}
+      <SearchModal
+        open={searchModalOpen}
+        conversations={conversations}
+        onSelect={onSelect}
+        onClose={() => setSearchModalOpen(false)}
+      />
+    </>
+  );
+};
+
+export default ConversationList;
diff --git a/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx b/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx
new file mode 100644
index 000000000000..880d408eb33e
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx
@@ -0,0 +1,726 @@
+"use client";
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Spin, Input, Button, Skeleton } from "antd";
+import { SearchOutlined, ArrowLeftOutlined, RightOutlined, ToolOutlined, CheckCircleOutlined } from "@ant-design/icons";
+import {
+  deleteMCPOAuthUserCredential,
+  fetchMCPServers,
+  getMCPOAuthUserCredentialStatus,
+  listMCPTools,
+} from "../networking";
+import { AUTH_TYPE, MCPServer, MCPTool, handleTransport } from "../mcp_tools/types";
+import MessageManager from "@/components/molecules/message_manager";
+import { useUserMcpOAuthFlow } from "@/hooks/useUserMcpOAuthFlow";
+
+// ── OAuth2 connect button ─────────────────────────────────────────────────────
+// Wraps useUserMcpOAuthFlow so each server card can hold its own hook instance.
+interface OAuth2ConnectButtonProps {
+  server: MCPServer;
+  accessToken: string;
+  onConnect: (serverId: string) => void;
+  /** "badge" = small inline chip (grid card), "button" = full Ant Button (detail view) */
+  variant?: "badge" | "button";
+}
+
+const OAuth2ConnectButton: React.FC<OAuth2ConnectButtonProps> = ({
+  server,
+  accessToken,
+  onConnect,
+  variant = "badge",
+}) => {
+  const name = server.server_name ?? server.alias ?? server.server_id;
+  const { startOAuthFlow, status } = useUserMcpOAuthFlow({
+    accessToken,
+    serverId: server.server_id,
+    serverAlias: name,
+    onSuccess: useCallback(() => onConnect(server.server_id), [onConnect, server.server_id]),
+  });
+
+  const loading = status === "authorizing" || status === "exchanging";
+
+  if (variant === "button") {
+    return (
+      <Button
+        type="primary"
+        loading={loading}
+        onClick={startOAuthFlow}
+        style={{ borderRadius: 8, fontWeight: 600, height: 38, minWidth: 110 }}
+      >
+        {loading ? "Connecting…" : "Connect"}
+      </Button>
+    );
+  }
+
+  return (
+    <span
+      onClick={(e) => {
+        e.stopPropagation();
+        if (!loading) startOAuthFlow();
+      }}
+      style={{
+        fontSize: 11,
+        fontWeight: 600,
+        color: loading ? "#9ca3af" : "#fff",
+        background: loading ? "#e5e7eb" : "#1677ff",
+        borderRadius: 6,
+        padding: "2px 8px",
+        cursor: loading ? "default" : "pointer",
+        flexShrink: 0,
+        whiteSpace: "nowrap",
+      }}
+    >
+      {loading ? "Connecting…" : "Connect"}
+    </span>
+  );
+};
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface Props {
+  accessToken: string;
+  selectedServers: string[];
+  onChange: (servers: string[]) => void;
+}
+
+const AVATAR_COLORS = [
+  "#1677ff",
+  "#52c41a",
+  "#fa8c16",
+  "#eb2f96",
+  "#722ed1",
+  "#13c2c2",
+  "#fa541c",
+  "#2f54eb",
+  "#a0d911",
+  "#faad14",
+];
+
+function getAvatarColor(name: string): string {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+}
+
+type TabKey = "all" | "connected";
+
+const MCPAppsPanel: React.FC<Props> = ({ accessToken, selectedServers, onChange }) => {
+  const [servers, setServers] = useState<MCPServer[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [query, setQuery] = useState("");
+  const [activeTab, setActiveTab] = useState<TabKey>("all");
+  const [togglingOn, setTogglingOn] = useState<Set<string>>(new Set());
+  const [detailServer, setDetailServer] = useState<MCPServer | null>(null);
+  const [detailTools, setDetailTools] = useState<MCPTool[]>([]);
+  const [loadingTools, setLoadingTools] = useState(false);
+  // tool counts per server name, preloaded in background
+  const [toolCounts, setToolCounts] = useState<Record<string, number>>({});
+  const [loadingCounts, setLoadingCounts] = useState(false);
+  // OAuth2 connect state — tracks which server_ids have a stored user credential
+  const [oauthConnected, setOauthConnected] = useState<Set<string>>(new Set());
+
+  // Refs keep the latest values for the auto-enable effect so it always reads
+  // the current servers/selectedServers/onChange without needing them as
+  // dependencies (which would cause the effect to fire on every render).
+  const serversRef = useRef<MCPServer[]>([]);
+  useEffect(() => {
+    serversRef.current = servers;
+  }, [servers]);
+  const selectedServersRef = useRef<string[]>(selectedServers);
+  useEffect(() => {
+    selectedServersRef.current = selectedServers;
+  }, [selectedServers]);
+  const onChangeRef = useRef(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
+  const nameOf = (s: MCPServer) => s.server_name ?? s.alias ?? s.server_id;
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+
+    // 1. Load servers first — show the list immediately
+    fetchMCPServers(accessToken)
+      .then((serverData) => {
+        if (cancelled) return;
+        const list: MCPServer[] = Array.isArray(serverData) ? serverData : serverData?.data ?? [];
+        setServers(list);
+        setLoading(false);
+
+        // 2. Fetch tools per server in parallel — each resolves independently and updates counts one by one
+        setLoadingCounts(true);
+        let remaining = list.length;
+        if (remaining === 0) {
+          setLoadingCounts(false);
+          return;
+        }
+        list.forEach((s) => {
+          listMCPTools(accessToken, s.server_id)
+            .then((toolsData) => {
+              if (cancelled) return;
+              const tools: MCPTool[] = Array.isArray(toolsData?.tools) ? toolsData.tools : [];
+              const sname = nameOf(s);
+              setToolCounts((prev) => ({ ...prev, [sname]: tools.length }));
+            })
+            .catch(() => {})
+            .finally(() => {
+              if (cancelled) return;
+              remaining -= 1;
+              if (remaining === 0) setLoadingCounts(false);
+            });
+        });
+
+        // 3. Check OAuth credential status for OAuth2 servers in parallel
+        const oauthServers = list.filter((s) => s.auth_type === AUTH_TYPE.OAUTH2);
+        oauthServers.forEach((s) => {
+          getMCPOAuthUserCredentialStatus(accessToken, s.server_id)
+            .then((status) => {
+              if (cancelled) return;
+              if (status.has_credential && !status.is_expired) {
+                setOauthConnected((prev) => new Set(prev).add(s.server_id));
+              }
+            })
+            .catch(() => {});
+        });
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setServers([]);
+          setLoading(false);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [accessToken]);
+
+  // Auto-enable oauth2 servers for the current chat session when a valid
+  // credential is detected (either on mount or after a fresh OAuth sign-in).
+  // Uses refs for servers/selectedServers/onChange to avoid stale closures
+  // without adding them as dependencies (which would re-fire on every render).
+  useEffect(() => {
+    if (oauthConnected.size === 0) return;
+    const namesToAdd = serversRef.current
+      .filter((s) => oauthConnected.has(s.server_id) && !selectedServersRef.current.includes(nameOf(s)))
+      .map(nameOf);
+    if (namesToAdd.length > 0) {
+      onChangeRef.current([...selectedServersRef.current, ...namesToAdd]);
+    }
+  }, [oauthConnected]);
+
+  const handleToggle = async (serverName: string, checked: boolean, serverId?: string) => {
+    if (!checked) {
+      onChange(selectedServers.filter((s) => s !== serverName));
+      // Also clear from oauthConnected so the auto-enable effect doesn't re-add it.
+      if (serverId) {
+        setOauthConnected((prev) => {
+          const next = new Set(prev);
+          next.delete(serverId);
+          return next;
+        });
+      }
+      return;
+    }
+    setTogglingOn((prev) => new Set(prev).add(serverName));
+    try {
+      // Use UUID if available, fall back to name (for connectivity check only)
+      const idToFetch = serverId ?? serverName;
+      const result = await listMCPTools(accessToken, idToFetch);
+      if (result?.error) {
+        MessageManager.warning(`Could not load tools for ${serverName}`);
+        return;
+      }
+      // Use the ref so we read the most up-to-date list; guard against duplicates
+      // that the oauthConnected effect may have already added while we awaited.
+      if (!selectedServersRef.current.includes(serverName)) {
+        onChange([...selectedServersRef.current, serverName]);
+      }
+    } catch {
+      MessageManager.warning(`Could not load tools for ${serverName}`);
+    } finally {
+      setTogglingOn((prev) => {
+        const next = new Set(prev);
+        next.delete(serverName);
+        return next;
+      });
+    }
+  };
+
+  // Fetch tools for the detail view — server_id must be the UUID
+  useEffect(() => {
+    if (!detailServer) {
+      setDetailTools([]);
+      return;
+    }
+    let cancelled = false;
+    setLoadingTools(true);
+    listMCPTools(accessToken, detailServer.server_id)
+      .then((result) => {
+        if (cancelled) return;
+        // API returns { tools: [...], error: null }
+        const tools: MCPTool[] = Array.isArray(result?.tools) ? result.tools : [];
+        setDetailTools(tools);
+      })
+      .catch(() => {
+        if (!cancelled) setDetailTools([]);
+      })
+      .finally(() => {
+        if (!cancelled) setLoadingTools(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [detailServer, accessToken]);
+
+  const filtered = servers.filter((s) => {
+    const name = nameOf(s);
+    const matchesQuery =
+      !query.trim() ||
+      name.toLowerCase().includes(query.toLowerCase()) ||
+      (s.description ?? "").toLowerCase().includes(query.toLowerCase());
+    const matchesTab = activeTab === "all" || selectedServers.includes(name);
+    return matchesQuery && matchesTab;
+  });
+
+  const connectedCount = servers.filter((s) => selectedServers.includes(nameOf(s))).length;
+
+  // Total tools available across all servers (based on preloaded counts)
+  const totalTools = Object.values(toolCounts).reduce((sum, n) => sum + n, 0);
+
+  // ── Detail view ──
+  if (detailServer) {
+    const name = nameOf(detailServer);
+    const isConnected = selectedServers.includes(name);
+    const isTogglingOn = togglingOn.has(name);
+    const color = getAvatarColor(name);
+
+    return (
+      <div style={{ width: "100%" }}>
+        {/* Back */}
+        <button
+          onClick={() => setDetailServer(null)}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            color: "#6b7280",
+            fontSize: 13,
+            padding: "0 0 20px 0",
+          }}
+        >
+          <ArrowLeftOutlined style={{ fontSize: 12 }} />
+          Back
+        </button>
+
+        {/* Avatar + name + connect */}
+        <div style={{ display: "flex", alignItems: "flex-start", gap: 20, marginBottom: 28 }}>
+          {detailServer.mcp_info?.logo_url ? (
+            <img
+              src={detailServer.mcp_info.logo_url}
+              alt={`${name} logo`}
+              style={{
+                width: 64,
+                height: 64,
+                borderRadius: 16,
+                objectFit: "contain",
+                flexShrink: 0,
+                background: "#f9fafb",
+              }}
+              onError={(e) => {
+                const el = e.target as HTMLImageElement;
+                el.style.display = "none";
+                if (el.nextElementSibling) (el.nextElementSibling as HTMLElement).style.display = "flex";
+              }}
+            />
+          ) : null}
+          <div
+            style={{
+              width: 64,
+              height: 64,
+              borderRadius: 16,
+              background: color,
+              display: detailServer.mcp_info?.logo_url ? "none" : "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "#fff",
+              fontWeight: 700,
+              fontSize: 28,
+              flexShrink: 0,
+            }}
+          >
+            {name.charAt(0).toUpperCase()}
+          </div>
+          <div style={{ flex: 1 }}>
+            <h2 style={{ margin: "0 0 4px", fontSize: 22, fontWeight: 700, color: "#111827" }}>{name}</h2>
+            <p style={{ margin: 0, fontSize: 14, color: "#6b7280" }}>{detailServer.description ?? "MCP server"}</p>
+          </div>
+          {detailServer.auth_type === AUTH_TYPE.OAUTH2 ? (
+            oauthConnected.has(detailServer.server_id) ? (
+              <Button
+                type="default"
+                danger
+                onClick={async () => {
+                  try {
+                    await deleteMCPOAuthUserCredential(accessToken, detailServer.server_id);
+                  } catch (_) {
+                    // Ignore — credential may already be gone; update UI regardless.
+                  }
+                  setOauthConnected((prev) => {
+                    const n = new Set(prev);
+                    n.delete(detailServer.server_id);
+                    return n;
+                  });
+                  onChangeRef.current(selectedServersRef.current.filter((s) => s !== name));
+                }}
+                style={{ borderRadius: 8, fontWeight: 600, height: 38, minWidth: 110 }}
+              >
+                Disconnect
+              </Button>
+            ) : (
+              <OAuth2ConnectButton
+                server={detailServer}
+                accessToken={accessToken}
+                onConnect={(id) => {
+                  setOauthConnected((prev) => new Set(prev).add(id));
+                }}
+                variant="button"
+              />
+            )
+          ) : (
+            <Button
+              type={isConnected ? "default" : "primary"}
+              loading={isTogglingOn}
+              onClick={() => handleToggle(name, !isConnected, detailServer.server_id)}
+              style={{ borderRadius: 8, fontWeight: 600, height: 38, minWidth: 110 }}
+            >
+              {isConnected ? "Disconnect" : "Connect"}
+            </Button>
+          )}
+        </div>
+
+        {/* Info table */}
+        <h3 style={{ margin: "0 0 12px", fontSize: 15, fontWeight: 600, color: "#111827" }}>Information</h3>
+        <div style={{ border: "1px solid #e5e7eb", borderRadius: 10, overflow: "hidden", marginBottom: 28 }}>
+          {[
+            ["Server ID", detailServer.server_id],
+            ["Transport", handleTransport(detailServer.transport, detailServer.spec_path)],
+            ["Status", isConnected ? "Connected" : "Not connected"],
+          ]
+            .filter(([, v]) => v)
+            .map(([label, value], i, arr) => (
+              <div
+                key={label}
+                style={{
+                  display: "flex",
+                  padding: "12px 16px",
+                  borderBottom: i < arr.length - 1 ? "1px solid #f3f4f6" : "none",
+                  fontSize: 13,
+                }}
+              >
+                <span style={{ width: 140, color: "#9ca3af", flexShrink: 0 }}>{label}</span>
+                <span style={{ color: "#111827", fontWeight: 500 }}>{value}</span>
+              </div>
+            ))}
+        </div>
+
+        {/* Tools section */}
+        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
+          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600, color: "#111827" }}>Available Tools</h3>
+          {!loadingTools && (
+            <span
+              style={{
+                fontSize: 11,
+                fontWeight: 600,
+                color: "#6b7280",
+                background: "#f3f4f6",
+                borderRadius: 4,
+                padding: "1px 6px",
+              }}
+            >
+              {detailTools.length}
+            </span>
+          )}
+        </div>
+        {loadingTools ? (
+          <div style={{ display: "flex", justifyContent: "center", padding: "24px 0" }}>
+            <Spin size="small" />
+          </div>
+        ) : detailTools.length === 0 ? (
+          <div style={{ color: "#9ca3af", fontSize: 13, padding: "8px 0" }}>No tools available</div>
+        ) : (
+          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+            {detailTools.map((tool) => (
+              <div
+                key={tool.name}
+                style={{
+                  border: "1px solid #e5e7eb",
+                  borderRadius: 8,
+                  padding: "10px 14px",
+                  background: "#fafafa",
+                }}
+              >
+                <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: tool.description ? 4 : 0 }}>
+                  <ToolOutlined style={{ fontSize: 13, color: "#6b7280" }} />
+                  <span style={{ fontSize: 13, fontWeight: 600, color: "#111827", fontFamily: "monospace" }}>
+                    {tool.name}
+                  </span>
+                </div>
+                {tool.description && (
+                  <p style={{ margin: 0, fontSize: 12, color: "#6b7280", paddingLeft: 21 }}>{tool.description}</p>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // ── List view ──
+  return (
+    <div style={{ width: "100%" }}>
+      {/* Header row */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: 20,
+          gap: 16,
+          flexWrap: "wrap",
+        }}
+      >
+        <div>
+          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
+            <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: "#111827" }}>MCP Servers</h2>
+            <span
+              style={{
+                fontSize: 10,
+                fontWeight: 600,
+                color: "#1677ff",
+                background: "#e8f4ff",
+                borderRadius: 4,
+                padding: "1px 6px",
+                letterSpacing: "0.05em",
+                textTransform: "uppercase",
+              }}
+            >
+              Beta
+            </span>
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+            <p style={{ margin: 0, fontSize: 13, color: "#6b7280" }}>
+              Browse tools, authenticate once, use in chat — no setup needed.
+            </p>
+            {loadingCounts ? (
+              <span style={{ display: "flex", alignItems: "center", gap: 5, fontSize: 12, color: "#9ca3af" }}>
+                <Spin size="small" style={{ transform: "scale(0.7)" }} />
+                Loading tools...
+              </span>
+            ) : totalTools > 0 ? (
+              <span style={{ display: "flex", alignItems: "center", gap: 4, fontSize: 12, color: "#6b7280" }}>
+                <ToolOutlined style={{ fontSize: 11 }} />
+                {totalTools} tool{totalTools !== 1 ? "s" : ""} available
+              </span>
+            ) : null}
+          </div>
+        </div>
+        <Input
+          prefix={<SearchOutlined style={{ color: "#9ca3af", fontSize: 13 }} />}
+          placeholder="Search servers..."
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          allowClear
+          style={{ width: 220, borderRadius: 8, fontSize: 13 }}
+          size="middle"
+        />
+      </div>
+
+      {/* Tabs */}
+      <div style={{ display: "flex", borderBottom: "1px solid #e5e7eb", marginBottom: 16 }}>
+        {(["all", "connected"] as TabKey[]).map((tab) => (
+          <button
+            key={tab}
+            onClick={() => setActiveTab(tab)}
+            style={{
+              padding: "8px 16px",
+              border: "none",
+              borderBottom: activeTab === tab ? "2px solid #1677ff" : "2px solid transparent",
+              cursor: "pointer",
+              fontSize: 13,
+              fontWeight: activeTab === tab ? 600 : 400,
+              background: "transparent",
+              color: activeTab === tab ? "#1677ff" : "#6b7280",
+              marginBottom: -1,
+            }}
+          >
+            {tab === "all" ? "All" : `Connected${connectedCount > 0 ? ` (${connectedCount})` : ""}`}
+          </button>
+        ))}
+      </div>
+
+      {/* Grid */}
+      {loading ? (
+        <div style={{ display: "flex", justifyContent: "center", padding: "48px 0" }}>
+          <Spin />
+        </div>
+      ) : filtered.length === 0 ? (
+        <div style={{ textAlign: "center", color: "#9ca3af", fontSize: 13, padding: "48px 12px" }}>
+          {servers.length === 0
+            ? "No MCP servers configured. Add servers in Tools → MCP Servers."
+            : activeTab === "connected"
+              ? "No servers connected yet."
+              : "No servers match your search."}
+        </div>
+      ) : (
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+            gap: 0,
+            border: "1px solid #e5e7eb",
+            borderRadius: 10,
+            overflow: "hidden",
+          }}
+        >
+          {filtered.map((server, idx) => {
+            const name = nameOf(server);
+            const isConnected = selectedServers.includes(name);
+            const color = getAvatarColor(name);
+            const isLeftCol = idx % 2 === 0;
+            const count = toolCounts[name];
+
+            return (
+              <div
+                key={server.server_id}
+                onClick={() => setDetailServer(server)}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 12,
+                  padding: "14px 16px",
+                  background: "#fff",
+                  borderRight: isLeftCol ? "1px solid #f3f4f6" : "none",
+                  borderBottom:
+                    Math.floor(idx / 2) < Math.floor((filtered.length - 1) / 2) ? "1px solid #f3f4f6" : "none",
+                  cursor: "pointer",
+                  minWidth: 0,
+                  transition: "background 0.1s",
+                }}
+                onMouseEnter={(e) => {
+                  (e.currentTarget as HTMLDivElement).style.background = "#fafafa";
+                }}
+                onMouseLeave={(e) => {
+                  (e.currentTarget as HTMLDivElement).style.background = "#fff";
+                }}
+              >
+                {server.mcp_info?.logo_url ? (
+                  <img
+                    src={server.mcp_info.logo_url}
+                    alt={`${name} logo`}
+                    style={{
+                      width: 38,
+                      height: 38,
+                      borderRadius: 10,
+                      objectFit: "contain",
+                      flexShrink: 0,
+                      background: "#f9fafb",
+                    }}
+                    onError={(e) => {
+                      const el = e.target as HTMLImageElement;
+                      el.style.display = "none";
+                      if (el.nextElementSibling) (el.nextElementSibling as HTMLElement).style.display = "flex";
+                    }}
+                  />
+                ) : null}
+                <div
+                  style={{
+                    width: 38,
+                    height: 38,
+                    borderRadius: 10,
+                    background: color,
+                    display: server.mcp_info?.logo_url ? "none" : "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    color: "#fff",
+                    fontWeight: 700,
+                    fontSize: 16,
+                    flexShrink: 0,
+                  }}
+                >
+                  {name.charAt(0).toUpperCase()}
+                </div>
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div
+                    style={{
+                      fontSize: 14,
+                      fontWeight: 500,
+                      color: "#111827",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {name}
+                  </div>
+                  <div
+                    style={{
+                      fontSize: 12,
+                      color: "#9ca3af",
+                      marginTop: 1,
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 6,
+                    }}
+                  >
+                    <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                      {server.description ?? "MCP server"}
+                    </span>
+                    {count !== undefined ? (
+                      count > 0 ? (
+                        <span
+                          style={{ flexShrink: 0, display: "flex", alignItems: "center", gap: 3, color: "#9ca3af" }}
+                        >
+                          · <ToolOutlined style={{ fontSize: 10 }} /> {count}
+                        </span>
+                      ) : null
+                    ) : loadingCounts ? (
+                      <Skeleton.Input
+                        active
+                        size="small"
+                        style={{ width: 28, height: 12, minWidth: 28, flexShrink: 0 }}
+                      />
+                    ) : null}
+                  </div>
+                </div>
+                {server.auth_type === AUTH_TYPE.OAUTH2 ? (
+                  oauthConnected.has(server.server_id) ? (
+                    <CheckCircleOutlined style={{ fontSize: 14, color: "#52c41a", flexShrink: 0 }} />
+                  ) : (
+                    <OAuth2ConnectButton
+                      server={server}
+                      accessToken={accessToken}
+                      onConnect={(id) => {
+                        setOauthConnected((prev) => new Set(prev).add(id));
+                      }}
+                      variant="badge"
+                    />
+                  )
+                ) : isConnected ? (
+                  <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#1677ff", flexShrink: 0 }} />
+                ) : null}
+                <RightOutlined style={{ fontSize: 11, color: "#d1d5db", flexShrink: 0 }} />
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MCPAppsPanel;
diff --git a/ui/litellm-dashboard/src/components/chat/MCPConnectPicker.tsx b/ui/litellm-dashboard/src/components/chat/MCPConnectPicker.tsx
new file mode 100644
index 000000000000..3e13ec9dc87c
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/chat/MCPConnectPicker.tsx
@@ -0,0 +1,171 @@
+import React, { useEffect, useState } from "react";
+import { Switch, Spin } from "antd";
+import MessageManager from "@/components/molecules/message_manager";
+import { fetchMCPServers, listMCPTools } from "../networking";
+import { MCPServer } from "../mcp_tools/types";
+
+interface Props {
+  accessToken: string;
+  selectedServers: string[];
+  onChange: (servers: string[]) => void;
+}
+
+const MCPConnectPicker: React.FC<Props> = ({ accessToken, selectedServers, onChange }) => {
+  const [servers, setServers] = useState<MCPServer[]>([]);
+  const [loadingServers, setLoadingServers] = useState(true);
+  // Track which individual servers are being toggled on (verifying tools)
+  const [togglingOn, setTogglingOn] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const load = async () => {
+      setLoadingServers(true);
+      try {
+        const data = await fetchMCPServers(accessToken);
+        if (cancelled) return;
+        // API returns { data: MCPServer[] } or MCPServer[]
+        const list: MCPServer[] = Array.isArray(data) ? data : data?.data ?? [];
+        setServers(list);
+      } catch {
+        if (!cancelled) {
+          setServers([]);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoadingServers(false);
+        }
+      }
+    };
+
+    load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [accessToken]);
+
+  const handleToggle = async (serverName: string, checked: boolean) => {
+    if (!checked) {
+      // Toggle OFF — remove immediately, no tool fetch needed
+      onChange(selectedServers.filter((s) => s !== serverName));
+      return;
+    }
+
+    // Toggle ON — verify tools are reachable first
+    setTogglingOn((prev) => new Set(prev).add(serverName));
+    try {
+      const result = await listMCPTools(accessToken, serverName);
+      // listMCPTools never throws; it returns { tools, error, message } on failure
+      if (result?.error) {
+        MessageManager.warning(`Could not load tools for ${serverName} — it will be excluded from this message.`);
+        // Do not add to selectedServers
+        return;
+      }
+      onChange([...selectedServers, serverName]);
+    } catch {
+      MessageManager.warning(`Could not load tools for ${serverName} — it will be excluded from this message.`);
+      // Do not add to selectedServers
+    } finally {
+      setTogglingOn((prev) => {
+        const next = new Set(prev);
+        next.delete(serverName);
+        return next;
+      });
+    }
+  };
+
+  return (
+    <div
+      style={{
+        maxWidth: 320,
+        maxHeight: 400,
+        overflowY: "auto",
+        padding: "8px 0",
+      }}
+    >
+      {loadingServers ? (
+        <div style={{ display: "flex", justifyContent: "center", padding: "24px 0" }}>
+          <Spin />
+        </div>
+      ) : servers.length === 0 ? (
+        <div style={{ padding: "16px 12px", color: "#8c8c8c", fontSize: 13, textAlign: "center" }}>
+          No MCP servers configured
+        </div>
+      ) : (
+        servers.map((server) => {
+          const name = server.server_name ?? server.alias ?? server.server_id;
+          const isSelected = selectedServers.includes(name);
+          const isTogglingOn = togglingOn.has(name);
+
+          return (
+            <div
+              key={server.server_id}
+              style={{
+                display: "flex",
+                alignItems: "flex-start",
+                justifyContent: "space-between",
+                padding: "8px 12px",
+                gap: 12,
+              }}
+            >
+              {server.mcp_info?.logo_url && (
+                <img
+                  src={server.mcp_info.logo_url}
+                  alt={`${name} logo`}
+                  style={{
+                    width: 24,
+                    height: 24,
+                    borderRadius: 6,
+                    objectFit: "contain",
+                    flexShrink: 0,
+                    marginTop: 1,
+                  }}
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).style.display = "none";
+                  }}
+                />
+              )}
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div
+                  style={{
+                    fontWeight: 500,
+                    fontSize: 13,
+                    color: "#1f1f1f",
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                  }}
+                >
+                  {name}
+                </div>
+                {server.description && (
+                  <div
+                    style={{
+                      fontSize: 12,
+                      color: "#8c8c8c",
+                      marginTop: 2,
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                    }}
+                  >
+                    {server.description}
+                  </div>
+                )}
+              </div>
+              <Switch
+                size="small"
+                checked={isSelected}
+                loading={isTogglingOn}
+                onChange={(checked) => handleToggle(name, checked)}
+              />
+            </div>
+          );
+        })
+      )}
+    </div>
+  );
+};
+
+export default MCPConnectPicker;
diff --git a/ui/litellm-dashboard/src/components/chat/MCPCredentialsTab.tsx b/ui/litellm-dashboard/src/components/chat/MCPCredentialsTab.tsx
new file mode 100644
index 000000000000..4a8a3785f299
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/chat/MCPCredentialsTab.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+/**
+ * MCPCredentialsTab
+ *
+ * Shows all OAuth2 MCP connections the calling user has stored.
+ * Lives in the Chat sidebar's "Credentials" tab.
+ */
+
+import React, { useCallback, useEffect, useState } from "react";
+import { Spin } from "antd";
+import MessageManager from "@/components/molecules/message_manager";
+import { DeleteOutlined, LinkOutlined } from "@ant-design/icons";
+import { Badge, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from "@tremor/react";
+import { deleteMCPOAuthUserCredential, listMCPUserCredentials, MCPUserCredentialListItem } from "../networking";
+
+interface Props {
+  accessToken: string;
+}
+
+function relativeTime(isoString: string | null | undefined): string {
+  if (!isoString) return "";
+  try {
+    const date = new Date(isoString);
+    const diffMs = Date.now() - date.getTime();
+    const diffSec = Math.floor(diffMs / 1000);
+    if (diffSec < 60) return "just now";
+    const diffMin = Math.floor(diffSec / 60);
+    if (diffMin < 60) return `${diffMin}m ago`;
+    const diffHr = Math.floor(diffMin / 60);
+    if (diffHr < 24) return `${diffHr}h ago`;
+    return `${Math.floor(diffHr / 24)}d ago`;
+  } catch {
+    return "";
+  }
+}
+
+function expiryLabel(isoString: string | null | undefined): string {
+  if (!isoString) return "Does not expire";
+  try {
+    const exp = new Date(isoString);
+    const diffMs = exp.getTime() - Date.now();
+    if (diffMs <= 0) return "Expired";
+    const diffSec = Math.floor(diffMs / 1000);
+    const diffMin = Math.floor(diffSec / 60);
+    const diffHr = Math.floor(diffMin / 60);
+    const diffDay = Math.floor(diffHr / 24);
+    if (diffDay > 0) return `Expires in ${diffDay}d`;
+    if (diffHr > 0) return `Expires in ${diffHr}h`;
+    return `Expires in ${diffMin}m`;
+  } catch {
+    return "";
+  }
+}
+
+const MCPCredentialsTab: React.FC<Props> = ({ accessToken }) => {
+  const [credentials, setCredentials] = useState<MCPUserCredentialListItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [revoking, setRevoking] = useState<Set<string>>(new Set());
+
+  const load = useCallback(() => {
+    setLoading(true);
+    listMCPUserCredentials(accessToken)
+      .then(setCredentials)
+      .catch(() => setCredentials([]))
+      .finally(() => setLoading(false));
+  }, [accessToken]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const handleRevoke = async (serverId: string) => {
+    setRevoking((prev) => new Set(prev).add(serverId));
+    try {
+      await deleteMCPOAuthUserCredential(accessToken, serverId);
+      setCredentials((prev) => prev.filter((c) => c.server_id !== serverId));
+    } catch {
+      MessageManager.error("Failed to revoke connection. Please try again.");
+    } finally {
+      setRevoking((prev) => {
+        const n = new Set(prev);
+        n.delete(serverId);
+        return n;
+      });
+    }
+  };
+
+  const displayName = (c: MCPUserCredentialListItem) => c.alias || c.server_name || c.server_id;
+
+  return (
+    <div className="w-full">
+      {/* Header */}
+      <div className="mb-4">
+        <h2 className="text-base font-semibold text-gray-900 mb-0.5">App Credentials</h2>
+        <p className="text-sm text-gray-500 m-0">Your stored OAuth connections — used automatically in chat.</p>
+      </div>
+
+      {loading ? (
+        <div className="flex justify-center py-12">
+          <Spin />
+        </div>
+      ) : credentials.length === 0 ? (
+        <div className="text-center text-gray-400 text-sm py-12 border border-dashed border-gray-200 rounded-lg">
+          <LinkOutlined className="text-2xl mb-3 block text-gray-300" />
+          No connections yet.
+          <br />
+          Go to <strong>Apps</strong> and click <strong>Connect</strong> to authorize an MCP server.
+        </div>
+      ) : (
+        <div className="rounded-lg border border-gray-200 overflow-hidden">
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableHeaderCell className="text-xs font-medium text-gray-500 py-2 px-4">App</TableHeaderCell>
+                <TableHeaderCell className="text-xs font-medium text-gray-500 py-2 px-4">Connected</TableHeaderCell>
+                <TableHeaderCell className="text-xs font-medium text-gray-500 py-2 px-4">Status</TableHeaderCell>
+                <TableHeaderCell className="text-xs font-medium text-gray-500 py-2 px-4 text-right">
+                  Actions
+                </TableHeaderCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {credentials.map((cred) => {
+                const name = displayName(cred);
+                const isRevoking = revoking.has(cred.server_id);
+                const exp = expiryLabel(cred.expires_at);
+                const connected = relativeTime(cred.connected_at);
+                const isExpired = exp === "Expired";
+
+                return (
+                  <TableRow key={cred.server_id} className="h-10 hover:bg-gray-50">
+                    <TableCell className="py-2 px-4">
+                      <span className="text-sm font-medium text-gray-900">{name}</span>
+                    </TableCell>
+                    <TableCell className="py-2 px-4">
+                      <span className="text-sm text-gray-500">{connected || "—"}</span>
+                    </TableCell>
+                    <TableCell className="py-2 px-4">
+                      <Badge color={isExpired ? "red" : "green"} size="xs">
+                        {exp}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="py-2 px-4 text-right">
+                      <button
+                        onClick={() => handleRevoke(cred.server_id)}
+                        disabled={isRevoking}
+                        title="Revoke connection"
+                        className={`inline-flex items-center justify-center rounded-md border border-gray-200 px-2 py-1 text-gray-400 hover:text-red-500 hover:border-red-200 transition-colors ${isRevoking ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`}
+                        style={{ background: "none" }}
+                      >
+                        {isRevoking ? <Spin size="small" /> : <DeleteOutlined className="text-sm" />}
+                      </button>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MCPCredentialsTab;
diff --git a/ui/litellm-dashboard/src/components/chat/types.ts b/ui/litellm-dashboard/src/components/chat/types.ts
new file mode 100644
index 000000000000..9b657306db65
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/chat/types.ts
@@ -0,0 +1,25 @@
+import type { MCPEvent } from "../mcp_tools/types";
+export type { MCPEvent };
+
+export interface ChatMessage {
+  id: string;
+  role: "user" | "assistant" | "tool";
+  content: string;
+  reasoningContent?: string;
+  /** MCP tool events that occurred during this assistant turn, in order. */
+  mcpEvents?: MCPEvent[];
+  toolName?: string;
+  toolArgs?: Record<string, unknown>;
+  toolResult?: string;
+  timestamp: number;
+}
+
+export interface Conversation {
+  id: string;
+  title: string;
+  model: string;
+  messages: ChatMessage[];
+  mcpServerNames: string[];
+  createdAt: number;
+  updatedAt: number;
+}
diff --git a/ui/litellm-dashboard/src/components/chat/useChatHistory.ts b/ui/litellm-dashboard/src/components/chat/useChatHistory.ts
new file mode 100644
index 000000000000..274ae6a79c93
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/chat/useChatHistory.ts
@@ -0,0 +1,213 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ChatMessage, Conversation } from "./types";
+
+const STORAGE_KEY = "litellm_chat_history_v1";
+const MAX_CONVERSATIONS = 100;
+const TITLE_MAX_LENGTH = 40;
+
+function generateTitle(firstUserMessage: string): string {
+  const trimmed = firstUserMessage.trim();
+  if (trimmed.length <= TITLE_MAX_LENGTH) {
+    return trimmed;
+  }
+  return trimmed.slice(0, TITLE_MAX_LENGTH) + "…";
+}
+
+function loadFromStorage(): { conversations: Conversation[]; storageUnavailable: boolean } {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) {
+      return { conversations: [], storageUnavailable: false };
+    }
+    const parsed = JSON.parse(raw) as Conversation[];
+    return { conversations: parsed, storageUnavailable: false };
+  } catch {
+    return { conversations: [], storageUnavailable: true };
+  }
+}
+
+function saveToStorage(conversations: Conversation[]): boolean {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(conversations));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function trimConversations(conversations: Conversation[]): Conversation[] {
+  if (conversations.length <= MAX_CONVERSATIONS) {
+    return conversations;
+  }
+  return [...conversations].sort((a, b) => b.updatedAt - a.updatedAt).slice(0, MAX_CONVERSATIONS);
+}
+
+export function useChatHistory(activeConversationId: string | null): {
+  conversations: Conversation[];
+  activeConversation: Conversation | null;
+  storageUnavailable: boolean;
+  staleId: boolean;
+  createConversation: (model: string) => string;
+  appendMessage: (conversationId: string, message: Omit<ChatMessage, "id" | "timestamp">) => void;
+  updateLastAssistantMessage: (
+    conversationId: string,
+    updates: Partial<Pick<ChatMessage, "content" | "reasoningContent" | "mcpEvents">>,
+  ) => void;
+  /** Remove the message with `messageId` and all subsequent messages from the conversation. */
+  truncateFromMessage: (conversationId: string, messageId: string) => void;
+  deleteConversation: (id: string) => void;
+  renameConversation: (id: string, newTitle: string) => void;
+  setActiveConversationId: (id: string | null) => void;
+} {
+  const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [storageUnavailable, setStorageUnavailable] = useState(false);
+  const [staleId, setStaleId] = useState(false);
+  const [currentActiveId, setCurrentActiveId] = useState<string | null>(activeConversationId);
+  // Ref so updater functions stay pure (no state setter calls inside setConversations)
+  const storageUnavailableRef = useRef(false);
+  const initializedRef = useRef(false);
+
+  // Sync internal active id whenever the URL-derived prop changes (e.g. "New chat" → null)
+  useEffect(() => {
+    setCurrentActiveId(activeConversationId);
+    setStaleId(false);
+  }, [activeConversationId]);
+
+  useEffect(() => {
+    const { conversations: loaded, storageUnavailable: unavailable } = loadFromStorage();
+    storageUnavailableRef.current = unavailable;
+    setConversations(loaded);
+    setStorageUnavailable(unavailable);
+    initializedRef.current = true;
+
+    if (activeConversationId !== null) {
+      const found = loaded.some((c) => c.id === activeConversationId);
+      if (!found) {
+        setStaleId(true);
+      }
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Persist to localStorage after every conversations change (pure effect, no setState inside updaters)
+  useEffect(() => {
+    if (!initializedRef.current) return;
+    if (storageUnavailableRef.current) return;
+    const success = saveToStorage(conversations);
+    if (!success) {
+      storageUnavailableRef.current = true;
+      setStorageUnavailable(true);
+    }
+  }, [conversations]);
+
+  const createConversation = useCallback((model: string): string => {
+    const id = crypto.randomUUID();
+    const now = Date.now();
+    const newConversation: Conversation = {
+      id,
+      title: "New conversation",
+      model,
+      messages: [],
+      mcpServerNames: [],
+      createdAt: now,
+      updatedAt: now,
+    };
+    setConversations((prev) => trimConversations([newConversation, ...prev]));
+    setCurrentActiveId(id);
+    return id;
+  }, []);
+
+  const appendMessage = useCallback((conversationId: string, message: Omit<ChatMessage, "id" | "timestamp">) => {
+    const newMessage: ChatMessage = {
+      ...message,
+      id: crypto.randomUUID(),
+      timestamp: Date.now(),
+    };
+
+    setConversations((prev) => {
+      const updated = prev.map((conv) => {
+        if (conv.id !== conversationId) return conv;
+        const updatedMessages = [...conv.messages, newMessage];
+        let title = conv.title;
+        if (
+          title === "New conversation" &&
+          newMessage.role === "user" &&
+          conv.messages.filter((m) => m.role === "user").length === 0
+        ) {
+          title = generateTitle(newMessage.content);
+        }
+        return { ...conv, title, messages: updatedMessages, updatedAt: Date.now() };
+      });
+      return trimConversations(updated);
+    });
+  }, []);
+
+  const updateLastAssistantMessage = useCallback(
+    (conversationId: string, updates: Partial<Pick<ChatMessage, "content" | "reasoningContent" | "mcpEvents">>) => {
+      setConversations((prev) => {
+        const updated = prev.map((conv) => {
+          if (conv.id !== conversationId) return conv;
+          const messages = [...conv.messages];
+          const lastAssistantIndex = messages.reduceRight((found, msg, idx) => {
+            if (found !== -1) return found;
+            return msg.role === "assistant" ? idx : -1;
+          }, -1);
+          if (lastAssistantIndex === -1) return conv;
+          messages[lastAssistantIndex] = { ...messages[lastAssistantIndex], ...updates };
+          return { ...conv, messages, updatedAt: Date.now() };
+        });
+        return trimConversations(updated);
+      });
+    },
+    [],
+  );
+
+  const truncateFromMessage = useCallback((conversationId: string, messageId: string) => {
+    setConversations((prev) => {
+      const updated = prev.map((conv) => {
+        if (conv.id !== conversationId) return conv;
+        const idx = conv.messages.findIndex((m) => m.id === messageId);
+        if (idx === -1) return conv;
+        return { ...conv, messages: conv.messages.slice(0, idx), updatedAt: Date.now() };
+      });
+      return trimConversations(updated);
+    });
+  }, []);
+
+  const deleteConversation = useCallback(
+    (id: string) => {
+      setConversations((prev) => trimConversations(prev.filter((c) => c.id !== id)));
+      if (currentActiveId === id) setCurrentActiveId(null);
+    },
+    [currentActiveId],
+  );
+
+  const renameConversation = useCallback((id: string, newTitle: string) => {
+    setConversations((prev) =>
+      trimConversations(
+        prev.map((conv) => (conv.id === id ? { ...conv, title: newTitle, updatedAt: Date.now() } : conv)),
+      ),
+    );
+  }, []);
+
+  const setActiveConversationId = useCallback((id: string | null) => {
+    setCurrentActiveId(id);
+    setStaleId(false);
+  }, []);
+
+  const activeConversation =
+    currentActiveId !== null ? conversations.find((c) => c.id === currentActiveId) ?? null : null;
+
+  return {
+    conversations,
+    activeConversation,
+    storageUnavailable,
+    staleId,
+    createConversation,
+    appendMessage,
+    updateLastAssistantMessage,
+    truncateFromMessage,
+    deleteConversation,
+    renameConversation,
+    setActiveConversationId,
+  };
+}
diff --git a/ui/litellm-dashboard/src/components/leftnav.test.tsx b/ui/litellm-dashboard/src/components/leftnav.test.tsx
index 0e88a1a36038..dac4a35ebb6c 100644
--- a/ui/litellm-dashboard/src/components/leftnav.test.tsx
+++ b/ui/litellm-dashboard/src/components/leftnav.test.tsx
@@ -95,6 +95,16 @@ describe("Sidebar (leftnav)", () => {
     });
   });
 
+  it("hides Chat by default", () => {
+    renderWithProviders(<Sidebar {...defaultProps} />);
+    expect(screen.queryByText("Chat")).not.toBeInTheDocument();
+  });
+
+  it("shows Chat when enableChatUI is true", () => {
+    renderWithProviders(<Sidebar {...defaultProps} enableChatUI />);
+    expect(screen.getByText("Chat")).toBeInTheDocument();
+  });
+
   it("expands a nested tab to reveal its children (Tools > Search Tools)", async () => {
     renderWithProviders(<Sidebar {...defaultProps} />);
 
diff --git a/ui/litellm-dashboard/src/components/leftnav.tsx b/ui/litellm-dashboard/src/components/leftnav.tsx
index f4946b81d68d..b46c9f5d963d 100644
--- a/ui/litellm-dashboard/src/components/leftnav.tsx
+++ b/ui/litellm-dashboard/src/components/leftnav.tsx
@@ -11,6 +11,7 @@ import {
   BgColorsOutlined,
   BlockOutlined,
   BookOutlined,
+  CommentOutlined,
   CreditCardOutlined,
   DatabaseOutlined,
   ExperimentOutlined,
@@ -53,6 +54,7 @@ interface SidebarProps {
   collapsed?: boolean;
   enabledPagesInternalUsers?: string[] | null;
   enableProjectsUI?: boolean;
+  enableChatUI?: boolean;
   disableAgentsForInternalUsers?: boolean;
   allowAgentsForTeamAdmins?: boolean;
   disableVectorStoresForInternalUsers?: boolean;
@@ -95,6 +97,16 @@ const menuGroups: MenuGroup[] = [
         icon: <PlayCircleOutlined />,
         roles: rolesWithWriteAccess,
       },
+      {
+        key: "chat",
+        page: "chat",
+        label: (
+          <span className="flex items-center gap-2">
+            Chat <NewBadge />
+          </span>
+        ),
+        icon: <CommentOutlined />,
+      },
       {
         key: "models",
         page: "models",
@@ -398,6 +410,7 @@ const Sidebar: React.FC<SidebarProps> = ({
   collapsed = false,
   enabledPagesInternalUsers,
   enableProjectsUI,
+  enableChatUI,
   disableAgentsForInternalUsers,
   allowAgentsForTeamAdmins,
   disableVectorStoresForInternalUsers,
@@ -493,6 +506,9 @@ const Sidebar: React.FC<SidebarProps> = ({
         // Hide Projects page if enableProjectsUI is not enabled
         if (item.key === "projects" && !enableProjectsUI) return false;
 
+        // Hide Chat page if enableChatUI is not enabled
+        if (item.key === "chat" && !enableChatUI) return false;
+
         // Hide agents and vector-stores pages for non-admin users when disabled,
         // unless allow_*_for_team_admins is on and the user is a team admin.
         if (
diff --git a/ui/litellm-dashboard/src/components/page_metadata.ts b/ui/litellm-dashboard/src/components/page_metadata.ts
index 84562446696b..96b65a4f6497 100644
--- a/ui/litellm-dashboard/src/components/page_metadata.ts
+++ b/ui/litellm-dashboard/src/components/page_metadata.ts
@@ -7,6 +7,7 @@
 export const pageDescriptions: Record<string, string> = {
   "api-keys": "Manage virtual keys for API access and authentication",
   "llm-playground": "Interactive playground for testing LLM requests",
+  chat: "Chat with an LLM and connect your own MCP server credentials via OAuth",
   models: "Configure and manage LLM models and endpoints",
   agents: "Create and manage AI agents",
   agentic: "Manage agentic resources: agents, workflow runs, and memory",
diff --git a/ui/litellm-dashboard/src/utils/migratedPages.ts b/ui/litellm-dashboard/src/utils/migratedPages.ts
index a3eb4a958df6..b0dfb46e3127 100644
--- a/ui/litellm-dashboard/src/utils/migratedPages.ts
+++ b/ui/litellm-dashboard/src/utils/migratedPages.ts
@@ -16,6 +16,7 @@ export const MIGRATED_PAGES: Record<string, string> = {
   "api-reference": "api-reference",
   "llm-playground": "playground",
   projects: "projects",
+  chat: "chat",
   "access-groups": "access-groups",
   budgets: "budgets",
   workflows: "workflows",

From c17a46e55bf0351603ad7eb17f14fd6765e263f2 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Wed, 1 Jul 2026 09:41:31 -0700
Subject: [PATCH 02/10] fix(ui): drop duplicate LiteLLM wordmark beside logo in
 chat sidebar

The chat sidebar header rendered the /get_image logo (which already
contains the LiteLLM wordmark) and then a separate LiteLLM text span
right after it, so the header read "LiteLLM LiteLLM". The main navbar
shows the same logo with no adjacent text label; match that and drop
the redundant span.
---
 ui/litellm-dashboard/src/components/chat/ChatPage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
index 2a7fdb75eb86..b8ebd3e02b4e 100644
--- a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
+++ b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
@@ -966,7 +966,6 @@ const ChatPage: React.FC<ChatPageProps> = ({ accessToken, userRole, userId, user
                 alt="LiteLLM"
                 style={{ height: 28, maxWidth: 120, objectFit: "contain", flexShrink: 0 }}
               />
-              <span style={{ fontWeight: 700, fontSize: 15, color: "#111827", letterSpacing: "-0.01em" }}>LiteLLM</span>
             </div>
           )}
           <Tooltip title={sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"} placement="right">

From c54eaa4afdf96952f2f2e8505ca6c2687f36d4fd Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Wed, 1 Jul 2026 10:30:30 -0700
Subject: [PATCH 03/10] feat(ui): add AI Gateway/Chat view switcher gated on
 enable_chat_ui

Reuses the navbar ViewSwitcher to toggle between the dashboard and the
chat app. The Chat entry is gated on the enable_chat_ui admin setting:
clickable for everyone once enabled, hidden from non-admins when off,
and shown greyed to admins when off with an 'Enable in Admin Settings'
hint that links to the admin panel where the toggle lives.
---
 .../components/Navbar/ViewSwitcher.test.tsx   | 96 +++++++++++++++----
 .../src/components/Navbar/ViewSwitcher.tsx    | 73 ++++++++++----
 2 files changed, 136 insertions(+), 33 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/Navbar/ViewSwitcher.test.tsx b/ui/litellm-dashboard/src/components/Navbar/ViewSwitcher.test.tsx
index 50f0de193d1a..e17e045489b5 100644
--- a/ui/litellm-dashboard/src/components/Navbar/ViewSwitcher.test.tsx
+++ b/ui/litellm-dashboard/src/components/Navbar/ViewSwitcher.test.tsx
@@ -1,32 +1,60 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import ViewSwitcher from "./ViewSwitcher";
 
-const { mockUsePluginMode, state } = vi.hoisted(() => {
+const { mockUsePluginMode, mockUseUISettings, mockUseAuthorized, state } = vi.hoisted(() => {
   const state = {
     mode: "ai-gateway" as string,
     setMode: vi.fn(),
     plugins: [] as { name: string; display_name: string; url: string }[],
     activePlugin: null as { name: string; display_name: string; url: string } | null,
+    enableChatUI: false,
+    userRole: "Internal User" as string,
+  };
+  return {
+    state,
+    mockUsePluginMode: vi.fn(() => ({
+      mode: state.mode,
+      setMode: state.setMode,
+      plugins: state.plugins,
+      activePlugin: state.activePlugin,
+    })),
+    mockUseUISettings: vi.fn(() => ({ data: { values: { enable_chat_ui: state.enableChatUI } } })),
+    mockUseAuthorized: vi.fn(() => ({ userRole: state.userRole })),
   };
-  return { mockUsePluginMode: vi.fn(() => state), state };
 });
 
 vi.mock("@/contexts/PluginModeContext", () => ({ usePluginMode: mockUsePluginMode }));
+vi.mock("@/app/(dashboard)/hooks/uiSettings/useUISettings", () => ({ useUISettings: mockUseUISettings }));
+vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({ default: mockUseAuthorized }));
+// Deterministic hrefs so navigation assertions don't depend on server_root_path.
+vi.mock("@/utils/migratedPages", () => ({ migratedHref: (seg: string) => `/ui/${seg}` }));
 
 describe("ViewSwitcher", () => {
+  let assignSpy: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    assignSpy = vi.fn();
+    Object.defineProperty(window, "location", {
+      configurable: true,
+      value: { assign: assignSpy },
+    });
+  });
+
   afterEach(() => {
     state.mode = "ai-gateway";
     state.plugins = [];
+    state.enableChatUI = false;
+    state.userRole = "Internal User";
     state.setMode.mockClear();
   });
 
-  it("renders nothing when there are no plugins", () => {
+  it("renders nothing with no plugins, chat disabled, and a non-admin user", () => {
     const { container } = render(<ViewSwitcher />);
     expect(container.firstChild).toBeNull();
   });
 
-  it("labels the button from the active plugin's display_name and lists AI Gateway + each plugin", async () => {
+  it("labels the button from the active plugin and lists AI Gateway + each plugin", async () => {
     state.plugins = [
       { name: "litellm-platform-plugin", display_name: "Chat UI", url: "http://localhost:3300" },
       { name: "obs", display_name: "Observability", url: "http://localhost:9000" },
@@ -35,7 +63,6 @@ describe("ViewSwitcher", () => {
     render(<ViewSwitcher />);
 
     expect(screen.getByRole("button")).toHaveTextContent("Chat UI");
-    expect(screen.queryByText("Agent Control Plane")).not.toBeInTheDocument();
 
     act(() => {
       fireEvent.click(screen.getByRole("button"));
@@ -44,33 +71,68 @@ describe("ViewSwitcher", () => {
     expect(screen.getByText("Observability")).toBeInTheDocument();
   });
 
-  it("switches to AI Gateway when that entry is picked", async () => {
+  it("switches plugin mode when a mode entry is picked", async () => {
     state.plugins = [{ name: "litellm-platform-plugin", display_name: "Chat UI", url: "http://localhost:3300" }];
-    state.mode = "litellm-platform-plugin";
+    state.mode = "ai-gateway";
     render(<ViewSwitcher />);
 
     act(() => {
       fireEvent.click(screen.getByRole("button"));
     });
-    await waitFor(() => expect(screen.getByText("AI Gateway")).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText("Chat UI")).toBeInTheDocument());
     act(() => {
-      fireEvent.click(screen.getByText("AI Gateway"));
+      fireEvent.click(screen.getByText("Chat UI"));
     });
-    expect(state.setMode).toHaveBeenCalledWith("ai-gateway");
+    expect(state.setMode).toHaveBeenCalledWith("litellm-platform-plugin");
+    expect(assignSpy).not.toHaveBeenCalled();
   });
 
-  it("switches to a plugin by name when its entry is picked", async () => {
-    state.plugins = [{ name: "litellm-platform-plugin", display_name: "Chat UI", url: "http://localhost:3300" }];
-    state.mode = "ai-gateway";
+  it("shows a clickable Chat entry that navigates to the chat app when enabled", async () => {
+    state.enableChatUI = true;
+    state.userRole = "Internal User";
     render(<ViewSwitcher />);
 
     act(() => {
       fireEvent.click(screen.getByRole("button"));
     });
-    await waitFor(() => expect(screen.getByText("Chat UI")).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText("Chat")).toBeInTheDocument());
+    expect(screen.queryByText(/Enable in Admin Settings/i)).not.toBeInTheDocument();
+
     act(() => {
-      fireEvent.click(screen.getByText("Chat UI"));
+      fireEvent.click(screen.getByText("Chat"));
     });
-    expect(state.setMode).toHaveBeenCalledWith("litellm-platform-plugin");
+    expect(assignSpy).toHaveBeenCalledWith("/ui/chat");
+    expect(state.setMode).not.toHaveBeenCalled();
+  });
+
+  it("greys out Chat and points admins to Admin Settings when disabled", async () => {
+    state.enableChatUI = false;
+    state.userRole = "Admin";
+    render(<ViewSwitcher />);
+
+    act(() => {
+      fireEvent.click(screen.getByRole("button"));
+    });
+    await waitFor(() => expect(screen.getByText("Chat")).toBeInTheDocument());
+    expect(screen.getByText(/Enable in Admin Settings/i)).toBeInTheDocument();
+
+    act(() => {
+      fireEvent.click(screen.getByText("Chat"));
+    });
+    expect(assignSpy).toHaveBeenCalledWith("/ui/admin-panel");
+    expect(state.setMode).not.toHaveBeenCalled();
+  });
+
+  it("hides the Chat entry from non-admins when disabled", async () => {
+    state.enableChatUI = false;
+    state.userRole = "Internal User";
+    state.plugins = [{ name: "obs", display_name: "Observability", url: "http://localhost:9000" }];
+    render(<ViewSwitcher />);
+
+    act(() => {
+      fireEvent.click(screen.getByRole("button"));
+    });
+    await waitFor(() => expect(screen.getByText("Observability")).toBeInTheDocument());
+    expect(screen.queryByText("Chat")).not.toBeInTheDocument();
   });
 });
diff --git a/ui/litellm-dashboard/src/components/Navbar/ViewSwitcher.tsx b/ui/litellm-dashboard/src/components/Navbar/ViewSwitcher.tsx
index 6d2718720e98..21898c26a3d7 100644
--- a/ui/litellm-dashboard/src/components/Navbar/ViewSwitcher.tsx
+++ b/ui/litellm-dashboard/src/components/Navbar/ViewSwitcher.tsx
@@ -3,33 +3,74 @@ import { Dropdown } from "antd";
 import { AppstoreOutlined, CheckOutlined, DownOutlined } from "@ant-design/icons";
 import type { MenuProps } from "antd";
 import { usePluginMode } from "@/contexts/PluginModeContext";
+import { useUISettings } from "@/app/(dashboard)/hooks/uiSettings/useUISettings";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import { isAdminRole } from "@/utils/roles";
+import { migratedHref } from "@/utils/migratedPages";
 
 const GATEWAY = "ai-gateway";
+const CHAT = "chat";
+const ADMIN_SETTINGS_KEY = "admin-panel";
 
 export default function ViewSwitcher() {
   const { mode, setMode, plugins } = usePluginMode();
+  const { data: uiSettings } = useUISettings();
+  const { userRole } = useAuthorized();
 
-  // Only a switcher when there is at least one plugin to switch to.
-  if (plugins.length === 0) return null;
+  const chatEnabled = Boolean(uiSettings?.values?.enable_chat_ui);
+  const isAdmin = isAdminRole(userRole ?? "");
+  // Admins see the Chat entry even when disabled, so they can discover and turn
+  // it on; everyone else only sees it once it's enabled for users.
+  const showChatEntry = chatEnabled || isAdmin;
+
+  // Only render a switcher when there is somewhere to switch to.
+  if (plugins.length === 0 && !showChatEntry) return null;
 
   const activeLabel = plugins.find((p) => p.name === mode)?.display_name ?? "AI Gateway";
 
-  const entries = [
-    { value: GATEWAY, label: "AI Gateway" },
-    ...plugins.map((p) => ({ value: p.name, label: p.display_name })),
+  const modeEntries = [
+    { key: GATEWAY, label: "AI Gateway" },
+    ...plugins.map((p) => ({ key: p.name, label: p.display_name })),
+  ];
+
+  const items: MenuProps["items"] = [
+    ...modeEntries.map((e) => ({
+      key: e.key,
+      label: (
+        <div className="flex items-center justify-between gap-6 py-0.5">
+          <span className="font-medium">{e.label}</span>
+          {e.key === mode && <CheckOutlined className="text-blue-600" />}
+        </div>
+      ),
+    })),
+    ...(showChatEntry
+      ? [
+          {
+            key: CHAT,
+            label: chatEnabled ? (
+              <div className="flex items-center justify-between gap-6 py-0.5">
+                <span className="font-medium">Chat</span>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-0.5 py-0.5">
+                <span className="font-medium text-gray-400">Chat</span>
+                <span className="text-xs text-gray-400">Enable in Admin Settings &rarr; UI Settings</span>
+              </div>
+            ),
+          },
+        ]
+      : []),
   ];
 
-  const items: MenuProps["items"] = entries.map((e) => ({
-    key: e.value,
-    label: (
-      <div className="flex items-center justify-between gap-6 py-0.5">
-        <span className="font-medium">{e.label}</span>
-        {e.value === mode && <CheckOutlined className="text-blue-600" />}
-      </div>
-    ),
-  }));
-
-  const onClick: MenuProps["onClick"] = ({ key }) => setMode(key);
+  const onClick: MenuProps["onClick"] = ({ key }) => {
+    if (key === CHAT) {
+      // Enabled: go to the chat app. Disabled (admin-only): send them to the
+      // admin panel where the enable_chat_ui toggle lives.
+      window.location.assign(migratedHref(chatEnabled ? CHAT : ADMIN_SETTINGS_KEY));
+      return;
+    }
+    setMode(key);
+  };
 
   return (
     <Dropdown menu={{ items, onClick, selectedKeys: [mode] }} trigger={["click"]}>

From 8723a1853622e794b39a9363531bc612606a7a6f Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrish+github@berri.ai>
Date: Thu, 2 Jul 2026 17:41:04 -0700
Subject: [PATCH 04/10] fix(ui): scope chat history localStorage key per
 authenticated user

Chat history was stored under a single global localStorage key, so
different users sharing a browser profile could see each other's
saved prompts, responses, and MCP event history.
---
 .../src/components/chat/ChatPage.tsx          |  2 +-
 .../components/chat/useChatHistory.test.ts    | 40 +++++++++++++++++++
 .../src/components/chat/useChatHistory.ts     | 29 +++++++++-----
 3 files changed, 60 insertions(+), 11 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/components/chat/useChatHistory.test.ts

diff --git a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
index b8ebd3e02b4e..6a3408923b6c 100644
--- a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
+++ b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
@@ -180,7 +180,7 @@ const ChatPage: React.FC<ChatPageProps> = ({ accessToken, userRole, userId, user
     truncateFromMessage,
     deleteConversation,
     renameConversation,
-  } = useChatHistory(activeConversationId);
+  } = useChatHistory(activeConversationId, userId);
 
   // Clean up the OAuth return param after it's been consumed
   useEffect(() => {
diff --git a/ui/litellm-dashboard/src/components/chat/useChatHistory.test.ts b/ui/litellm-dashboard/src/components/chat/useChatHistory.test.ts
new file mode 100644
index 000000000000..a26a9b0ae569
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/chat/useChatHistory.test.ts
@@ -0,0 +1,40 @@
+import { renderHook, act } from "@testing-library/react";
+import { describe, it, expect, beforeEach } from "vitest";
+import { useChatHistory } from "./useChatHistory";
+
+describe("useChatHistory", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it("does not leak conversations between different users on the same browser", () => {
+    const { result: alice } = renderHook(({ userId }) => useChatHistory(null, userId), {
+      initialProps: { userId: "alice" },
+    });
+    act(() => {
+      alice.current.createConversation("gpt-4");
+    });
+    expect(alice.current.conversations).toHaveLength(1);
+
+    const { result: bob } = renderHook(({ userId }) => useChatHistory(null, userId), {
+      initialProps: { userId: "bob" },
+    });
+    expect(bob.current.conversations).toHaveLength(0);
+  });
+
+  it("reloads conversations scoped to the new user when userId changes", () => {
+    const { result, rerender } = renderHook(({ userId }) => useChatHistory(null, userId), {
+      initialProps: { userId: "alice" },
+    });
+    act(() => {
+      result.current.createConversation("gpt-4");
+    });
+    expect(result.current.conversations).toHaveLength(1);
+
+    rerender({ userId: "bob" });
+    expect(result.current.conversations).toHaveLength(0);
+
+    rerender({ userId: "alice" });
+    expect(result.current.conversations).toHaveLength(1);
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/chat/useChatHistory.ts b/ui/litellm-dashboard/src/components/chat/useChatHistory.ts
index 274ae6a79c93..2d878bb42476 100644
--- a/ui/litellm-dashboard/src/components/chat/useChatHistory.ts
+++ b/ui/litellm-dashboard/src/components/chat/useChatHistory.ts
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { ChatMessage, Conversation } from "./types";
 
-const STORAGE_KEY = "litellm_chat_history_v1";
+const STORAGE_KEY_PREFIX = "litellm_chat_history_v1";
 const MAX_CONVERSATIONS = 100;
 const TITLE_MAX_LENGTH = 40;
 
@@ -13,9 +13,13 @@ function generateTitle(firstUserMessage: string): string {
   return trimmed.slice(0, TITLE_MAX_LENGTH) + "…";
 }
 
-function loadFromStorage(): { conversations: Conversation[]; storageUnavailable: boolean } {
+function storageKeyFor(userId: string): string {
+  return `${STORAGE_KEY_PREFIX}:${encodeURIComponent(userId)}`;
+}
+
+function loadFromStorage(storageKey: string): { conversations: Conversation[]; storageUnavailable: boolean } {
   try {
-    const raw = localStorage.getItem(STORAGE_KEY);
+    const raw = localStorage.getItem(storageKey);
     if (!raw) {
       return { conversations: [], storageUnavailable: false };
     }
@@ -26,9 +30,9 @@ function loadFromStorage(): { conversations: Conversation[]; storageUnavailable:
   }
 }
 
-function saveToStorage(conversations: Conversation[]): boolean {
+function saveToStorage(storageKey: string, conversations: Conversation[]): boolean {
   try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(conversations));
+    localStorage.setItem(storageKey, JSON.stringify(conversations));
     return true;
   } catch {
     return false;
@@ -42,7 +46,10 @@ function trimConversations(conversations: Conversation[]): Conversation[] {
   return [...conversations].sort((a, b) => b.updatedAt - a.updatedAt).slice(0, MAX_CONVERSATIONS);
 }
 
-export function useChatHistory(activeConversationId: string | null): {
+export function useChatHistory(
+  activeConversationId: string | null,
+  userId: string,
+): {
   conversations: Conversation[];
   activeConversation: Conversation | null;
   storageUnavailable: boolean;
@@ -74,7 +81,8 @@ export function useChatHistory(activeConversationId: string | null): {
   }, [activeConversationId]);
 
   useEffect(() => {
-    const { conversations: loaded, storageUnavailable: unavailable } = loadFromStorage();
+    initializedRef.current = false;
+    const { conversations: loaded, storageUnavailable: unavailable } = loadFromStorage(storageKeyFor(userId));
     storageUnavailableRef.current = unavailable;
     setConversations(loaded);
     setStorageUnavailable(unavailable);
@@ -86,18 +94,19 @@ export function useChatHistory(activeConversationId: string | null): {
         setStaleId(true);
       }
     }
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userId]);
 
   // Persist to localStorage after every conversations change (pure effect, no setState inside updaters)
   useEffect(() => {
     if (!initializedRef.current) return;
     if (storageUnavailableRef.current) return;
-    const success = saveToStorage(conversations);
+    const success = saveToStorage(storageKeyFor(userId), conversations);
     if (!success) {
       storageUnavailableRef.current = true;
       setStorageUnavailable(true);
     }
-  }, [conversations]);
+  }, [conversations, userId]);
 
   const createConversation = useCallback((model: string): string => {
     const id = crypto.randomUUID();

From dd9e47c9ca016711eabffe992170a8ef3c67e8ba Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrish+github@berri.ai>
Date: Thu, 2 Jul 2026 17:53:15 -0700
Subject: [PATCH 05/10] fix(ui): restore missing remark-gfm dependency dropped
 during merge

Merging origin/litellm_internal_staging into this branch silently
dropped the remark-gfm entry from package.json/package-lock.json,
breaking the production build since ChatMessages.tsx and ChatPage.tsx
import it directly.
---
 ui/litellm-dashboard/package-lock.json | 294 +++++++++++++++++++++++++
 ui/litellm-dashboard/package.json      |   1 +
 2 files changed, 295 insertions(+)

diff --git a/ui/litellm-dashboard/package-lock.json b/ui/litellm-dashboard/package-lock.json
index 828edde278b3..7bb3edea333f 100644
--- a/ui/litellm-dashboard/package-lock.json
+++ b/ui/litellm-dashboard/package-lock.json
@@ -32,6 +32,7 @@
         "react-json-view-lite": "2.5.0",
         "react-markdown": "9.1.0",
         "react-syntax-highlighter": "15.6.6",
+        "remark-gfm": "4.0.1",
         "tailwind-merge": "3.4.0",
         "uuid": "14.0.0"
       },
@@ -8601,6 +8602,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/markdown-table": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
+      "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -8610,6 +8621,34 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdast-util-find-and-replace": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
+      "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/mdast-util-from-markdown": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.3.tgz",
@@ -8634,6 +8673,107 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdast-util-gfm": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+      "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-gfm-autolink-literal": "^2.0.0",
+        "mdast-util-gfm-footnote": "^2.0.0",
+        "mdast-util-gfm-strikethrough": "^2.0.0",
+        "mdast-util-gfm-table": "^2.0.0",
+        "mdast-util-gfm-task-list-item": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-find-and-replace": "^3.0.0",
+        "micromark-util-character": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-mdx-expression": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
@@ -8848,6 +8988,127 @@
         "micromark-util-types": "^2.0.0"
       }
     },
+    "node_modules/micromark-extension-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^2.0.0",
+        "micromark-extension-gfm-footnote": "^2.0.0",
+        "micromark-extension-gfm-strikethrough": "^2.0.0",
+        "micromark-extension-gfm-table": "^2.0.0",
+        "micromark-extension-gfm-tagfilter": "^2.0.0",
+        "micromark-extension-gfm-task-list-item": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
+      "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/micromark-factory-destination": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
@@ -11441,6 +11702,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/remark-gfm": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-parse": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
@@ -11474,6 +11753,21 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-stringify": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
diff --git a/ui/litellm-dashboard/package.json b/ui/litellm-dashboard/package.json
index 0097e8c6559e..88aaec6c04ad 100644
--- a/ui/litellm-dashboard/package.json
+++ b/ui/litellm-dashboard/package.json
@@ -48,6 +48,7 @@
     "react-json-view-lite": "2.5.0",
     "react-markdown": "9.1.0",
     "react-syntax-highlighter": "15.6.6",
+    "remark-gfm": "4.0.1",
     "tailwind-merge": "3.4.0",
     "uuid": "14.0.0"
   },

From ad8b29808100c6d1de70081f203657fa19229194 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrish+github@berri.ai>
Date: Thu, 2 Jul 2026 18:10:25 -0700
Subject: [PATCH 06/10] fix(ui): address greptile and codex review findings in
 chat UI

- include uiRoot in the stale-ID redirect effect and handleSend deps
  so navigation respects a custom server_root_path once useUIConfig()
  resolves
- don't restore multi-model comparison mode when opening a saved
  conversation directly via URL
- navigate back to the empty chat URL when deleting the active
  conversation
- cap MCPAppsPanel's per-server listMCPTools fanout to 5 concurrent
  requests instead of firing one per registered server unbounded
---
 .../src/components/chat/ChatPage.tsx          | 11 +++--
 .../src/components/chat/MCPAppsPanel.tsx      | 42 +++++++++----------
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
index 6a3408923b6c..6a5c876bb166 100644
--- a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
+++ b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
@@ -132,6 +132,7 @@ const ChatPage: React.FC<ChatPageProps> = ({ accessToken, userRole, userId, user
   const router = useRouter();
   const searchParams = useSearchParams();
   const activeConversationId = searchParams.get("id");
+  const hadActiveConversationOnMountRef = useRef(activeConversationId !== null);
   const { data: uiConfig } = useUIConfig();
   const uiRoot =
     uiConfig?.server_root_path && uiConfig.server_root_path !== "/"
@@ -206,7 +207,7 @@ const ChatPage: React.FC<ChatPageProps> = ({ accessToken, userRole, userId, user
             if (Array.isArray(parsed)) {
               const valid = (parsed as string[]).filter((m) => names.includes(m));
               if (valid.length > 0) {
-                setSelectedModels(valid);
+                setSelectedModels(hadActiveConversationOnMountRef.current ? [valid[0]] : valid);
                 return;
               }
             }
@@ -225,7 +226,7 @@ const ChatPage: React.FC<ChatPageProps> = ({ accessToken, userRole, userId, user
 
   useEffect(() => {
     if (staleId) router.replace(getChatUrl(uiRoot));
-  }, [staleId, router]);
+  }, [staleId, router, uiRoot]);
 
   // Reset the responses session when switching between conversations so that
   // previous_response_id from conversation A is never sent for conversation B.
@@ -373,6 +374,7 @@ const ChatPage: React.FC<ChatPageProps> = ({ accessToken, userRole, userId, user
       router,
       isStreaming,
       responsesSessionId,
+      uiRoot,
     ],
   );
 
@@ -1044,7 +1046,10 @@ const ChatPage: React.FC<ChatPageProps> = ({ accessToken, userRole, userId, user
               conversations={conversations}
               activeConversationId={activeConversationId}
               onSelect={(id) => router.push(getChatUrl(uiRoot, id))}
-              onDelete={deleteConversation}
+              onDelete={(id) => {
+                deleteConversation(id);
+                if (id === activeConversationId) router.push(getChatUrl(uiRoot));
+              }}
               onNewChat={() => router.push(getChatUrl(uiRoot))}
               onRename={renameConversation}
             />
diff --git a/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx b/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx
index 880d408eb33e..be242bc110e8 100644
--- a/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx
+++ b/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx
@@ -103,6 +103,8 @@ function getAvatarColor(name: string): string {
 
 type TabKey = "all" | "connected";
 
+const TOOLS_FETCH_CONCURRENCY = 5;
+
 const MCPAppsPanel: React.FC<Props> = ({ accessToken, selectedServers, onChange }) => {
   const [servers, setServers] = useState<MCPServer[]>([]);
   const [loading, setLoading] = useState(true);
@@ -142,34 +144,32 @@ const MCPAppsPanel: React.FC<Props> = ({ accessToken, selectedServers, onChange
 
     // 1. Load servers first — show the list immediately
     fetchMCPServers(accessToken)
-      .then((serverData) => {
+      .then(async (serverData) => {
         if (cancelled) return;
         const list: MCPServer[] = Array.isArray(serverData) ? serverData : serverData?.data ?? [];
         setServers(list);
         setLoading(false);
 
-        // 2. Fetch tools per server in parallel — each resolves independently and updates counts one by one
+        // 2. Fetch tools per server, at most TOOLS_FETCH_CONCURRENCY at a time
         setLoadingCounts(true);
-        let remaining = list.length;
-        if (remaining === 0) {
-          setLoadingCounts(false);
-          return;
+        const chunks = Array.from({ length: Math.ceil(list.length / TOOLS_FETCH_CONCURRENCY) }, (_, i) =>
+          list.slice(i * TOOLS_FETCH_CONCURRENCY, (i + 1) * TOOLS_FETCH_CONCURRENCY),
+        );
+        for (const chunk of chunks) {
+          if (cancelled) return;
+          await Promise.allSettled(
+            chunk.map((s) =>
+              listMCPTools(accessToken, s.server_id)
+                .then((toolsData) => {
+                  if (cancelled) return;
+                  const tools: MCPTool[] = Array.isArray(toolsData?.tools) ? toolsData.tools : [];
+                  setToolCounts((prev) => ({ ...prev, [nameOf(s)]: tools.length }));
+                })
+                .catch(() => {}),
+            ),
+          );
         }
-        list.forEach((s) => {
-          listMCPTools(accessToken, s.server_id)
-            .then((toolsData) => {
-              if (cancelled) return;
-              const tools: MCPTool[] = Array.isArray(toolsData?.tools) ? toolsData.tools : [];
-              const sname = nameOf(s);
-              setToolCounts((prev) => ({ ...prev, [sname]: tools.length }));
-            })
-            .catch(() => {})
-            .finally(() => {
-              if (cancelled) return;
-              remaining -= 1;
-              if (remaining === 0) setLoadingCounts(false);
-            });
-        });
+        if (!cancelled) setLoadingCounts(false);
 
         // 3. Check OAuth credential status for OAuth2 servers in parallel
         const oauthServers = list.filter((s) => s.auth_type === AUTH_TYPE.OAUTH2);

From c2f678272f3f5c47ddefecfd0a2449b5505e3375 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrish+github@berri.ai>
Date: Thu, 2 Jul 2026 18:23:25 -0700
Subject: [PATCH 07/10] fix(ui): fix broken back-to-dashboard link in chat
 sidebar

getDashboardUrl built the link from NEXT_PUBLIC_BASE_URL, which is the
API proxy URL and empty in production, producing / instead of /ui/.
Point it at the dashboard's own /ui/ path instead.
---
 ui/litellm-dashboard/src/components/chat/ChatPage.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
index 6a5c876bb166..96a4813fb1f1 100644
--- a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
+++ b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
@@ -60,9 +60,7 @@ function getChatUrl(root: string, id?: string): string {
 
 // Build the dashboard root URL (e.g. /api/v1/ui/)
 function getDashboardUrl(root: string): string {
-  const base = process.env.NEXT_PUBLIC_BASE_URL ?? "";
-  const trimmed = base.replace(/^\/+|\/+$/g, "");
-  return trimmed ? `${root}/${trimmed}/` : `${root}/`;
+  return `${root}/ui/`;
 }
 
 // Extract provider from model name for logo lookup.

From 1e4c93ffefe2be5c3bce9f65eda1e892748aeee9 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrish+github@berri.ai>
Date: Thu, 2 Jul 2026 21:54:56 -0700
Subject: [PATCH 08/10] fix(ui): fix real lint violations in chat UI instead of
 grandfathering them

The chat feature files carried eslint-suppressions.json entries for
real violations (no-restricted-imports, react-hooks/set-state-in-effect,
react-hooks/refs, max-params, max-nested-callbacks) instead of fixing
them. Addresses each properly:

- ChatMessages.tsx: replace a ref read during render with real state
  for the reasoning-content remount key
- ChatPage.tsx: drop unused import, bundle streamToModel's and
  sidebarNavItem's params into option objects, replace two
  reset-state-on-prop-change effects with the react.dev-recommended
  during-render state adjustment
- ConversationList.tsx: same during-render adjustment for the search
  modal's query reset
- MCPAppsPanel.tsx: extract per-server tool-count/oauth-status fetches
  into named callbacks to cut nesting depth, drop a redundant
  setState-at-effect-start call, and move the detail-view tools fetch
  to react-query (matching the rest of the codebase) instead of a
  manual effect+state fetch
- MCPCredentialsTab.tsx: migrate off the deprecated @tremor/react table
  to antd's Table/Tag, and move credential fetching to react-query

Run  afterward, which drops all six
src/components/chat/* entries from eslint-suppressions.json now that
the underlying violations are gone.
---
 ui/litellm-dashboard/eslint-suppressions.json |  42 ------
 .../src/components/chat/ChatMessages.tsx      |  13 +-
 .../src/components/chat/ChatPage.tsx          | 102 ++++++++++-----
 .../src/components/chat/ConversationList.tsx  |   6 +-
 .../src/components/chat/MCPAppsPanel.tsx      | 102 +++++++--------
 .../src/components/chat/MCPCredentialsTab.tsx | 121 ++++++++----------
 .../src/components/chat/useChatHistory.ts     |  49 ++++---
 7 files changed, 206 insertions(+), 229 deletions(-)

diff --git a/ui/litellm-dashboard/eslint-suppressions.json b/ui/litellm-dashboard/eslint-suppressions.json
index 57f1d0e03fbb..54faee4d59e7 100644
--- a/ui/litellm-dashboard/eslint-suppressions.json
+++ b/ui/litellm-dashboard/eslint-suppressions.json
@@ -1071,48 +1071,6 @@
       "count": 1
     }
   },
-  "src/components/chat/ChatMessages.tsx": {
-    "react-hooks/refs": {
-      "count": 1
-    }
-  },
-  "src/components/chat/ChatPage.tsx": {
-    "max-params": {
-      "count": 2
-    },
-    "react-hooks/set-state-in-effect": {
-      "count": 2
-    },
-    "unused-imports/no-unused-imports": {
-      "count": 1
-    }
-  },
-  "src/components/chat/ConversationList.tsx": {
-    "react-hooks/set-state-in-effect": {
-      "count": 1
-    }
-  },
-  "src/components/chat/MCPAppsPanel.tsx": {
-    "max-nested-callbacks": {
-      "count": 2
-    },
-    "react-hooks/set-state-in-effect": {
-      "count": 2
-    }
-  },
-  "src/components/chat/MCPCredentialsTab.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "react-hooks/set-state-in-effect": {
-      "count": 1
-    }
-  },
-  "src/components/chat/useChatHistory.ts": {
-    "react-hooks/set-state-in-effect": {
-      "count": 3
-    }
-  },
   "src/components/claude_code_plugins.tsx": {
     "no-restricted-imports": {
       "count": 1
diff --git a/ui/litellm-dashboard/src/components/chat/ChatMessages.tsx b/ui/litellm-dashboard/src/components/chat/ChatMessages.tsx
index 53877be1737b..f29adcfb6a51 100644
--- a/ui/litellm-dashboard/src/components/chat/ChatMessages.tsx
+++ b/ui/litellm-dashboard/src/components/chat/ChatMessages.tsx
@@ -267,19 +267,14 @@ interface AssistantBubbleProps {
 }
 
 function AssistantBubble({ message, isLastMessage, isStreaming, isTypingIndicator, mcpEvents }: AssistantBubbleProps) {
-  // Ref to control ReasoningContent collapse on streaming end.
-  // ReasoningContent manages its own expanded state; we use a key to
+  // ReasoningContent manages its own expanded state; we bump this key to
   // remount it (collapsed by default) when streaming finishes.
-  const reasoningKeyRef = useRef<number>(0);
+  const [reasoningKey, setReasoningKey] = useState(0);
   const prevStreamingRef = useRef<boolean>(isStreaming);
 
   useEffect(() => {
     if (prevStreamingRef.current && !isStreaming) {
-      // Streaming just stopped — bump the key to remount ReasoningContent
-      // with isExpanded default (false won't work since it starts expanded).
-      // ReasoningContent always starts expanded on mount; we accept that
-      // behaviour and leave collapse-on-finish as a best-effort remount.
-      reasoningKeyRef.current += 1;
+      setReasoningKey((k) => k + 1);
     }
     prevStreamingRef.current = isStreaming;
   }, [isStreaming]);
@@ -312,7 +307,7 @@ function AssistantBubble({ message, isLastMessage, isStreaming, isTypingIndicato
         (showReasoningPlaceholder ? (
           <ThinkingPlaceholder />
         ) : (
-          <ReasoningContent key={reasoningKeyRef.current} reasoningContent={message.reasoningContent!} />
+          <ReasoningContent key={reasoningKey} reasoningContent={message.reasoningContent!} />
         ))}
 
       <div
diff --git a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
index 96a4813fb1f1..c229de5ec793 100644
--- a/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
+++ b/ui/litellm-dashboard/src/components/chat/ChatPage.tsx
@@ -15,7 +15,6 @@ import {
   KeyOutlined,
   ArrowLeftOutlined,
   DownOutlined,
-  CloseOutlined,
   CheckOutlined,
 } from "@ant-design/icons";
 import ReactMarkdown from "react-markdown";
@@ -88,16 +87,26 @@ interface ComparisonExchange {
   responses: Record<string, string>; // model → accumulated response text
 }
 
+interface StreamToModelArgs {
+  model: string;
+  messages: Array<{ role: "user" | "assistant"; content: string }>;
+  accessToken: string;
+  mcpServers: string[];
+  signal: AbortSignal;
+  onChunk: (model: string, chunk: string) => void;
+  onDone: (model: string) => void;
+}
+
 // Module-level async helper — each model gets its own independent Promise so they all run in parallel.
-async function streamToModel(
-  model: string,
-  messages: Array<{ role: "user" | "assistant"; content: string }>,
-  accessToken: string,
-  mcpServers: string[],
-  signal: AbortSignal,
-  onChunk: (model: string, chunk: string) => void,
-  onDone: (model: string) => void,
-): Promise<void> {
+async function streamToModel({
+  model,
+  messages,
+  accessToken,
+  mcpServers,
+  signal,
+  onChunk,
+  onDone,
+}: StreamToModelArgs): Promise<void> {
   try {
     await makeOpenAIChatCompletionRequest(
       messages,
@@ -146,6 +155,7 @@ const ChatPage: React.FC<ChatPageProps> = ({ accessToken, userRole, userId, user
 
   const [selectedMCPServers, setSelectedMCPServers] = useState<string[]>([]);
   const [responsesSessionId, setResponsesSessionId] = useState<string | null>(null);
+  const [prevConversationIdForSessionReset, setPrevConversationIdForSessionReset] = useState(activeConversationId);
   const [isStreaming, setIsStreaming] = useState(false);
   const [inputText, setInputText] = useState("");
   const [mcpPopoverOpen, setMcpPopoverOpen] = useState(false);
@@ -193,7 +203,6 @@ const ChatPage: React.FC<ChatPageProps> = ({ accessToken, userRole, userId, user
   // Load models
   useEffect(() => {
     if (!accessToken) return;
-    setIsLoadingModels(true);
     fetchAvailableModels(accessToken)
       .then((data) => {
         const names = (data || []).map((m: { model_group?: string }) => m.model_group ?? "").filter(Boolean);
@@ -228,9 +237,10 @@ const ChatPage: React.FC<ChatPageProps> = ({ accessToken, userRole, userId, user
 
   // Reset the responses session when switching between conversations so that
   // previous_response_id from conversation A is never sent for conversation B.
-  useEffect(() => {
+  if (activeConversationId !== prevConversationIdForSessionReset) {
+    setPrevConversationIdForSessionReset(activeConversationId);
     setResponsesSessionId(null);
-  }, [activeConversationId]);
+  }
 
   const toggleModel = useCallback((model: string) => {
     setSelectedModels((prev) => {
@@ -406,13 +416,13 @@ const ChatPage: React.FC<ChatPageProps> = ({ accessToken, userRole, userId, user
           }
           history.push({ role: "user", content: trimmed });
 
-          return streamToModel(
+          return streamToModel({
             model,
-            history,
+            messages: history,
             accessToken,
-            selectedMCPServers,
-            controllers[model].signal,
-            (m, chunk) =>
+            mcpServers: selectedMCPServers,
+            signal: controllers[model].signal,
+            onChunk: (m, chunk) =>
               setComparisonExchanges((prev) => {
                 const updated = [...prev];
                 const ex = { ...updated[newExchangeIdx] };
@@ -420,13 +430,13 @@ const ChatPage: React.FC<ChatPageProps> = ({ accessToken, userRole, userId, user
                 updated[newExchangeIdx] = ex;
                 return updated;
               }),
-            (m) =>
+            onDone: (m) =>
               setComparisonStreamingSet((prev) => {
                 const next = new Set(prev);
                 next.delete(m);
                 return next;
               }),
-          );
+          });
         }),
       );
     },
@@ -641,7 +651,19 @@ const ChatPage: React.FC<ChatPageProps> = ({ accessToken, userRole, userId, user
   );
 
   // ---- Sidebar nav item renderer ----
-  const sidebarNavItem = (icon: React.ReactNode, label: string, onClick: () => void, active = false, kbd?: string) => (
+  const sidebarNavItem = ({
+    icon,
+    label,
+    onClick,
+    active = false,
+    kbd,
+  }: {
+    icon: React.ReactNode;
+    label: string;
+    onClick: () => void;
+    active?: boolean;
+    kbd?: string;
+  }) => (
     <Tooltip title={sidebarCollapsed ? label : undefined} placement="right" key={label}>
       <button
         onClick={onClick}
@@ -990,22 +1012,40 @@ const ChatPage: React.FC<ChatPageProps> = ({ accessToken, userRole, userId, user
 
         {/* Sidebar nav buttons */}
         <div style={{ padding: "0 8px 4px", flexShrink: 0 }}>
-          {sidebarNavItem(<EditOutlined />, "New chat", () => router.push(getChatUrl(uiRoot)))}
-          {sidebarNavItem(<SearchOutlined />, "Search chats", () => setSidebarView("chats"))}
+          {sidebarNavItem({
+            icon: <EditOutlined />,
+            label: "New chat",
+            onClick: () => router.push(getChatUrl(uiRoot)),
+          })}
+          {sidebarNavItem({
+            icon: <SearchOutlined />,
+            label: "Search chats",
+            onClick: () => setSidebarView("chats"),
+          })}
         </div>
 
         <div style={{ height: 1, background: "#e5e7eb", margin: "4px 8px", flexShrink: 0 }} />
 
         {/* Chats / Apps tabs + Back to console */}
         <div style={{ padding: "4px 8px", flexShrink: 0 }}>
-          {sidebarNavItem(<MessageOutlined />, "Chats", () => setSidebarView("chats"), sidebarView === "chats")}
-          {sidebarNavItem(<AppstoreOutlined />, "Apps", () => setSidebarView("apps"), sidebarView === "apps")}
-          {sidebarNavItem(
-            <KeyOutlined />,
-            "Credentials",
-            () => setSidebarView("credentials"),
-            sidebarView === "credentials",
-          )}
+          {sidebarNavItem({
+            icon: <MessageOutlined />,
+            label: "Chats",
+            onClick: () => setSidebarView("chats"),
+            active: sidebarView === "chats",
+          })}
+          {sidebarNavItem({
+            icon: <AppstoreOutlined />,
+            label: "Apps",
+            onClick: () => setSidebarView("apps"),
+            active: sidebarView === "apps",
+          })}
+          {sidebarNavItem({
+            icon: <KeyOutlined />,
+            label: "Credentials",
+            onClick: () => setSidebarView("credentials"),
+            active: sidebarView === "credentials",
+          })}
           <Tooltip title={sidebarCollapsed ? "Back to Developer Console UI" : undefined} placement="right">
             <a
               href={dashboardUrl}
diff --git a/ui/litellm-dashboard/src/components/chat/ConversationList.tsx b/ui/litellm-dashboard/src/components/chat/ConversationList.tsx
index f75ee8fa40ad..7501c19002d2 100644
--- a/ui/litellm-dashboard/src/components/chat/ConversationList.tsx
+++ b/ui/litellm-dashboard/src/components/chat/ConversationList.tsx
@@ -225,10 +225,12 @@ interface SearchModalProps {
 
 const SearchModal: React.FC<SearchModalProps> = ({ open, conversations, onSelect, onClose }) => {
   const [query, setQuery] = useState("");
+  const [wasOpen, setWasOpen] = useState(open);
 
-  useEffect(() => {
+  if (open !== wasOpen) {
+    setWasOpen(open);
     if (!open) setQuery("");
-  }, [open]);
+  }
 
   const filtered = query.trim()
     ? conversations.filter((c) => c.title.toLowerCase().includes(query.trim().toLowerCase()))
diff --git a/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx b/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx
index be242bc110e8..2e2baee01eb3 100644
--- a/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx
+++ b/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { Spin, Input, Button, Skeleton } from "antd";
 import { SearchOutlined, ArrowLeftOutlined, RightOutlined, ToolOutlined, CheckCircleOutlined } from "@ant-design/icons";
 import {
@@ -112,8 +113,6 @@ const MCPAppsPanel: React.FC<Props> = ({ accessToken, selectedServers, onChange
   const [activeTab, setActiveTab] = useState<TabKey>("all");
   const [togglingOn, setTogglingOn] = useState<Set<string>>(new Set());
   const [detailServer, setDetailServer] = useState<MCPServer | null>(null);
-  const [detailTools, setDetailTools] = useState<MCPTool[]>([]);
-  const [loadingTools, setLoadingTools] = useState(false);
   // tool counts per server name, preloaded in background
   const [toolCounts, setToolCounts] = useState<Record<string, number>>({});
   const [loadingCounts, setLoadingCounts] = useState(false);
@@ -138,14 +137,44 @@ const MCPAppsPanel: React.FC<Props> = ({ accessToken, selectedServers, onChange
 
   const nameOf = (s: MCPServer) => s.server_name ?? s.alias ?? s.server_id;
 
+  const fetchLoadCancelledRef = useRef(false);
+
+  const fetchToolCount = useCallback(
+    async (server: MCPServer) => {
+      try {
+        const toolsData = await listMCPTools(accessToken, server.server_id);
+        if (fetchLoadCancelledRef.current) return;
+        const tools: MCPTool[] = Array.isArray(toolsData?.tools) ? toolsData.tools : [];
+        setToolCounts((prev) => ({ ...prev, [nameOf(server)]: tools.length }));
+      } catch {
+        // ignore — this server's tool count just stays unset
+      }
+    },
+    [accessToken],
+  );
+
+  const checkOauthCredential = useCallback(
+    async (server: MCPServer) => {
+      try {
+        const status = await getMCPOAuthUserCredentialStatus(accessToken, server.server_id);
+        if (fetchLoadCancelledRef.current) return;
+        if (status.has_credential && !status.is_expired) {
+          setOauthConnected((prev) => new Set(prev).add(server.server_id));
+        }
+      } catch {
+        // ignore — server just shows as not connected
+      }
+    },
+    [accessToken],
+  );
+
   useEffect(() => {
-    let cancelled = false;
-    setLoading(true);
+    fetchLoadCancelledRef.current = false;
 
     // 1. Load servers first — show the list immediately
     fetchMCPServers(accessToken)
       .then(async (serverData) => {
-        if (cancelled) return;
+        if (fetchLoadCancelledRef.current) return;
         const list: MCPServer[] = Array.isArray(serverData) ? serverData : serverData?.data ?? [];
         setServers(list);
         setLoading(false);
@@ -156,44 +185,25 @@ const MCPAppsPanel: React.FC<Props> = ({ accessToken, selectedServers, onChange
           list.slice(i * TOOLS_FETCH_CONCURRENCY, (i + 1) * TOOLS_FETCH_CONCURRENCY),
         );
         for (const chunk of chunks) {
-          if (cancelled) return;
-          await Promise.allSettled(
-            chunk.map((s) =>
-              listMCPTools(accessToken, s.server_id)
-                .then((toolsData) => {
-                  if (cancelled) return;
-                  const tools: MCPTool[] = Array.isArray(toolsData?.tools) ? toolsData.tools : [];
-                  setToolCounts((prev) => ({ ...prev, [nameOf(s)]: tools.length }));
-                })
-                .catch(() => {}),
-            ),
-          );
+          if (fetchLoadCancelledRef.current) return;
+          await Promise.allSettled(chunk.map((s) => fetchToolCount(s)));
         }
-        if (!cancelled) setLoadingCounts(false);
+        if (!fetchLoadCancelledRef.current) setLoadingCounts(false);
 
         // 3. Check OAuth credential status for OAuth2 servers in parallel
         const oauthServers = list.filter((s) => s.auth_type === AUTH_TYPE.OAUTH2);
-        oauthServers.forEach((s) => {
-          getMCPOAuthUserCredentialStatus(accessToken, s.server_id)
-            .then((status) => {
-              if (cancelled) return;
-              if (status.has_credential && !status.is_expired) {
-                setOauthConnected((prev) => new Set(prev).add(s.server_id));
-              }
-            })
-            .catch(() => {});
-        });
+        oauthServers.forEach((s) => checkOauthCredential(s));
       })
       .catch(() => {
-        if (!cancelled) {
+        if (!fetchLoadCancelledRef.current) {
           setServers([]);
           setLoading(false);
         }
       });
     return () => {
-      cancelled = true;
+      fetchLoadCancelledRef.current = true;
     };
-  }, [accessToken]);
+  }, [accessToken, fetchToolCount, checkOauthCredential]);
 
   // Auto-enable oauth2 servers for the current chat session when a valid
   // credential is detected (either on mount or after a fresh OAuth sign-in).
@@ -248,30 +258,12 @@ const MCPAppsPanel: React.FC<Props> = ({ accessToken, selectedServers, onChange
   };
 
   // Fetch tools for the detail view — server_id must be the UUID
-  useEffect(() => {
-    if (!detailServer) {
-      setDetailTools([]);
-      return;
-    }
-    let cancelled = false;
-    setLoadingTools(true);
-    listMCPTools(accessToken, detailServer.server_id)
-      .then((result) => {
-        if (cancelled) return;
-        // API returns { tools: [...], error: null }
-        const tools: MCPTool[] = Array.isArray(result?.tools) ? result.tools : [];
-        setDetailTools(tools);
-      })
-      .catch(() => {
-        if (!cancelled) setDetailTools([]);
-      })
-      .finally(() => {
-        if (!cancelled) setLoadingTools(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [detailServer, accessToken]);
+  const { data: detailToolsResult, isLoading: loadingTools } = useQuery({
+    queryKey: ["mcp-apps-panel-detail-tools", detailServer?.server_id],
+    queryFn: () => listMCPTools(accessToken, detailServer!.server_id),
+    enabled: !!detailServer,
+  });
+  const detailTools: MCPTool[] = Array.isArray(detailToolsResult?.tools) ? detailToolsResult.tools : [];
 
   const filtered = servers.filter((s) => {
     const name = nameOf(s);
diff --git a/ui/litellm-dashboard/src/components/chat/MCPCredentialsTab.tsx b/ui/litellm-dashboard/src/components/chat/MCPCredentialsTab.tsx
index 4a8a3785f299..3f5d4714d103 100644
--- a/ui/litellm-dashboard/src/components/chat/MCPCredentialsTab.tsx
+++ b/ui/litellm-dashboard/src/components/chat/MCPCredentialsTab.tsx
@@ -7,13 +7,16 @@
  * Lives in the Chat sidebar's "Credentials" tab.
  */
 
-import React, { useCallback, useEffect, useState } from "react";
-import { Spin } from "antd";
+import React, { useState } from "react";
+import { Spin, Table, Tag } from "antd";
+import type { ColumnsType } from "antd/es/table";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import MessageManager from "@/components/molecules/message_manager";
 import { DeleteOutlined, LinkOutlined } from "@ant-design/icons";
-import { Badge, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from "@tremor/react";
 import { deleteMCPOAuthUserCredential, listMCPUserCredentials, MCPUserCredentialListItem } from "../networking";
 
+const MCP_CREDENTIALS_QUERY_KEY = "mcp-user-credentials";
+
 interface Props {
   accessToken: string;
 }
@@ -54,27 +57,22 @@ function expiryLabel(isoString: string | null | undefined): string {
 }
 
 const MCPCredentialsTab: React.FC<Props> = ({ accessToken }) => {
-  const [credentials, setCredentials] = useState<MCPUserCredentialListItem[]>([]);
-  const [loading, setLoading] = useState(true);
+  const queryClient = useQueryClient();
   const [revoking, setRevoking] = useState<Set<string>>(new Set());
 
-  const load = useCallback(() => {
-    setLoading(true);
-    listMCPUserCredentials(accessToken)
-      .then(setCredentials)
-      .catch(() => setCredentials([]))
-      .finally(() => setLoading(false));
-  }, [accessToken]);
-
-  useEffect(() => {
-    load();
-  }, [load]);
+  const { data: credentials = [], isLoading: loading } = useQuery({
+    queryKey: [MCP_CREDENTIALS_QUERY_KEY, accessToken],
+    queryFn: () => listMCPUserCredentials(accessToken),
+    enabled: !!accessToken,
+  });
 
   const handleRevoke = async (serverId: string) => {
     setRevoking((prev) => new Set(prev).add(serverId));
     try {
       await deleteMCPOAuthUserCredential(accessToken, serverId);
-      setCredentials((prev) => prev.filter((c) => c.server_id !== serverId));
+      queryClient.setQueryData<MCPUserCredentialListItem[]>([MCP_CREDENTIALS_QUERY_KEY, accessToken], (prev) =>
+        (prev ?? []).filter((c) => c.server_id !== serverId),
+      );
     } catch {
       MessageManager.error("Failed to revoke connection. Please try again.");
     } finally {
@@ -88,6 +86,46 @@ const MCPCredentialsTab: React.FC<Props> = ({ accessToken }) => {
 
   const displayName = (c: MCPUserCredentialListItem) => c.alias || c.server_name || c.server_id;
 
+  const columns: ColumnsType<MCPUserCredentialListItem> = [
+    {
+      title: "App",
+      key: "app",
+      render: (_, cred) => <span className="text-sm font-medium text-gray-900">{displayName(cred)}</span>,
+    },
+    {
+      title: "Connected",
+      key: "connected",
+      render: (_, cred) => <span className="text-sm text-gray-500">{relativeTime(cred.connected_at) || "—"}</span>,
+    },
+    {
+      title: "Status",
+      key: "status",
+      render: (_, cred) => {
+        const exp = expiryLabel(cred.expires_at);
+        return <Tag color={exp === "Expired" ? "red" : "green"}>{exp}</Tag>;
+      },
+    },
+    {
+      title: "Actions",
+      key: "actions",
+      align: "right",
+      render: (_, cred) => {
+        const isRevoking = revoking.has(cred.server_id);
+        return (
+          <button
+            onClick={() => handleRevoke(cred.server_id)}
+            disabled={isRevoking}
+            title="Revoke connection"
+            className={`inline-flex items-center justify-center rounded-md border border-gray-200 px-2 py-1 text-gray-400 hover:text-red-500 hover:border-red-200 transition-colors ${isRevoking ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`}
+            style={{ background: "none" }}
+          >
+            {isRevoking ? <Spin size="small" /> : <DeleteOutlined className="text-sm" />}
+          </button>
+        );
+      },
+    },
+  ];
+
   return (
     <div className="w-full">
       {/* Header */}
@@ -109,54 +147,7 @@ const MCPCredentialsTab: React.FC<Props> = ({ accessToken }) => {
         </div>
       ) : (
         <div className="rounded-lg border border-gray-200 overflow-hidden">
-          <Table>
-            <TableHead>
-              <TableRow>
-                <TableHeaderCell className="text-xs font-medium text-gray-500 py-2 px-4">App</TableHeaderCell>
-                <TableHeaderCell className="text-xs font-medium text-gray-500 py-2 px-4">Connected</TableHeaderCell>
-                <TableHeaderCell className="text-xs font-medium text-gray-500 py-2 px-4">Status</TableHeaderCell>
-                <TableHeaderCell className="text-xs font-medium text-gray-500 py-2 px-4 text-right">
-                  Actions
-                </TableHeaderCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {credentials.map((cred) => {
-                const name = displayName(cred);
-                const isRevoking = revoking.has(cred.server_id);
-                const exp = expiryLabel(cred.expires_at);
-                const connected = relativeTime(cred.connected_at);
-                const isExpired = exp === "Expired";
-
-                return (
-                  <TableRow key={cred.server_id} className="h-10 hover:bg-gray-50">
-                    <TableCell className="py-2 px-4">
-                      <span className="text-sm font-medium text-gray-900">{name}</span>
-                    </TableCell>
-                    <TableCell className="py-2 px-4">
-                      <span className="text-sm text-gray-500">{connected || "—"}</span>
-                    </TableCell>
-                    <TableCell className="py-2 px-4">
-                      <Badge color={isExpired ? "red" : "green"} size="xs">
-                        {exp}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="py-2 px-4 text-right">
-                      <button
-                        onClick={() => handleRevoke(cred.server_id)}
-                        disabled={isRevoking}
-                        title="Revoke connection"
-                        className={`inline-flex items-center justify-center rounded-md border border-gray-200 px-2 py-1 text-gray-400 hover:text-red-500 hover:border-red-200 transition-colors ${isRevoking ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`}
-                        style={{ background: "none" }}
-                      >
-                        {isRevoking ? <Spin size="small" /> : <DeleteOutlined className="text-sm" />}
-                      </button>
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
+          <Table columns={columns} dataSource={credentials} rowKey="server_id" pagination={false} size="small" />
         </div>
       )}
     </div>
diff --git a/ui/litellm-dashboard/src/components/chat/useChatHistory.ts b/ui/litellm-dashboard/src/components/chat/useChatHistory.ts
index 2d878bb42476..3b6d350520b7 100644
--- a/ui/litellm-dashboard/src/components/chat/useChatHistory.ts
+++ b/ui/litellm-dashboard/src/components/chat/useChatHistory.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { ChatMessage, Conversation } from "./types";
 
 const STORAGE_KEY_PREFIX = "litellm_chat_history_v1";
@@ -66,47 +66,46 @@ export function useChatHistory(
   renameConversation: (id: string, newTitle: string) => void;
   setActiveConversationId: (id: string | null) => void;
 } {
-  const [conversations, setConversations] = useState<Conversation[]>([]);
-  const [storageUnavailable, setStorageUnavailable] = useState(false);
+  const [conversations, setConversations] = useState<Conversation[]>(
+    () => loadFromStorage(storageKeyFor(userId)).conversations,
+  );
+  const [storageUnavailable, setStorageUnavailable] = useState<boolean>(
+    () => loadFromStorage(storageKeyFor(userId)).storageUnavailable,
+  );
   const [staleId, setStaleId] = useState(false);
   const [currentActiveId, setCurrentActiveId] = useState<string | null>(activeConversationId);
-  // Ref so updater functions stay pure (no state setter calls inside setConversations)
-  const storageUnavailableRef = useRef(false);
-  const initializedRef = useRef(false);
 
   // Sync internal active id whenever the URL-derived prop changes (e.g. "New chat" → null)
-  useEffect(() => {
+  const [prevActiveConversationId, setPrevActiveConversationId] = useState(activeConversationId);
+  if (activeConversationId !== prevActiveConversationId) {
+    setPrevActiveConversationId(activeConversationId);
     setCurrentActiveId(activeConversationId);
     setStaleId(false);
-  }, [activeConversationId]);
+  }
 
-  useEffect(() => {
-    initializedRef.current = false;
+  // Reload conversations from storage whenever userId changes (e.g. auth resolving after mount)
+  const [prevUserId, setPrevUserId] = useState(userId);
+  if (userId !== prevUserId) {
+    setPrevUserId(userId);
     const { conversations: loaded, storageUnavailable: unavailable } = loadFromStorage(storageKeyFor(userId));
-    storageUnavailableRef.current = unavailable;
     setConversations(loaded);
     setStorageUnavailable(unavailable);
-    initializedRef.current = true;
 
-    if (activeConversationId !== null) {
-      const found = loaded.some((c) => c.id === activeConversationId);
-      if (!found) {
-        setStaleId(true);
-      }
+    if (activeConversationId !== null && !loaded.some((c) => c.id === activeConversationId)) {
+      setStaleId(true);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userId]);
+  }
 
-  // Persist to localStorage after every conversations change (pure effect, no setState inside updaters)
+  // Persist to localStorage after every conversations change
   useEffect(() => {
-    if (!initializedRef.current) return;
-    if (storageUnavailableRef.current) return;
+    if (storageUnavailable) return;
     const success = saveToStorage(storageKeyFor(userId), conversations);
     if (!success) {
-      storageUnavailableRef.current = true;
-      setStorageUnavailable(true);
+      // Defer: a setState call directly in an effect body causes a synchronous
+      // cascading render; queuing it as a microtask callback avoids that.
+      queueMicrotask(() => setStorageUnavailable(true));
     }
-  }, [conversations, userId]);
+  }, [conversations, userId, storageUnavailable]);
 
   const createConversation = useCallback((model: string): string => {
     const id = crypto.randomUUID();

From 34d4437b0f2c2f45c8b23745406e2e03cd2f7bb7 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrish+github@berri.ai>
Date: Fri, 3 Jul 2026 11:38:15 -0700
Subject: [PATCH 09/10] fix(ui): enforce enable_chat_ui at the /ui/chat route,
 not just in navigation

The enable_chat_ui setting only hid the Chat entry in the sidebar and
ViewSwitcher; an authenticated user could still open /ui/chat directly
while the setting was disabled. Redirect non-admins to the dashboard
when it's off, matching the same admin-can-discover-it exception the
nav nav already uses.
---
 .../src/app/chat/page.test.tsx                | 83 +++++++++++++++++++
 ui/litellm-dashboard/src/app/chat/page.tsx    | 26 +++++-
 2 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 ui/litellm-dashboard/src/app/chat/page.test.tsx

diff --git a/ui/litellm-dashboard/src/app/chat/page.test.tsx b/ui/litellm-dashboard/src/app/chat/page.test.tsx
new file mode 100644
index 000000000000..7aeff1ca3616
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/chat/page.test.tsx
@@ -0,0 +1,83 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import ChatPageRoute from "./page";
+
+const { mockUseAuthorized, mockUseUISettings, mockUseUIConfig, mockReplace, state } = vi.hoisted(() => {
+  const state = {
+    userRole: "Internal User" as string,
+    enableChatUI: false,
+    isUISettingsLoading: false,
+    serverRootPath: undefined as string | undefined,
+  };
+  return {
+    state,
+    mockReplace: vi.fn(),
+    mockUseAuthorized: vi.fn(() => ({
+      accessToken: "token-123",
+      userRole: state.userRole,
+      userId: "user-1",
+      userEmail: "user@example.com",
+    })),
+    mockUseUISettings: vi.fn(() => ({
+      data: { values: { enable_chat_ui: state.enableChatUI } },
+      isLoading: state.isUISettingsLoading,
+    })),
+    mockUseUIConfig: vi.fn(() => ({ data: { server_root_path: state.serverRootPath } })),
+  };
+});
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ replace: mockReplace }),
+}));
+vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({ default: mockUseAuthorized }));
+vi.mock("@/app/(dashboard)/hooks/uiSettings/useUISettings", () => ({ useUISettings: mockUseUISettings }));
+vi.mock("@/app/(dashboard)/hooks/uiConfig/useUIConfig", () => ({ useUIConfig: mockUseUIConfig }));
+vi.mock("@/components/chat/ChatPage", () => ({ default: () => <div data-testid="chat-page" /> }));
+
+describe("ChatPageRoute", () => {
+  afterEach(() => {
+    state.userRole = "Internal User";
+    state.enableChatUI = false;
+    state.isUISettingsLoading = false;
+    state.serverRootPath = undefined;
+    mockReplace.mockClear();
+  });
+
+  it("renders the chat page when enable_chat_ui is on", () => {
+    state.enableChatUI = true;
+    render(<ChatPageRoute />);
+    expect(screen.getByTestId("chat-page")).toBeInTheDocument();
+    expect(mockReplace).not.toHaveBeenCalled();
+  });
+
+  it("redirects non-admins to the dashboard when enable_chat_ui is off", () => {
+    state.enableChatUI = false;
+    state.userRole = "Internal User";
+    render(<ChatPageRoute />);
+    expect(screen.queryByTestId("chat-page")).not.toBeInTheDocument();
+    expect(mockReplace).toHaveBeenCalledWith("/ui/");
+  });
+
+  it("still renders the chat page for admins when enable_chat_ui is off", () => {
+    state.enableChatUI = false;
+    state.userRole = "Admin";
+    render(<ChatPageRoute />);
+    expect(screen.getByTestId("chat-page")).toBeInTheDocument();
+    expect(mockReplace).not.toHaveBeenCalled();
+  });
+
+  it("renders nothing while UI settings are still loading", () => {
+    state.isUISettingsLoading = true;
+    render(<ChatPageRoute />);
+    expect(screen.queryByTestId("chat-page")).not.toBeInTheDocument();
+    expect(mockReplace).not.toHaveBeenCalled();
+  });
+
+  it("respects a custom server_root_path when redirecting", () => {
+    state.enableChatUI = false;
+    state.userRole = "Internal User";
+    state.serverRootPath = "/api/v1";
+    render(<ChatPageRoute />);
+    expect(mockReplace).toHaveBeenCalledWith("/api/v1/ui/");
+  });
+});
diff --git a/ui/litellm-dashboard/src/app/chat/page.tsx b/ui/litellm-dashboard/src/app/chat/page.tsx
index 5046f1628778..51a6985bd956 100644
--- a/ui/litellm-dashboard/src/app/chat/page.tsx
+++ b/ui/litellm-dashboard/src/app/chat/page.tsx
@@ -1,12 +1,36 @@
 "use client";
 
-import { Suspense } from "react";
+import { Suspense, useEffect } from "react";
+import { useRouter } from "next/navigation";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import { useUIConfig } from "@/app/(dashboard)/hooks/uiConfig/useUIConfig";
+import { useUISettings } from "@/app/(dashboard)/hooks/uiSettings/useUISettings";
+import { isAdminRole } from "@/utils/roles";
 import ChatPage from "@/components/chat/ChatPage";
 
 // ChatPage uses useSearchParams() which requires a Suspense boundary for static export.
 const ChatPageContent = () => {
   const { accessToken, userRole, userId, userEmail } = useAuthorized();
+  const { data: uiSettings, isLoading: isUISettingsLoading } = useUISettings();
+  const { data: uiConfig } = useUIConfig();
+  const router = useRouter();
+
+  const uiRoot =
+    uiConfig?.server_root_path && uiConfig.server_root_path !== "/"
+      ? uiConfig.server_root_path.replace(/\/+$/, "")
+      : "";
+  const chatEnabled = Boolean(uiSettings?.values?.enable_chat_ui);
+  const isAdmin = isAdminRole(userRole ?? "");
+  // Admins can reach the page even when disabled, to discover and turn it on
+  // (matches the ViewSwitcher/leftnav nav-visibility rule); everyone else is
+  // redirected, since enable_chat_ui is otherwise only enforced in navigation.
+  const blocked = !isUISettingsLoading && !chatEnabled && !isAdmin;
+
+  useEffect(() => {
+    if (blocked) router.replace(`${uiRoot}/ui/`);
+  }, [blocked, uiRoot, router]);
+
+  if (isUISettingsLoading || blocked) return null;
 
   return (
     <ChatPage

From 2dbd6ddabb16ba56c900467dd29d748d39828bfe Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@berri.ai>
Date: Fri, 3 Jul 2026 19:15:31 +0000
Subject: [PATCH 10/10] fix(ui): block all users from chat route when
 enable_chat_ui is off

Remove the admin bypass that let admins access /ui/chat when
enable_chat_ui was disabled. When the setting is off, nobody can
reach the route or see the Chat entry in the ViewSwitcher, regardless
of role

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../src/app/chat/page.test.tsx                |  6 ++--
 ui/litellm-dashboard/src/app/chat/page.tsx    |  7 +----
 .../components/Navbar/ViewSwitcher.test.tsx   | 28 ++-----------------
 .../src/components/Navbar/ViewSwitcher.tsx    | 24 +++-------------
 4 files changed, 10 insertions(+), 55 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/chat/page.test.tsx b/ui/litellm-dashboard/src/app/chat/page.test.tsx
index 7aeff1ca3616..658142d47a6d 100644
--- a/ui/litellm-dashboard/src/app/chat/page.test.tsx
+++ b/ui/litellm-dashboard/src/app/chat/page.test.tsx
@@ -58,12 +58,12 @@ describe("ChatPageRoute", () => {
     expect(mockReplace).toHaveBeenCalledWith("/ui/");
   });
 
-  it("still renders the chat page for admins when enable_chat_ui is off", () => {
+  it("redirects admins to the dashboard when enable_chat_ui is off", () => {
     state.enableChatUI = false;
     state.userRole = "Admin";
     render(<ChatPageRoute />);
-    expect(screen.getByTestId("chat-page")).toBeInTheDocument();
-    expect(mockReplace).not.toHaveBeenCalled();
+    expect(screen.queryByTestId("chat-page")).not.toBeInTheDocument();
+    expect(mockReplace).toHaveBeenCalledWith("/ui/");
   });
 
   it("renders nothing while UI settings are still loading", () => {
diff --git a/ui/litellm-dashboard/src/app/chat/page.tsx b/ui/litellm-dashboard/src/app/chat/page.tsx
index 51a6985bd956..f1053bec78da 100644
--- a/ui/litellm-dashboard/src/app/chat/page.tsx
+++ b/ui/litellm-dashboard/src/app/chat/page.tsx
@@ -5,7 +5,6 @@ import { useRouter } from "next/navigation";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { useUIConfig } from "@/app/(dashboard)/hooks/uiConfig/useUIConfig";
 import { useUISettings } from "@/app/(dashboard)/hooks/uiSettings/useUISettings";
-import { isAdminRole } from "@/utils/roles";
 import ChatPage from "@/components/chat/ChatPage";
 
 // ChatPage uses useSearchParams() which requires a Suspense boundary for static export.
@@ -20,11 +19,7 @@ const ChatPageContent = () => {
       ? uiConfig.server_root_path.replace(/\/+$/, "")
       : "";
   const chatEnabled = Boolean(uiSettings?.values?.enable_chat_ui);
-  const isAdmin = isAdminRole(userRole ?? "");
-  // Admins can reach the page even when disabled, to discover and turn it on
-  // (matches the ViewSwitcher/leftnav nav-visibility rule); everyone else is
-  // redirected, since enable_chat_ui is otherwise only enforced in navigation.
-  const blocked = !isUISettingsLoading && !chatEnabled && !isAdmin;
+  const blocked = !isUISettingsLoading && !chatEnabled;
 
   useEffect(() => {
     if (blocked) router.replace(`${uiRoot}/ui/`);
diff --git a/ui/litellm-dashboard/src/components/Navbar/ViewSwitcher.test.tsx b/ui/litellm-dashboard/src/components/Navbar/ViewSwitcher.test.tsx
index e17e045489b5..a13af8b2bef4 100644
--- a/ui/litellm-dashboard/src/components/Navbar/ViewSwitcher.test.tsx
+++ b/ui/litellm-dashboard/src/components/Navbar/ViewSwitcher.test.tsx
@@ -2,14 +2,13 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import ViewSwitcher from "./ViewSwitcher";
 
-const { mockUsePluginMode, mockUseUISettings, mockUseAuthorized, state } = vi.hoisted(() => {
+const { mockUsePluginMode, mockUseUISettings, state } = vi.hoisted(() => {
   const state = {
     mode: "ai-gateway" as string,
     setMode: vi.fn(),
     plugins: [] as { name: string; display_name: string; url: string }[],
     activePlugin: null as { name: string; display_name: string; url: string } | null,
     enableChatUI: false,
-    userRole: "Internal User" as string,
   };
   return {
     state,
@@ -20,13 +19,11 @@ const { mockUsePluginMode, mockUseUISettings, mockUseAuthorized, state } = vi.ho
       activePlugin: state.activePlugin,
     })),
     mockUseUISettings: vi.fn(() => ({ data: { values: { enable_chat_ui: state.enableChatUI } } })),
-    mockUseAuthorized: vi.fn(() => ({ userRole: state.userRole })),
   };
 });
 
 vi.mock("@/contexts/PluginModeContext", () => ({ usePluginMode: mockUsePluginMode }));
 vi.mock("@/app/(dashboard)/hooks/uiSettings/useUISettings", () => ({ useUISettings: mockUseUISettings }));
-vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({ default: mockUseAuthorized }));
 // Deterministic hrefs so navigation assertions don't depend on server_root_path.
 vi.mock("@/utils/migratedPages", () => ({ migratedHref: (seg: string) => `/ui/${seg}` }));
 
@@ -45,7 +42,6 @@ describe("ViewSwitcher", () => {
     state.mode = "ai-gateway";
     state.plugins = [];
     state.enableChatUI = false;
-    state.userRole = "Internal User";
     state.setMode.mockClear();
   });
 
@@ -89,7 +85,6 @@ describe("ViewSwitcher", () => {
 
   it("shows a clickable Chat entry that navigates to the chat app when enabled", async () => {
     state.enableChatUI = true;
-    state.userRole = "Internal User";
     render(<ViewSwitcher />);
 
     act(() => {
@@ -105,27 +100,8 @@ describe("ViewSwitcher", () => {
     expect(state.setMode).not.toHaveBeenCalled();
   });
 
-  it("greys out Chat and points admins to Admin Settings when disabled", async () => {
+  it("hides the Chat entry from everyone when disabled", async () => {
     state.enableChatUI = false;
-    state.userRole = "Admin";
-    render(<ViewSwitcher />);
-
-    act(() => {
-      fireEvent.click(screen.getByRole("button"));
-    });
-    await waitFor(() => expect(screen.getByText("Chat")).toBeInTheDocument());
-    expect(screen.getByText(/Enable in Admin Settings/i)).toBeInTheDocument();
-
-    act(() => {
-      fireEvent.click(screen.getByText("Chat"));
-    });
-    expect(assignSpy).toHaveBeenCalledWith("/ui/admin-panel");
-    expect(state.setMode).not.toHaveBeenCalled();
-  });
-
-  it("hides the Chat entry from non-admins when disabled", async () => {
-    state.enableChatUI = false;
-    state.userRole = "Internal User";
     state.plugins = [{ name: "obs", display_name: "Observability", url: "http://localhost:9000" }];
     render(<ViewSwitcher />);
 
diff --git a/ui/litellm-dashboard/src/components/Navbar/ViewSwitcher.tsx b/ui/litellm-dashboard/src/components/Navbar/ViewSwitcher.tsx
index 21898c26a3d7..a64b00f885c3 100644
--- a/ui/litellm-dashboard/src/components/Navbar/ViewSwitcher.tsx
+++ b/ui/litellm-dashboard/src/components/Navbar/ViewSwitcher.tsx
@@ -4,27 +4,18 @@ import { AppstoreOutlined, CheckOutlined, DownOutlined } from "@ant-design/icons
 import type { MenuProps } from "antd";
 import { usePluginMode } from "@/contexts/PluginModeContext";
 import { useUISettings } from "@/app/(dashboard)/hooks/uiSettings/useUISettings";
-import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-import { isAdminRole } from "@/utils/roles";
 import { migratedHref } from "@/utils/migratedPages";
 
 const GATEWAY = "ai-gateway";
 const CHAT = "chat";
-const ADMIN_SETTINGS_KEY = "admin-panel";
 
 export default function ViewSwitcher() {
   const { mode, setMode, plugins } = usePluginMode();
   const { data: uiSettings } = useUISettings();
-  const { userRole } = useAuthorized();
 
   const chatEnabled = Boolean(uiSettings?.values?.enable_chat_ui);
-  const isAdmin = isAdminRole(userRole ?? "");
-  // Admins see the Chat entry even when disabled, so they can discover and turn
-  // it on; everyone else only sees it once it's enabled for users.
-  const showChatEntry = chatEnabled || isAdmin;
 
-  // Only render a switcher when there is somewhere to switch to.
-  if (plugins.length === 0 && !showChatEntry) return null;
+  if (plugins.length === 0 && !chatEnabled) return null;
 
   const activeLabel = plugins.find((p) => p.name === mode)?.display_name ?? "AI Gateway";
 
@@ -43,19 +34,14 @@ export default function ViewSwitcher() {
         </div>
       ),
     })),
-    ...(showChatEntry
+    ...(chatEnabled
       ? [
           {
             key: CHAT,
-            label: chatEnabled ? (
+            label: (
               <div className="flex items-center justify-between gap-6 py-0.5">
                 <span className="font-medium">Chat</span>
               </div>
-            ) : (
-              <div className="flex flex-col gap-0.5 py-0.5">
-                <span className="font-medium text-gray-400">Chat</span>
-                <span className="text-xs text-gray-400">Enable in Admin Settings &rarr; UI Settings</span>
-              </div>
             ),
           },
         ]
@@ -64,9 +50,7 @@ export default function ViewSwitcher() {
 
   const onClick: MenuProps["onClick"] = ({ key }) => {
     if (key === CHAT) {
-      // Enabled: go to the chat app. Disabled (admin-only): send them to the
-      // admin panel where the enable_chat_ui toggle lives.
-      window.location.assign(migratedHref(chatEnabled ? CHAT : ADMIN_SETTINGS_KEY));
+      window.location.assign(migratedHref(CHAT));
       return;
     }
     setMode(key);