Unifying Universe Tools

Comprehensive plan to consolidate all universe-level tools into a single, beautiful unified builder experience while preserving independent tool access.

Unifying Universe Tools

Executive Summary

The editor2 platform contains a rich ecosystem of 15+ specialized tools for building digital universes. Currently, these tools exist as separate routes with varying levels of integration. This plan consolidates ALL universe-level tools into a single unified builder experience at /builder, making it the default landing route while preserving the ability to access each tool independently.

Current State Analysis

The Problem

When a user navigates to a universe, they land at:

/space/:spaceSlug/universe/:universeSlug/canvas

This immediately drops them into a single-purpose tool (Canvas Builder) without showing them the full capabilities available. Users must:

Know other routes exist (/architect, /vibe, /builder)
Manually navigate between tools
Lose context when switching tools
Deal with inconsistent state synchronization

What We Have Today

Unified Builder (Partial Unification)

Location: libs/libs-space/universe-canvas/src/lib/components/unified-builder/

The current Unified Builder combines two tools in a split-view:

┌─────────────────────────────────────────────────────────────────┐
│                        UNIFIED BUILDER                          │
├───────────────────────────┬─────────────────────────────────────┤
│                           │                                     │
│    VIBE AI GENERATOR      │        CANVAS BUILDER               │
│    (Left Panel)           │        (Right Panel)                │
│                           │                                     │
│  ┌───────────────────┐    │  ┌───────────────────────────┐     │
│  │ Natural Language  │    │  │    Visual Preview         │     │
│  │ Input + Templates │    │  │    + Drag/Drop            │     │
│  └───────────────────┘    │  └───────────────────────────┘     │
│                           │                                     │
├───────────────────────────┼─────────────────────────────────────┤
│        Draggable Divider (resizable)                            │
└─────────────────────────────────────────────────────────────────┘

How It Works:

Split-View Layout: Resizable panels with draggable divider
Mode Presets:
- ai-heavy (70-30) - Focus on AI generation
- balanced (50-50) - Equal emphasis
- canvas-heavy (30-70) - Focus on visual editing
Module Handoff: AI generates → Canvas receives via ToolOrchestrationService
State Persistence: Panel ratios and preferences saved per universe

Key Services:

Service	Purpose
`ToolOrchestrationService`	Coordinates tool navigation and module handoff
`UnifiedBuilderStateService`	Persists UI state per universe
`UniverseModuleService`	Manages module lifecycle

All Available Tools

libs-space Tools (Space/Universe Level)

Library	Tool	Route	Purpose
`universe-canvas`	Canvas Builder	`/canvas`	Visual drag-drop builder
`universe-canvas`	Unified Builder	`/builder`	Split-view AI + Canvas
`universe-canvas`	Universe Hub	`/`	Overview and quick actions
`universe-architect`	Universe Architect	`/architect`	Node-based immersive builder
`theme-designer`	Theme Designer	Space-level	Global theme configuration
`data-browser`	Data Browser	Space-level	Data exploration tools
`deployment-engine-lib`	Deployment Engine	Various	Deployment infrastructure

libs-structural Tools (Platform Building)

Library	Tool	Route	Purpose
`vibe-universe`	Vibe Generator	`/vibe`	AI-powered platform generation
`universe-map`	Universe Map	Space-level	Module architecture view (NEW)
`modular-universe`	Modular Universe	Space-level	Grid-based visual builder
`modularity-lib`	Module Workbench	Space-level	Module creation step-by-step
`page-builder`	Page Builder	Space-level	Visual page composition
`singularity-lib`	Singularity	Space-level	Logic and flow builder
`launch-station-lib`	Launch Station	Space-level	Deployment hub
`deployment-system`	Deployment System	Various	Universe deployment
`structure-management`	Structure Manager	Service-level	Hierarchy management

Target State: The Ultimate Unified Builder

Vision

One unified interface where users can:

Access ALL tools from a single view
Switch between tools without losing context
See live previews across all perspectives
Maintain synchronized state everywhere

Default Landing Route Change

Before:

/space/:spaceSlug/universe/:universeSlug → redirects to /canvas

After:

