imcp 0.0.12 → 0.0.14

package/dist/web/contract/serverContract.d.ts

@@ -0,0 +1,64 @@
+import { DependencyConfig, RegistryConfig, ServerInstallOptions } from '../../core/types.js';
+export interface OnboardServerConfig {
+    name: string;
+    description: string;
+    mode: 'stdio' | 'http';
+    schemas?: string;
+    dependencies?: DependencyConfig;
+    repository?: string;
+    installation: {
+        command: string;
+        args?: string[];
+        env?: Record<string, {
+            name: string;
+            default?: string;
+            required: boolean;
+            description?: string;
+        }>;
+    };
+}
+export type RequirementType = 'npm' | 'pip' | 'command' | 'extension' | 'other';
+export interface OnboardRequirementConfig {
+    type: RequirementType;
+    name: string;
+    version: string;
+    alias?: string;
+    registry?: RegistryConfig;
+}
+export interface OnboardRequestBody {
+    categoryData: {
+        name: string;
+        displayName: string;
+        description?: string;
+        repository?: string;
+        requirements?: OnboardRequirementConfig[];
+        mcpServers?: OnboardServerConfig[];
+    };
+    isUpdate: boolean;
+}
+export interface ListQueryParams {
+    local?: string;
+}
+export interface UpdateRequirementsRequestBody {
+    requirements: {
+        name: string;
+        updateVersion: string;
+    }[];
+}
+export interface InstallServersRequestBody {
+    serverList: Record<string, ServerInstallOptions>;
+}
+export interface UninstallServersRequestBody {
+    serverList: Record<string, {
+        removeData?: boolean;
+    }>;
+    options: {
+        targets: string[];
+        removeData?: boolean;
+    };
+}
+export interface ApiResponse<T> {
+    success: boolean;
+    data?: T;
+    error?: string;
+}

package/dist/web/contract/serverContract.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=serverContract.js.map

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

@@ -1,30 +1,75 @@
 .details-widget {
     transition: all 0.3s ease-in-out;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    display: block;
+    overflow: hidden;
 }
 
