LOGIC BUILDER ENHANCEMENT PLAN

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

Logic Builder Enhancement Plan

Status: 📋 PLANNED - Ready for Implementation
Date: October 23, 2025
Goal: Make Logic Builder easier to use, more modern, and production-ready

✅ Recent Fixes

1. Test Inputs Now Working

Problem: Test inputs (a=4, b=2) were not reaching the Calculate block.
Fix:

Execution engine now loads test inputs from storage
Context variables pre-populated with test inputs
getNumericValue() enhanced to automatically fall back to context variables
Proper logging for debugging

Result: Calculate block now correctly computes 4 + 2 = 6 instead of 0 + 0 = 0 ✅

🎯 Enhancement Categories

1. Block Configuration & Persistence (CRITICAL)

2. User Experience Improvements

3. Advanced Block Features

4. Export/Import/Sharing (JSON)

5. Visual Enhancements

6. Debugging & Testing Tools

1. Block Configuration & Persistence (CRITICAL)

🔴 Issue: Block Inputs Not Configurable

Currently, blocks like "Calculate" have hardcoded input values (0) instead of configurable inputs.

Solution: Enhanced Block Configuration Model

interface LogicBlock {
  id: string;
  name: string;
  type: BlockType;
  category: string;
  
  // ✅ NEW: Comprehensive configuration
  config: {
    // Input configuration
    inputs: {
      [inputName: string]: {
        type: 'variable' | 'constant' | 'connection';
        value?: any;  // For constants
        variableName?: string;  // For variable references
        connectionId?: string;  // For port connections
        defaultValue?: any;
      };
    };
    
    // Output configuration
    outputs: {
      [outputName: string]: {
        variableName?: string;  // Where to store result
      };
    };
    
    // Block-specific settings
    settings: {
      operation?: string;  // For Calculate: 'add', 'subtract', etc.
      [key: string]: any;
    };
    
    // UI/Visual settings
    ui: {
      color?: string;
      icon?: string;
      collapsed?: boolean;
    };
  };
  
  // Existing fields
  position?: { x: number; y: number };
  metadata?: any;
}

Implementation Steps

Add Configuration Panel to Blocks
- Double-click block → Opens config modal
- Configure inputs: Choose between:
  - Variable: $a (reads from context)
  - Constant: 5 (hardcoded value)
  - Connection: From another block's output port
- Configure operation (for Calculate: add/subtract/multiply/etc.)
- Save configuration to block.config
Update Execution Engine
- Read block.config.inputs to determine input sources
- Apply configuration during execution
- Store outputs according to block.config.outputs
Persist Configuration
- All configuration stored in LogicBlock JSON
- Survives save/load/export/import
- Shareable between users

2. User Experience Improvements

A. Block Templates with Pre-configured Blocks

Current: All blocks start with default/empty configuration
Proposed: Template library with ready-to-use configured blocks

Examples

Math Templates:

"Add Two Variables" - pre-configured with $a + $b
"Multiply by 2" - pre-configured with $x * 2
"Calculate Percentage" - pre-configured with ($value / $total) * 100

String Templates:

"Full Name Formatter" - $firstName + " " + $lastName
"Email Generator" - $username + "@" + $domain

Logic Templates:

"Age Verification" - if ($age >= 18)
"Price Calculator" - $price * (1 + $taxRate)

Benefits

Faster workflow (drag & drop pre-configured blocks)
Learn by example
Best practices built-in

B. Smart Variable Suggestions

Current: User must manually type variable names
Proposed: Auto-suggest available variables

Features

Autocomplete dropdown showing all variables in context
Show variable type and last value
Recent/frequently used variables at top
Visual indicator for undefined variables

// When configuring input "a":
Available Variables:
  ✅ a (number) = 4
  ✅ b (number) = 2
  ✅ username (string) = "john"
  ⚠️ total (undefined)

C. Block Search & Filtering

Current: Scroll through categories
Proposed: Powerful search

Features

Quick Search: Type to filter blocks
- Search by name: "calculate"
- Search by category: "math"
- Search by operation: "add", "subtract"
- Search by use case: "price", "email", "age"
Recent Blocks: Show last 5 used blocks at top
Favorites: Star frequently used blocks
Smart Recommendations:
- "Users who added 'Calculate' also added 'Display Result'"
- "Complete your flow: Add 'Error Handler'"