/space/:spaceSlug/universe/:universeSlug → redirects to /builder

New Unified Architecture

┌─────────────────────────────────────────────────────────────────────────────┐
│                           UNIFIED UNIVERSE BUILDER                          │
│  ┌─────────────────────────────────────────────────────────────────────┐   │
│  │  [AI] [Canvas] [Architect] [Pages] [Logic] [Deploy] │ ⚙️ Settings   │   │
│  └─────────────────────────────────────────────────────────────────────┘   │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│  ┌─────────────────┐  ┌─────────────────────────────────────────────────┐  │
│  │                 │  │                                                 │  │
│  │   TOOL PANEL    │  │              MAIN WORKSPACE                     │  │
│  │   (Collapsible) │  │              (Active Tool)                      │  │
│  │                 │  │                                                 │  │
│  │  ┌───────────┐  │  │  ┌─────────────────────────────────────────┐   │  │
│  │  │ Tree View │  │  │  │                                         │   │  │
│  │  │ / Module  │  │  │  │   Canvas / Architect / Page Builder     │   │  │
│  │  │ Browser   │  │  │  │   (Swappable via tabs)                  │   │  │
│  │  └───────────┘  │  │  │                                         │   │  │
│  │                 │  │  └─────────────────────────────────────────┘   │  │
│  │  ┌───────────┐  │  │                                                 │  │
│  │  │Properties │  │  │  ┌─────────────────────────────────────────┐   │  │
│  │  │  Panel    │  │  │  │         SECONDARY WORKSPACE              │   │  │
│  │  └───────────┘  │  │  │    (Preview / Code / JSON / Tests)       │   │  │
│  │                 │  │  └─────────────────────────────────────────┘   │  │
│  └─────────────────┘  └─────────────────────────────────────────────────┘  │
│                                                                             │
├─────────────────────────────────────────────────────────────────────────────┤
│  [Status Bar: Universe Name | Module Count | Deploy Status | Last Saved]   │
└─────────────────────────────────────────────────────────────────────────────┘

Implementation Plan

Phase 1: Route Restructuring (Priority: Critical)

Objective: Make /builder the default landing route for universes.

Tasks:

Update app.routes.ts to redirect empty universe path to /builder

// apps/gograb-space/src/app/app.routes.ts
{
  path: 'space/:spaceSlug/universe/:universeSlug',
  children: [
    { path: '', redirectTo: 'builder', pathMatch: 'full' }, // CHANGED from 'canvas'
    { path: 'builder', loadComponent: () => ... },
    { path: 'canvas', loadComponent: () => ... },  // Still accessible
    { path: 'architect', loadComponent: () => ... },
    { path: 'vibe', loadComponent: () => ... },
  ]
}

Update any hardcoded navigation that assumes /canvas default
Add URL migration for bookmarked links

Files to Modify:

apps/gograb-space/src/app/app.routes.ts
Navigation services with hardcoded routes

Phase 2: Tool Tab System (Priority: Critical)

Objective: Add tool switching tabs to unified builder header.

Tasks:

Create UnifiedToolbarComponent with tool tabs

interface ToolTab {
  id: ToolType;
  label: string;
  icon: string;
  shortcut?: string;
  badge?: string;  // For notifications
}

const TOOL_TABS: ToolTab[] = [
  { id: 'vibe-universe', label: 'AI', icon: 'fa-magic', shortcut: '⌘1' },
  { id: 'universe-canvas', label: 'Canvas', icon: 'fa-th-large', shortcut: '⌘2' },
  { id: 'universe-architect', label: 'Architect', icon: 'fa-project-diagram', shortcut: '⌘3' },
  { id: 'page-builder', label: 'Pages', icon: 'fa-file-alt', shortcut: '⌘4' },
  { id: 'singularity', label: 'Logic', icon: 'fa-code-branch', shortcut: '⌘5' },
  { id: 'deployment', label: 'Deploy', icon: 'fa-rocket', shortcut: '⌘6' },
];

Implement tab switching with keyboard shortcuts
Add tab badge system for notifications (e.g., "3 pending modules")

Files to Create:

libs/libs-space/universe-canvas/src/lib/components/unified-builder/unified-toolbar/

