imcp 0.0.10 → 0.0.12

package/dist/web/public/css/detailsWidget.css

@@ -0,0 +1,110 @@
+.details-widget {
+    transition: all 0.3s ease-in-out;
+}
+
+.tools-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 0.5rem;
+    padding: 0.5rem;
+}
+
+.tool-card {
+    transition: all 0.3s ease-out;
+    border: 1px solid #e5e7eb;
+    margin-bottom: 0.5rem;
+    padding: 0.75rem;
+}
+
+.tool-card.active {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    border-left: 4px solid #3b82f6;
+    background-color: #f8fafc;
+}
+
+.tool-card-header {
+    position: relative;
+    padding-right: 2rem;
+}
+
+.tool-card-header::after {
+    content: '';
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 12px;
+    height: 12px;
+    border-right: 2px solid #64748b;
+    border-bottom: 2px solid #64748b;
+    transform-origin: 75% 75%;
+    transition: transform 0.3s ease;
+}
+
+.tool-card.active .tool-card-header::after {
+    transform: translateY(-50%) rotate(45deg);
+}
+
+.tool-details {
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition: all 0.3s ease-out;
+}
+
+.tool-details.visible {
+    max-height: 1500px;
+    opacity: 1;
+    padding-top: 0.75rem;
+    margin-top: 0.75rem;
+    border-top: 1px solid #e5e7eb;
+}
+
+.property-item {
+    margin-bottom: 0.75rem;
+    padding-left: 0.75rem;
+    border-left: 2px solid #e5e7eb;
+    transition: border-color 0.2s ease;
+    font-size: 0.9rem;
+}
+
+.property-item:hover {
+    border-left-color: #3b82f6;
+}
+
+.property-header {
+    margin-bottom: 0.5rem;
+}
+
+.property-name {
+    font-weight: 600;
+    color: #1e293b;
+}
+
+.property-type {
+    color: #64748b;
+    font-size: 0.875rem;
+}
+
+.property-desc {
+    color: #475569;
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    margin-top: 0.25rem;
+}
+
+.required-fields {
+    background-color: #fef3c7;
+    border-left: 4px solid #f59e0b;
+    padding: 0.5rem 0.75rem;
+    margin-bottom: 1rem;
+    font-size: 0.875rem;
+}
+
+.nested-properties {
+    margin-left: 0.75rem;
+    padding-left: 0.75rem;
+    border-left: 1px solid #e5e7eb;
+    margin-top: 0.5rem;
+    font-size: 0.875rem;
+}

package/dist/web/public/css/modal.css

@@ -160,6 +160,15 @@ body {
     transition: all 0.2s ease;
     cursor: pointer;
     user-select: none;
+    gap: 0.5rem;
+}
+
+/* Client actions container */
+.client-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-left: auto;
 }
 
 .client-item:hover {
@@ -180,6 +189,14 @@ body {
     gap: 0.75rem;
 }
 
+/* Status container */
+.status-container {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-left: auto;
+}
+
 /* Status badges */
 .status-badge {
     display: inline-flex;
@@ -227,6 +244,31 @@ body {
     background-color: #fef3c7;
 }
 
+/* Uninstall button styling */
+.uninstall-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    border: 1px solid transparent;
+    background: transparent;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    padding: 0;
+}
+
+.uninstall-btn:hover {
+    background-color: #fee2e2;
+    border-color: #ef4444;
+    transform: scale(1.05);
+}
+
+.uninstall-btn i {
+    font-size: 1.25rem;
+}
+
 /* Environment variables section */
 #modalEnvInputs input {
     width: 100%;

package/dist/web/public/css/serverDetails.css

@@ -6,16 +6,14 @@
 }
 
 .server-item-content {
+    position: relative;
     border: 1px solid #e5e7eb;
     border-radius: 0.5rem;
     padding: 1rem;
+    padding-right: calc(120px + 3rem); /* Button width + spacing */
     margin-bottom: 1rem;
     background-color: #ffffff;
     transition: all 0.2s ease;
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: bottom; /* Center items vertically */
 }
 
 .server-item:hover .server-item-content {
@@ -38,8 +36,9 @@
 }
 
 .details-widget.expanded {
-    max-height: 500px; /* Adjust based on content */
+    max-height: 800px; /* Increased height to accommodate more content */
     border-color: #3b82f6;
+    transition: max-height 0.3s ease-in-out;
 }
 
 .details-widget-content {
@@ -59,40 +58,53 @@
     border-color: #3b82f6;
 }
 
