mcp-config-manager 1.0.13 → 2.1.1

package/public/js/logoService.js

@@ -0,0 +1,392 @@
+/**
+ * Logo Service - Automatic icon detection for MCP servers
+ * Tries multiple strategies to find an appropriate logo
+ */
+
+import { getIconPreference } from './iconPreferences.js';
+
+let staticLogos = null;
+const logoCache = new Map();
+
+// Logo.dev API configuration (free tier)
+const LOGO_DEV_API_KEY = 'pk_Rd3I7mQnQ3a-3VJxZemUPA';
+const LOGO_DEV_BASE_URL = 'https://img.logo.dev';
+
+// Load static logos from mcp-logos.json
+export async function loadStaticLogos() {
+    if (staticLogos) return staticLogos;
+    try {
+        const response = await fetch('/mcp-logos.json');
+        staticLogos = await response.json();
+        return staticLogos;
+    } catch (error) {
+        console.error('Failed to load static logos:', error);
+        staticLogos = {};
+        return staticLogos;
+    }
+}
+
+/**
+ * Get logo URL for a server
+ * @param {string} serverName - The server name/id
+ * @param {object} serverConfig - Optional server config with command/args
+ * @param {boolean} skipCustomPrefs - Skip custom preferences check (used internally)
+ * @returns {Promise<string|null>} Logo URL or null
+ */
+export async function getServerLogo(serverName, serverConfig = null, skipCustomPrefs = false) {
+    // Check cache first
+    const cacheKey = serverName.toLowerCase();
+    if (logoCache.has(cacheKey)) {
+        return logoCache.get(cacheKey);
+    }
+
+    // Strategy 0: Check custom icon preferences first (unless skipped)
+    if (!skipCustomPrefs) {
+        const customPref = getIconPreference(serverName);
+        if (customPref) {
+            let logoUrl = null;
+            switch (customPref.type) {
+                case 'none':
+                    // User wants no icon, return null
+                    logoCache.set(cacheKey, null);
+                    return null;
+                case 'url':
+                    // User provided a custom URL
+                    logoUrl = customPref.value;
+                    logoCache.set(cacheKey, logoUrl);
+                    return logoUrl;
+                case 'logodev':
+                    // User selected a specific domain from logo.dev
+                    logoUrl = getLogoDevUrl(customPref.value);
+                    logoCache.set(cacheKey, logoUrl);
+                    return logoUrl;
+                // 'auto' falls through to normal detection
+            }
+        }
+    }
+
+    // Ensure static logos are loaded
+    await loadStaticLogos();
+
+    // Try various strategies
+    let logoUrl = null;
+
+    // Strategy 1: Direct match in static logos
+    logoUrl = findInStaticLogos(serverName);
+    if (logoUrl) {
+        logoCache.set(cacheKey, logoUrl);
+        return logoUrl;
+    }
+
+    // Strategy 2: Extract service name from server config
+    const serviceName = extractServiceName(serverName, serverConfig);
+    if (serviceName && serviceName !== serverName.toLowerCase()) {
+        logoUrl = findInStaticLogos(serviceName);
+        if (logoUrl) {
+            logoCache.set(cacheKey, logoUrl);
+            return logoUrl;
+        }
+    }
+
+    // Strategy 3: Try logo.dev API for known domains (higher quality logos)
+    const domain = guessDomain(serviceName || serverName);
+    if (domain) {
+        logoUrl = getLogoDevUrl(domain);
+        logoCache.set(cacheKey, logoUrl);
+        return logoUrl;
+    }
+
+    // No logo found
+    logoCache.set(cacheKey, null);
+    return null;
+}
+
+/**
+ * Find logo in static logos with fuzzy matching
+ */
+function findInStaticLogos(name) {
+    if (!staticLogos) return null;
+
+    const normalized = name.toLowerCase().replace(/[^a-z0-9]/g, '');
+
+    // Exact match
+    if (staticLogos[normalized]) return staticLogos[normalized];
+    if (staticLogos[name.toLowerCase()]) return staticLogos[name.toLowerCase()];
+
+    // Partial match - check if any key is contained in name or vice versa
+    for (const [key, url] of Object.entries(staticLogos)) {
+        if (normalized.includes(key) || key.includes(normalized)) {
+            return url;
+        }
+    }
+
+    return null;
+}
+
+/**
+ * Extract service name from server name or config
+ */
+function extractServiceName(serverName, serverConfig) {
+    const name = serverName.toLowerCase();
+
+    // Remove common suffixes/prefixes
+    let cleaned = name
+        .replace(/[-_]?(mcp|server|client|local|remote|dev|prod)[-_]?/g, '')
+        .replace(/^@[^/]+\//, '') // Remove npm scope
+        .replace(/[-_]+/g, '-')
+        .replace(/^-|-$/g, '')
+        .trim();
+
+    if (cleaned) return cleaned;
+
+    // Try to extract from npm package in config
+    if (serverConfig) {
+        const args = serverConfig.args || [];
+        const command = serverConfig.command || '';
+
+        // Check for npx package names
+        for (const arg of args) {
+            // Match patterns like @modelcontextprotocol/server-github
+            const match = arg.match(/@[^/]+\/(?:server-|mcp-)?([a-z0-9-]+)/i) ||
+                          arg.match(/(?:server-|mcp-)([a-z0-9-]+)/i);
+            if (match) {
+                return match[1].toLowerCase();
+            }
+        }
+
+        // Check command itself
+        const cmdMatch = command.match(/(?:server-|mcp-)([a-z0-9-]+)/i);
+        if (cmdMatch) {
+            return cmdMatch[1].toLowerCase();
+        }
+    }
+
+    return cleaned || name;
+}
+
+/**
+ * Build logo.dev URL for a domain
+ * @param {string} domain - The domain to get logo for
+ * @param {object} options - Optional parameters (size, format, grayscale)
+ * @returns {string} Logo.dev URL
+ */
+function getLogoDevUrl(domain, options = {}) {
+    const params = new URLSearchParams({
+        token: LOGO_DEV_API_KEY,
+        size: options.size || 64,
+        format: options.format || 'png'
+    });
+
+    if (options.grayscale) {
+        params.append('greyscale', 'true');
+    }
+
+    return `${LOGO_DEV_BASE_URL}/${domain}?${params.toString()}`;
+}
+
+/**
+ * Guess domain from service name
+ */
+function guessDomain(serviceName) {
+    const name = serviceName.toLowerCase().replace(/[^a-z0-9]/g, '');
+
+    // Names that should NOT auto-detect (too ambiguous or wrong matches)
+    const skipAutoDetect = new Set([
+        'chrome', 'chromedevtools', 'devtools',  // Would incorrectly show Google
+        'server', 'mcp', 'local', 'test', 'dev', 'prod',  // Too generic
+    ]);
+
+    if (skipAutoDetect.has(name)) {
+        return null;
+    }
+
+    // Known mappings
+    const domainMap = {
+        'github': 'github.com',
+        'gitlab': 'gitlab.com',
+        'bitbucket': 'bitbucket.org',
+        'notion': 'notion.so',
+        'slack': 'slack.com',
+        'discord': 'discord.com',
+        'linear': 'linear.app',
+        'asana': 'asana.com',
+        'jira': 'atlassian.com',
+        'confluence': 'atlassian.com',
+        'trello': 'trello.com',
+        'airtable': 'airtable.com',
+        'coda': 'coda.io',
+        'figma': 'figma.com',
+        'miro': 'miro.com',
+        'stripe': 'stripe.com',
+        'paypal': 'paypal.com',
+        'square': 'squareup.com',
+        'shopify': 'shopify.com',
+        'vercel': 'vercel.com',
+        'netlify': 'netlify.com',
+        'cloudflare': 'cloudflare.com',
+        'aws': 'aws.amazon.com',
+        'gcp': 'cloud.google.com',
+        'azure': 'azure.microsoft.com',
+        'supabase': 'supabase.com',
+        'firebase': 'firebase.google.com',
+        'mongodb': 'mongodb.com',
+        'postgres': 'postgresql.org',
+        'postgresql': 'postgresql.org',
+        'mysql': 'mysql.com',
+        'redis': 'redis.io',
+        'elasticsearch': 'elastic.co',
+        'docker': 'docker.com',
+        'kubernetes': 'kubernetes.io',
+        'sentry': 'sentry.io',
+        'datadog': 'datadoghq.com',
+        'grafana': 'grafana.com',
+        'prometheus': 'prometheus.io',
+        'openai': 'openai.com',
+        'anthropic': 'anthropic.com',
+        'huggingface': 'huggingface.co',
+        'google': 'google.com',
+        'brave': 'brave.com',
+        'twitter': 'twitter.com',
+        'x': 'x.com',
+        'linkedin': 'linkedin.com',
+        'facebook': 'facebook.com',
+        'instagram': 'instagram.com',
+        'youtube': 'youtube.com',
+        'spotify': 'spotify.com',
+        'twilio': 'twilio.com',
+        'sendgrid': 'sendgrid.com',
+        'mailchimp': 'mailchimp.com',
+        'hubspot': 'hubspot.com',
+        'salesforce': 'salesforce.com',
+        'zendesk': 'zendesk.com',
+        'intercom': 'intercom.com',
+        'zapier': 'zapier.com',
+        'ifttt': 'ifttt.com',
+        'dropbox': 'dropbox.com',
+        'box': 'box.com',
+        'gdrive': 'drive.google.com',
+        'onedrive': 'onedrive.live.com',
+        'evernote': 'evernote.com',
+        'todoist': 'todoist.com',
+        'monday': 'monday.com',
+        'clickup': 'clickup.com',
+        'basecamp': 'basecamp.com',
+        'npm': 'npmjs.com',
+        'yarn': 'yarnpkg.com',
+        'pnpm': 'pnpm.io',
+        'pip': 'pypi.org',
+        'python': 'python.org',
+        'node': 'nodejs.org',
+        'deno': 'deno.land',
+        'rust': 'rust-lang.org',
+        'go': 'go.dev',
+        'java': 'java.com',
+        'kotlin': 'kotlinlang.org',
+        'swift': 'swift.org',
+        'typescript': 'typescriptlang.org',
+        'webpack': 'webpack.js.org',
+        'vite': 'vitejs.dev',
+        'esbuild': 'esbuild.github.io',
+        'rollup': 'rollupjs.org',
+        'babel': 'babeljs.io',
+        'eslint': 'eslint.org',
+        'prettier': 'prettier.io',
+        'jest': 'jestjs.io',
+        'mocha': 'mochajs.org',
+        'cypress': 'cypress.io',
+        'playwright': 'playwright.dev',
+        'puppeteer': 'pptr.dev',
+        'selenium': 'selenium.dev',
+        'react': 'react.dev',
+        'vue': 'vuejs.org',
+        'angular': 'angular.io',
+        'svelte': 'svelte.dev',
+        'nextjs': 'nextjs.org',
+        'nuxt': 'nuxt.com',
+        'gatsby': 'gatsbyjs.com',
+        'remix': 'remix.run',
+        'astro': 'astro.build',
+        'tailwind': 'tailwindcss.com',
+        'bootstrap': 'getbootstrap.com',
+        'material': 'material.io',
+        'chakra': 'chakra-ui.com',
+        'neon': 'neon.tech',
+        'prisma': 'prisma.io',
+        'drizzle': 'orm.drizzle.team',
+        'sequelize': 'sequelize.org',
+        'typeorm': 'typeorm.io',
+    };
+
+    if (domainMap[name]) {
+        return domainMap[name];
+    }
+
+    // Try common TLDs
+    if (name.length >= 3) {
+        return `${name}.com`;
+    }
+
+    return null;
+}
+
+/**
+ * Get initials for fallback display
+ */
+export function getInitials(name) {
+    return name
+        .split(/[\s-_]+/)
+        .slice(0, 2)
+        .map(word => word.charAt(0).toUpperCase())
+        .join('');
+}
+
+/**
+ * Create logo HTML element with fallback
+ */
+export function createLogoElement(logoUrl, name, size = 40) {
+    const initials = getInitials(name);
+
+    if (logoUrl) {
+        return `
+            <img src="${logoUrl}" alt="${name}" class="server-logo" style="width:${size}px;height:${size}px"
+                 onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">
+            <div class="server-logo-fallback" style="display:none;width:${size}px;height:${size}px">${initials}</div>
+        `;
+    }
+
+    return `<div class="server-logo-fallback" style="width:${size}px;height:${size}px">${initials}</div>`;
+}
+
+/**
+ * Preload logos for a list of servers
+ */
+export async function preloadLogos(servers) {
+    await loadStaticLogos();
+    const promises = servers.map(server =>
+        getServerLogo(server.name || server.id, server.config || server)
+    );
+    await Promise.all(promises);
+}
+
+/**
+ * Get logo URL for a domain using logo.dev
+ * Useful for custom icon lookup
+ * @param {string} domain - Domain like 'github.com'
+ * @param {object} options - Optional: size, format, grayscale
+ * @returns {string} Logo URL
+ */
+export function getLogoByDomain(domain, options = {}) {
+    return getLogoDevUrl(domain, options);
+}
+
+/**
+ * Clear logo cache (useful when preferences change)
+ * @param {string} serverName - Optional: clear specific server, or all if not provided
+ */
+export function clearLogoCache(serverName = null) {
+    if (serverName) {
+        logoCache.delete(serverName.toLowerCase());
+    } else {
+        logoCache.clear();
+    }
+}

package/public/js/main.js

@@ -2,7 +2,8 @@ import { detectClientsApi, listClientsApi } from './api.js';
 import { initClientView, renderClientList, selectClient, loadClientServers } from './clientView.js';
 import { initKanbanView, renderKanbanGrid } from './kanbanView.js';
 import { initServerView, renderAllServers } from './serverView.js';
-import { showServerModal, showImportModal, exportConfig, initModals, showRemoteServerModal } from './modals.js';
+import { showServerModal, showImportModal, exportConfig, initModals, showRemoteServerModal, showSelectClientModal } from './modals.js';
+import { showPopularMcpsModal, closePopularMcpsModal } from './popularMcps.js';
 
 document.addEventListener('DOMContentLoaded', () => {
     let currentClient = null;
@@ -101,6 +102,23 @@ document.addEventListener('DOMContentLoaded', () => {
     });
     document.getElementById('exportConfigBtn').addEventListener('click', exportConfig);
     document.getElementById('importConfigBtn').addEventListener('click', () => showImportModal(loadClientServers, renderKanbanGrid, window.loadClients));
+    document.getElementById('browsePopularMcpsBtn').addEventListener('click', () => {
+        showPopularMcpsModal(clients, window.loadClients);
+    });
+
+    // Kanban view add server button
+    document.getElementById('kanbanAddServerBtn').addEventListener('click', () => {
+        showSelectClientModal((selectedClientId) => {
+            showServerModal(null, null, loadClientServers, renderKanbanGrid, selectedClientId, window.loadClients);
+        }, window.loadClients);
+    });
+
+    // Server view add server button
+    document.getElementById('serverViewAddServerBtn').addEventListener('click', () => {
+        showSelectClientModal((selectedClientId) => {
+            showServerModal(null, null, renderAllServers, null, selectedClientId, window.loadClients);
+        }, window.loadClients);
+    });
 
     // Close modals when clicking outside
     document.querySelectorAll('.modal').forEach(modal => {
@@ -131,6 +149,8 @@ document.addEventListener('DOMContentLoaded', () => {
         document.getElementById('addServerToClientsModal').style.display = 'none';
     });
 
+    document.getElementById('closePopularMcps').addEventListener('click', closePopularMcpsModal);
+
     // Load clients on page load
     loadClients();
 });