npm - imcp - Versions diffs - 0.0.14 → 0.0.16 - Mend

imcp 0.0.14 → 0.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (136) hide show

package/dist/core/ConfigurationProvider.d.ts +1 -0
package/dist/core/ConfigurationProvider.js +15 -0
package/dist/core/InstallationService.js +2 -7
package/dist/core/MCPManager.d.ts +11 -2
package/dist/core/MCPManager.js +24 -1
package/dist/core/RequirementService.js +2 -8
package/dist/core/installers/clients/BaseClientInstaller.d.ts +51 -0
package/dist/core/installers/clients/BaseClientInstaller.js +160 -0
package/dist/core/installers/clients/ClientInstaller.d.ts +16 -9
package/dist/core/installers/clients/ClientInstaller.js +80 -527
package/dist/core/installers/clients/ClientInstallerFactory.d.ts +20 -0
package/dist/core/installers/clients/ClientInstallerFactory.js +37 -0
package/dist/core/installers/clients/ClineInstaller.d.ts +18 -0
package/dist/core/installers/clients/ClineInstaller.js +124 -0
package/dist/core/installers/clients/GithubCopilotInstaller.d.ts +34 -0
package/dist/core/installers/clients/GithubCopilotInstaller.js +162 -0
package/dist/core/installers/clients/MSRooCodeInstaller.d.ts +15 -0
package/dist/core/installers/clients/MSRooCodeInstaller.js +122 -0
package/dist/core/installers/requirements/BaseInstaller.d.ts +11 -34
package/dist/core/installers/requirements/BaseInstaller.js +5 -116
package/dist/core/installers/requirements/CommandInstaller.d.ts +6 -1
package/dist/core/installers/requirements/CommandInstaller.js +7 -0
package/dist/core/installers/requirements/GeneralInstaller.d.ts +6 -1
package/dist/core/installers/requirements/GeneralInstaller.js +9 -4
package/dist/core/installers/requirements/NpmInstaller.d.ts +46 -7
package/dist/core/installers/requirements/NpmInstaller.js +150 -58
package/dist/core/installers/requirements/PipInstaller.d.ts +9 -0
package/dist/core/installers/requirements/PipInstaller.js +66 -28
package/dist/core/onboard/FeedOnboardService.d.ts +50 -13
package/dist/core/onboard/FeedOnboardService.js +263 -88
package/dist/core/onboard/OnboardProcessor.d.ts +79 -0
package/dist/core/onboard/OnboardProcessor.js +290 -0
package/dist/core/onboard/OnboardStatus.d.ts +49 -0
package/dist/core/onboard/OnboardStatus.js +10 -0
package/dist/core/onboard/OnboardStatusManager.d.ts +57 -0
package/dist/core/onboard/OnboardStatusManager.js +176 -0
package/dist/core/types.d.ts +4 -5
package/dist/core/validators/FeedValidator.d.ts +8 -1
package/dist/core/validators/FeedValidator.js +60 -7
package/dist/core/validators/IServerValidator.d.ts +19 -0
package/dist/core/validators/IServerValidator.js +2 -0
package/dist/core/validators/SSEServerValidator.d.ts +15 -0
package/dist/core/validators/SSEServerValidator.js +39 -0
package/dist/core/validators/ServerValidatorFactory.d.ts +24 -0
package/dist/core/validators/ServerValidatorFactory.js +45 -0
package/dist/core/validators/StdioServerValidator.d.ts +46 -0
package/dist/core/validators/StdioServerValidator.js +229 -0
package/dist/services/InstallRequestValidator.d.ts +1 -1
package/dist/services/ServerService.d.ts +9 -6
package/dist/services/ServerService.js +18 -7
package/dist/utils/adoUtils.d.ts +29 -0
package/dist/utils/adoUtils.js +252 -0
package/dist/utils/clientUtils.d.ts +0 -7
package/dist/utils/clientUtils.js +0 -42
package/dist/utils/githubUtils.d.ts +10 -0
package/dist/utils/githubUtils.js +22 -0
package/dist/utils/macroExpressionUtils.d.ts +38 -0
package/dist/utils/macroExpressionUtils.js +116 -0
package/dist/utils/osUtils.d.ts +4 -20
package/dist/utils/osUtils.js +78 -23
package/dist/web/contract/serverContract.d.ts +3 -1
package/dist/web/public/css/notifications.css +48 -17
package/dist/web/public/css/onboard.css +66 -3
package/dist/web/public/index.html +84 -16
package/dist/web/public/js/api.js +3 -6
package/dist/web/public/js/flights/flights.js +127 -0
package/dist/web/public/js/modal/installation.js +5 -5
package/dist/web/public/js/modal/modalSetup.js +3 -2
package/dist/web/public/js/notifications.js +66 -27
package/dist/web/public/js/onboard/ONBOARDING_PAGE_DESIGN.md +338 -0
package/dist/web/public/js/onboard/formProcessor.js +810 -255
package/dist/web/public/js/onboard/index.js +328 -85
package/dist/web/public/js/onboard/publishHandler.js +132 -0
package/dist/web/public/js/onboard/state.js +61 -17
package/dist/web/public/js/onboard/templates.js +217 -249
package/dist/web/public/js/onboard/uiHandlers.js +679 -117
package/dist/web/public/js/onboard/validationHandlers.js +378 -0
package/dist/web/public/js/serverCategoryList.js +15 -2
package/dist/web/public/onboard.html +191 -45
package/dist/web/public/styles.css +91 -1
package/dist/web/server.d.ts +0 -10
package/dist/web/server.js +131 -22
package/package.json +2 -2
package/src/core/ConfigurationProvider.ts +15 -0
package/src/core/InstallationService.ts +2 -7
package/src/core/MCPManager.ts +26 -1
package/src/core/RequirementService.ts +2 -9
package/src/core/installers/clients/BaseClientInstaller.ts +196 -0
package/src/core/installers/clients/ClientInstaller.ts +97 -608
package/src/core/installers/clients/ClientInstallerFactory.ts +43 -0
package/src/core/installers/clients/ClineInstaller.ts +135 -0
package/src/core/installers/clients/GithubCopilotInstaller.ts +179 -0
package/src/core/installers/clients/MSRooCodeInstaller.ts +133 -0
package/src/core/installers/requirements/BaseInstaller.ts +13 -136
package/src/core/installers/requirements/CommandInstaller.ts +9 -1
package/src/core/installers/requirements/GeneralInstaller.ts +11 -4
package/src/core/installers/requirements/NpmInstaller.ts +178 -61
package/src/core/installers/requirements/PipInstaller.ts +68 -29
package/src/core/onboard/FeedOnboardService.ts +346 -0
package/src/core/onboard/OnboardProcessor.ts +305 -0
package/src/core/onboard/OnboardStatus.ts +55 -0
package/src/core/onboard/OnboardStatusManager.ts +188 -0
package/src/core/types.ts +4 -5
package/src/core/validators/FeedValidator.ts +79 -0
package/src/core/validators/IServerValidator.ts +21 -0
package/src/core/validators/SSEServerValidator.ts +43 -0
package/src/core/validators/ServerValidatorFactory.ts +51 -0
package/src/core/validators/StdioServerValidator.ts +259 -0
package/src/services/InstallRequestValidator.ts +1 -1
package/src/services/ServerService.ts +22 -7
package/src/utils/adoUtils.ts +291 -0
package/src/utils/clientUtils.ts +0 -44
package/src/utils/githubUtils.ts +24 -0
package/src/utils/macroExpressionUtils.ts +121 -0
package/src/utils/osUtils.ts +89 -24
package/src/web/contract/serverContract.ts +74 -0
package/src/web/public/css/notifications.css +48 -17
package/src/web/public/css/onboard.css +107 -0
package/src/web/public/index.html +84 -16
package/src/web/public/js/api.js +3 -6
package/src/web/public/js/flights/flights.js +127 -0
package/src/web/public/js/modal/installation.js +5 -5
package/src/web/public/js/modal/modalSetup.js +3 -2
package/src/web/public/js/notifications.js +66 -27
package/src/web/public/js/onboard/ONBOARDING_PAGE_DESIGN.md +338 -0
package/src/web/public/js/onboard/formProcessor.js +864 -0
package/src/web/public/js/onboard/index.js +374 -0
package/src/web/public/js/onboard/publishHandler.js +132 -0
package/src/web/public/js/onboard/state.js +76 -0
package/src/web/public/js/onboard/templates.js +343 -0
package/src/web/public/js/onboard/uiHandlers.js +758 -0
package/src/web/public/js/onboard/validationHandlers.js +378 -0
package/src/web/public/js/serverCategoryList.js +15 -2
package/src/web/public/onboard.html +296 -0
package/src/web/public/styles.css +91 -1
package/src/web/server.ts +167 -58