D. Inline Quick Config

Current: Must open config modal for everything
Proposed: Quick actions on block

┌─────────────────────────────┐
│  Calculate                  │
│  [+] ↕ [×] [÷] [%] [^]     │ ← Quick operation selector
│                             │
│  ⚡ a: [   4  ] ⚡           │ ← Inline input editors
│  ⚡ b: [   2  ] ⚡           │
│                             │
│  ➔ result = 6               │ ← Live preview
└─────────────────────────────┘

3. Advanced Block Features

A. Multi-Step Blocks (Composite Blocks)

Concept: Package multiple blocks into a single reusable unit

┌────────────────────────────┐
│  Calculate Total Price      │
│  [Composite Block]          │
│                             │
│  Internal Flow:             │
│  1. Multiply (price × qty)  │
│  2. Calculate Tax           │
│  3. Add Shipping            │
│  4. Apply Discount          │
│                             │
│  Input: price, qty          │
│  Output: totalPrice         │
└────────────────────────────┘

Benefits

Reusability
Encapsulation
Cleaner flows
Shareable components

B. Conditional Execution

Current: All blocks execute sequentially
Proposed: Conditional branches

interface LogicBlock {
  config: {
    // NEW: Execution conditions
    executionCondition?: {
      type: 'always' | 'conditional';
      condition?: string;  // "$age >= 18"
      skipIfFalse?: boolean;
      alternativeBlockId?: string;  // Execute different block if false
    };
  };
}

UI

┌─────────────────────────────┐
│  Verify Age                 │
│  🔀 if ($age >= 18)         │ ← Conditional indicator
│                             │
│  ✅ → Adult Path            │
│  ❌ → Minor Path            │
└─────────────────────────────┘

C. Loop Blocks

Current: No iteration support
Proposed: Loop over arrays/ranges

┌─────────────────────────────┐
│  🔁 For Each Product        │
│                             │
│  Array: $products           │
│  Item: $product             │
│  Index: $i                  │
│                             │
│  ➔ Calculate Price          │
│  ➔ Add to Cart              │
└─────────────────────────────┘

D. Async/Await Blocks

Current: All operations synchronous
Proposed: Real async operations

┌─────────────────────────────┐
│  ⏳ Fetch User Data         │
│  [Async Block]              │
│                             │
│  URL: /api/users/$userId    │
│  Method: GET                │
│                             │
│  ✅ Success → $userData     │
│  ❌ Error → $error          │
└─────────────────────────────┘

4. Export/Import/Sharing (JSON)

Current State

Flows are stored in local storage as JSON ✅
But not easy to share or export.

Enhancement: Complete Export/Import System

A. Export Flow as JSON

interface ExportedFlow {
  version: '1.0.0';
  flowId: string;
  flowName: string;
  description: string;
  author: string;
  created: string;
  modified: string;
  
  // Complete flow data
  blocks: LogicBlock[];
  connections: LogicConnection[];
  
  // Metadata for import
  requiredVariables: string[];  // Variables this flow expects
  outputVariables: string[];    // Variables this flow produces
  dependencies: string[];       // External dependencies (if any)
  
  // Visual state
  canvasState: {
    zoom: number;
    panX: number;
    panY: number;
  };
}

B. Export Options

Export to File (JSON)

// ecommerce-order-flow.json
{
  "version": "1.0.0",
  "flowName": "E-commerce Order Processing",
  "blocks": [...]
}

Export to Clipboard (Share URL)

https://gograb.space/singularity/import?flow=eyJ2ZXJzaW9u...

Export to Library (Save as Template)
- Save to "My Templates"
- Share with team
- Publish to community (future)

C. Import Features

Import from File
- Drag & drop .json file
- Validates flow structure
- Resolves naming conflicts
- Preserves all configurations
Import from URL
- Paste share link
- Preview before import
- Choose import location
Merge Options
- Replace: Replace current flow
- Merge: Add to current canvas
- New Flow: Create new flow

