orcheo-canvas 0.0.1

package/src/features/workflow/pages/workflow-canvas/hooks/use-node-creation.ts

@@ -0,0 +1,133 @@
+import { useCallback } from "react";
+import type { MutableRefObject } from "react";
+import type { ReactFlowInstance } from "@xyflow/react";
+
+import {
+  buildNodeBaseData,
+  createStandardNode,
+  createStickyNode,
+} from "@features/workflow/pages/workflow-canvas/hooks/node-factory";
+
+import type {
+  CanvasEdge,
+  CanvasNode,
+  NodeData,
+  SidebarNodeDefinition,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+interface UseNodeCreationParams {
+  reactFlowWrapper: MutableRefObject<HTMLDivElement | null>;
+  reactFlowInstance: MutableRefObject<ReactFlowInstance<
+    CanvasNode,
+    CanvasEdge
+  > | null>;
+  nodesRef: MutableRefObject<CanvasNode[]>;
+  setNodes: React.Dispatch<React.SetStateAction<CanvasNode[]>>;
+  handleOpenChat: (nodeId: string) => void;
+  handleUpdateStickyNoteNode: (nodeId: string, data: Partial<NodeData>) => void;
+}
+
+export function useNodeCreation({
+  reactFlowWrapper,
+  reactFlowInstance,
+  nodesRef,
+  setNodes,
+  handleOpenChat,
+  handleUpdateStickyNoteNode,
+}: UseNodeCreationParams) {
+  const onDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+  }, []);
+
+  const handleAddNode = useCallback(
+    (node: SidebarNodeDefinition) => {
+      if (!reactFlowInstance.current) {
+        return;
+      }
+
+      const base = buildNodeBaseData(node, nodesRef);
+      if (base.nodeType === "stickyNote") {
+        const position = {
+          x: Math.random() * 300 + 100,
+          y: Math.random() * 300 + 100,
+        };
+        const stickyNode = createStickyNode(
+          base,
+          position,
+          handleUpdateStickyNoteNode,
+        );
+        setNodes((nodes) => [...nodes, stickyNode]);
+        return;
+      }
+
+      const position = {
+        x: Math.random() * 300 + 100,
+        y: Math.random() * 300 + 100,
+      };
+      const newNode = createStandardNode(base, position, handleOpenChat);
+      setNodes((nodes) => [...nodes, newNode]);
+    },
+    [
+      handleOpenChat,
+      handleUpdateStickyNoteNode,
+      nodesRef,
+      reactFlowInstance,
+      setNodes,
+    ],
+  );
+
+  const onDrop = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault();
+
+      if (!reactFlowWrapper.current || !reactFlowInstance.current) {
+        return;
+      }
+
+      const bounds = reactFlowWrapper.current.getBoundingClientRect();
+      const raw = event.dataTransfer.getData("application/reactflow");
+      if (!raw) {
+        return;
+      }
+
+      try {
+        const node = JSON.parse(raw) as SidebarNodeDefinition;
+        const position = reactFlowInstance.current.project({
+          x: event.clientX - bounds.left,
+          y: event.clientY - bounds.top,
+        });
+        const base = buildNodeBaseData(node, nodesRef);
+
+        if (base.nodeType === "stickyNote") {
+          const stickyNode = createStickyNode(
+            base,
+            position,
+            handleUpdateStickyNoteNode,
+          );
+          setNodes((nodes) => nodes.concat(stickyNode));
+          return;
+        }
+
+        const newNode = createStandardNode(base, position, handleOpenChat);
+        setNodes((nodes) => nodes.concat(newNode));
+      } catch (error) {
+        console.error("Error adding new node:", error);
+      }
+    },
+    [
+      handleOpenChat,
+      handleUpdateStickyNoteNode,
+      nodesRef,
+      reactFlowInstance,
+      reactFlowWrapper,
+      setNodes,
+    ],
+  );
+
+  return {
+    onDragOver,
+    onDrop,
+    handleAddNode,
+  };
+}

package/src/features/workflow/pages/workflow-canvas/hooks/use-node-inspector-handlers.ts

