imcp 0.0.12 → 0.0.14

package/dist/web/public/js/onboard/formProcessor.js

@@ -0,0 +1,309 @@
+// Form data processing and API calls
+export async function submitForm(event) {
+  event.preventDefault();
+  const formData = new FormData(event.target);
+  const jsonData = formDataToJson(formData);
+  
+  try {
+    const response = await fetch('/api/categories/onboard', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        categoryData: {
+          name: jsonData.name || '',
+          displayName: jsonData.displayName || '',
+          description: jsonData.description,
+          repository: jsonData.repository,
+          requirements: jsonData.requirements,
+          mcpServers: jsonData.servers?.map(server => ({
+            name: server.name,
+            description: server.description,
+            mode: server.mode,
+            schemas: server.schemas,
+            dependencies: server.dependencies,
+            installation: {
+              command: server.installation?.command,
+              args: server.installation?.args,
+              env: server.installation?.env?.reduce((acc, env) => {
+                acc[env.name] = {
+                  name: env.name,
+                  default: env.default,
+                  required: env.required || false,
+                  description: env.description
+                };
+                return acc;
+              }, {})
+            }
+          }))
+        },
+        isUpdate: new URLSearchParams(window.location.search).has('category')
+      })
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const result = await response.json();
+    console.log('Form submitted successfully:', result);
+    alert('Form submitted successfully!');
+  } catch (error) {
+    console.error('Error submitting form:', error);
+    alert('Error submitting form. Please try again.');
+  }
+}
+
+export function formDataToJson(formData) {
+  // Basic category information
+  const categoryData = {
+    name: formData.get('name'),
+    displayName: formData.get('displayName'),
+    description: formData.get('description'),
+    repository: formData.get('repository')
+  };
+
+  const servers = [];
+
+  // Process servers
+  for (let [key, value] of formData.entries()) {
+    if (key.startsWith('servers[')) {
+      const matches = key.match(/servers\[(\d+)\]\.(.+)/);
+      if (matches) {
+        const [, index, field] = matches;
+        
+        if (!servers[index]) {
+          servers[index] = {
+            requirements: [],
+            installation: {
+              env: []
+            }
+          };
+        }
+
+        // Handle nested fields
+        if (field.includes('.')) {
+          const fieldParts = field.split('.');
+          let current = servers[index];
+          
+          for (let i = 0; i < fieldParts.length - 1; i++) {
+            if (/\[\d+\]/.test(fieldParts[i])) {
+              const arrayMatches = fieldParts[i].match(/(.+)\[(\d+)\]/);
+              if (arrayMatches) {
+                const [, arrayName, arrayIndex] = arrayMatches;
+                if (!current[arrayName]) {
+                  current[arrayName] = [];
+                }
+                if (!current[arrayName][arrayIndex]) {
+                  current[arrayName][arrayIndex] = {};
+                }
+                current = current[arrayName][arrayIndex];
+              }
+            } else {
+              if (!current[fieldParts[i]]) {
+                current[fieldParts[i]] = {};
+              }
+              current = current[fieldParts[i]];
+            }
+          }
+          
+          const lastField = fieldParts[fieldParts.length - 1];
+          if (lastField === 'required') {
+            current[lastField] = formData.get(key) === 'on';
+          } else {
+            current[lastField] = value;
+          }
+        } else {
+          servers[index][field] = value;
+        }
+      }
+    }
+  }
+
+  // Process and clean up requirements
+
+  // Clean up servers data
+  const cleanServers = servers.filter(Boolean).map(server => {
+    const serverRequirements = (server.requirements || []).filter(Boolean).map(req => ({
+      name: req.name,
+      version: req.version,
+      order: req.order || undefined
+    }));
+
+    const cleanServer = {
+      name: server.name,
+      mode: server.mode,
+      description: server.description,
+      schemas: server.schemas || undefined,
+      dependencies: {
+        requirements: serverRequirements
+      },
+      requirements: (server.requirements || []).filter(Boolean).map(req => ({
+        name: req.name,
+        type: req.type,
+        version: req.version,
+        order: req.order || undefined,
+        alias: req.type === 'command' ? req.alias : undefined,
+        ...(req.registryType && req.registryType !== 'public' && {
+          registry: {
+            ...(req.registryType === 'github' && {
+              githubRelease: {
+                repository: req.registry?.githubRelease?.repository,
+                assetsName: req.registry?.githubRelease?.assetsName,
+                assetName: req.registry?.githubRelease?.assetName
+              }
+            }),
+            ...(req.registryType === 'artifacts' && {
+              artifacts: {
+                registryUrl: req.registry?.artifacts?.registryUrl,
+                assetName: req.registry?.artifacts?.assetName
+              }
+            }),
+            ...(req.registryType === 'local' && {
+              local: {
+                localPath: req.registry?.local?.localPath,
+                assetName: req.registry?.local?.assetName
+              }
+            })
+          }
+        })
+      }))
+    };
+
+    if (server.installation) {
+      cleanServer.installation = {
+        command: server.installation.command,
+        args: server.installation.args || undefined,
+        env: (server.installation.env || [])
+          .filter(Boolean)
+          .map(env => ({
+            name: env.name,
+            default: env.default || undefined,
+            required: env.required || false,
+            description: env.description || undefined
+          }))
+      };
+    }
+
+    return cleanServer;
+  });
+
+  // Collect all requirements from servers
+  const allRequirements = new Map();
+  
+  cleanServers.forEach(server => {
+    server.requirements?.forEach(req => {
+      const key = `${req.type}:${req.name}`;
+      if (!allRequirements.has(key)) {
+        allRequirements.set(key, req);
+      }
+    });
+  });
+
+  return {
+    name: categoryData.name,
+    displayName: categoryData.displayName,
+    description: categoryData.description,
+    repository: categoryData.repository,
+    requirements: Array.from(allRequirements.values()),
+    servers: cleanServers
+  };
+}
+
+export function populateForm(data) {
+  const { requirements = [], servers = [] } = data;
+
+  // Populate requirements
+  requirements.forEach((requirement, index) => {
+    window.addRequirement();
+    
+    // Set basic fields
+    document.querySelector(`[name="requirements[${index}].name"]`).value = requirement.name;
+    document.querySelector(`[name="requirements[${index}].type"]`).value = requirement.type;
+    document.querySelector(`[name="requirements[${index}].version"]`).value = requirement.version;
+    
+    if (requirement.order) {
+      document.querySelector(`[name="requirements[${index}].order"]`).value = requirement.order;
+    }
+    
+    if (requirement.type === 'command' && requirement.alias) {
+      document.querySelector(`[name="requirements[${index}].alias"]`).value = requirement.alias;
+      document.getElementById(`alias-field-${index}`).classList.remove('hidden');
+    }
+    
+    // Handle registry configuration
+    if (requirement.registry) {
+      let registryType;
+      if (requirement.registry.githubRelease) registryType = 'github';
+      else if (requirement.registry.artifacts) registryType = 'artifacts';
+      else if (requirement.registry.local) registryType = 'local';
+      
+      if (registryType) {
+        const registrySelect = document.querySelector(`[name="requirements[${index}].registryType"]`);
+        registrySelect.value = registryType;
+        window.toggleRegistryConfig(index);
+        
+        // Populate registry-specific fields
+        if (registryType === 'github') {
+          const { repository, assetsName, assetName } = requirement.registry.githubRelease;
+          if (repository) document.querySelector(`[name="requirements[${index}].registry.githubRelease.repository"]`).value = repository;
+          if (assetsName) document.querySelector(`[name="requirements[${index}].registry.githubRelease.assetsName"]`).value = assetsName;
+          if (assetName) document.querySelector(`[name="requirements[${index}].registry.githubRelease.assetName"]`).value = assetName;
+        } else if (registryType === 'artifacts') {
+          const { registryUrl, assetName } = requirement.registry.artifacts;
+          if (registryUrl) document.querySelector(`[name="requirements[${index}].registry.artifacts.registryUrl"]`).value = registryUrl;
+          if (assetName) document.querySelector(`[name="requirements[${index}].registry.artifacts.assetName"]`).value = assetName;
+        } else if (registryType === 'local') {
+          const { localPath, assetName } = requirement.registry.local;
+          if (localPath) document.querySelector(`[name="requirements[${index}].registry.local.localPath"]`).value = localPath;
+          if (assetName) document.querySelector(`[name="requirements[${index}].registry.local.assetName"]`).value = assetName;
+        }
+      }
+    }
+  });
+
+  // Populate servers
+  servers.forEach((server, serverIndex) => {
+    window.addServer();
+    
+    // Set basic fields
+    document.querySelector(`[name="servers[${serverIndex}].name"]`).value = server.name;
+    document.querySelector(`[name="servers[${serverIndex}].mode"]`).value = server.mode;
+    document.querySelector(`[name="servers[${serverIndex}].description"]`).value = server.description;
+    
+    if (server.schemas) {
+      document.getElementById(`schema-path-${serverIndex}`).value = server.schemas;
+    }
+    
+    // Set installation configuration
+    if (server.installation) {
+      document.querySelector(`[name="servers[${serverIndex}].installation.command"]`).value = server.installation.command;
+      if (server.installation.args) {
+        document.querySelector(`[name="servers[${serverIndex}].installation.args"]`).value = server.installation.args;
+      }
+      
+      // Add environment variables
+      server.installation.env?.forEach((env, envIndex) => {
+        window.addEnvVariable(serverIndex);
+        document.querySelector(`[name="servers[${serverIndex}].installation.env[${envIndex}].name"]`).value = env.name;
+        if (env.default) document.querySelector(`[name="servers[${serverIndex}].installation.env[${envIndex}].default"]`).value = env.default;
+        if (env.required) document.querySelector(`[name="servers[${serverIndex}].installation.env[${envIndex}].required"]`).checked = true;
+        if (env.description) document.querySelector(`[name="servers[${serverIndex}].installation.env[${envIndex}].description"]`).value = env.description;
+      });
+    }
+    
+    // Add requirements from dependencies
+    server.dependencies?.requirements?.forEach((req, reqIndex) => {
+      window.addServerRequirement(serverIndex);
+      
+      // Set basic fields
+      document.querySelector(`[name="servers[${serverIndex}].requirements[${reqIndex}].name"]`).value = req.name;
+      document.querySelector(`[name="servers[${serverIndex}].requirements[${reqIndex}].version"]`).value = req.version;
+      
+      if (req.order) {
+        document.querySelector(`[name="servers[${serverIndex}].requirements[${reqIndex}].order"]`).value = req.order;
+      }
+    });
+  });
+}