-.tools-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-    gap: 0.5rem;
-    padding: 0.5rem;
+.tools-list {
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    padding: 0.1rem;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+.tool-card {
+    width: 100%;
+    margin-bottom: -1px;
+    border-radius: 0;
+    box-sizing: border-box;
+}
+
+.tool-card:first-child {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+}
+
+.tool-card:last-child {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+    margin-bottom: 0;
 }
 
 .tool-card {
     transition: all 0.3s ease-out;
     border: 1px solid #e5e7eb;
-    margin-bottom: 0.5rem;
-    padding: 0.75rem;
+    padding: 0.5rem;
+    background-color: white;
+    position: relative;
+    z-index: 1;
+    font-size: 0.9rem;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.tool-card .text-gray-600 {
+    font-size: 0.75rem;
+    line-height: 1.3;
 }
 
 .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;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
+    border-color: transparent;
     background-color: #f8fafc;
 }
 
+.tool-card:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
 .tool-card-header {
     position: relative;
     padding-right: 2rem;
+    width: 100%;
+    box-sizing: border-box;
+    cursor: pointer;
 }
 
 .tool-card-header::after {
@@ -49,23 +94,33 @@
     max-height: 0;
     opacity: 0;
     overflow: hidden;
-    transition: all 0.3s ease-out;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    background-color: #f9fafb;
+    border-radius: 6px;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
 }
 
 .tool-details.visible {
-    max-height: 1500px;
+    max-height: 2000px;
     opacity: 1;
-    padding-top: 0.75rem;
-    margin-top: 0.75rem;
+    padding: 0.1rem;
+    margin-top: 0.5rem;
     border-top: 1px solid #e5e7eb;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
 }
 
 .property-item {
-    margin-bottom: 0.75rem;
-    padding-left: 0.75rem;
+    margin-bottom: 0.15rem;
+    padding: 0.5rem;
     border-left: 2px solid #e5e7eb;
-    transition: border-color 0.2s ease;
-    font-size: 0.9rem;
+    transition: all 0.2s ease;
+    font-size: 0.8rem;
+    background-color: white;
+    border-radius: 4px;
 }
 
 .property-item:hover {
@@ -73,38 +128,108 @@
 }
 
 .property-header {
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.25rem;
+}
+
+.property-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
 }
 
 .property-name {
     font-weight: 600;
     color: #1e293b;
+    font-size: 0.85rem;
+    background-color: #f8fafc;
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    display: inline-block;
 }
 
 .property-type {
     color: #64748b;
-    font-size: 0.875rem;
+    font-size: 0.65rem;
+    padding: 0.1rem 0.3rem;
+    background: #f1f5f9;
+    border-radius: 3px;
+    font-family: 'Courier New', monospace;
+    margin-left: 0.3rem;
 }
 
 .property-desc {
-    color: #475569;
-    font-size: 0.8125rem;
-    line-height: 1.4;
-    margin-top: 0.25rem;
+    color: #6b7280;
+    font-size: 0.7rem;
+    margin-left: 0.5rem;
+    display: inline-block;
+    font-style: italic;
+}
+
+.property-default {
+    font-size: 0.75rem;
+    color: #6b7280;
+    margin-top: 0.15rem;
+}
+
+.property-default code {
+    background: #f1f5f9;
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-family: 'Courier New', monospace;
+    font-size: 0.85rem;
 }
 
 .required-fields {
-    background-color: #fef3c7;
-    border-left: 4px solid #f59e0b;
-    padding: 0.5rem 0.75rem;
-    margin-bottom: 1rem;
-    font-size: 0.875rem;
+    border-left: 2px solid #64748b;
+    padding: 0.25rem 0.5rem;
+    margin-bottom: 0.5rem;
+    font-size: 0.8rem;
+    border-radius: 2px;
+    color: #64748b;
+}
+.required-star {
+    color: #dc2626;
+    margin-left: 2px;
+    font-weight: bold;
+}
+
+
+/* Ensure proper container behavior for the widget */
+.details-widget-container {
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    position: relative;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
 }
 
 .nested-properties {
-    margin-left: 0.75rem;
-    padding-left: 0.75rem;
+    margin: 0.25rem 0 0.25rem 0.5rem;
+    padding-left: 0.5rem;
     border-left: 1px solid #e5e7eb;
-    margin-top: 0.5rem;
-    font-size: 0.875rem;
+    font-size: 0.8rem;
+}
+
+.nested-property-item {
+    margin-bottom: 0.5rem;
+    padding: 0.25rem 0.5rem;
+}
+
+.nested-property-item .property-name {
+    font-size: 0.85rem;
+}
+
+.nested-property-item .property-type {
+    font-size: 0.8rem;
+    padding: 0.1rem 0.3rem;
+}
+
+.nested-property-item .property-desc {
+    font-size: 0.8rem;
+    margin-top: 0.25rem;
+    color: #64748b;
 }

package/dist/web/public/css/onboard.css