Phase 3: Architect Integration (Priority: High)

Objective: Embed Universe Architect as a swappable workspace view.

Current Architect Features to Preserve:

Infinite pan/zoom canvas (5000x5000)
Cosmic node visualization
Orbital connections between nodes
Mini-map navigation
Properties panel
Context menu
Side panel with code/tree/json tabs

Tasks:

Create ArchitectEmbeddableComponent wrapper
- Strip standalone routing shell
- Accept universe context via inputs
- Emit events for tool orchestration

Add Architect as workspace option

workspaceViews: WorkspaceView[] = [
  { id: 'canvas', component: UniverseCanvasBuilderComponent },
  { id: 'architect', component: ArchitectEmbeddableComponent },
  { id: 'pages', component: PageBuilderEmbeddableComponent },
];

Sync selection state across Canvas ↔ Architect
- Select module in Canvas → highlights node in Architect
- Select node in Architect → highlights section in Canvas

Files to Modify:

libs/libs-space/universe-architect/src/lib/components/architect-canvas/
libs/libs-space/universe-canvas/src/lib/components/unified-builder/

Phase 4: Page Builder Integration (Priority: High)

Objective: Embed Page Builder for editing individual page content.

Integration Flow:

Universe Builder (hierarchy)
    │
    ├── Click "Edit Page" on page-module
    │         │
    │         ▼
    │   Page Builder opens in workspace
    │   (maintains universe context)
    │         │
    │         ▼
    │   Save → Updates universe structure
    │
    └── Return to hierarchy view

Tasks:

Create PageBuilderEmbeddableComponent wrapper
Add "Edit Page" action to module context menus
Implement breadcrumb navigation (Universe → Galaxy → World → Page)
Sync page changes back to universe structure

Files to Modify:

libs/libs-structural/page-builder/src/lib/
libs/libs-space/universe-canvas/src/lib/components/unified-builder/

Phase 5: Logic Builder (Singularity) Integration (Priority: Medium)

Objective: Embed Singularity for action/flow editing.

Integration Flow:

Module Action List
    │
    ├── Click "Edit Flow" on action
    │         │
    │         ▼
    │   Singularity opens in workspace
    │   (shows action's flow diagram)
    │         │
    │         ▼
    │   Save → Updates action definition
    │
    └── Return to module view

Tasks:

Create SingularityEmbeddableComponent wrapper
Add "Edit Flow" action to action items
Pass action context to Singularity
Sync flow changes back to module

Files to Modify:

libs/libs-structural/singularity-lib/src/lib/
libs/libs-space/universe-canvas/src/lib/components/unified-builder/

Phase 6: Deployment Integration (Priority: Medium)

Objective: Add deployment panel/modal within unified builder.

Tasks:

Create DeploymentPanelComponent for sidebar
Show deployment status in status bar
Add quick deploy button to toolbar
Integrate LaunchStationComponent as modal/panel

Files to Modify:

libs/libs-structural/deployment-system/
libs/libs-structural/launch-station-lib/
libs/libs-space/universe-canvas/src/lib/components/unified-builder/

Phase 7: Universe Map Integration (Priority: Medium)

Objective: Add Universe Map as module browser/tree panel.

Tasks:

Replace current tree view with ModuleTreeViewComponent from universe-map
Add ModuleLibraryBrowserComponent as panel option
Integrate ModuleCreationWizardComponent for adding modules

Files to Modify:

libs/libs-structural/universe-map/src/lib/
libs/libs-space/universe-canvas/src/lib/components/unified-builder/

Phase 8: Modular Universe Grid Integration (Priority: Low)

Objective: Add grid-based layout as optional workspace view.

Tasks:

Create ModularUniverseEmbeddableComponent wrapper
Add "Grid View" option to workspace tabs
Sync grid changes with canvas/architect

Files to Modify:

libs/libs-structural/modular-universe/src/lib/

Phase 9: Enhanced Tool Orchestration (Priority: High)

Objective: Upgrade ToolOrchestrationService to handle all tools.

Current Tool Orchestration:

// libs/libs-structural/vibe-universe/src/lib/services/tool-orchestration.service.ts
export type ToolType =
  | 'vibe-universe'
  | 'modular-universe'
  | 'module-workbench'
  | 'page-builder'
  | 'widget-builder'
  | 'universe-canvas'
  | 'universe-architect';

Enhanced Orchestration:

Add missing tool types:

export type ToolType =
  | 'vibe-universe'        // AI Generator
  | 'universe-canvas'      // Canvas Builder
  | 'universe-architect'   // Node-based Builder
  | 'page-builder'         // Page Composer
  | 'singularity'          // Logic Builder
  | 'modular-universe'     // Grid Builder
  | 'module-workbench'     // Module Creator
  | 'widget-builder'       // Widget Creator
  | 'deployment'           // Deployment
  | 'theme-designer';      // Theme Configuration

Add bi-directional sync events:

interface SyncEvent {
  source: ToolType;
  target: ToolType | 'all';
  type: 'selection' | 'create' | 'update' | 'delete';
  payload: unknown;
}

Implement undo/redo across tools
Add conflict resolution for concurrent edits

Files to Modify:

libs/libs-structural/vibe-universe/src/lib/services/tool-orchestration.service.ts

Phase 10: Unified State Management (Priority: High)

Objective: Single source of truth for all tools.

Tasks:

Create UnifiedUniverseStateService:

interface UnifiedUniverseState {
  universe: Universe;
  modules: Map<string, UniversalModule>;
  pages: Map<string, Page>;
  actions: Map<string, Action>;
  selectedIds: Set<string>;
  clipboard: ClipboardState;
  history: HistoryState;
}

Implement optimistic updates with rollback
Add conflict detection and resolution
Persist state with automatic recovery

Files to Create:

libs/libs-space/universe-canvas/src/lib/services/unified-universe-state.service.ts

Phase 11: Visual Polish (Priority: Low)

Objective: Beautiful, cohesive visual design.

Tasks:

Design unified color scheme for all tools
Create consistent icon system
Add smooth transitions between tools
Implement dark/light mode across all embedded tools
Add tool-specific color accents for visual distinction

Component Architecture

New Unified Builder Structure

unified-builder/
├── unified-builder.component.ts          # Main container
├── unified-builder.component.html
├── unified-builder.component.scss
├── unified-toolbar/
│   ├── unified-toolbar.component.ts      # Tool tabs + actions
│   └── tool-tab.component.ts             # Individual tab
├── unified-sidebar/
│   ├── unified-sidebar.component.ts      # Collapsible sidebar
│   ├── tree-panel/                       # Module tree
│   ├── properties-panel/                 # Property editor
│   └── library-panel/                    # Module library
├── unified-workspace/
│   ├── unified-workspace.component.ts    # Workspace container
│   ├── workspace-tabs.component.ts       # Secondary tabs
│   └── embeddables/
│       ├── canvas-embeddable.component.ts
│       ├── architect-embeddable.component.ts
│       ├── page-builder-embeddable.component.ts
│       ├── singularity-embeddable.component.ts
│       └── modular-universe-embeddable.component.ts
├── unified-status-bar/
│   └── unified-status-bar.component.ts   # Bottom status bar
└── services/
    ├── unified-builder-state.service.ts  # UI state
    ├── unified-universe-state.service.ts # Data state
    └── unified-keyboard.service.ts       # Keyboard shortcuts

Tool Embeddable Pattern

Each tool should expose an embeddable version:

// Example: ArchitectEmbeddableComponent
@Component({
  selector: 'lib-architect-embeddable',
  standalone: true,
  template: `
    <lib-architect-canvas
      [universeId]="universeId()"
      [spaceSlug]="spaceSlug()"
      [embedded]="true"
      (nodeSelected)="onNodeSelected($event)"
      (nodeCreated)="onNodeCreated($event)">
    </lib-architect-canvas>
  `
})
export class ArchitectEmbeddableComponent {
  universeId = input.required<string>();
  spaceSlug = input.required<string>();

  nodeSelected = output<string>();
  nodeCreated = output<UniversalModule>();

  // Methods for external control
  selectNode(nodeId: string): void { ... }
  zoomToNode(nodeId: string): void { ... }
  refreshFromModules(modules: UniversalModule[]): void { ... }
}

Tool-to-Tool Synchronization

Selection Sync

When user selects in one tool, all tools reflect:

┌──────────────────────────────────────────────────────────────┐
│                     SELECTION SYNC                           │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│   Canvas (select section) ──────► Architect (highlight node) │
│           │                              │                   │
│           ▼                              ▼                   │
│   Properties Panel updates      Mini-map centers on node     │
│                                                              │
│   Architect (select node) ──────► Canvas (scroll to section) │
│           │                              │                   │
│           ▼                              ▼                   │
│   Tree View highlights          Properties Panel updates     │
│                                                              │
└──────────────────────────────────────────────────────────────┘

Creation Sync

When AI generates modules:

┌──────────────────────────────────────────────────────────────┐
│                     CREATION SYNC                            │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│   AI Generator                                               │
│        │                                                     │
│        ▼                                                     │
│   Creates UniversalModule[]                                  │
│        │                                                     │
│        ├──────► Canvas: forceRefreshFromModules()            │
│        │                                                     │
│        ├──────► Architect: rebuildNodes()                    │
│        │                                                     │
│        ├──────► Tree View: updateTree()                      │
│        │                                                     │
│        └──────► Status Bar: "4 modules created"              │
│                                                              │
└──────────────────────────────────────────────────────────────┘

Keyboard Shortcuts

Shortcut	Action
`⌘1`	Switch to AI Generator
`⌘2`	Switch to Canvas
`⌘3`	Switch to Architect
`⌘4`	Switch to Pages
`⌘5`	Switch to Logic
`⌘6`	Switch to Deploy
`⌘B`	Toggle sidebar
`⌘\`	Toggle secondary workspace
`⌘S`	Save universe
`⌘Z`	Undo (across tools)
`⌘⇧Z`	Redo (across tools)
`⌘K`	Command palette
`Space`	Pan mode (in Canvas/Architect)

Success Criteria

Metric	Current	Target
Default route	`/canvas`	`/builder`
Tools in unified view	2	6+
Tool switch time	Route navigation	Instant tab switch
Cross-tool sync	Partial	Full bi-directional
State persistence	Per-tool	Unified
Keyboard shortcuts	Limited	Comprehensive

Migration Strategy

Phase 1: Non-Breaking Changes

Add new unified builder features
Keep existing routes working
Add deprecation warnings to old routes

Phase 2: Default Change

Change default redirect to /builder
Update documentation
Add migration notice

Phase 3: Cleanup

Remove duplicate functionality
Consolidate services
Archive legacy components

Visual Mockup: Final State

┌─────────────────────────────────────────────────────────────────────────────────────┐
│ 🌌 Fitness Center Universe                               [Save] [Preview] [Deploy]  │
├─────────────────────────────────────────────────────────────────────────────────────┤
│ [✨ AI] [🎨 Canvas] [🔮 Architect] [📄 Pages] [⚡ Logic] [🚀 Deploy]   │ ⚙️ │ 👤 │
├───────────────────────┬─────────────────────────────────────────────────────────────┤
│                       │                                                             │
│  📁 STRUCTURE         │                  MAIN WORKSPACE                             │
│  ─────────────        │                                                             │
│  ▼ 🌌 Fitness Admin   │   ┌─────────────────────────────────────────────────────┐  │
│    ▼ 🌍 Members       │   │                                                     │  │
│      📄 List          │   │              ARCHITECT VIEW (Active)                │  │
│      📄 Detail        │   │                                                     │  │
│      📄 Form          │   │      ┌─────────┐      ┌─────────┐                   │  │
│    ▼ 🌍 Classes       │   │      │ Galaxy  │──────│ Galaxy  │                   │  │
│      📄 Calendar      │   │      │ Members │      │ Classes │                   │  │
│      📄 Booking       │   │      └────┬────┘      └────┬────┘                   │  │
│                       │   │           │                │                        │  │
│  ─────────────        │   │      ┌────┴────┐      ┌────┴────┐                   │  │
│  📋 PROPERTIES        │   │      │  World  │      │  World  │                   │  │
│  ─────────────        │   │      │ Member  │      │ Classes │                   │  │
│  Name: Member List    │   │      └─────────┘      └─────────┘                   │  │
│  Route: /members      │   │                                                     │  │
│  Type: Page Module    │   └─────────────────────────────────────────────────────┘  │
│                       │                                                             │
│  ⚡ ACTIONS           │   ┌──────────┬──────────┬──────────┬──────────┐            │
│  ─────────────        │   │ Preview  │  Code    │  JSON    │  Tests   │            │
│  • getMemberById      │   └──────────┴──────────┴──────────┴──────────┘            │
│  • createMember       │   ┌─────────────────────────────────────────────────────┐  │
│  • updateMember       │   │  <lib-fitness-center-member-list                    │  │
│  • deleteMember       │   │    [members]="membersState.items()"                 │  │
│                       │   │    (memberSelected)="onSelect($event)">             │  │
│                       │   │  </lib-fitness-center-member-list>                  │  │
│                       │   └─────────────────────────────────────────────────────┘  │
│                       │                                                             │
├───────────────────────┴─────────────────────────────────────────────────────────────┤
│  ✓ Saved 2 min ago │ 12 Modules │ 4 Pages │ Draft │ Last deployed: Never          │
└─────────────────────────────────────────────────────────────────────────────────────┘

Dependencies

Session 32.2 type consistency (Completed)
Session 33.1 code generation plan
Session 33.1 editing/visuals plan
Tool orchestration service exists

Risks

Risk	Probability	Impact	Mitigation
Performance with all tools loaded	Medium	High	Lazy load embeddables
State conflicts between tools	High	Medium	Single source of truth
Breaking existing workflows	Medium	High	Keep independent routes
Complex keyboard shortcut conflicts	Low	Low	Configurable shortcuts

References

libs-space Libraries

universe-canvas - Visual Canvas Builder
universe-architect - Node-Based Immersive Builder
theme-designer - Global Theme Configuration
deployment-engine-lib - Deployment Infrastructure
data-browser - Data Exploration Tools
universe-utils - Shared Utilities

libs-structural Libraries

vibe-universe - AI Platform Generator
universe-map - Module Architecture (NEW)
modular-universe - Grid-Based Builder
modularity-lib - Module Workbench
page-builder - Page Composer
singularity-lib - Logic Builder
launch-station-lib - Deployment Hub
deployment-system - Deployment Infrastructure
structure-management - Hierarchy Types/Services
platform-shell - Navigation Infrastructure
space-map-lib - Legacy Universe/Galaxy Navigation
module-utils-lib - Module Utilities
module-browser-lib - Module Selection
editor-web-lib - Legacy Page Builder

Unifying Universe Tools

Executive Summary

Current State Analysis

The Problem

What We Have Today

Unified Builder (Partial Unification)

All Available Tools

libs-space Tools (Space/Universe Level)

libs-structural Tools (Platform Building)

Target State: The Ultimate Unified Builder

Vision

Default Landing Route Change

New Unified Architecture

Implementation Plan

Phase 1: Route Restructuring (Priority: Critical)

Phase 2: Tool Tab System (Priority: Critical)

Phase 3: Architect Integration (Priority: High)

Phase 4: Page Builder Integration (Priority: High)

Phase 5: Logic Builder (Singularity) Integration (Priority: Medium)

Phase 6: Deployment Integration (Priority: Medium)

Phase 7: Universe Map Integration (Priority: Medium)

Phase 8: Modular Universe Grid Integration (Priority: Low)

Phase 9: Enhanced Tool Orchestration (Priority: High)

Phase 10: Unified State Management (Priority: High)

Phase 11: Visual Polish (Priority: Low)

Component Architecture

New Unified Builder Structure

Tool Embeddable Pattern

Tool-to-Tool Synchronization

Selection Sync

Creation Sync

Keyboard Shortcuts

Success Criteria

Migration Strategy

Phase 1: Non-Breaking Changes

Phase 2: Default Change

Phase 3: Cleanup

Visual Mockup: Final State

Dependencies

Risks

Related Documentation

References

libs-space Libraries

libs-structural Libraries