From 8d6c6867e6108ce4d8d680d66c0da2f7c7fa6384 Mon Sep 17 00:00:00 2001
From: yuneng <yuneng@berri.ai>
Date: Tue, 22 Sep 2026 00:17:30 +0000
Subject: [PATCH 1/5] feat(ui): freeze config.yaml owned settings in the
 dashboard

Router, fallback, alerting and UI settings controls now read the source
map returned by GET /router/settings, GET /alerting/settings and
GET /get/ui_settings and render a control as disabled with a tooltip
when its source is config. Every other source stays editable

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../UISettings/PageVisibilitySettings.tsx     | 37 +++++++----
 .../TeamAdminEditableFieldsSettings.tsx       | 35 ++++++----
 .../UISettings/UISettings.test.tsx            | 64 +++++++++++++++++-
 .../AdminSettings/UISettings/UISettings.tsx   | 28 +++++++-
 .../RouterSettings/Fallbacks/AddFallbacks.tsx | 14 ++--
 .../Fallbacks/Fallbacks.test.tsx              | 55 +++++++++++++++-
 .../RouterSettings/Fallbacks/Fallbacks.tsx    | 36 +++++++---
 .../components/alerting/alerting_settings.tsx |  2 +
 .../dynamic_form.integration.test.tsx         | 57 ++++++++++++++++
 .../src/components/alerting/dynamic_form.tsx  | 66 ++++++++++++-------
 .../LatencyBasedConfiguration.tsx             | 20 ++++--
 .../ReliabilityRetriesSection.tsx             | 30 +++++----
 .../router_settings/RouterSettingsForm.tsx    | 16 ++++-
 .../RoutingStrategySelector.tsx               |  8 ++-
 .../router_settings/TagFilteringToggle.tsx    | 13 +++-
 .../components/router_settings/index.test.tsx | 46 +++++++++++++
 .../src/components/router_settings/index.tsx  |  4 ++
 .../components/shared/ConfigOwnedField.tsx    | 32 +++++++++
 18 files changed, 475 insertions(+), 88 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/components/shared/ConfigOwnedField.tsx

diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/PageVisibilitySettings.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/PageVisibilitySettings.tsx
index cf449f0e869..0730342c2d5 100644
--- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/PageVisibilitySettings.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/PageVisibilitySettings.tsx
@@ -4,6 +4,7 @@ import { ChevronDown } from "lucide-react";
 import { useMemo, useState } from "react";
 
 import { getAvailablePages } from "@/components/page_utils";
+import { ConfigOwnedField } from "@/components/shared/ConfigOwnedField";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -13,6 +14,7 @@ interface PageVisibilitySettingsProps {
   enabledPagesInternalUsers: string[] | null | undefined;
   enabledPagesPropertyDescription?: string;
   isUpdating: boolean;
+  configOwned?: boolean;
   onUpdate: (settings: { enabled_ui_pages_internal_users: string[] | null }) => void;
 }
 
