THREE TOOL INTEGRATION PLAN

Ecosistema completo para organización y gestión de contenido con interfaces espaciales

Three-Tool Integration: Complete Implementation Plan

Date: November 11, 2025
Goal: Build the most groundbreaking, modern, functional module management system

🎯 What We Already Have

✅ Universe Map

✅ Module Schema (ModuleManifest)

✅ Universal Module Service

✅ GoGrab AI + Prompt System

🚀 What Needs to Be Built

Phase 1: Universe Map ↔ Modules Integration (Priority 1)

Goal: Click a module card → Opens Universe Map with that module loaded

1.1 Add "Edit Structure" Button to Module Cards

Location: libs/modularity-lib/src/lib/components/module-manager-page/

// module-manager-page.component.ts
async editStructure(module: UnifiedModule): Promise<void> {
  const spaceSlug = this.spaceId();
  
  // Navigate to Universe Map with module context
  this.router.navigate(['/space', spaceSlug, 'universe-map'], {
    queryParams: {
      mode: 'module-editor',  // NEW: tells Universe Map we're editing a specific module
      moduleId: module.id,
      moduleType: module.type
    }
  });
}

1.2 Make Universe Map Module-Agnostic

Location: libs/universe-map/src/lib/components/universe-map/

Current: Only loads universe-level modules
Target: Load ANY module type and show its internal structure

// universe-map.component.ts
async ngOnInit() {
  const mode = this.route.snapshot.queryParams['mode'];
  const moduleId = this.route.snapshot.queryParams['moduleId'];
  
  if (mode === 'module-editor' && moduleId) {
    // Load specific module for editing
    await this.loadModuleForEditing(moduleId);
  } else {
    // Default: Load universe view
    await this.loadUniverseView();
  }
}

private async loadModuleForEditing(moduleId: string) {
  // 1. Load the module
  const module = await this.moduleService.getModule(moduleId);
  
  // 2. Load its children (if any)
  const children = await this.moduleService.query({
    parentId: moduleId
  });
  
  // 3. Set canvas title
  this.canvasTitle.set(`Editing: ${module.name}`);
  
  // 4. Show module-specific library (what can be nested inside)
  this.availableModuleTypes.set(
    this.getCompatibleModuleTypes(module.type)
  );
}

private getCompatibleModuleTypes(parentType: ModuleType): ModuleType[] {
  // Define what can be nested inside what
  const nesting Rules: Record<ModuleType, ModuleType[]> = {
    'universe': ['galaxy', 'world', 'layout'],
    'galaxy': ['world', 'page', 'navigation'],
    'world': ['page', 'navigation', 'feature'],
    'page': ['widget', 'feature', 'layout'],
    'navigation': ['navigation'], // sub-menus
    'feature': ['widget'],
    'widget': [],
    'layout': ['widget', 'feature'],
    'data': [],
    'flow': [],
    'custom': ['widget', 'feature']
  };
  
  return nestingRules[parentType] || [];
}

1.3 Real-time Config Updates

Location: libs/universe-map/src/lib/components/canvas/

When user drags/drops, adds, removes modules:

// Every change should update the module's config
private async onModuleChange(module: UniversalModule) {
  // 1. Get updated children structure
  const children = await this.moduleService.query({ parentId: module.id });
  
  // 2. Update module config with new structure
  const updatedConfig = {
    ...module.config,
    children: children.map(c => ({
      id: c.id,
      type: c.type,
      position: this.modulePositions.get(c.id),
      config: c.config
    }))
  };
  
  // 3. Save
  await this.moduleService.updateModule(module.id, {
    config: updatedConfig
  });
  
  console.log('✅ Module structure updated:', module.name);
}

Phase 2: Modularity Tool Revamp (Priority 2)

Goal: Transform Modularity from basic form → AI-powered module packager

2.1 Smart Packaging UI

Location: libs/modularity-lib/src/lib/components/module-packager/

NEW COMPONENT: ModulePackagerComponent

// Features:
// 1. Content Selection
selectPages(): void {
  // Multi-select from existing pages in universe
}

selectFlows(): void {
  // Multi-select from Singularity flows
}

selectWidgets(): void {
  // Multi-select from widget library
}

// 2. AI Analysis
async analyzeSelection(): Promise<ModuleSuggestion> {
  const prompt = this.promptSystem.build('analyze-module-structure', {
    pages: this.selectedPages,
    flows: this.selectedFlows,
    widgets: this.selectedWidgets
  });
  
  return await this.gograbAI.generate(prompt);
}

