🔌 refactor: MCP UI with Improved Accessibility and Reusable Components (#11118)

* feat: enhance MCP server selection UI with new components and improved accessibility

* fix(i18n): add missing com_ui_mcp_servers translation key

The MCP server menu aria-label was referencing a non-existent translation
key. Added the missing key for accessibility.

* feat(MCP): enhance MCP components with improved accessibility and focus management

* fix(i18n): remove outdated MCP server translation keys

* fix(MCPServerList): improve color contrast by updating text color for no MCP servers message

* refactor(MCP): Server status components and improve user action handling
Updated MCPServerStatusIcon to use a unified icon system for better clarity
Introduced new MCPCardActions component for standardized action buttons on server cards
Created MCPServerCard component to encapsulate server display logic and actions
Enhanced MCPServerList to render MCPServerCard components, improving code organization
Added MCPStatusBadge for consistent status representation in dialogs
Updated utility functions for status color and text retrieval to align with new design
Improved localization keys for better clarity and consistency in user messages

* style(MCP): update button and card background styles for improved UI consistency

* feat(MCP): implement global server initialization state management using Jotai

* refactor(MCP): modularize MCPServerDialog into structured component architecture

- Split monolithic dialog into dedicated section components (Auth, BasicInfo, Connection, Transport, Trust)
- Extract form logic into useMCPServerForm custom hook
- Add utility modules for JSON import and URL handling
- Introduce reusable SecretInput component in @librechat/client
- Remove deprecated MCPAuth component

* style(MCP): update button styles for improved layout and adjust empty state background color

* refactor(Radio): enhance component mounting logic and background style updates

* refactor(translation): remove unused keys and streamline localization strings

packages/client/src/components/FilterInput.tsx

@@ -33,7 +33,7 @@ const FilterInput = React.forwardRef<HTMLInputElement, FilterInputProps>(
           placeholder=" "
           aria-label={label}
           className={cn(
-            'peer flex h-10 w-full rounded-lg border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+            'peer flex h-10 w-full rounded-lg border border-border-light bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
             className,
           )}
           {...props}

packages/client/src/components/Radio.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useLayoutEffect, useCallback, memo } from 'react';
+import React, { useState, useRef, useLayoutEffect, useEffect, useCallback, memo } from 'react';
 import { useLocalize } from '~/hooks';
 
 interface Option {
@@ -25,8 +25,9 @@ const Radio = memo(function Radio({
   fullWidth = false,
 }: RadioProps) {
   const localize = useLocalize();
-  const [currentValue, setCurrentValue] = useState<string>(value ?? '');
   const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const [isMounted, setIsMounted] = useState(false);
+  const [currentValue, setCurrentValue] = useState<string>(value ?? '');
   const [backgroundStyle, setBackgroundStyle] = useState<React.CSSProperties>({});
 
   const handleChange = (newValue: string) => {
@@ -51,9 +52,21 @@ const Radio = memo(function Radio({
     }
   }, [currentValue, options]);
 
+  // Mark as mounted after dialog animations settle
+  // Timeout ensures we wait for CSS transitions to complete
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setIsMounted(true);
+    }, 50);
+
+    return () => clearTimeout(timeout);
+  }, []);
+
   useLayoutEffect(() => {
-    updateBackgroundStyle();
-  }, [updateBackgroundStyle]);
+    if (isMounted) {
+      updateBackgroundStyle();
+    }
+  }, [isMounted, updateBackgroundStyle]);
 
   useLayoutEffect(() => {
     if (value !== undefined) {
@@ -81,7 +94,7 @@ const Radio = memo(function Radio({
       className={`relative ${fullWidth ? 'flex' : 'inline-flex'} items-center rounded-lg bg-muted p-1 ${className}`}
       role="radiogroup"
     >
-      {selectedIndex >= 0 && (
+      {selectedIndex >= 0 && isMounted && (
         <div
           className="pointer-events-none absolute inset-y-1 rounded-md border border-border/50 bg-background shadow-sm transition-all duration-300 ease-out"
           style={backgroundStyle}

packages/client/src/components/SecretInput.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { useState, useCallback } from 'react';
+import { Eye, EyeOff, Copy, Check } from 'lucide-react';
+import { cn } from '~/utils';
+
+export interface SecretInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  /** Show copy button */
+  showCopy?: boolean;
+  /** Callback when value is copied */
+  onCopy?: () => void;
+  /** Duration in ms to show checkmark after copy (default: 2000) */
+  copyFeedbackDuration?: number;
+}
+
+const SecretInput = React.forwardRef<HTMLInputElement, SecretInputProps>(
+  (
+    { className, showCopy = false, onCopy, copyFeedbackDuration = 2000, disabled, value, ...props },
+    ref,
+  ) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const [isCopied, setIsCopied] = useState(false);
+
+    const toggleVisibility = useCallback(() => {
+      setIsVisible((prev) => !prev);
+    }, []);
+
+    const handleCopy = useCallback(async () => {
+      if (isCopied || disabled) {
+        return;
+      }
+
+      const textToCopy = typeof value === 'string' ? value : '';
+      if (!textToCopy) {
+        return;
+      }
+
+      try {
+        await navigator.clipboard.writeText(textToCopy);
+        setIsCopied(true);
+        onCopy?.();
+
+        setTimeout(() => {
+          setIsCopied(false);
+        }, copyFeedbackDuration);
+      } catch (err) {
+        console.error('Failed to copy:', err);
+      }
+    }, [value, isCopied, disabled, onCopy, copyFeedbackDuration]);
+
+    return (
+      <div className="relative flex items-center">
+        <input
+          type={isVisible ? 'text' : 'password'}
+          className={cn(
+            'flex h-10 w-full rounded-lg border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+            showCopy ? 'pr-20' : 'pr-10',
+            className ?? '',
+          )}
+          ref={ref}
+          disabled={disabled}
+          value={value}
+          autoComplete="off"
+          spellCheck={false}
+          {...props}
+        />
+        <div className="absolute right-1 flex items-center gap-0.5">
+          {showCopy && (
+            <button
+              type="button"
+              onClick={handleCopy}
+              disabled={disabled || !value}
+              className={cn(
+                'flex size-8 items-center justify-center rounded-md text-text-secondary transition-colors',
+                disabled || !value
+                  ? 'cursor-not-allowed opacity-50'
+                  : 'hover:bg-surface-hover hover:text-text-primary',
+              )}
+              aria-label={isCopied ? 'Copied' : 'Copy to clipboard'}
+            >
+              {isCopied ? <Check className="size-4" /> : <Copy className="size-4" />}
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={toggleVisibility}
+            disabled={disabled}
+            className={cn(
+              'flex size-8 items-center justify-center rounded-md text-text-secondary transition-colors',
+              disabled
+                ? 'cursor-not-allowed opacity-50'
+                : 'hover:bg-surface-hover hover:text-text-primary',
+            )}
+            aria-label={isVisible ? 'Hide password' : 'Show password'}
+          >
+            {isVisible ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+          </button>
+        </div>
+      </div>
+    );
+  },
+);
+
+SecretInput.displayName = 'SecretInput';
+
+export { SecretInput };

packages/client/src/components/index.ts

@@ -9,6 +9,7 @@ export * from './DropdownMenu';
 export * from './HoverCard';
 export * from './Input';
 export * from './InputNumber';
+export * from './SecretInput';
 export * from './FilterInput';
 export * from './Label';
 export * from './OriginalDialog';
@@ -31,12 +32,12 @@ export * from './InputOTP';
 export * from './MultiSearch';
 export * from './Resizable';
 export * from './Select';
-export { default as DataTable } from './DataTable';
 export { default as Radio } from './Radio';
 export { default as Badge } from './Badge';
 export { default as Avatar } from './Avatar';
 export { default as Combobox } from './Combobox';
 export { default as Dropdown } from './Dropdown';
+export { default as DataTable } from './DataTable';
 export { default as SplitText } from './SplitText';
 export { default as FormInput } from './FormInput';
 export { default as PixelCard } from './PixelCard';