orcheo-canvas 0.0.1

package/src/features/workflow/pages/workflow-canvas/handlers/credentials.ts

@@ -0,0 +1,158 @@
+import type React from "react";
+
+import { buildBackendHttpUrl } from "@/lib/config";
+import { toast } from "@/hooks/use-toast";
+import type {
+  Credential,
+  CredentialInput,
+  CredentialVaultEntryResponse,
+} from "@features/workflow/types/credential-vault";
+
+type AddCredentialDependencies = {
+  backendBaseUrl: string | null;
+  currentWorkflowId: string | null;
+  userName: string;
+  setCredentials: React.Dispatch<React.SetStateAction<Credential[]>>;
+};
+
+type DeleteCredentialDependencies = {
+  backendBaseUrl: string | null;
+  currentWorkflowId: string | null;
+  setCredentials: React.Dispatch<React.SetStateAction<Credential[]>>;
+};
+
+export const createHandleAddCredential =
+  ({
+    backendBaseUrl,
+    currentWorkflowId,
+    userName,
+    setCredentials,
+  }: AddCredentialDependencies) =>
+  async (credential: CredentialInput) => {
+    const secret = credential.secrets?.apiKey?.trim();
+    if (!secret) {
+      const message = "API key is required to save a credential.";
+      toast({
+        title: "Missing credential secret",
+        description: message,
+        variant: "destructive",
+      });
+      throw new Error(message);
+    }
+
+    const response = await fetch(
+      buildBackendHttpUrl("/api/credentials", backendBaseUrl),
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          name: credential.name,
+          provider: credential.type ?? "custom",
+          secret,
+          actor: userName,
+          access: credential.access,
+          workflow_id: currentWorkflowId,
+          scopes: [],
+        }),
+      },
+    );
+
+    if (!response.ok) {
+      let detail = `Failed to save credential (status ${response.status})`;
+      try {
+        const payload = (await response.json()) as { detail?: unknown };
+        if (typeof payload?.detail === "string") {
+          detail = payload.detail;
+        } else if (
+          payload?.detail &&
+          typeof (payload.detail as { message?: unknown }).message === "string"
+        ) {
+          detail = (payload.detail as { message?: string }).message as string;
+        }
+      } catch (error) {
+        console.warn("Failed to parse credential creation error", error);
+      }
+
+      toast({
+        title: "Unable to save credential",
+        description: detail,
+        variant: "destructive",
+      });
+      throw new Error(detail);
+    }
+
+    const payload = (await response.json()) as CredentialVaultEntryResponse;
+
+    const credentialRecord: Credential = {
+      id: payload.id,
+      name: payload.name,
+      type: payload.provider ?? payload.kind,
+      createdAt: payload.created_at,
+      updatedAt: payload.updated_at,
+      owner: payload.owner,
+      access: payload.access,
+      secrets: credential.secrets,
+      status: payload.status,
+    };
+
+    setCredentials((prev) => {
+      const withoutDuplicate = prev.filter(
+        (existing) => existing.id !== credentialRecord.id,
+      );
+      return [...withoutDuplicate, credentialRecord];
+    });
+
+    toast({
+      title: "Credential added to vault",
+      description: `${credentialRecord.name} is now available for nodes that require secure access.`,
+    });
+  };
+
+export const createHandleDeleteCredential =
+  ({
+    backendBaseUrl,
+    currentWorkflowId,
+    setCredentials,
+  }: DeleteCredentialDependencies) =>
+  async (id: string) => {
+    const url = new URL(
+      buildBackendHttpUrl(`/api/credentials/${id}`, backendBaseUrl),
+    );
+    if (currentWorkflowId) {
+      url.searchParams.set("workflow_id", currentWorkflowId);
+    }
+
+    try {
+      const response = await fetch(url.toString(), {
+        method: "DELETE",
+      });
+
+      if (!response.ok && response.status !== 404) {
+        throw new Error(
+          `Failed to delete credential (status ${response.status})`,
+        );
+      }
+
+      setCredentials((prev) =>
+        prev.filter((credential) => credential.id !== id),
+      );
+      toast({
+        title: "Credential removed",
+        description:
+          "Nodes referencing this credential will require reconfiguration before publish.",
+      });
+    } catch (error) {
+      console.error("Failed to delete credential", error);
+      toast({
+        title: "Unable to delete credential",
+        description:
+          error instanceof Error
+            ? error.message
+            : "An unexpected error occurred while removing the credential.",
+        variant: "destructive",
+      });
+      throw error;
+    }
+  };

