imcp 0.1.7 → 0.1.8-dev

package/src/web/public/js/detailsWidget.js

@@ -1,264 +0,0 @@
-export class DetailsWidget {
-    constructor(container) {
-        this.container = container;
-        this.isExpanded = false;
-        this.expandedTool = null;
-        this.init();
-    }
-
-    init() {
-        // Create and append stylesheet
-        const link = document.createElement('link');
-        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.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.containerWrapper.appendChild(this.widgetElement);
-
-        // Insert after the server item while maintaining proper structure
-        this.container.after(this.containerWrapper);
-    }
-
-    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() {
-        if (this.isExpanded) {
-            this.collapse();
-        } else {
-            this.expand();
-        }
-    }
-
-    expand() {
-        this.isExpanded = true;
-        this.widgetElement.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) {
-            this.container.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">
-        `;
-
-        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">
-                            <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>
-                    </div>
-                    <div class="tool-details hidden" data-tool-details="${this.escapeHtml(toolName)}">
-                        ${this.renderInputSchema(toolInfo.inputSchema)}
-                    </div>
-                </div>
-            `;
-        });
-
-        html += `
-            </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 {
-            // 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)}${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>
-                        ${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">
-                        <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>
-                `;
-            });
-            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() {
-        return this.isExpanded;
-    }
-}

package/src/web/public/js/flights/flights.js

@@ -1,127 +0,0 @@
-// Centralized flight control configuration
-
-const FLIGHT_STORAGE_KEY = 'activeFlightSettings';
-
-// Default flight settings
-const defaultFlights = {
-    enableOnboard: true, // Default: Onboarding is enabled. Set to false to disable.
-    // Add other default flights here, e.g., newFeatureX: false,
-};
-
-let effectiveFlightSettings = {};
-
-// Initialize flight settings
-function initializeFlightSettings() {
-    const urlParams = new URLSearchParams(window.location.search);
-    let settingsToStore = {};
-    let sourcedFromUrl = false;
-
-    // Check URL parameters first
-    for (const key in defaultFlights) {
-        if (urlParams.has(key)) {
-            const paramValue = urlParams.get(key);
-            settingsToStore[key] = (paramValue === 'true') ? true : (paramValue === 'false' ? false : paramValue);
-            sourcedFromUrl = true;
-        }
-    }
-
-    if (sourcedFromUrl) {
-        // If any flight was set via URL, these override sessionStorage for this load
-        // and then update sessionStorage.
-        // Fill any missing flights with defaults before storing.
-        for (const key in defaultFlights) {
-            if (!Object.hasOwnProperty.call(settingsToStore, key)) {
-                settingsToStore[key] = defaultFlights[key];
-            }
-        }
-        try {
-            sessionStorage.setItem(FLIGHT_STORAGE_KEY, JSON.stringify(settingsToStore));
-            effectiveFlightSettings = settingsToStore;
-        } catch (e) {
-            console.error("Failed to write to sessionStorage:", e);
-            effectiveFlightSettings = settingsToStore; // Use them anyway for this page load
-        }
-    } else {
-        // No flight params in URL, try sessionStorage
-        try {
-            const storedSettings = sessionStorage.getItem(FLIGHT_STORAGE_KEY);
-            if (storedSettings) {
-                effectiveFlightSettings = JSON.parse(storedSettings);
-                // Ensure all default keys are present, add if missing (e.g., new flight added)
-                for (const key in defaultFlights) {
-                    if (!Object.hasOwnProperty.call(effectiveFlightSettings, key)) {
-                        effectiveFlightSettings[key] = defaultFlights[key];
-                    }
-                }
-            } else {
-                // Not in sessionStorage, use defaults and store them
-                effectiveFlightSettings = { ...defaultFlights };
-                sessionStorage.setItem(FLIGHT_STORAGE_KEY, JSON.stringify(effectiveFlightSettings));
-            }
-        } catch (e) {
-            console.error("Failed to read/write sessionStorage:", e);
-            effectiveFlightSettings = { ...defaultFlights }; // Fallback to defaults
-        }
-    }
-}
-
-initializeFlightSettings();
-
-// The `flights` object provides these effective values.
-const flights = {};
-for (const key in defaultFlights) { // Iterate defaultFlights to define getters for all known flights
-    if (Object.hasOwnProperty.call(defaultFlights, key)) {
-        Object.defineProperty(flights, key, {
-            get: () => effectiveFlightSettings[key] !== undefined ? effectiveFlightSettings[key] : defaultFlights[key],
-            enumerable: true,
-            configurable: false
-        });
-    }
-}
-
-/**
- * Helper to build a URLSearchParams object with the effective flight values.
- * @returns {URLSearchParams}
- */
-function _buildFlightParams() {
-    const flightParams = new URLSearchParams();
-    for (const flightName in effectiveFlightSettings) {
-        if (Object.hasOwnProperty.call(effectiveFlightSettings, flightName)) {
-            // Only add if it's a recognized flight from defaultFlights to avoid polluting URL
-            // with unrelated sessionStorage items if FLIGHT_STORAGE_KEY was somehow corrupted.
-            if (Object.hasOwnProperty.call(defaultFlights, flightName)) {
-                flightParams.set(flightName, String(effectiveFlightSettings[flightName]));
-            }
-        }
-    }
-    return flightParams;
-}
-
-/**
- * Constructs a URL with the effective flight parameters and any additional parameters.
- * @param {string} baseUrl The base URL (e.g., "index.html").
- * @param {object} [additionalParams={}] - An object of additional key-value pairs to include.
- * @returns {string} A full URL with query string.
- */
-export function buildUrlWithFlights(baseUrl, additionalParams = {}) {
-    const params = _buildFlightParams(); // Start with all effective flight values
-
-    for (const key in additionalParams) {
-        if (Object.hasOwnProperty.call(additionalParams, key) && additionalParams[key] !== undefined) {
-            params.set(key, additionalParams[key]);
-        }
-    }
-    const queryString = params.toString();
-    return `${baseUrl}${queryString ? `?${queryString}` : ''}`;
-}
-
-/**
- * Gets a query string containing only the effective flight parameters.
- * @returns {string} A query string like "?enableOnboard=true" or empty.
- */
-export function getFlightQueryParameters() {
-    const queryString = _buildFlightParams().toString();
-    return queryString ? `?${queryString}` : '';
-}
-
-export default flights;