package/src/web/public/index.html CHANGED Viewed

@@ -23,18 +23,42 @@
 <body class="bg-gray-50 min-h-screen">
     <div class="container mx-auto px-4 py-6">
-        <header class="mb-8">
-            <h1 class="text-3xl font-bold text-gray-900 flex items-center justify-center">
+        <div class="flex items-center justify-between mb-8">
+            <h1 class="text-3xl font-bold text-gray-900 flex items-center">
                 <i class='bx bx-server mr-3 text-blue-600'></i>
                 IMCP Server Manager
             </h1>
-        </header>
-        <div class="search-controls mb-6">
-            <div class="relative max-w-2xl mx-auto">
-                <input type="text" id="searchBox" placeholder="Search servers or tools..." class="search-input">
-                <i class='bx bx-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400'></i>
+            <div class="lg:w-2/3 flex justify-end items-center gap-4">
+                <div class="relative w-48 focus-within:w-96 transition-all duration-300 ease-in-out">
+                    <input type="text" id="searchBox"
+                        placeholder="Search..."
+                        data-expanded-placeholder="Search servers or tools..."
+                        class="w-full px-10 py-2.5 bg-gray-50 border border-gray-200 rounded-lg
+                                text-gray-700 placeholder-gray-400
+                                focus:border-blue-400 focus:ring-2 focus:ring-blue-100
+                                transition-all duration-300 ease-in-out">
+                    <i class='bx bx-search absolute left-3.5 top-1/2 transform -translate-y-1/2 text-gray-400'></i>
+                </div>
+                <button id="onboardButton" style="display: none;"
+                     class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center">
+                    <i class='bx bx-plus-circle mr-2'></i>
+                    Onboard
+                </button>
             </div>
