Merge pull request #50 from BrainDriveAI/bugfix/duplicate-module

PR: Harden Legacy Module Resolution for Complex IDs & Improve Dev Diagnostics

Author: DJJones66

frontend/src/features/unified-dynamic-page-renderer/adapters/LegacyModuleAdapter.tsx

@@ -304,25 +304,44 @@ export const LegacyModuleAdapter: React.FC<LegacyModuleAdapterProps> = React.mem
 
           if (!targetModule) {
             // Enhanced module ID extraction for complex generated IDs
-            // Format: PluginName_actualModuleId_timestamp
+            // Format: ServiceExample_Theme_userId_ServiceExample_Theme_actualModuleId_timestamp
             const parts = moduleId.split('_');
-            if (parts.length >= 2) {
-              const extractedModuleId = parts[1]; // Get the actual module ID
+            if (parts.length >= 6) {
+              const extractedModuleId = parts[5]; // Get the actual module ID (ThemeDisplay/ThemeController)
               targetModule = remotePlugin.loadedModules.find(m => m.id === extractedModuleId);
 
               if (process.env.NODE_ENV === 'development') {
                 console.log(`[LegacyModuleAdapter] Trying extracted module ID: "${extractedModuleId}" from complex ID: "${moduleId}"`);
+                console.log(`[LegacyModuleAdapter] Module ID parts:`, parts);
                 if (targetModule) {
-                  console.log(`[LegacyModuleAdapter] Successfully found module with extracted ID:`, {
+                  console.log(`[LegacyModuleAdapter] ✅ Successfully found module with extracted ID:`, {
                     id: targetModule.id,
                     name: targetModule.name,
+                    displayName: targetModule.displayName,
                     hasComponent: !!targetModule.component
                   });
                 }
               }
             }
           }
 
+          if (!targetModule) {
+            // Enhanced fallback for complex IDs: try combined plugin_module format
+            const parts = moduleId.split('_');
+            if (parts.length >= 4) {
+              const combinedModuleId = `${parts[1]}_${parts[2]}`; // ServiceExample_Theme_ThemeDisplay
+              targetModule = remotePlugin.loadedModules.find(m =>
+                m.id === combinedModuleId ||
+                (m.id && m.id.endsWith(parts[2])) ||
+                m.name === parts[2]
+              );
+              
+              if (process.env.NODE_ENV === 'development') {
+                console.log(`[LegacyModuleAdapter] Trying combined module ID: "${combinedModuleId}" and module name: "${parts[2]}"`);
+              }
+            }
+          }
+          
           if (!targetModule) {
             // Try simple pattern removal (original logic)
             const baseModuleId = moduleId.replace(/-\d+$/, '');
@@ -334,17 +353,19 @@ export const LegacyModuleAdapter: React.FC<LegacyModuleAdapterProps> = React.mem
           }
 
           if (!targetModule) {
-            // For complex generated IDs like "BrainDriveChat_1830586da8834501bea1ef1d39c3cbe8_BrainDriveChat_BrainDriveChat_1754404718788"
-            // Try to extract the plugin name (first part before underscore)
-            const pluginNameFromId = moduleId.split('_')[0];
-            targetModule = remotePlugin.loadedModules.find(m =>
-              m.id === pluginNameFromId ||
-              m.name === pluginNameFromId ||
-              (m.id && m.id.includes(pluginNameFromId))
-            );
-            
-            if (process.env.NODE_ENV === 'development') {
-              console.log(`[LegacyModuleAdapter] Trying plugin name extraction: "${pluginNameFromId}" from moduleId: "${moduleId}"`);
+            // Final module name fallback: try exact match with the extracted module name
+            const parts = moduleId.split('_');
+            if (parts.length >= 3) {
+              const moduleNameOnly = parts[2];
+              targetModule = remotePlugin.loadedModules.find(m =>
+                m.name === moduleNameOnly ||
+                m.displayName === moduleNameOnly ||
+                (m.id && m.id.toLowerCase().includes(moduleNameOnly.toLowerCase()))
+              );
+              
+              if (process.env.NODE_ENV === 'development') {
+                console.log(`[LegacyModuleAdapter] Trying module name fallback: "${moduleNameOnly}"`);
+              }
             }
           }
 
@@ -383,12 +404,36 @@ export const LegacyModuleAdapter: React.FC<LegacyModuleAdapterProps> = React.mem
       }
 
       if (process.env.NODE_ENV === 'development') {
-        console.log(`[LegacyModuleAdapter] Target module found:`, targetModule);
+        if (targetModule) {
+          const parts = moduleId ? moduleId.split('_') : [];
+          console.log(`[LegacyModuleAdapter] ✅ Module resolution successful:`, {
+            originalModuleId: moduleId,
+            extractedParts: parts,
+            extractedModuleId: parts.length >= 6 ? parts[5] : 'N/A',
+            resolvedModule: {
+              id: targetModule.id,
+              name: targetModule.name,
+              displayName: targetModule.displayName,
+              componentType: typeof targetModule.component,
+              hasComponent: !!targetModule.component
+            }
+          });
+        } else {
+          console.warn(`[LegacyModuleAdapter] ❌ Module resolution failed:`, {
+            originalModuleId: moduleId,
+            pluginId: pluginId,
+            moduleName: moduleName,
+            extractedParts: moduleId ? moduleId.split('_') : [],
+            availableModules: remotePlugin?.loadedModules?.map(m => ({
+              id: m.id,
+              name: m.name,
+              displayName: m.displayName
+            })) || []
+          });
+        }
       }
+      
       if (!targetModule) {
-        if (process.env.NODE_ENV === 'development') {
-          console.log(`[LegacyModuleAdapter] No target module found for ${pluginId}/${moduleId || moduleName}`);
-        }
         return null;
       }
 

frontend/src/features/unified-dynamic-page-renderer/components/LayoutEngine.tsx

@@ -580,7 +580,7 @@ export const LayoutEngine: React.FC<LayoutEngineProps> = React.memo(({
         // Pattern: BrainDriveBasicAIChat_59898811a4b34d9097615ed6698d25f6_1754507768265
         // We want: 59898811a4b34d9097615ed6698d25f6
         const parts = item.moduleId.split('_');
-        const extractedModuleId = parts.length >= 2 ? parts[1] : item.moduleId;
+        const extractedModuleId = parts.length >= 6 ? parts[5] : item.moduleId;
 
         // Create stable breakpoint object
         const breakpointConfig = {
@@ -651,12 +651,13 @@ export const LayoutEngine: React.FC<LayoutEngineProps> = React.memo(({
             pluginId={item.pluginId}
             moduleId={module._legacy?.moduleId || (() => {
               // Extract simple module ID from complex ID
-              // Pattern: BrainDriveBasicAIChat_59898811a4b34d9097615ed6698d25f6_1754507768265
-              // We want: 59898811a4b34d9097615ed6698d25f6
+              // Pattern: ServiceExample_Theme_userId_ServiceExample_Theme_actualModuleId_timestamp
+              // Example: ServiceExample_Theme_c34bfc30de004813ad5b5d3a4ab9df34_ServiceExample_Theme_ThemeDisplay_1756311722722
+              // We want: ThemeDisplay (or ThemeController)
               const parts = item.moduleId.split('_');
-              if (parts.length >= 2) {
-                // The module ID is typically the second part (after plugin name)
-                return parts[1];
+              if (parts.length >= 6) {
+                // The actual module ID is the sixth part (after ServiceExample_Theme_userId_ServiceExample_Theme)
+                return parts[5];
               }
               return item.moduleId; // fallback to original if pattern doesn't match
             })()}