@@ -0,0 +1,44 @@
+/* Onboarding form styles */
+.requirement-item,
+.server-item {
+    background-color: #ffffff;
+    transition: all 0.2s ease;
+}
+
+.requirement-item:hover,
+.server-item:hover {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.registry-config,
+.installation-config,
+.env-variables {
+    background-color: #f9fafb;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    margin-top: 1rem;
+}
+
+.registry-github,
+.registry-artifacts {
+    background-color: #ffffff;
+    border-radius: 0.5rem;
+    padding: 1rem;
+}
+
+/* Order field styling */
+input[type="number"][name$=".order"] {
+    -moz-appearance: textfield;
+}
+
+input[type="number"][name$=".order"]::-webkit-outer-spin-button,
+input[type="number"][name$=".order"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type="number"][name$=".order"]:focus {
+    border-color: #3b82f6;
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}

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

@@ -1,24 +1,24 @@
 /* Server item container */
-.server-item {
+.server-item-content {
     cursor: pointer;
     position: relative;
     transition: all 0.2s ease;
-}
-
-.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;
+    box-sizing: border-box;
     background-color: #ffffff;
-    transition: all 0.2s ease;
+    z-index: 1;
+    margin-bottom: 1rem;
+    width: 100%;
+    max-width: 100%;
+    overflow: visible;
 }
 
-.server-item:hover .server-item-content {
-    border-color: #3b82f6;
-    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
+.server-item-content:hover {
+    border-color: transparent;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     transform: translateY(-1px);
 }
 
@@ -29,20 +29,33 @@
     transition: max-height 0.3s ease-out;
     background-color: #f8fafc;
     border-radius: 0 0 0.5rem 0.5rem;
-    margin-top: -1rem;
-    margin-bottom: 1rem;
+    margin: -1px 0 0;
     border: 1px solid #e5e7eb;
     border-top: none;
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    left: 0;
+    right: 0;
 }
 
 .details-widget.expanded {
-    max-height: 800px; /* Increased height to accommodate more content */
-    border-color: #3b82f6;
-    transition: max-height 0.3s ease-in-out;
+    max-height: 2000px; /* Increased height to accommodate more content */
+    border-color: transparent;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    transition: max-height 0.3s ease-in-out, box-shadow 0.2s ease;
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    display: block;
 }
 
 .details-widget-content {
     padding: 1rem;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 .description-text {
@@ -53,9 +66,12 @@
 
 /* Expand/collapse animation */
 .server-item-content.expanded {
+    border-bottom: none;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-    border-color: #3b82f6;
+    border-color: transparent;
+    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.08);
+    margin-bottom: 0;
 }
 
 /* Server item layout */
@@ -84,13 +100,13 @@
 .action-buttons {
     position: absolute;
     right: 1rem;
-    top: 50%;
-    transform: translateY(-50%);
+    top: calc(2rem + 0.5rem); /* Align with description text (header height + margin-bottom) */
     margin: 0;
+    z-index: 2; /* Ensure buttons stay on top */
 }
 
 .action-buttons button {
-    min-width: 120px;
+    min-width: 100px;
     padding: 0.5rem 1.5rem;
     text-align: center;
     font-weight: 600;

package/dist/web/public/index.html

@@ -12,6 +12,8 @@
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="css/modal.css">
     <link rel="stylesheet" href="css/notifications.css">
+    <link rel="stylesheet" href="css/serverDetails.css">
+    <link rel="stylesheet" href="css/detailsWidget.css">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 
     <!-- Alert container for notifications -->
@@ -160,19 +162,23 @@
             setupSearch();
             setupModalOutsideClick();
 
-            // Check URL parameters for category
-            const urlParams = new URLSearchParams(window.location.search);
-            const categoryParam = urlParams.get('category');
+            try {
+                // First fetch categories and wait for completion
+                await fetchServerCategories();
 
-            // If we have a category parameter or last selected category
-            const lastSelected = categoryParam || localStorage.getItem('lastSelectedCategory');
+                // Check URL parameters for category
+                const urlParams = new URLSearchParams(window.location.search);
+                const categoryParam = urlParams.get('category');
 
-            // First fetch categories
-            await fetchServerCategories();
+                // If we have a category parameter or last selected category
+                const lastSelected = categoryParam || localStorage.getItem('lastSelectedCategory');
 
-            // Then show the selected category if it exists
-            if (lastSelected) {
-                showServerDetails(lastSelected);
+                // Only show details after data is loaded
+                if (lastSelected) {
+                    await showServerDetails(lastSelected);
+                }
+            } catch (error) {
+                console.error('Error during initialization:', error);
             }
         });
     </script>

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

@@ -12,14 +12,33 @@ export class DetailsWidget {
         link.rel = 'stylesheet';
         link.href = '/css/detailsWidget.css';
         document.head.appendChild(link);
+        // Create wrapper to maintain proper width alignment
+        this.containerWrapper = document.createElement('div');
+        this.containerWrapper.className = 'details-widget-container';
+        this.containerWrapper.style.width = '100%';
+        this.containerWrapper.style.boxSizing = 'border-box';
+        this.containerWrapper.style.maxWidth = '100%';
+        this.containerWrapper.style.overflow = 'hidden';
 
+        // Create the widget element
         this.widgetElement = document.createElement('div');
         this.widgetElement.className = 'details-widget';
-        this.widgetElement.style.overflow = 'auto'; // Enable scrolling
+        this.widgetElement.style.width = '100%';
+        this.widgetElement.style.boxSizing = 'border-box';
+        this.widgetElement.style.maxWidth = '100%';
+
+        // Create the content element
         this.contentElement = document.createElement('div');
         this.contentElement.className = 'details-widget-content';
+        this.contentElement.style.width = '100%';
+        this.contentElement.style.boxSizing = 'border-box';
+
+        // Build the DOM structure
         this.widgetElement.appendChild(this.contentElement);
-        this.container.appendChild(this.widgetElement);
+        this.containerWrapper.appendChild(this.widgetElement);
+
+        // Insert after the server item while maintaining proper structure
+        this.container.after(this.containerWrapper);
     }
 
     setContent(content) {
@@ -54,16 +73,24 @@ export class DetailsWidget {
     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');
+
+        // Ensure proper dimensions based on container
+        const containerWidth = this.container.offsetWidth;
+        this.containerWrapper.style.width = `${containerWidth}px`;
+        this.containerWrapper.style.maxWidth = '100%';
+        this.containerWrapper.style.display = 'block';
+
+        // Add expanded state to container
+        if (this.container) {
+            this.container.classList.add('expanded');
         }
     }
 
     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');
+        if (this.container) {
+            this.container.classList.remove('expanded');
         }
         // Reset expanded tool state
         this.expandedTool = null;
@@ -76,22 +103,20 @@ export class DetailsWidget {
         }
 
         let html = `
-            <div class="tools-list p-2">
-                <div class="tools-grid grid gap-2">
+            <div class="tools-list">
         `;
 
         Object.entries(schemaContent).forEach(([toolName, toolInfo]) => {
             if (!toolInfo) return;
 
-            html += `
-                <div class="tool-card" data-tool="${this.escapeHtml(toolName)}">
+            html += `<div class="tool-card" data-tool="${this.escapeHtml(toolName)}">
                     <div class="tool-card-header">
-                        <div class="tool-header mb-2">
+                        <div class="tool-header">
                             <h3 class="text-md font-semibold text-blue-600">${toolInfo.name || toolName}</h3>
+                            <div class="text-gray-600 text-sm">${toolInfo.description || 'No description available'}</div>
                         </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)}">
+                    <div class="tool-details hidden" data-tool-details="${this.escapeHtml(toolName)}">
                         ${this.renderInputSchema(toolInfo.inputSchema)}
                     </div>
                 </div>
@@ -99,7 +124,6 @@ export class DetailsWidget {
         });
 
         html += `
-                </div>
             </div>
         `;
 
@@ -170,17 +194,6 @@ export class DetailsWidget {
         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;
@@ -188,17 +201,11 @@ export class DetailsWidget {
                 const isRequired = schema.required?.includes(propName);
                 const type = this.getPropertyType(propDetails);
 
-                html += `
-                    <div class="property-item ${isRequired ? 'required' : ''}">
+                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>' : ''}
+                            <span class="property-name">${this.escapeHtml(propName)}${isRequired ? '<span class="required-star">*</span>' : ''}</span><span class="property-type">${this.escapeHtml(type)}</span>${propDetails.description ? `<span class="property-desc">${this.escapeHtml(propDetails.description)}</span>` : ''}
+                            ${propDetails.default !== undefined ? `<div class="property-default">Default: <code>${this.escapeHtml(JSON.stringify(propDetails.default))}</code></div>` : ''}
                         </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>
                 `;
@@ -218,12 +225,8 @@ export class DetailsWidget {
                 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>` : ''}
+                        <span class="property-name">${this.escapeHtml(name)}</span><span class="property-type">${this.escapeHtml(type)}</span>
+                        ${details.description ? `<div class="property-desc">${this.escapeHtml(details.description)}</div>` : ''}
                     </div>
                 `;
             });