+            <script>
+                document.addEventListener('DOMContentLoaded', () => {
+                    const searchBox = document.getElementById('searchBox');
+                    const expandedPlaceholder = searchBox.dataset.expandedPlaceholder;
+                    searchBox.addEventListener('focus', () => {
+                        setTimeout(() => searchBox.placeholder = expandedPlaceholder, 150);
+                    });
+                    searchBox.addEventListener('blur', () => {
+                        if (!searchBox.value) {
+                            searchBox.placeholder = 'Search...';
+                        }
+                    });
+                });
+            </script>
         </div>
         <div class="flex flex-col lg:flex-row gap-6">
@@ -147,10 +171,15 @@
         import { setupSearch } from './js/serverCategoryList.js';
         import { showServerDetails } from './js/serverCategoryDetails.js';
         import { showInstallModal, closeModal, setupModalOutsideClick } from './js/modal.js';
+        // import { showOnboardModal as navigateToOnboard } from './js/onboard/index.js'; // We are directly navigating
+        import flights, { getFlightQueryParameters, buildUrlWithFlights } from './js/flights/flights.js';
         // Make necessary functions available globally
         window.showServerDetails = showServerDetails;
         window.showInstallModal = showInstallModal;
+        // window.showOnboardModal = showOnboardModal; // This might conflict if showOnboardModal is also in onboard/index.js
+                                                    // We'll rely on the event listener above for the main page's onboard button.
+                                                    // If other parts of the app call window.showOnboardModal, they'll need updating too.
         window.closeModal = closeModal;
         window.handleInstallServer = handleInstallServer;
         window.installRequirement = installRequirement;
