orcheo-canvas 0.0.1

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

@@ -0,0 +1,218 @@
+import { useCallback, useRef } from "react";
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+
+import { toast } from "@/hooks/use-toast";
+import {
+  decodeClipboardPayloadString,
+  signatureFromClipboardPayload,
+} from "@features/workflow/pages/workflow-canvas/helpers/clipboard";
+import type {
+  CanvasEdge,
+  CanvasNode,
+  CopyClipboardResult,
+  WorkflowClipboardPayload,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+import type {
+  WorkflowEdge as PersistedWorkflowEdge,
+  WorkflowNode as PersistedWorkflowNode,
+} from "@features/workflow/data/workflow-data";
+
+import { copySelectionToClipboard } from "./workflow-clipboard-copy";
+import { preparePasteSelection } from "./workflow-clipboard-paste";
+
+interface WorkflowClipboardOptions {
+  nodesRef: MutableRefObject<CanvasNode[]>;
+  edgesRef: MutableRefObject<CanvasEdge[]>;
+  recordSnapshot: (options?: { force?: boolean }) => void;
+  setNodesState: Dispatch<SetStateAction<CanvasNode[]>>;
+  setEdgesState: Dispatch<SetStateAction<CanvasEdge[]>>;
+  deleteNodes: (ids: string[], options?: { suppressToast?: boolean }) => void;
+  isRestoringRef: MutableRefObject<boolean>;
+  convertPersistedNodesToCanvas: (
+    nodes: PersistedWorkflowNode[],
+  ) => CanvasNode[];
+  convertPersistedEdgesToCanvas: (
+    edges: PersistedWorkflowEdge[],
+  ) => CanvasEdge[];
+}
+
+interface WorkflowClipboardHandlers {
+  copySelectedNodes: () => Promise<CopyClipboardResult>;
+  cutSelectedNodes: () => Promise<void>;
+  pasteNodes: () => Promise<void>;
+}
+
+const EMPTY_RESULT: CopyClipboardResult = {
+  success: false,
+  nodeCount: 0,
+  edgeCount: 0,
+  usedFallback: false,
+};
+
+export function useWorkflowClipboard(
+  options: WorkflowClipboardOptions,
+): WorkflowClipboardHandlers {
+  const {
+    nodesRef,
+    edgesRef,
+    recordSnapshot,
+    setNodesState,
+    setEdgesState,
+    deleteNodes,
+    isRestoringRef,
+    convertPersistedNodesToCanvas,
+    convertPersistedEdgesToCanvas,
+  } = options;
+
+  const clipboardRef = useRef<WorkflowClipboardPayload | null>(null);
+  const pasteOffsetStepRef = useRef(0);
+  const lastClipboardSignatureRef = useRef<string | null>(null);
+
+  const copySelectedNodes = useCallback(async () => {
+    const nodesToCopy = nodesRef.current.filter((node) => node.selected);
+    const copyResult = await copySelectionToClipboard({
+      nodesToCopy,
+      edges: edgesRef.current,
+    });
+
+    if (!copyResult) {
+      return EMPTY_RESULT;
+    }
+
+    clipboardRef.current = copyResult.payload;
+    pasteOffsetStepRef.current = 0;
+    lastClipboardSignatureRef.current = copyResult.signature;
+
+    return copyResult.result;
+  }, [edgesRef, nodesRef]);
+
+  const cutSelectedNodes = useCallback(async () => {
+    const nodesToCut = nodesRef.current.filter((node) => node.selected);
+    const nodeIds = nodesToCut.map((node) => node.id);
+    const copyResult = await copySelectionToClipboard({
+      nodesToCopy: nodesToCut,
+      edges: edgesRef.current,
+      copyOptions: { skipSuccessToast: true },
+    });
+
+    if (!copyResult) {
+      return;
+    }
+
+    clipboardRef.current = copyResult.payload;
+    pasteOffsetStepRef.current = 0;
+    lastClipboardSignatureRef.current = copyResult.signature;
+
+    deleteNodes(nodeIds, { suppressToast: true });
+
+    const fallbackNote = copyResult.result.usedFallback
+      ? "System clipboard unavailable. Paste with Ctrl/Cmd+V in this tab."
+      : "Paste with Ctrl/Cmd+V.";
+
+    toast({
+      title: nodeIds.length === 1 ? "Node cut" : "Nodes cut",
+      description: `${nodeIds.length} node${
+        nodeIds.length === 1 ? "" : "s"
+      } ready to paste. ${fallbackNote}`,
+    });
+  }, [deleteNodes, edgesRef, nodesRef]);
+
+  const pasteNodes = useCallback(async () => {
+    let payload: WorkflowClipboardPayload | null = null;
+
+    if (
+      typeof navigator !== "undefined" &&
+      navigator.clipboard &&
+      typeof navigator.clipboard.readText === "function"
+    ) {
+      try {
+        const clipboardText = await navigator.clipboard.readText();
+        const parsed = decodeClipboardPayloadString(clipboardText);
+        if (parsed) {
+          payload = parsed;
+        }
+      } catch {
+        // Ignore read failures and rely on in-app clipboard.
+      }
+    }
+
+    if (!payload) {
+      payload = clipboardRef.current;
+    }
+
+    if (!payload || payload.nodes.length === 0) {
+      toast({
+        title: "Nothing to paste",
+        description: "Copy nodes before pasting.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const signature = signatureFromClipboardPayload(payload);
+    if (signature !== lastClipboardSignatureRef.current) {
+      pasteOffsetStepRef.current = 0;
+      lastClipboardSignatureRef.current = signature;
+    }
+
+    clipboardRef.current = payload;
+
+    const preparation = preparePasteSelection({
+      payload,
+      existingNodes: nodesRef.current,
+      pasteStep: pasteOffsetStepRef.current,
+      convertPersistedNodesToCanvas,
+      convertPersistedEdgesToCanvas,
+    });
+
+    if (!preparation) {
+      toast({
+        title: "Nothing to paste",
+        description: "Copied selection has no nodes.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    pasteOffsetStepRef.current = preparation.nextStep;
+
+    isRestoringRef.current = true;
+    recordSnapshot({ force: true });
+    try {
+      setNodesState((current) => [...current, ...preparation.nodes]);
+      if (preparation.edges.length > 0) {
+        setEdgesState((current) => [...current, ...preparation.edges]);
+      }
+    } catch (error) {
+      isRestoringRef.current = false;
+      throw error;
+    }
+
+    const edgeCount = preparation.edges.length;
+    const connectionsNote =
+      edgeCount > 0
+        ? ` with ${edgeCount} connection${edgeCount === 1 ? "" : "s"}`
+        : "";
+
+    toast({
+      title: preparation.nodes.length === 1 ? "Node pasted" : "Nodes pasted",
+      description: `Added ${preparation.nodes.length} node${
+        preparation.nodes.length === 1 ? "" : "s"
+      }${connectionsNote}.`,
+    });
+  }, [
+    convertPersistedEdgesToCanvas,
+    convertPersistedNodesToCanvas,
+    isRestoringRef,
+    nodesRef,
+    recordSnapshot,
+    setEdgesState,
+    setNodesState,
+  ]);
+
+  return {
+    copySelectedNodes,
+    cutSelectedNodes,
+    pasteNodes,
+  };
+}

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

@@ -0,0 +1,139 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { buildBackendHttpUrl } from "@/lib/config";
+import { toast } from "@/hooks/use-toast";
+import type {
+  Credential,
+  CredentialVaultEntryResponse,
+} from "@features/workflow/types/credential-vault";
+
+import {
+  createHandleAddCredential,
+  createHandleDeleteCredential,
+} from "../handlers/credentials";
+
+type UseWorkflowCredentialsArgs = {
+  routeWorkflowId?: string;
+  currentWorkflowId: string | null;
+  backendBaseUrl: string | null;
+  userName: string;
+};
+
+export const useWorkflowCredentials = ({
+  routeWorkflowId,
+  currentWorkflowId,
+  backendBaseUrl,
+  userName,
+}: UseWorkflowCredentialsArgs) => {
+  const [credentials, setCredentials] = useState<Credential[]>([]);
+  const [isCredentialsLoading, setIsCredentialsLoading] = useState(true);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    let isActive = true;
+
+    const fetchCredentials = async () => {
+      if (!isActive) {
+        return;
+      }
+
+      setIsCredentialsLoading(true);
+      try {
+        const url = new URL(buildBackendHttpUrl("/api/credentials"));
+        if (routeWorkflowId) {
+          url.searchParams.set("workflow_id", routeWorkflowId);
+        }
+
+        const response = await fetch(url.toString(), {
+          signal: controller.signal,
+        });
+
+        if (!response.ok) {
+          throw new Error(
+            `Failed to load credentials (status ${response.status})`,
+          );
+        }
+
+        const payload =
+          (await response.json()) as CredentialVaultEntryResponse[];
+
+        if (!isActive) {
+          return;
+        }
+
+        const mapped = payload.map<Credential>((entry) => ({
+          id: entry.id,
+          name: entry.name,
+          type: entry.provider ?? entry.kind,
+          createdAt: entry.created_at,
+          updatedAt: entry.updated_at,
+          owner: entry.owner ?? null,
+          access: entry.access,
+          secrets: entry.secret_preview
+            ? { secret: entry.secret_preview }
+            : undefined,
+          status: entry.status,
+        }));
+
+        setCredentials((previous) => {
+          const remoteIds = new Set(mapped.map((item) => item.id));
+          const localOnly = previous.filter((item) => !remoteIds.has(item.id));
+          return [...mapped, ...localOnly];
+        });
+      } catch (error) {
+        if (controller.signal.aborted) {
+          return;
+        }
+
+        console.error("Failed to load credential vault", error);
+        toast({
+          title: "Unable to load credentials",
+          description:
+            error instanceof Error
+              ? error.message
+              : "An unexpected error occurred while loading credentials.",
+          variant: "destructive",
+        });
+      } finally {
+        if (isActive) {
+          setIsCredentialsLoading(false);
+        }
+      }
+    };
+
+    fetchCredentials();
+
+    return () => {
+      isActive = false;
+      controller.abort();
+    };
+  }, [routeWorkflowId]);
+
+  const handleAddCredential = useMemo(
+    () =>
+      createHandleAddCredential({
+        backendBaseUrl,
+        currentWorkflowId,
+        userName,
+        setCredentials,
+      }),
+    [backendBaseUrl, currentWorkflowId, setCredentials, userName],
+  );
+
+  const handleDeleteCredential = useMemo(
+    () =>
+      createHandleDeleteCredential({
+        backendBaseUrl,
+        currentWorkflowId,
+        setCredentials,
+      }),
+    [backendBaseUrl, currentWorkflowId, setCredentials],
+  );
+
+  return {
+    credentials,
+    isCredentialsLoading,
+    handleAddCredential,
+    handleDeleteCredential,
+  };
+};

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

@@ -0,0 +1,140 @@
+import { useCallback } from "react";
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+
+import { toast } from "@/hooks/use-toast";
+import {
+  cloneEdge,
+  cloneNode,
+} from "@features/workflow/pages/workflow-canvas/helpers/clipboard";
+import { createIdentityAllocator } from "@features/workflow/pages/workflow-canvas/helpers/node-identity";
+import type {
+  CanvasEdge,
+  CanvasNode,
+  NodeData,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+interface DuplicateNodesOptions {
+  nodes: CanvasNode[];
+  edges: CanvasEdge[];
+  nodesRef: MutableRefObject<CanvasNode[]>;
+  isRestoringRef: MutableRefObject<boolean>;
+  recordSnapshot: (options?: { force?: boolean }) => void;
+  setNodesState: Dispatch<SetStateAction<CanvasNode[]>>;
+  setEdgesState: Dispatch<SetStateAction<CanvasEdge[]>>;
+  handleOpenChat: (nodeId: string) => void;
+}
+
+interface DuplicateNodesHandlers {
+  handleDuplicateSelectedNodes: () => void;
+}
+
+export function useWorkflowDuplicateNodes(
+  options: DuplicateNodesOptions,
+): DuplicateNodesHandlers {
+  const {
+    nodes,
+    edges,
+    nodesRef,
+    isRestoringRef,
+    recordSnapshot,
+    setNodesState,
+    setEdgesState,
+    handleOpenChat,
+  } = options;
+
+  const handleDuplicateSelectedNodes = useCallback(() => {
+    const selectedNodes = nodes.filter((node) => node.selected);
+    if (selectedNodes.length === 0) {
+      toast({
+        title: "No nodes selected",
+        description: "Select at least one node to duplicate.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const idMap = new Map<string, string>();
+    const allocateIdentity = createIdentityAllocator(nodesRef.current);
+    const duplicatedNodes = selectedNodes.map((node) => {
+      const clonedNode = cloneNode(node);
+      const baseLabel =
+        typeof clonedNode.data?.label === "string" &&
+        clonedNode.data.label.trim().length > 0
+          ? `${clonedNode.data.label} Copy`
+          : `${clonedNode.id} Copy`;
+      const { id: newId, label } = allocateIdentity(baseLabel);
+      idMap.set(node.id, newId);
+      const duplicatedData: NodeData = {
+        ...(clonedNode.data as NodeData),
+        label,
+      };
+      if (clonedNode.type === "chatTrigger") {
+        duplicatedData.onOpenChat = () => handleOpenChat(newId);
+      }
+      return {
+        ...clonedNode,
+        id: newId,
+        position: {
+          x: (clonedNode.position?.x ?? 0) + 40,
+          y: (clonedNode.position?.y ?? 0) + 40,
+        },
+        selected: false,
+        data: duplicatedData,
+      } as CanvasNode;
+    });
+
+    const selectedIds = new Set(selectedNodes.map((node) => node.id));
+    const duplicatedEdges = edges
+      .filter(
+        (edge) => selectedIds.has(edge.source) && selectedIds.has(edge.target),
+      )
+      .map((edge) => {
+        const sourceId = idMap.get(edge.source);
+        const targetId = idMap.get(edge.target);
+        if (!sourceId || !targetId) {
+          return null;
+        }
+        const clonedEdge = cloneEdge(edge);
+        return {
+          ...clonedEdge,
+          id: `edge-${sourceId}-${targetId}-${Math.random()
+            .toString(36)
+            .slice(2, 8)}`,
+          source: sourceId,
+          target: targetId,
+          selected: false,
+        } as CanvasEdge;
+      })
+      .filter(Boolean) as CanvasEdge[];
+
+    isRestoringRef.current = true;
+    recordSnapshot({ force: true });
+    try {
+      setNodesState((current) => [...current, ...duplicatedNodes]);
+      if (duplicatedEdges.length > 0) {
+        setEdgesState((current) => [...current, ...duplicatedEdges]);
+      }
+    } catch (error) {
+      isRestoringRef.current = false;
+      throw error;
+    }
+
+    toast({
+      title: "Nodes duplicated",
+      description: `${duplicatedNodes.length} node${
+        duplicatedNodes.length === 1 ? "" : "s"
+      } copied with their connections.`,
+    });
+  }, [
+    edges,
+    handleOpenChat,
+    isRestoringRef,
+    nodes,
+    nodesRef,
+    recordSnapshot,
+    setEdgesState,
+    setNodesState,
+  ]);
+
+  return { handleDuplicateSelectedNodes };
+}

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

@@ -0,0 +1,20 @@
+import { useState } from "react";
+
+import type { WorkflowExecution } from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+export function useWorkflowExecutionState() {
+  const [executions, setExecutions] = useState<WorkflowExecution[]>([]);
+  const [activeExecutionId, setActiveExecutionId] = useState<string | null>(
+    null,
+  );
+  const [isRunning, setIsRunning] = useState(false);
+
+  return {
+    executions,
+    setExecutions,
+    activeExecutionId,
+    setActiveExecutionId,
+    isRunning,
+    setIsRunning,
+  };
+}