orcheo-canvas 0.0.1

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

@@ -0,0 +1,203 @@
+import { useCallback, useRef } from "react";
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+
+import { toast } from "@/hooks/use-toast";
+import {
+  toPersistedEdge,
+  toPersistedNode,
+} from "@features/workflow/pages/workflow-canvas/helpers/transformers";
+import { validateWorkflowData } from "@features/workflow/pages/workflow-canvas/helpers/validation";
+import type {
+  CanvasEdge,
+  CanvasNode,
+  WorkflowClipboardPayload,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+import type {
+  WorkflowEdge as PersistedWorkflowEdge,
+  WorkflowNode as PersistedWorkflowNode,
+} from "@features/workflow/data/workflow-data";
+import type { StoredWorkflow } from "@features/workflow/lib/workflow-storage";
+
+interface WorkflowFileTransferOptions {
+  createSnapshot: () => { nodes: CanvasNode[]; edges: CanvasEdge[] };
+  convertPersistedNodesToCanvas: (
+    nodes: PersistedWorkflowNode[],
+  ) => CanvasNode[];
+  convertPersistedEdgesToCanvas: (
+    edges: PersistedWorkflowEdge[],
+  ) => CanvasEdge[];
+  setNodesState: Dispatch<SetStateAction<CanvasNode[]>>;
+  setEdgesState: Dispatch<SetStateAction<CanvasEdge[]>>;
+  setWorkflowName: Dispatch<SetStateAction<string>>;
+  setWorkflowDescription: Dispatch<SetStateAction<string>>;
+  setCurrentWorkflowId: Dispatch<SetStateAction<string | null>>;
+  setWorkflowVersions: Dispatch<SetStateAction<StoredWorkflow["versions"]>>;
+  setWorkflowTags: Dispatch<SetStateAction<string[]>>;
+  workflowName: string;
+  workflowDescription: string;
+  recordSnapshot: (options?: { force?: boolean }) => void;
+  isRestoringRef: MutableRefObject<boolean>;
+}
+
+interface WorkflowFileTransferHandlers {
+  fileInputRef: MutableRefObject<HTMLInputElement | null>;
+  handleExportWorkflow: () => void;
+  handleImportWorkflow: () => void;
+  handleWorkflowFileSelected: (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => void;
+}
+
+function parseWorkflowFile(content: string): WorkflowClipboardPayload {
+  const parsed = JSON.parse(content) as WorkflowClipboardPayload;
+  validateWorkflowData(parsed);
+  return parsed;
+}
+
+export function useWorkflowFileTransfer(
+  options: WorkflowFileTransferOptions,
+): WorkflowFileTransferHandlers {
+  const {
+    createSnapshot,
+    convertPersistedNodesToCanvas,
+    convertPersistedEdgesToCanvas,
+    setNodesState,
+    setEdgesState,
+    setWorkflowName,
+    setWorkflowDescription,
+    setCurrentWorkflowId,
+    setWorkflowVersions,
+    setWorkflowTags,
+    workflowName,
+    workflowDescription,
+    recordSnapshot,
+    isRestoringRef,
+  } = options;
+
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleExportWorkflow = useCallback(() => {
+    try {
+      const snapshot = createSnapshot();
+      const workflowData = {
+        name: workflowName,
+        description: workflowDescription,
+        nodes: snapshot.nodes.map(toPersistedNode),
+        edges: snapshot.edges.map(toPersistedEdge),
+      };
+      const serialized = JSON.stringify(workflowData, null, 2);
+      const blob = new Blob([serialized], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = `${
+        workflowName.replace(/\s+/g, "-").toLowerCase() || "workflow"
+      }.json`;
+      anchor.click();
+      URL.revokeObjectURL(url);
+      toast({
+        title: "Workflow exported",
+        description: "A JSON export has been downloaded.",
+      });
+    } catch (error) {
+      toast({
+        title: "Export failed",
+        description:
+          error instanceof Error ? error.message : "Unable to export workflow.",
+        variant: "destructive",
+      });
+    }
+  }, [createSnapshot, workflowDescription, workflowName]);
+
+  const handleImportWorkflow = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+
+  const handleWorkflowFileSelected = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (!file) {
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = () => {
+        try {
+          const content =
+            typeof reader.result === "string" ? reader.result : "";
+          const parsed = parseWorkflowFile(content);
+
+          const importedNodes = convertPersistedNodesToCanvas(parsed.nodes);
+          const importedEdges = convertPersistedEdgesToCanvas(parsed.edges);
+
+          isRestoringRef.current = true;
+          recordSnapshot({ force: true });
+          try {
+            setNodesState(importedNodes);
+            setEdgesState(importedEdges);
+            if (
+              typeof parsed.name === "string" &&
+              parsed.name.trim().length > 0
+            ) {
+              setWorkflowName(parsed.name);
+            }
+            if (typeof parsed.description === "string") {
+              setWorkflowDescription(parsed.description);
+            }
+            setCurrentWorkflowId(null);
+            setWorkflowVersions([]);
+            setWorkflowTags(["draft"]);
+          } catch (error) {
+            isRestoringRef.current = false;
+            throw error;
+          }
+
+          toast({
+            title: "Workflow imported",
+            description: `Loaded ${importedNodes.length} node${
+              importedNodes.length === 1 ? "" : "s"
+            } from file.`,
+          });
+        } catch (error) {
+          toast({
+            title: "Import failed",
+            description:
+              error instanceof Error ? error.message : "Invalid workflow file.",
+            variant: "destructive",
+          });
+        } finally {
+          event.target.value = "";
+        }
+      };
+      reader.onerror = () => {
+        toast({
+          title: "Import failed",
+          description: "Unable to read the selected file.",
+          variant: "destructive",
+        });
+        event.target.value = "";
+      };
+      reader.readAsText(file);
+    },
+    [
+      convertPersistedEdgesToCanvas,
+      convertPersistedNodesToCanvas,
+      isRestoringRef,
+      recordSnapshot,
+      setCurrentWorkflowId,
+      setEdgesState,
+      setNodesState,
+      setWorkflowDescription,
+      setWorkflowName,
+      setWorkflowTags,
+      setWorkflowVersions,
+    ],
+  );
+
+  return {
+    fileInputRef,
+    handleExportWorkflow,
+    handleImportWorkflow,
+    handleWorkflowFileSelected,
+  };
+}

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

@@ -0,0 +1,126 @@
+import { useEffect } from "react";
+import type { MutableRefObject } from "react";
+
+import type { CanvasNode } from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+interface UseWorkflowKeybindingsParams {
+  nodesRef: MutableRefObject<CanvasNode[]>;
+  deleteNodes: (ids: string[]) => void;
+  handleUndo: () => void;
+  handleRedo: () => void;
+  copySelectedNodes: () => Promise<void>;
+  cutSelectedNodes: () => Promise<void>;
+  pasteNodes: () => Promise<void>;
+  setIsSearchOpen: (value: boolean) => void;
+  setSearchMatches: (value: string[]) => void;
+  setCurrentSearchIndex: (index: number) => void;
+}
+
+export function useWorkflowKeybindings({
+  nodesRef,
+  deleteNodes,
+  handleUndo,
+  handleRedo,
+  copySelectedNodes,
+  cutSelectedNodes,
+  pasteNodes,
+  setIsSearchOpen,
+  setSearchMatches,
+  setCurrentSearchIndex,
+}: UseWorkflowKeybindingsParams) {
+  useEffect(() => {
+    const targetDocument =
+      typeof document !== "undefined" ? document : undefined;
+    if (!targetDocument) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const target = event.target as HTMLElement | null;
+      const isEditable =
+        !!target &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.isContentEditable);
+
+      if (
+        (event.key === "Delete" || event.key === "Backspace") &&
+        !isEditable
+      ) {
+        const selectedIds = nodesRef.current
+          .filter((node) => node.selected)
+          .map((node) => node.id);
+        if (selectedIds.length > 0) {
+          event.preventDefault();
+          deleteNodes(selectedIds);
+          return;
+        }
+      }
+
+      if (!(event.ctrlKey || event.metaKey)) {
+        return;
+      }
+
+      const key = event.key.toLowerCase();
+
+      if ((key === "c" || key === "x" || key === "v") && isEditable) {
+        return;
+      }
+
+      if (key === "c") {
+        event.preventDefault();
+        void copySelectedNodes();
+        return;
+      }
+
+      if (key === "x") {
+        event.preventDefault();
+        void cutSelectedNodes();
+        return;
+      }
+
+      if (key === "v") {
+        event.preventDefault();
+        void pasteNodes();
+        return;
+      }
+
+      if (key === "f") {
+        event.preventDefault();
+        setIsSearchOpen(true);
+        setSearchMatches([]);
+        setCurrentSearchIndex(0);
+        return;
+      }
+
+      if (key === "z") {
+        event.preventDefault();
+        if (event.shiftKey) {
+          handleRedo();
+        } else {
+          handleUndo();
+        }
+        return;
+      }
+
+      if (key === "y") {
+        event.preventDefault();
+        handleRedo();
+      }
+    };
+
+    targetDocument.addEventListener("keydown", handleKeyDown);
+    return () => targetDocument.removeEventListener("keydown", handleKeyDown);
+  }, [
+    nodesRef,
+    deleteNodes,
+    handleRedo,
+    handleUndo,
+    copySelectedNodes,
+    cutSelectedNodes,
+    pasteNodes,
+    setCurrentSearchIndex,
+    setIsSearchOpen,
+    setSearchMatches,
+  ]);
+}

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

