chore: update mcp sdk dependencies to latest versions (#546)

frontend/src/components/GroupCard.tsx

@@ -1,99 +1,103 @@
-import { useState, useRef, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Group, Server, IGroupServerConfig } from '@/types'
-import { Edit, Trash, Copy, Check, Link, FileCode, DropdownIcon, Wrench } from '@/components/icons/LucideIcons'
-import DeleteDialog from '@/components/ui/DeleteDialog'
-import { useToast } from '@/contexts/ToastContext'
-import { useSettingsData } from '@/hooks/useSettingsData'
+import { useState, useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Group, Server, IGroupServerConfig } from '@/types';
+import {
+  Edit,
+  Trash,
+  Copy,
+  Check,
+  Link,
+  FileCode,
+  DropdownIcon,
+  Wrench,
+} from '@/components/icons/LucideIcons';
+import DeleteDialog from '@/components/ui/DeleteDialog';
+import { useToast } from '@/contexts/ToastContext';
+import { useSettingsData } from '@/hooks/useSettingsData';
 
 interface GroupCardProps {
-  group: Group
-  servers: Server[]
-  onEdit: (group: Group) => void
-  onDelete: (groupId: string) => void
+  group: Group;
+  servers: Server[];
+  onEdit: (group: Group) => void;
+  onDelete: (groupId: string) => void;
 }
 
-const GroupCard = ({
-  group,
-  servers,
-  onEdit,
-  onDelete
-}: GroupCardProps) => {
-  const { t } = useTranslation()
-  const { showToast } = useToast()
-  const { installConfig } = useSettingsData()
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
-  const [copied, setCopied] = useState(false)
-  const [showCopyDropdown, setShowCopyDropdown] = useState(false)
-  const [expandedServer, setExpandedServer] = useState<string | null>(null)
-  const dropdownRef = useRef<HTMLDivElement>(null)
+const GroupCard = ({ group, servers, onEdit, onDelete }: GroupCardProps) => {
+  const { t } = useTranslation();
+  const { showToast } = useToast();
+  const { installConfig } = useSettingsData();
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [showCopyDropdown, setShowCopyDropdown] = useState(false);
+  const [expandedServer, setExpandedServer] = useState<string | null>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
   // Close dropdown when clicking outside
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setShowCopyDropdown(false)
+        setShowCopyDropdown(false);
       }
-    }
+    };
 
-    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('mousedown', handleClickOutside);
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [])
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
 
   const handleEdit = () => {
-    onEdit(group)
-  }
+    onEdit(group);
+  };
 
   const handleDelete = () => {
-    setShowDeleteDialog(true)
-  }
+    setShowDeleteDialog(true);
+  };
 
   const handleConfirmDelete = () => {
-    onDelete(group.id)
-    setShowDeleteDialog(false)
-  }
+    onDelete(group.id);
+    setShowDeleteDialog(false);
+  };
 
   const copyToClipboard = (text: string) => {
     if (navigator.clipboard && window.isSecureContext) {
       navigator.clipboard.writeText(text).then(() => {
-        setCopied(true)
-        setShowCopyDropdown(false)
-        showToast(t('common.copySuccess'), 'success')
-        setTimeout(() => setCopied(false), 2000)
-      })
+        setCopied(true);
+        setShowCopyDropdown(false);
+        showToast(t('common.copySuccess'), 'success');
+        setTimeout(() => setCopied(false), 2000);
+      });
     } else {
       // Fallback for HTTP or unsupported clipboard API
-      const textArea = document.createElement('textarea')
-      textArea.value = text
+      const textArea = document.createElement('textarea');
+      textArea.value = text;
       // Avoid scrolling to bottom
-      textArea.style.position = 'fixed'
-      textArea.style.left = '-9999px'
-      document.body.appendChild(textArea)
-      textArea.focus()
-      textArea.select()
+      textArea.style.position = 'fixed';
+      textArea.style.left = '-9999px';
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
       try {
-        document.execCommand('copy')
-        setCopied(true)
-        setShowCopyDropdown(false)
-        showToast(t('common.copySuccess'), 'success')
-        setTimeout(() => setCopied(false), 2000)
+        document.execCommand('copy');
+        setCopied(true);
+        setShowCopyDropdown(false);
+        showToast(t('common.copySuccess'), 'success');
+        setTimeout(() => setCopied(false), 2000);
       } catch (err) {
-        showToast(t('common.copyFailed') || 'Copy failed', 'error')
-        console.error('Copy to clipboard failed:', err)
+        showToast(t('common.copyFailed') || 'Copy failed', 'error');
+        console.error('Copy to clipboard failed:', err);
       }
-      document.body.removeChild(textArea)
+      document.body.removeChild(textArea);
     }
