@foresthubai/workflow-builder 0.3.0

package/src/graph/BaseNode.tsx

@@ -0,0 +1,557 @@
+import { Badge } from "../components/ui/badge";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip";
+import {
+  NodeBase,
+  NodeCategory,
+  NodeDefinition,
+  NodeData,
+  getArguments,
+  getPorts,
+} from "@foresthubai/workflow-core/node";
+import { NodeProps, Position } from "@xyflow/react";
+import { AlertCircle, AlertTriangle } from "lucide-react";
+import { memo, useCallback, useEffect, useMemo } from "react";
+import { useAvailableVariables } from "../hooks/useAvailableVariables";
+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 { categoryIcons } from "../utils/categoryConstants";
+import { computeNodeDiagnostics } from "@foresthubai/workflow-core/diagnostics";
+import {
+  parseExpression,
+  type ParseResult,
+  isExpression,
+  resolveExpression,
+  type ResolvedExpr,
+} from "@foresthubai/workflow-core/expression";
+import { isNodeUsedAsTool } from "@foresthubai/workflow-core/node";
+import { canPortAcceptEdge } from "../utils/connectionRules";
+import { PortHandle } from "./PortHandle";
+import { isParameterActive } from "@foresthubai/workflow-core/parameter";
+import { formatParamDisplay, displayValue } from "../utils/paramDisplay";
+
+// Node shape variants
+type NodeShape = "rectangle" | "tapered-right";
+
+export interface BaseNodeProps extends NodeProps {
+  nodeDefinition: NodeDefinition | undefined;
+  isStale?: boolean;
+  isDeleted?: boolean;
+}
+
+// Base Node component - handles all rendering logic
+export const BaseNode = memo(
+  ({ id, data, selected, nodeDefinition, isStale = false, isDeleted = false }: BaseNodeProps) => {
+    const nodeData = data as NodeData;
+    const isHighlighted = selected ?? false;
+    // Skip diagnostics when in read-only mode OR when rendered inside VersionPreviewCanvas
+    const isPreview = useEditorStore((s) => isReadOnly(s.builderMode)) || !!(data as Record<string, unknown>)?._preview;
+
+    // Debug cursor: true when this node is the current debug step target
+    const isDebugCursor = useDebugStore(
+      useCallback(
+        (s) => {
+          const p = s.phase;
+          return (p.status === "paused" || p.status === "stepping") && p.cursorNodeId === id;
+        },
+        [id],
+      ),
+    );
+
+    // 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
+    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);
+    const availableModels = useEditorStore((s) => s.availableModels);
+
+    // Get available variables for resolving expressions
+    const { lookup: availableVariables } = useAvailableVariables(activeCanvasId);
+
+    // Build channel ID → label lookup for formatParamDisplay
+    const channelLabels = useMemo(() => {
+      const labels: Record<string, string> = {};
+      for (const v of Object.values(channels)) labels[v.id] = v.label;
+      return labels;
+    }, [channels]);
+
+    // Build memory ID → label lookup for formatParamDisplay (memorySelect params)
+    const memoryLabels = useMemo(() => {
+      const labels: Record<string, string> = {};
+      for (const m of Object.values(memory)) labels[m.id] = m.label;
+      return labels;
+    }, [memory]);
+
+    // Build model ID → label lookup (catalog ∪ declared customs) + the catalog id
+    // set — used for inline display and modelSelect reference validation.
+    const { modelLabels, availableModelIds } = useMemo(() => {
+      const labels: Record<string, string> = {};
+      const ids = new Set<string>();
+      for (const m of availableModels) {
+        labels[m.id] = m.label;
+        ids.add(m.id);
+      }
+      for (const m of Object.values(models)) labels[m.id] = m.label;
+      return { modelLabels: labels, availableModelIds: ids };
+    }, [availableModels, models]);
+
+    // Get port definitions using centralized dispatcher
+    const portDefinitions = getPorts(nodeData);
+
+    // Separate ports by type for positioning
+    const { executionInputs, toolInputs, executionOutputs, toolOutputs } = useMemo(() => {
+      return {
+        executionInputs: portDefinitions.input.filter((p) => p.type === "control"),
+        toolInputs: portDefinitions.input.filter((p) => p.type === "tool"),
+        executionOutputs: portDefinitions.output.filter((p) => p.type === "control"),
+        toolOutputs: portDefinitions.output.filter((p) => p.type === "tool"),
+      };
+    }, [portDefinitions]);
+
+    // Mutual exclusion: tool input vs control ports.
+    // Tool OUTPUT is always allowed (not part of exclusion).
+    const usedAsToolInput = useMemo(() => {
+      return isNodeUsedAsTool(id, nodeData, edges);
+    }, [id, nodeData, edges]);
+
+    const parameters = getArguments(nodeData);
+
+    // Set of parameter IDs that should be hidden given current context
+    const hiddenParamIds = useMemo(() => {
+      const ids = new Set<string>();
+      for (const p of nodeDefinition?.parameters ?? []) {
+        if (!isParameterActive(p, parameters, usedAsToolInput)) ids.add(p.id);
+      }
+      return ids.size > 0 ? ids : null;
+    }, [usedAsToolInput, nodeDefinition, parameters]);
+
+    const category = nodeDefinition?.category;
+
+    // Compute diagnostics via extracted pure function
+    const diagnostics = useMemo(
+      () =>
+        computeNodeDiagnostics({
+          canvasId: activeCanvasId,
+          nodeId: id,
+          nodeData,
+          nodeDefinition,
+          availableVariables,
+          channels,
+          memory,
+          models,
+          availableModelIds,
+          edges,
+          isStale,
+          isDeleted,
+        }),
+      [
+        activeCanvasId,
+        id,
+        nodeData,
+        nodeDefinition,
+        availableVariables,
+        channels,
+        memory,
+        models,
+        availableModelIds,
+        edges,
+        isStale,
+        isDeleted,
+      ],
+    );
+
+    // Resolve expressions for display (separate from diagnostics)
+    const resolvedExpressions = useMemo(() => {
+      const resolved: Record<string, { expr: ResolvedExpr; parseRes: ParseResult }> = {};
+      const paramDefs = nodeDefinition?.parameters ?? [];
+      for (const param of paramDefs) {
+        if (hiddenParamIds?.has(param.id)) continue;
+        const value = parameters[param.id];
+        if (isExpression(value)) {
+          const expr = resolveExpression(value, availableVariables);
+          const parseRes = parseExpression(expr);
+          resolved[param.id] = { expr, parseRes };
+        }
+      }
+      return resolved;
+    }, [parameters, availableVariables, hiddenParamIds, nodeDefinition]);
+
+    // Derived booleans from diagnostics
+    const hasErrors = diagnostics.some((d) => d.severity === "error");
+    const hasWarnings = diagnostics.some((d) => d.severity === "warning");
+
+    // Write diagnostics to store (cleanup on unmount; validateAllCanvases handles full-project)
+    const setNodeDiagnostics = useDiagnosticsStore((s) => s.setNodeDiagnostics);
+    const clearNodeDiagnostics = useDiagnosticsStore((s) => s.clearNodeDiagnostics);
+    useEffect(() => {
+      if (isPreview) return;
+      setNodeDiagnostics(id, diagnostics);
+      return () => clearNodeDiagnostics(id);
+    }, [id, diagnostics, setNodeDiagnostics, clearNodeDiagnostics, isPreview]);
+
+    const usedInControlFlow = useMemo(() => {
+      return edges.some((e) => {
+        if (e.source === id) {
+          return executionOutputs.some((p) => p.id === e.sourceHandle);
+        }
+        if (e.target === id) {
+          return executionInputs.some((p) => p.id === e.targetHandle);
+        }
+        return false;
+      });
+    }, [edges, id, executionInputs, executionOutputs]);
+
+    const IconComponent = category ? categoryIcons[category] : null;
+
+    // Determine node shape based on category
+    const nodeShape: NodeShape = useMemo(() => {
+      if (category === "Trigger") return "tapered-right";
+      return "rectangle";
+    }, [category]);
+
+    // Get the color variable based on category
+    const nodeColor = useMemo(() => {
+      if (category === NodeCategory.Trigger) return "--node-trigger";
+      if (category === NodeCategory.Tool) return "--node-tool";
+      if (category === NodeCategory.AI) return "--node-agent";
+      if (category === NodeCategory.Input) return "--node-input";
+      if (category === NodeCategory.Output) return "--node-output";
+      if (category === NodeCategory.Logic) return "--node-logic";
+      if (category === NodeCategory.Data) return "--node-data";
+      if (category === NodeCategory.Function) return "--node-function";
+      return "--primary";
+    }, [category]);
+
+    // Determine if this node should have highlighted styling (Tool, Trigger, Agent)
+    const fancyBg = category === NodeCategory.Tool || category === NodeCategory.Trigger || category === NodeCategory.AI;
+
+    // Get parameters dynamically from node definition (must be before early return for hooks order)
+    // Filter out hidden params based on display conditions
+    const nodeParameters = useMemo(() => {
+      const params = nodeDefinition?.parameters ?? [];
+      if (!hiddenParamIds) return params;
+      return params.filter((p) => !hiddenParamIds.has(p.id));
+    }, [nodeDefinition, hiddenParamIds]);
+
+    // Count visible inline params for height calculation (show first 3 params always)
+    const visibleParamCount = useMemo(() => {
+      const shown = Math.min(nodeParameters.length, 3);
+      const hasOverflow = nodeParameters.length > 3 ? 1 : 0;
+      return shown + hasOverflow;
+    }, [nodeParameters]);
+
+    // Calculate dimensions
+    const maxExecutionPorts = Math.max(executionInputs.length, executionOutputs.length);
+    const nodeWidth = 200;
+    const taperWidth = 24;
+    const paramLineHeight = 16; // ~text-xs line + space-y-0.5 gap
+    const headerHeight = 50; // padding + emoji/badge row + margin
+    const minHeight = useMemo(() => {
+      const paramHeight = visibleParamCount * paramLineHeight;
+      const contentHeight = headerHeight + paramHeight;
+      if (nodeShape === "tapered-right") {
+        return Math.max(contentHeight, 60 + Math.max(maxExecutionPorts, 1) * 40);
+      }
+      return Math.max(contentHeight, 80 + maxExecutionPorts * 40);
+    }, [nodeShape, maxExecutionPorts, visibleParamCount]);
+
+    if (!nodeDefinition) {
+      return (
+        <div className="min-w-[200px] p-3 border border-destructive/50 bg-destructive/10 rounded-lg">
+          <div className="text-destructive text-sm">Unknown node: {nodeData.type}</div>
+        </div>
+      );
+    }
+
+    // Calculate vertical port positions for even distribution (left/right)
+    const getVerticalPortPosition = (index: number, total: number) => {
+      if (total === 1) return minHeight / 2;
+      const spacing = (minHeight - 40) / (total + 1);
+      return 20 + spacing * (index + 1);
+    };
+
+    // Calculate horizontal port positions for even distribution (top/bottom)
+    const getHorizontalPortPosition = (index: number, total: number) => {
+      if (total === 1) return nodeWidth / 2;
+      const spacing = (nodeWidth - 40) / (total + 1);
+      return 20 + spacing * (index + 1);
+    };
+
+    // Render SVG background shape
+    const renderShape = () => {
+      const gradientId = `node-gradient-${nodeData.id}`;
+      const strokeW = 2;
+
+      // Dark nodes (Tool, Trigger) use dark gradient, others use white/light background
+      const gradientStartColor = `hsl(var(--canvas-background))`;
+      const gradientEndColor = `color-mix(in srgb, hsl(var(${nodeColor})), hsl(var(--canvas-background)) 80%)`;
+      const lightFill = "hsl(var(--card))";
+
+      // Glow effect for highlighted state (our custom selection, not ReactFlow's)
+      // Debug cursor gets an orange pulsing glow (takes priority over selection glow)
+      const glowStyle = isDebugCursor
+        ? {
+            filter: `drop-shadow(0 0 14px hsl(var(--warning) / 0.7)) drop-shadow(0 0 24px hsl(var(--warning) / 0.5))`,
+            animation: "debug-cursor-pulse 1.5s ease-in-out infinite",
+          }
+        : isHighlighted
+          ? {
+              filter: `drop-shadow(0 0 12px hsl(var(--selection-glow) / 0.6)) drop-shadow(0 0 20px hsl(var(--selection-glow) / 0.4))`,
+            }
+          : {};
+
+      if (nodeShape === "tapered-right") {
+        const inset = strokeW / 2;
+        return (
+          <svg
+            className="absolute inset-0 z-0 transition-all duration-300 will-change-[filter]"
+            width={nodeWidth}
+            height={minHeight}
+            viewBox={`0 0 ${nodeWidth} ${minHeight}`}
+            preserveAspectRatio="none"
+            style={glowStyle}
+          >
+            <defs>
+              <linearGradient id={gradientId} x1="0%" y1="70%" x2="100%" y2="0%">
+                <stop offset="0%" stopColor={gradientStartColor} />
+                <stop offset="100%" stopColor={gradientEndColor} />
+              </linearGradient>
+            </defs>
+            {/* Tapered right edge shape - rightmost edge at nodeWidth */}
+            <path
+              d={`
+              M ${12 + inset} ${0 + inset}
+              L ${nodeWidth - taperWidth - inset} ${0 + inset}
+              L ${nodeWidth - inset} ${minHeight / 2}
+              L ${nodeWidth - taperWidth - inset} ${minHeight - inset}
+              L ${12 + inset} ${minHeight - inset}
+              Q ${0 + inset} ${minHeight - inset} ${0 + inset} ${minHeight - 12 - inset}
+              L ${0 + inset} ${12 + inset}
+              Q ${0 + inset} ${0 + inset} ${12 + inset} ${0 + inset}
+              Z
+            `}
+              fill={`url(#${gradientId})`}
+              stroke={
+                hasErrors
+                  ? "hsl(var(--destructive))"
+                  : fancyBg
+                    ? `hsl(var(${nodeColor})/0.5)`
+                    : "hsl(var(--edge-default))"
+              }
+              strokeWidth={strokeW}
+            />
+          </svg>
+        );
+      }
+
+      // Rectangle shape (default) - use light or dark based on category
+      return (
+        <svg
+          className="absolute inset-0 z-0 transition-all duration-300 will-change-[filter]"
+          width={nodeWidth}
+          height={minHeight}
+          viewBox={`0 0 ${nodeWidth} ${minHeight}`}
+          preserveAspectRatio="none"
+          style={glowStyle}
+        >
+          {fancyBg && (
+            <defs>
+              <linearGradient id={gradientId} x1="0%" y1="70%" x2="100%" y2="0%">
+                <stop offset="0%" stopColor={gradientStartColor} />
+                <stop offset="120%" stopColor={gradientEndColor} />
+              </linearGradient>
+            </defs>
+          )}
+          <rect
+            x={strokeW / 2}
+            y={strokeW / 2}
+            width={nodeWidth - strokeW}
+            height={minHeight - strokeW}
+            rx="10"
+            ry="10"
+            fill={fancyBg ? `url(#${gradientId})` : lightFill}
+            stroke={
+              hasErrors
+                ? "hsl(var(--destructive))"
+                : fancyBg
+                  ? `hsl(var(${nodeColor})/0.5)`
+                  : "hsl(var(--edge-default))"
+            }
+            strokeWidth={strokeW}
+          />
+        </svg>
+      );
+    };
+
+    return (
+      <div className="relative z-0" style={{ height: `${minHeight}px`, width: `${nodeWidth}px` }}>
+        {/* Tool input handles (top) — disabled when control ports are connected */}
+        {toolInputs.map((port, index) => (
+          <PortHandle
+            key={port.id}
+            id={port.id}
+            type="target"
+            position={Position.Top}
+            portType={port.type}
+            label={port.label}
+            disabled={usedInControlFlow}
+            style={{
+              left: `${getHorizontalPortPosition(index, toolInputs.length)}px`,
+            }}
+          />
+        ))}
+
+        {/* Execution input handles (left) — disabled when tool input is connected */}
+        {executionInputs.map((port, index) => (
+          <PortHandle
+            key={port.id}
+            id={port.id}
+            type="target"
+            position={Position.Left}
+            portType={port.type}
+            label={port.label}
+            disabled={usedAsToolInput}
+            style={{
+              top:
+                nodeShape === "tapered-right"
+                  ? `${minHeight / 2}px`
+                  : `${getVerticalPortPosition(index, executionInputs.length)}px`,
+            }}
+          />
+        ))}
+
+        {/* SVG Shape */}
+        {renderShape()}
+
+        {/* Error badge */}
+        {hasErrors && (
+          <Tooltip delayDuration={300}>
+            <TooltipTrigger asChild>
+              <div className="absolute -top-4 -left-4 z-30 cursor-help">
+                <AlertTriangle className="h-8 w-8 text-destructive fill-card" strokeWidth={2} />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="top" className="bg-destructive text-destructive-foreground text-xs px-2 py-1">
+              {diagnostics.find((d) => d.severity === "error")?.message ?? "This node has errors"}
+            </TooltipContent>
+          </Tooltip>
+        )}
+
+        {/* Warning badge (only when no errors) */}
+        {!hasErrors && hasWarnings && (
+          <Tooltip delayDuration={300}>
+            <TooltipTrigger asChild>
+              <div className="absolute -top-4 -left-4 z-30 cursor-help">
+                <AlertCircle className="h-8 w-8 text-warning fill-card" strokeWidth={2} />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="top" className="bg-warning text-warning-foreground text-xs px-2 py-1">
+              {diagnostics.find((d) => d.severity === "warning")?.message ?? "This node has warnings"}
+            </TooltipContent>
+          </Tooltip>
+        )}
+
+        {/* Content overlay */}
+        {/* Content overlay — top-aligned */}
+        <div className={`relative z-10 p-3 ${nodeShape === "tapered-right" ? "pr-8" : ""}`}>
+          {/* Header row: emoji + label badge */}
+          <div className="flex items-center gap-1.5 min-w-0 mb-1.5">
+            {IconComponent && (
+              <IconComponent className="w-4 h-4 shrink-0" style={{ color: `hsl(var(${nodeColor}))` }} />
+            )}
+            <Badge
+              variant="secondary"
+              className="text-sm truncate max-w-full text-foreground"
+              style={{
+                backgroundColor: `hsl(var(${nodeColor}) / 0.3)`,
+                borderColor: `hsl(var(${nodeColor}) / 0.4)`,
+              }}
+            >
+              {(nodeData as NodeBase).label || nodeDefinition.label}
+            </Badge>
+          </div>
+
+          {/* Parameters list */}
+          {nodeParameters.length > 0 && (
+            <div className="space-y-0.5">
+              {nodeParameters.slice(0, 3).map((param) => {
+                const value = parameters[param.id];
+                const resolved = resolvedExpressions[param.id];
+
+                const paramDisplay = resolved
+                  ? null
+                  : formatParamDisplay(param, value, availableVariables, channelLabels, memoryLabels, modelLabels);
+                const isInvalid = resolved ? !resolved.parseRes.isValid : !!paramDisplay?.isInvalid;
+
+                return (
+                  <div key={param.id} className="text-xs leading-4 flex items-baseline gap-1 truncate">
+                    <span className="shrink-0 text-muted-foreground">{param.label}:</span>
+                    <span className={`font-mono truncate ${isInvalid ? "text-destructive" : "text-foreground"}`}>
+                      {resolved ? displayValue(resolved.expr) : paramDisplay!.text}
+                    </span>
+                  </div>
+                );
+              })}
+              {nodeParameters.length > 3 && (
+                <div className="text-xs text-muted-foreground">+{nodeParameters.length - 3} more...</div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Execution output handles (right) — disabled when tool input is connected */}
+        {executionOutputs.map((port, index) => {
+          const canAccept = !isPreview && !usedAsToolInput && canPortAcceptEdge(id, port.id, nodes, edges);
+          return (
+            <PortHandle
+              key={port.id}
+              id={port.id}
+              type="source"
+              position={Position.Right}
+              portType={port.type}
+              label={port.label}
+              disabled={usedAsToolInput}
+              showPlus={canAccept}
+              nodeId={id}
+              style={{
+                top:
+                  nodeShape === "tapered-right"
+                    ? `${minHeight / 2}px`
+                    : `${getVerticalPortPosition(index, executionOutputs.length)}px`,
+                right: "0",
+              }}
+            />
+          );
+        })}
+
+        {/* Tool output handles (bottom) */}
+        {toolOutputs.map((port, index) => {
+          const canAccept = !isPreview && canPortAcceptEdge(id, port.id, nodes, edges);
+          return (
+            <PortHandle
+              key={port.id}
+              id={port.id}
+              type="source"
+              position={Position.Bottom}
+              portType={port.type}
+              label={port.label}
+              showPlus={canAccept}
+              nodeId={id}
+              style={{
+                left: `${getHorizontalPortPosition(index, toolOutputs.length)}px`,
+                bottom: 0,
+              }}
+            />
+          );
+        })}
+      </div>
+    );
+  },
+);