mcp-config-manager 1.0.2

package/public/js/api.js

@@ -0,0 +1,108 @@
+export async function detectClientsApi() {
+    const response = await fetch('/api/clients/detect');
+    return response.json();
+}
+
+export async function listClientsApi() {
+    const response = await fetch('/api/clients');
+    return response.json();
+}
+
+export async function getAllServersApi() {
+    const response = await fetch('/api/servers');
+    return response.json();
+}
+
+export async function getClientConfigApi(client) {
+    const response = await fetch(`/api/clients/${client}`);
+    return response.json();
+}
+
+export async function addServerApi(client, server, config) {
+    const response = await fetch(`/api/clients/${client}/servers/${server}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(config),
+    });
+    return response.json();
+}
+
+export async function addServerToMultipleClientsApi(serverName, serverConfig, clientIds) {
+    const response = await fetch('/api/servers/add-to-clients', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ serverName, serverConfig, clientIds }),
+    });
+    return response.json();
+}
+
+export async function deleteServerApi(client, server) {
+    const response = await fetch(`/api/clients/${client}/servers/${server}`, {
+        method: 'DELETE',
+    });
+    return response.json();
+}
+
+export async function updateServerApi(client, server, config) {
+    const response = await fetch(`/api/clients/${client}/servers/${server}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(config),
+    });
+    return response.json();
+}
+
+export async function updateServerInClientsApi(serverName, serverConfig, clientIds) {
+    const response = await fetch(`/api/servers/${serverName}/update-in-clients`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ serverConfig, clientIds }),
+    });
+    return response.json();
+}
+
+export async function updateServerEnvApi(serverName, envKey, envValue, clientIds) {
+    const response = await fetch(`/api/servers/${serverName}/env`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ envKey, envValue, clientIds }),
+    });
+    return response.json();
+}
+
+export async function renameServerApi(oldName, newName) {
+    const response = await fetch(`/api/servers/${oldName}/rename`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ newName }),
+    });
+    return response.json();
+}
+
+export async function copyServerApi(fromClient, fromServer, toClient, toServer) {
+    const response = await fetch('/api/copy', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ fromClient, fromServer, toClient, toServer }),
+    });
+    return response.json();
+}
+
+export async function exportConfigApi(client) {
+    const response = await fetch(`/api/export/${client}`);
+    return response.json();
+}
+
+export async function exportServerApi(client, server) {
+    const response = await fetch(`/api/export/${client}?server=${server}`);
+    return response.json();
+}
+
+export async function importConfigApi(client, data) {
+    const response = await fetch(`/api/import/${client}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+    });
+    return response.json();
+}

package/public/js/clientView.js

@@ -0,0 +1,211 @@
+import { listClientsApi, getClientConfigApi, deleteServerApi } from './api.js';
+import { showServerModal, copyServer, copyToClipboard, exportServer, deleteServer, removeFromAll, updateBulkActions, selectAllServers, deselectAllServers, deleteSelected } from './modals.js';
+
+let currentClient = null;
+let clients = [];
+let loadClientsCallback = null; // Callback to main.js to reload all clients
+
+export function initClientView(allClients, currentClientId, loadClientsFn) {
+    clients = allClients;
+    currentClient = currentClientId;
+    loadClientsCallback = loadClientsFn;
+}
+
+export function renderClientList() {
+    const clientList = document.getElementById('clientList');
+    clientList.innerHTML = '';
+
+    const clientSort = document.getElementById('clientSort');
+    let sortBy = localStorage.getItem('clientSortBy') || 'name-asc';
+    if (clientSort) {
+        clientSort.value = sortBy;
+    }
+
+    const sortedClients = [...clients].sort((a, b) => {
+        if (sortBy === 'name-asc') {
+            return a.name.localeCompare(b.name);
+        } else if (sortBy === 'name-desc') {
+            return b.name.localeCompare(a.name);
+        } else if (sortBy === 'servers-asc') {
+            return (a.serverCount || 0) - (b.serverCount || 0);
+        } else if (sortBy === 'servers-desc') {
+            return (b.serverCount || 0) - (a.serverCount || 0);
+        }
+        return 0;
+    });
+
+    sortedClients.forEach(client => {
+        const item = document.createElement('div');
+        item.className = 'client-item';
+        if (client.id === currentClient) {
+            item.classList.add('active');
+        }
+
+        item.innerHTML = `
+            <div class="client-name">${client.name}</div>
+            <div class="client-status">
+                ${client.exists ? `${client.serverCount} server(s)` : 'No config'}
+            </div>
+        `;
+
+        item.addEventListener('click', () => selectClient(client.id));
+        clientList.appendChild(item);
+    });
+
+    if (clientSort) {
+        clientSort.onchange = () => {
+            localStorage.setItem('clientSortBy', clientSort.value);
+            renderClientList();
+        };
+    }
+}
+
+export async function selectClient(clientId) {
+    currentClient = clientId;
+    // Update the global currentClient in main.js
+    if (window.setCurrentClient) {
+        window.setCurrentClient(clientId);
+    }
+    renderClientList();
+
+    const welcomeView = document.getElementById('welcomeView');
+    const clientView = document.getElementById('clientView');
+
+    welcomeView.style.display = 'none';
+    clientView.style.display = 'block';
+
+    const client = clients.find(c => c.id === clientId);
+    document.getElementById('clientName').textContent = client.name;
+    document.getElementById('configPath').textContent = client.configPath;
+
+    await loadClientServers();
+}
+
+export async function loadClientServers() {
+    try {
+        const config = await getClientConfigApi(currentClient);
+        renderServerList(config.servers || {});
+    } catch (error) {
+        console.error('Failed to load servers:', error);
+        renderServerList({});
+    }
+}
+
+function renderServerList(servers) {
+    const serverList = document.getElementById('serverList');
+
+    if (Object.keys(servers).length === 0) {
+        serverList.innerHTML = '<p style="color: #7f8c8d;">No servers configured</p>';
+        return;
+    }
+
+    // Add bulk actions toolbar
+    serverList.innerHTML = `
+        <div id="bulkActions" class="bulk-actions" style="display: none;">
+            <span id="selectedCount">0 selected</span>
+            <button class="btn btn-small btn-danger" id="deleteSelectedBtn">Delete Selected</button>
+            <button class="btn btn-small btn-secondary" id="selectAllServersBtn">Select All</button>
+            <button class="btn btn-small btn-secondary" id="deselectAllServersBtn">Deselect All</button>
+        </div>
+    `;
+
+    for (const [name, server] of Object.entries(servers)) {
+        const card = document.createElement('div');
+        card.className = 'server-card';
+        card.dataset.serverName = name;
+
+        let envHtml = '';
+        if (server.env && Object.keys(server.env).length > 0) {
+            envHtml = '<div class="env-list"><strong>Environment:</strong><br>';
+            for (const [key, value] of Object.entries(server.env)) {
+                const displayValue = value.includes('KEY') || value.includes('SECRET')
+                    ? value.substring(0, 4) + '***'
+                    : value;
+                envHtml += `${key}: ${displayValue}<br>`;
+            }
+            envHtml += '</div>';
+        }
+
+        card.innerHTML = `
+            <div class="server-header">
+                <input type="checkbox" class="server-checkbox" data-server="${name}">
+                <span class="server-name">${name}</span>
+                <div class="server-actions">
+                    <button class="btn btn-small btn-secondary edit-server-btn" data-server-name="${name}">Edit</button>
+                    <button class="btn btn-small btn-secondary export-server-btn" data-server-name="${name}">Export</button>
+                    <button class="btn btn-small btn-danger delete-server-btn" data-server-name="${name}">Delete</button>
+                </div>
+            </div>
+            <div class="server-details">
+                ${server.command ? `<div class="detail-row"><strong>Command:</strong> ${server.command}</div>` : ''}
+                ${server.args ? `<div class="detail-row"><strong>Args:</strong> ${server.args.join(' ')}</div>` : ''}
+                ${envHtml}
+                <div class="detail-row"><button class="icon-btn secondary copy-to-clipboard-btn" data-server-name="${name}" title="Copy to Clipboard">📋</button></div>
+            </div>
+        `;
+
+        serverList.appendChild(card);
+    }
+
+    attachClientViewEventListeners();
+}
+
+function attachClientViewEventListeners() {
+    document.querySelectorAll('.server-checkbox').forEach(checkbox => {
+        checkbox.onchange = updateBulkActions;
+    });
+
+    document.getElementById('deleteSelectedBtn').onclick = () => deleteSelected(loadClientServers, null, window.loadClients); // Call deleteSelected from modals.js
+    document.getElementById('selectAllServersBtn').onclick = selectAllServers;
+    document.getElementById('deselectAllServersBtn').onclick = deselectAllServers;
+
+    const serverList = document.getElementById('serverList');
+    serverList.addEventListener('click', (e) => {
+        if (e.target.classList.contains('delete-server-btn')) {
+            deleteServerFromClientView(e.target.dataset.serverName);
+        } else if (e.target.classList.contains('edit-server-btn')) {
+            editServerFromClientView(e.target.dataset.serverName);
+        } else if (e.target.classList.contains('copy-server-btn')) {
+            copyServerFromClientView(e.target.dataset.serverName);
+        } else if (e.target.classList.contains('copy-to-clipboard-btn')) {
+            copyToClipboardFromClientView(e.target.dataset.serverName, e);
+        } else if (e.target.classList.contains('export-server-btn')) {
+            exportServerFromClientView(e.target.dataset.serverName);
+        }
+    });
+}
+
+// Wrapper functions to pass callbacks
+export const editServerFromClientView = async (name) => {
+    try {
+        const config = await getClientConfigApi(currentClient);
+        const serverConfig = config.servers[name];
+        showServerModal(name, serverConfig, loadClientServers, null, currentClient, loadClientsCallback);
+    } catch (error) {
+        alert('Failed to load server config for editing: ' + error.message);
+    }
+};
+
+export const copyServerFromClientView = (serverName) => {
+    copyServer(serverName, window.loadClients);
+};
+
+export const copyToClipboardFromClientView = (serverName, event) => {
+    copyToClipboard(serverName, event);
+};
+
+export const exportServerFromClientView = (serverName) => {
+    exportServer(serverName, currentClient);
+};
+
+export const deleteServerFromClientView = (name) => {
+    deleteServer(name, loadClientServers, null, loadClientsCallback, currentClient);
+};
+
+export const removeFromAllFromClientView = (serverName) => {
+    removeFromAll(serverName, window.loadClients, loadClientServers, window.loadClients);
+};
+
+export const renameServerFromClientView = (serverName) => {
+    showRenameServerModal(serverName, loadClientsCallback, currentClient);
+};

package/public/js/kanbanView.js

@@ -0,0 +1,224 @@
+import { getClientConfigApi, copyServerApi } from './api.js';
+import { showServerModal, editServer, deleteServer, copyToClipboard, exportServer } from './modals.js';
+
+let clients = []; // This will be passed from main.js
+let draggedServer = null;
+let draggedFromClient = null;
+let loadClientsCallback = null; // Callback to main.js to reload all clients
+
+export function initKanbanView(allClients, loadClientsFn) {
+    clients = allClients;
+    loadClientsCallback = loadClientsFn;
+    attachKanbanViewEventListeners();
+}
+
+// Simple hash function to generate a consistent color from a string
+function getServerColor(serverName) {
+    let hash = 0;
+    for (let i = 0; i < serverName.length; i++) {
+        hash = serverName.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const hue = hash % 360;
+    return `hsl(${hue}, 70%, 85%)`; // Light, saturated color
+}
+
+export async function renderKanbanBoard() {
+    const board = document.getElementById('kanbanBoard');
+    board.innerHTML = '';
+
+    const kanbanSort = document.getElementById('kanbanSort');
+    let sortBy = localStorage.getItem('kanbanSortBy') || 'name-asc';
+    if (kanbanSort) {
+        kanbanSort.value = sortBy;
+    }
+
+    const sortedClients = [...clients].sort((a, b) => {
+        if (sortBy === 'name-asc') {
+            return a.name.localeCompare(b.name);
+        } else if (sortBy === 'name-desc') {
+            return b.name.localeCompare(a.name);
+        } else if (sortBy === 'servers-asc') {
+            return (a.serverCount || 0) - (b.serverCount || 0);
+        } else if (sortBy === 'servers-desc') {
+            return (b.serverCount || 0) - (a.serverCount || 0);
+        }
+        return 0;
+    });
+
+    for (const client of sortedClients) {
+        const column = document.createElement('div');
+        column.className = 'kanban-column';
+        column.dataset.client = client.id;
+
+        const header = document.createElement('div');
+        header.className = 'kanban-header';
+        header.innerHTML = `
+            <h3>${client.name}</h3>
+            <div class="kanban-config-path">${client.configPath}</div>
+        `;
+
+        const serversContainer = document.createElement('div');
+        serversContainer.className = 'kanban-servers';
+        serversContainer.dataset.client = client.id;
+
+        // Load servers for this client
+        try {
+            const config = await getClientConfigApi(client.id);
+
+            for (const [name, server] of Object.entries(config.servers || {})) {
+                const card = createKanbanCard(client.id, name, server);
+                serversContainer.appendChild(card);
+            }
+        } catch (error) {
+            console.error(`Failed to load servers for ${client.id}:`, error);
+        }
+
+        // Add drop zone events
+        serversContainer.ondragover = (e) => {
+            e.preventDefault();
+            serversContainer.classList.add('drag-over');
+        };
+
+        serversContainer.ondragleave = () => {
+            serversContainer.classList.remove('drag-over');
+        };
+
+        serversContainer.ondrop = async (e) => {
+            e.preventDefault();
+            serversContainer.classList.remove('drag-over');
+
+            if (draggedServer && draggedFromClient && draggedFromClient !== client.id) {
+                await handleDrop(client.id);
+            }
+        };
+
+        const addBtn = document.createElement('button');
+        addBtn.className = 'btn btn-primary kanban-add-btn';
+        addBtn.textContent = 'Add Server';
+        addBtn.addEventListener('click', () => {
+            // Pass client.id as the clientId parameter to showServerModal
+            showServerModal(null, null, () => window.loadClients(), renderKanbanBoard, client.id, loadClientsCallback); // Pass client.id and renderKanbanBoard as callback
+        });
+
+        column.appendChild(header);
+        column.appendChild(serversContainer);
+        column.appendChild(addBtn);
+        board.appendChild(column);
+    }
+
+    if (kanbanSort) {
+        kanbanSort.onchange = () => {
+            localStorage.setItem('kanbanSortBy', kanbanSort.value);
+            renderKanbanBoard();
+        };
+    }
+}
+
+function createKanbanCard(clientId, serverName, server) {
+    const card = document.createElement('div');
+    card.className = 'kanban-card';
+    card.draggable = true;
+    card.dataset.server = serverName;
+    card.dataset.client = clientId;
+    card.style.backgroundColor = getServerColor(serverName);
+
+    let details = '';
+    if (server.command) details += `cmd: ${server.command}\n`;
+    if (server.args) details += `args: ${server.args.join(' ')}\n`;
+    if (server.env) details += `env: ${Object.keys(server.env).length} var(s)`;
+
+    card.innerHTML = `
+        <div class="kanban-card-header">
+            <span class="kanban-card-title">${serverName}</span>
+            <div class="kanban-card-actions">
+                <button class="icon-btn edit-server-kanban-btn" title="Edit" data-client-id="${clientId}" data-server-name="${serverName}">✏️</button>
+                <button class="icon-btn copy-to-clipboard-kanban-btn" title="Copy to clipboard" data-client-id="${clientId}" data-server-name="${serverName}">📋</button>
+                <button class="icon-btn export-server-kanban-btn" title="Export" data-client-id="${clientId}" data-server-name="${serverName}">💾</button>
+                <button class="icon-btn delete delete-server-kanban-btn" title="Delete" data-client-id="${clientId}" data-server-name="${serverName}">🗑️</button>
+            </div>
+        </div>
+        <div class="kanban-card-details">${details}</div>
+    `;
+
+    card.ondragstart = (e) => {
+        // Don't start drag if clicking on buttons
+        if (e.target.tagName === 'BUTTON') {
+            e.preventDefault();
+            return;
+        }
+        draggedServer = serverName;
+        draggedFromClient = clientId;
+        card.classList.add('dragging');
+        e.dataTransfer.effectAllowed = 'copy';
+    };
+
+    card.ondragend = () => {
+        card.classList.remove('dragging');
+        draggedServer = null;
+        draggedFromClient = null;
+    };
+
+    return card;
+}
+
+function attachKanbanViewEventListeners() {
+    const kanbanBoard = document.getElementById('kanbanBoard');
+    kanbanBoard.addEventListener('click', (e) => {
+        if (e.target.classList.contains('edit-server-kanban-btn')) {
+            editServerKanban(e.target.dataset.clientId, e.target.dataset.serverName, e);
+        } else if (e.target.classList.contains('rename-server-kanban-btn')) {
+            renameServerKanban(e.target.dataset.clientId, e.target.dataset.serverName, e);
+        } else if (e.target.classList.contains('copy-to-clipboard-kanban-btn')) {
+            copyToClipboardKanban(e.target.dataset.clientId, e.target.dataset.serverName, e);
+        } else if (e.target.classList.contains('export-server-kanban-btn')) {
+            exportServerKanban(e.target.dataset.clientId, e.target.dataset.serverName, e);
+        } else if (e.target.classList.contains('delete-server-kanban-btn')) {
+            deleteServerKanban(e.target.dataset.clientId, e.target.dataset.serverName, e);
+        }
+    });
+}
+
+const handleDrop = async (targetClient) => {
+    if (!draggedServer || !draggedFromClient) return;
+
+    try {
+        const response = await copyServerApi(draggedFromClient, draggedServer, targetClient, draggedServer);
+
+        if (response.success) {
+            await renderKanbanBoard();
+        } else {
+            throw new Error('Failed to copy server');
+        }
+    } catch (error) {
+        alert('Failed to copy server: ' + error.message);
+    }
+};
+
+export const editServerKanban = (clientId, serverName, event) => {
+    event.stopPropagation();
+    editServer(serverName, renderKanbanBoard, clientId, loadClientsCallback);
+};
+
+export const deleteServerKanban = (clientId, serverName, event) => {
+    event.stopPropagation();
+    if (!confirm(`Are you sure you want to delete the server "${serverName}" from ${clients.find(c => c.id === clientId).name}?`)) {
+        return;
+    }
+
+    deleteServer(serverName, () => window.loadClients(), null, window.loadClients, clientId); // Pass clientId
+};
+
+export const exportServerKanban = (clientId, serverName, event) => {
+    event.stopPropagation();
+    exportServer(serverName, clientId);
+};
+
+export const copyToClipboardKanban = (clientId, serverName, event) => {
+    event.stopPropagation();
+    copyToClipboard(serverName, event, null, clientId);
+};
+
+export const renameServerKanban = (clientId, serverName, event) => {
+    event.stopPropagation();
+    showRenameServerModal(serverName, () => window.loadClients(), clientId); // Pass clientId
+};

package/public/js/main.js

@@ -0,0 +1,126 @@
+import { detectClientsApi, listClientsApi } from './api.js';
+import { initClientView, renderClientList, selectClient, loadClientServers } from './clientView.js';
+import { initKanbanView, renderKanbanBoard } from './kanbanView.js';
+import { initServerView, renderAllServers } from './serverView.js';
+import { showServerModal, showImportModal, exportConfig, initModals, showRemoteServerModal } from './modals.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+    let currentClient = null;
+    let clients = [];
+    let currentView = 'list';
+
+    const listViewBtn = document.getElementById('listViewBtn');
+    const kanbanViewBtn = document.getElementById('kanbanViewBtn');
+    const serverViewBtn = document.getElementById('serverViewBtn');
+
+    const listViewContainer = document.getElementById('listViewContainer');
+    const kanbanViewContainer = document.getElementById('kanbanViewContainer');
+    const serverViewContainer = document.getElementById('serverViewContainer');
+
+    async function refreshClients() {
+        try {
+            await detectClientsApi();
+            await loadClients();
+        } catch (error) {
+            console.error('Failed to refresh clients:', error);
+            alert('Failed to refresh clients. Make sure the server is running.');
+        }
+    }
+
+    async function loadClients() {
+        try {
+            clients = await listClientsApi();
+            
+            // Initialize modules with current client data
+            initClientView(clients, currentClient, loadClients);
+            initKanbanView(clients, loadClients);
+            initServerView(clients, loadClients);
+            initModals(clients, currentClient, window.loadClients);
+
+            renderClientList();
+            renderKanbanBoard();
+            renderAllServers();
+        } catch (error) {
+            console.error('Failed to load clients:', error);
+            alert('Failed to load clients. Make sure the server is running.');
+        }
+    }
+    window.loadClients = loadClients; // Make loadClients globally accessible
+    window.setCurrentClient = (clientId) => { currentClient = clientId; }; // Make setCurrentClient globally accessible
+
+    // View switching
+    function switchView(view) {
+        currentView = view;
+
+        listViewBtn.classList.toggle('active', view === 'list');
+        kanbanViewBtn.classList.toggle('active', view === 'kanban');
+        serverViewBtn.classList.toggle('active', view === 'server');
+
+        listViewContainer.style.display = view === 'list' ? 'block' : 'none';
+        kanbanViewContainer.style.display = view === 'kanban' ? 'block' : 'none';
+        serverViewContainer.style.display = view === 'server' ? 'block' : 'none';
+
+        if (view === 'kanban') {
+            renderKanbanBoard();
+        } else if (view === 'server') {
+            renderAllServers();
+        }
+    }
+
+    // Global Event Listeners
+    listViewBtn.addEventListener('click', () => switchView('list'));
+    kanbanViewBtn.addEventListener('click', () => switchView('kanban'));
+    serverViewBtn.addEventListener('click', () => switchView('server'));
+
+    document.getElementById('refreshBtn').addEventListener('click', refreshClients);
+    document.getElementById('addServerBtn').addEventListener('click', () => {
+        // For global add server button, we need to prompt user to select a client first
+        if (!currentClient) {
+            alert('Please select a client from the sidebar first, then use the Add Server button in the client view.');
+            return;
+        }
+        showServerModal(null, null, loadClientServers, renderKanbanBoard, currentClient, window.loadClients);
+    });
+    document.getElementById('addRemoteServerBtn').addEventListener('click', () => {
+        // For global add remote server button, we need to prompt user to select a client first
+        if (!currentClient) {
+            alert('Please select a client from the sidebar first, then use the Add Remote MCP button in the client view.');
+            return;
+        }
+        showRemoteServerModal(loadClientServers, renderKanbanBoard, currentClient, window.loadClients);
+    });
+    document.getElementById('exportConfigBtn').addEventListener('click', exportConfig);
+    document.getElementById('importConfigBtn').addEventListener('click', () => showImportModal(loadClientServers, renderKanbanBoard, window.loadClients));
+
+    // Close modals when clicking outside
+    document.querySelectorAll('.modal').forEach(modal => {
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                modal.style.display = 'none';
+            }
+        });
+    });
+
+    document.getElementById('cancelModal').addEventListener('click', () => {
+        document.getElementById('serverModal').style.display = 'none';
+    });
+
+    document.getElementById('cancelCopy').addEventListener('click', () => {
+        document.getElementById('copyModal').style.display = 'none';
+    });
+
+    document.getElementById('cancelImport').addEventListener('click', () => {
+        document.getElementById('importModal').style.display = 'none';
+    });
+
+    document.getElementById('cancelEditServerEnv').addEventListener('click', () => {
+        document.getElementById('editServerEnvModal').style.display = 'none';
+    });
+
+    document.getElementById('cancelAddServerToClients').addEventListener('click', () => {
+        document.getElementById('addServerToClientsModal').style.display = 'none';
+    });
+
+    // Load clients on page load
+    loadClients();
+});