-  }
+  };
 
   const handleCopyId = () => {
-    copyToClipboard(group.id)
-  }
+    copyToClipboard(group.id);
+  };
 
   const handleCopyUrl = () => {
-    copyToClipboard(`${installConfig.baseUrl}/mcp/${group.id}`)
-  }
+    copyToClipboard(`${installConfig.baseUrl}/mcp/${group.id}`);
+  };
 
   const handleCopyJson = () => {
     const jsonConfig = {
@@ -101,23 +105,23 @@ const GroupCard = ({
         mcphub: {
           url: `${installConfig.baseUrl}/mcp/${group.id}`,
           headers: {
-            Authorization: "Bearer <your-access-token>"
-          }
-        }
-      }
-    }
-    copyToClipboard(JSON.stringify(jsonConfig, null, 2))
-  }
+            Authorization: 'Bearer <your-access-token>',
+          },
+        },
+      },
+    };
+    copyToClipboard(JSON.stringify(jsonConfig, null, 2));
+  };
 
   // Helper function to normalize group servers to get server names
   const getServerNames = (servers: string[] | IGroupServerConfig[]): string[] => {
-    return servers.map(server => typeof server === 'string' ? server : server.name);
+    return servers.map((server) => (typeof server === 'string' ? server : server.name));
   };
 
   // Helper function to get server configuration
   const getServerConfig = (serverName: string): IGroupServerConfig | undefined => {
-    const server = group.servers.find(s =>
-      typeof s === 'string' ? s === serverName : s.name === serverName
+    const server = group.servers.find((s) =>
+      typeof s === 'string' ? s === serverName : s.name === serverName,
     );
     if (typeof server === 'string') {
       return { name: server, tools: 'all' };
@@ -127,11 +131,11 @@ const GroupCard = ({
 
   // Get servers that belong to this group
   const serverNames = getServerNames(group.servers);
-  const groupServers = servers.filter(server => serverNames.includes(server.name));
+  const groupServers = servers.filter((server) => serverNames.includes(server.name));
 
   return (
-    <div className="bg-white shadow rounded-lg p-6 ">
-      <div className="flex justify-between items-center mb-4">
+    <div className="bg-white shadow rounded-lg p-4">
+      <div className="flex justify-between items-center">
         <div>
           <div className="flex items-center">
             <h2 className="text-xl font-semibold text-gray-800">{group.name}</h2>
@@ -175,9 +179,7 @@ const GroupCard = ({
               </div>
             </div>
           </div>
-          {group.description && (
-            <p className="text-gray-600 text-sm mt-1">{group.description}</p>
-          )}
+          {group.description && <p className="text-gray-600 text-sm mt-1">{group.description}</p>}
         </div>
         <div className="flex items-center space-x-3">
           <div className="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm btn-secondary">
@@ -200,17 +202,19 @@ const GroupCard = ({
         </div>
       </div>
 
-      <div className="mt-4">
+      <div className="">
         {groupServers.length === 0 ? (
           <p className="text-gray-500 italic">{t('groups.noServers')}</p>
         ) : (
           <div className="flex flex-wrap gap-2">
-            {groupServers.map(server => {
+            {groupServers.map((server) => {
               const serverConfig = getServerConfig(server.name);
-              const hasToolRestrictions = serverConfig && serverConfig.tools !== 'all' && Array.isArray(serverConfig.tools);
-              const toolCount = hasToolRestrictions && Array.isArray(serverConfig?.tools)
-                ? serverConfig.tools.length
-                : (server.tools?.length || 0); // Show total tool count when all tools are selected
+              const hasToolRestrictions =
+                serverConfig && serverConfig.tools !== 'all' && Array.isArray(serverConfig.tools);
+              const toolCount =
+                hasToolRestrictions && Array.isArray(serverConfig?.tools)
+                  ? serverConfig.tools.length
+                  : server.tools?.length || 0; // Show total tool count when all tools are selected
 
               const isExpanded = expandedServer === server.name;
 
@@ -219,7 +223,7 @@ const GroupCard = ({
                 if (hasToolRestrictions && Array.isArray(serverConfig?.tools)) {
                   return serverConfig.tools;
                 } else if (server.tools && server.tools.length > 0) {
-                  return server.tools.map(tool => tool.name);
+                  return server.tools.map((tool) => tool.name);
                 }
                 return [];
               };
@@ -235,9 +239,15 @@ const GroupCard = ({
                     onClick={handleServerClick}
                   >
                     <span className="font-medium text-gray-700 text-sm">{server.name}</span>
-                    <span className={`inline-block h-2 w-2 rounded-full ${server.status === 'connected' ? 'bg-green-500' :
-                      server.status === 'connecting' ? 'bg-yellow-500' : 'bg-red-500'
-                      }`}></span>
+                    <span
+                      className={`inline-block h-2 w-2 rounded-full ${
+                        server.status === 'connected'
+                          ? 'bg-green-500'
+                          : server.status === 'connecting'
+                            ? 'bg-yellow-500'
+                            : 'bg-red-500'
+                      }`}
+                    ></span>
                     {toolCount > 0 && (
                       <span className="text-xs text-blue-600 bg-blue-100 px-2 py-0.5 rounded flex items-center gap-1">
                         <Wrench size={12} />
@@ -278,7 +288,7 @@ const GroupCard = ({
         isGroup={true}
       />
     </div>
-  )
-}
+  );
+};
 
-export default GroupCard
+export default GroupCard;

frontend/src/components/ServerCard.tsx

@@ -18,7 +18,14 @@ interface ServerCardProps {
   onReload?: (server: Server) => Promise<boolean>;
 }
 
-const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh, onReload }: ServerCardProps) => {
+const ServerCard = ({
+  server,
+  onRemove,
+  onEdit,
+  onToggle,
+  onRefresh,
+  onReload,
+}: ServerCardProps) => {
   const { t } = useTranslation();
   const { showToast } = useToast();
   const [isExpanded, setIsExpanded] = useState(false);
@@ -232,10 +239,10 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh, onReload }:
   return (
     <>
       <div
-        className={`bg-white shadow rounded-lg p-6 mb-6 page-card transition-all duration-200 ${server.enabled === false ? 'opacity-60' : ''}`}
+        className={`bg-white shadow rounded-lg mb-6 page-card transition-all duration-200 ${server.enabled === false ? 'opacity-60' : ''}`}
       >
         <div
-          className="flex justify-between items-center cursor-pointer"
+          className="flex justify-between items-center cursor-pointer p-4"
           onClick={() => setIsExpanded(!isExpanded)}
         >
           <div className="flex items-center space-x-3">
@@ -385,9 +392,9 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh, onReload }:
         {isExpanded && (
           <>
             {server.tools && (
-              <div className="mt-6">
+              <div className="px-4">
                 <h6
-                  className={`font-medium ${server.enabled === false ? 'text-gray-600' : 'text-gray-900'} mb-4`}
+                  className={`font-medium ${server.enabled === false ? 'text-gray-600' : 'text-gray-900'} mb-2`}
                 >
                   {t('server.tools')}
                 </h6>
@@ -405,9 +412,9 @@ const ServerCard = ({ server, onRemove, onEdit, onToggle, onRefresh, onReload }:
             )}
 
             {server.prompts && (
-              <div className="mt-6">
+              <div className="px-4 pb-2">
                 <h6
-                  className={`font-medium ${server.enabled === false ? 'text-gray-600' : 'text-gray-900'} mb-4`}
+                  className={`font-medium ${server.enabled === false ? 'text-gray-600' : 'text-gray-900'}`}
                 >
                   {t('server.prompts')}
                 </h6>

frontend/src/components/ui/PromptCard.tsx

@@ -171,9 +171,9 @@ const PromptCard = ({ prompt, server, onToggle, onDescriptionUpdate }: PromptCar
   };
 
   return (
-    <div className="bg-white border border-gray-200 shadow rounded-lg p-4 mb-4">
+    <div className="bg-white border border-gray-200 shadow rounded-lg mb-4">
       <div
-        className="flex justify-between items-center cursor-pointer"
+        className="flex justify-between items-center p-2 cursor-pointer"
         onClick={() => setIsExpanded(!isExpanded)}
       >
         <div className="flex-1">

frontend/src/components/ui/ToolCard.tsx

@@ -1,19 +1,27 @@
-import { useState, useCallback, useRef, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Tool } from '@/types'
-import { ChevronDown, ChevronRight, Play, Loader, Edit, Check, Copy } from '@/components/icons/LucideIcons'
-import { callTool, ToolCallResult, updateToolDescription } from '@/services/toolService'
-import { useSettingsData } from '@/hooks/useSettingsData'
-import { useToast } from '@/contexts/ToastContext'
-import { Switch } from './ToggleGroup'
-import DynamicForm from './DynamicForm'
-import ToolResult from './ToolResult'
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tool } from '@/types';
+import {
+  ChevronDown,
+  ChevronRight,
+  Play,
+  Loader,
+  Edit,
+  Check,
+  Copy,
+} from '@/components/icons/LucideIcons';
+import { callTool, ToolCallResult, updateToolDescription } from '@/services/toolService';
+import { useSettingsData } from '@/hooks/useSettingsData';
+import { useToast } from '@/contexts/ToastContext';
+import { Switch } from './ToggleGroup';
+import DynamicForm from './DynamicForm';
+import ToolResult from './ToolResult';
 
 interface ToolCardProps {
-  server: string
-  tool: Tool
-  onToggle?: (toolName: string, enabled: boolean) => void
-  onDescriptionUpdate?: (toolName: string, description: string) => void
+  server: string;
+  tool: Tool;
+  onToggle?: (toolName: string, enabled: boolean) => void;
+  onDescriptionUpdate?: (toolName: string, description: string) => void;
 }
 
 // Helper to check for "empty" values
@@ -26,165 +34,173 @@ function isEmptyValue(value: any): boolean {
 }
 
 const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps) => {
-  const { t } = useTranslation()
-  const { showToast } = useToast()
-  const { nameSeparator } = useSettingsData()
-  const [isExpanded, setIsExpanded] = useState(false)
-  const [showRunForm, setShowRunForm] = useState(false)
-  const [isRunning, setIsRunning] = useState(false)
-  const [result, setResult] = useState<ToolCallResult | null>(null)
-  const [isEditingDescription, setIsEditingDescription] = useState(false)
-  const [customDescription, setCustomDescription] = useState(tool.description || '')
-  const descriptionInputRef = useRef<HTMLInputElement>(null)
-  const descriptionTextRef = useRef<HTMLSpanElement>(null)
-  const [textWidth, setTextWidth] = useState<number>(0)
-  const [copiedToolName, setCopiedToolName] = useState(false)
+  const { t } = useTranslation();
+  const { showToast } = useToast();
+  const { nameSeparator } = useSettingsData();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [showRunForm, setShowRunForm] = useState(false);
+  const [isRunning, setIsRunning] = useState(false);
+  const [result, setResult] = useState<ToolCallResult | null>(null);
+  const [isEditingDescription, setIsEditingDescription] = useState(false);
+  const [customDescription, setCustomDescription] = useState(tool.description || '');
+  const descriptionInputRef = useRef<HTMLInputElement>(null);
+  const descriptionTextRef = useRef<HTMLSpanElement>(null);
+  const [textWidth, setTextWidth] = useState<number>(0);
+  const [copiedToolName, setCopiedToolName] = useState(false);
 
   // Focus the input when editing mode is activated
   useEffect(() => {
     if (isEditingDescription && descriptionInputRef.current) {
-      descriptionInputRef.current.focus()
+      descriptionInputRef.current.focus();
       // Set input width to match text width
       if (textWidth > 0) {
-        descriptionInputRef.current.style.width = `${textWidth + 20}px` // Add some padding
+        descriptionInputRef.current.style.width = `${textWidth + 20}px`; // Add some padding
       }
     }
-  }, [isEditingDescription, textWidth])
+  }, [isEditingDescription, textWidth]);
 
   // Measure text width when not editing
   useEffect(() => {
     if (!isEditingDescription && descriptionTextRef.current) {
-      setTextWidth(descriptionTextRef.current.offsetWidth)
+      setTextWidth(descriptionTextRef.current.offsetWidth);
     }
-  }, [isEditingDescription, customDescription])
+  }, [isEditingDescription, customDescription]);
 
   // Generate a unique key for localStorage based on tool name and server
   const getStorageKey = useCallback(() => {
-    return `mcphub_tool_form_${server ? `${server}_` : ''}${tool.name}`
-  }, [tool.name, server])
+    return `mcphub_tool_form_${server ? `${server}_` : ''}${tool.name}`;
+  }, [tool.name, server]);
 
   // Clear form data from localStorage
   const clearStoredFormData = useCallback(() => {
-    localStorage.removeItem(getStorageKey())
-  }, [getStorageKey])
+    localStorage.removeItem(getStorageKey());
+  }, [getStorageKey]);
 
   const handleToggle = (enabled: boolean) => {
     if (onToggle) {
-      onToggle(tool.name, enabled)
+      onToggle(tool.name, enabled);
     }
-  }
+  };
 
   const handleDescriptionEdit = () => {
-    setIsEditingDescription(true)
-  }
+    setIsEditingDescription(true);
+  };
 
   const handleDescriptionSave = async () => {
     try {
-      const result = await updateToolDescription(server, tool.name, customDescription)
+      const result = await updateToolDescription(server, tool.name, customDescription);
       if (result.success) {
-        setIsEditingDescription(false)
+        setIsEditingDescription(false);
         if (onDescriptionUpdate) {
-          onDescriptionUpdate(tool.name, customDescription)
+          onDescriptionUpdate(tool.name, customDescription);
         }
       } else {
         // Revert on error
-        setCustomDescription(tool.description || '')
-        console.error('Failed to update tool description:', result.error)
+        setCustomDescription(tool.description || '');
+        console.error('Failed to update tool description:', result.error);
       }
     } catch (error) {
-      console.error('Error updating tool description:', error)
-      setCustomDescription(tool.description || '')
-      setIsEditingDescription(false)
+      console.error('Error updating tool description:', error);
+      setCustomDescription(tool.description || '');
+      setIsEditingDescription(false);
     }
-  }
+  };
 
   const handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setCustomDescription(e.target.value)
-  }
+    setCustomDescription(e.target.value);
+  };
 
   const handleDescriptionKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
-      handleDescriptionSave()
+      handleDescriptionSave();
     } else if (e.key === 'Escape') {
-      setCustomDescription(tool.description || '')
-      setIsEditingDescription(false)
+      setCustomDescription(tool.description || '');
+      setIsEditingDescription(false);
     }
-  }
+  };
 
   const handleCopyToolName = async (e: React.MouseEvent) => {
-    e.stopPropagation()
-    
+    e.stopPropagation();
+
     try {
       if (navigator.clipboard && window.isSecureContext) {
-        await navigator.clipboard.writeText(tool.name)
-        setCopiedToolName(true)
-        showToast(t('common.copySuccess'), 'success')
-        setTimeout(() => setCopiedToolName(false), 2000)
+        await navigator.clipboard.writeText(tool.name);
+        setCopiedToolName(true);
+        showToast(t('common.copySuccess'), 'success');
+        setTimeout(() => setCopiedToolName(false), 2000);
       } else {
         // Fallback for HTTP or unsupported clipboard API
-        const textArea = document.createElement('textarea')
-        textArea.value = tool.name
-        textArea.style.position = 'fixed'
-        textArea.style.left = '-9999px'
-        document.body.appendChild(textArea)
-        textArea.focus()
-        textArea.select()
+        const textArea = document.createElement('textarea');
+        textArea.value = tool.name;
+        textArea.style.position = 'fixed';
+        textArea.style.left = '-9999px';
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
         try {
-          document.execCommand('copy')
-          setCopiedToolName(true)
-          showToast(t('common.copySuccess'), 'success')
-          setTimeout(() => setCopiedToolName(false), 2000)
+          document.execCommand('copy');
+          setCopiedToolName(true);
+          showToast(t('common.copySuccess'), 'success');
+          setTimeout(() => setCopiedToolName(false), 2000);
         } catch (err) {
-          showToast(t('common.copyFailed'), 'error')
-          console.error('Copy to clipboard failed:', err)
+          showToast(t('common.copyFailed'), 'error');
+          console.error('Copy to clipboard failed:', err);
         }
-        document.body.removeChild(textArea)
+        document.body.removeChild(textArea);
       }
     } catch (error) {
-      showToast(t('common.copyFailed'), 'error')
-      console.error('Copy to clipboard failed:', error)
+      showToast(t('common.copyFailed'), 'error');
+      console.error('Copy to clipboard failed:', error);
     }
-  }
+  };
 
   const handleRunTool = async (arguments_: Record<string, any>) => {
-    setIsRunning(true)
+    setIsRunning(true);
     try {
       // filter empty values
-      arguments_ = Object.fromEntries(Object.entries(arguments_).filter(([_, v]) => !isEmptyValue(v)))
-      const result = await callTool({
-        toolName: tool.name,
-        arguments: arguments_,
-      }, server)
+      arguments_ = Object.fromEntries(
+        Object.entries(arguments_).filter(([_, v]) => !isEmptyValue(v)),
+      );
+      const result = await callTool(
+        {
+          toolName: tool.name,
+          arguments: arguments_,
+        },
+        server,
+      );
 
-      setResult(result)
+      setResult(result);
       // Clear form data on successful submission
       // clearStoredFormData()
     } catch (error) {
       setResult({
         success: false,
         error: error instanceof Error ? error.message : 'Unknown error occurred',
-      })
+      });
     } finally {
-      setIsRunning(false)
+      setIsRunning(false);
     }
-  }
+  };
 
   const handleCancelRun = () => {
-    setShowRunForm(false)
+    setShowRunForm(false);
     // Clear form data when cancelled
-    clearStoredFormData()
-    setResult(null)
-  }
+    clearStoredFormData();
+    setResult(null);
+  };
 
   const handleCloseResult = () => {
-    setResult(null)
-  }
+    setResult(null);
+  };
 
   return (
-    <div className="bg-white border border-gray-200 shadow rounded-lg p-4 mb-4">
+    <div className="bg-white border border-gray-200 shadow rounded-lg mb-4">
       <div
-        className="flex justify-between items-center cursor-pointer"
-        onClick={() => setIsExpanded(!isExpanded)}
+        className="flex justify-between items-center cursor-pointer p-2"
+        onClick={(e) => {
+          e.stopPropagation();
+          setIsExpanded(!isExpanded);
+        }}
       >
         <div className="flex-1">
           <h3 className="text-lg font-medium text-gray-900 inline-flex items-center">
@@ -194,11 +210,7 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
               onClick={handleCopyToolName}
               title={t('common.copy')}
             >
-              {copiedToolName ? (
-                <Check size={16} className="text-green-500" />
-              ) : (
-                <Copy size={16} />
-              )}
+              {copiedToolName ? <Check size={16} className="text-green-500" /> : <Copy size={16} />}
             </button>
             <span className="ml-2 text-sm font-normal text-gray-600 inline-flex items-center">
               {isEditingDescription ? (
@@ -213,14 +225,14 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
                     onClick={(e) => e.stopPropagation()}
                     style={{
                       minWidth: '100px',
-                      width: textWidth > 0 ? `${textWidth + 20}px` : 'auto'
+                      width: textWidth > 0 ? `${textWidth + 20}px` : 'auto',
                     }}
                   />
                   <button
                     className="ml-2 p-1 text-green-600 hover:text-green-800 cursor-pointer transition-colors"
                     onClick={(e) => {
-                      e.stopPropagation()
-                      handleDescriptionSave()
+                      e.stopPropagation();
+                      handleDescriptionSave();
                     }}
                   >
                     <Check size={16} />
@@ -228,12 +240,14 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
                 </>
               ) : (
                 <>
-                  <span ref={descriptionTextRef}>{customDescription || t('tool.noDescription')}</span>
+                  <span ref={descriptionTextRef}>
+                    {customDescription || t('tool.noDescription')}
+                  </span>
                   <button
                     className="ml-2 p-1 text-gray-500 hover:text-blue-600 cursor-pointer transition-colors"
                     onClick={(e) => {
-                      e.stopPropagation()
-                      handleDescriptionEdit()
+                      e.stopPropagation();
+                      handleDescriptionEdit();
                     }}
                   >
                     <Edit size={14} />
@@ -244,10 +258,7 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
           </h3>
         </div>
         <div className="flex items-center space-x-2">
-          <div
-            className="flex items-center space-x-2"
-            onClick={(e) => e.stopPropagation()}
-          >
+          <div className="flex items-center space-x-2" onClick={(e) => e.stopPropagation()}>
             <Switch
               checked={tool.enabled ?? true}
               onCheckedChange={handleToggle}
@@ -256,18 +267,14 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
           </div>
           <button
             onClick={(e) => {
-              e.stopPropagation()
-              setIsExpanded(true) // Ensure card is expanded when showing run form
-              setShowRunForm(true)
+              e.stopPropagation();
+              setIsExpanded(true); // Ensure card is expanded when showing run form
+              setShowRunForm(true);
             }}
             className="flex items-center space-x-1 px-3 py-1 text-sm text-blue-600 bg-blue-50 hover:bg-blue-100 rounded-md transition-colors btn-primary"
             disabled={isRunning || !tool.enabled}
           >
-            {isRunning ? (
-              <Loader size={14} className="animate-spin" />
-            ) : (
-              <Play size={14} />
-            )}
+            {isRunning ? <Loader size={14} className="animate-spin" /> : <Play size={14} />}
             <span>{isRunning ? t('tool.running') : t('tool.run')}</span>
           </button>
           <button className="text-gray-400 hover:text-gray-600">
@@ -297,7 +304,9 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
                 onCancel={handleCancelRun}
                 loading={isRunning}
                 storageKey={getStorageKey()}
-                title={t('tool.runToolWithName', { name: tool.name.replace(server + nameSeparator, '') })}
+                title={t('tool.runToolWithName', {
+                  name: tool.name.replace(server + nameSeparator, ''),
+                })}
               />
               {/* Tool Result */}
               {result && (
@@ -307,12 +316,10 @@ const ToolCard = ({ tool, server, onToggle, onDescriptionUpdate }: ToolCardProps
               )}
             </div>
           )}
-
-
         </div>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default ToolCard
+export default ToolCard;