@@ -162,23 +191,62 @@
             setupSearch();
             setupModalOutsideClick();
+            const onboardButton = document.getElementById('onboardButton');
+            if (flights.enableOnboard) {
+                onboardButton.style.display = 'flex'; // Make it visible
+                onboardButton.addEventListener('click', () => {
+                    // The original showOnboardModal in onboard/index.js likely does window.location.href = 'onboard.html';
+                    // We need to preserve existing flight parameters.
+                    const flightQueryString = getFlightQueryParameters();
+                    // Assuming navigateToOnboard from onboard/index.js handles the actual navigation
+                    // If it directly sets window.location.href, we might need to adjust how it's called or modify it.
+                    // For now, let's assume we can adapt its usage or it's a simple navigation.
+                    // The simplest way if showOnboardModal in onboard/index.js is just `window.location.href = 'onboard.html'`
+                    // would be to directly navigate here.
+                    window.location.href = buildUrlWithFlights('onboard.html');
+                });
+            }
+            // No 'else' block needed as it's hidden by default via inline style
             try {
                 // First fetch categories and wait for completion
-                await fetchServerCategories();
+                // fetchServerCategories will call renderServerCategoryList, which might call loadLastSelectedCategory.
+                // loadLastSelectedCategory calls showServerDetails.
+                // The logic for setting initial category URL is now more centralized.
+                await fetchServerCategories(); // This populates allServerCategoriesData
-                // Check URL parameters for category
                 const urlParams = new URLSearchParams(window.location.search);
                 const categoryParam = urlParams.get('category');
+                const lastSelectedCategoryFromStorage = localStorage.getItem('lastSelectedCategory');
-                // If we have a category parameter or last selected category
-                const lastSelected = categoryParam || localStorage.getItem('lastSelectedCategory');
-                // Only show details after data is loaded
-                if (lastSelected) {
-                    await showServerDetails(lastSelected);
+                if (categoryParam) {
+                    // Category is in URL, load it
+                    await window.showServerDetails(categoryParam);
+                } else if (lastSelectedCategoryFromStorage) {
+                    // Category not in URL, but in localStorage. Redirect to URL with this category and flights.
+                    window.location.href = buildUrlWithFlights('index.html', { category: lastSelectedCategoryFromStorage });
+                    return; // Stop further execution, page will reload
+                } else if (allServerCategoriesData && allServerCategoriesData.length > 0) {
+                    // No category in URL or localStorage, pick first from list and redirect.
+                    window.location.href = buildUrlWithFlights('index.html', { category: allServerCategoriesData[0].name });
+                    return; // Stop further execution, page will reload
+                } else {
+                    // No categories at all, or data still loading. Default placeholder will be shown.
+                    // Or, if allServerCategoriesData is empty after fetch, the placeholder from HTML remains.
                 }
             } catch (error) {
                 console.error('Error during initialization:', error);
+                // Potentially show a user-friendly error message in the UI
+                const serverCategoryDetailsDiv = document.getElementById('serverCategoryDetails');
+                if (serverCategoryDetailsDiv) {
+                    serverCategoryDetailsDiv.innerHTML = `<p class="text-red-500">Error initializing page: ${error.message}</p>`;
+                }
+                const serverCategoryListDiv = document.getElementById('serverCategoryList');
+                if (serverCategoryListDiv) {
+                    serverCategoryListDiv.innerHTML = `<p class="text-red-500">Could not load categories.</p>`;
+                }
             }
         });
     </script>

package/src/web/public/js/api.js CHANGED Viewed