package/src/features/workflow/pages/workflow-canvas/handlers/subworkflows.ts

@@ -0,0 +1,227 @@
+import type React from "react";
+import type { ReactFlowInstance } from "@xyflow/react";
+
+import { toast } from "@/hooks/use-toast";
+import {
+  DEFAULT_NODE_LABEL,
+  createIdentityAllocator,
+} from "@features/workflow/pages/workflow-canvas/helpers/node-identity";
+import type {
+  WorkflowEdge as PersistedWorkflowEdge,
+  WorkflowNode as PersistedWorkflowNode,
+} from "@features/workflow/data/workflow-data";
+import {
+  SUBWORKFLOW_LIBRARY,
+  type SubworkflowTemplate,
+} from "@features/workflow/pages/workflow-canvas/helpers/subworkflow-library";
+import { generateRandomId } from "@features/workflow/pages/workflow-canvas/helpers/id";
+import type {
+  CanvasEdge,
+  CanvasNode,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+type Getter<T> = () => T;
+
+type CreateSubworkflowHandlerArgs = {
+  getSelectedNodes: Getter<CanvasNode[]>;
+  setSubworkflows: React.Dispatch<React.SetStateAction<SubworkflowTemplate[]>>;
+};
+
+export const createHandleCreateSubworkflow =
+  ({ getSelectedNodes, setSubworkflows }: CreateSubworkflowHandlerArgs) =>
+  () => {
+    const selectedNodes = getSelectedNodes();
+    const timestamp = new Date().toISOString();
+    const inferredTags = Array.from(
+      new Set(
+        selectedNodes
+          .map((node) =>
+            typeof node.data.type === "string" ? node.data.type : "workflow",
+          )
+          .filter(Boolean),
+      ),
+    ).slice(0, 4);
+
+    const template: SubworkflowTemplate = {
+      id: generateRandomId("subflow"),
+      name:
+        selectedNodes.length > 0
+          ? `${selectedNodes.length}-step sub-workflow`
+          : "Draft sub-workflow",
+      description:
+        selectedNodes.length > 0
+          ? "Captured the selected nodes so the pattern can be reused across projects."
+          : "Start from an empty template and drag nodes into the canvas to define the steps.",
+      tags: inferredTags.length > 0 ? inferredTags : ["workflow"],
+      version: "0.1.0",
+      status: "beta",
+      usageCount: 0,
+      lastUpdated: timestamp,
+    };
+
+    setSubworkflows((prev) => [template, ...prev]);
+    toast({
+      title: "Sub-workflow draft created",
+      description:
+        "Find it in the Readiness tab to document, version, and share with your team.",
+    });
+  };
+
+type DeleteSubworkflowHandlerArgs = {
+  setSubworkflows: React.Dispatch<React.SetStateAction<SubworkflowTemplate[]>>;
+};
+
+export const createHandleDeleteSubworkflow =
+  ({ setSubworkflows }: DeleteSubworkflowHandlerArgs) =>
+  (id: string) => {
+    setSubworkflows((prev) =>
+      prev.filter((subworkflow) => subworkflow.id !== id),
+    );
+    toast({
+      title: "Sub-workflow removed",
+      description:
+        "It will remain available in version history for audit purposes.",
+    });
+  };
+
+type InsertSubworkflowHandlerArgs = {
+  nodesRef: React.MutableRefObject<CanvasNode[]>;
+  setNodes: React.Dispatch<React.SetStateAction<CanvasNode[]>>;
+  setEdges: React.Dispatch<React.SetStateAction<CanvasEdge[]>>;
+  setSubworkflows: React.Dispatch<React.SetStateAction<SubworkflowTemplate[]>>;
+  convertPersistedNodesToCanvas: (
+    nodes: PersistedWorkflowNode[],
+  ) => CanvasNode[];
+  convertPersistedEdgesToCanvas: (
+    edges: PersistedWorkflowEdge[],
+  ) => CanvasEdge[];
+  setSelectedNodeId: React.Dispatch<React.SetStateAction<string | null>>;
+  setActiveTab: React.Dispatch<React.SetStateAction<string>>;
+  reactFlowInstance: React.MutableRefObject<ReactFlowInstance<
+    CanvasNode,
+    CanvasEdge
+  > | null>;
+};
+
+export const createHandleInsertSubworkflow =
+  ({
+    nodesRef,
+    setNodes,
+    setEdges,
+    setSubworkflows,
+    convertPersistedNodesToCanvas,
+    convertPersistedEdgesToCanvas,
+    setSelectedNodeId,
+    setActiveTab,
+    reactFlowInstance,
+  }: InsertSubworkflowHandlerArgs) =>
+  (subworkflow: SubworkflowTemplate) => {
+    const libraryEntry = SUBWORKFLOW_LIBRARY[subworkflow.id];
+
+    if (!libraryEntry) {
+      toast({
+        title: "Template unavailable",
+        description:
+          "This sub-workflow doesn't have a canvas definition yet. Please try another template.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const templateXs = libraryEntry.nodes.map((node) => node.position?.x ?? 0);
+    const templateYs = libraryEntry.nodes.map((node) => node.position?.y ?? 0);
+    const templateMinX = templateXs.length > 0 ? Math.min(...templateXs) : 0;
+    const templateMinY = templateYs.length > 0 ? Math.min(...templateYs) : 0;
+
+    const existingNodes = nodesRef.current;
+    const existingMaxX = existingNodes.length
+      ? Math.max(...existingNodes.map((node) => node.position?.x ?? 0))
+      : 0;
+    const existingMinY = existingNodes.length
+      ? Math.min(...existingNodes.map((node) => node.position?.y ?? 0))
+      : 0;
+
+    const insertionX = existingNodes.length > 0 ? existingMaxX + 320 : 200;
+    const insertionY = existingNodes.length > 0 ? existingMinY : 200;
+
+    const idMap = new Map<string, string>();
+    const allocateIdentity = createIdentityAllocator(nodesRef.current);
+
+    const remappedNodes = libraryEntry.nodes.map((node) => {
+      const baseLabel =
+        typeof node.data?.label === "string" && node.data.label.length > 0
+          ? node.data.label
+          : typeof node.data?.type === "string" && node.data.type.length > 0
+            ? `${node.data.type} Node`
+            : DEFAULT_NODE_LABEL;
+      const { id: newId, label } = allocateIdentity(baseLabel);
+      idMap.set(node.id, newId);
+
+      return {
+        ...node,
+        id: newId,
+        position: {
+          x: insertionX + ((node.position?.x ?? 0) - templateMinX),
+          y: insertionY + ((node.position?.y ?? 0) - templateMinY),
+        },
+        data: {
+          ...node.data,
+          type: node.data?.type ?? node.type ?? "default",
+          status: "idle",
+          label,
+        },
+      } as PersistedWorkflowNode;
+    });
+
+    const remappedEdges = libraryEntry.edges.map((edge) => ({
+      ...edge,
+      id: generateRandomId("edge"),
+      source: idMap.get(edge.source) ?? edge.source,
+      target: idMap.get(edge.target) ?? edge.target,
+    }));
+
+    const canvasNodes = convertPersistedNodesToCanvas(remappedNodes);
+    const canvasEdges = convertPersistedEdgesToCanvas(remappedEdges);
+
+    setNodes((current) => [...current, ...canvasNodes]);
+    setEdges((current) => [...current, ...canvasEdges]);
+
+    setSubworkflows((prev) =>
+      prev.map((template) =>
+        template.id === subworkflow.id
+          ? {
+              ...template,
+              usageCount: template.usageCount + 1,
+              lastUpdated: new Date().toISOString(),
+            }
+          : template,
+      ),
+    );
+
+    if (canvasNodes.length > 0) {
+      setSelectedNodeId(canvasNodes[0].id);
+      setActiveTab("canvas");
+
+      const instance = reactFlowInstance.current;
+      if (instance) {
+        const insertedXs = canvasNodes.map((node) => node.position.x);
+        const insertedYs = canvasNodes.map((node) => node.position.y);
+        const minX = Math.min(...insertedXs);
+        const maxX = Math.max(...insertedXs);
+        const minY = Math.min(...insertedYs);
+        const maxY = Math.max(...insertedYs);
+        const centerX = minX + (maxX - minX) / 2;
+        const centerY = minY + (maxY - minY) / 2;
+
+        instance.setCenter(centerX, centerY, {
+          zoom: 1.15,
+          duration: 400,
+        });
+      }
+    }
+
+    toast({
+      title: `${subworkflow.name} inserted`,
+      description: `Added ${canvasNodes.length} nodes and ${canvasEdges.length} connections to the canvas.`,
+    });
+  };

package/src/features/workflow/pages/workflow-canvas/handlers/validation.ts

@@ -0,0 +1,175 @@
+import type React from "react";
+import type { Connection, Node, ReactFlowInstance } from "@xyflow/react";
+
+import { toast } from "@/hooks/use-toast";
+import {
+  validateConnection,
+  validateNodeCredentials,
+  type ValidationError,
+} from "@features/workflow/components/canvas/connection-validator";
+import { generateRandomId } from "@features/workflow/pages/workflow-canvas/helpers/id";
+import type {
+  CanvasEdge,
+  CanvasNode,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+type Getter<T> = () => T;
+
+type RunValidationDependencies = {
+  getNodes: Getter<CanvasNode[]>;
+  getEdges: Getter<CanvasEdge[]>;
+  setValidationErrors: React.Dispatch<React.SetStateAction<ValidationError[]>>;
+  setIsValidating: React.Dispatch<React.SetStateAction<boolean>>;
+  setLastValidationRun: React.Dispatch<React.SetStateAction<string | null>>;
+};
+
+export const createRunPublishValidation =
+  ({
+    getNodes,
+    getEdges,
+    setValidationErrors,
+    setIsValidating,
+    setLastValidationRun,
+  }: RunValidationDependencies) =>
+  () => {
+    setIsValidating(true);
+
+    window.setTimeout(() => {
+      const nodes = getNodes();
+      const edges = getEdges();
+
+      const normalizedNodes = nodes.map((node) => ({
+        ...node,
+        data: {
+          ...node.data,
+          label:
+            typeof node.data.label === "string"
+              ? node.data.label
+              : ((node.data as { label?: unknown; name?: unknown }).label ??
+                (node.data as { name?: unknown }).name ??
+                node.id),
+          credentials:
+            (node.data as { credentials?: { id?: string } | null })
+              .credentials ?? null,
+        },
+      }));
+
+      const evaluatedEdges: CanvasEdge[] = [];
+      const connectionErrors = edges
+        .map((edge) => {
+          const error = validateConnection(
+            {
+              source: edge.source,
+              target: edge.target,
+              sourceHandle: edge.sourceHandle ?? null,
+              targetHandle: edge.targetHandle ?? null,
+            } as Connection,
+            normalizedNodes as unknown as Node<{
+              type?: string;
+              label?: string;
+              credentials?: { id?: string } | null;
+            }>[],
+            evaluatedEdges,
+          );
+
+          evaluatedEdges.push(edge);
+
+          return error;
+        })
+        .filter((error): error is ValidationError => Boolean(error));
+
+      const credentialErrors = normalizedNodes
+        .map((node) =>
+          validateNodeCredentials(
+            node as unknown as Node<{
+              type?: string;
+              label?: string;
+              credentials?: { id?: string } | null;
+            }>,
+          ),
+        )
+        .filter((error): error is ValidationError => Boolean(error));
+
+      const readinessErrors = [...connectionErrors, ...credentialErrors];
+
+      if (nodes.length === 0) {
+        readinessErrors.push({
+          id: generateRandomId("validation"),
+          type: "node",
+          message: "Add at least one node before publishing the workflow.",
+        });
+      }
+
+      setValidationErrors(readinessErrors);
+      setIsValidating(false);
+      const completedAt = new Date().toISOString();
+      setLastValidationRun(completedAt);
+
+      toast({
+        title:
+          readinessErrors.length === 0
+            ? "Workflow passed all validation checks"
+            : `Validation found ${readinessErrors.length} issue${
+                readinessErrors.length === 1 ? "" : "s"
+              }`,
+        description:
+          readinessErrors.length === 0
+            ? "You can proceed to publish once final reviews are complete."
+            : "Resolve the flagged items from the Readiness tab or directly on the canvas.",
+      });
+    }, 250);
+  };
+
+type DismissValidationDependencies = {
+  setValidationErrors: React.Dispatch<React.SetStateAction<ValidationError[]>>;
+};
+
+export const createHandleDismissValidation =
+  ({ setValidationErrors }: DismissValidationDependencies) =>
+  (id: string) => {
+    setValidationErrors((prev) => prev.filter((error) => error.id !== id));
+  };
+
+type FixValidationDependencies = {
+  getNodes: Getter<CanvasNode[]>;
+  setActiveTab: React.Dispatch<React.SetStateAction<string>>;
+  setSelectedNodeId: React.Dispatch<React.SetStateAction<string | null>>;
+  reactFlowInstance: React.MutableRefObject<ReactFlowInstance<
+    CanvasNode,
+    CanvasEdge
+  > | null>;
+};
+
+export const createHandleFixValidation =
+  ({
+    getNodes,
+    setActiveTab,
+    setSelectedNodeId,
+    reactFlowInstance,
+  }: FixValidationDependencies) =>
+  (error: ValidationError) => {
+    setActiveTab("canvas");
+    const nodes = getNodes();
+
+    if (error.nodeId) {
+      const nodeToFocus = nodes.find((node) => node.id === error.nodeId);
+      if (nodeToFocus) {
+        setSelectedNodeId(nodeToFocus.id);
+        requestAnimationFrame(() => {
+          reactFlowInstance.current?.setCenter(
+            nodeToFocus.position.x + (nodeToFocus.width ?? 0) / 2,
+            nodeToFocus.position.y + (nodeToFocus.height ?? 0) / 2,
+            { zoom: 1.15, duration: 400 },
+          );
+        });
+      }
+      return;
+    }
+
+    if (error.sourceId && error.targetId) {
+      toast({
+        title: "Review the highlighted connection",
+        description: `${error.sourceId} → ${error.targetId} needs to be updated before publishing.`,
+      });
+    }
+  };

package/src/features/workflow/pages/workflow-canvas/helpers/clipboard.ts

@@ -0,0 +1,85 @@
+import type { CanvasEdge, CanvasNode, WorkflowClipboardPayload } from "./types";
+import { toPersistedEdge, toPersistedNode } from "./transformers";
+
+export const WORKFLOW_CLIPBOARD_HEADER = "ORCHEO_WORKFLOW_CLIPBOARD_V1:";
+export const PASTE_BASE_OFFSET = 40;
+export const PASTE_OFFSET_INCREMENT = 24;
+export const PASTE_OFFSET_MAX_STEPS = 5;
+
+export const encodeClipboardPayload = (payload: WorkflowClipboardPayload) =>
+  `${WORKFLOW_CLIPBOARD_HEADER}${JSON.stringify(payload)}`;
+
+export const decodeClipboardPayloadString = (
+  serialized: string,
+): WorkflowClipboardPayload | null => {
+  if (typeof serialized !== "string") {
+    return null;
+  }
+
+  const trimmed = serialized.trim();
+  if (trimmed.length === 0) {
+    return null;
+  }
+
+  const payloadString = trimmed.startsWith(WORKFLOW_CLIPBOARD_HEADER)
+    ? trimmed.slice(WORKFLOW_CLIPBOARD_HEADER.length)
+    : trimmed;
+
+  try {
+    const parsed = JSON.parse(
+      payloadString,
+    ) as Partial<WorkflowClipboardPayload>;
+    if (
+      parsed &&
+      parsed.version === 1 &&
+      parsed.type === "workflow-selection" &&
+      Array.isArray(parsed.nodes) &&
+      Array.isArray(parsed.edges)
+    ) {
+      return {
+        version: 1,
+        type: "workflow-selection",
+        nodes: parsed.nodes,
+        edges: parsed.edges,
+        copiedAt:
+          typeof parsed.copiedAt === "number" ? parsed.copiedAt : undefined,
+      } as WorkflowClipboardPayload;
+    }
+  } catch {
+    return null;
+  }
+
+  return null;
+};
+
+export const buildClipboardPayload = (
+  nodesToPersist: ReturnType<typeof toPersistedNode>[],
+  edgesToPersist: ReturnType<typeof toPersistedEdge>[],
+): WorkflowClipboardPayload => ({
+  version: 1,
+  type: "workflow-selection",
+  nodes: nodesToPersist,
+  edges: edgesToPersist,
+  copiedAt: Date.now(),
+});
+
+export const signatureFromClipboardPayload = (
+  payload: WorkflowClipboardPayload,
+) =>
+  typeof payload.copiedAt === "number"
+    ? `ts:${payload.copiedAt}`
+    : `ids:${payload.nodes
+        .map((node) => node.id)
+        .sort()
+        .join("|")}`;
+
+export const cloneNode = (node: CanvasNode): CanvasNode => ({
+  ...node,
+  position: node.position ? { ...node.position } : node.position,
+  data: node.data ? { ...node.data } : node.data,
+});
+
+export const cloneEdge = (edge: CanvasEdge): CanvasEdge => ({
+  ...edge,
+  data: edge.data ? { ...edge.data } : edge.data,
+});

package/src/features/workflow/pages/workflow-canvas/helpers/execution.ts

@@ -0,0 +1,39 @@
+import type { NodeStatus, WorkflowExecutionStatus } from "./types";
+
+export const nodeStatusFromValue = (value?: string): NodeStatus => {
+  const normalised = value?.toLowerCase();
+  switch (normalised) {
+    case "running":
+      return "running";
+    case "error":
+    case "failed":
+      return "error";
+    case "warning":
+    case "cancelled":
+    case "partial":
+      return "warning";
+    default:
+      return "success";
+  }
+};
+
+export const executionStatusFromValue = (
+  value?: string,
+): WorkflowExecutionStatus | null => {
+  const normalised = value?.toLowerCase();
+  switch (normalised) {
+    case "running":
+      return "running";
+    case "completed":
+    case "success":
+      return "success";
+    case "error":
+    case "failed":
+      return "failed";
+    case "cancelled":
+    case "partial":
+      return "partial";
+    default:
+      return null;
+  }
+};

package/src/features/workflow/pages/workflow-canvas/helpers/id.ts

@@ -0,0 +1,15 @@
+export const generateRandomId = (prefix: string) => {
+  if (
+    typeof globalThis.crypto !== "undefined" &&
+    "randomUUID" in globalThis.crypto &&
+    typeof globalThis.crypto.randomUUID === "function"
+  ) {
+    return `${prefix}-${globalThis.crypto.randomUUID()}`;
+  }
+
+  const timestamp = Date.now().toString(36);
+  const randomSuffix = Math.random().toString(36).slice(2, 8);
+  return `${prefix}-${timestamp}-${randomSuffix}`;
+};
+
+export const generateNodeId = () => generateRandomId("node");