@@ -0,0 +1,174 @@
+import type { Dispatch, SetStateAction } from "react";
+import { useEffect } from "react";
+
+import { toast } from "@/hooks/use-toast";
+import {
+  SAMPLE_WORKFLOWS,
+  type WorkflowNode as PersistedWorkflowNode,
+  type WorkflowEdge as PersistedWorkflowEdge,
+} from "@features/workflow/data/workflow-data";
+import {
+  getWorkflowById,
+  type StoredWorkflow,
+} from "@features/workflow/lib/workflow-storage";
+import { loadWorkflowExecutions } from "@features/workflow/lib/workflow-execution-storage";
+import type { WorkflowExecution } from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+interface UseWorkflowLoaderParams<TNode, TEdge> {
+  workflowId: string | undefined;
+  setCurrentWorkflowId: Dispatch<SetStateAction<string | null>>;
+  setWorkflowName: Dispatch<SetStateAction<string>>;
+  setWorkflowDescription: Dispatch<SetStateAction<string>>;
+  setWorkflowTags: Dispatch<SetStateAction<string[]>>;
+  setWorkflowVersions: Dispatch<SetStateAction<StoredWorkflow["versions"]>>;
+  setExecutions: Dispatch<SetStateAction<WorkflowExecution[]>>;
+  setActiveExecutionId: Dispatch<SetStateAction<string | null>>;
+  convertPersistedNodesToCanvas: (nodes: PersistedWorkflowNode[]) => TNode[];
+  convertPersistedEdgesToCanvas: (edges: PersistedWorkflowEdge[]) => TEdge[];
+  applySnapshot: (
+    snapshot: { nodes: TNode[]; edges: TEdge[] },
+    options?: { resetHistory?: boolean },
+  ) => void;
+}
+
+export function useWorkflowLoader<TNode, TEdge>({
+  workflowId,
+  setCurrentWorkflowId,
+  setWorkflowName,
+  setWorkflowDescription,
+  setWorkflowTags,
+  setWorkflowVersions,
+  setExecutions,
+  setActiveExecutionId,
+  convertPersistedNodesToCanvas,
+  convertPersistedEdgesToCanvas,
+  applySnapshot,
+}: UseWorkflowLoaderParams<TNode, TEdge>) {
+  useEffect(() => {
+    let isMounted = true;
+
+    const resetToBlankWorkflow = () => {
+      setCurrentWorkflowId(null);
+      setWorkflowName("New Workflow");
+      setWorkflowDescription("");
+      setWorkflowTags(["draft"]);
+      setWorkflowVersions([]);
+      setExecutions([]);
+      setActiveExecutionId(null);
+      applySnapshot({ nodes: [], edges: [] }, { resetHistory: true });
+    };
+
+    const loadWorkflow = async () => {
+      if (!workflowId) {
+        return;
+      }
+
+      try {
+        const persisted = await getWorkflowById(workflowId);
+        if (persisted && isMounted) {
+          setCurrentWorkflowId(persisted.id);
+          setWorkflowName(persisted.name);
+          setWorkflowDescription(persisted.description ?? "");
+          setWorkflowTags(persisted.tags ?? ["draft"]);
+          setWorkflowVersions(persisted.versions ?? []);
+          const canvasNodes = convertPersistedNodesToCanvas(
+            persisted.nodes ?? [],
+          );
+          const canvasEdges = convertPersistedEdgesToCanvas(
+            persisted.edges ?? [],
+          );
+          applySnapshot(
+            { nodes: canvasNodes, edges: canvasEdges },
+            { resetHistory: true },
+          );
+          try {
+            const history = await loadWorkflowExecutions(workflowId, {
+              workflow: persisted,
+            });
+            if (isMounted) {
+              setExecutions(history);
+              setActiveExecutionId(history[0]?.id ?? null);
+            }
+          } catch (historyError) {
+            if (isMounted) {
+              setExecutions([]);
+              setActiveExecutionId(null);
+              toast({
+                title: "Failed to load execution history",
+                description:
+                  historyError instanceof Error
+                    ? historyError.message
+                    : "Unable to retrieve workflow runs.",
+                variant: "destructive",
+              });
+            }
+            console.error("Failed to load workflow executions", historyError);
+          }
+          return;
+        }
+      } catch (error) {
+        if (isMounted) {
+          toast({
+            title: "Failed to load workflow",
+            description:
+              error instanceof Error ? error.message : "Unknown error occurred",
+            variant: "destructive",
+          });
+          setExecutions([]);
+          setActiveExecutionId(null);
+        }
+      }
+
+      if (!isMounted) {
+        return;
+      }
+
+      const template = SAMPLE_WORKFLOWS.find((w) => w.id === workflowId);
+      if (template) {
+        setCurrentWorkflowId(null);
+        setWorkflowName(template.name);
+        setWorkflowDescription(template.description ?? "");
+        setWorkflowTags(template.tags.filter((tag) => tag !== "template"));
+        setWorkflowVersions([]);
+        setExecutions([]);
+        setActiveExecutionId(null);
+        const canvasNodes = convertPersistedNodesToCanvas(template.nodes);
+        const canvasEdges = convertPersistedEdgesToCanvas(template.edges);
+        applySnapshot(
+          { nodes: canvasNodes, edges: canvasEdges },
+          { resetHistory: true },
+        );
+        toast({
+          title: "Template loaded",
+          description: "Save to add this workflow to your workspace.",
+        });
+        return;
+      }
+
+      toast({
+        title: "Workflow not found",
+        description: "Starting a new workflow instead.",
+        variant: "destructive",
+      });
+      resetToBlankWorkflow();
+    };
+
+    void loadWorkflow();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [
+    applySnapshot,
+    convertPersistedEdgesToCanvas,
+    convertPersistedNodesToCanvas,
+    setCurrentWorkflowId,
+    setExecutions,
+    setActiveExecutionId,
+    setWorkflowDescription,
+    setWorkflowName,
+    setWorkflowTags,
+    setWorkflowVersions,
+    workflowId,
+  ]);
+}

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

@@ -0,0 +1,28 @@
+import { useState } from "react";
+
+import type { StoredWorkflow } from "@features/workflow/lib/workflow-storage";
+
+export function useWorkflowMetadataState() {
+  const [workflowName, setWorkflowName] = useState("New Workflow");
+  const [workflowDescription, setWorkflowDescription] = useState("");
+  const [currentWorkflowId, setCurrentWorkflowId] = useState<string | null>(
+    null,
+  );
+  const [workflowVersions, setWorkflowVersions] = useState<
+    StoredWorkflow["versions"]
+  >([]);
+  const [workflowTags, setWorkflowTags] = useState<string[]>(["draft"]);
+
+  return {
+    workflowName,
+    setWorkflowName,
+    workflowDescription,
+    setWorkflowDescription,
+    currentWorkflowId,
+    setCurrentWorkflowId,
+    workflowVersions,
+    setWorkflowVersions,
+    workflowTags,
+    setWorkflowTags,
+  };
+}

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

@@ -0,0 +1,167 @@
+import { useCallback } from "react";
+
+import { toast } from "@/hooks/use-toast";
+import type {
+  CanvasEdge,
+  CanvasNode,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+import type { ValidationError } from "@features/workflow/components/canvas/connection-validator";
+
+type NodeRuntimeCacheEntry = Record<string, unknown>;
+
+type UseWorkflowNodeDeletionArgs = {
+  latestNodesRef: React.MutableRefObject<CanvasNode[]>;
+  isRestoringRef: React.MutableRefObject<boolean>;
+  setNodesState: React.Dispatch<React.SetStateAction<CanvasNode[]>>;
+  setEdgesState: React.Dispatch<React.SetStateAction<CanvasEdge[]>>;
+  recordSnapshot: (options?: { force?: boolean }) => void;
+  setNodeRuntimeCache: React.Dispatch<
+    React.SetStateAction<Record<string, NodeRuntimeCacheEntry>>
+  >;
+  setValidationErrors: React.Dispatch<React.SetStateAction<ValidationError[]>>;
+  setSearchMatches: React.Dispatch<React.SetStateAction<string[]>>;
+  setSelectedNodeId: React.Dispatch<React.SetStateAction<string | null>>;
+  setActiveChatNodeId: React.Dispatch<React.SetStateAction<string | null>>;
+  setIsChatOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  activeChatNodeId: string | null;
+};
+
+export const useWorkflowNodeDeletion = ({
+  latestNodesRef,
+  isRestoringRef,
+  setNodesState,
+  setEdgesState,
+  recordSnapshot,
+  setNodeRuntimeCache,
+  setValidationErrors,
+  setSearchMatches,
+  setSelectedNodeId,
+  setActiveChatNodeId,
+  setIsChatOpen,
+  activeChatNodeId,
+}: UseWorkflowNodeDeletionArgs) => {
+  const resolveNodeLabel = useCallback(
+    (canvasNodeId: string): string => {
+      const node = latestNodesRef.current.find(
+        (item) => item.id === canvasNodeId,
+      );
+      const label =
+        typeof node?.data?.label === "string" && node.data.label.trim()
+          ? node.data.label.trim()
+          : null;
+      return label ?? canvasNodeId;
+    },
+    [latestNodesRef],
+  );
+
+  const deleteNodes = useCallback(
+    (nodeIds: string[], options?: { suppressToast?: boolean }) => {
+      const uniqueIds = Array.from(new Set(nodeIds)).filter(Boolean);
+      if (uniqueIds.length === 0) {
+        return;
+      }
+
+      const labels = uniqueIds.map((id) => resolveNodeLabel(id));
+
+      setNodeRuntimeCache((current) => {
+        if (Object.keys(current).length === 0) {
+          return current;
+        }
+
+        let modified = false;
+        const next = { ...current };
+        for (const id of uniqueIds) {
+          if (id in next) {
+            delete next[id];
+            modified = true;
+          }
+        }
+
+        return modified ? next : current;
+      });
+
+      isRestoringRef.current = true;
+      recordSnapshot({ force: true });
+      try {
+        setNodesState((current) =>
+          current.filter((node) => !uniqueIds.includes(node.id)),
+        );
+        setEdgesState((current) =>
+          current.filter(
+            (edge) =>
+              !uniqueIds.includes(edge.source) &&
+              !uniqueIds.includes(edge.target),
+          ),
+        );
+      } catch (error) {
+        isRestoringRef.current = false;
+        throw error;
+      }
+
+      setValidationErrors((errors) =>
+        errors.filter((error) => {
+          if (error.nodeId && uniqueIds.includes(error.nodeId)) {
+            return false;
+          }
+          if (error.sourceId && uniqueIds.includes(error.sourceId)) {
+            return false;
+          }
+          if (error.targetId && uniqueIds.includes(error.targetId)) {
+            return false;
+          }
+          return true;
+        }),
+      );
+
+      setSearchMatches((matches) =>
+        matches.filter((match) => !uniqueIds.includes(match)),
+      );
+
+      setSelectedNodeId((current) =>
+        current && uniqueIds.includes(current) ? null : current,
+      );
+
+      if (activeChatNodeId && uniqueIds.includes(activeChatNodeId)) {
+        setActiveChatNodeId(null);
+        setIsChatOpen(false);
+      }
+
+      if (!options?.suppressToast) {
+        toast({
+          title: uniqueIds.length === 1 ? "Node deleted" : "Nodes deleted",
+          description:
+            uniqueIds.length === 1
+              ? `Removed ${labels[0]}.`
+              : `Removed ${uniqueIds.length} nodes.`,
+        });
+      }
+    },
+    [
+      activeChatNodeId,
+      isRestoringRef,
+      recordSnapshot,
+      resolveNodeLabel,
+      setActiveChatNodeId,
+      setEdgesState,
+      setIsChatOpen,
+      setNodeRuntimeCache,
+      setNodesState,
+      setSearchMatches,
+      setSelectedNodeId,
+      setValidationErrors,
+    ],
+  );
+
+  const handleDeleteNode = useCallback(
+    (nodeId: string) => {
+      deleteNodes([nodeId]);
+    },
+    [deleteNodes],
+  );
+
+  return {
+    resolveNodeLabel,
+    deleteNodes,
+    handleDeleteNode,
+  };
+};