🔧 Flow Composer - Drag & Drop Fix

Date: October 12, 2025
Status: ✅ FIXED
Severity: HIGH (Core Functionality)

🐛 The Problem

When dragging a flow from the library and dropping it onto the Flow Composer canvas, the app threw an error:

ERROR Error: Flow not found
    at FlowCompositionService.addNode (flow-composition.service.ts:174)

🔍 Root Cause

Storage System Mismatch (again!):

// ❌ FlowCompositionService.addNode() was loading from IndexedDB
const flows = await this.dbService.getLogicTrees().toPromise();
const flow = flows?.find(f => f.id === flowId);
// But flows are stored in storage-system, not IndexedDB!

Same issue we fixed earlier for Flow Composer loading - the composition service was querying the wrong storage system.

✅ The Fix

Changed FlowCompositionService to use storage-system instead of LogicBuilderDatabaseService:

1. Fixed addNode() Method

// ✅ AFTER: Get flow from storage-system
async addNode(compositionId: string, flowId: string, position: { x: number; y: number }) {
  const composition = await this.getComposition(compositionId);
  if (!composition) {
    throw new Error('Composition not found');
  }

  // ✅ Get flow details from storage-system (same as Logic Builder)
  const flow = await this.storage.get<any>(flowId);
  if (!flow) {
    console.error(`❌ Flow not found in storage: ${flowId}`);
    throw new Error(`Flow not found: ${flowId}`);
  }
  console.log(`✅ Found flow for node: ${flow.name} (${flow.blocks?.length || 0} blocks)`);

  // ... create flow node ...
}

2. Fixed exportComposition() Method

// ✅ AFTER: Get all referenced flows from storage-system
async exportComposition(id: string): Promise<string> {
  // ... get composition ...
  
  // ✅ Get all referenced flows from storage-system
  const flowIds = composition.flowNodes.map(n => n.flowId);
  const referencedFlows = [];
  
  for (const flowId of flowIds) {
    try {
      const flow = await this.storage.get<any>(flowId);
      if (flow) {
        referencedFlows.push(flow);
      }
    } catch (error) {
      console.warn(`⚠️ Could not load flow ${flowId} for export:`, error);
    }
  }

  // ... export data ...
}

3. Removed Unused Dependency

// ❌ REMOVED: Unused database service
import { LogicBuilderDatabaseService } from './logic-builder-database.service';

export class FlowCompositionService {
  private readonly dbService = inject(LogicBuilderDatabaseService); // REMOVED
}

🎉 What Works Now

Complete Drag & Drop Flow

1. Open Flow Composer ✅
2. See flows in sidebar → Shows all 19+ flows ✅
3. Drag a flow → Cursor shows drag preview ✅
4. Drop onto canvas → Flow node appears! ✅
5. Node shows flow details → Name, block count, complexity ✅
6. Can connect flows → Ready for flow composition ✅

🧪 How to Test

Test 1: Drag & Drop Single Flow

1. Open Flow Composer (/singularity/flow-composer)
2. See flows in left sidebar
3. Click and drag "paks Flow" (or any flow)
4. Drop onto canvas
5. ✅ Flow node appears with correct name and block count

Test 2: Add Multiple Flows

1. Continue from Test 1
2. Drag another flow onto canvas
3. Drop in a different position
4. ✅ Both flow nodes visible
5. ✅ Can select and move them

Test 3: Check Console Logs

When you drop a flow, you should see:

✅ Found flow for node: paks Flow (2 blocks)

📊 Impact

📁 Files Changed

File: libs/singularity-lib/src/lib/services/flow-composition.service.ts

Changes:

• Removed LogicBuilderDatabaseService import and dependency
• Changed addNode() to load flows from storage-system
• Changed exportComposition() to load flows from storage-system
• Added comprehensive error logging

🔗 Related Fixes Today

This is part of a series of storage system unification fixes:

1. ✅ Flow Composer Loading - Fixed to use storage-system
2. ✅ Flow Name Editing - Fixed signal binding
3. ✅ Flow Name Persistence - Added auto-save/load
4. ✅ Flow Composition Drag & Drop - Fixed to use storage-system (THIS FIX)

Pattern: All Singularity components now use storage-system consistently!

🎓 Architecture Lesson

Unified Storage Pattern

All Singularity features now follow the same storage pattern:

// ✅ CORRECT: Use StorageService from @storage-system
import { StorageService } from '@storage-system';

export class MyService {
  private readonly storage = inject(StorageService);
  
  async getFlow(id: string) {
    return await this.storage.get<LogicFlow>(id);
  }
}

// ❌ WRONG: Don't use LogicBuilderDatabaseService for flows
import { LogicBuilderDatabaseService } from './logic-builder-database.service';

export class MyService {
  private readonly dbService = inject(LogicBuilderDatabaseService);
  
  async getFlow(id: string) {
    const flows = await this.dbService.getLogicTrees().toPromise();
    return flows?.find(f => f.id === id);  // Wrong storage!
  }
}

Status: ✅ FIXED - READY TO USE

Drag & drop now works perfectly in the Flow Composer! 🎉