-/* Server item content layout */
+/* Server item layout */
 .server-item-info {
-    flex: 1;
-    padding-right: 1rem;
-    min-width: 0; /* Prevent content from overflowing */
-}
-
-/* Install/Uninstall buttons positioning */
-.action-buttons {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    margin-left: 1rem; /* Add some space between content and button */
+    width: 100%;
 }
 
-/* Ensure buttons stay in place on hover */
-.server-item:hover .action-buttons {
-    position: relative;
-    z-index: 2;
+.server-item-header {
+    margin-bottom: 1rem;
 }
 
-/* Button styles */
-.action-buttons button {
-    white-space: nowrap;
-    padding: 0.5rem 1rem; /* Slightly larger padding for better visibility */
-    min-width: 80px; /* Ensure consistent button width */
-    text-align: center;
+.server-item-header h5 {
+    margin-bottom: 0.5rem;
 }
 
-/* Status badges layout */
-.server-item-info .flex-wrap {
+/* Client status section */
+.flex-wrap {
     margin: -0.25rem; /* Negative margin to offset badge spacing */
 }
 
-.server-item-info .flex-wrap > * {
+.flex-wrap > * {
     margin: 0.25rem; /* Even spacing between badges */
+}
+
+/* Install/Uninstall button section */
+.action-buttons {
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    margin: 0;
+}
+
+.action-buttons button {
+    min-width: 120px;
+    padding: 0.5rem 1.5rem;
+    text-align: center;
+    font-weight: 600;
+    transition: all 0.15s ease;
+    white-space: nowrap;
+}
+
+/* Status badges */
+.server-item-info .flex-wrap span {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.375rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    line-height: 1;
+    white-space: nowrap;
 }

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

@@ -2,44 +2,257 @@ 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);
         this.container.appendChild(this.widgetElement);
     }
 
-    setContent(description) {
-        this.contentElement.innerHTML = `
-            <div class="description-text">
-                ${description || 'No description available.'}
-            </div>
-        `;
+    setContent(content) {
+        if (typeof content === 'string') {
+            this.contentElement.innerHTML = `
+                <div class="description-text">
+                    ${content || 'No description available.'}
+                </div>
+            `;
+            return;
+        }
+
+        // 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>';
     }
 
+    // Maintain compatibility with old toggle behavior
     toggle() {
-        this.isExpanded = !this.isExpanded;
         if (this.isExpanded) {
-            this.expand();
-        } else {
             this.collapse();
+        } else {
+            this.expand();
         }
     }
 
     expand() {
+        this.isExpanded = true;
         this.widgetElement.classList.add('expanded');
-        this.container.querySelector('.server-item-content').classList.add('expanded');
+        if (this.container.querySelector('.server-item-content')) {
+            this.container.querySelector('.server-item-content').classList.add('expanded');
+        }
     }
 
     collapse() {
+        this.isExpanded = false;
         this.widgetElement.classList.remove('expanded');
-        this.container.querySelector('.server-item-content').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">
+        `;
+
+        Object.entries(schemaContent).forEach(([toolName, toolInfo]) => {
+            if (!toolInfo) return;
+
+            html += `
+                <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>
+            </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) {
+        if (!schema || typeof schema !== 'object') {
+            return '<p>No input schema available</p>';
+        }
+
+        if (!schema.properties || Object.keys(schema.properties).length === 0) {
+            return '<p>No input properties defined</p>';
+        }
+
+        let html = '<div class="properties-list">';
+
+        try {
+            // 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: ${schema.required.join(', ')}
+                        </span>
+                    </div>
+                `;
+            }
+
+            // Render each property
+            Object.entries(schema.properties).forEach(([propName, propDetails]) => {
+                if (!propDetails) return;
+
+                const isRequired = schema.required?.includes(propName);
+                const type = this.getPropertyType(propDetails);
+
+                html += `
+                    <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">${this.escapeHtml(propDetails.description)}</p>` : ''}
+                        ${propDetails.default !== undefined ?
+                        `<p class="property-default">Default: ${this.escapeHtml(JSON.stringify(propDetails.default))}</p>` : ''}
+                        ${this.renderNestedProperties(propDetails)}
+                    </div>
+                `;
+            });
+
+            return html + '</div>';
+        } catch (error) {
+            console.error('Error rendering input schema:', error);
+            return '<p>Error rendering input schema</p>';
+        }
+    }
+
+    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 '';
+    }
+
+    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) {
+        if (unsafe === undefined || unsafe === null) {
+            return '';
+        }
+        return String(unsafe)
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#039;");
     }
 
     isVisible() {