5. Visual Enhancements

A. Block Themes & Colors

Current: All blocks look similar
Proposed: Color-coded by category

🟦 Math Blocks     → Blue
🟩 String Blocks   → Green
🟨 Logic Blocks    → Yellow
🟧 Storage Blocks  → Orange
🟪 API Blocks      → Purple
🟥 Error Blocks    → Red

Custom Colors

Right-click block → "Change Color"
Color picker
Saved in block.config.ui.color

B. Connection Styles

Current: Single line style
Proposed: Multiple connection types

─────────  Normal (data flow)
═══════   Strong (primary path)
┄┄┄┄┄┄┄   Conditional (if/else)
─ ─ ─ ─   Error handling
➜➜➜➜➜➜➜   Loop iteration

C. Minimap

Current: Hard to navigate large flows
Proposed: Minimap in corner

┌────────────────────────────────┐
│  Logic Builder                 │
│                                │
│  [Large Canvas]                │
│                                │
│           ┌──────────┐         │
│           │ [Minimap]│ ← Here │
│           │   .  .   │         │
│           │  .    .  │         │
│           └──────────┘         │
└────────────────────────────────┘

D. Block Execution Visualization

Current: No visual feedback during execution
Proposed: Animated execution flow

1. Block turns yellow when executing
2. Connection animates (flowing dots)
3. Block turns green on success / red on error
4. Result badge shows output value

6. Debugging & Testing Tools

A. Enhanced Flow Tester

Current: Basic input/output testing ✅
Enhancements:

Step-by-Step Execution

[▶ Play] [⏸ Pause] [⏭ Step] [⏹ Stop]

Current Block: Calculate
Variables: { a: 4, b: 2 }
Output: 6

Breakpoints
- Click block gutter → Set breakpoint
- Execution pauses at breakpoint
- Inspect variables at that point

Variable Watch

Watch List:
✅ a = 4
✅ b = 2
✅ result = 6
⚠️ total = undefined

Execution History

1. Calculate → 2ms → Success → result=6
2. Store Data → 5ms → Success
3. Send Email → 150ms → Success

B. Flow Validation

Proposed: Validate flow before execution

Checks

❌ Disconnected blocks (no input/output)
❌ Undefined variables
❌ Missing required inputs
❌ Circular dependencies
⚠️ Dead code (unreachable blocks)
⚠️ Unused variables

UI

Flow Validation Results:
  ❌ 2 errors
  ⚠️ 3 warnings
  
  Error: Block "Calculate" missing input "b"
  Error: Variable "$total" undefined
  
  Warning: Block "Log" is not connected

C. Performance Profiler

Proposed: Analyze flow performance

Performance Report:
  Total Time: 157ms
  
  Slowest Blocks:
  1. Send Email     150ms  (95.5%)
  2. Store Data      5ms   (3.2%)
  3. Calculate       2ms   (1.3%)
  
  Recommendations:
  - Consider async execution for "Send Email"
  - Cache "Store Data" results

7. Smart Features (AI-Powered - Phase 2)

A. AI Block Configuration

User: "I want to add two numbers"
AI: Creates Calculate block pre-configured with:

Operation: add
Inputs: a, b
Output: result

B. Flow Suggestions

AI Analyzes: Current flow with Calculate → Store Data
AI Suggests:

"Add error handling"
"Add logging block"
"Validate inputs before calculation"

C. Natural Language to Flow

User Types: "Get user by ID, calculate age, send birthday email if age is 21"

AI Generates:

1. [API Call] Get User → $user
2. [Calculate] Age from birthdate → $age
3. [Condition] if $age === 21
4. [Email] Send birthday email

🚀 Implementation Priority

Phase 1: Foundation (THIS SPRINT) ✅

Fix test inputs (DONE)
Block configuration persistence (IN PROGRESS)
Basic export/import JSON
Inline block configuration UI

Phase 2: Enhanced UX

Block templates library
Smart variable suggestions
Quick search & filters
Connection type indicators

Phase 3: Advanced Features

Composite blocks (multi-step)
Conditional execution
Loop blocks
Async operations

Phase 4: Testing & Debugging