@@ -0,0 +1,194 @@
+import { useCallback } from "react";
+import type { MutableRefObject } from "react";
+import { toast } from "@/hooks/use-toast";
+
+import {
+  createIdentityAllocator,
+  sanitizeLabel,
+} from "@features/workflow/pages/workflow-canvas/helpers/node-identity";
+import type {
+  CanvasEdge,
+  CanvasNode,
+  NodeData,
+  NodeRuntimeCacheEntry,
+  NodeStatus,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+import type { ValidationError } from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+interface UseNodeInspectorHandlersParams {
+  nodesRef: MutableRefObject<CanvasNode[]>;
+  edgesRef: MutableRefObject<CanvasEdge[]>;
+  isRestoringRef: MutableRefObject<boolean>;
+  recordSnapshot: (options?: { force?: boolean }) => void;
+  setNodesState: (nodes: CanvasNode[]) => void;
+  setEdgesState: (edges: CanvasEdge[]) => void;
+  setValidationErrors: React.Dispatch<React.SetStateAction<ValidationError[]>>;
+  setSearchMatches: React.Dispatch<React.SetStateAction<string[]>>;
+  setActiveChatNodeId: React.Dispatch<React.SetStateAction<string | null>>;
+  setChatTitle: React.Dispatch<React.SetStateAction<string>>;
+  setSelectedNodeId: React.Dispatch<React.SetStateAction<string | null>>;
+  setNodeRuntimeCache: React.Dispatch<
+    React.SetStateAction<Record<string, NodeRuntimeCacheEntry>>
+  >;
+  handleOpenChat: (nodeId: string) => void;
+  activeChatNodeId: string | null;
+}
+
+export function useNodeInspectorHandlers({
+  nodesRef,
+  edgesRef,
+  isRestoringRef,
+  recordSnapshot,
+  setNodesState,
+  setEdgesState,
+  setValidationErrors,
+  setSearchMatches,
+  setActiveChatNodeId,
+  setChatTitle,
+  setSelectedNodeId,
+  setNodeRuntimeCache,
+  handleOpenChat,
+  activeChatNodeId,
+}: UseNodeInspectorHandlersParams) {
+  const handleCloseNodeInspector = useCallback(() => {
+    setSelectedNodeId(null);
+  }, [setSelectedNodeId]);
+
+  const handleCacheNodeRuntime = useCallback(
+    (nodeId: string, runtime: NodeRuntimeCacheEntry) => {
+      setNodeRuntimeCache((current) => ({ ...current, [nodeId]: runtime }));
+    },
+    [setNodeRuntimeCache],
+  );
+
+  const handleNodeUpdate = useCallback(
+    (nodeId: string, data: Partial<NodeData>) => {
+      const currentNodes = nodesRef.current;
+      const currentEdges = edgesRef.current;
+
+      const targetNode = currentNodes.find((node) => node.id === nodeId);
+      if (!targetNode) {
+        return;
+      }
+
+      const desiredLabelInput =
+        data.label !== undefined
+          ? data.label
+          : (targetNode.data?.label as string | undefined);
+      const desiredLabel = sanitizeLabel(desiredLabelInput);
+      const allocateIdentity = createIdentityAllocator(currentNodes, {
+        excludeId: nodeId,
+      });
+      const { id: newId, label: uniqueLabel } = allocateIdentity(desiredLabel);
+
+      const nextStatus =
+        (data.status as NodeStatus | undefined) ||
+        (targetNode.data?.status as NodeStatus | undefined) ||
+        ("idle" as NodeStatus);
+
+      const nextData: NodeData = {
+        ...(targetNode.data as NodeData),
+        ...data,
+        label: uniqueLabel,
+        status: nextStatus,
+      };
+
+      if (targetNode.type === "chatTrigger") {
+        nextData.onOpenChat = () => handleOpenChat(newId);
+      }
+
+      const updatedNodes = currentNodes.map((node) =>
+        node.id === nodeId
+          ? ({
+              ...node,
+              id: newId,
+              data: nextData,
+            } as CanvasNode)
+          : node,
+      );
+
+      const updatedEdges = currentEdges.map((edge) => {
+        let modified = false;
+        const nextEdge = { ...edge };
+        if (edge.source === nodeId) {
+          nextEdge.source = newId;
+          modified = true;
+        }
+        if (edge.target === nodeId) {
+          nextEdge.target = newId;
+          modified = true;
+        }
+        return modified ? nextEdge : edge;
+      });
+
+      isRestoringRef.current = true;
+      recordSnapshot({ force: true });
+      try {
+        setNodesState(updatedNodes);
+        setEdgesState(updatedEdges);
+      } finally {
+        isRestoringRef.current = false;
+      }
+
+      setValidationErrors((errors) =>
+        errors.map((error) => {
+          let modified = false;
+          const nextError = { ...error };
+          if (error.nodeId === nodeId) {
+            nextError.nodeId = newId;
+            modified = true;
+          }
+          if (error.sourceId === nodeId) {
+            nextError.sourceId = newId;
+            modified = true;
+          }
+          if (error.targetId === nodeId) {
+            nextError.targetId = newId;
+            modified = true;
+          }
+          return modified ? nextError : error;
+        }),
+      );
+
+      setSearchMatches((matches) =>
+        matches.map((match) => (match === nodeId ? newId : match)),
+      );
+
+      setActiveChatNodeId((current) => (current === nodeId ? newId : current));
+
+      setChatTitle((title) =>
+        activeChatNodeId === nodeId ? uniqueLabel : title,
+      );
+
+      if (desiredLabel !== uniqueLabel) {
+        toast({
+          title: "Adjusted node name",
+          description: `Renamed to "${uniqueLabel}" to keep names unique.`,
+        });
+      }
+
+      setSelectedNodeId(null);
+    },
+    [
+      activeChatNodeId,
+      handleOpenChat,
+      isRestoringRef,
+      nodesRef,
+      edgesRef,
+      recordSnapshot,
+      setNodesState,
+      setEdgesState,
+      setValidationErrors,
+      setSearchMatches,
+      setActiveChatNodeId,
+      setChatTitle,
+      setSelectedNodeId,
+    ],
+  );
+
+  return {
+    handleCloseNodeInspector,
+    handleCacheNodeRuntime,
+    handleNodeUpdate,
+  };
+}

package/src/features/workflow/pages/workflow-canvas/hooks/use-pause-workflow.ts

@@ -0,0 +1,95 @@
+import { useCallback } from "react";
+import type { MutableRefObject } from "react";
+
+import { toast } from "@/hooks/use-toast";
+
+import type {
+  CanvasNode,
+  NodeStatus,
+  WorkflowExecution,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+interface UsePauseWorkflowParams {
+  activeExecutionId: string | null;
+  isRunning: boolean;
+  setIsRunning: React.Dispatch<React.SetStateAction<boolean>>;
+  setNodes: React.Dispatch<React.SetStateAction<CanvasNode[]>>;
+  setExecutions: React.Dispatch<React.SetStateAction<WorkflowExecution[]>>;
+  websocketRef: MutableRefObject<WebSocket | null>;
+}
+
+export function usePauseWorkflow({
+  activeExecutionId,
+  isRunning,
+  setIsRunning,
+  setNodes,
+  setExecutions,
+  websocketRef,
+}: UsePauseWorkflowParams) {
+  return useCallback(() => {
+    if (!isRunning) {
+      return;
+    }
+
+    setIsRunning(false);
+    if (websocketRef.current) {
+      websocketRef.current.close();
+      websocketRef.current = null;
+    }
+
+    const timestamp = new Date();
+
+    setNodes((nds) =>
+      nds.map((node) => {
+        if (node.data.status === "running") {
+          return {
+            ...node,
+            data: { ...node.data, status: "warning" as NodeStatus },
+          };
+        }
+        return node;
+      }),
+    );
+
+    if (activeExecutionId) {
+      setExecutions((prev) =>
+        prev.map((execution) => {
+          if (execution.id !== activeExecutionId) {
+            return execution;
+          }
+          return {
+            ...execution,
+            status: "partial",
+            endTime: timestamp.toISOString(),
+            duration:
+              timestamp.getTime() - new Date(execution.startTime).getTime(),
+            logs: [
+              ...execution.logs,
+              {
+                timestamp: timestamp.toLocaleTimeString([], {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  second: "2-digit",
+                }),
+                level: "WARNING" as const,
+                message: "Execution paused from the canvas",
+              },
+            ],
+          };
+        }),
+      );
+    }
+
+    toast({
+      title: "Workflow paused",
+      description: "Live updates disconnected. Resume to reconnect.",
+    });
+  }, [
+    activeExecutionId,
+    isRunning,
+    setExecutions,
+    setIsRunning,
+    setNodes,
+    websocketRef,
+  ]);
+}

package/src/features/workflow/pages/workflow-canvas/hooks/use-run-workflow.ts

@@ -0,0 +1,139 @@
+import { useCallback } from "react";
+import type { MutableRefObject } from "react";
+
+import { toast } from "@/hooks/use-toast";
+import { buildWorkflowWebSocketUrl, getBackendBaseUrl } from "@/lib/config";
+import { buildGraphConfigFromCanvas } from "@features/workflow/lib/graph-config";
+import { generateRandomId } from "@features/workflow/pages/workflow-canvas/helpers/id";
+import {
+  createExecutionRecord,
+  markNodesAsRunning,
+} from "@features/workflow/pages/workflow-canvas/hooks/execution-record";
+import { setupExecutionWebSocket } from "@features/workflow/pages/workflow-canvas/hooks/workflow-runner-websocket";
+
+import type {
+  CanvasEdge,
+  CanvasNode,
+  WorkflowExecution,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+import type { TraceUpdateMessage } from "@features/workflow/pages/workflow-canvas/helpers/trace";
+
+interface UseRunWorkflowParams {
+  nodes: CanvasNode[];
+  edges: CanvasEdge[];
+  setNodes: React.Dispatch<React.SetStateAction<CanvasNode[]>>;
+  setExecutions: React.Dispatch<React.SetStateAction<WorkflowExecution[]>>;
+  setActiveExecutionId: React.Dispatch<React.SetStateAction<string | null>>;
+  setIsRunning: React.Dispatch<React.SetStateAction<boolean>>;
+  websocketRef: MutableRefObject<WebSocket | null>;
+  isMountedRef: MutableRefObject<boolean>;
+  currentWorkflowId: string | null;
+  applyExecutionUpdate: (
+    executionId: string,
+    payload: Record<string, unknown>,
+    graphToCanvas: Record<string, string>,
+  ) => void;
+  handleTraceUpdate: (update: TraceUpdateMessage) => void;
+}
+
+export function useRunWorkflow({
+  nodes,
+  edges,
+  setNodes,
+  setExecutions,
+  setActiveExecutionId,
+  setIsRunning,
+  websocketRef,
+  isMountedRef,
+  currentWorkflowId,
+  applyExecutionUpdate,
+  handleTraceUpdate,
+}: UseRunWorkflowParams) {
+  return useCallback(async () => {
+    if (nodes.length === 0) {
+      toast({
+        title: "Add nodes before running",
+        description: "Create at least one node to build a runnable workflow.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const { config, graphToCanvas, warnings } =
+      await buildGraphConfigFromCanvas(nodes, edges);
+
+    warnings.forEach((message) => {
+      toast({
+        title: "Workflow configuration warning",
+        description: message,
+      });
+    });
+
+    const executionId = generateRandomId("run");
+    const executionRecord = createExecutionRecord(
+      executionId,
+      nodes,
+      edges,
+      graphToCanvas,
+    );
+
+    setExecutions((prev) => [executionRecord, ...prev]);
+    setActiveExecutionId(executionId);
+    setIsRunning(true);
+    setNodes((prev) => markNodesAsRunning(prev));
+
+    if (websocketRef.current) {
+      websocketRef.current.close();
+      websocketRef.current = null;
+    }
+
+    let websocketUrl: string;
+    try {
+      websocketUrl = buildWorkflowWebSocketUrl(
+        currentWorkflowId ?? "canvas-preview",
+        getBackendBaseUrl(),
+      );
+    } catch (error) {
+      setIsRunning(false);
+      toast({
+        title: "Unable to start execution",
+        description:
+          error instanceof Error
+            ? error.message
+            : "Invalid workflow identifier",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const ws = new WebSocket(websocketUrl);
+    websocketRef.current = ws;
+
+    setupExecutionWebSocket({
+      ws,
+      executionId,
+      config,
+      graphToCanvas,
+      nodes,
+      currentWorkflowId,
+      isMountedRef,
+      applyExecutionUpdate,
+      setIsRunning,
+      setExecutions,
+      websocketRef,
+      onTraceUpdate: handleTraceUpdate,
+    });
+  }, [
+    nodes,
+    edges,
+    setNodes,
+    setExecutions,
+    setActiveExecutionId,
+    setIsRunning,
+    websocketRef,
+    currentWorkflowId,
+    applyExecutionUpdate,
+    handleTraceUpdate,
+    isMountedRef,
+  ]);
+}

package/src/features/workflow/pages/workflow-canvas/hooks/use-runtime-cache-sync.ts

@@ -0,0 +1,52 @@
+import { useEffect } from "react";
+import type { MutableRefObject } from "react";
+
+import {
+  clearRuntimeCacheFromSession,
+  persistRuntimeCacheToSession,
+  readRuntimeCacheFromSession,
+} from "@features/workflow/pages/workflow-canvas/helpers/runtime-cache";
+
+interface UseRuntimeCacheSyncParams<TCache> {
+  runtimeCacheKey: string;
+  nodeRuntimeCache: TCache;
+  setNodeRuntimeCache: (value: TCache) => void;
+  previousRuntimeCacheKeyRef: MutableRefObject<string>;
+}
+
+export function useRuntimeCacheSync<TCache>({
+  runtimeCacheKey,
+  nodeRuntimeCache,
+  setNodeRuntimeCache,
+  previousRuntimeCacheKeyRef,
+}: UseRuntimeCacheSyncParams<TCache>) {
+  useEffect(() => {
+    if (previousRuntimeCacheKeyRef.current !== runtimeCacheKey) {
+      clearRuntimeCacheFromSession(previousRuntimeCacheKeyRef.current);
+      previousRuntimeCacheKeyRef.current = runtimeCacheKey;
+      setNodeRuntimeCache(
+        readRuntimeCacheFromSession(runtimeCacheKey) as TCache,
+      );
+    }
+  }, [runtimeCacheKey, previousRuntimeCacheKeyRef, setNodeRuntimeCache]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const handle = window.setTimeout(() => {
+      persistRuntimeCacheToSession(runtimeCacheKey, nodeRuntimeCache);
+    }, 200);
+
+    return () => {
+      window.clearTimeout(handle);
+    };
+  }, [nodeRuntimeCache, runtimeCacheKey]);
+
+  useEffect(() => {
+    return () => {
+      clearRuntimeCacheFromSession(runtimeCacheKey);
+    };
+  }, [runtimeCacheKey]);
+}

package/src/features/workflow/pages/workflow-canvas/hooks/use-subworkflow-state.ts

@@ -0,0 +1,47 @@
+import { useState } from "react";
+
+import type { SubworkflowTemplate } from "@features/workflow/components/panels/workflow-governance-panel";
+
+const DEFAULT_SUBWORKFLOWS: SubworkflowTemplate[] = [
+  {
+    id: "subflow-customer-onboarding",
+    name: "Customer Onboarding Foundation",
+    description:
+      "Qualify leads, enrich CRM details, and orchestrate the welcome sequence.",
+    tags: ["crm", "sales", "email"],
+    version: "1.3.0",
+    status: "stable",
+    usageCount: 18,
+    lastUpdated: new Date(Date.now() - 1000 * 60 * 60 * 24 * 2).toISOString(),
+  },
+  {
+    id: "subflow-incident-response",
+    name: "Incident Response Escalation",
+    description:
+      "Route Sev1 incidents, notify stakeholders, and collect on-call context.",
+    tags: ["ops", "pagerduty", "slack"],
+    version: "0.9.2",
+    status: "beta",
+    usageCount: 7,
+    lastUpdated: new Date(Date.now() - 1000 * 60 * 60 * 8).toISOString(),
+  },
+  {
+    id: "subflow-content-qa",
+    name: "Content QA & Publishing",
+    description:
+      "Score AI-generated drafts, request revisions, and schedule approved posts.",
+    tags: ["marketing", "ai", "review"],
+    version: "2.0.0",
+    status: "stable",
+    usageCount: 11,
+    lastUpdated: new Date(Date.now() - 1000 * 60 * 60 * 24 * 6).toISOString(),
+  },
+];
+
+export function useSubworkflowState(
+  initial: SubworkflowTemplate[] = DEFAULT_SUBWORKFLOWS,
+) {
+  const [subworkflows, setSubworkflows] =
+    useState<SubworkflowTemplate[]>(initial);
+  return { subworkflows, setSubworkflows };
+}