package/dist/web/public/js/onboard/index.js

@@ -0,0 +1,131 @@
+import {
+  addRequirement,
+  removeRequirement,
+  addServer,
+  removeServer,
+  addEnvVariable,
+  removeEnvVariable,
+  addServerRequirement,
+  removeServerRequirement,
+  toggleAliasField,
+  toggleServerAliasField,
+  toggleRegistryConfig,
+  toggleServerRegistryConfig,
+  browseLocalSchema
+} from './uiHandlers.js';
+
+import {
+  submitForm,
+  formDataToJson,
+  populateForm
+} from './formProcessor.js';
+
+// Load existing category data if editing
+async function loadExistingCategory() {
+  const urlParams = new URLSearchParams(window.location.search);
+  const categoryName = urlParams.get('category');
+  
+  if (categoryName) {
+    try {
+      const response = await fetch(`/api/categories/${categoryName}`);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      
+      const result = await response.json();
+      if (result.success && result.data) {
+        const { feedConfiguration } = result.data;
+        populateForm({
+          name: feedConfiguration.name,
+          displayName: feedConfiguration.displayName,
+          description: feedConfiguration.description,
+          repository: feedConfiguration.repository,
+          requirements: feedConfiguration.requirements || [],
+          servers: feedConfiguration.mcpServers || []
+        });
+      }
+    } catch (error) {
+      console.error('Error loading category:', error);
+      alert('Error loading category data. Please try again.');
+    }
+  }
+}
+
+// Initialize event listeners
+document.addEventListener('DOMContentLoaded', async () => {
+  // Load existing category data if in edit mode
+  await loadExistingCategory();
+
+  // Add form submit handlers
+  const categoryForm = document.getElementById('onboardForm');
+  if (categoryForm) {
+    categoryForm.addEventListener('submit', submitForm);
+  }
+
+  const serverForm = document.getElementById('onboardServerForm');
+  if (serverForm) {
+    serverForm.addEventListener('submit', submitForm);
+  }
+
+  // Setup tab switching functionality
+  const tabCreateCategory = document.getElementById('tab-create-category');
+  const tabCreateServer = document.getElementById('tab-create-server');
+  const panelCreateCategory = document.getElementById('panel-create-category');
+  const panelCreateServer = document.getElementById('panel-create-server');
+
+  if (tabCreateCategory && tabCreateServer) {
+    tabCreateCategory.addEventListener('click', () => {
+      // Update tab styles
+      tabCreateCategory.classList.add('text-blue-600', 'border-blue-600');
+      tabCreateCategory.classList.remove('text-gray-600', 'border-transparent');
+      tabCreateServer.classList.remove('text-blue-600', 'border-blue-600');
+      tabCreateServer.classList.add('text-gray-600', 'border-transparent');
+      
+      // Show/hide panels
+      panelCreateCategory.classList.remove('hidden');
+      panelCreateServer.classList.add('hidden');
+    });
+
+    tabCreateServer.addEventListener('click', () => {
+      // Update tab styles
+      tabCreateServer.classList.add('text-blue-600', 'border-blue-600');
+      tabCreateServer.classList.remove('text-gray-600', 'border-transparent');
+      tabCreateCategory.classList.remove('text-blue-600', 'border-blue-600');
+      tabCreateCategory.classList.add('text-gray-600', 'border-transparent');
+      
+      // Show/hide panels
+      panelCreateServer.classList.remove('hidden');
+      panelCreateCategory.classList.add('hidden');
+    });
+  }
+
+  // Initialize button handlers
+  const addRequirementBtn = document.getElementById('addRequirementBtn');
+  if (addRequirementBtn) {
+    addRequirementBtn.addEventListener('click', addRequirement);
+  }
+
+  const addServerBtn = document.getElementById('addServerBtn');
+  if (addServerBtn) {
+    addServerBtn.addEventListener('click', addServer);
+  }
+
+  // Expose necessary functions to window for HTML event handlers
+  Object.assign(window, {
+    addRequirement,
+    removeRequirement,
+    addServer,
+    removeServer,
+    addEnvVariable,
+    removeEnvVariable,
+    addServerRequirement,
+    removeServerRequirement,
+    toggleAliasField,
+    toggleServerAliasField,
+    toggleRegistryConfig,
+    toggleServerRegistryConfig,
+    browseLocalSchema,
+    formDataToJson,
+    populateForm
+  });
+});

package/dist/web/public/js/onboard/state.js

@@ -0,0 +1,32 @@
+// Global state management
+export const state = {
+  requirementCounter: 0,
+  serverCounter: 0,
+  envCounters: new Map(),
+  serverRequirementCounters: new Map()
+};
+
+export const incrementRequirementCounter = () => state.requirementCounter++;
+export const incrementServerCounter = () => state.serverCounter++;
+
+export const setEnvCounter = (serverIndex, value) => {
+  state.envCounters.set(serverIndex, value);
+};
+
+export const getEnvCounter = (serverIndex) => state.envCounters.get(serverIndex) || 0;
+
+export const deleteEnvCounter = (serverIndex) => {
+  state.envCounters.delete(serverIndex);
+};
+
+export const setServerRequirementCounter = (serverIndex, value) => {
+  state.serverRequirementCounters.set(serverIndex, value);
+};
+
+export const getServerRequirementCounter = (serverIndex) => {
+  return state.serverRequirementCounters.get(serverIndex) || 0;
+};
+
+export const deleteServerRequirementCounter = (serverIndex) => {
+  state.serverRequirementCounters.delete(serverIndex);
+};