OpenNoodl/dev-docs/tasks/phase-3-editor-ux-overhaul/TASK-012-blockly-integration/PHASE-B1-COMPLETE.md

Phase B1 Complete: Logic Builder Node Registration

Status: ✅ Complete - Ready for Manual Testing

Date: 2026-01-11

---

What Was Accomplished

1. IODetector Utility

File: packages/noodl-editor/src/editor/src/utils/IODetector.ts

• Scans Blockly workspace JSON for Input/Output blocks
• Auto-detects inputs, outputs, signal inputs, and signal outputs
• Supports both explicit definitions and implicit usage detection
• Returns typed structure with port information

2. Logic Builder Runtime Node

File: packages/noodl-runtime/src/nodes/std-library/logic-builder.js

Features:

• Stores Blockly workspace as JSON parameter
• Dynamically creates ports based on detected I/O
• Executes generated JavaScript code
• Provides full Noodl API context (Variables, Objects, Arrays)
• Signal-triggered execution
• Error handling and reporting

Inputs:

• workspace - JSON string of Blockly workspace
• generatedCode - JavaScript generated from blocks
• Dynamic inputs detected from workspace

Outputs:

• error - Error message if execution fails
• Dynamic outputs detected from workspace
• Dynamic signal outputs

3. Node Registration

• Added to packages/noodl-runtime/noodl-runtime.js in Custom Code section
• Added to node picker under "Custom Code" category
• Configured with proper metadata (color: 'javascript', category: 'CustomCode')

---

Manual Testing Checkpoint

Test 1: Node Appears in Picker ✅ READY

Steps:

1. Run npm run dev to start the editor
2. Open any project
3. Click "Add Node" (or right-click canvas)
4. Navigate to Custom Code category
5. Look for "Logic Builder" node

Expected Result:

• Node appears in Custom Code section
• Node has purple color (javascript category)
• Node description: "Build logic visually with blocks"
• Search tags work: "blockly", "visual", "logic", "blocks", "nocode"

Test 2: Node Can Be Added to Canvas ✅ READY

Steps:

1. Add "Logic Builder" node to canvas
2. Check node appears with proper color/styling
3. Check property panel shows node parameters

Expected Result:

• Node renders on canvas
• Node has "workspace" parameter (string, allowEditOnly)
• Node has "generatedCode" parameter (string)
• Node inspector shows "Logic Builder" text

Test 3: Basic Functionality (Limited)

Note: Full functionality requires Phase C (tab system) to be usable.

Current State:

• Node can be added
• Parameters exist but aren't editable via UI yet
• No tab system for visual editing yet
• No dynamic ports yet (need workspace content)

---

What's Next: Phase C - Tab System Prototype

The next phase will add:

1. Canvas Tabs Component

   • Tab bar UI for switching views
   • Active tab state management
   • Tab close functionality

2. Blockly Integration in Tabs

   • "Edit Logic Blocks" button in property panel
   • Opens Logic Builder workspace in new tab
   • BlocklyWorkspace component renders in tab
   • Tab shows live Blockly editor

3. State Management

   • Context API for tab state
   • Persists workspace when switching tabs
   • Handles multiple Logic Builder nodes

Estimated Time: 2-3 hours

---

Files Changed (7 files)

Created:

• packages/noodl-editor/src/editor/src/utils/IODetector.ts
• packages/noodl-runtime/src/nodes/std-library/logic-builder.js

Modified:

• packages/noodl-runtime/noodl-runtime.js
• packages/noodl-runtime/src/nodelibraryexport.js
• packages/noodl-editor/package.json (added blockly dependency)

From Phase A:

• packages/noodl-editor/src/editor/src/views/BlocklyEditor/* (5 files)

---

Git Commits

5dc704d - feat(blockly): Phase B1 - Register Logic Builder node
554dd9f - feat(blockly): Phase A foundation - Blockly setup, custom blocks, and generators
df4ec44 - docs(blockly): Update CHANGELOG for Phase A completion

---

Known Limitations (To Be Addressed)

1. No Visual Editor Yet - Need tab system (Phase C)
2. No Dynamic Ports - Requires workspace parameter to be set
3. No Code Generation Hook - Need to wire Blockly → generatedCode
4. No Property Panel Integration - "Edit Logic Blocks" button doesn't exist yet
5. No Tests - Unit tests deferred to later phase

---

Developer Notes

IODetector Pattern

The IODetector scans block types:

• noodl_define_input / noodl_get_input → inputs
• noodl_define_output / noodl_set_output → outputs
• noodl_define_signal_input / noodl_on_signal → signal inputs
• noodl_send_signal / noodl_define_signal_output → signal outputs

Node Execution Pattern

The Logic Builder node follows the pattern:

1. Workspace JSON stored in parameter
2. On workspace change → detect I/O → update dynamic ports
3. Signal input triggers → generate code → execute in context
4. Outputs updated → downstream nodes receive values

Integration Points

For Phase C, we'll need to hook into:

• Property panel to add "Edit Logic Blocks" button
• Node graph editor to add tab system
• Potentially NodeGraphEditor component for tab UI

---

Questions for Manual Testing

When you test, please note:

1. Does the node appear in the correct category?
2. Is the node color/styling correct?
3. Can you add multiple instances?
4. Does the inspector show correct info?
5. Any console errors when adding the node?

Please provide feedback before we proceed to Phase C!

---

Next Step: Run npm run dev and verify the node appears in the picker.