imcp 0.0.11 → 0.0.12

package/dist/web/public/js/detailsWidget.js

@@ -2,13 +2,20 @@ export class DetailsWidget {
     constructor(container) {
         this.container = container;
         this.isExpanded = false;
+        this.expandedTool = null;
         this.init();
     }
 
     init() {
-        // Create details widget elements
+        // Create and append stylesheet
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = '/css/detailsWidget.css';
+        document.head.appendChild(link);
+
         this.widgetElement = document.createElement('div');
         this.widgetElement.className = 'details-widget';
+        this.widgetElement.style.overflow = 'auto'; // Enable scrolling
         this.contentElement = document.createElement('div');
         this.contentElement.className = 'details-widget-content';
         this.widgetElement.appendChild(this.contentElement);
@@ -25,41 +32,130 @@ export class DetailsWidget {
             return;
         }
 
-        // If content is a schema object
-        if (content.schema) {
-            this.contentElement.innerHTML = this.renderSchema(content.schema);
+        // Handle direct schema object or wrapped schema object
+        if (typeof content === 'object') {
+            const schemaData = content.schema || content; // Handle both {schema: data} and direct data
+            this.renderToolsList(schemaData);
+            return;
         }
+
+        this.contentElement.innerHTML = '<p>Invalid content format</p>';
     }
 
-    renderSchema(schema) {
-        if (!schema || typeof schema !== 'object') {
-            return '<p>Invalid schema format</p>';
+    // Maintain compatibility with old toggle behavior
+    toggle() {
+        if (this.isExpanded) {
+            this.collapse();
+        } else {
+            this.expand();
         }
+    }
 
-        // The schema object from the API is wrapped in a "schema" property
-        const schemaContent = schema.schema || schema;
+    expand() {
+        this.isExpanded = true;
+        this.widgetElement.classList.add('expanded');
+        if (this.container.querySelector('.server-item-content')) {
+            this.container.querySelector('.server-item-content').classList.add('expanded');
+        }
+    }
 
-        let html = '<div class="schema-content p-4">';
+    collapse() {
+        this.isExpanded = false;
+        this.widgetElement.classList.remove('expanded');
+        if (this.container.querySelector('.server-item-content')) {
+            this.container.querySelector('.server-item-content').classList.remove('expanded');
+        }
+        // Reset expanded tool state
+        this.expandedTool = null;
+    }
+
+    renderToolsList(schemaContent) {
+        if (!schemaContent || typeof schemaContent !== 'object') {
+            this.contentElement.innerHTML = '<p>Invalid schema format</p>';
+            return;
+        }
+
+        let html = `
+            <div class="tools-list p-2">
+                <div class="tools-grid grid gap-2">
+        `;
 
-        // Iterate through each tool in schema
         Object.entries(schemaContent).forEach(([toolName, toolInfo]) => {
-            if (!toolInfo) return; // Skip if tool info is undefined
+            if (!toolInfo) return;
 
             html += `
-                <div class="tool-section mb-6 border-b border-gray-200 pb-4">
-                    <h3 class="text-lg font-semibold text-blue-600 mb-2">${toolInfo.name || toolName}</h3>
-                    <p class="text-gray-700 mb-4">${toolInfo.description || 'No description available'}</p>
-                    
-                    <div class="input-schema bg-gray-50 p-4 rounded-lg">
-                        <h4 class="text-md font-semibold text-gray-700 mb-2">Input Schema</h4>
+                <div class="tool-card" data-tool="${this.escapeHtml(toolName)}">
+                    <div class="tool-card-header">
+                        <div class="tool-header mb-2">
+                            <h3 class="text-md font-semibold text-blue-600">${toolInfo.name || toolName}</h3>
+                        </div>
+                        <p class="text-gray-700 text-sm">${toolInfo.description || 'No description available'}</p>
+                    </div>
+                    <div class="tool-details hidden mt-3" data-tool-details="${this.escapeHtml(toolName)}">
                         ${this.renderInputSchema(toolInfo.inputSchema)}
                     </div>
                 </div>
             `;
         });
 
-        html += '</div>';
-        return html;
+        html += `
+                </div>
+            </div>
+        `;
+
+        this.contentElement.innerHTML = html;
+
+        // Add event listeners to tool cards
+        this.contentElement.querySelectorAll('.tool-card').forEach(card => {
+            const header = card.querySelector('.tool-card-header');
+            header.addEventListener('click', (e) => {
+                e.stopPropagation(); // Prevent click from bubbling up to server-item
+                const toolName = card.dataset.tool;
+                this.toggleToolDetails(toolName, card);
+            });
+
+            // Add click handler for the details area to prevent bubbling
+            const details = card.querySelector('.tool-details');
+            details.addEventListener('click', (e) => {
+                e.stopPropagation(); // Prevent click from bubbling up
+            });
+        });
+    }
+
+    toggleToolDetails(toolName, card) {
+        const detailsElement = card.querySelector(`[data-tool-details="${toolName}"]`);
+        const isExpanded = !detailsElement.classList.contains('hidden');
+
+        // Collapse all other expanded tools
+        if (this.expandedTool && this.expandedTool !== toolName) {
+            const prevCard = this.contentElement.querySelector(`[data-tool="${this.expandedTool}"]`);
+            if (prevCard) {
+                const prevDetails = prevCard.querySelector(`[data-tool-details="${this.expandedTool}"]`);
+                prevDetails?.classList.add('hidden');
+                prevCard.classList.remove('active');
+                setTimeout(() => {
+                    prevDetails.classList.remove('visible');
+                }, 0);
+            }
+        }
+
+        // Toggle current tool with animation
+        if (isExpanded) {
+            detailsElement.classList.remove('visible');
+            card.classList.remove('active');
+            setTimeout(() => {
+                detailsElement.classList.add('hidden');
+            }, 300); // Match transition duration from CSS
+            this.expandedTool = null;
+        } else {
+            detailsElement.classList.remove('hidden');
+            card.classList.add('active');
+            setTimeout(() => {
+                detailsElement.classList.add('visible');
+            }, 0);
+            this.expandedTool = toolName;
+            detailsElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
     }
 
     renderInputSchema(schema) {
@@ -67,7 +163,6 @@ export class DetailsWidget {
             return '<p>No input schema available</p>';
         }
 
-        // Handle case where schema might be empty or have no properties
         if (!schema.properties || Object.keys(schema.properties).length === 0) {
             return '<p>No input properties defined</p>';
         }
@@ -75,55 +170,77 @@ export class DetailsWidget {
         let html = '<div class="properties-list">';
 
         try {
-            // Required fields banner if any
-            if (schema.required && Array.isArray(schema.required) && schema.required.length > 0) {
+            // Required fields banner
+            if (schema.required?.length > 0) {
                 html += `
                     <div class="required-fields mb-3 bg-yellow-50 p-2 rounded">
-                        <span class="text-sm font-medium text-yellow-800">Required fields: ${schema.required.join(', ')}</span>
+                        <span class="text-sm font-medium text-yellow-800">
+                            Required: ${schema.required.join(', ')}
+                        </span>
                     </div>
                 `;
             }
 
             // Render each property
             Object.entries(schema.properties).forEach(([propName, propDetails]) => {
-                if (!propDetails) return; // Skip if property details are undefined
+                if (!propDetails) return;
 
-                const isRequired = schema.required && Array.isArray(schema.required) && schema.required.includes(propName);
-                const type = propDetails.type || 'any';
+                const isRequired = schema.required?.includes(propName);
+                const type = this.getPropertyType(propDetails);
 
                 html += `
-                    <div class="property-item mb-3 ${isRequired ? 'required' : ''} border-l-2 ${isRequired ? 'border-blue-500' : 'border-gray-300'} pl-3">
-                        <div class="property-header flex items-center gap-2">
-                            <span class="property-name font-medium text-gray-900">${this.escapeHtml(propName)}</span>
-                            <span class="property-type text-sm text-gray-500">(${this.escapeHtml(type)})</span>
-                            ${isRequired ? '<span class="required-badge text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded">Required</span>' : ''}
+                    <div class="property-item ${isRequired ? 'required' : ''}">
+                        <div class="property-header">
+                            <span class="property-name">${this.escapeHtml(propName)}</span>
+                            <span class="property-type">${this.escapeHtml(type)}</span>
+                            ${isRequired ? '<span class="required-badge">Required</span>' : ''}
                         </div>
-                        ${propDetails.description ? `<p class="property-desc text-sm text-gray-600 mt-1">${this.escapeHtml(propDetails.description)}</p>` : ''}
-                        ${propDetails.default !== undefined ? `<p class="property-default text-sm text-gray-500 mt-1">Default: ${this.escapeHtml(JSON.stringify(propDetails.default))}</p>` : ''}
+                        ${propDetails.description ?
+                        `<p class="property-desc">${this.escapeHtml(propDetails.description)}</p>` : ''}
+                        ${propDetails.default !== undefined ?
+                        `<p class="property-default">Default: ${this.escapeHtml(JSON.stringify(propDetails.default))}</p>` : ''}
+                        ${this.renderNestedProperties(propDetails)}
                     </div>
                 `;
             });
 
-            html += '</div>';
-            return html;
+            return html + '</div>';
         } catch (error) {
             console.error('Error rendering input schema:', error);
             return '<p>Error rendering input schema</p>';
         }
     }
 
-    toggle() {
-        this.isExpanded = !this.isExpanded;
-        if (this.isExpanded) {
-            this.expand();
-        } else {
-            this.collapse();
+    renderNestedProperties(propDetails) {
+        if (propDetails.properties) {
+            let html = '<div class="nested-properties">';
+            Object.entries(propDetails.properties).forEach(([name, details]) => {
+                const type = this.getPropertyType(details);
+                html += `
+                    <div class="nested-property-item">
+                        <div class="property-header">
+                            <span class="property-name">${this.escapeHtml(name)}</span>
+                            <span class="property-type">${this.escapeHtml(type)}</span>
+                        </div>
+                        ${details.description ?
+                        `<p class="property-desc">${this.escapeHtml(details.description)}</p>` : ''}
+                    </div>
+                `;
+            });
+            return html + '</div>';
         }
+        return '';
     }
 
-    expand() {
-        this.widgetElement.classList.add('expanded');
-        this.container.querySelector('.server-item-content').classList.add('expanded');
+    getPropertyType(propDetails) {
+        if (propDetails.anyOf) {
+            return `oneOf: [${propDetails.anyOf.map(type => type.type || 'any').join(', ')}]`;
+        }
+        if (propDetails.type === 'array') {
+            const itemType = propDetails.items?.type || 'any';
+            return `array<${itemType}>`;
+        }
+        return propDetails.type || 'any';
     }
 
     escapeHtml(unsafe) {
@@ -138,11 +255,6 @@ export class DetailsWidget {
             .replace(/'/g, "&#039;");
     }
 
-    collapse() {
-        this.widgetElement.classList.remove('expanded');
-        this.container.querySelector('.server-item-content').classList.remove('expanded');
-    }
-
     isVisible() {
         return this.isExpanded;
     }

package/dist/web/public/js/modal.js

@@ -141,14 +141,16 @@ function _appendInstallLoadingMessage(message) {
 /**
  * Display the installation loading modal and prepare it for messages.
  */
-function showInstallLoadingModal() {
+function showInstallLoadingModal(operation = 'Installing') {
     const loadingModal = document.getElementById('installLoadingModal');
     const loadingMsg = document.getElementById('installLoadingMessage');
-    if (loadingModal && loadingMsg) {
+    const loadingTitle = document.querySelector('.loading-title');
+    if (loadingModal && loadingMsg && loadingTitle) {
         loadingModal.style.display = 'block';
         loadingMsg.innerHTML = '';
+        loadingTitle.textContent = `${operation}...`;
     } else {
-        console.error('[LoadingModal] Required elements not found: installLoadingModal or installLoadingMessage');
+        console.error('[LoadingModal] Required elements not found: installLoadingModal, installLoadingMessage, or loading-title');
     }
 }
 
@@ -330,17 +332,55 @@ async function showInstallModal(categoryName, serverName, callback) {
             // Add elements to client info
             clientInfo.appendChild(clientName);
 
-            // Add client info (name) to the item first
+            // Add elements to client item
             clientItem.appendChild(clientInfo);
 
+            // Status container for badge and uninstall button
+            const statusContainer = document.createElement('div');
+            statusContainer.className = 'status-container';
+
             // Status badge - only show if we have status text
             if (statusText) {
                 const statusBadge = document.createElement('span');
                 statusBadge.className = `status-badge ${statusClass}`;
                 statusBadge.textContent = statusText;
-                clientItem.appendChild(statusBadge);
+                statusContainer.appendChild(statusBadge);
+
+                // Add uninstall button right after status badge if installed
+                if (operationStatus.status === 'completed' && operationStatus.type === 'install') {
+                    const uninstallBtn = document.createElement('button');
+                    uninstallBtn.className = 'uninstall-btn text-red-600 hover:text-red-800 ml-2';
+                    uninstallBtn.innerHTML = '<i class="bx bx-trash"></i>';
+                    uninstallBtn.title = 'Uninstall from this client';
+                    uninstallBtn.onclick = async (e) => {
+                        e.stopPropagation(); // Prevent item selection
+                        e.preventDefault(); // Prevent form submission
+                        const confirmed = await showConfirm('Uninstall Confirmation', `Are you sure you want to uninstall ${serverName} from ${target}?`);
+                        if (confirmed) {
+                            // Add target to selectedClients for uninstallation
+                            window.selectedClients = [target];
+                            showInstallLoadingModal('Uninstalling');
+                            const serverList = {
+                                [serverName]: {
+                                    removeData: true // Include removal of associated data
+                                }
+                            };
+                            try {
+                                delayedAppendInstallLoadingMessage(`Uninstalling ${serverName} from ${target}...`);
+                                await uninstallTools(categoryName, serverList, [target]);
+                            } catch (error) {
+                                delayedAppendInstallLoadingMessage(`Error: ${error.message}`);
+                                throw error; // Re-throw to trigger error handling in uninstallTools
+                            }
+                        }
+                        return false; // Prevent form submission
+                    };
+                    statusContainer.appendChild(uninstallBtn);
+                }
             }
 
+            clientItem.appendChild(statusContainer);
+
             // Add client item to target div
             targetDiv.appendChild(clientItem);
         });
@@ -641,34 +681,40 @@ async function showInstallModal(categoryName, serverName, callback) {
                 });
             });
 
-            // Get selected clients
-            const selectedTargets = window.selectedClients.length > 0 ?
-                window.selectedClients :
-                Array.from(document.querySelectorAll('.client-item.selected'))
-                    .map(item => item.dataset.target);
-
             // Check if we have any requirements selected for update
             const hasRequirementsToUpdate = requirementsToUpdate.length > 0;
 
-            // Only require client selection if we don't have any requirements to update
-            if (selectedTargets.length === 0 && !hasRequirementsToUpdate) {
-                showToast('Please select at least one client to configure.', 'error');
-                return;
+            // Only proceed if this isn't an uninstall operation
+            const uninstallBtn = document.querySelector('.uninstall-btn');
+            if (!uninstallBtn || !uninstallBtn.matches(':active')) {
+                // Get selected clients
+                const selectedTargets = window.selectedClients.length > 0 ?
+                    window.selectedClients :
+                    Array.from(document.querySelectorAll('.client-item.selected'))
+                        .map(item => item.dataset.target);
+
+                console.log('Selected targets:', selectedTargets);
+                console.log('Requirements to update:', requirementsToUpdate);
+                if (selectedTargets.length === 0 && !hasRequirementsToUpdate) {
+                    showToast('Please select at least one client to configure.', 'error');
+                    return;
+                }
+                window.selectedClients = selectedTargets;
             }
 
             // Call install function with selected targets
             // Find installing message for the first selected target
             let installingMessage = "Starting installation...";
             const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
-            if (selectedTargets.length > 0) {
-                const target = selectedTargets[0];
+            if (window.selectedClients.length > 0) {
+                const target = window.selectedClients[0];
                 const msg = serverStatus.installedStatus?.[target]?.message;
                 if (msg) installingMessage = msg;
             }
 
             // Add requirements to update to serverInstallOptions if any
             const serverInstallOptions = {
-                targetClients: selectedTargets,
+                targetClients: window.selectedClients,
                 env: envVars,
                 args: args,
                 settings: pythonEnv ? { pythonEnv } : undefined
@@ -679,7 +725,9 @@ async function showInstallModal(categoryName, serverName, callback) {
                 serverInstallOptions.requirements = requirementsToUpdate;
             }
 
-            handleBulkClientInstall(categoryName, serverName, selectedTargets, envVars, installingMessage, serverData, serverInstallOptions);
+            // For installation, use the selectedTargets from the validation above
+            const targetsToUse = document.querySelector('.uninstall-btn:hover') ? [] : window.selectedClients;
+            handleBulkClientInstall(categoryName, serverName, targetsToUse, envVars, installingMessage, serverData, serverInstallOptions);
         };
 
     } catch (error) {
@@ -893,23 +941,35 @@ async function pollInstallStatus(categoryName, serverName, targets, interval = 2
 
 // Function to handle client uninstallation for multiple targets
 async function uninstallTools(categoryName, serverList, targets) {
-    if (!Array.isArray(targets)) {
-        targets = [targets]; // Convert single target to array for backward compatibility
-    }
-
-    const confirmed = await showConfirm(`Are you sure you want to uninstall this server for ${targets.length} client(s)?`);
-    if (!confirmed) {
+    // Get selected targets from window.selectedClients or the provided targets
+    const selectedTargets = window.selectedClients || (Array.isArray(targets) ? targets : [targets]);
+    
+    // Validate selected targets
+    if (!selectedTargets || selectedTargets.length === 0) {
+        showToast('Please select at least one client to uninstall.', 'error');
         return;
     }
 
     try {
+        delayedAppendInstallLoadingMessage('Starting uninstallation...');
+
+        // Ensure serverList is an object where each key is a server name
+        if (Array.isArray(serverList)) {
+            const formattedServerList = {};
+            serverList.forEach(server => {
+                formattedServerList[server] = { removeData: true };
+            });
+            serverList = formattedServerList;
+        }
+
         const response = await fetch(`/api/categories/${categoryName}/uninstall`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({
-                toolList: serverList,
+                serverList: serverList,
                 options: {
-                    targets: targets
+                    targets: selectedTargets,
+                    removeData: true
                 }
             })
         });
@@ -924,10 +984,14 @@ async function uninstallTools(categoryName, serverList, targets) {
             throw new Error(result.error || 'Uninstallation failed');
         }
 
-        showToast(`Successfully uninstalled for ${targets.length} client(s).`, 'success');
-        location.reload(); // Refresh the page to update the UI
+        // Add completion message and trigger completion UI
+        delayedAppendInstallLoadingMessage(`Successfully uninstalled from ${selectedTargets.join(', ')}`, true);
+        
+        // Clear selected clients after successful uninstall
+        window.selectedClients = [];
     } catch (error) {
         console.error('Error uninstalling tools:', error);
+        delayedAppendInstallLoadingMessage(`Error: ${error.message}`, true);
         showToast(`Error uninstalling tools: ${error.message}`, 'error');
     }
 }

package/dist/web/public/js/notifications.js

@@ -30,28 +30,26 @@ function showToast(message, type = 'success') {
     });
 }
 
-// Function to show a Bootstrap confirmation dialog
-function showConfirm(message) {
+// Function to show a confirmation dialog using custom modal system
+function showConfirm(title, message) {
     return new Promise((resolve) => {
         const modalId = `confirm-modal-${Date.now()}`;
         const modalHtml = `
-            <div class="modal fade" id="${modalId}" tabindex="-1" aria-labelledby="${modalId}-label" aria-hidden="true">
-                <div class="modal-dialog">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <h5 class="modal-title" id="${modalId}-label">Confirm Action</h5>
-                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                        </div>
-                        <div class="modal-body">
-                            ${message}
-                        </div>
-                        <div class="modal-footer">
-                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                            <button type="button" class="btn btn-primary confirm-action">
-                                <span class="spinner-border spinner-border-sm d-none me-2" role="status" aria-hidden="true"></span>
-                                Confirm
-                            </button>
-                        </div>
+            <div id="${modalId}" class="modal">
+                <div class="modal-content" style="max-width: 400px; margin: 15% auto;">
+                    <div class="modal-header">
+                        <h3 class="text-lg font-semibold text-gray-700">${title}</h3>
+                    </div>
+                    <div style="margin: 1rem 0;">
+                        ${message}
+                    </div>
+                    <div style="display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem;">
+                        <button type="button" class="cancel-button px-4 py-2 text-gray-600 hover:text-gray-800 font-medium rounded-lg hover:bg-gray-100 transition-colors">
+                            Cancel
+                        </button>
+                        <button type="button" class="confirm-button submit-button">
+                            Confirm
+                        </button>
                     </div>
                 </div>
             </div>
@@ -60,29 +58,30 @@ function showConfirm(message) {
         document.body.insertAdjacentHTML('beforeend', modalHtml);
         
         const modalElement = document.getElementById(modalId);
-        const modal = new bootstrap.Modal(modalElement);
+        modalElement.style.display = 'block';
         
         // Handle confirm button click
-        modalElement.querySelector('.confirm-action').addEventListener('click', (event) => {
-            const button = event.currentTarget;
-            const spinner = button.querySelector('.spinner-border');
-            button.disabled = true;
-            spinner.classList.remove('d-none');
-            
-            // Add small delay to show the loading state
-            setTimeout(() => {
-                modal.hide();
-                resolve(true);
-            }, 300);
+        modalElement.querySelector('.confirm-button').addEventListener('click', () => {
+            modalElement.style.display = 'none';
+            modalElement.remove();
+            resolve(true);
         });
         
-        // Handle modal hidden event
-        modalElement.addEventListener('hidden.bs.modal', () => {
+        // Handle cancel button click
+        modalElement.querySelector('.cancel-button').addEventListener('click', () => {
+            modalElement.style.display = 'none';
             modalElement.remove();
             resolve(false);
         });
-        
-        modal.show();
+
+        // Handle click outside modal
+        modalElement.addEventListener('click', (event) => {
+            if (event.target === modalElement) {
+                modalElement.style.display = 'none';
+                modalElement.remove();
+                resolve(false);
+            }
+        });
     });
 }
 

package/dist/web/server.js

@@ -110,13 +110,24 @@ app.post('/api/categories/:categoryName/uninstall', async (req, res) => {
     try {
         const { categoryName } = req.params;
         const { serverList } = req.body;
-        if (!Array.isArray(serverList) || serverList.length === 0) {
+        if (!serverList || Object.keys(serverList).length === 0) {
             return res.status(400).json({
                 success: false,
                 error: 'Invalid tool list provided'
             });
         }
-        const results = await Promise.all(serverList.map(serverName => serverService.uninstallMcpServer(categoryName, serverName)));
+        const { options } = req.body;
+        if (!options?.targets || options.targets.length === 0) {
+            return res.status(400).json({
+                success: false,
+                error: 'No target clients specified'
+            });
+        }
+        const results = await Promise.all(Object.entries(serverList).map(([serverName, serverOptions]) => serverService.uninstallMcpServer(categoryName, serverName, {
+            ...serverOptions,
+            targets: options.targets,
+            removeData: options.removeData ?? serverOptions.removeData
+        })));
         const { success, messages } = serverService.formatOperationResults(results);
         const response = {
             success,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imcp",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Node.js SDK for Model Context Protocol (MCP)",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",