refactor: enhance component documentation and improve code clarity in DeleteDialog, LucideIcons, and app.js

public/components/DeleteDialog.jsx

@@ -1,4 +1,9 @@
-// 定义DeleteDialog组件并将其暴露为全局变量
+// Reusable confirmation dialog component for server deletion
+// Props:
+// - isOpen: boolean - Controls dialog visibility
+// - onClose: () => void - Handler for dialog dismissal
+// - onConfirm: () => void - Handler for delete confirmation
+// - serverName: string - Name of the server to be deleted
 window.DeleteDialog = function DeleteDialog({ isOpen, onClose, onConfirm, serverName }) {
   return (
     <div className={`${isOpen ? 'block' : 'hidden'} fixed inset-0 bg-black bg-opacity-50 z-50`}>

public/components/LucideIcons.jsx

@@ -1,4 +1,7 @@
-// Simple implementation of Chevron icons without relying on the Lucide library
+// Lightweight implementation of Lucide icons without external dependencies
+// Each icon component accepts:
+// - size: number (default: 24) - Icon dimensions in pixels
+// - className: string - Additional CSS classes
 
 const ChevronDown = ({ size = 24, className = "" }) => (
   <svg 
@@ -34,7 +37,7 @@ const ChevronRight = ({ size = 24, className = "" }) => (
   </svg>
 );
 
-// Make icons available globally
+// Export icons to global scope for use in other components
 window.LucideIcons = {
   ChevronDown,
   ChevronRight

public/js/app.js

@@ -1,6 +1,7 @@
 const { useState, useEffect, Fragment } = React;
 const { ChevronDown, ChevronRight } = window.LucideIcons || {};
 
+// Status badge component with predefined color schemes
 function Badge({ status }) {
   const colors = {
     connecting: 'bg-yellow-100 text-yellow-800',
@@ -17,6 +18,7 @@ function Badge({ status }) {
   );
 }
 
+// Displays tool details with expandable input schema
 function ToolCard({ tool }) {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -56,6 +58,7 @@ function ToolCard({ tool }) {
   );
 }
 
+// Main server card component for displaying server status and available tools
 function ServerCard({ server, onRemove }) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
@@ -124,6 +127,7 @@ function ServerCard({ server, onRemove }) {
   );
 }
 
+// Form component for adding new MCP servers with stdio or SSE protocol support
 function AddServerForm({ onAdd }) {
   const [modalVisible, setModalVisible] = useState(false);
   const [serverType, setServerType] = useState('stdio');
@@ -142,6 +146,7 @@ function AddServerForm({ onAdd }) {
     setFormData({ ...formData, [name]: value });
   };
 
+  // Transform space-separated arguments string into array
   const handleArgsChange = (value) => {
     let args = value.split(' ').filter((arg) => arg.trim() !== '');
     setFormData({ ...formData, arguments: value, args });
@@ -171,12 +176,12 @@ function AddServerForm({ onAdd }) {
     }
   };
 
+  // Submit handler for server configuration
   const handleSubmit = async (e) => {
     e.preventDefault();
     setError(null);
 
     try {
-      // Convert env vars array to object format
       const env = {};
       envVars.forEach(({ key, value }) => {
         if (key.trim()) {
@@ -413,6 +418,7 @@ function AddServerForm({ onAdd }) {
   );
 }
 
+// Root application component managing server state and UI
 function App() {
   const [servers, setServers] = useState([]);
   const [error, setError] = useState(null);