@@ -3,6 +3,8 @@ import { showToast } from './notifications.js';
 // Global store for server data
 let allServerCategoriesData = [];
+// Make it available globally for legacy code
+window.allServerCategoriesData = allServerCategoriesData;
 // Fetch and display servers
 async function fetchServerCategories() {
@@ -14,16 +16,11 @@ async function fetchServerCategories() {
         if (!responseData.success || !responseData.data) {
             throw new Error(`API Error fetching servers: ${responseData.error || 'Invalid data format'}`);
         }
-        allServerCategoriesData = responseData.data; // Store globally
+        allServerCategoriesData = window.allServerCategoriesData = responseData.data; // Update both local and global references
         // Use the renderServerCategoryList function to display servers
         renderServerCategoryList(allServerCategoriesData);
-        // Show the first category by default if there are categories
-        if (allServerCategoriesData.length > 0) {
-            window.showServerDetails(allServerCategoriesData[0].name);
-        }
         // Check if search is active
         const searchTerm = document.getElementById('searchBox').value.toLowerCase();
         if (searchTerm) {

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

@@ -0,0 +1,127 @@
+// Centralized flight control configuration
+const FLIGHT_STORAGE_KEY = 'activeFlightSettings';
+// Default flight settings
+const defaultFlights = {
+    enableOnboard: false, // 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/installation.js CHANGED Viewed

@@ -129,11 +129,11 @@ async function pollInstallStatus(categoryName, serverName, targets, interval = 2
                 for (const req of requirements) {
                     const reqStatus = requirementsStatus[req.name] || {};
                     if (reqStatus.installed === true && !reqStatus.operationStatus) {
-                        const msg = `Requirement [${req.name}] already installed.`;
-                        if (msg && lastRequirementMessages[req.name] !== msg) {
-                            delayedAppendInstallLoadingMessage(msg);
-                            lastRequirementMessages[req.name] = msg;
-                        }
+                        // const msg = `Requirement [${req.name}] already installed.`;
+                        // if (msg && lastRequirementMessages[req.name] !== msg) {
+                        //     delayedAppendInstallLoadingMessage(msg);
+                        //     lastRequirementMessages[req.name] = msg;
+                        // }
                         continue;
                     }
                     const opStatus = reqStatus.operationStatus || {};

package/src/web/public/js/modal/modalSetup.js CHANGED Viewed

@@ -129,6 +129,7 @@ export function setupFormSubmitHandler(form, envInputsDiv, modalArguments, modal
         const envVars = {};
         const args = [];
         const requirementsToUpdate = [];
+        let pythonEnv = undefined;
         // Only collect env, args and requirements if not in SSE mode
         if (mcpServer?.mode !== 'sse') {
@@ -145,7 +146,7 @@ export function setupFormSubmitHandler(form, envInputsDiv, modalArguments, modal
                 .filter(val => val !== ''));
             const pythonEnvInput = document.getElementById('python_env');
-            const pythonEnv = pythonEnvInput?.value?.trim();
+            pythonEnv = pythonEnvInput?.value?.trim();
             const updateToggles = modalRequirements.querySelectorAll('.toggle-update:checked');
             updateToggles.forEach(toggle => {
@@ -178,7 +179,7 @@ export function setupFormSubmitHandler(form, envInputsDiv, modalArguments, modal
                 targetClients: selectedTargets,
                 env: envVars,
                 args: args,
-                settings: {}
+                settings: pythonEnv ? { pythonEnv: pythonEnv } : {}
             };
             if (requirementsToUpdate.length > 0) {

package/src/web/public/js/notifications.js CHANGED Viewed

@@ -1,33 +1,68 @@
-// Function to show a Bootstrap alert notification
+// Function to show a toast notification
 function showToast(message, type = 'success') {
     const alertContainer = document.querySelector('.alert-container');
+    if (!alertContainer) {
+        console.error('Alert container not found. Notifications will not be displayed.');
+        return;
+    }
     const alertId = `alert-${Date.now()}`;
+    let iconHtml = '';
+    switch (type) {
+        case 'success':
+            iconHtml = '<i class="bi bi-check-circle-fill alert-icon"></i>';
+            break;
+        case 'error':
+            iconHtml = '<i class="bi bi-x-octagon-fill alert-icon"></i>'; // Changed icon for error
+            break;
+        case 'info':
+            iconHtml = '<i class="bi bi-info-circle-fill alert-icon"></i>';
+            break;
+        case 'warning':
+            iconHtml = '<i class="bi bi-exclamation-triangle-fill alert-icon"></i>';
+            break;
+        default:
+            iconHtml = '<i class="bi bi-bell-fill alert-icon"></i>'; // Default icon
+    }
     const alertHtml = `
-        <div id="${alertId}" class="alert alert-${type} alert-dismissible fade show" role="alert">
-            ${type === 'success' ?
-                '<i class="bi bi-check-circle-fill me-2"></i>' :
-                '<i class="bi bi-exclamation-triangle-fill me-2"></i>'
-            }
-            ${message}
-            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        <div id="${alertId}" class="alert alert-${type}" role="alert">
+            ${iconHtml}
+            <span>${message}</span>
+            <button type="button" class="btn-close" aria-label="Close"></button>
         </div>
     `;
     alertContainer.insertAdjacentHTML('beforeend', alertHtml);
     const alertElement = document.getElementById(alertId);
-    // Remove the alert after 5 seconds
-    setTimeout(() => {
-        const bsAlert = new bootstrap.Alert(alertElement);
-        bsAlert.close();
-    }, 3000);  // Reduced to 3 seconds
-    // Remove the element after animation
-    alertElement.addEventListener('closed.bs.alert', () => {
-        alertElement.remove();
+    if (!alertElement) return;
+    // Trigger the slide-in animation
+    // Adding a slight delay to ensure the element is in the DOM before adding the 'show' class
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => { // Double requestAnimationFrame for more reliable transition start
+            alertElement.classList.add('show');
+        });
     });
+    const closeButton = alertElement.querySelector('.btn-close');
+    const dismissAlert = () => {
+        alertElement.classList.remove('show'); // Trigger slide-out animation
+        // Wait for fade out animation to complete before removing
+        alertElement.addEventListener('transitionend', () => {
+            alertElement.remove();
+        }, { once: true }); // Ensure event listener is removed after execution
+    };
+    if (closeButton) {
+        closeButton.addEventListener('click', dismissAlert);
+    }
+    // Auto-dismiss after 5 seconds (increased from 3)
+    setTimeout(dismissAlert, 5000);
 }
 // Function to show a confirmation dialog using custom modal system
@@ -35,7 +70,7 @@ function showConfirm(title, message) {
     return new Promise((resolve) => {
         const modalId = `confirm-modal-${Date.now()}`;
         const modalHtml = `
-            <div id="${modalId}" class="modal">
+            <div id="${modalId}" class="modal" style="display: none;">
                 <div class="modal-content" style="max-width: 400px; margin: 15% auto;">
                     <div class="modal-header">
                         <h3 class="text-lg font-semibold text-gray-700">${title}</h3>
@@ -54,19 +89,23 @@ function showConfirm(title, message) {
                 </div>
             </div>
         `;
         document.body.insertAdjacentHTML('beforeend', modalHtml);
         const modalElement = document.getElementById(modalId);
-        modalElement.style.display = 'block';
+        // Trigger display after a short delay to allow CSS transitions if any are added later for modals
+        requestAnimationFrame(() => {
+            modalElement.style.display = 'block';
+        });
         // Handle confirm button click
         modalElement.querySelector('.confirm-button').addEventListener('click', () => {
             modalElement.style.display = 'none';
             modalElement.remove();
             resolve(true);
         });
         // Handle cancel button click
         modalElement.querySelector('.cancel-button').addEventListener('click', () => {
             modalElement.style.display = 'none';