👐 fix: Return Focus to MCP Edit Button after Dialog Closes

- Added `editButtonRef` prop to `MCPCardActions` for improved focus management.
- Updated `MCPServerCard` to pass a reference to the edit button, enhancing accessibility.
- Modified `MCPServerDialog` to accept a more flexible `triggerRef` type, allowing for better integration with various button elements.

client/src/components/SidePanel/MCPBuilder/MCPCardActions.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Pencil, PlugZap, SlidersHorizontal, RefreshCw, X } from 'lucide-react';
 import { Spinner, TooltipAnchor } from '@librechat/client';
 import type { MCPServerStatus } from 'librechat-data-provider';
@@ -11,6 +12,7 @@ interface MCPCardActionsProps {
   canCancel: boolean;
   hasCustomUserVars: boolean;
   canEdit: boolean;
+  editButtonRef?: React.RefObject<HTMLDivElement>;
   onEditClick: (e: React.MouseEvent) => void;
   onConfigClick: (e: React.MouseEvent) => void;
   onInitialize: () => void;
@@ -34,6 +36,7 @@ export default function MCPCardActions({
   canCancel,
   hasCustomUserVars,
   canEdit,
+  editButtonRef,
   onEditClick,
   onConfigClick,
   onInitialize,
@@ -62,6 +65,7 @@ export default function MCPCardActions({
         {/* Edit button stays visible during loading */}
         {canEdit && (
           <TooltipAnchor
+            ref={editButtonRef}
             description={localize('com_ui_edit')}
             side="top"
             className={buttonBaseClass}
@@ -105,6 +109,7 @@ export default function MCPCardActions({
       {/* Edit button - opens MCPServerDialog to edit server definition */}
       {canEdit && (
         <TooltipAnchor
+          ref={editButtonRef}
           description={localize('com_ui_edit')}
           side="top"
           className={buttonBaseClass}

client/src/components/SidePanel/MCPBuilder/MCPServerCard.tsx

@@ -29,9 +29,9 @@ export default function MCPServerCard({
   canCreateEditMCPs,
 }: MCPServerCardProps) {
   const localize = useLocalize();
+  const triggerRef = useRef<HTMLDivElement>(null);
   const { initializeServer } = useMCPServerManager();
   const [dialogOpen, setDialogOpen] = useState(false);
-  const triggerRef = useRef<HTMLButtonElement>(null);
 
   const statusIconProps = getServerStatusIconProps(server.serverName);
   const {
@@ -125,6 +125,7 @@ export default function MCPServerCard({
             canCancel={canCancel}
             hasCustomUserVars={hasCustomUserVars}
             canEdit={canEdit}
+            editButtonRef={triggerRef}
             onEditClick={handleEditClick}
             onConfigClick={onConfigClick}
             onInitialize={handleInitialize}
@@ -140,12 +141,7 @@ export default function MCPServerCard({
           onOpenChange={setDialogOpen}
           triggerRef={triggerRef}
           server={server}
-        >
-          {/* Hidden trigger for focus management */}
-          <button ref={triggerRef} className="sr-only" tabIndex={-1} aria-hidden="true">
-            {localize('com_ui_edit')} {displayName}
-          </button>
-        </MCPServerDialog>
+        />
       )}
     </>
   );

client/src/components/SidePanel/MCPBuilder/MCPServerDialog/index.tsx

@@ -25,8 +25,8 @@ import MCPServerForm from './MCPServerForm';
 interface MCPServerDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  children: React.ReactNode;
-  triggerRef?: React.MutableRefObject<HTMLButtonElement | null>;
+  children?: React.ReactNode;
+  triggerRef?: React.MutableRefObject<HTMLDivElement | HTMLButtonElement | null>;
   server?: MCPServerDefinition | null;
 }