// 3. Schema Builder
buildSchema(): ModuleConfigurationSchema {
  // Visual JSON schema editor
  // Drag-drop to add fields
  // Configure field types, defaults, validation
}

// 4. Preview & Test
previewModule(): void {
  // Render preview of how module will work
  // Test configuration changes live
}

// 5. Package & Save
async packageModule(): Promise<UnifiedModule> {
  return await this.moduleService.create({
    name: this.form.name,
    type: this.form.type,
    config: this.buildSchema(),
    // ... rest of data
  });
}

2.2 Template System

Location: libs/modularity-lib/src/lib/components/template-builder/

NEW COMPONENT: TemplateBuilderComponent

// Create templates from existing modules
async createTemplate(sourceModule: UnifiedModule): Promise<ModuleTemplate> {
  return {
    id: generateId(),
    name: `${sourceModule.name} Template`,
    baseModule: sourceModule.id,
    configurableSlots: this.extractSlots(sourceModule),
    defaultConfig: sourceModule.config,
    preview: await this.generatePreview(sourceModule)
  };
}

private extractSlots(module: UniversalModule): ConfigurableSlot[] {
  // Analyze module to find what can be configured
  // - Colors, fonts, spacing (from config)
  // - Content areas (from layout)
  // - Dynamic data (from data modules)
  // - Logic hooks (from flows)
}

2.3 AI Generation

Location: libs/modularity-lib/src/lib/components/ai-module-generator/

NEW COMPONENT: AiModuleGeneratorComponent

async generateFromPrompt(userPrompt: string): Promise<UniversalModule> {
  // 1. Build AI prompt using prompt-system
  const systemPrompt = this.promptSystem.build('generate-module', {
    userRequest: userPrompt,
    availableModuleTypes: this.getModuleTypes(),
    existingModules: this.getExistingModules()
  });
  
  // 2. Generate with gograb-ai
  const aiResponse = await this.gograbAI.generate(systemPrompt);
  
  // 3. Parse response into module structure
  const moduleStructure = this.parseAIResponse(aiResponse);
  
  // 4. Create preview
  this.showPreview(moduleStructure);
  
  // 5. Allow refinement
  // User can tweak via natural language
  // "Make the header blue"
  // "Add a sidebar"
  
  // 6. Final package
  return await this.packageModule(moduleStructure);
}

Phase 3: Modules Library Enhancement (Priority 3)

3.1 Advanced Clone Options

async cloneModule(module: UnifiedModule): Promise<void> {
  const cloneDialog = await this.portalService.openPortal({
    content: {
      type: 'component',
      data: CloneModuleDialogComponent,
      context: {
        module,
        options: {
          cloneChildren: true,  // Clone nested modules too?
          cloneConfig: true,    // Clone configuration?
          cloneData: false,     // Clone data? (usually no)
          visibility: 'private'
        }
      }
    }
  });
}

3.2 Template Management

async saveAsTemplate(module: UnifiedModule): Promise<void> {
  const template = {
    name: `${module.name} Template`,
    description: 'Reusable template',
    baseModule: module.id,
    configurableFields: this.extractConfigurableFields(module),
    tags: ['template', module.type]
  };
  
  await this.templateService.save(template);
}

3.3 Usage Tracking

async getModuleUsage(moduleId: string): Promise<ModuleUsage> {
  return {
    usedIn: [
      { type: 'universe', id: 'uni-123', name: 'Main Site' },
      { type: 'galaxy', id: 'gal-456', name: 'Products' }
    ],
    totalInstances: 15,
    lastUsed: new Date()
  };
}

📋 Implementation Order

Week 1: Universe Map Integration

Week 2: Modularity Revamp - Part 1

Week 3: Modularity Revamp - Part 2

Week 4: Modules Library Polish

🔗 Key Integrations

  1. Universe Map ↔ Modules:

    • Click "Edit Structure" → Opens Universe Map with module loaded
    • Changes in Universe Map → Updates module config
    • Save as variant → Creates new module in library

  2. Modularity ↔ GoGrab AI:

    • Natural language input → AI generates module structure
    • AI analyzes selected content → Suggests packaging
    • Refinement loop → AI adjusts module

  3. Modularity ↔ Prompt System:

    • Reusable prompts for module generation
    • Context-aware prompts based on selected content
    • Template prompts for common patterns

  4. All Three Tools:

    • Modules = Library/Organization
    • Universe Map = Visual Editor
    • Modularity = Creator/Packager
    • Seamless navigation between all three

Success Criteria

START: Phase 1, Task 1.1 - Add "Edit Structure" button PARALLEL: Both tasks can run simultaneously as requested (C)

Ready to begin! 🚀