mcp-config-manager 2.1.1 → 2.3.0

package/public/js/clientView.js

@@ -1,4 +1,5 @@
 import { listClientsApi, getClientConfigApi, deleteServerApi } from './api.js';
+import { fetchClientTabs, fetchTabItems, fetchItem, createItem, updateItem, deleteItem, fetchItemFiles, fetchItemFile, updateItemFile } from './skillsApi.js';
 import { showServerModal, copyServer, copyToClipboard, exportServer, deleteServer, removeFromAll, updateBulkActions, selectAllServers, deselectAllServers, deleteSelected } from './modals.js';
 import { getServerLogo, getInitials } from './logoService.js';
 
@@ -6,6 +7,8 @@ let currentClient = null;
 let clients = [];
 let loadClientsCallback = null; // Callback to main.js to reload all clients
 let serverListListenerAttached = false; // Track if event listener is already attached
+let currentClientTab = 'servers'; // Current tab within client view
+let clientTabs = []; // Tabs available for current client
 
 export function initClientView(allClients, currentClientId, loadClientsFn) {
     clients = allClients;
@@ -64,6 +67,8 @@ export function renderClientList() {
 
 export async function selectClient(clientId) {
     currentClient = clientId;
+    currentClientTab = 'servers'; // Reset to servers tab
+
     // Update the global currentClient in main.js
     if (window.setCurrentClient) {
         window.setCurrentClient(clientId);
@@ -80,9 +85,441 @@ export async function selectClient(clientId) {
     document.getElementById('clientName').textContent = client.name;
     document.getElementById('configPath').textContent = client.configPath;
 
+    // Load tabs for this client
+    await loadClientTabs();
+
+    // Load servers by default
     await loadClientServers();
 }
 
+async function loadClientTabs() {
+    try {
+        const result = await fetchClientTabs(currentClient);
+        clientTabs = result.tabs || [];
+        renderClientTabs();
+    } catch (error) {
+        console.error('Failed to load client tabs:', error);
+        clientTabs = [];
+        renderClientTabs();
+    }
+}
+
+function renderClientTabs() {
+    // Remove existing tabs container if present
+    const existingTabs = document.getElementById('clientContentTabs');
+    if (existingTabs) {
+        existingTabs.remove();
+    }
+
+    // Create tabs container
+    const tabsContainer = document.createElement('div');
+    tabsContainer.id = 'clientContentTabs';
+    tabsContainer.className = 'client-content-tabs';
+
+    // Always add Servers tab
+    const serversTab = document.createElement('button');
+    serversTab.className = `client-tab-btn ${currentClientTab === 'servers' ? 'active' : ''}`;
+    serversTab.dataset.tab = 'servers';
+    serversTab.innerHTML = '📡 Servers';
+    serversTab.addEventListener('click', () => switchClientTab('servers'));
+    tabsContainer.appendChild(serversTab);
+
+    // Add skill/prompt tabs based on client capabilities
+    clientTabs.forEach(tab => {
+        const tabBtn = document.createElement('button');
+        tabBtn.className = `client-tab-btn ${currentClientTab === tab.id ? 'active' : ''}`;
+        tabBtn.dataset.tab = tab.id;
+        tabBtn.innerHTML = `${tab.icon} ${tab.name}`;
+        tabBtn.title = tab.description;
+        tabBtn.addEventListener('click', () => switchClientTab(tab.id));
+        tabsContainer.appendChild(tabBtn);
+    });
+
+    // Insert tabs after client header
+    const clientHeader = document.querySelector('.client-header');
+    if (clientHeader) {
+        clientHeader.after(tabsContainer);
+    }
+
+    // Update action buttons visibility based on tab
+    updateActionButtons();
+}
+
+function updateActionButtons() {
+    const addServerBtn = document.getElementById('addServerBtn');
+    const addRemoteServerBtn = document.getElementById('addRemoteServerBtn');
+    const exportConfigBtn = document.getElementById('exportConfigBtn');
+    const importConfigBtn = document.getElementById('importConfigBtn');
+
+    const isServersTab = currentClientTab === 'servers';
+
+    if (addServerBtn) addServerBtn.style.display = isServersTab ? 'inline-block' : 'none';
+    if (addRemoteServerBtn) addRemoteServerBtn.style.display = isServersTab ? 'inline-block' : 'none';
+    if (exportConfigBtn) exportConfigBtn.style.display = isServersTab ? 'inline-block' : 'none';
+    if (importConfigBtn) importConfigBtn.style.display = isServersTab ? 'inline-block' : 'none';
+}
+
+async function switchClientTab(tabId) {
+    currentClientTab = tabId;
+
+    // Update tab button states
+    document.querySelectorAll('.client-tab-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.tab === tabId);
+    });
+
+    updateActionButtons();
+
+    if (tabId === 'servers') {
+        await loadClientServers();
+    } else {
+        await loadTabContent(tabId);
+    }
+}
+
+async function loadTabContent(tabId) {
+    const serverList = document.getElementById('serverList');
+    const tab = clientTabs.find(t => t.id === tabId);
+
+    if (!tab) {
+        serverList.innerHTML = '<p class="no-servers">Tab not found</p>';
+        return;
+    }
+
+    serverList.innerHTML = '<p class="loading">Loading...</p>';
+
+    try {
+        const result = await fetchTabItems(currentClient, tabId);
+        const items = result.items || [];
+        renderTabItems(items, tab);
+    } catch (error) {
+        console.error('Failed to load tab content:', error);
+        serverList.innerHTML = `<p class="error">Failed to load ${tab.name}: ${error.message}</p>`;
+    }
+}
+
+function renderTabItems(items, tab) {
+    const serverList = document.getElementById('serverList');
+
+    // Add button for creating new items
+    const headerHtml = `
+        <div class="tab-content-header">
+            <button class="btn btn-primary" id="addItemBtn">+ Add ${tab.name.slice(0, -1)}</button>
+        </div>
+    `;
+
+    if (items.length === 0) {
+        serverList.innerHTML = headerHtml + `<p class="no-servers">No ${tab.name.toLowerCase()} configured</p>`;
+        attachTabItemEventListeners(tab);
+        return;
+    }
+
+    let html = headerHtml;
+
+    items.forEach(item => {
+        const typeBadge = item.type === 'complex'
+            ? '<span class="item-badge item-badge-complex">📁 Complex</span>'
+            : item.type === 'single'
+            ? '<span class="item-badge item-badge-single">📄 Single</span>'
+            : '<span class="item-badge item-badge-simple">⚡ Simple</span>';
+
+        html += `
+            <div class="server-card skill-card" data-item-name="${item.name}">
+                <div class="server-header">
+                    <div class="server-info">
+                        <span class="server-name">${item.metadata?.name || item.name}</span>
+                        ${typeBadge}
+                    </div>
+                    <div class="server-actions">
+                        <button class="btn btn-small btn-secondary edit-item-btn" data-item-name="${item.name}">Edit</button>
+                        <button class="btn btn-small btn-secondary duplicate-item-btn" data-item-name="${item.name}">Duplicate</button>
+                        <button class="btn btn-small btn-danger delete-item-btn" data-item-name="${item.name}">Delete</button>
+                    </div>
+                </div>
+                <div class="server-details">
+                    ${item.metadata?.description ? `<div class="detail-row">${item.metadata.description}</div>` : ''}
+                    ${item.metadata?.model ? `<div class="detail-row"><strong>Model:</strong> ${item.metadata.model}</div>` : ''}
+                    ${item.structure?.hasWorkflows ? '<span class="structure-badge">workflows/</span>' : ''}
+                    ${item.structure?.hasReferences ? '<span class="structure-badge">references/</span>' : ''}
+                </div>
+            </div>
+        `;
+    });
+
+    serverList.innerHTML = html;
+    attachTabItemEventListeners(tab);
+}
+
+function attachTabItemEventListeners(tab) {
+    const addItemBtn = document.getElementById('addItemBtn');
+    if (addItemBtn) {
+        addItemBtn.addEventListener('click', () => showItemModal(null, tab));
+    }
+
+    document.querySelectorAll('.edit-item-btn').forEach(btn => {
+        btn.addEventListener('click', async (e) => {
+            const itemName = e.target.dataset.itemName;
+            try {
+                const item = await fetchItem(currentClient, tab.id, itemName);
+                showItemModal(item, tab);
+            } catch (error) {
+                alert('Failed to load item: ' + error.message);
+            }
+        });
+    });
+
+    document.querySelectorAll('.duplicate-item-btn').forEach(btn => {
+        btn.addEventListener('click', async (e) => {
+            const itemName = e.target.dataset.itemName;
+            const newName = prompt(`Enter name for the duplicate:`, `${itemName}-copy`);
+            if (newName && newName !== itemName) {
+                try {
+                    await fetch(`/api/clients/${encodeURIComponent(currentClient)}/tabs/${encodeURIComponent(tab.id)}/items/${encodeURIComponent(itemName)}/copy`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ newName })
+                    });
+                    await loadTabContent(tab.id);
+                } catch (error) {
+                    alert('Failed to duplicate item: ' + error.message);
+                }
+            }
+        });
+    });
+
+    document.querySelectorAll('.delete-item-btn').forEach(btn => {
+        btn.addEventListener('click', async (e) => {
+            const itemName = e.target.dataset.itemName;
+            if (confirm(`Delete "${itemName}"?`)) {
+                try {
+                    await deleteItem(currentClient, tab.id, itemName);
+                    await loadTabContent(tab.id);
+                } catch (error) {
+                    alert('Failed to delete item: ' + error.message);
+                }
+            }
+        });
+    });
+}
+
+async function showItemModal(item, tab) {
+    const modal = document.getElementById('skill-modal');
+    const modalContent = document.getElementById('skill-modal-content');
+    const titleEl = document.getElementById('skill-modal-title');
+    const simpleView = document.getElementById('skill-simple-view');
+    const complexView = document.getElementById('skill-complex-view');
+
+    // Determine if complex (has directory structure)
+    const isComplex = item && item.type === 'complex';
+
+    // Update modal title
+    const itemTypeName = tab.name.slice(0, -1);
+    titleEl.textContent = item ? `Edit ${itemTypeName}` : `Add ${itemTypeName}`;
+
+    // Show modal first
+    modal.style.display = 'flex';
+
+    if (isComplex) {
+        await showComplexView(item, tab);
+    } else {
+        showSimpleView(item, tab);
+    }
+
+    // Simple view - metadata + content in one pane
+    function showSimpleView(item, tab) {
+        simpleView.style.display = 'block';
+        complexView.style.display = 'none';
+        modalContent.classList.remove('modal-large');
+        modalContent.classList.add('modal-medium');
+
+        const form = document.getElementById('skill-form-simple');
+        const nameInput = document.getElementById('skill-name');
+        const descInput = document.getElementById('skill-description');
+        const modelInput = document.getElementById('skill-model');
+        const contentArea = document.getElementById('skill-content');
+
+        // Populate form
+        if (item) {
+            nameInput.value = item.name;
+            nameInput.disabled = true;
+            descInput.value = item.metadata?.description || '';
+            modelInput.value = item.metadata?.model || '';
+            contentArea.value = item.content || '';
+        } else {
+            nameInput.value = '';
+            nameInput.disabled = false;
+            descInput.value = '';
+            modelInput.value = '';
+            contentArea.value = '';
+        }
+
+        // Handle form submission
+        form.onsubmit = async (e) => {
+            e.preventDefault();
+
+            const data = {
+                type: 'simple',
+                metadata: {
+                    name: nameInput.value,
+                    description: descInput.value,
+                },
+                content: contentArea.value
+            };
+
+            if (modelInput.value) {
+                data.metadata.model = modelInput.value;
+            }
+
+            try {
+                if (item) {
+                    await updateItem(currentClient, tab.id, item.name, data);
+                } else {
+                    await createItem(currentClient, tab.id, nameInput.value, data);
+                }
+                modal.style.display = 'none';
+                await loadTabContent(tab.id);
+            } catch (error) {
+                alert('Failed to save: ' + error.message);
+            }
+        };
+
+        // Cancel button
+        document.getElementById('skill-cancel-btn').onclick = () => {
+            modal.style.display = 'none';
+        };
+    }
+
+    // Complex view - file tree + editor
+    async function showComplexView(item, tab) {
+        simpleView.style.display = 'none';
+        complexView.style.display = 'block';
+        modalContent.classList.remove('modal-medium');
+        modalContent.classList.add('modal-large');
+
+        const fileList = document.getElementById('skill-file-list');
+        const fileEditor = document.getElementById('skill-file-editor');
+        const currentFileLabel = document.getElementById('skill-current-file');
+        const saveFileBtn = document.getElementById('skill-save-file-btn');
+
+        let currentFile = 'SKILL.md';
+        let files = [];
+
+        // Load file list
+        try {
+            console.log('Loading files for:', currentClient, tab.id, item.name);
+            const result = await fetchItemFiles(currentClient, tab.id, item.name);
+            console.log('Files result:', result);
+            files = result.files || [];
+            renderFileTree(files);
+        } catch (error) {
+            console.error('Failed to load files:', error);
+            fileList.innerHTML = `<div class="file-item">Failed to load files: ${error.message}</div>`;
+        }
+
+        // Load initial file (SKILL.md)
+        await loadFile('SKILL.md');
+
+        function renderFileTree(files) {
+            // Separate root files and build directory structure
+            const rootFiles = [];
+            const directories = {};
+
+            files.forEach(f => {
+                if (f.type === 'directory') {
+                    // Skip directory entries, we'll use them as groupings
+                    if (!directories[f.name]) {
+                        directories[f.name] = { name: f.name, children: [] };
+                    }
+                } else {
+                    // It's a file
+                    const parts = f.path.split('/');
+                    if (parts.length === 1) {
+                        // Root level file
+                        rootFiles.push(f);
+                    } else {
+                        // File in a directory
+                        const dir = parts[0];
+                        if (!directories[dir]) {
+                            directories[dir] = { name: dir, children: [] };
+                        }
+                        directories[dir].children.push(f);
+                    }
+                }
+            });
+
+            let html = '';
+
+            // Render root files first (like SKILL.md)
+            rootFiles.sort((a, b) => a.name.localeCompare(b.name));
+            rootFiles.forEach(f => {
+                const isActive = f.path === currentFile;
+                html += `<div class="file-item ${isActive ? 'active' : ''}" data-path="${f.path}">
+                    <span class="file-item-icon">📄</span>
+                    <span class="file-item-name">${f.name}</span>
+                </div>`;
+            });
+
+            // Render directories with their children
+            const sortedDirs = Object.values(directories).sort((a, b) => a.name.localeCompare(b.name));
+            sortedDirs.forEach(dir => {
+                html += `<div class="file-item is-directory">
+                    <span class="file-item-icon">📁</span>
+                    <span class="file-item-name">${dir.name}/</span>
+                </div>`;
+                dir.children.sort((a, b) => a.name.localeCompare(b.name));
+                dir.children.forEach(child => {
+                    const isActive = child.path === currentFile;
+                    html += `<div class="file-item ${isActive ? 'active' : ''}" data-path="${child.path}">
+                        <span class="file-item-indent"></span>
+                        <span class="file-item-icon">📄</span>
+                        <span class="file-item-name">${child.name}</span>
+                    </div>`;
+                });
+            });
+
+            fileList.innerHTML = html || '<div class="file-item">No files found</div>';
+
+            // Add click handlers
+            fileList.querySelectorAll('.file-item[data-path]').forEach(el => {
+                el.onclick = () => loadFile(el.dataset.path);
+            });
+        }
+
+        async function loadFile(filePath) {
+            currentFile = filePath;
+            currentFileLabel.textContent = filePath;
+
+            // Update active state
+            fileList.querySelectorAll('.file-item').forEach(el => {
+                el.classList.toggle('active', el.dataset.path === filePath);
+            });
+
+            try {
+                const result = await fetchItemFile(currentClient, tab.id, item.name, filePath);
+                fileEditor.value = result.content || '';
+            } catch (error) {
+                fileEditor.value = `// Failed to load file: ${error.message}`;
+            }
+        }
+
+        // Save file button
+        saveFileBtn.onclick = async () => {
+            try {
+                await updateItemFile(currentClient, tab.id, item.name, currentFile, fileEditor.value);
+                saveFileBtn.textContent = 'Saved!';
+                setTimeout(() => { saveFileBtn.textContent = 'Save File'; }, 1500);
+            } catch (error) {
+                alert('Failed to save: ' + error.message);
+            }
+        };
+
+        // Close button
+        document.getElementById('skill-complex-cancel-btn').onclick = () => {
+            modal.style.display = 'none';
+            loadTabContent(tab.id); // Refresh list
+        };
+    }
+}
+
 export async function loadClientServers() {
     try {
         const config = await getClientConfigApi(currentClient);
@@ -238,6 +675,3 @@ export const removeFromAllFromClientView = (serverName) => {
     removeFromAll(serverName, window.loadClients, loadClientServers, window.loadClients);
 };
 
-export const renameServerFromClientView = (serverName) => {
-    showRenameServerModal(serverName, loadClientsCallback, currentClient);
-};

package/public/js/main.js

@@ -31,7 +31,7 @@ document.addEventListener('DOMContentLoaded', () => {
     async function loadClients() {
         try {
             clients = await listClientsApi();
-            
+
             // Initialize modules with current client data
             initClientView(clients, currentClient, loadClients);
             initKanbanView(clients, loadClients);
@@ -153,4 +153,4 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Load clients on page load
     loadClients();
-});
+});

package/public/js/skillsApi.js

@@ -0,0 +1,135 @@
+// Skills API - Per-Client Architecture
+
+async function apiRequest(url, options = {}) {
+    const response = await fetch(url, options);
+    if (!response.ok) {
+        const text = await response.text();
+        throw new Error(`API error ${response.status}: ${text}`);
+    }
+    return response.json();
+}
+
+// Get tabs for a specific client
+export async function fetchClientTabs(clientId) {
+    return apiRequest(`/api/clients/${encodeURIComponent(clientId)}/tabs`);
+}
+
+// Check if client has skills support
+export async function clientHasSkills(clientId) {
+    return apiRequest(`/api/clients/${encodeURIComponent(clientId)}/has-skills`);
+}
+
+// List items in a client's tab
+export async function fetchTabItems(clientId, tabId) {
+    return apiRequest(`/api/clients/${encodeURIComponent(clientId)}/tabs/${encodeURIComponent(tabId)}/items`);
+}
+
+// Get single item
+export async function fetchItem(clientId, tabId, name) {
+    return apiRequest(`/api/clients/${encodeURIComponent(clientId)}/tabs/${encodeURIComponent(tabId)}/items/${encodeURIComponent(name)}`);
+}
+
+// Create item
+export async function createItem(clientId, tabId, name, data) {
+    return apiRequest(`/api/clients/${encodeURIComponent(clientId)}/tabs/${encodeURIComponent(tabId)}/items/${encodeURIComponent(name)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+    });
+}
+
+// Update item
+export async function updateItem(clientId, tabId, name, data) {
+    return apiRequest(`/api/clients/${encodeURIComponent(clientId)}/tabs/${encodeURIComponent(tabId)}/items/${encodeURIComponent(name)}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+    });
+}
+
+// Delete item
+export async function deleteItem(clientId, tabId, name) {
+    return apiRequest(`/api/clients/${encodeURIComponent(clientId)}/tabs/${encodeURIComponent(tabId)}/items/${encodeURIComponent(name)}`, {
+        method: 'DELETE',
+    });
+}
+
+// List files in a complex item
+export async function fetchItemFiles(clientId, tabId, name) {
+    return apiRequest(`/api/clients/${encodeURIComponent(clientId)}/tabs/${encodeURIComponent(tabId)}/items/${encodeURIComponent(name)}/files`);
+}
+
+// Read file from complex item
+export async function fetchItemFile(clientId, tabId, name, filePath) {
+    // Don't encode filePath slashes - they're part of the path structure
+    const encodedPath = filePath.split('/').map(p => encodeURIComponent(p)).join('/');
+    return apiRequest(`/api/clients/${encodeURIComponent(clientId)}/tabs/${encodeURIComponent(tabId)}/items/${encodeURIComponent(name)}/files/${encodedPath}`);
+}
+
+// Write file in complex item
+export async function updateItemFile(clientId, tabId, name, filePath, content) {
+    // Don't encode filePath slashes - they're part of the path structure
+    const encodedPath = filePath.split('/').map(p => encodeURIComponent(p)).join('/');
+    return apiRequest(`/api/clients/${encodeURIComponent(clientId)}/tabs/${encodeURIComponent(tabId)}/items/${encodeURIComponent(name)}/files/${encodedPath}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content }),
+    });
+}
+
+// Copy item within same tab
+export async function copyItem(clientId, tabId, name, newName) {
+    return apiRequest(`/api/clients/${encodeURIComponent(clientId)}/tabs/${encodeURIComponent(tabId)}/items/${encodeURIComponent(name)}/copy`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ newName }),
+    });
+}
+
+// Commands API (legacy - still uses global commands path)
+
+export async function fetchCommands() {
+    return apiRequest('/api/commands');
+}
+
+export async function fetchCommand(name) {
+    return apiRequest(`/api/commands/${encodeURIComponent(name)}`);
+}
+
+export async function createCommand(name, data) {
+    return apiRequest(`/api/commands/${encodeURIComponent(name)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+    });
+}
+
+export async function updateCommand(name, data) {
+    return apiRequest(`/api/commands/${encodeURIComponent(name)}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+    });
+}
+
+export async function deleteCommand(name) {
+    return apiRequest(`/api/commands/${encodeURIComponent(name)}`, {
+        method: 'DELETE',
+    });
+}
+
+export async function renameCommand(oldName, newName) {
+    return apiRequest(`/api/commands/${encodeURIComponent(oldName)}/rename`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ newName }),
+    });
+}
+
+export async function duplicateCommand(name, newName) {
+    return apiRequest(`/api/commands/${encodeURIComponent(name)}/duplicate`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ newName }),
+    });
+}