Phase 2 - Flow → Page Connection

Connect Singularity flows to Editor pages for interactive functionality

Phase 2: Flow → Page Connection

Priority: P1 - HIGH
Duration: 2-3 days
Status: 🟢 IN PROGRESS
Started: October 28, 2025

🎯 Objectives

Enable pages to have Singularity flows attached, creating interactive functionality and data pipelines.

Problems Being Solved

  1. Flows are isolated - Created in Singularity but not connected to pages
  2. No page interactivity - Pages are static without attached logic
  3. Manual wiring required - No easy way to connect flows to page events
  4. No visual feedback - Can't see which flows are attached to which pages

📋 Implementation Checklist

Files to Create

Files to Modify

🏗️ Architecture

FlowAttachmentService

@Injectable({ providedIn: 'root' })
export class FlowAttachmentService {
  // Attach flow to page
  async attachFlow(pageId: string, flowId: string, trigger?: FlowTrigger): Promise<void>
  
  // Detach flow from page
  async detachFlow(pageId: string, flowId: string): Promise<void>
  
  // Get flows for page
  getFlowsForPage(pageId: string): Signal<FlowWithMetadata[]>
  
  // Get pages using flow
  getPagesUsingFlow(flowId: string): Signal<WorldWithMetadata[]>
  
  // Execute flow for page
  async executeFlow(pageId: string, flowId: string, context: any): Promise<any>
}

Flow Triggers

Flows can be triggered by:

Flow Attachment UI

┌─────────────────────────────────────┐
│  📊 Attached Flows (3)              │
├─────────────────────────────────────┤
│  🔵 User Authentication Flow        │
│     Trigger: Page Load              │
│     Status: ✅ Active               │
│     [Edit] [Detach]                 │
├─────────────────────────────────────┤
│  🟢 Form Submission Handler         │
│     Trigger: Widget Event (submit)  │
│     Status: ✅ Active               │
│     [Edit] [Detach]                 │
├─────────────────────────────────────┤
│  + Attach Flow                      │
└─────────────────────────────────────┘

🔧 Implementation Details

Step 1: Create FlowAttachmentService

File: libs/core-angular/src/lib/services/flow-attachment.service.ts

Key Features:

Step 2: Create FlowAttachmentPanel Component

File: libs/editor-ui/src/lib/components/flow-attachment/flow-attachment-panel.component.ts

Features:

Step 3: Integrate into Editor

File: libs/editor-ui/src/lib/components/editor-ui/editor-ui.component.ts

Changes:

Step 4: Flow Execution Engine

Coordinate with Singularity to execute flows:

// When flow is triggered
const result = await flowExecutionService.execute(flowId, {
  pageId: currentPageId,
  widgetId: triggerWidgetId,
  eventData: eventData,
  pageContext: pageContext
});

// Update widgets with flow output
await updateWidgetsFromFlowOutput(result);

✅ Acceptance Criteria

Flow Attachment

Flow Triggers

Flow Execution

UI/UX

Data Integration

🧪 Testing Plan

Unit Tests

describe('FlowAttachmentService', () => {
  it('should attach flow to page', async () => {
    await service.attachFlow('page-1', 'flow-1');
    expect(service.getFlowsForPage('page-1')().length).toBe(1);
  });
  
  it('should detach flow from page', async () => {
    await service.detachFlow('page-1', 'flow-1');
    expect(service.getFlowsForPage('page-1')().length).toBe(0);
  });
});

Integration Tests

  1. Attach flow → verify in storage
  2. Refresh page → verify flows persist
  3. Execute flow → verify output
  4. Detach flow → verify removed

Manual Testing

  1. Open Editor
  2. Create a page
  3. Open Flow Attachment Panel
  4. Attach a flow
  5. Configure trigger
  6. Test execution
  7. Verify output

📊 Progress Tracking

Created Files

Modified Files

Overall Progress: 0%

🐛 Known Issues & Blockers

None yet - just starting implementation

📝 Notes & Learnings

Last Updated: October 28, 2025 - Starting implementation
Next Checkpoint: FlowAttachmentService implementation complete