🔑 refactor: MCP Settings Rendering Logic for OAuth Servers (#8718)

* feat: add OAuth servers to conditional rendering logic for MCPPanel in SideNav

* feat: add startup flag check to conditional rendering logic

* fix: correct improper handling of failure state in reinitialize endpoint

* fix: change MCP config components to better handle servers without customUserVars

- removes the subtle reinitialize button from config components of servers without customUserVars or OAuth
- adds a placeholder message for components where servers have no customUserVars configured

* style: swap CustomUserVarsSection and ServerInitializationSection positions

* style: fix coloring for light mode and align more with existing design patterns

* chore: remove extraneous comments

* chore: reorder imports and `isEnabled` from api package

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

client/src/components/MCP/CustomUserVarsSection.tsx

@@ -110,13 +110,15 @@ export default function CustomUserVarsSection({
 
   const handleRevokeClick = () => {
     onRevoke();
-    // Reset form after revoke
     reset();
   };
 
-  // Don't render if no fields to configure
   if (!fields || Object.keys(fields).length === 0) {
-    return null;
+    return (
+      <div className="p-4 text-center text-sm text-gray-500">
+        {localize('com_sidepanel_mcp_no_custom_vars', { '0': serverName })}
+      </div>
+    );
   }
 
   return (

client/src/components/MCP/MCPConfigDialog.tsx

@@ -132,6 +132,7 @@ export default function MCPConfigDialog({
         <ServerInitializationSection
           serverName={serverName}
           requiresOAuth={serverStatus?.requiresOAuth || false}
+          hasCustomUserVars={fieldsSchema && Object.keys(fieldsSchema).length > 0}
         />
       </OGDialogContent>
     </OGDialog>

client/src/components/MCP/ServerInitializationSection.tsx

@@ -7,11 +7,13 @@ import { useLocalize } from '~/hooks';
 interface ServerInitializationSectionProps {
   serverName: string;
   requiresOAuth: boolean;
+  hasCustomUserVars?: boolean;
 }
 
 export default function ServerInitializationSection({
   serverName,
   requiresOAuth,
+  hasCustomUserVars = false,
 }: ServerInitializationSectionProps) {
   const localize = useLocalize();
 
@@ -39,8 +41,7 @@ export default function ServerInitializationSection({
     cancelOAuthFlow(serverName);
   }, [cancelOAuthFlow, serverName]);
 
-  // Show subtle reinitialize option if connected
-  if (isConnected) {
+  if (isConnected && (requiresOAuth || hasCustomUserVars)) {
     return (
       <div className="flex justify-start">
         <button
@@ -55,11 +56,15 @@ export default function ServerInitializationSection({
     );
   }
 
+  if (isConnected) {
+    return null;
+  }
+
   return (
-    <div className="rounded-lg border border-[#991b1b] bg-[#2C1315] p-4">
+    <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-700 dark:bg-amber-900/20">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <span className="text-sm font-medium text-red-700 dark:text-red-300">
+          <span className="text-sm font-medium text-amber-800 dark:text-amber-200">
             {requiresOAuth
               ? localize('com_ui_mcp_not_authenticated', { 0: serverName })
               : localize('com_ui_mcp_not_initialized', { 0: serverName })}
@@ -70,7 +75,7 @@ export default function ServerInitializationSection({
           <Button
             onClick={handleInitializeClick}
             disabled={isServerInitializing}
-            className="flex items-center gap-2 bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 dark:hover:bg-blue-800"
+            className="btn btn-primary focus:shadow-outline flex w-full items-center justify-center px-4 py-2 font-semibold text-white hover:bg-green-600 focus:border-green-500"
           >
             {isServerInitializing ? (
               <>
@@ -103,7 +108,7 @@ export default function ServerInitializationSection({
           <div className="flex items-center gap-2">
             <Button
               onClick={() => window.open(serverOAuthUrl, '_blank', 'noopener,noreferrer')}
-              className="flex-1 bg-blue-600 text-white hover:bg-blue-700 dark:hover:bg-blue-800"
+              className="flex-1 bg-green-600 text-white hover:bg-green-700 dark:hover:bg-green-800"
             >
               {localize('com_ui_continue_oauth')}
             </Button>

client/src/components/SidePanel/MCP/MCPPanel.tsx

@@ -141,29 +141,31 @@ function MCPPanelContent() {
           {localize('com_sidepanel_mcp_variables_for', { '0': serverBeingEdited.serverName })}
         </h3>
 
-        {/* Server Initialization Section */}
         <div className="mb-4">
-          <ServerInitializationSection
+          <CustomUserVarsSection
             serverName={selectedServerNameForEditing}
-            requiresOAuth={serverStatus?.requiresOAuth || false}
+            fields={serverBeingEdited.config.customUserVars}
+            onSave={(authData) => {
+              if (selectedServerNameForEditing) {
+                handleConfigSave(selectedServerNameForEditing, authData);
+              }
+            }}
+            onRevoke={() => {
+              if (selectedServerNameForEditing) {
+                handleConfigRevoke(selectedServerNameForEditing);
+              }
+            }}
+            isSubmitting={updateUserPluginsMutation.isLoading}
           />
         </div>
 
-        {/* Custom User Variables Section */}
-        <CustomUserVarsSection
+        <ServerInitializationSection
           serverName={selectedServerNameForEditing}
-          fields={serverBeingEdited.config.customUserVars}
-          onSave={(authData) => {
-            if (selectedServerNameForEditing) {
-              handleConfigSave(selectedServerNameForEditing, authData);
-            }
-          }}
-          onRevoke={() => {
-            if (selectedServerNameForEditing) {
-              handleConfigRevoke(selectedServerNameForEditing);
-            }
-          }}
-          isSubmitting={updateUserPluginsMutation.isLoading}
+          requiresOAuth={serverStatus?.requiresOAuth || false}
+          hasCustomUserVars={
+            serverBeingEdited.config.customUserVars &&
+            Object.keys(serverBeingEdited.config.customUserVars).length > 0
+          }
         />
       </div>
     );