diff --git a/packages/noodl-editor/src/editor/src/views/nodegrapheditor.ts b/packages/noodl-editor/src/editor/src/views/nodegrapheditor.ts
index d93e13d..e55cce2 100644
--- a/packages/noodl-editor/src/editor/src/views/nodegrapheditor.ts
+++ b/packages/noodl-editor/src/editor/src/views/nodegrapheditor.ts
@@ -300,6 +300,17 @@ export class NodeGraphEditor extends View {
       this
     );
 
+    // Listen for Logic Builder tab open requests
+    EventDispatcher.instance.on(
+      'LogicBuilder.OpenTab',
+      (args: { nodeId: string; nodeName: string; workspace: string }) => {
+        console.log('[NodeGraphEditor] Opening Logic Builder tab for node:', args.nodeId);
+        // The CanvasTabs context will handle the actual tab opening via EventDispatcher
+        // This is just logged for debugging - the actual implementation happens in Phase C Step 6
+      },
+      this
+    );
+
     if (import.meta.webpackHot) {
       import.meta.webpackHot.accept('./createnewnodepanel');
     }
@@ -414,6 +425,11 @@ export class NodeGraphEditor extends View {
       this.highlightOverlayRoot = null;
     }
 
+    if (this.canvasTabsRoot) {
+      this.canvasTabsRoot.unmount();
+      this.canvasTabsRoot = null;
+    }
+
     SidebarModel.instance.off(this);
 
     this.reset();
@@ -884,12 +900,63 @@ export class NodeGraphEditor extends View {
       this.renderHighlightOverlay();
     }, 1);
 
+    // Render the canvas tabs
+    setTimeout(() => {
+      this.renderCanvasTabs();
+    }, 1);
+
     this.relayout();
     this.repaint();
 
     return this.el;
   }
 
+  /**
+   * Render the CanvasTabs React component
+   */
+  renderCanvasTabs() {
+    const tabsElement = this.el.find('#canvas-tabs-root').get(0);
+    if (!tabsElement) {
+      console.warn('Canvas tabs root not found in DOM');
+      return;
+    }
+
+    // Create React root if it doesn't exist
+    if (!this.canvasTabsRoot) {
+      this.canvasTabsRoot = createRoot(tabsElement);
+    }
+
+    // Render the tabs with provider
+    this.canvasTabsRoot.render(
+      React.createElement(
+        CanvasTabsProvider,
+        null,
+        React.createElement(CanvasTabs, {
+          onWorkspaceChange: this.handleBlocklyWorkspaceChange.bind(this)
+        })
+      )
+    );
+  }
+
+  /**
+   * Handle workspace changes from Blockly editor
+   */
+  handleBlocklyWorkspaceChange(nodeId: string, workspace: string) {
+    console.log(`[NodeGraphEditor] Workspace changed for node ${nodeId}`);
+
+    const node = this.findNodeWithId(nodeId);
+    if (!node) {
+      console.warn(`[NodeGraphEditor] Node ${nodeId} not found`);
+      return;
+    }
+
+    // Save workspace to node model
+    node.model.setParameter('workspace', workspace);
+
+    // TODO: Generate code and update ports
+    // This will be implemented in Phase C Step 7
+  }
+
   /**
    * Get node bounds for the highlight overlay
    * Maps node IDs to their screen coordinates