imcp 0.0.19 → 0.1.2

package/src/web/public/js/serverCategoryList.js

@@ -3,6 +3,9 @@ import { showServerDetails } from './serverCategoryDetails.js'; // Still needed
 import { showToast } from './notifications.js';
 import { buildUrlWithFlights } from './flights/flights.js';
 
+// Store state for categories
+let pinnedCategories = {};
+
 // Wait for data to be loaded
 async function waitForData() {
     if (allServerCategoriesData && allServerCategoriesData.length > 0) {
@@ -12,6 +15,54 @@ async function waitForData() {
     return allServerCategoriesData && allServerCategoriesData.length > 0;
 }
 
+// Load pinned state from localStorage
+function loadPinnedState() {
+    const saved = localStorage.getItem('pinnedCategories');
+    if (saved) {
+        try {
+            pinnedCategories = JSON.parse(saved);
+        } catch (e) {
+            console.error('Error parsing pinned categories from localStorage:', e);
+            pinnedCategories = {};
+        }
+    }
+}
+
+// Save pinned state to localStorage
+function savePinnedState() {
+    localStorage.setItem('pinnedCategories', JSON.stringify(pinnedCategories));
+}
+
+// Toggle pin status for a category
+function togglePinCategory(categoryName, event) {
+    // Stop propagation to prevent navigation
+    event.stopPropagation();
+    
+    // Toggle pin status
+    if (pinnedCategories[categoryName]) {
+        delete pinnedCategories[categoryName];
+    } else {
+        pinnedCategories[categoryName] = true;
+    }
+    
+    // Save to localStorage
+    savePinnedState();
+    
+    // Find the server item element and add a temporary animation class
+    const serverItem = event.target.closest('.server-item');
+    if (serverItem) {
+        serverItem.classList.add('pin-animation');
+        setTimeout(() => {
+            serverItem.classList.remove('pin-animation');
+        }, 300); // Animation duration
+    }
+    
+    // Re-render list with updated pin status
+    if (allServerCategoriesData && allServerCategoriesData.length > 0) {
+        renderServerCategoryList(allServerCategoriesData);
+    }
+}
+
 // Function to show the last selected category on page load
 async function loadLastSelectedCategory() {
     const lastSelected = localStorage.getItem('lastSelectedCategory');
@@ -33,8 +84,24 @@ function renderServerCategoryList(servers) {
         document.getElementById('serverCategoryDetails').innerHTML = '<p>Select a server from the list to see details.</p>'; // Clear details
         return;
     }
+    
+    // Load pinned state
+    loadPinnedState();
+    
+    // Create a copy of the servers array to avoid modifying the original
+    const sortedServers = [...servers];
+    
+    // Sort servers with pinned ones at the top
+    sortedServers.sort((a, b) => {
+        const isPinnedA = pinnedCategories[a.name] === true;
+        const isPinnedB = pinnedCategories[b.name] === true;
+        
+        if (isPinnedA && !isPinnedB) return -1;
+        if (!isPinnedA && isPinnedB) return 1;
+        return 0; // Keep original order for items with same pin status
+    });
 
-    serverCategoryList.innerHTML = servers.map(server => {
+    serverCategoryList.innerHTML = sortedServers.map(server => {
         let statusHtml = '';
 
         // Add tool status summary if available
@@ -61,8 +128,8 @@ function renderServerCategoryList(servers) {
                     statusText = "Partial Configured";
                 } else {
                     // No tools installed
-                    colorClass = "text-red-600 bg-red-50";
-                    icon = '<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg>';
+                    colorClass = "text-yellow-600 bg-orange-50";
+                    icon = '<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM10 13a1 1 0 110-2 1 1 0 010 2zm-1.75-5.75a.75.75 0 00-1.5 0v3a.75.75 0 001.5 0v-3z" clip-rule="evenodd" /></svg>';
                     statusText = "Not Configured";
                 }
 
@@ -80,13 +147,27 @@ function renderServerCategoryList(servers) {
             }
             systemTagsHtml += '</div>';
         }
+          // Check if this server is pinned
+        const isPinned = pinnedCategories[server.name] === true;
+        const pinnedClass = isPinned ? 'pinned' : '';
+        
+        // Pin/unpin button with appropriate icon
+        const pinIcon = isPinned 
+            ? '<i class="bx bxs-pin"></i>' // Solid pin icon for pinned items
+            : '<i class="bx bx-pin"></i>';  // Outline pin icon for unpinned items
 
         return `
-        <div class="server-item border border-gray-200 p-3 rounded hover:bg-gray-50 cursor-pointer transition duration-150 ease-in-out"
-             onclick="navigateToCategory('${server.name}')"
+        <div class="server-item border border-gray-200 p-3 rounded hover:bg-gray-50 cursor-pointer transition duration-150 ease-in-out ${pinnedClass}"
              data-server-name="${server.name}">
-            <h3 class="font-semibold text-gray-800">${server.displayName || server.name}</h3>
-            <div class="text-sm text-gray-500 flex items-center mt-1">
+            <div class="flex justify-between items-center">
+                <h3 class="font-semibold text-gray-800" onclick="navigateToCategory('${server.name}')">${server.displayName || server.name}</h3>
+                <div class="flex items-center">
+                    <div class="pin-button ${pinnedClass}" onclick="togglePinCategoryItem('${server.name}', event)" title="${isPinned ? 'Unpin' : 'Pin'} this category">
+                        ${pinIcon}
+                    </div>
+                </div>
+            </div>
+            <div class="text-sm text-gray-500 flex items-center mt-1" onclick="navigateToCategory('${server.name}')">
                 ${statusHtml}
                 ${systemTagsHtml}
             </div>
@@ -101,6 +182,9 @@ function renderServerCategoryList(servers) {
 // Setup search functionality
 function setupSearch() {
     const searchBox = document.getElementById('searchBox');
+    
+    // Load pinned state on page load
+    loadPinnedState();
 
     searchBox.addEventListener('input', async function () {
         const searchTerm = this.value.toLowerCase();
@@ -151,7 +235,7 @@ function navigateToCategory(categoryName) {
 // Alternatively, attach event listeners dynamically after rendering the list.
 // For simplicity with current structure, we'll make it global.
 window.navigateToCategory = navigateToCategory;
-
+window.togglePinCategoryItem = togglePinCategory;
 
 // Export functions
-export { renderServerCategoryList, setupSearch, loadLastSelectedCategory };
+export { renderServerCategoryList, setupSearch, loadLastSelectedCategory, togglePinCategory };

package/src/web/public/js/settings.js

@@ -0,0 +1,314 @@
+import { buildUrlWithFlights } from './flights/flights.js';
+
+// Toast notification function
+function showToast(message, type = 'success') {
+    const toastContainer = document.querySelector('.toast-container');
+    if (!toastContainer) return;
+
+    const toastId = `toast-${Date.now()}`;
+    const toastHTML = `
+        <div id="${toastId}" class="toast align-items-center text-white bg-${type === 'success' ? 'success' : 'danger'} border-0" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="d-flex">
+                <div class="toast-body">
+                    ${message}
+                </div>
+                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+        </div>
+    `;
+    toastContainer.insertAdjacentHTML('beforeend', toastHTML);
+    const toastElement = document.getElementById(toastId);
+    const toast = new bootstrap.Toast(toastElement, { delay: 3000 });
+    toast.show();
+    toastElement.addEventListener('hidden.bs.toast', () => {
+        toastElement.remove();
+    });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    // All DOM element queries and event listeners must be inside this block!
+    const settingsForm = document.getElementById('settingsForm');
+    const nodePathInput = document.getElementById('nodePath');
+    const browserPathInput = document.getElementById('browserPath');
+    const systemEnvironmentsDiv = document.getElementById('systemEnvironments');
+    
+    // Python Environments elements
+    const pythonEnvsContainer = document.getElementById('pythonEnvsContainer');
+    const addPythonEnvButton = document.getElementById('addPythonEnvButton');
+    const pythonEnvsLoadingMsg = document.getElementById('pythonEnvsLoadingMsg');
+    
+    // User Configurations elements
+    const userConfigurationsContainer = document.getElementById('userConfigurationsContainer');
+    const addUserConfigButton = document.getElementById('addUserConfigButton');
+    const userConfigLoadingMsg = document.getElementById('userConfigLoadingMsg');
+    
+    const cancelButton = document.getElementById('cancelButton');
+    const setupButton = document.getElementById('setupButton');
+
+// (Removed duplicate showToast function here)
+
+
+    async function loadSettings() {
+        try {
+            const response = await fetch('/api/settings');
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+            }
+            const apiResponse = await response.json();
+            if (apiResponse.success && apiResponse.data) {
+                const settings = apiResponse.data;
+                
+                // Populate Python Environments
+                if(pythonEnvsLoadingMsg) pythonEnvsLoadingMsg.remove(); // Remove loading message
+                pythonEnvsContainer.innerHTML = ''; // Clear previous entries
+                
+                if (settings.pythonEnvs && Object.keys(settings.pythonEnvs).length > 0) {
+                    Object.entries(settings.pythonEnvs).forEach(([server, path]) => {
+                        renderPythonEnvInput(server, path);
+                    });
+                } else if (settings.pythonEnv) {
+                    // Handle legacy pythonEnv
+                    renderPythonEnvInput('system', settings.pythonEnv);
+                } else {
+                    if (!pythonEnvsContainer.querySelector('.python-env-row')) { // Add placeholder if no rows exist
+                        const p = document.createElement('p');
+                        p.className = 'text-gray-500 python-env-placeholder';
+                        p.textContent = 'No Python environments defined. Click "Add Python Environment" to add one.';
+                        pythonEnvsContainer.appendChild(p);
+                    }
+                }
+                
+                nodePathInput.value = settings.nodePath || '';
+                browserPathInput.value = settings.browserPath || '';
+
+                // Populate System Environments
+                systemEnvironmentsDiv.innerHTML = ''; // Clear loading message
+                if (settings.systemEnvironments && Object.keys(settings.systemEnvironments).length > 0) {
+                    // Create a modern, scrollable list (not a table)
+                    const list = document.createElement('div');
+                    list.className = 'flex flex-col';
+
+                    Object.entries(settings.systemEnvironments).forEach(([key, value], idx) => {
+                        const item = document.createElement('div');
+                        item.className =
+                            'flex flex-col sm:flex-row sm:items-center bg-white rounded-md border border-gray-200 px-4 py-2 shadow-sm hover:shadow transition group';
+                        item.innerHTML = `
+                            <div class="flex items-center min-w-0 w-full sm:w-1/4 sm:mb-0">
+                                <i class='bx bx-cog text-blue-400 mr-2'></i>
+                                <span class="font-mono font-semibold text-gray-800 text-base truncate" title="${key}">${key}</span>
+                            </div>
+                            <div class="flex-1 min-w-0 break-all text-gray-700 text-sm pl-7 sm:pl-4">
+                                ${value}
+                            </div>
+                        `;
+                        list.appendChild(item);
+                    });
+
+                    // Restore frame styling for the new layout
+                    systemEnvironmentsDiv.classList.remove('shadow');
+                    systemEnvironmentsDiv.classList.add('rounded-lg', 'bg-white', 'border', 'border-gray-200', 'border-1');
+                    systemEnvironmentsDiv.classList.remove('border-2', 'border-4', 'border-8');
+                    systemEnvironmentsDiv.classList.add('p-0');
+                    systemEnvironmentsDiv.style.padding = '0.5rem 0.5rem 0.5rem 0.5rem';
+                    systemEnvironmentsDiv.appendChild(list);
+                } else {
+                    systemEnvironmentsDiv.innerHTML = '<p class="text-gray-500">No system environment variables loaded or available.</p>';
+                }
+
+                // Populate User Configurations
+                if(userConfigLoadingMsg) userConfigLoadingMsg.remove(); // Remove loading message
+                userConfigurationsContainer.innerHTML = ''; // Clear previous entries
+                if (settings.userConfigurations && Object.keys(settings.userConfigurations).length > 0) {
+                    Object.entries(settings.userConfigurations).forEach(([key, value]) => {
+                        renderUserConfigInput(key, value);
+                    });
+                } else {
+                    if (!userConfigurationsContainer.querySelector('.user-config-row')) { // Add placeholder if no rows exist
+                        const p = document.createElement('p');
+                        p.className = 'text-gray-500 user-config-placeholder';
+                        p.textContent = 'No user configurations defined. Click "Add User Configuration" to add one.';
+                        userConfigurationsContainer.appendChild(p);
+                    }
+                }
+
+            } else {
+                throw new Error(apiResponse.error || 'Failed to load settings.');
+            }
+        } catch (error) {
+            console.error('Error loading settings:', error);
+            showToast(`Error loading settings: ${error.message}`, 'danger');
+            systemEnvironmentsDiv.innerHTML = `<p class="text-red-500">Error loading environment variables: ${error.message}</p>`;
+            if(userConfigLoadingMsg) userConfigLoadingMsg.textContent = `Error loading user configurations: ${error.message}`;
+        }
+    }
+
+    function renderPythonEnvInput(server = 'system', path = '') {
+        const placeholder = pythonEnvsContainer.querySelector('.python-env-placeholder');
+        if (placeholder) placeholder.remove();
+
+        const uniqueId = `python-env-${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
+        const div = document.createElement('div');
+        div.className = 'python-env-row flex items-center gap-3 mb-2';
+        div.innerHTML = `
+            <input type="text" value="${server}" class="form-input form-control w-1/3 px-3 py-2 rounded-md python-env-server" placeholder="Server Name (e.g., system)">
+            <input type="text" value="${path}" class="form-input form-control w-2/3 px-3 py-2 rounded-md python-env-path" placeholder="e.g., /usr/bin/python3 or C:/Python39/python.exe">
+            <button type="button" class="btn btn-danger btn-sm remove-python-env-button flex items-center">
+                <i class='bx bx-trash'></i>
+            </button>
+        `;
+        pythonEnvsContainer.appendChild(div);
+        div.querySelector('.remove-python-env-button').addEventListener('click', function() {
+            this.closest('.python-env-row').remove();
+            if (!pythonEnvsContainer.querySelector('.python-env-row')) { // Add placeholder if no rows exist after removal
+                const p = document.createElement('p');
+                p.className = 'text-gray-500 python-env-placeholder';
+                p.textContent = 'No Python environments defined. Click "Add Python Environment" to add one.';
+                pythonEnvsContainer.appendChild(p);
+            }
+        });
+    }
+
+    function renderUserConfigInput(key = '', value = '') {
+        const placeholder = userConfigurationsContainer.querySelector('.user-config-placeholder');
+        if (placeholder) placeholder.remove();
+
+        const uniqueId = `user-config-${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
+        const div = document.createElement('div');
+        div.className = 'user-config-row flex items-center gap-3 mb-2';
+        const isSecret = key.toLowerCase().includes('key');
+        const valueInputType = isSecret ? 'password' : 'text';
+
+        // Key Input
+        const keyInputHTML = `<input type="text" value="${key}" class="form-input form-control w-1/3 px-3 py-2 rounded-md user-config-key" placeholder="Key">`;
+
+        // Value Input & Eye Icon (if secret)
+        let valueSectionHTML;
+        if (isSecret) {
+            valueSectionHTML = `
+                <div class="relative w-2/3">
+                    <input type="${valueInputType}" value="${value}" class="form-input form-control w-full px-3 py-2 rounded-md user-config-value pr-10" placeholder="Value">
+                    <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700 toggle-visibility-button" style="background: transparent; border: none;">
+                        <i class='bx bx-show text-lg'></i>
+                    </button>
+                </div>
+            `;
+        } else {
+            valueSectionHTML = `<input type="${valueInputType}" value="${value}" class="form-input form-control w-2/3 px-3 py-2 rounded-md user-config-value" placeholder="Value">`;
+        }
+
+        // Remove Button
+        const removeButtonHTML = `
+            <button type="button" class="btn btn-danger btn-sm remove-user-config-button flex items-center">
+                <i class='bx bx-trash'></i>
+            </button>
+        `;
+
+        div.innerHTML = keyInputHTML + valueSectionHTML + removeButtonHTML;
+        userConfigurationsContainer.appendChild(div);
+
+        if (isSecret) {
+            const toggleButton = div.querySelector('.toggle-visibility-button');
+            const valueInput = div.querySelector('.user-config-value');
+            const eyeIcon = toggleButton.querySelector('i');
+
+            toggleButton.addEventListener('click', (e) => {
+                e.preventDefault(); // Prevent form submission if inside a form
+                if (valueInput.type === 'password') {
+                    valueInput.type = 'text';
+                    eyeIcon.classList.remove('bx-show');
+                    eyeIcon.classList.add('bx-hide');
+                } else {
+                    valueInput.type = 'password';
+                    eyeIcon.classList.remove('bx-hide');
+                    eyeIcon.classList.add('bx-show');
+                }
+            });
+        }
+
+        div.querySelector('.remove-user-config-button').addEventListener('click', function() {
+            this.closest('.user-config-row').remove();
+            if (!userConfigurationsContainer.querySelector('.user-config-row')) { // Add placeholder if no rows exist after removal
+                const p = document.createElement('p');
+                p.className = 'text-gray-500 user-config-placeholder';
+                p.textContent = 'No user configurations defined. Click "Add User Configuration" to add one.';
+                userConfigurationsContainer.appendChild(p);
+            }
+        });
+    }
+
+
+    async function saveSettings(event) {
+        event.preventDefault();
+        setupButton.disabled = true;
+        setupButton.innerHTML = `<i class='bx bx-loader-alt bx-spin mr-2'></i>Saving...`;
+
+        const pythonEnvs = {};
+        document.querySelectorAll('.python-env-row').forEach(row => {
+            const serverInput = row.querySelector('.python-env-server');
+            const pathInput = row.querySelector('.python-env-path');
+            if (serverInput && pathInput && serverInput.value.trim()) {
+                pythonEnvs[serverInput.value.trim()] = pathInput.value.trim();
+            }
+        });
+        
+        const userConfigs = {};
+        document.querySelectorAll('.user-config-row').forEach(row => {
+            const keyInput = row.querySelector('.user-config-key');
+            const valueInput = row.querySelector('.user-config-value');
+            if (keyInput && valueInput && keyInput.value.trim()) {
+                userConfigs[keyInput.value.trim()] = valueInput.value.trim();
+            }
+        });
+
+        const settingsData = {
+            pythonEnvs: pythonEnvs,
+            // Include pythonEnv for backward compatibility (use system value if available)
+            pythonEnv: pythonEnvs['system'] || null,
+            nodePath: nodePathInput.value.trim() || null,
+            browserPath: browserPathInput.value.trim() || null,
+            userConfigurations: userConfigs,
+        };
+
+        try {
+            const response = await fetch('/api/settings', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(settingsData),
+            });
+
+            const apiResponse = await response.json();
+
+            if (response.ok && apiResponse.success) {
+                showToast('Settings saved successfully!', 'success');
+                // Optionally, reload settings to reflect any backend-applied defaults
+                await loadSettings();
+            } else {
+                throw new Error(apiResponse.error || `HTTP error! status: ${response.status}`);
+            }
+        } catch (error) {
+            console.error('Error saving settings:', error);
+            showToast(`Error saving settings: ${error.message}`, 'danger');
+        } finally {
+            setupButton.disabled = false;
+            setupButton.innerHTML = `<i class='bx bx-save mr-2'></i>Save Settings`;
+        }
+    }
+
+    cancelButton.addEventListener('click', () => {
+        // Navigate back to index.html, preserving flight parameters
+        window.location.href = buildUrlWithFlights('index.html');
+    });
+
+    addPythonEnvButton.addEventListener('click', () => renderPythonEnvInput());
+    addUserConfigButton.addEventListener('click', () => renderUserConfigInput());
+
+    settingsForm.addEventListener('submit', saveSettings);
+
+    // Initial load
+    loadSettings();
+
+    // (Collapse/expand functionality removed as requested)
+});

package/src/web/public/onboard.html

@@ -106,8 +106,8 @@
                                     placeholder="e.g., Coder Tools">
                             </div>
                             <div class="md:col-span-2">
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
-                                <textarea name="description" rows="3"
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Description*</label>
+                                <textarea name="description" rows="3" required
                                     class="w-full px-3 py-1.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                     placeholder="Describe the purpose and capabilities of this server category"></textarea>
                             </div>

package/src/web/public/settings.html

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>IMCP System Settings</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="css/notifications.css">
+    <style>
+        .form-label {
+            font-weight: 600;
+            color: #374151; /* text-gray-700 */
+        }
+        .form-input {
+            border-color: #D1D5DB; /* border-gray-300 */
+            transition: all 0.15s ease-in-out;
+        }
+        .form-input:focus {
+            border-color: #3B82F6; /* focus:border-blue-500 */
+            box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25); /* focus:ring-blue-200 focus:ring-opacity-50 */
+        }
+        .btn-primary {
+            background-color: #2563EB; /* bg-blue-600 */
+            border-color: #2563EB;
+        }
+        .btn-primary:hover {
+            background-color: #1D4ED8; /* hover:bg-blue-700 */
+            border-color: #1D4ED8;
+        }
+        .btn-secondary {
+            background-color: #6B7280; /* bg-gray-500 */
+            border-color: #6B7280;
+            color: white;
+        }
+        .btn-secondary:hover {
+            background-color: #4B5563; /* hover:bg-gray-600 */
+            border-color: #4B5563;
+        }
+        .toast-container {
+            z-index: 1090; /* Ensure toast is above other elements */
+        }
+    </style>
+</head>
+
+<body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-6">
+        <div class="flex items-center justify-between mb-8">
+            <h1 class="text-3xl font-bold text-gray-900 flex items-center">
+                <a href="index.html" class="flex items-center text-gray-900 hover:text-blue-600 transition-colors">
+                    <i class='bx bx-left-arrow-alt mr-3 text-blue-600'></i>
+                    System Settings
+                </a>
+            </h1>
+        </div>
+
+        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 lg:p-8">
+            <form id="settingsForm">
+                <!-- Paths Section -->
+                <h2 class="text-xl font-semibold text-gray-800 mb-3">Path Configurations</h2>
+                <fieldset class="border border-gray-300 p-4 rounded-md mb-6">
+                    <!-- Python Environments Section -->
+                    <div class="mb-4">
+                        <h3 class="text-lg font-semibold text-gray-800 mb-2">Python Environments</h3>
+                        <div id="pythonEnvsContainer" class="space-y-3 mb-3">
+                            <!-- Python environments will be dynamically added here -->
+                            <p class="text-gray-500" id="pythonEnvsLoadingMsg">Loading Python environments...</p>
+                        </div>
+                        <button type="button" id="addPythonEnvButton" class="btn btn-outline-primary btn-sm mb-4 flex items-center">
+                            <i class='bx bx-plus mr-1'></i>Add Python Environment
+                        </button>
+                    </div>
+
+                    <!-- Other path configurations -->
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div>
+                            <label for="nodePath" class="form-label block mb-2">Node.js Path</label>
+                            <input type="text" id="nodePath" name="nodePath" class="form-input form-control w-full px-3 py-2 rounded-md" placeholder="e.g., /usr/local/bin/node or C:/Program Files/nodejs/node.exe">
+                        </div>
+                        <div>
+                            <label for="browserPath" class="form-label block mb-2">Browser Executable Path</label>
+                            <input type="text" id="browserPath" name="browserPath" class="form-input form-control w-full px-3 py-2 rounded-md" placeholder="e.g., /usr/bin/google-chrome or C:/Program Files/Google/Chrome/Application/chrome.exe">
+                        </div>
+                    </div>
+                </fieldset>
+
+                <!-- User Configurations Section -->
+                <div class="flex items-center mb-3">
+                    <h2 class="text-xl font-semibold text-gray-800 mr-2">User Configurations</h2>
+                    <p class="text-sm text-gray-500 flex items-center">
+                        <i class='bx bx-help-circle mr-1 text-gray-400'></i>
+                        Stored and used for mcp server installation environments.
+                    </p>
+                </div>
+                <fieldset class="border border-gray-300 p-4 rounded-md mb-6">
+                    <div id="userConfigurationsContainer" class="space-y-3">
+                        <!-- User configs will be dynamically added here -->
+                        <p class="text-gray-500" id="userConfigLoadingMsg">Loading user configurations...</p>
+                    </div>
+                    <button type="button" id="addUserConfigButton" class="btn btn-outline-primary btn-sm mt-3 flex items-center">
+                        <i class='bx bx-plus mr-1'></i>Add User Configuration
+                    </button>
+                </fieldset>
+
+                <!-- System Environment Variables Section -->
+                <div class="mb-6">
+                    <h2 class="text-xl font-semibold text-gray-800 mb-2 py-2">System Environment Variables</h2>
+                    <div id="systemEnvironments" class="max-h-96 overflow-y-auto bg-white p-2 rounded-lg border border-gray-200">
+                        <p class="text-gray-500">Loading environment variables...</p>
+                    </div>
+                </div>
+
+                <div class="flex justify-end gap-4 mt-8">
+                    <button type="button" id="cancelButton" class="btn btn-secondary px-6 py-2.5 rounded-md font-medium">Cancel</button>
+                    <button type="submit" id="setupButton" class="btn btn-primary px-6 py-2.5 rounded-md font-medium flex items-center">
+                        <i class='bx bx-save mr-2'></i>Save Settings
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Toast Notification Container -->
+    <div class="toast-container position-fixed top-0 end-0 p-3">
+        <!-- Toasts will be appended here -->
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="js/settings.js" type="module"></script>
+</body>
+</html>

package/src/web/public/styles.css

@@ -243,3 +243,35 @@ input[type="radio"]:checked {
         grid-template-columns: repeat(2, 1fr);
     }
 }
+
+.version-tooltip {
+  position: absolute;
+  background-color: white; /* Changed background to white */
+  color: #333; /* Changed text color to dark gray */
+  padding: 10px 15px; /* Increased padding */
+  border-radius: 6px; /* Slightly larger border radius */
+  font-size: 0.875rem;
+  z-index: 1000;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-8px); /* Adjusted gap */
+  white-space: pre-wrap;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Softer, more modern shadow */
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
+  min-width: 280px; /* Increased min-width for a wider tooltip */
+  border: 1px solid #e0e0e0; /* Added a light border */
+  cursor: text;
+  user-select: text;
+}
+
+.version-tooltip.visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.version-info-container {
+  position: relative; /* For tooltip positioning */
+  cursor: pointer;
+}