feat: Refactor MCP server catalog forms and add Claude Desktop configuration step

- Updated the edit view to use the new McpServerEditFormWizard component.
- Modified the index view to streamline success message handling and cleanup of query parameters.
- Enhanced CreateMcpServerRequest interface to make language and runtime optional, and added claude_desktop_config for automatic extraction.
- Introduced ClaudeDesktopConfigStep component for managing Claude Desktop configurations with validation and example configurations.
- Created McpServerAddFormWizard component for adding new MCP servers with multi-step form navigation.
- Developed McpServerEditFormWizard component for editing existing MCP servers, including auto-population from GitHub data.
- Implemented helper functions for runtime detection and installation method parsing based on GitHub data.

Author: Lasim

services/backend/src/db/index.ts

@@ -560,7 +560,7 @@ export async function initializePluginDatabases(db: AnyDatabase, plugins: Plugin
       }
       try {
         // Create a child logger for this plugin
-        const pluginLogger = logger.child({ pluginId: plugin.meta.id });
+        logger.child({ pluginId: plugin.meta.id });
         // Get the current schema - use dbSchema directly if available, otherwise generate one
         let schema: AnySchema;
         try {

services/backend/src/plugins/example-plugin/index.ts

@@ -7,11 +7,11 @@ import {
   type PluginRouteManager
 } from '../../plugin-system/types';
 
-import { type AnyDatabase, type AnySchema, getSchema } from '../../db'; // Import getSchema and AnySchema
-import { type BetterSQLite3Database } from 'drizzle-orm/better-sqlite3'; // For type guard
-import { type NodePgDatabase } from 'drizzle-orm/node-postgres'; // For casting db
-import { type SQLiteTable } from 'drizzle-orm/sqlite-core';     // For casting table from schema
-import { type PgTable } from 'drizzle-orm/pg-core';         // For casting table from schema
+import { type AnyDatabase, type AnySchema } from '../../db';
+import { type BetterSQLite3Database } from 'drizzle-orm/better-sqlite3';
+import { type NodePgDatabase } from 'drizzle-orm/node-postgres';
+import { type SQLiteTable } from 'drizzle-orm/sqlite-core'; 
+import { type PgTable } from 'drizzle-orm/pg-core'; 
 // import { exampleEntities } from './schema'; // No longer directly used for queries
 import { sql } from 'drizzle-orm';
 

services/backend/src/routes/mcp/servers/list.ts

@@ -3,8 +3,8 @@ import { z } from 'zod';
 import { zodToJsonSchema } from 'zod-to-json-schema';
 import { McpCatalogService } from '../../../services/mcpCatalogService';
 import { TeamService } from '../../../services/teamService';
+import { getUserRole, requirePermission } from '../../../middleware/roleMiddleware';
 import { getDb } from '../../../db';
-import { getUserRole } from '../../../middleware/roleMiddleware';
 
 // Query parameters schema
 const querySchema = z.object({
@@ -70,6 +70,7 @@ const errorResponseSchema = z.object({
 
 export default async function listServers(server: FastifyInstance) {
   server.get('/mcp/servers', {
+    preValidation: requirePermission('mcp.servers.read'),
     schema: {
       tags: ['MCP Servers'],
       summary: 'List MCP servers',
@@ -94,119 +95,97 @@ export default async function listServers(server: FastifyInstance) {
         })
       }
     },
-    preValidation: async (request, reply) => {
-      // Require authentication for all MCP server access
-      if (!request.user) {
-        return reply.status(401).send({
-          success: false,
-          error: 'Authentication required'
-        });
-      }
-    }
+    validatorCompiler: () => () => true, // Disable validation but keep schema for docs
+    serializerCompiler: () => (data) => JSON.stringify(data) // Disable response validation
   }, async (request, reply) => {
     try {
       const db = getDb();
-      const catalogService = new McpCatalogService(db, server.log);
-      
-      // Parse query parameters
-      const filters = querySchema.parse(request.query);
+      const catalogService = new McpCatalogService(db, request.log);
 
-      // Get user info from authenticated request
-      const userId = request.user!.id;
-      const userRoleData = await getUserRole(userId);
-      const userRole = userRoleData?.id || 'global_user';
+      // Get user role and team memberships (same as search endpoint)
+      const roleInfo = await getUserRole(request.user!.id);
+      const userRole = roleInfo?.id || 'global_user';
 
       // Get user's team memberships
       let teamIds: string[] = [];
       try {
-        const userTeams = await TeamService.getUserTeams(userId);
+        const userTeams = await TeamService.getUserTeams(request.user!.id);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         teamIds = userTeams.map((team: any) => team.id);
       } catch (teamError) {
-        server.log.warn({
+        request.log.warn({
           operation: 'list_mcp_servers',
-          userId,
+          userId: request.user!.id,
           teamError
         }, 'Failed to get user teams, continuing with empty team list');
         teamIds = [];
       }
-      
-      // Extract pagination parameters from filters
-      const { limit, offset, ...serverFilters } = filters;
-      
-      const allServers = await catalogService.getServersForUser(userId, userRole, teamIds, serverFilters);
 
+      // Get servers using the service (which handles permission filtering)
+      const allServers = await catalogService.getServersForUser(
+        request.user!.id,
+        userRole,
+        teamIds,
+        {} // No filters for now
+      );
+
+      // Parse query parameters for pagination
+      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+      const query = request.query as any;
+      const limit = parseInt(query.limit) || 20;
+      const offset = parseInt(query.offset) || 0;
+      
       // Apply pagination
       const total = allServers.length;
       const paginatedServers = allServers.slice(offset, offset + limit);
 
-      server.log.info({
+      request.log.info({
         operation: 'list_mcp_servers',
-        userId,
+        userId: request.user!.id,
         totalResults: total,
         returnedResults: paginatedServers.length,
         userRole,
-        teamCount: teamIds.length,
-        pagination: { limit, offset }
+        teamCount: teamIds.length
       }, 'MCP server list completed');
 
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const safeJsonParse = (value: any, fallback: any = null) => {
-        if (!value || value === 'null' || value === 'undefined') {
-          return fallback;
-        }
-        
-        if (typeof value === 'object') {
-          return value;
-        }
-        
-        if (typeof value === 'string') {
-          // Handle the case where objects were stringified incorrectly as "[object Object],[object Object]"
-          if (value.includes('[object Object]')) {
-            server.log.warn({ value }, 'Detected malformed object string, returning fallback');
-            return fallback;
-          }
-
-          // First try JSON parsing
+      // Format dates for response (same as search endpoint)
+      const responseServers = paginatedServers.map(server => {
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        const formatDate = (date: any) => {
+          if (!date) return null;
           try {
-            return JSON.parse(value);
-          } catch (error) {
-            // If JSON parsing fails, check if it's a comma-separated string (for tags)
-            if (value.includes(',') && !value.startsWith('[') && !value.startsWith('{')) {
-              // Split by comma and trim whitespace, filter out empty and malformed entries
-              const items = value.split(',')
-                .map((item: string) => item.trim())
-                .filter((item: string) => item.length > 0 && !item.includes('[object Object]'));
-              
-              return items.length > 0 ? items : fallback;
+            // Handle both Date objects and timestamp numbers
+            if (typeof date === 'number') {
+              return new Date(date).toISOString();
+            }
+            if (date instanceof Date) {
+              return date.toISOString();
             }
-            server.log.warn({ value, error }, 'Failed to parse JSON field');
-            return fallback;
+            return new Date(date).toISOString();
+          } catch (error) {
+            request.log.warn({
+              operation: 'list_mcp_servers',
+              serverId: server.id,
+              field: 'date_format_error',
+              dateValue: date,
+              error
+            }, 'Failed to format date field, using null');
+            return null;
           }
-        }
-        
-        return fallback;
-      };
+        };
+
+        return {
+          ...server,
+          created_at: formatDate(server.created_at),
+          updated_at: formatDate(server.updated_at),
+          last_sync_at: formatDate(server.last_sync_at)
+        };
+      });
 
+      // Return the format your frontend expects
       return reply.send({
-        success: true,
         data: {
-          servers: paginatedServers.map(server => ({
-            ...server,
-            // Parse JSON fields for proper typing with error handling
-            tags: safeJsonParse(server.tags, null),
-            installation_methods: safeJsonParse(server.installation_methods, []),
-            tools: safeJsonParse(server.tools, []),
-            resources: safeJsonParse(server.resources, null),
-            prompts: safeJsonParse(server.prompts, null),
-            environment_variables: safeJsonParse(server.environment_variables, null),
-            default_config: safeJsonParse(server.default_config, null),
-            dependencies: safeJsonParse(server.dependencies, null),
-            // Convert dates to ISO strings
-            created_at: server.created_at.toISOString(),
-            updated_at: server.updated_at.toISOString(),
-            last_sync_at: server.last_sync_at?.toISOString() || null
-          })),
+          servers: responseServers,
           pagination: {
             total,
             limit,
@@ -215,16 +194,18 @@ export default async function listServers(server: FastifyInstance) {
           }
         }
       });
-    } catch (error) {
-      server.log.error({
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    } catch (error: any) {
+      request.log.error({
         operation: 'list_servers',
         userId: request.user?.id,
-        error
+        error: error.message || error,
+        stack: error.stack
       }, 'Failed to list MCP servers');
 
       return reply.status(500).send({
         success: false,
-        error: 'Failed to retrieve servers'
+        error: error.message || 'Failed to retrieve servers'
       });
     }
   });

services/backend/src/routes/mcp/servers/search.ts

@@ -3,7 +3,7 @@ import { z } from 'zod';
 import { zodToJsonSchema } from 'zod-to-json-schema';
 import { McpCatalogService } from '../../../services/mcpCatalogService';
 import { TeamService } from '../../../services/teamService';
-import { getUserRole } from '../../../middleware/roleMiddleware';
+import { getUserRole, requirePermission } from '../../../middleware/roleMiddleware';
 import { getDb } from '../../../db';
 
 // Query parameters schema
@@ -110,15 +110,7 @@ export default async function searchServers(server: FastifyInstance) {
         })
       }
     },
-    preValidation: async (request, reply) => {
-      // Require authentication for all MCP server access
-      if (!request.user) {
-        return reply.status(401).send({
-          success: false,
-          error: 'Authentication required'
-        });
-      }
-    }
+    preValidation: requirePermission('mcp.servers.read')
   }, async (request, reply) => {
     const queryParams = request.query as z.infer<typeof searchServersQuerySchema>;
 
@@ -194,21 +186,39 @@ export default async function searchServers(server: FastifyInstance) {
         teamCount: teamIds.length
       }, 'MCP server search completed');
 
-      // Parse JSON fields for response with proper null checks
-      const responseServers = paginatedServers.map(server => ({
-        ...server,
-        installation_methods: server.installation_methods ? JSON.parse(server.installation_methods) : [],
-        tools: server.tools ? JSON.parse(server.tools) : [],
-        resources: server.resources ? JSON.parse(server.resources) : null,
-        prompts: server.prompts ? JSON.parse(server.prompts) : null,
-        default_config: server.default_config ? JSON.parse(server.default_config) : null,
-        environment_variables: server.environment_variables ? JSON.parse(server.environment_variables) : null,
-        dependencies: server.dependencies ? JSON.parse(server.dependencies) : null,
-        tags: server.tags ? JSON.parse(server.tags) : null,
-        created_at: server.created_at.toISOString(),
-        updated_at: server.updated_at.toISOString(),
-        last_sync_at: server.last_sync_at?.toISOString() || null
-      }));
+      // Format dates for response (JSON fields are already parsed by the service)
+      const responseServers = paginatedServers.map(server => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const formatDate = (date: any) => {
+          if (!date) return null;
+          try {
+            // Handle both Date objects and timestamp numbers
+            if (typeof date === 'number') {
+              return new Date(date).toISOString();
+            }
+            if (date instanceof Date) {
+              return date.toISOString();
+            }
+            return new Date(date).toISOString();
+          } catch (error) {
+            request.log.warn({
+              operation: 'search_mcp_servers',
+              serverId: server.id,
+              field: 'date_format_error',
+              dateValue: date,
+              error
+            }, 'Failed to format date field, using null');
+            return null;
+          }
+        };
+
+        return {
+          ...server,
+          created_at: formatDate(server.created_at),
+          updated_at: formatDate(server.updated_at),
+          last_sync_at: formatDate(server.last_sync_at)
+        };
+      });
 
       return reply.status(200).send({
         success: true,