Step-by-step debugger
Breakpoints
Flow validation
Performance profiler

Phase 5: AI Integration

AI-assisted block config
Flow suggestions
Natural language to flow

📊 Technical Specifications

Storage Structure

// Complete flow stored in GgStorage
{
  "flow_1234567890": {
    "id": "flow_1234567890",
    "name": "My Flow",
    "version": "1.0.0",
    "blocks": [
      {
        "id": "block_001",
        "name": "Calculate",
        "type": "function",
        "category": "math",
        "config": {
          "inputs": {
            "a": { "type": "variable", "variableName": "a" },
            "b": { "type": "constant", "value": 5 }
          },
          "outputs": {
            "result": { "variableName": "total" }
          },
          "settings": {
            "operation": "add"
          },
          "ui": {
            "color": "#3B82F6",
            "collapsed": false
          }
        },
        "position": { "x": 100, "y": 200 }
      }
    ],
    "connections": [
      {
        "id": "conn_001",
        "sourceBlockId": "block_001",
        "sourcePortId": "output",
        "targetBlockId": "block_002",
        "targetPortId": "input"
      }
    ],
    "metadata": {
      "created": "2025-10-23T...",
      "modified": "2025-10-23T...",
      "author": "demo-user",
      "description": "Calculate and store total",
      "tags": ["math", "calculation"]
    }
  }
}

✅ Success Metrics

User Experience

⏱️ Time to create flow: < 2 minutes
🎯 First-time success rate: > 80%
😊 User satisfaction: > 4.5/5

Technical

💾 All data persists correctly
📤 Export/import success rate: 100%
🚀 Execution time: < 50ms for simple flows
🐛 Zero data loss on refresh

Functionality

🧪 Test inputs work correctly ✅
🔧 Blocks are configurable
🔗 Connections persist
📋 Flows are shareable as JSON

🎯 Next Steps

Implement Block Configuration Modal
- Design UI mockup
- Create component
- Wire up to block.config
Add Export/Import Buttons
- "Export Flow" button → Download JSON
- "Import Flow" button → Upload JSON
- Validate on import
Create Template Library
- Define 10 useful templates
- Add "Templates" sidebar
- Drag & drop to canvas
Enhanced Flow Tester
- Add step-by-step mode
- Show variable inspector
- Add execution history

Logic Builder Enhancement Plan

✅ Recent Fixes

1. Test Inputs Now Working

🎯 Enhancement Categories

1. Block Configuration & Persistence (CRITICAL)

2. User Experience Improvements

3. Advanced Block Features

4. Export/Import/Sharing (JSON)

5. Visual Enhancements

6. Debugging & Testing Tools

1. Block Configuration & Persistence (CRITICAL)

🔴 Issue: Block Inputs Not Configurable

Solution: Enhanced Block Configuration Model

Implementation Steps

2. User Experience Improvements

A. Block Templates with Pre-configured Blocks

Examples

Benefits

B. Smart Variable Suggestions

Features

C. Block Search & Filtering

Features

D. Inline Quick Config

3. Advanced Block Features

A. Multi-Step Blocks (Composite Blocks)

Benefits

B. Conditional Execution

UI

C. Loop Blocks

D. Async/Await Blocks

4. Export/Import/Sharing (JSON)

Current State

Enhancement: Complete Export/Import System

A. Export Flow as JSON

B. Export Options

C. Import Features

5. Visual Enhancements

A. Block Themes & Colors

Custom Colors

B. Connection Styles

C. Minimap

D. Block Execution Visualization

6. Debugging & Testing Tools

A. Enhanced Flow Tester

B. Flow Validation

Checks

UI

C. Performance Profiler

7. Smart Features (AI-Powered - Phase 2)

A. AI Block Configuration

B. Flow Suggestions

C. Natural Language to Flow

🚀 Implementation Priority

Phase 1: Foundation (THIS SPRINT) ✅

Phase 2: Enhanced UX

Phase 3: Advanced Features

Phase 4: Testing & Debugging

Phase 5: AI Integration

📊 Technical Specifications

Storage Structure

✅ Success Metrics

User Experience

Technical

Functionality

🎯 Next Steps

📚 Resources