package/src/web/public/js/modal/index.js

@@ -1,52 +0,0 @@
-// Import all modal-related functionality
-import { compareVersions } from './versionUtils.js';
-// import { delayedAppendInstallLoadingMessage } from './messageQueue.js'; // Removed
-import { showInstallLoadingModal, hideInstallLoadingModal, updateOverallInstallStatus, addInstallationStep } from './loadingModal.js'; // Removed appendInstallLoadingMessage, added new fns
-import { closeModal } from './modalUtils.js';
-import { handleBulkClientInstall, uninstallTools } from './installation.js';
-import { showInstallModal } from './installModal.js';
-import {
-    setupClientItems,
-    setupEnvironmentVariables,
-    setupInstallationArguments,
-    setupServerRequirements,
-    setupFormSubmitHandler
-} from './modalSetup.js';
-
-// Export all modal functionality
-export {
-    // Version utilities
-    compareVersions,
-
-    // Message queue - (delayedAppendInstallLoadingMessage removed)
-
-    // Loading modal
-    showInstallLoadingModal,
-    // appendInstallLoadingMessage, // Removed
-    hideInstallLoadingModal,
-    updateOverallInstallStatus, // Added
-    addInstallationStep, // Added
-
-    // Modal utilities
-    closeModal,
-    // Installation
-    handleBulkClientInstall,
-    uninstallTools,
-
-    // Install modal
-    showInstallModal,
-
-    // Modal setup
-    setupClientItems,
-    setupEnvironmentVariables,
-    setupInstallationArguments,
-    setupServerRequirements,
-    setupFormSubmitHandler
-};
-
-// Make certain functions available globally
-window.showInstallModal = showInstallModal;
-window.showInstallLoadingModal = showInstallLoadingModal;
-// window.appendInstallLoadingMessage = appendInstallLoadingMessage; // Removed
-window.hideInstallLoadingModal = hideInstallLoadingModal;
-window.uninstallTools = uninstallTools;

package/src/web/public/js/modal/installModal.js