@@ -20,6 +22,7 @@ export default function PageVisibilitySettings({
   enabledPagesInternalUsers,
   enabledPagesPropertyDescription,
   isUpdating,
+  configOwned = false,
   onUpdate,
 }: PageVisibilitySettingsProps) {
   const isPageVisibilitySet = enabledPagesInternalUsers !== null && enabledPagesInternalUsers !== undefined;
@@ -93,11 +96,14 @@ export default function PageVisibilitySettings({
                     const checkboxId = `page-visibility-${page.page}`;
                     return (
                       <label key={page.page} htmlFor={checkboxId} className="flex cursor-pointer items-start gap-2">
-                        <Checkbox
-                          id={checkboxId}
-                          checked={selectedPages.includes(page.page)}
-                          onCheckedChange={(checked) => togglePage(page.page, checked === true)}
-                        />
+                        <ConfigOwnedField frozen={configOwned} className="inline-flex">
+                          <Checkbox
+                            id={checkboxId}
+                            checked={selectedPages.includes(page.page)}
+                            disabled={configOwned}
+                            onCheckedChange={(checked) => togglePage(page.page, checked === true)}
+                          />
+                        </ConfigOwnedField>
                         <span className="space-y-0.5">
                           <span className="block text-sm text-foreground">{page.label}</span>
                           <span className="block text-xs text-muted-foreground">{page.description}</span>
@@ -110,13 +116,22 @@ export default function PageVisibilitySettings({
             ))}
 
             <div className="flex flex-wrap gap-2">
-              <Button type="button" onClick={handleSavePageVisibility} disabled={isUpdating}>
-                Save Page Visibility Settings
-              </Button>
-              {isPageVisibilitySet && (
-                <Button type="button" variant="outline" onClick={handleResetToDefault} disabled={isUpdating}>
-                  Reset to Default (All Pages)
+              <ConfigOwnedField frozen={configOwned} className="inline-flex">
+                <Button type="button" onClick={handleSavePageVisibility} disabled={isUpdating || configOwned}>
+                  Save Page Visibility Settings
                 </Button>
+              </ConfigOwnedField>
+              {isPageVisibilitySet && (
+                <ConfigOwnedField frozen={configOwned} className="inline-flex">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={handleResetToDefault}
+                    disabled={isUpdating || configOwned}
+                  >
+                    Reset to Default (All Pages)
+                  </Button>
+                </ConfigOwnedField>
               )}
             </div>
           </div>
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/TeamAdminEditableFieldsSettings.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/TeamAdminEditableFieldsSettings.tsx
index e671a4a47b5..8944ea283ac 100644
--- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/TeamAdminEditableFieldsSettings.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/TeamAdminEditableFieldsSettings.tsx
@@ -11,6 +11,7 @@ import {
   parseTeamAdminEditableFields,
   teamAdminFieldLabel,
 } from "@/components/team/teamAdminEditAccess";
+import { ConfigOwnedField, isConfigOwned } from "@/components/shared/ConfigOwnedField";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -30,6 +31,7 @@ export default function TeamAdminEditableFieldsSettings() {
   const supportedFields = parseSupportedTeamAdminEditableFields(data?.field_schema);
   const savedFields = parseTeamAdminEditableFields(data?.values);
   const enabledFields = supportedFields.filter((field) => savedFields.includes(field));
+  const configOwned = isConfigOwned(data?.source, "team_admin_editable_team_fields");
 
   return (
     <Card>
@@ -56,6 +58,7 @@ export default function TeamAdminEditableFieldsSettings() {
             enabledFields={enabledFields}
             supportedFields={supportedFields}
             isPending={isPending}
+            configOwned={configOwned}
             saveSettings={saveSettings}
           />
         )}
@@ -68,6 +71,7 @@ interface TeamAdminEditableFieldsFormProps {
   enabledFields: readonly string[];
   supportedFields: readonly string[];
   isPending: boolean;
+  configOwned: boolean;
   saveSettings: SaveEditableFields;
 }
 
@@ -75,6 +79,7 @@ function TeamAdminEditableFieldsForm({
   enabledFields,
   supportedFields,
   isPending,
+  configOwned,
   saveSettings,
 }: TeamAdminEditableFieldsFormProps) {
   const form = useZodForm(editableFieldsSchema, {
@@ -111,16 +116,18 @@ function TeamAdminEditableFieldsForm({
               const checkboxId = `team-admin-editable-${name}`;
               return (
                 <label key={name} htmlFor={checkboxId} className="flex cursor-pointer items-center gap-2">
-                  <Checkbox
-                    id={checkboxId}
-                    checked={field.value.includes(name)}
-                    disabled={isPending}
-                    onCheckedChange={(checked) =>
-                      field.onChange(
-                        supportedFields.filter((item) => (item === name ? checked : field.value.includes(item))),
-                      )
-                    }
-                  />
+                  <ConfigOwnedField frozen={configOwned} className="inline-flex">
+                    <Checkbox
+                      id={checkboxId}
+                      checked={field.value.includes(name)}
+                      disabled={isPending || configOwned}
+                      onCheckedChange={(checked) =>
+                        field.onChange(
+                          supportedFields.filter((item) => (item === name ? checked : field.value.includes(item))),
+                        )
+                      }
+                    />
+                  </ConfigOwnedField>
                   <span className="text-sm text-foreground">{teamAdminFieldLabel(name)}</span>
                 </label>
               );
@@ -129,9 +136,11 @@ function TeamAdminEditableFieldsForm({
         )}
       />
       <div className="flex justify-end">
-        <Button type="submit" disabled={isPending || !form.formState.isDirty}>
-          {isPending ? "Saving..." : "Save"}
-        </Button>
+        <ConfigOwnedField frozen={configOwned} className="inline-flex">
+          <Button type="submit" disabled={isPending || configOwned || !form.formState.isDirty}>
+            {isPending ? "Saving..." : "Save"}
+          </Button>
+        </ConfigOwnedField>
       </div>
     </form>
   );
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/UISettings.test.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/UISettings.test.tsx
index c2834e65498..9718113dcda 100644
--- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/UISettings.test.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/UISettings.test.tsx
@@ -20,7 +20,7 @@ vi.mock("@/app/(dashboard)/hooks/uiSettings/useUpdateUISettings", () => ({
   useUpdateUISettings: mockUseUpdateUISettings,
 }));
 
-const buildSettingsResponse = (overrides?: Partial<Record<string, unknown>>) => ({
+const buildSettingsResponse = (overrides?: Partial<Record<string, unknown>>, source: Record<string, string> = {}) => ({
   data: {
     field_schema: {
       description: "UI settings description",
@@ -41,6 +41,7 @@ const buildSettingsResponse = (overrides?: Partial<Record<string, unknown>>) =>
       disable_team_admin_delete_team_user: false,
       require_auth_for_public_ai_hub: false,
     },
+    source,
   },
   isLoading: false,
   isError: false,
@@ -155,4 +156,65 @@ describe("UISettings", () => {
     );
     expect(toast.success).toHaveBeenCalledWith("UI settings updated successfully");
   });
+
+  describe("config.yaml owned settings", () => {
+    it("freezes a switch whose source is config and does not call update", () => {
+      const mutateMock = vi.fn();
+      mockUseUpdateUISettings.mockReturnValue({ mutate: mutateMock, isPending: false, error: null });
+      mockUseUISettings.mockReturnValue(
+        buildSettingsResponse(undefined, {
+          disable_model_add_for_internal_users: "config",
+          disable_team_admin_delete_team_user: "db",
+        }),
+      );
+
+      render(<UISettings />);
+
+      const frozen = screen.getByRole("switch", { name: "Disable model add for internal users" });
+      expect(frozen).toHaveAttribute("data-disabled");
+      expect(frozen).toHaveAttribute("aria-disabled", "true");
+
+      act(() => {
+        fireEvent.click(frozen);
+      });
+
+      expect(mutateMock).not.toHaveBeenCalled();
+    });
+
+    it.each(["env", "default", "db", "unset"])("keeps a switch editable when its source is %s", (source) => {
+      const mutateMock = vi.fn();
+      mockUseUpdateUISettings.mockReturnValue({ mutate: mutateMock, isPending: false, error: null });
+      mockUseUISettings.mockReturnValue(
+        buildSettingsResponse(undefined, { disable_model_add_for_internal_users: source }),
+      );
+
+      render(<UISettings />);
+
+      const toggle = screen.getByRole("switch", { name: "Disable model add for internal users" });
+      expect(toggle).not.toHaveAttribute("data-disabled");
+      expect(toggle).not.toHaveAttribute("aria-disabled", "true");
+
+      act(() => {
+        fireEvent.click(toggle);
+      });
+
+      expect(mutateMock).toHaveBeenCalledWith({ disable_model_add_for_internal_users: true }, expect.anything());
+    });
+
+    it("freezes only the config owned switch and leaves siblings editable", () => {
+      mockUseUISettings.mockReturnValue(buildSettingsResponse(undefined, { require_auth_for_public_ai_hub: "config" }));
+
+      render(<UISettings />);
+
+      expect(screen.getByRole("switch", { name: "Require authentication for public AI Hub" })).toHaveAttribute(
+        "data-disabled",
+      );
+      expect(screen.getByRole("switch", { name: "Disable model add for internal users" })).not.toHaveAttribute(
+        "data-disabled",
+      );
+      expect(screen.getByRole("switch", { name: "Disable team admin delete team user" })).not.toHaveAttribute(
+        "data-disabled",
+      );
+    });
+  });
 });
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 612ca05d083..88518a2bf88 100644
--- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/UISettings.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/UISettings/UISettings.tsx
@@ -5,6 +5,7 @@ import { useUpdateUISettings } from "@/app/(dashboard)/hooks/uiSettings/useUpdat
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { toast } from "@/lib/toast";
 import { Alert, AlertDescription, AlertTitle } from "@/components/shared/Alert";
+import { ConfigOwnedField, isConfigOwned } from "@/components/shared/ConfigOwnedField";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -14,6 +15,7 @@ import PageVisibilitySettings from "./PageVisibilitySettings";
 interface SettingRowProps {
   ariaLabel: string;
   checked: boolean;
+  configOwned?: boolean;
   description?: string;
   disabled: boolean;
   indented?: boolean;
@@ -25,6 +27,7 @@ interface SettingRowProps {
 function SettingRow({
   ariaLabel,
   checked,
+  configOwned = false,
   description,
   disabled,
   indented = false,
@@ -34,7 +37,14 @@ function SettingRow({
 }: SettingRowProps) {
   return (
     <div className={indented ? "ml-8 flex items-start gap-3" : "flex items-start gap-3"}>
-      <Switch checked={checked} disabled={disabled} onCheckedChange={onCheckedChange} aria-label={ariaLabel} />
+      <ConfigOwnedField frozen={configOwned} className="inline-flex">
+        <Switch
+          checked={checked}
+          disabled={disabled || configOwned}
+          onCheckedChange={onCheckedChange}
+          aria-label={ariaLabel}
+        />
+      </ConfigOwnedField>
       <div className="space-y-1">
         <p className={muted ? "text-sm font-medium text-muted-foreground" : "text-sm font-medium text-foreground"}>
           {label}
@@ -66,6 +76,8 @@ export default function UISettings() {
   const scopeUserSearchProperty = schema?.properties?.scope_user_search_to_org;
   const disableCustomApiKeysProperty = schema?.properties?.disable_custom_api_keys;
   const values = data?.values ?? {};
+  const sources = data?.source ?? {};
+  const frozen = (key: string) => isConfigOwned(sources, key);
   const isDisabledForInternalUsers = Boolean(values.disable_model_add_for_internal_users);
   const isDisabledTeamAdminDeleteTeamUser = Boolean(values.disable_team_admin_delete_team_user);
   const isAgentsDisabled = Boolean(values.disable_agents_for_internal_users);
@@ -299,6 +311,7 @@ export default function UISettings() {
               checked={isDisabledForInternalUsers}
               disabled={isUpdating}
               onCheckedChange={handleToggle}
+              configOwned={frozen("disable_model_add_for_internal_users")}
               ariaLabel={property?.description ?? "Disable model add for internal users"}
               label="Disable model add for internal users"
               description={property?.description}
@@ -307,6 +320,7 @@ export default function UISettings() {
               checked={isDisabledTeamAdminDeleteTeamUser}
               disabled={isUpdating}
               onCheckedChange={handleToggleTeamAdminDelete}
+              configOwned={frozen("disable_team_admin_delete_team_user")}
               ariaLabel={disableTeamAdminDeleteProperty?.description ?? "Disable team admin delete team user"}
               label="Disable team admin delete team user"
               description={disableTeamAdminDeleteProperty?.description}
@@ -315,6 +329,7 @@ export default function UISettings() {
               checked={Boolean(values.require_auth_for_public_ai_hub)}
               disabled={isUpdating}
               onCheckedChange={handleToggleRequireAuthForPublicAIHub}
+              configOwned={frozen("require_auth_for_public_ai_hub")}
               ariaLabel={requireAuthForPublicAIHubProperty?.description ?? "Require authentication for public AI Hub"}
               label="Require authentication for public AI Hub"
               description={requireAuthForPublicAIHubProperty?.description}
@@ -323,6 +338,7 @@ export default function UISettings() {
               checked={Boolean(values.forward_client_headers_to_llm_api)}
               disabled={isUpdating}
               onCheckedChange={handleToggleForwardClientHeaders}
+              configOwned={frozen("forward_client_headers_to_llm_api")}
               ariaLabel={forwardClientHeadersProperty?.description ?? "Forward client headers to LLM API"}
               label="Forward client headers to LLM API"
               description={
@@ -334,6 +350,7 @@ export default function UISettings() {
               checked={Boolean(values.forward_llm_provider_auth_headers)}
               disabled={isUpdating}
               onCheckedChange={handleToggleForwardLLMProviderAuthHeaders}
+              configOwned={frozen("forward_llm_provider_auth_headers")}
               ariaLabel={forwardLLMProviderAuthHeadersProperty?.description ?? "Forward LLM provider auth headers"}
               label="Forward LLM provider auth headers"
               description={
@@ -346,6 +363,7 @@ export default function UISettings() {
                 checked={Boolean(values.enable_projects_ui)}
                 disabled={isUpdating}
                 onCheckedChange={handleToggleEnableProjectsUI}
+                configOwned={frozen("enable_projects_ui")}
                 ariaLabel={enableProjectsUIProperty.description ?? "Enable Projects UI"}
                 label="[BETA] Enable Projects (page will refresh)"
                 description={
@@ -358,6 +376,7 @@ export default function UISettings() {
               checked={Boolean(values.enable_chat_ui)}
               disabled={isUpdating}
               onCheckedChange={handleToggleEnableChatUI}
+              configOwned={frozen("enable_chat_ui")}
               ariaLabel={enableChatUIProperty?.description ?? "Enable Chat page"}
               label="[BETA] Enable Chat page (page will refresh)"
               description={
@@ -371,6 +390,7 @@ export default function UISettings() {
               checked={isAgentsDisabled}
               disabled={isUpdating}
               onCheckedChange={handleToggleDisableAgents}
+              configOwned={frozen("disable_agents_for_internal_users")}
               ariaLabel={disableAgentsProperty?.description ?? "Disable agents for internal users"}
               label="Disable agents for internal users"
               description={disableAgentsProperty?.description}
@@ -379,6 +399,7 @@ export default function UISettings() {
               checked={Boolean(values.allow_agents_for_team_admins)}
               disabled={isUpdating || !isAgentsDisabled}
               onCheckedChange={handleToggleAllowAgentsTeamAdmins}
+              configOwned={frozen("allow_agents_for_team_admins")}
               ariaLabel={allowAgentsTeamAdminsProperty?.description ?? "Allow agents for team admins"}
               label="Allow agents for team admins"
               description={allowAgentsTeamAdminsProperty?.description}
@@ -391,6 +412,7 @@ export default function UISettings() {
               checked={isVectorStoresDisabled}
               disabled={isUpdating}
               onCheckedChange={handleToggleDisableVectorStores}
+              configOwned={frozen("disable_vector_stores_for_internal_users")}
               ariaLabel={disableVectorStoresProperty?.description ?? "Disable vector stores for internal users"}
               label="Disable vector stores for internal users"
               description={disableVectorStoresProperty?.description}
@@ -399,6 +421,7 @@ export default function UISettings() {
               checked={Boolean(values.allow_vector_stores_for_team_admins)}
               disabled={isUpdating || !isVectorStoresDisabled}
               onCheckedChange={handleToggleAllowVectorStoresTeamAdmins}
+              configOwned={frozen("allow_vector_stores_for_team_admins")}
               ariaLabel={allowVectorStoresTeamAdminsProperty?.description ?? "Allow vector stores for team admins"}
               label="Allow vector stores for team admins"
               description={allowVectorStoresTeamAdminsProperty?.description}
@@ -411,6 +434,7 @@ export default function UISettings() {
               checked={Boolean(values.scope_user_search_to_org)}
               disabled={isUpdating}
               onCheckedChange={handleToggleScopeUserSearch}
+              configOwned={frozen("scope_user_search_to_org")}
               ariaLabel={scopeUserSearchProperty?.description ?? "Scope user search to organization"}
               label="Scope user search to organization"
               description={
@@ -424,6 +448,7 @@ export default function UISettings() {
               checked={Boolean(values.disable_custom_api_keys)}
               disabled={isUpdating}
               onCheckedChange={handleToggleDisableCustomApiKeys}
+              configOwned={frozen("disable_custom_api_keys")}
               ariaLabel={disableCustomApiKeysProperty?.description ?? "Disable custom Virtual key values"}
               label="Disable custom Virtual key values"
               description={
@@ -437,6 +462,7 @@ export default function UISettings() {
               enabledPagesInternalUsers={values.enabled_ui_pages_internal_users}
               enabledPagesPropertyDescription={enabledPagesProperty?.description}
               isUpdating={isUpdating}
+              configOwned={frozen("enabled_ui_pages_internal_users")}
               onUpdate={handleUpdatePageVisibility}
             />
           </div>
diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/AddFallbacks.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/AddFallbacks.tsx
index aca47e6b5c3..287693b2b73 100644
--- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/AddFallbacks.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/AddFallbacks.tsx
@@ -5,6 +5,7 @@
  */
 
 import React, { useEffect, useState } from "react";
+import { ConfigOwnedField } from "@/components/shared/ConfigOwnedField";
 import { Button } from "@/components/ui/button";
 import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import { toast } from "@/lib/toast";
@@ -20,9 +21,10 @@ interface AddFallbacksProps {
   accessToken: string;
   value?: Fallbacks; // Current fallbacks value from form
   onChange?: (fallbacks: Fallbacks) => Promise<void>; // Callback to update form value
+  disabled?: boolean;
 }
 
-export default function AddFallbacks({ accessToken, value = [], onChange }: AddFallbacksProps) {
+export default function AddFallbacks({ accessToken, value = [], onChange, disabled = false }: AddFallbacksProps) {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [modelInfo, setModelInfo] = useState<ModelGroup[]>([]);
   const [modalKey, setModalKey] = useState(0); // Key to force remount of form when modal opens
@@ -116,10 +118,12 @@ export default function AddFallbacks({ accessToken, value = [], onChange }: AddF
 
   return (
     <div>
-      <Button className="mx-auto" onClick={() => setIsModalVisible(true)}>
-        <span>+</span>
-        Add Fallbacks
-      </Button>
+      <ConfigOwnedField frozen={disabled} className="inline-flex">
+        <Button className="mx-auto" disabled={disabled} onClick={() => setIsModalVisible(true)}>
+          <span>+</span>
+          Add Fallbacks
+        </Button>
+      </ConfigOwnedField>
       <AddFallbacksModal open={isModalVisible} onCancel={handleCancel}>
         <FallbackSelectionForm
           key={modalKey}
diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.test.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.test.tsx
index cdcb1eefadb..dd5b727bef7 100644
--- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.test.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.test.tsx
@@ -8,6 +8,7 @@ import * as fetchModelsModule from "@/components/llm_calls/fetch_models";
 
 vi.mock("../../../networking", () => ({
   getCallbacksCall: vi.fn(),
+  getRouterSettingsCall: vi.fn(),
   setCallbacksCall: vi.fn(),
 }));
 
@@ -57,7 +58,7 @@ vi.mock("../../../common_components/DeleteResourceModal", () => ({
 
 vi.mock("./AddFallbacks", () => ({
   __esModule: true,
-  default: ({ value, onChange }: any) => {
+  default: ({ value, onChange, disabled }: any) => {
     const handleClick = async () => {
       if (onChange) {
         try {
@@ -69,7 +70,7 @@ vi.mock("./AddFallbacks", () => ({
       }
     };
     return (
-      <button onClick={handleClick} data-testid="add-fallbacks-button">
+      <button onClick={handleClick} disabled={disabled} data-testid="add-fallbacks-button">
         Add Fallbacks
       </button>
     );
@@ -107,6 +108,7 @@ describe("Fallbacks", () => {
     vi.mocked(networkingModule.getCallbacksCall).mockResolvedValue({
       router_settings: mockRouterSettings,
     });
+    vi.mocked(networkingModule.getRouterSettingsCall).mockResolvedValue({ fields: [], source: {} });
     vi.mocked(networkingModule.setCallbacksCall).mockResolvedValue(undefined);
     vi.mocked(fetchModelsModule.fetchAvailableModels).mockResolvedValue([
       { model_group: "gpt-4", mode: "chat" },
@@ -389,4 +391,53 @@ describe("Fallbacks", () => {
       { timeout: 3000 },
     );
   });
+
+  describe("config.yaml owned fallbacks", () => {
+    it("freezes add, edit and delete when fallbacks source is config", async () => {
+      const user = userEvent.setup();
+      vi.mocked(networkingModule.getRouterSettingsCall).mockResolvedValue({
+        fields: [],
+        source: { fallbacks: "config" },
+      });
+      renderWithQueryClient(<Fallbacks {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("add-fallbacks-button")).toBeDisabled();
+      });
+
+      const editButton = screen.getAllByTestId("edit-fallback-button")[0];
+      const deleteButton = getFirstRowDeleteButton();
+      expect(editButton).toHaveAttribute("aria-disabled", "true");
+      expect(deleteButton).toHaveAttribute("aria-disabled", "true");
+
+      await user.click(editButton);
+      await user.click(deleteButton!);
+
+      expect(screen.queryByText("Configure Model Fallbacks")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("delete-modal")).not.toBeInTheDocument();
+    });
+
+    it.each(["env", "default", "db"])("keeps fallbacks editable when source is %s", async (source) => {
+      const user = userEvent.setup();
+      vi.mocked(networkingModule.getRouterSettingsCall).mockResolvedValue({
+        fields: [],
+        source: { fallbacks: source },
+      });
+      renderWithQueryClient(<Fallbacks {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(screen.getAllByText("gpt-4").length).toBeGreaterThan(0);
+      });
+
+      expect(screen.getByTestId("add-fallbacks-button")).toBeEnabled();
+      const editButton = screen.getAllByTestId("edit-fallback-button")[0];
+      expect(editButton).toHaveAttribute("aria-disabled", "false");
+
+      await user.click(editButton);
+
+      await waitFor(() => {
+        expect(screen.getByText("Configure Model Fallbacks")).toBeInTheDocument();
+      });
+    });
+  });
 });
diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx
index 2ccd1a70dc5..d94f07d90b9 100644
--- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx
@@ -7,7 +7,8 @@ import React, { useEffect, useState } from "react";
 import DeleteResourceModal from "../../../common_components/DeleteResourceModal";
 import { ProviderLogo } from "../../../molecules/models/ProviderLogo";
 import { toast } from "@/lib/toast";
-import { getCallbacksCall, setCallbacksCall } from "../../../networking";
+import { getCallbacksCall, getRouterSettingsCall, setCallbacksCall } from "../../../networking";
+import { CONFIG_OWNED_MESSAGE, type FieldSourceMap, isConfigOwned } from "@/components/shared/ConfigOwnedField";
 import { isProxyAdminRole } from "@/utils/roles";
 import AddFallbacks from "./AddFallbacks";
 import EditFallbacks from "./EditFallbacks";
@@ -121,6 +122,7 @@ async function testFallbackModelResponse(selectedModel: string, accessToken: str
 
 const Fallbacks: React.FC<FallbacksProps> = ({ accessToken, userRole, userID }) => {
   const [routerSettings, setRouterSettings] = useState<{ [key: string]: any }>({});
+  const [routerSources, setRouterSources] = useState<FieldSourceMap>({});
   const [isDeleting, setIsDeleting] = useState(false);
   const [fallbackToDelete, setFallbackToDelete] = useState<FallbackEntry | null>(null);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -145,6 +147,9 @@ const Fallbacks: React.FC<FallbacksProps> = ({ accessToken, userRole, userID })
       }
       setRouterSettings(router_settings);
     });
+    getRouterSettingsCall(accessToken).then((data) => {
+      setRouterSources(data.source ?? {});
+    });
   }, [accessToken, userRole, userID]);
 
   const handleDeleteClick = (fallbackEntry: FallbackEntry) => {
@@ -250,6 +255,8 @@ const Fallbacks: React.FC<FallbacksProps> = ({ accessToken, userRole, userID })
   const hasFallbacks = Array.isArray(routerSettings.fallbacks) && routerSettings.fallbacks.length > 0;
   // Admin Viewer follows the read-parity rule: see fallbacks, no writes.
   const canModify = isProxyAdminRole(userRole ?? "");
+  const fallbacksFrozen = isConfigOwned(routerSources, "fallbacks");
+  const frozenActionClass = `${iconWrapperClass} cursor-not-allowed opacity-50`;
 
   return (
     <TooltipProvider>
@@ -258,6 +265,7 @@ const Fallbacks: React.FC<FallbacksProps> = ({ accessToken, userRole, userID })
           accessToken={accessToken || ""}
           value={routerSettings.fallbacks || []}
           onChange={handleFallbacksChange}
+          disabled={fallbacksFrozen}
         />
       )}
       {!hasFallbacks ? (
@@ -309,15 +317,20 @@ const Fallbacks: React.FC<FallbacksProps> = ({ accessToken, userRole, userID })
                                 data-testid="edit-fallback-button"
                                 role="button"
                                 tabIndex={0}
-                                onClick={() => handleEditClick(item)}
-                                onKeyDown={(e) => e.key === "Enter" && handleEditClick(item)}
-                                className={`${iconWrapperClass} cursor-pointer hover:text-info`}
+                                aria-disabled={fallbacksFrozen}
+                                onClick={() => !fallbacksFrozen && handleEditClick(item)}
+                                onKeyDown={(e) => e.key === "Enter" && !fallbacksFrozen && handleEditClick(item)}
+                                className={
+                                  fallbacksFrozen
+                                    ? frozenActionClass
+                                    : `${iconWrapperClass} cursor-pointer hover:text-info`
+                                }
                               />
                             }
                           >
                             <Pencil className="h-5 w-5 shrink-0" />
                           </TooltipTrigger>
-                          <TooltipContent>Edit fallback</TooltipContent>
+                          <TooltipContent>{fallbacksFrozen ? CONFIG_OWNED_MESSAGE : "Edit fallback"}</TooltipContent>
                         </Tooltip>
                         <Tooltip>
                           <TooltipTrigger
@@ -326,15 +339,20 @@ const Fallbacks: React.FC<FallbacksProps> = ({ accessToken, userRole, userID })
                                 data-testid="delete-fallback-button"
                                 role="button"
                                 tabIndex={0}
-                                onClick={() => handleDeleteClick(item)}
-                                onKeyDown={(e) => e.key === "Enter" && handleDeleteClick(item)}
-                                className={`${iconWrapperClass} cursor-pointer hover:text-destructive`}
+                                aria-disabled={fallbacksFrozen}
+                                onClick={() => !fallbacksFrozen && handleDeleteClick(item)}
+                                onKeyDown={(e) => e.key === "Enter" && !fallbacksFrozen && handleDeleteClick(item)}
+                                className={
+                                  fallbacksFrozen
+                                    ? frozenActionClass
+                                    : `${iconWrapperClass} cursor-pointer hover:text-destructive`
+                                }
                               />
                             }
                           >
                             <Trash2 className="h-5 w-5 shrink-0" />
                           </TooltipTrigger>
-                          <TooltipContent>Delete fallback</TooltipContent>
+                          <TooltipContent>{fallbacksFrozen ? CONFIG_OWNED_MESSAGE : "Delete fallback"}</TooltipContent>
                         </Tooltip>
                       </>
                     )}
diff --git a/ui/litellm-dashboard/src/components/alerting/alerting_settings.tsx b/ui/litellm-dashboard/src/components/alerting/alerting_settings.tsx
index cff33546fbc..a10180df97e 100644
--- a/ui/litellm-dashboard/src/components/alerting/alerting_settings.tsx
+++ b/ui/litellm-dashboard/src/components/alerting/alerting_settings.tsx
@@ -7,6 +7,7 @@ import { alertingSettingsCall, updateConfigFieldSetting } from "../networking";
 import DynamicForm from "./dynamic_form";
 import { extractProxyErrorMessage } from "@/lib/http/client";
 import { toast } from "@/lib/toast";
+import type { FieldSource } from "@/components/shared/ConfigOwnedField";
 interface alertingSettingsItem {
   field_name: string;
   field_type: string;
@@ -15,6 +16,7 @@ interface alertingSettingsItem {
   field_description: string;
   stored_in_db: boolean | null;
   premium_field: boolean;
+  source?: FieldSource;
 }
 
 interface AlertingSettingsProps {
diff --git a/ui/litellm-dashboard/src/components/alerting/dynamic_form.integration.test.tsx b/ui/litellm-dashboard/src/components/alerting/dynamic_form.integration.test.tsx
index 7764052173c..59f8e58e598 100644
--- a/ui/litellm-dashboard/src/components/alerting/dynamic_form.integration.test.tsx
+++ b/ui/litellm-dashboard/src/components/alerting/dynamic_form.integration.test.tsx
@@ -11,6 +11,7 @@ interface Setting {
   field_value: unknown;
   stored_in_db: boolean | null;
   premium_field: boolean;
+  source?: "config" | "db" | "env" | "default" | "unset";
 }
 
 const SETTINGS: Setting[] = [
@@ -242,3 +243,59 @@ describe("DynamicForm presentation", () => {
     expect(screen.getByText("Not Set")).toBeInTheDocument();
   });
 });
+
+describe("DynamicForm config.yaml owned fields", () => {
+  const withSource = (source: Setting["source"]) => SETTINGS.map((setting) => ({ ...setting, source }));
+
+  it("disables number, text and switch controls plus reset when source is config", async () => {
+    const user = userEvent.setup();
+    const { handleSubmit, handleResetField } = renderForm({ settings: withSource("config") });
+
+    expect(screen.getByDisplayValue("12")).toBeDisabled();
+    expect(screen.getByDisplayValue("us-east")).toBeDisabled();
+    const toggle = screen.getByRole("switch");
+    expect(toggle).toHaveAttribute("data-disabled");
+    expect(toggle).toHaveAttribute("aria-disabled", "true");
+    expect(screen.getByRole("button", { name: "Reset daily_report_frequency" })).toBeDisabled();
+
+    await user.click(toggle);
+    await user.click(screen.getByRole("button", { name: "Reset daily_report_frequency" }));
+    await submit(user);
+
+    expect(handleResetField).not.toHaveBeenCalled();
+    expect(handleSubmit).not.toHaveBeenCalled();
+  });
+
+  it.each(["env", "default", "db", "unset"] as const)("keeps fields editable when source is %s", async (source) => {
+    const user = userEvent.setup();
+    const { handleSubmit } = renderForm({ settings: withSource(source) });
+
+    expect(screen.getByDisplayValue("us-east")).toBeEnabled();
+    const toggle = screen.getByRole("switch");
+    expect(toggle).not.toHaveAttribute("data-disabled");
+
+    await user.type(screen.getByDisplayValue("us-east"), "Z");
+    await user.click(toggle);
+    await submit(user);
+
+    expect(handleSubmit).toHaveBeenCalledWith({ region_name: "us-eastZ", slack_alerting: true });
+  });
+
+  it("freezes only the config owned field", async () => {
+    const user = userEvent.setup();
+    const settings = SETTINGS.map((setting) =>
+      setting.field_name === "region_name"
+        ? { ...setting, source: "config" as const }
+        : { ...setting, source: "db" as const },
+    );
+    const { handleSubmit } = renderForm({ settings });
+
+    expect(screen.getByDisplayValue("us-east")).toBeDisabled();
+    expect(screen.getByDisplayValue("12")).toBeEnabled();
+
+    await user.type(screen.getByDisplayValue("12"), "7");
+    await submit(user);
+
+    expect(handleSubmit).toHaveBeenCalledWith({ daily_report_frequency: "127" });
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx b/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx
index 42aa58ca0ea..99cd7d3c5f1 100644
--- a/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx
+++ b/ui/litellm-dashboard/src/components/alerting/dynamic_form.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { useForm } from "react-hook-form";
 import { CircleCheck, Trash2 } from "lucide-react";
+import { ConfigOwnedField, type FieldSource } from "@/components/shared/ConfigOwnedField";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -14,6 +15,7 @@ interface AlertingSetting {
   field_value: any;
   stored_in_db: boolean | null;
   premium_field: boolean;
+  source?: FieldSource;
 }
 
 interface DynamicFormProps {
@@ -62,27 +64,44 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
     handleInputChange(setting.field_name, checked);
   };
 
+  const isFrozen = (setting: AlertingSetting) => setting.source === "config";
+
   const renderControl = (setting: AlertingSetting) => {
+    const frozen = isFrozen(setting);
     if (setting.field_type === "Integer" || setting.field_type === "Float") {
       return (
-        <Input
-          type="number"
-          step={setting.field_type === "Integer" ? 1 : "any"}
-          value={setting.field_value ?? ""}
-          onChange={(event) => handleNumericChange(setting, event.target.value)}
-        />
+        <ConfigOwnedField frozen={frozen}>
+          <Input
+            type="number"
+            step={setting.field_type === "Integer" ? 1 : "any"}
+            value={setting.field_value ?? ""}
+            disabled={frozen}
+            onChange={(event) => handleNumericChange(setting, event.target.value)}
+          />
+        </ConfigOwnedField>
       );
     }
     if (setting.field_type === "Boolean") {
       return (
-        <Switch
-          aria-label={setting.field_name}
-          checked={setting.field_value}
-          onCheckedChange={(checked) => handleToggle(setting, checked)}
-        />
+        <ConfigOwnedField frozen={frozen} className="inline-flex">
+          <Switch
+            aria-label={setting.field_name}
+            checked={setting.field_value}
+            disabled={frozen}
+            onCheckedChange={(checked) => handleToggle(setting, checked)}
+          />
+        </ConfigOwnedField>
       );
     }
-    return <Input value={setting.field_value ?? ""} onChange={(event) => handleTextChange(setting, event)} />;
+    return (
+      <ConfigOwnedField frozen={frozen}>
+        <Input
+          value={setting.field_value ?? ""}
+          disabled={frozen}
+          onChange={(event) => handleTextChange(setting, event)}
+        />
+      </ConfigOwnedField>
+    );
   };
 
   return (
@@ -117,16 +136,19 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
             )}
           </TableCell>
           <TableCell>
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon-sm"
-              aria-label={`Reset ${value.field_name}`}
-              onClick={() => handleResetField(value.field_name, index)}
-              className="text-destructive"
-            >
-              <Trash2 className="size-5" />
-            </Button>
+            <ConfigOwnedField frozen={isFrozen(value)} className="inline-flex">
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon-sm"
+                aria-label={`Reset ${value.field_name}`}
+                disabled={isFrozen(value)}
+                onClick={() => handleResetField(value.field_name, index)}
+                className="text-destructive"
+              >
+                <Trash2 className="size-5" />
+              </Button>
+            </ConfigOwnedField>
           </TableCell>
         </TableRow>
       ))}
diff --git a/ui/litellm-dashboard/src/components/router_settings/LatencyBasedConfiguration.tsx b/ui/litellm-dashboard/src/components/router_settings/LatencyBasedConfiguration.tsx
index 61f3abbbb0f..8f565ba4b41 100644
--- a/ui/litellm-dashboard/src/components/router_settings/LatencyBasedConfiguration.tsx
+++ b/ui/litellm-dashboard/src/components/router_settings/LatencyBasedConfiguration.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { ConfigOwnedField } from "@/components/shared/ConfigOwnedField";
 import { Input } from "@/components/ui/input";
 
 interface routingStrategyArgs {
@@ -13,9 +14,13 @@ const defaultLowestLatencyArgs: routingStrategyArgs = {
 
 interface LatencyBasedConfigurationProps {
   routingStrategyArgs: { [key: string]: any };
+  disabled?: boolean;
 }
 
-const LatencyBasedConfiguration: React.FC<LatencyBasedConfigurationProps> = ({ routingStrategyArgs }) => {
+const LatencyBasedConfiguration: React.FC<LatencyBasedConfigurationProps> = ({
+  routingStrategyArgs,
+  disabled = false,
+}) => {
   const paramExplanation: { [key: string]: string } = {
     ttl: "Sliding window to look back over when calculating the average latency of a deployment. Default - 1 hour (in seconds).",
     lowest_latency_buffer:
@@ -38,11 +43,14 @@ const LatencyBasedConfiguration: React.FC<LatencyBasedConfigurationProps> = ({ r
                   {param.replace(/_/g, " ")}
                 </span>
                 <p className="text-xs text-muted-foreground mt-0.5 mb-2">{paramExplanation[param] || ""}</p>
-                <Input
-                  name={param}
-                  defaultValue={typeof value === "object" ? JSON.stringify(value, null, 2) : value?.toString()}
-                  className="font-mono text-sm w-full"
-                />
+                <ConfigOwnedField frozen={disabled}>
+                  <Input
+                    name={param}
+                    disabled={disabled}
+                    defaultValue={typeof value === "object" ? JSON.stringify(value, null, 2) : value?.toString()}
+                    className="font-mono text-sm w-full"
+                  />
+                </ConfigOwnedField>
               </label>
             </div>
           ))}
diff --git a/ui/litellm-dashboard/src/components/router_settings/ReliabilityRetriesSection.tsx b/ui/litellm-dashboard/src/components/router_settings/ReliabilityRetriesSection.tsx
index 09bc7e65c57..fe9b48f9700 100644
--- a/ui/litellm-dashboard/src/components/router_settings/ReliabilityRetriesSection.tsx
+++ b/ui/litellm-dashboard/src/components/router_settings/ReliabilityRetriesSection.tsx
@@ -1,14 +1,17 @@
 import React from "react";
+import { ConfigOwnedField, type FieldSourceMap, isConfigOwned } from "@/components/shared/ConfigOwnedField";
 import { Input } from "@/components/ui/input";
 
 interface ReliabilityRetriesSectionProps {
   routerSettings: { [key: string]: any };
   routerFieldsMetadata: { [key: string]: any };
+  routerSources?: FieldSourceMap;
 }
 
 const ReliabilityRetriesSection: React.FC<ReliabilityRetriesSectionProps> = ({
   routerSettings,
   routerFieldsMetadata,
+  routerSources = {},
 }) => {
   return (
     <div className="space-y-6">
@@ -39,18 +42,21 @@ const ReliabilityRetriesSection: React.FC<ReliabilityRetriesSectionProps> = ({
                 <p className="text-xs text-muted-foreground mt-0.5 mb-2">
                   {routerFieldsMetadata[param]?.field_description || ""}
                 </p>
-                <Input
-                  name={param}
-                  defaultValue={
-                    value === null || value === undefined || value === "null"
-                      ? ""
-                      : typeof value === "object"
-                        ? JSON.stringify(value, null, 2)
-                        : value?.toString() || ""
-                  }
-                  placeholder="—"
-                  className="font-mono text-sm w-full"
-                />
+                <ConfigOwnedField frozen={isConfigOwned(routerSources, param)}>
+                  <Input
+                    name={param}
+                    disabled={isConfigOwned(routerSources, param)}
+                    defaultValue={
+                      value === null || value === undefined || value === "null"
+                        ? ""
+                        : typeof value === "object"
+                          ? JSON.stringify(value, null, 2)
+                          : value?.toString() || ""
+                    }
+                    placeholder="—"
+                    className="font-mono text-sm w-full"
+                  />
+                </ConfigOwnedField>
               </label>
             </div>
           ))}
diff --git a/ui/litellm-dashboard/src/components/router_settings/RouterSettingsForm.tsx b/ui/litellm-dashboard/src/components/router_settings/RouterSettingsForm.tsx
index 05e38993575..ae448553983 100644
--- a/ui/litellm-dashboard/src/components/router_settings/RouterSettingsForm.tsx
+++ b/ui/litellm-dashboard/src/components/router_settings/RouterSettingsForm.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { type FieldSourceMap, isConfigOwned } from "@/components/shared/ConfigOwnedField";
 import LatencyBasedConfiguration from "./LatencyBasedConfiguration";
 import ReliabilityRetriesSection from "./ReliabilityRetriesSection";
 import RoutingStrategySelector from "./RoutingStrategySelector";
@@ -14,6 +15,7 @@ interface RouterSettingsFormProps {
   value: RouterSettingsFormValue;
   onChange: (value: RouterSettingsFormValue) => void;
   routerFieldsMetadata: { [key: string]: any };
+  routerSources?: FieldSourceMap;
   availableRoutingStrategies: string[];
   routingStrategyDescriptions: { [key: string]: string };
 }
@@ -22,6 +24,7 @@ const RouterSettingsForm: React.FC<RouterSettingsFormProps> = ({
   value,
   onChange,
   routerFieldsMetadata,
+  routerSources = {},
   availableRoutingStrategies,
   routingStrategyDescriptions,
 }) => {
@@ -55,6 +58,7 @@ const RouterSettingsForm: React.FC<RouterSettingsFormProps> = ({
             availableStrategies={availableRoutingStrategies}
             routingStrategyDescriptions={routingStrategyDescriptions}
             routerFieldsMetadata={routerFieldsMetadata}
+            disabled={isConfigOwned(routerSources, "routing_strategy")}
             onStrategyChange={handleStrategyChange}
           />
         )}
@@ -63,6 +67,7 @@ const RouterSettingsForm: React.FC<RouterSettingsFormProps> = ({
         <TagFilteringToggle
           enabled={value.enableTagFiltering}
           routerFieldsMetadata={routerFieldsMetadata}
+          disabled={isConfigOwned(routerSources, "enable_tag_filtering")}
           onToggle={handleTagFilteringToggle}
         />
       </div>
@@ -72,11 +77,18 @@ const RouterSettingsForm: React.FC<RouterSettingsFormProps> = ({
 
       {/* Strategy-Specific Args - Show immediately after strategy if latency-based */}
       {value.selectedStrategy === "latency-based-routing" && (
-        <LatencyBasedConfiguration routingStrategyArgs={value.routerSettings["routing_strategy_args"]} />
+        <LatencyBasedConfiguration
+          routingStrategyArgs={value.routerSettings["routing_strategy_args"]}
+          disabled={isConfigOwned(routerSources, "routing_strategy_args")}
+        />
       )}
 
       {/* Other Settings */}
-      <ReliabilityRetriesSection routerSettings={value.routerSettings} routerFieldsMetadata={routerFieldsMetadata} />
+      <ReliabilityRetriesSection
+        routerSettings={value.routerSettings}
+        routerFieldsMetadata={routerFieldsMetadata}
+        routerSources={routerSources}
+      />
     </div>
   );
 };
diff --git a/ui/litellm-dashboard/src/components/router_settings/RoutingStrategySelector.tsx b/ui/litellm-dashboard/src/components/router_settings/RoutingStrategySelector.tsx
index 313732b8b3d..a2dec7b1273 100644
--- a/ui/litellm-dashboard/src/components/router_settings/RoutingStrategySelector.tsx
+++ b/ui/litellm-dashboard/src/components/router_settings/RoutingStrategySelector.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { ConfigOwnedField } from "@/components/shared/ConfigOwnedField";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 
 interface RoutingStrategySelectorProps {
@@ -6,6 +7,7 @@ interface RoutingStrategySelectorProps {
   availableStrategies: string[];
   routingStrategyDescriptions: { [key: string]: string };
   routerFieldsMetadata: { [key: string]: any };
+  disabled?: boolean;
   onStrategyChange: (strategy: string) => void;
 }
 
@@ -14,6 +16,7 @@ const RoutingStrategySelector: React.FC<RoutingStrategySelectorProps> = ({
   availableStrategies,
   routingStrategyDescriptions,
   routerFieldsMetadata,
+  disabled = false,
   onStrategyChange,
 }) => {
   return (
@@ -26,9 +29,10 @@ const RoutingStrategySelector: React.FC<RoutingStrategySelectorProps> = ({
           {routerFieldsMetadata["routing_strategy"]?.field_description || ""}
         </p>
       </div>
-      <div className="routing-strategy-select max-w-3xl">
+      <ConfigOwnedField frozen={disabled} className="block max-w-3xl">
         <Select
           value={selectedStrategy}
+          disabled={disabled}
           onValueChange={(strategy: string | null) => strategy && onStrategyChange(strategy)}
         >
           <SelectTrigger className="w-full">
@@ -49,7 +53,7 @@ const RoutingStrategySelector: React.FC<RoutingStrategySelectorProps> = ({
             ))}
           </SelectContent>
         </Select>
-      </div>
+      </ConfigOwnedField>
     </div>
   );
 };
diff --git a/ui/litellm-dashboard/src/components/router_settings/TagFilteringToggle.tsx b/ui/litellm-dashboard/src/components/router_settings/TagFilteringToggle.tsx
index d0395979e50..39d452685b1 100644
--- a/ui/litellm-dashboard/src/components/router_settings/TagFilteringToggle.tsx
+++ b/ui/litellm-dashboard/src/components/router_settings/TagFilteringToggle.tsx
@@ -1,13 +1,20 @@
 import React, { useId } from "react";
+import { ConfigOwnedField } from "@/components/shared/ConfigOwnedField";
 import { Switch } from "@/components/ui/switch";
 
 interface TagFilteringToggleProps {
   enabled: boolean;
   routerFieldsMetadata: { [key: string]: any };
+  disabled?: boolean;
   onToggle: (enabled: boolean) => void;
 }
 
-const TagFilteringToggle: React.FC<TagFilteringToggleProps> = ({ enabled, routerFieldsMetadata, onToggle }) => {
+const TagFilteringToggle: React.FC<TagFilteringToggleProps> = ({
+  enabled,
+  routerFieldsMetadata,
+  disabled = false,
+  onToggle,
+}) => {
   const toggleId = useId();
 
   return (
@@ -34,7 +41,9 @@ const TagFilteringToggle: React.FC<TagFilteringToggleProps> = ({ enabled, router
             )}
           </p>
         </div>
-        <Switch id={toggleId} checked={enabled} onCheckedChange={onToggle} className="ml-4" />
+        <ConfigOwnedField frozen={disabled} className="ml-4 inline-flex">
+          <Switch id={toggleId} checked={enabled} disabled={disabled} onCheckedChange={onToggle} />
+        </ConfigOwnedField>
       </div>
     </div>
   );
diff --git a/ui/litellm-dashboard/src/components/router_settings/index.test.tsx b/ui/litellm-dashboard/src/components/router_settings/index.test.tsx
index 1875085231a..e1c864a0247 100644
--- a/ui/litellm-dashboard/src/components/router_settings/index.test.tsx
+++ b/ui/litellm-dashboard/src/components/router_settings/index.test.tsx
@@ -183,4 +183,50 @@ describe("RouterSettings", () => {
     });
     expect(toast.success).not.toHaveBeenCalled();
   });
+
+  describe("config.yaml owned fields", () => {
+    it("freezes routing strategy, tag filtering and reliability inputs whose source is config", async () => {
+      const user = userEvent.setup();
+      vi.mocked(getRouterSettingsCall).mockResolvedValue({
+        ...mockRouterSettingsResponse,
+        source: { routing_strategy: "config", enable_tag_filtering: "config", num_retries: "config", timeout: "db" },
+      });
+      renderWithProviders(<RouterSettings {...defaultProps} />);
+
+      const strategySelect = await findStrategySelect();
+      expect(strategySelect).toHaveAttribute("data-disabled");
+      expect(screen.getByRole("switch")).toHaveAttribute("data-disabled");
+      expect(await screen.findByRole("textbox", { name: /num_retries/i })).toBeDisabled();
+      expect(screen.getByRole("textbox", { name: /timeout/i })).toBeEnabled();
+
+      await user.hover(strategySelect);
+      expect(await screen.findByText("Set in config.yaml and cannot be changed here")).toBeInTheDocument();
+    });
+
+    it.each(["env", "default", "db"])("keeps fields editable when source is %s", async (source) => {
+      const user = userEvent.setup();
+      vi.mocked(getRouterSettingsCall).mockResolvedValue({
+        ...mockRouterSettingsResponse,
+        source: { routing_strategy: source, enable_tag_filtering: source, num_retries: source },
+      });
+      renderWithProviders(<RouterSettings {...defaultProps} />);
+
+      const strategySelect = await findStrategySelect();
+      expect(strategySelect).not.toHaveAttribute("data-disabled");
+      expect(screen.getByRole("switch")).not.toHaveAttribute("data-disabled");
+      const numRetries = await screen.findByRole("textbox", { name: /num_retries/i });
+      expect(numRetries).toBeEnabled();
+      expect(screen.queryByText("Set in config.yaml and cannot be changed here")).not.toBeInTheDocument();
+
+      fireEvent.change(numRetries, { target: { value: "7" } });
+      await user.click(screen.getByRole("button", { name: /save changes/i }));
+
+      await waitFor(() =>
+        expect(setCallbacksCall).toHaveBeenCalledWith(
+          "test-token",
+          expect.objectContaining({ router_settings: expect.objectContaining({ num_retries: 7 }) }),
+        ),
+      );
+    });
+  });
 });
diff --git a/ui/litellm-dashboard/src/components/router_settings/index.tsx b/ui/litellm-dashboard/src/components/router_settings/index.tsx
index 53d35b81cec..4bd09bade9e 100644
--- a/ui/litellm-dashboard/src/components/router_settings/index.tsx
+++ b/ui/litellm-dashboard/src/components/router_settings/index.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
+import type { FieldSourceMap } from "@/components/shared/ConfigOwnedField";
 import { toast } from "@/lib/toast";
 import { getCallbacksCall, getRouterSettingsCall, setCallbacksCall } from "../networking";
 import RouterSettingsForm, { RouterSettingsFormValue } from "./RouterSettingsForm";
@@ -24,6 +25,7 @@ const RouterSettings: React.FC<RouterSettingsProps> = ({ accessToken, userRole,
   const [availableRoutingStrategies, setAvailableRoutingStrategies] = useState<string[]>([]);
   const [routerFieldsMetadata, setRouterFieldsMetadata] = useState<{ [key: string]: any }>({});
   const [routingStrategyDescriptions, setRoutingStrategyDescriptions] = useState<{ [key: string]: string }>({});
+  const [routerSources, setRouterSources] = useState<FieldSourceMap>({});
 
   useEffect(() => {
     if (!accessToken || !userRole || !userID) {
@@ -43,6 +45,7 @@ const RouterSettings: React.FC<RouterSettingsProps> = ({ accessToken, userRole,
       }));
     });
     getRouterSettingsCall(accessToken).then((data) => {
+      setRouterSources(data.source ?? {});
       if (data.fields) {
         // Build metadata map for easy lookup
         const fieldsMap: { [key: string]: any } = {};
@@ -184,6 +187,7 @@ const RouterSettings: React.FC<RouterSettingsProps> = ({ accessToken, userRole,
         value={formValue}
         onChange={setFormValue}
         routerFieldsMetadata={routerFieldsMetadata}
+        routerSources={routerSources}
         availableRoutingStrategies={availableRoutingStrategies}
         routingStrategyDescriptions={routingStrategyDescriptions}
       />
diff --git a/ui/litellm-dashboard/src/components/shared/ConfigOwnedField.tsx b/ui/litellm-dashboard/src/components/shared/ConfigOwnedField.tsx
new file mode 100644
index 00000000000..0879f459082
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/shared/ConfigOwnedField.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import type { components } from "@/lib/http/schema";
+
+export type FieldSource = components["schemas"]["RouterSettingsResponse"]["source"][string];
+export type FieldSourceMap = Partial<Record<string, FieldSource>>;
+
+export const CONFIG_OWNED_MESSAGE = "Set in config.yaml and cannot be changed here";
+
+export const isConfigOwned = (sources: FieldSourceMap | null | undefined, fieldName: string): boolean =>
+  sources?.[fieldName] === "config";
+
+interface ConfigOwnedFieldProps {
+  frozen: boolean;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function ConfigOwnedField({ frozen, children, className = "inline-flex w-full" }: ConfigOwnedFieldProps) {
+  if (!frozen) {
+    return <span className={className}>{children}</span>;
+  }
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger render={<span className={className} data-config-owned="true" />}>{children}</TooltipTrigger>
+        <TooltipContent>{CONFIG_OWNED_MESSAGE}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

From fbf0efa3ca0c2beab6e8eb9d1efecac61f0cbb09 Mon Sep 17 00:00:00 2001
From: yuneng <yuneng@berri.ai>
Date: Tue, 22 Sep 2026 00:30:44 +0000
Subject: [PATCH 2/5] test(ui): use fireEvent.change in config owned alerting
 tests

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../components/alerting/dynamic_form.integration.test.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/alerting/dynamic_form.integration.test.tsx b/ui/litellm-dashboard/src/components/alerting/dynamic_form.integration.test.tsx
index 59f8e58e598..9dbb7f00872 100644
--- a/ui/litellm-dashboard/src/components/alerting/dynamic_form.integration.test.tsx
+++ b/ui/litellm-dashboard/src/components/alerting/dynamic_form.integration.test.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, it, expect, vi } from "vitest";
 import DynamicForm from "./dynamic_form";
@@ -274,7 +274,7 @@ describe("DynamicForm config.yaml owned fields", () => {
     const toggle = screen.getByRole("switch");
     expect(toggle).not.toHaveAttribute("data-disabled");
 
-    await user.type(screen.getByDisplayValue("us-east"), "Z");
+    fireEvent.change(screen.getByDisplayValue("us-east"), { target: { value: "us-eastZ" } });
     await user.click(toggle);
     await submit(user);
 
@@ -293,7 +293,7 @@ describe("DynamicForm config.yaml owned fields", () => {
     expect(screen.getByDisplayValue("us-east")).toBeDisabled();
     expect(screen.getByDisplayValue("12")).toBeEnabled();
 
-    await user.type(screen.getByDisplayValue("12"), "7");
+    fireEvent.change(screen.getByDisplayValue("12"), { target: { value: "127" } });
     await submit(user);
 
     expect(handleSubmit).toHaveBeenCalledWith({ daily_report_frequency: "127" });

From d943d556c4c60ddccbc12ee62bef66910b5e37c4 Mon Sep 17 00:00:00 2001
From: yuneng <yuneng@berri.ai>
Date: Tue, 22 Sep 2026 00:42:52 +0000
Subject: [PATCH 3/5] fix(ui): hold router and fallback write controls until
 the source map loads

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../Fallbacks/Fallbacks.test.tsx              | 19 +++++++++++++++
 .../RouterSettings/Fallbacks/Fallbacks.tsx    |  4 ++--
 .../components/router_settings/index.test.tsx | 23 +++++++++++++++++--
 .../src/components/router_settings/index.tsx  |  4 ++--
 4 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.test.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.test.tsx
index dd5b727bef7..4a3ed2ed5c6 100644
--- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.test.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.test.tsx
@@ -417,6 +417,25 @@ describe("Fallbacks", () => {
       expect(screen.queryByTestId("delete-modal")).not.toBeInTheDocument();
     });
 
+    it("hides write actions until the source map has loaded", async () => {
+      let resolveSources: (value: { fields: never[]; source: Record<string, string> }) => void = () => {};
+      vi.mocked(networkingModule.getRouterSettingsCall).mockReturnValue(
+        new Promise((resolve) => {
+          resolveSources = resolve;
+        }),
+      );
+      renderWithQueryClient(<Fallbacks {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(screen.getAllByText("gpt-4").length).toBeGreaterThan(0);
+      });
+      expect(screen.queryByTestId("add-fallbacks-button")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("edit-fallback-button")).not.toBeInTheDocument();
+
+      resolveSources({ fields: [], source: { fallbacks: "config" } });
+      expect(await screen.findByTestId("add-fallbacks-button")).toBeDisabled();
+    });
+
     it.each(["env", "default", "db"])("keeps fallbacks editable when source is %s", async (source) => {
       const user = userEvent.setup();
       vi.mocked(networkingModule.getRouterSettingsCall).mockResolvedValue({
diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx
index d94f07d90b9..e2bc180d69c 100644
--- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx
@@ -122,7 +122,7 @@ async function testFallbackModelResponse(selectedModel: string, accessToken: str
 
 const Fallbacks: React.FC<FallbacksProps> = ({ accessToken, userRole, userID }) => {
   const [routerSettings, setRouterSettings] = useState<{ [key: string]: any }>({});
-  const [routerSources, setRouterSources] = useState<FieldSourceMap>({});
+  const [routerSources, setRouterSources] = useState<FieldSourceMap | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
   const [fallbackToDelete, setFallbackToDelete] = useState<FallbackEntry | null>(null);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -254,7 +254,7 @@ const Fallbacks: React.FC<FallbacksProps> = ({ accessToken, userRole, userID })
 
   const hasFallbacks = Array.isArray(routerSettings.fallbacks) && routerSettings.fallbacks.length > 0;
   // Admin Viewer follows the read-parity rule: see fallbacks, no writes.
-  const canModify = isProxyAdminRole(userRole ?? "");
+  const canModify = isProxyAdminRole(userRole ?? "") && routerSources !== null;
   const fallbacksFrozen = isConfigOwned(routerSources, "fallbacks");
   const frozenActionClass = `${iconWrapperClass} cursor-not-allowed opacity-50`;
 
diff --git a/ui/litellm-dashboard/src/components/router_settings/index.test.tsx b/ui/litellm-dashboard/src/components/router_settings/index.test.tsx
index e1c864a0247..d601fa00fca 100644
--- a/ui/litellm-dashboard/src/components/router_settings/index.test.tsx
+++ b/ui/litellm-dashboard/src/components/router_settings/index.test.tsx
@@ -67,9 +67,9 @@ describe("RouterSettings", () => {
     expect(container).toBeEmptyDOMElement();
   });
 
-  it("should render the Save Changes and Reset buttons when authenticated", () => {
+  it("should render the Save Changes and Reset buttons when authenticated", async () => {
     renderWithProviders(<RouterSettings {...defaultProps} />);
-    expect(screen.getByRole("button", { name: /save changes/i })).toBeInTheDocument();
+    expect(await screen.findByRole("button", { name: /save changes/i })).toBeInTheDocument();
     expect(screen.getByRole("button", { name: /reset/i })).toBeInTheDocument();
   });
 
@@ -203,6 +203,25 @@ describe("RouterSettings", () => {
       expect(await screen.findByText("Set in config.yaml and cannot be changed here")).toBeInTheDocument();
     });
 
+    it("holds the form until the source map has loaded so config owned fields never render editable", async () => {
+      let resolveSources: (
+        value: typeof mockRouterSettingsResponse & { source: Record<string, string> },
+      ) => void = () => {};
+      vi.mocked(getRouterSettingsCall).mockReturnValue(
+        new Promise((resolve) => {
+          resolveSources = resolve;
+        }),
+      );
+      renderWithProviders(<RouterSettings {...defaultProps} />);
+
+      await waitFor(() => expect(getCallbacksCall).toHaveBeenCalled());
+      expect(screen.queryByRole("textbox", { name: /num_retries/i })).not.toBeInTheDocument();
+      expect(screen.queryByRole("button", { name: /save changes/i })).not.toBeInTheDocument();
+
+      resolveSources({ ...mockRouterSettingsResponse, source: { num_retries: "config" } });
+      expect(await screen.findByRole("textbox", { name: /num_retries/i })).toBeDisabled();
+    });
+
     it.each(["env", "default", "db"])("keeps fields editable when source is %s", async (source) => {
       const user = userEvent.setup();
       vi.mocked(getRouterSettingsCall).mockResolvedValue({
diff --git a/ui/litellm-dashboard/src/components/router_settings/index.tsx b/ui/litellm-dashboard/src/components/router_settings/index.tsx
index 4bd09bade9e..483e2726471 100644
--- a/ui/litellm-dashboard/src/components/router_settings/index.tsx
+++ b/ui/litellm-dashboard/src/components/router_settings/index.tsx
@@ -25,7 +25,7 @@ const RouterSettings: React.FC<RouterSettingsProps> = ({ accessToken, userRole,
   const [availableRoutingStrategies, setAvailableRoutingStrategies] = useState<string[]>([]);
   const [routerFieldsMetadata, setRouterFieldsMetadata] = useState<{ [key: string]: any }>({});
   const [routingStrategyDescriptions, setRoutingStrategyDescriptions] = useState<{ [key: string]: string }>({});
-  const [routerSources, setRouterSources] = useState<FieldSourceMap>({});
+  const [routerSources, setRouterSources] = useState<FieldSourceMap | null>(null);
 
   useEffect(() => {
     if (!accessToken || !userRole || !userID) {
@@ -177,7 +177,7 @@ const RouterSettings: React.FC<RouterSettingsProps> = ({ accessToken, userRole,
     }
   };
 
-  if (!accessToken) {
+  if (!accessToken || routerSources === null) {
     return null;
   }
 

From 5cf2abfc7c1b6434068662b42a31a1d59a21accc Mon Sep 17 00:00:00 2001
From: yuneng <yuneng@berri.ai>
Date: Tue, 22 Sep 2026 01:00:06 +0000
Subject: [PATCH 4/5] fix(ui): key router source map to the session and surface
 source load failures

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../Fallbacks/Fallbacks.test.tsx              |  9 ++
 .../RouterSettings/Fallbacks/Fallbacks.tsx    | 21 +++--
 .../components/router_settings/index.test.tsx | 19 ++++
 .../src/components/router_settings/index.tsx  | 90 +++++++++++--------
 .../components/shared/ConfigOwnedField.tsx    |  6 ++
 5 files changed, 103 insertions(+), 42 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.test.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.test.tsx
index 4a3ed2ed5c6..b25a394d70b 100644
--- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.test.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.test.tsx
@@ -417,6 +417,15 @@ describe("Fallbacks", () => {
       expect(screen.queryByTestId("delete-modal")).not.toBeInTheDocument();
     });
 
+    it("keeps fallbacks visible and explains why edits are unavailable when the source request fails", async () => {
+      vi.mocked(networkingModule.getRouterSettingsCall).mockRejectedValue(new Error("boom"));
+      renderWithQueryClient(<Fallbacks {...defaultProps} />);
+
+      expect(await screen.findByRole("alert")).toHaveTextContent("Failed to load router settings");
+      expect(screen.getAllByText("gpt-4").length).toBeGreaterThan(0);
+      expect(screen.queryByTestId("add-fallbacks-button")).not.toBeInTheDocument();
+    });
+
     it("hides write actions until the source map has loaded", async () => {
       let resolveSources: (value: { fields: never[]; source: Record<string, string> }) => void = () => {};
       vi.mocked(networkingModule.getRouterSettingsCall).mockReturnValue(
diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx
index e2bc180d69c..86cd345adb8 100644
--- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx
@@ -8,7 +8,7 @@ import DeleteResourceModal from "../../../common_components/DeleteResourceModal"
 import { ProviderLogo } from "../../../molecules/models/ProviderLogo";
 import { toast } from "@/lib/toast";
 import { getCallbacksCall, getRouterSettingsCall, setCallbacksCall } from "../../../networking";
-import { CONFIG_OWNED_MESSAGE, type FieldSourceMap, isConfigOwned } from "@/components/shared/ConfigOwnedField";
+import { CONFIG_OWNED_MESSAGE, isConfigOwned, type SourcesState } from "@/components/shared/ConfigOwnedField";
 import { isProxyAdminRole } from "@/utils/roles";
 import AddFallbacks from "./AddFallbacks";
 import EditFallbacks from "./EditFallbacks";
@@ -122,7 +122,11 @@ async function testFallbackModelResponse(selectedModel: string, accessToken: str
 
 const Fallbacks: React.FC<FallbacksProps> = ({ accessToken, userRole, userID }) => {
   const [routerSettings, setRouterSettings] = useState<{ [key: string]: any }>({});
-  const [routerSources, setRouterSources] = useState<FieldSourceMap | null>(null);
+  const [sourcesState, setSourcesState] = useState<SourcesState | null>(null);
+  const sessionKey = `${accessToken}:${userRole}:${userID}`;
+  const loadedSources = sourcesState?.sessionKey === sessionKey ? sourcesState : null;
+  const routerSources = loadedSources?.sources ?? null;
+  const sourcesFailed = loadedSources?.failed ?? false;
   const [isDeleting, setIsDeleting] = useState(false);
   const [fallbackToDelete, setFallbackToDelete] = useState<FallbackEntry | null>(null);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -147,10 +151,10 @@ const Fallbacks: React.FC<FallbacksProps> = ({ accessToken, userRole, userID })
       }
       setRouterSettings(router_settings);
     });
-    getRouterSettingsCall(accessToken).then((data) => {
-      setRouterSources(data.source ?? {});
-    });
-  }, [accessToken, userRole, userID]);
+    getRouterSettingsCall(accessToken)
+      .then((data) => setSourcesState({ sessionKey, sources: data.source ?? {}, failed: false }))
+      .catch(() => setSourcesState({ sessionKey, sources: null, failed: true }));
+  }, [accessToken, userRole, userID, sessionKey]);
 
   const handleDeleteClick = (fallbackEntry: FallbackEntry) => {
     setFallbackToDelete(fallbackEntry);
@@ -260,6 +264,11 @@ const Fallbacks: React.FC<FallbacksProps> = ({ accessToken, userRole, userID })
 
   return (
     <TooltipProvider>
+      {sourcesFailed && (
+        <div role="alert" className="text-sm text-destructive">
+          Failed to load router settings. Reload the page to edit fallbacks
+        </div>
+      )}
       {canModify && (
         <AddFallbacks
           accessToken={accessToken || ""}
diff --git a/ui/litellm-dashboard/src/components/router_settings/index.test.tsx b/ui/litellm-dashboard/src/components/router_settings/index.test.tsx
index d601fa00fca..01f459d68e9 100644
--- a/ui/litellm-dashboard/src/components/router_settings/index.test.tsx
+++ b/ui/litellm-dashboard/src/components/router_settings/index.test.tsx
@@ -203,6 +203,25 @@ describe("RouterSettings", () => {
       expect(await screen.findByText("Set in config.yaml and cannot be changed here")).toBeInTheDocument();
     });
 
+    it("drops the previous source map while a new session is loading", async () => {
+      vi.mocked(getRouterSettingsCall).mockResolvedValueOnce({ ...mockRouterSettingsResponse, source: {} });
+      const { rerender } = renderWithProviders(<RouterSettings {...defaultProps} />);
+      expect(await screen.findByRole("button", { name: /save changes/i })).toBeInTheDocument();
+
+      vi.mocked(getRouterSettingsCall).mockReturnValue(new Promise(() => {}));
+      rerender(<RouterSettings {...defaultProps} accessToken="other-token" />);
+
+      expect(screen.queryByRole("button", { name: /save changes/i })).not.toBeInTheDocument();
+    });
+
+    it("shows an error instead of a blank page when the source request fails", async () => {
+      vi.mocked(getRouterSettingsCall).mockRejectedValue(new Error("boom"));
+      renderWithProviders(<RouterSettings {...defaultProps} />);
+
+      expect(await screen.findByRole("alert")).toHaveTextContent("Failed to load router settings");
+      expect(screen.queryByRole("button", { name: /save changes/i })).not.toBeInTheDocument();
+    });
+
     it("holds the form until the source map has loaded so config owned fields never render editable", async () => {
       let resolveSources: (
         value: typeof mockRouterSettingsResponse & { source: Record<string, string> },
diff --git a/ui/litellm-dashboard/src/components/router_settings/index.tsx b/ui/litellm-dashboard/src/components/router_settings/index.tsx
index 483e2726471..c611a7eed23 100644
--- a/ui/litellm-dashboard/src/components/router_settings/index.tsx
+++ b/ui/litellm-dashboard/src/components/router_settings/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
-import type { FieldSourceMap } from "@/components/shared/ConfigOwnedField";
+import type { SourcesState } from "@/components/shared/ConfigOwnedField";
 import { toast } from "@/lib/toast";
 import { getCallbacksCall, getRouterSettingsCall, setCallbacksCall } from "../networking";
 import RouterSettingsForm, { RouterSettingsFormValue } from "./RouterSettingsForm";
@@ -25,7 +25,11 @@ const RouterSettings: React.FC<RouterSettingsProps> = ({ accessToken, userRole,
   const [availableRoutingStrategies, setAvailableRoutingStrategies] = useState<string[]>([]);
   const [routerFieldsMetadata, setRouterFieldsMetadata] = useState<{ [key: string]: any }>({});
   const [routingStrategyDescriptions, setRoutingStrategyDescriptions] = useState<{ [key: string]: string }>({});
-  const [routerSources, setRouterSources] = useState<FieldSourceMap | null>(null);
+  const [sourcesState, setSourcesState] = useState<SourcesState | null>(null);
+  const sessionKey = `${accessToken}:${userRole}:${userID}`;
+  const loadedSources = sourcesState?.sessionKey === sessionKey ? sourcesState : null;
+  const routerSources = loadedSources?.sources ?? null;
+  const sourcesFailed = loadedSources?.failed ?? false;
 
   useEffect(() => {
     if (!accessToken || !userRole || !userID) {
@@ -44,43 +48,45 @@ const RouterSettings: React.FC<RouterSettingsProps> = ({ accessToken, userRole,
         selectedStrategy: initialStrategy,
       }));
     });
-    getRouterSettingsCall(accessToken).then((data) => {
-      setRouterSources(data.source ?? {});
-      if (data.fields) {
-        // Build metadata map for easy lookup
-        const fieldsMap: { [key: string]: any } = {};
-        data.fields.forEach((field: any) => {
-          fieldsMap[field.field_name] = {
-            ui_field_name: field.ui_field_name,
-            field_description: field.field_description,
-            options: field.options,
-            link: field.link,
-          };
-        });
-        setRouterFieldsMetadata(fieldsMap);
+    getRouterSettingsCall(accessToken)
+      .then((data) => {
+        setSourcesState({ sessionKey, sources: data.source ?? {}, failed: false });
+        if (data.fields) {
+          // Build metadata map for easy lookup
+          const fieldsMap: { [key: string]: any } = {};
+          data.fields.forEach((field: any) => {
+            fieldsMap[field.field_name] = {
+              ui_field_name: field.ui_field_name,
+              field_description: field.field_description,
+              options: field.options,
+              link: field.link,
+            };
+          });
+          setRouterFieldsMetadata(fieldsMap);
 
-        // Extract routing strategies from the routing_strategy field's options
-        const routingStrategyField = data.fields.find((field: any) => field.field_name === "routing_strategy");
-        if (routingStrategyField?.options) {
-          setAvailableRoutingStrategies(routingStrategyField.options);
-        }
+          // Extract routing strategies from the routing_strategy field's options
+          const routingStrategyField = data.fields.find((field: any) => field.field_name === "routing_strategy");
+          if (routingStrategyField?.options) {
+            setAvailableRoutingStrategies(routingStrategyField.options);
+          }
 
-        // Store routing strategy descriptions
-        if (data.routing_strategy_descriptions) {
-          setRoutingStrategyDescriptions(data.routing_strategy_descriptions);
-        }
+          // Store routing strategy descriptions
+          if (data.routing_strategy_descriptions) {
+            setRoutingStrategyDescriptions(data.routing_strategy_descriptions);
+          }
 
-        // Set enable_tag_filtering value
-        const tagFilteringField = data.fields.find((field: any) => field.field_name === "enable_tag_filtering");
-        if (tagFilteringField?.field_value !== null && tagFilteringField?.field_value !== undefined) {
-          setFormValue((prev) => ({
-            ...prev,
-            enableTagFiltering: tagFilteringField.field_value,
-          }));
+          // Set enable_tag_filtering value
+          const tagFilteringField = data.fields.find((field: any) => field.field_name === "enable_tag_filtering");
+          if (tagFilteringField?.field_value !== null && tagFilteringField?.field_value !== undefined) {
+            setFormValue((prev) => ({
+              ...prev,
+              enableTagFiltering: tagFilteringField.field_value,
+            }));
+          }
         }
-      }
-    });
-  }, [accessToken, userRole, userID]);
+      })
+      .catch(() => setSourcesState({ sessionKey, sources: null, failed: true }));
+  }, [accessToken, userRole, userID, sessionKey]);
 
   const handleSaveChanges = async () => {
     if (!accessToken) {
@@ -177,7 +183,19 @@ const RouterSettings: React.FC<RouterSettingsProps> = ({ accessToken, userRole,
     }
   };
 
-  if (!accessToken || routerSources === null) {
+  if (!accessToken) {
+    return null;
+  }
+
+  if (sourcesFailed) {
+    return (
+      <div role="alert" className="text-sm text-destructive">
+        Failed to load router settings. Reload the page to try again
+      </div>
+    );
+  }
+
+  if (routerSources === null) {
     return null;
   }
 
diff --git a/ui/litellm-dashboard/src/components/shared/ConfigOwnedField.tsx b/ui/litellm-dashboard/src/components/shared/ConfigOwnedField.tsx
index 0879f459082..1ded0e5cd35 100644
--- a/ui/litellm-dashboard/src/components/shared/ConfigOwnedField.tsx
+++ b/ui/litellm-dashboard/src/components/shared/ConfigOwnedField.tsx
@@ -6,6 +6,12 @@ import type { components } from "@/lib/http/schema";
 export type FieldSource = components["schemas"]["RouterSettingsResponse"]["source"][string];
 export type FieldSourceMap = Partial<Record<string, FieldSource>>;
 
+export interface SourcesState {
+  sessionKey: string;
+  sources: FieldSourceMap | null;
+  failed: boolean;
+}
+
 export const CONFIG_OWNED_MESSAGE = "Set in config.yaml and cannot be changed here";
 
 export const isConfigOwned = (sources: FieldSourceMap | null | undefined, fieldName: string): boolean =>

From 7a258aa2318a7e1a179d67675baf43e7eb4a02ab Mon Sep 17 00:00:00 2001
From: yuneng <yuneng@berri.ai>
Date: Tue, 22 Sep 2026 01:10:01 +0000
Subject: [PATCH 5/5] fix(ui): ignore router source responses from a superseded
 session

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../RouterSettings/Fallbacks/Fallbacks.tsx    | 12 ++++++++--
 .../components/router_settings/index.test.tsx | 22 +++++++++++++++----
 .../src/components/router_settings/index.tsx  |  9 +++++++-
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx
index 86cd345adb8..b82f19b416d 100644
--- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx
@@ -151,9 +151,17 @@ const Fallbacks: React.FC<FallbacksProps> = ({ accessToken, userRole, userID })
       }
       setRouterSettings(router_settings);
     });
+    let cancelled = false;
     getRouterSettingsCall(accessToken)
-      .then((data) => setSourcesState({ sessionKey, sources: data.source ?? {}, failed: false }))
-      .catch(() => setSourcesState({ sessionKey, sources: null, failed: true }));
+      .then((data) => {
+        if (!cancelled) setSourcesState({ sessionKey, sources: data.source ?? {}, failed: false });
+      })
+      .catch(() => {
+        if (!cancelled) setSourcesState({ sessionKey, sources: null, failed: true });
+      });
+    return () => {
+      cancelled = true;
+    };
   }, [accessToken, userRole, userID, sessionKey]);
 
   const handleDeleteClick = (fallbackEntry: FallbackEntry) => {
diff --git a/ui/litellm-dashboard/src/components/router_settings/index.test.tsx b/ui/litellm-dashboard/src/components/router_settings/index.test.tsx
index 01f459d68e9..47ff3c2d51c 100644
--- a/ui/litellm-dashboard/src/components/router_settings/index.test.tsx
+++ b/ui/litellm-dashboard/src/components/router_settings/index.test.tsx
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { fireEvent, renderWithProviders, screen, waitFor } from "../../../tests/test-utils";
+import { act, fireEvent, renderWithProviders, screen, waitFor } from "../../../tests/test-utils";
 import userEvent from "@testing-library/user-event";
 import RouterSettings from "./index";
 
@@ -208,10 +208,24 @@ describe("RouterSettings", () => {
       const { rerender } = renderWithProviders(<RouterSettings {...defaultProps} />);
       expect(await screen.findByRole("button", { name: /save changes/i })).toBeInTheDocument();
 
-      vi.mocked(getRouterSettingsCall).mockReturnValue(new Promise(() => {}));
-      rerender(<RouterSettings {...defaultProps} accessToken="other-token" />);
-
+      let resolveStale: (
+        value: typeof mockRouterSettingsResponse & { source: Record<string, string> },
+      ) => void = () => {};
+      vi.mocked(getRouterSettingsCall).mockReturnValueOnce(
+        new Promise((resolve) => {
+          resolveStale = resolve;
+        }),
+      );
+      rerender(<RouterSettings {...defaultProps} accessToken="stale-token" />);
       expect(screen.queryByRole("button", { name: /save changes/i })).not.toBeInTheDocument();
+
+      vi.mocked(getRouterSettingsCall).mockResolvedValueOnce({ ...mockRouterSettingsResponse, source: {} });
+      rerender(<RouterSettings {...defaultProps} accessToken="current-token" />);
+      expect(await screen.findByRole("button", { name: /save changes/i })).toBeInTheDocument();
+
+      resolveStale({ ...mockRouterSettingsResponse, source: {} });
+      await act(async () => {});
+      expect(screen.getByRole("button", { name: /save changes/i })).toBeInTheDocument();
     });
 
     it("shows an error instead of a blank page when the source request fails", async () => {
diff --git a/ui/litellm-dashboard/src/components/router_settings/index.tsx b/ui/litellm-dashboard/src/components/router_settings/index.tsx
index c611a7eed23..9ed4bc8c747 100644
--- a/ui/litellm-dashboard/src/components/router_settings/index.tsx
+++ b/ui/litellm-dashboard/src/components/router_settings/index.tsx
@@ -48,8 +48,10 @@ const RouterSettings: React.FC<RouterSettingsProps> = ({ accessToken, userRole,
         selectedStrategy: initialStrategy,
       }));
     });
+    let cancelled = false;
     getRouterSettingsCall(accessToken)
       .then((data) => {
+        if (cancelled) return;
         setSourcesState({ sessionKey, sources: data.source ?? {}, failed: false });
         if (data.fields) {
           // Build metadata map for easy lookup
@@ -85,7 +87,12 @@ const RouterSettings: React.FC<RouterSettingsProps> = ({ accessToken, userRole,
           }
         }
       })
-      .catch(() => setSourcesState({ sessionKey, sources: null, failed: true }));
+      .catch(() => {
+        if (!cancelled) setSourcesState({ sessionKey, sources: null, failed: true });
+      });
+    return () => {
+      cancelled = true;
+    };
   }, [accessToken, userRole, userID, sessionKey]);
 
   const handleSaveChanges = async () => {