@foresthubai/workflow-builder 0.4.4 → 0.4.5

package/src/BuilderLayout.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import type { FunctionDeclaration } from "@foresthubai/workflow-core/function";
 import type { NodeDefinition } from "@foresthubai/workflow-core/node";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -16,7 +20,7 @@ import { DebugConsolePanel } from "./panels/DebugConsolePanel";
 import type { CanvasTab } from "./hooks/useCanvasTabs";
 import { getOrCreateCanvasStore, MAIN_CANVAS_ID } from "./stores/canvasStore";
 import { useEditorStore } from "./stores/editorStore";
-import { isReadOnly } from "./WorkflowBuilder";
+import { isReadOnly } from "./mode";
 
 /**
  * Chrome composer. Stable across canvas switches — only the {@link CanvasEditor}
@@ -196,69 +200,55 @@ export const BuilderLayout = ({
     [graph],
   );
 
-  // Debug mode: clicking a node sets the debug cursor.
-  // useEffect(() => {
-  //   if (!isDebugMode || selectedNodeIds.length !== 1) return;
-  //   const nodeId = selectedNodeIds[0];
-  //   const phase = useDebugStore.getState().phase;
-  //   if (phase.status === "idle") {
-  //     useDebugStore
-  //       .getState()
-  //       .setPhase({ status: "paused", sessionId: phase.sessionId, cursorNodeId: nodeId });
-  //   } else if (phase.status === "paused") {
-  //     useDebugStore.getState().setPhase({ ...phase, cursorNodeId: nodeId });
-  //   }
-  // }, [isDebugMode, selectedNodeIds]);
-
-  // Keyboard handlers — undo/redo/copy/paste/delete/escape.
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      const target = event.target as HTMLElement;
-      if (target?.tagName === "INPUT" || target?.tagName === "TEXTAREA" || target?.isContentEditable) {
-        return;
-      }
-      if (readOnly) {
-        if (event.key === "Escape") clearSelection();
-        return;
-      }
-      if ((event.ctrlKey || event.metaKey) && event.key === "z" && !event.shiftKey) {
-        event.preventDefault();
-        if (canUndo()) {
-          clearSelection();
-          undo();
-        }
-        return;
-      }
-      if ((event.ctrlKey || event.metaKey) && (event.key === "y" || (event.key === "z" && event.shiftKey))) {
-        event.preventDefault();
-        if (canRedo()) {
-          clearSelection();
-          redo();
-        }
-        return;
+  // Keyboard handlers — undo/redo/copy/paste/delete/escape. Attached to the
+  // builder's root element (focusable via tabIndex), NOT to document: an
+  // embedded component must not steal Ctrl+Z/Delete from the host page. The
+  // handler fires only while focus is inside the builder, which clicking the
+  // canvas or any panel establishes.
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    const target = event.target as HTMLElement;
+    if (target?.tagName === "INPUT" || target?.tagName === "TEXTAREA" || target?.isContentEditable) {
+      return;
+    }
+    if (readOnly) {
+      if (event.key === "Escape") clearSelection();
+      return;
+    }
+    if ((event.ctrlKey || event.metaKey) && event.key === "z" && !event.shiftKey) {
+      event.preventDefault();
+      if (canUndo()) {
+        clearSelection();
+        undo();
       }
-      if ((event.ctrlKey || event.metaKey) && event.key === "c") {
-        if (selection.kind === "graph" && selection.nodeIds.length > 0) {
-          event.preventDefault();
-          graph.copySelection(selection.nodeIds);
-        }
-        return;
+      return;
+    }
+    if ((event.ctrlKey || event.metaKey) && (event.key === "y" || (event.key === "z" && event.shiftKey))) {
+      event.preventDefault();
+      if (canRedo()) {
+        clearSelection();
+        redo();
       }
-      if ((event.ctrlKey || event.metaKey) && event.key === "v") {
+      return;
+    }
+    if ((event.ctrlKey || event.metaKey) && event.key === "c") {
+      if (selection.kind === "graph" && selection.nodeIds.length > 0) {
         event.preventDefault();
-        handlePaste();
-        return;
-      }
-      if (event.key === "Delete" || event.key === "Backspace") {
-        deleteSelected();
-      }
-      if (event.key === "Escape") {
-        clearSelection();
+        graph.copySelection(selection.nodeIds);
       }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [canUndo, canRedo, undo, redo, clearSelection, deleteSelected, selection, graph, handlePaste, readOnly]);
+      return;
+    }
+    if ((event.ctrlKey || event.metaKey) && event.key === "v") {
+      event.preventDefault();
+      handlePaste();
+      return;
+    }
+    if (event.key === "Delete" || event.key === "Backspace") {
+      deleteSelected();
+    }
+    if (event.key === "Escape") {
+      clearSelection();
+    }
+  };
 
   const isFunctionCanvas = activeCanvasId !== MAIN_CANVAS_ID;
 
@@ -292,7 +282,10 @@ export const BuilderLayout = ({
   );
 
   return (
-    <div className="h-full bg-canvas-bg flex flex-col">
+    // tabIndex makes the root focusable so clicks anywhere inside land focus
+    // here (nearest focusable ancestor) and the scoped key handler receives
+    // shortcuts; outline-none suppresses the focus ring this would add.
+    <div className="h-full bg-canvas-bg flex flex-col outline-none" tabIndex={-1} onKeyDown={handleKeyDown}>
       <div className="flex-1 flex overflow-hidden">
         <BuilderSidebar
           canvasId={activeCanvasId}

package/src/Canvas.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import {
   applyEdgeChanges,
   applyNodeChanges,
@@ -24,7 +28,7 @@ import { isValidConnection as validateConnection } from "./utils/connectionRules
 import { getOrCreateCanvasStore } from "./stores/canvasStore";
 import { useEditorStore } from "./stores/editorStore";
 import { nodeTypes, edgeTypes } from "./graph/reactFlowRegistry";
-import { isReadOnly } from "./WorkflowBuilder";
+import { isReadOnly } from "./mode";
 
 interface CanvasProps {
   canvasId: string;
@@ -55,10 +59,15 @@ const CanvasArea = ({
   const { screenToFlowPosition, getViewport, fitView } = useReactFlow();
   const nodesInitialized = useNodesInitialized();
 
+  // Measure THIS canvas's container, never document.querySelector(".react-flow"):
+  // that grabs the first match on the page and breaks with two mounted builders
+  // or a host app that uses React Flow itself.
+  const containerRef = useRef<HTMLDivElement>(null);
+
   // Expose viewport center calculation to parent via ref so new nodes can be dropped there.
   useEffect(() => {
     viewportCenterRef.current = () => {
-      const container = document.querySelector(".react-flow");
+      const container = containerRef.current;
       if (!container) return { x: 250, y: 100 };
       const { width, height } = container.getBoundingClientRect();
       const { x, y, zoom } = getViewport();
@@ -190,7 +199,7 @@ const CanvasArea = ({
     //  - display:none removes layout boxes, so nodes never measure and the fit can't compute.
     // opacity applies to the whole subtree as a group (children can't override it) yet keeps
     // layout intact, so measurement/fitView work while it's invisible.
-    <div className="w-full h-full" style={{ opacity: ready ? 1 : 0 }}>
+    <div ref={containerRef} className="w-full h-full" style={{ opacity: ready ? 1 : 0 }}>
       <ReactFlow
         nodes={nodes}
         edges={edges}

package/src/CanvasEditor.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import type { Dispatch, MutableRefObject, SetStateAction } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { Connection, Node, OnSelectionChangeFunc } from "@xyflow/react";

package/src/CanvasTabsToolbar.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import { ScrollArea } from "./components/ui/scroll-area";
 import { cn } from "./cn";
 import { FunctionSquare, Workflow, X } from "lucide-react";

package/src/RightConfigPanel.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import { useCallback, useMemo, type ReactNode } from "react";
 import type { NodeData, NodeDefinition } from "@foresthubai/workflow-core/node";
 import type { EdgeData, EdgeType } from "@foresthubai/workflow-core/edge";

package/src/WorkflowBuilder.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import type { ApiWorkflow } from "@foresthubai/workflow-core/workflow";
 import type { ModelInfo } from "@foresthubai/workflow-core/model";
 import {
@@ -33,18 +37,7 @@ import {
 import { useDebugStore, type DebugSessionPhase } from "./stores/debugStore";
 import { useEditorStore } from "./stores/editorStore";
 
-/** BuilderMode steers the overall behavior of the workflow builder. */
-export type BuilderMode = { type: "edit" } | { type: "preview" } | { type: "debug" };
-
-/** True when canvas mutations should be blocked (preview or debug). */
-export function isReadOnly(mode: BuilderMode): boolean {
-  return mode.type !== "edit";
-}
-
-/** Type guard for preview mode. */
-export function isPreview(mode: BuilderMode): boolean {
-  return mode.type === "preview";
-}
+import type { BuilderMode } from "./mode";
 
 // ============================================================================
 // Public contract
