imcp 0.1.1 → 0.1.3

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/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;
+}

package/src/web/server.ts

@@ -28,6 +28,10 @@ import { openBrowser } from '../utils/osUtils.js';
 import { Logger, EventType, EventStatus } from '../utils/logger.js';
 import { configProvider } from '../core/loaders/ConfigurationProvider.js';
 import { onboardStatusManager } from '../core/onboard/OnboardStatusManager.js';
+import { InstallOperationManager } from '../core/loaders/InstallOperationManager.js';
+import { systemSettingsManager } from '../core/loaders/SystemSettingsManager.js';
+import { SystemSettings } from '../core/metadatas/types.js';
+import { getAppVersion } from '../utils/versionUtils.js';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const app = express();
 
@@ -308,6 +312,34 @@ app.get('/api/categories/:categoryName/onboard/status', async (req: Request<{ ca
     });
   }
 });
+
+// Get installation operation status
+app.get('/api/categories/:categoryName/servers/:serverName/installation/status', async (req: Request<{ categoryName: string; serverName: string }>, res: Response) => {
+  try {
+    const { categoryName, serverName } = req.params;
+    const details = await InstallOperationManager.getInstance(categoryName, serverName).getDetails();
+
+    if (!details) {
+      return res.status(404).json({
+        success: false,
+        error: `No installation operation found for server ${serverName} in category ${categoryName}`
+      });
+    }
+
+    const response: ApiResponse<typeof details> = {
+      success: true,
+      data: details
+    };
+    res.json(response);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    res.status(500).json({
+      success: false,
+      error: `Failed to get installation operation status for server ${req.params.serverName} in category ${req.params.categoryName}: ${message}`
+    });
+  }
+});
+
 // Uninstall tools from a server
 app.post('/api/categories/:categoryName/uninstall', async (req: Request<{ categoryName: string }, {}, UninstallServersRequestBody>, res: Response) => {
   try {
@@ -356,6 +388,59 @@ app.post('/api/categories/:categoryName/uninstall', async (req: Request<{ catego
   }
 });
 
+// System Settings API
+app.get('/api/settings', async (req: Request, res: Response) => {
+  try {
+    const settings = await systemSettingsManager.getSystemSettings();
+    const response: ApiResponse<SystemSettings> = {
+      success: true,
+      data: settings
+    };
+    res.json(response);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    res.status(500).json({
+      success: false,
+      error: `Failed to get system settings: ${message}`
+    });
+  }
+});
+
+app.post('/api/settings', async (req: Request<{}, {}, Partial<SystemSettings>>, res: Response) => {
+  try {
+    const newSettings = req.body;
+    const updatedSettings = await systemSettingsManager.createOrUpdateSystemSettings(newSettings);
+    const response: ApiResponse<SystemSettings> = {
+      success: true,
+      data: updatedSettings
+    };
+    res.json(response);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    res.status(500).json({
+      success: false,
+      error: `Failed to update system settings: ${message}`
+    });
+  }
+});
+
+// API to get package version
+app.get('/api/version', async (req: Request, res: Response) => {
+  try {
+    const appVersionData = await getAppVersion();
+    const response: ApiResponse<typeof appVersionData> = {
+      success: true,
+      data: appVersionData
+    };
+    res.json(response);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    res.status(500).json({
+      success: false,
+      error: `Failed to get package version: ${message}`
+    });
+  }
+});
 
 export async function startWebServer(port = 3000): Promise<void> {
   return new Promise((resolve, reject) => {