17.4 Dynamic Suggestions Module Editing

Documentation for Sessions

Session 17.4 - Dynamic Suggestions & Module Editing Integration

Date: December 29, 2025
Status: ✅ Complete
SessionID: editor2-17.4
Confidence: 96%
Purpose: Make platform suggestions dynamic (load from backend) and integrate module editing with modularity-lib

🎯 Session Objectives

17.4.1 - Dynamic Suggestions from Backend ✅

✅ Enhanced ModuleSuggestionsService to load from gograb-api/modules
✅ Build industry templates dynamically from loaded modules
✅ Fallback to hardcoded templates when backend unavailable
✅ Auto-load global modules on component initialization

17.4.2 - Module Editing Integration ✅

✅ Add "Edit Module" buttons to generated platform view
✅ Create editable copies stored in space_modules
✅ Navigate to modularity-lib workbench with module context
✅ Preserve return context for seamless workflow

17.4.3 - Preview Mode Before Deploy ✅

✅ Add full-screen preview modal
✅ Tabbed interface (Modules, Pages, Navigation, Theme)
✅ Module cards with edit capability
✅ Theme color palette preview

🏗️ Architecture Changes

Dynamic Module Loading Flow

┌─────────────────────────────────────────────────────────────────────────┐
│                    DYNAMIC SUGGESTIONS FLOW                              │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│   IntelligentInputComponent                                             │
│         │                                                                │
│         │ ngOnInit()                                                     │
│         ▼                                                                │
│   ┌─────────────────────────────────────────────────────────────┐       │
│   │ ModuleSuggestionsService.loadGlobalModules()                │       │
│   │                                                              │       │
│   │   GET /api/global-modules                                    │       │
│   │        │                                                     │       │
│   │        ▼                                                     │       │
│   │   ┌──────────────────┐    ┌──────────────────────────┐      │       │
│   │   │ Backend Returns  │    │ Backend Unavailable      │      │       │
│   │   │ GlobalModules[]  │    │ Use Fallback Templates   │      │       │
│   │   └────────┬─────────┘    └──────────────────────────┘      │       │
│   │            │                                                 │       │
│   │            ▼                                                 │       │
│   │   buildIndustryTemplatesFromModules()                        │       │
│   │   - Group by category/tags                                   │       │
│   │   - Infer industries                                         │       │
│   │   - Build IndustryTemplate map                               │       │
│   │                                                              │       │
│   └─────────────────────────────────────────────────────────────┘       │
│                                                                          │
│   User Types Description                                                 │
│         │                                                                │
│         ▼                                                                │
│   generatePlatformSuggestions(input)                                    │
│   - Check industryTemplatesCache (dynamic)                              │
│   - Fall back to getIndustrySuggestions() (hardcoded)                   │
│   - Calculate contextual confidence                                     │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

Module Editing Flow

┌─────────────────────────────────────────────────────────────────────────┐
│                      MODULE EDITING FLOW                                 │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│   Generated Platform (Complete Mode)                                     │
│         │                                                                │
│         │ User clicks "Edit" on module chip                              │
│         ▼                                                                │
│   ┌─────────────────────────────────────────────────────────────┐       │
│   │ editModule(moduleName)                                       │       │
│   │                                                              │       │
│   │   1. findModuleInManifest(manifest, moduleName)              │       │
│   │   2. createEditableModuleCopy(moduleRef, manifest)           │       │
│   │      - Generate unique ID                                    │       │
│   │      - Mark as editable, isCopy                              │       │
│   │      - Copy entities, actions, embeddables                   │       │
│   │                                                              │       │
│   │   3. platformState.addModuleToPlatform()                     │       │
│   │   4. platformState.syncModuleToBackend()                     │       │
│   │      → POST /api/spaces/:spaceId/modules                     │       │
│   │                                                              │       │
│   │   5. router.navigate() to workbench                          │       │
│   │      /space/{slug}/modularity/workbench/{moduleId}           │       │
│   │      ?source=vibe-universe-generator                         │       │
│   │      &returnTo=vibe                                          │       │
│   │      &editMode=true                                          │       │
│   │                                                              │       │
│   └─────────────────────────────────────────────────────────────┘       │
│                                                                          │
│   Module Workbench                                                       │
│   - Loads module context from moduleId                                  │
│   - User edits entities, actions, embeddables                           │
│   - Changes saved to space_modules (MongoDB)                            │
│   - Return to vibe-universe-generator when done                         │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

📁 Files Modified

ModuleSuggestionsService (Enhanced)

File: libs/libs-structural/universe-map/src/lib/services/module-suggestions.service.ts

New Features:

Added GlobalModuleTemplate interface
Added IndustryTemplate interface
Added loadGlobalModules() method
Added buildIndustryTemplatesFromModules() method
Added getDynamicIndustrySuggestions() method
Enhanced generatePlatformSuggestions() to use dynamic templates

IntelligentInputComponent (Enhanced)

File: libs/libs-structural/vibe-universe/src/lib/components/vibe-universe-generator/intelligent-input/intelligent-input.component.ts

New Features:

Implements OnInit interface
Loads dynamic modules on initialization
Tracks dynamicModulesLoaded signal
Logs source of suggestions (dynamic vs fallback)

VibeUniverseGeneratorComponent (Enhanced)

File: libs/libs-structural/vibe-universe/src/lib/components/vibe-universe-generator/vibe-universe-generator.component.ts

New Methods:

editModule(moduleName) - Navigate to workbench to edit module
findModuleInManifest() - Find module by name in manifest
createEditableModuleCopy() - Create editable copy for workspace
generateSlug() - Generate URL-safe slugs
openPreviewMode() / closePreviewMode() - Preview modal control
setPreviewTab() - Tab navigation in preview
getModuleDetails() - Get detailed module info

New Signals:

showPreviewMode - Controls preview modal visibility
previewTab - Current active tab in preview

HTML Template (Enhanced)

File: libs/libs-structural/vibe-universe/src/lib/components/vibe-universe-generator/vibe-universe-generator.component.html

New Features:

"Full Preview" button in complete mode header
Module chips with edit buttons
Card hint explaining edit capability
Full preview modal with tabs (Modules, Pages, Navigation, Theme)
Module cards in preview with edit buttons
Theme color palette preview

SCSS Styles (Enhanced)

File: libs/libs-structural/vibe-universe/src/lib/components/vibe-universe-generator/vibe-universe-generator.component.scss

New Styles:

.btn-preview-mode - Preview button styling
.module-chip-container - Module with edit button layout
.btn-edit-module - Edit button styling
.preview-mode-overlay - Modal overlay
.preview-mode-modal - Modal container
.preview-tabs - Tab navigation
.preview-module-card - Module card in preview
.color-palette - Theme color swatches

🔗 Integration Points

With modularity-lib

Editable modules navigate to /modularity/workbench/:moduleId
Query params preserve return context (source, returnTo, editMode)
ModuleContextService can load module from backend via moduleId

With backend-api

Dynamic suggestions load from GET /api/global-modules
Editable copies sync to POST /api/spaces/:spaceId/modules
space_modules collection stores editable module copies

With PlatformStateService

Modules added via addModuleToPlatform()
Synced via syncModuleToBackend()
Persisted for tool handoffs

🧪 Testing

Test Dynamic Suggestions

# 1. Start backend-api with global modules seeded
yarn serve:backend

# 2. Start frontend
yarn dev:gograb

# 3. Navigate to vibe-universe-generator
http://localhost:5200/space/default-space/vibe

# 4. Type "restaurant" and observe:
# - Console log: "[ModuleSuggestions] Loaded global modules: X"
# - Suggestions should come from backend when available
# - Falls back to hardcoded templates if backend unavailable

Test Module Editing

# 1. Generate a platform (e.g., "Restaurant Management")
# 2. After generation completes, find a module chip
# 3. Click the pencil icon on any module
# 4. Verify navigation to workbench
# 5. Edit the module (entities, actions, etc.)
# 6. Verify changes saved to space_modules collection

Test Preview Mode

# 1. Generate a platform
# 2. Click "Full Preview" button
# 3. Navigate through tabs (Modules, Pages, Navigation, Theme)
# 4. Click "Edit Module" on any module card
# 5. Click "Deploy to Universe" from preview

📊 Session 17.4 Summary

Task	Status
Dynamic suggestions from backend	✅ Complete
Module editing integration	✅ Complete
Editable module copies	✅ Complete
Preview mode modal	✅ Complete
Documentation	✅ Complete

Confidence Level: 96%

🚀 Next Steps (Future Work)

📋 E2E Tests: Create Cypress/Playwright tests for full generation flow
📋 More Component Templates: Add list, form, detail view templates
📋 Backend Suggestions API: Enhance /workflow/suggest with ML-based recommendations
📋 Module Versioning: Track versions of edited modules
📋 Undo/Redo: Add ability to revert module changes

🔗 Related Sessions

Session 17.1: Global Modules Sync Analysis
Session 17.2: Enhanced Suggestion UX
Session 17.3: Comprehensive Module Architecture Plan
Session 16: Platform Builder Enhancement

Session 17.4 Status: ✅ COMPLETE