@@ -74,7 +67,12 @@ export interface WorkflowBuilderProps {
   onDebugStep?: (nodeId?: string) => void;
 
   // ── Lifecycle events ──
-  /** Fires after any domain-state mutation. Pull current state via handle.exportWorkflow(). */
+  /**
+   * Fires after any USER domain-state mutation. Pull current state via
+   * handle.exportWorkflow(). Programmatic loads (handle.loadWorkflow /
+   * handle.clear) do NOT fire this — hosts can reset their dirty flag right
+   * after those calls without guarding against echoes.
+   */
   onChange?: () => void;
   /**
    * Undo/redo availability for the ACTIVE canvas changed — on history mutation,
@@ -239,6 +237,13 @@ export const WorkflowBuilder = forwardRef<WorkflowBuilderHandle, WorkflowBuilder
     onChangeRef.current = onChange;
     onHistoryChangeRef.current = onHistoryChange;
 
+    // onChange means "the USER changed the document". Programmatic loads
+    // (handle.loadWorkflow / handle.clear) mutate the same stores, so their
+    // subscription callbacks — which zustand runs synchronously inside the
+    // store writes — are muted while this flag is up. Without it every host
+    // sees phantom onChange events on load and has to guard its dirty flag.
+    const suppressChangeRef = useRef(false);
+
     // onChange fires on any domain change. For canvas content we watch the
     // history middleware's `mutationCount`, which bumps on checkpoints AND
     // undo/redo but never on selection/drag (those go through setNodes without a
@@ -256,8 +261,8 @@ export const WorkflowBuilder = forwardRef<WorkflowBuilderHandle, WorkflowBuilder
         let prev = store.getState().mutationCount;
         const unsub = store.subscribe((state) => {
           if (state.mutationCount !== prev) {
-            prev = state.mutationCount;
-            onChangeRef.current?.();
+            prev = state.mutationCount; // always track, even when muted
+            if (!suppressChangeRef.current) onChangeRef.current?.();
           }
         });
         subs.push(unsub);
@@ -285,8 +290,8 @@ export const WorkflowBuilder = forwardRef<WorkflowBuilderHandle, WorkflowBuilder
       let prevEditorCount = useEditorStore.getState().mutationCount;
       const unsubEditor = useEditorStore.subscribe((state) => {
         if (state.mutationCount !== prevEditorCount) {
-          prevEditorCount = state.mutationCount;
-          onChangeRef.current?.();
+          prevEditorCount = state.mutationCount; // always track, even when muted
+          if (!suppressChangeRef.current) onChangeRef.current?.();
         }
       });
       subs.push(unsubEditor);
@@ -347,14 +352,24 @@ export const WorkflowBuilder = forwardRef<WorkflowBuilderHandle, WorkflowBuilder
       ref,
       (): WorkflowBuilderHandle => ({
         loadWorkflow: (workflow) => {
+          suppressChangeRef.current = true;
           try {
             importProject(workflow);
           } catch (e) {
             onError?.(e instanceof Error ? e : new Error(String(e)));
+          } finally {
+            suppressChangeRef.current = false;
           }
         },
         exportWorkflow: () => exportProject(),
-        clear: () => clearProject(),
+        clear: () => {
+          suppressChangeRef.current = true;
+          try {
+            clearProject();
+          } finally {
+            suppressChangeRef.current = false;
+          }
+        },
         setMode: (mode) => useEditorStore.getState().setBuilderMode(mode),
         getMode: () => useEditorStore.getState().builderMode,
         validate: runValidate,

package/src/cn.ts

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 

package/src/components/ui/add-button.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react";
 import { Plus, type LucideIcon } from "lucide-react";
 import { Button, type ButtonProps } from "./button";

package/src/components/ui/alert-dialog.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
 

package/src/components/ui/alert.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 

package/src/components/ui/badge.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 

package/src/components/ui/button.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"

package/src/components/ui/card.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react"
 
 import { cn } from "../../cn"

package/src/components/ui/checkbox.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { Check } from "lucide-react"

package/src/components/ui/collapsible.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 
 const Collapsible = CollapsiblePrimitive.Root

package/src/components/ui/command.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react"
 import { type DialogProps } from "@radix-ui/react-dialog"
 import { Command as CommandPrimitive } from "cmdk"

package/src/components/ui/delete-button.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react";
 import { Trash2 } from "lucide-react";
 import { Button, type ButtonProps } from "./button";

package/src/components/ui/dialog.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { X } from "lucide-react"

package/src/components/ui/dropdown-menu.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import { Check, ChevronRight, Circle } from "lucide-react"

package/src/components/ui/input.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 

package/src/components/ui/label.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { cva, type VariantProps } from "class-variance-authority"

package/src/components/ui/readonly-banner.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import { useTranslation } from "react-i18next";
 
 /**

package/src/components/ui/resizable.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import { GripVertical } from "lucide-react"
 import * as ResizablePrimitive from "react-resizable-panels"
 

package/src/components/ui/scroll-area.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 

package/src/components/ui/select.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { Check, ChevronDown, ChevronUp } from "lucide-react"

package/src/components/ui/separator.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react"
 import * as SeparatorPrimitive from "@radix-ui/react-separator"
 

package/src/components/ui/switch.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react"
 import * as SwitchPrimitives from "@radix-ui/react-switch"
 

package/src/components/ui/textarea.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 

package/src/components/ui/toast.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react"
 import * as ToastPrimitives from "@radix-ui/react-toast"
 import { cva, type VariantProps } from "class-variance-authority"

package/src/components/ui/toaster.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import { useToast } from "../../hooks/use-toast"
 import {
   Toast,

package/src/components/ui/toggle-group.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react"
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
 import { type VariantProps } from "class-variance-authority"

package/src/components/ui/toggle.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react"
 import * as TogglePrimitive from "@radix-ui/react-toggle"
 import { cva, type VariantProps } from "class-variance-authority"

package/src/components/ui/tooltip.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 

package/src/dialogs/NodePickerDialog.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { NodeDefinition, NodeCategory } from "@foresthubai/workflow-core/node";

package/src/dialogs/ValidationDialog.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { AlertCircle, AlertTriangle, ChevronDown } from "lucide-react";

package/src/graph/BaseNode.tsx

@@ -1,3 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
 import { Badge } from "../components/ui/badge";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip";
 import {
@@ -16,7 +20,7 @@ import { getOrCreateCanvasStore } from "../stores/canvasStore";
 import { useDebugStore } from "../stores/debugStore";
 import { useDiagnosticsStore } from "../stores/diagnosticsStore";
 import { useEditorStore } from "../stores/editorStore";
-import { isReadOnly } from "../WorkflowBuilder";
+import { isReadOnly } from "../mode";
 import { categoryIcons } from "../utils/categoryConstants";
 import { computeNodeDiagnostics } from "@foresthubai/workflow-core/diagnostics";
 import {
@@ -63,10 +67,12 @@ export const BaseNode = memo(
     // Get active canvas ID with imperative access (no subscription), since it doesn't change for a node
     const activeCanvasId = useEditorStore.getState().activeCanvasId;
 
-    // Get necessary canvas store data
+    // Get necessary canvas store data.
+    // BaseNode must NEVER subscribe to s.nodes: dragging replaces the nodes array
+    // every frame, so a nodes subscription re-renders all N nodes per frame (O(N²)).
+    // Subscribing to s.edges is fine — edges keep their identity during a drag.
     const canvasStore = getOrCreateCanvasStore(activeCanvasId);
     const edges = canvasStore((s) => s.edges);
-    const nodes = canvasStore((s) => s.nodes);
     const channels = useEditorStore((s) => s.channels);
     const memory = useEditorStore((s) => s.memory);
     const models = useEditorStore((s) => s.models);
@@ -103,7 +109,7 @@ export const BaseNode = memo(
     }, [availableModels, models]);
 
     // Get port definitions using centralized dispatcher
-    const portDefinitions = getPorts(nodeData);
+    const portDefinitions = useMemo(() => getPorts(nodeData), [nodeData]);
 
     // Separate ports by type for positioning
     const { executionInputs, toolInputs, executionOutputs, toolOutputs } = useMemo(() => {
@@ -508,7 +514,7 @@ export const BaseNode = memo(
 
         {/* Execution output handles (right) — disabled when tool input is connected */}
         {executionOutputs.map((port, index) => {
-          const canAccept = !isPreview && !usedAsToolInput && canPortAcceptEdge(id, port.id, nodes, edges);
+          const canAccept = !isPreview && !usedAsToolInput && canPortAcceptEdge(nodeData, port.id, edges);
           return (
             <PortHandle
               key={port.id}
@@ -533,7 +539,7 @@ export const BaseNode = memo(
 
         {/* Tool output handles (bottom) */}
         {toolOutputs.map((port, index) => {
-          const canAccept = !isPreview && canPortAcceptEdge(id, port.id, nodes, edges);
+          const canAccept = !isPreview && canPortAcceptEdge(nodeData, port.id, edges);
           return (
             <PortHandle
               key={port.id}