@@ -1,162 +0,0 @@
-import { showToast, showConfirm } from '../notifications.js';
-import { compareVersions } from './versionUtils.js';
-// import { delayedAppendInstallLoadingMessage } from './messageQueue.js'; // No longer needed here
-import { showInstallLoadingModal } from './loadingModal.js';
-import { closeModal, setupToggleStyles } from './modalUtils.js';
-import { handleBulkClientInstall, uninstallTools } from './installation.js';
-import {
-    setupClientItems,
-    setupEnvironmentVariables,
-    setupInstallationArguments,
-    setupServerRequirements,
-    setupFormSubmitHandler
-} from './modalSetup.js';
-
-// Initialize modal functionality when DOM is loaded
-document.addEventListener('DOMContentLoaded', () => {
-    setupToggleStyles();
-});
-
-/**
- * Show install modal for MCP tools
- * @param {string} categoryName - The category name
- * @param {string} serverName - The server name
- * @param {Function} callback - Optional callback function
- */
-export async function showInstallModal(categoryName, serverName, callback) {
-    console.log("Showing install modal for:", serverName);
-
-    // Wait for a short delay to ensure modal is loaded
-    await new Promise(resolve => setTimeout(resolve, 100));
-
-    const modal = document.getElementById('installModal');
-    if (!modal) {
-        console.error('Modal container not found');
-        return;
-    }
-
-    const title = modal.querySelector('#modalTitle');
-    const envInputsDiv = modal.querySelector('#modalEnvInputs');
-    const targetDiv = modal.querySelector('#modalTargets');
-    const modalRequirements = modal.querySelector('#modalRequirements');
-    const modalArguments = modal.querySelector('#modalArguments');
-
-    // Global array to track selected clients
-    window.selectedClients = [];
-
-    // Verify all required modal elements exist
-    if (!title || !envInputsDiv || !targetDiv || !modalRequirements || !modalArguments) {
-        console.error('Required modal elements not found');
-        return;
-    }
-
-    title.textContent = `Install ${serverName}`;
-    envInputsDiv.innerHTML = ''; // Clear previous inputs
-    targetDiv.innerHTML = ''; // Clear previous targets
-    modalRequirements.innerHTML = ''; // Clear previous requirements
-    modalArguments.innerHTML = ''; // Clear previous arguments
-
-    try {
-        // Fetch both targets and server data simultaneously
-        const [targetResponse, serverResponse] = await Promise.all([
-            fetch('/api/targets'),
-            fetch(`/api/categories/${categoryName}`)
-        ]);
-
-        if (!targetResponse.ok || !serverResponse.ok) {
-            throw new Error('Failed to fetch required data');
-        }
-
-        const [targetData, serverData] = await Promise.all([
-            targetResponse.json(),
-            serverResponse.json()
-        ]);
-
-        if (!targetData.success || !serverData.success) {
-            throw new Error('Invalid data received');
-        }
-
-        const mcpServer = serverData.data.feedConfiguration.mcpServers.find(server => server.name === serverName);
-        if (!mcpServer) {
-            throw new Error('Server configuration not found');
-        }
-
-        // Add mode indicator
-        const modeSpan = document.createElement('span');
-        modeSpan.textContent = mcpServer.mode || 'stdio';
-        modeSpan.className = 'ml-2 px-2 py-0.5 text-xs bg-gray-200 text-gray-600 rounded';
-        title.appendChild(modeSpan);
-        const installationStatus = serverData.data.installationStatus || {};
-        const serverStatuses = installationStatus.serversStatus || {};
-        const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
-
-        await setupModalContent(
-            targetData,
-            mcpServer,
-            serverStatus,
-            categoryName,
-            serverName,
-            serverStatuses,
-            serverData,
-            targetDiv,
-            envInputsDiv,
-            modalArguments,
-            modalRequirements
-        );
-
-    } catch (error) {
-        console.error("Error loading data:", error);
-        targetDiv.innerHTML = `<p class="text-red-500">Error: ${error.message}</p>`;
-    }
-
-    modal.style.display = "block";
-}
-
-/**
- * Set up the modal content including client list, environment variables, and requirements
- * @private
- */
-async function setupModalContent(
-    targetData,
-    mcpServer,
-    serverStatus,
-    categoryName,
-    serverName,
-    serverStatuses,
-    serverData,
-    targetDiv,
-    envInputsDiv,
-    modalArguments,
-    modalRequirements
-) {
-    // Create client items
-    setupClientItems(targetData.data, serverStatus, categoryName, serverName, targetDiv);
-
-    // Handle environment variables section
-    setupEnvironmentVariables(mcpServer, envInputsDiv, targetData);
-
-    // Handle installation arguments section
-    setupInstallationArguments(mcpServer.installation, modalArguments, categoryName, mcpServer);
-
-    // Handle server requirements section
-    setupServerRequirements(mcpServer, serverData, categoryName, serverName, modalRequirements);
-
-    // Set up the install form submit handler
-    const installForm = document.getElementById('installForm');
-    setupFormSubmitHandler(
-        installForm,
-        envInputsDiv,
-        modalArguments,
-        modalRequirements,
-        categoryName,
-        serverName,
-        serverStatuses,
-        serverData,
-        mcpServer
-    );
-}
-
-// Make functions available globally
-window.showInstallModal = showInstallModal;
-window.closeModal = closeModal;
-window.uninstallTools = uninstallTools;