orcheo-canvas 0.0.1

package/src/features/workflow/lib/workflow-storage-helpers.ts

@@ -0,0 +1,207 @@
+import type { Edge as CanvasEdge, Node as CanvasNode } from "@xyflow/react";
+import {
+  type Workflow,
+  type WorkflowEdge,
+  type WorkflowNode,
+} from "@features/workflow/data/workflow-data";
+import type { WorkflowDiffResult, WorkflowSnapshot } from "./workflow-diff";
+import {
+  DEFAULT_OWNER,
+  DEFAULT_SUMMARY,
+  HISTORY_LIMIT,
+} from "./workflow-storage.constants";
+import type {
+  ApiWorkflow,
+  ApiWorkflowVersion,
+  CanvasVersionMetadata,
+  StoredWorkflow,
+  WorkflowVersionRecord,
+} from "./workflow-storage.types";
+
+export const ensureArray = <T>(value: T[] | undefined): T[] =>
+  Array.isArray(value) ? value : [];
+
+export const cloneNodes = (nodes: WorkflowNode[]): WorkflowNode[] =>
+  nodes.map((node) => ({
+    ...node,
+    position: { ...node.position },
+    data: { ...node.data },
+  }));
+
+export const cloneEdges = (edges: WorkflowEdge[]): WorkflowEdge[] =>
+  edges.map((edge) => ({ ...edge }));
+
+export const emptySnapshot = (
+  name: string,
+  description?: string,
+): WorkflowSnapshot => ({
+  name,
+  description,
+  nodes: [],
+  edges: [],
+});
+
+const toVersionLabel = (version: number): string =>
+  `v${version.toString().padStart(2, "0")}`;
+
+const toAuthor = (id: string | undefined): Workflow["owner"] => {
+  if (!id) {
+    return { ...DEFAULT_OWNER };
+  }
+  return {
+    ...DEFAULT_OWNER,
+    id: id || DEFAULT_OWNER.id,
+    name: id || DEFAULT_OWNER.name,
+  };
+};
+
+export const toCanvasNodes = (nodes: WorkflowNode[]): CanvasNode[] =>
+  nodes.map(
+    (node) =>
+      ({
+        id: node.id,
+        type: node.type,
+        position: node.position,
+        data: node.data,
+      }) satisfies CanvasNode,
+  );
+
+export const toCanvasEdges = (edges: WorkflowEdge[]): CanvasEdge[] =>
+  edges.map(
+    (edge) =>
+      ({
+        id: edge.id,
+        source: edge.source,
+        target: edge.target,
+        sourceHandle: edge.sourceHandle,
+        targetHandle: edge.targetHandle,
+        label: edge.label,
+        type: edge.type,
+      }) satisfies CanvasEdge,
+  );
+
+const parseCanvasMetadata = (
+  metadata: unknown,
+  fallbackName: string,
+  fallbackDescription?: string,
+): CanvasVersionMetadata => {
+  if (!metadata || typeof metadata !== "object") {
+    return {
+      snapshot: emptySnapshot(fallbackName, fallbackDescription),
+      summary: { ...DEFAULT_SUMMARY },
+    };
+  }
+
+  const canvas = (metadata as Record<string, unknown>).canvas;
+  if (!canvas || typeof canvas !== "object") {
+    return {
+      snapshot: emptySnapshot(fallbackName, fallbackDescription),
+      summary: { ...DEFAULT_SUMMARY },
+    };
+  }
+
+  const canvasRecord = canvas as Record<string, unknown>;
+  const snapshotPayload = canvasRecord.snapshot as WorkflowSnapshot | undefined;
+  const summaryPayload = canvasRecord.summary as
+    | WorkflowDiffResult["summary"]
+    | undefined;
+  const messagePayload = canvasRecord.message as string | undefined;
+  const canvasToGraph = canvasRecord.canvasToGraph as
+    | Record<string, string>
+    | undefined;
+  const graphToCanvas = canvasRecord.graphToCanvas as
+    | Record<string, string>
+    | undefined;
+
+  const snapshot = snapshotPayload
+    ? {
+        name:
+          typeof snapshotPayload.name === "string"
+            ? snapshotPayload.name
+            : fallbackName,
+        description:
+          typeof snapshotPayload.description === "string"
+            ? snapshotPayload.description
+            : fallbackDescription,
+        nodes: ensureArray(snapshotPayload.nodes),
+        edges: ensureArray(snapshotPayload.edges),
+      }
+    : emptySnapshot(fallbackName, fallbackDescription);
+
+  const summary = summaryPayload
+    ? {
+        added: summaryPayload.added ?? 0,
+        removed: summaryPayload.removed ?? 0,
+        modified: summaryPayload.modified ?? 0,
+      }
+    : { ...DEFAULT_SUMMARY };
+
+  return {
+    snapshot,
+    summary,
+    message: messagePayload,
+    canvasToGraph,
+    graphToCanvas,
+  };
+};
+
+const toVersionRecord = (
+  version: ApiWorkflowVersion,
+  workflowName: string,
+  workflowDescription?: string,
+): WorkflowVersionRecord => {
+  const metadata = parseCanvasMetadata(
+    version.metadata,
+    workflowName,
+    workflowDescription ?? undefined,
+  );
+
+  const message =
+    metadata.message ??
+    version.notes ??
+    `Updated from canvas on ${new Date(version.created_at).toLocaleString()}`;
+
+  return {
+    id: version.id,
+    version: toVersionLabel(version.version),
+    versionNumber: version.version,
+    timestamp: version.created_at,
+    message,
+    author: toAuthor(version.created_by),
+    summary: metadata.summary ?? { ...DEFAULT_SUMMARY },
+    snapshot:
+      metadata.snapshot ?? emptySnapshot(workflowName, workflowDescription),
+    graphToCanvas: metadata.graphToCanvas,
+  };
+};
+
+export const toStoredWorkflow = (
+  workflow: ApiWorkflow,
+  versions: ApiWorkflowVersion[],
+): StoredWorkflow => {
+  const versionRecords = versions
+    .map((entry) =>
+      toVersionRecord(entry, workflow.name, workflow.description ?? undefined),
+    )
+    .slice(-HISTORY_LIMIT);
+
+  const latestSnapshot =
+    versionRecords.at(-1)?.snapshot ??
+    emptySnapshot(workflow.name, workflow.description ?? undefined);
+
+  return {
+    id: workflow.id,
+    name: workflow.name,
+    description: workflow.description ?? undefined,
+    createdAt: workflow.created_at,
+    updatedAt: workflow.updated_at,
+    owner: toAuthor(undefined),
+    tags: ensureArray(workflow.tags),
+    nodes: cloneNodes(latestSnapshot.nodes),
+    edges: cloneEdges(latestSnapshot.edges),
+    versions: versionRecords,
+    sourceExample: undefined,
+    lastRun: undefined,
+    isArchived: workflow.is_archived,
+  };
+};

package/src/features/workflow/lib/workflow-storage-versioning.ts

@@ -0,0 +1,71 @@
+import { buildGraphConfigFromCanvas } from "./graph-config";
+import type { WorkflowDiffResult, WorkflowSnapshot } from "./workflow-diff";
+import {
+  toCanvasEdges,
+  toCanvasNodes,
+  toStoredWorkflow,
+} from "./workflow-storage-helpers";
+import {
+  API_BASE,
+  fetchWorkflow,
+  fetchWorkflowVersions,
+  request,
+} from "./workflow-storage-api";
+import type {
+  SaveWorkflowInput,
+  StoredWorkflow,
+} from "./workflow-storage.types";
+
+export const defaultVersionMessage = () =>
+  `Updated from canvas on ${new Date().toLocaleString()}`;
+
+export const ensureWorkflow = async (
+  workflowId: string,
+): Promise<StoredWorkflow | undefined> => {
+  const [workflow, versions] = await Promise.all([
+    fetchWorkflow(workflowId),
+    fetchWorkflowVersions(workflowId),
+  ]);
+  if (!workflow) {
+    return undefined;
+  }
+  return toStoredWorkflow(workflow, versions);
+};
+
+export const persistVersion = async (
+  workflowId: string,
+  input: SaveWorkflowInput,
+  snapshot: WorkflowSnapshot,
+  diff: WorkflowDiffResult,
+  actor: string,
+  message: string,
+) => {
+  const canvasNodes = toCanvasNodes(snapshot.nodes);
+  const canvasEdges = toCanvasEdges(snapshot.edges);
+  const { config, canvasToGraph, graphToCanvas, warnings } =
+    await buildGraphConfigFromCanvas(canvasNodes, canvasEdges);
+
+  if (warnings.length > 0) {
+    warnings.forEach((warning) => console.warn(warning));
+  }
+
+  await request(`${API_BASE}/${workflowId}/versions`, {
+    method: "POST",
+    body: JSON.stringify({
+      graph: config,
+      metadata: {
+        canvas: {
+          snapshot,
+          summary: diff.summary,
+          entries: diff.entries,
+          message,
+          canvasToGraph,
+          graphToCanvas,
+          tags: input.tags ?? [],
+        },
+      },
+      notes: message,
+      created_by: actor,
+    }),
+  });
+};

package/src/features/workflow/lib/workflow-storage.constants.ts

@@ -0,0 +1,21 @@
+import {
+  SAMPLE_WORKFLOWS,
+  type Workflow,
+} from "@features/workflow/data/workflow-data";
+import type { WorkflowDiffResult } from "./workflow-diff";
+
+export const DEFAULT_OWNER: Workflow["owner"] = SAMPLE_WORKFLOWS[0]?.owner ?? {
+  id: "canvas-owner",
+  name: "Canvas Author",
+  avatar: "https://avatar.vercel.sh/orcheo",
+};
+
+export const HISTORY_LIMIT = 20;
+export const DEFAULT_ACTOR = "canvas-app";
+export const DEFAULT_SUMMARY: WorkflowDiffResult["summary"] = {
+  added: 0,
+  removed: 0,
+  modified: 0,
+};
+
+export const WORKFLOW_STORAGE_EVENT = "orcheo:workflows-updated";

package/src/features/workflow/lib/workflow-storage.list.integration.test.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest";
+
+import { listWorkflows } from "./workflow-storage";
+import {
+  getFetchMock,
+  jsonResponse,
+  queueResponses,
+  setupFetchMock,
+} from "./workflow-storage.test-helpers";
+
+setupFetchMock();
+
+describe("workflow-storage API integration - list workflows", () => {
+  it("lists workflows by merging backing metadata", async () => {
+    const mockFetch = getFetchMock();
+    const timestamp = new Date().toISOString();
+    queueResponses([
+      jsonResponse([
+        {
+          id: "workflow-abc",
+          name: "Support triage",
+          slug: "workflow-abc",
+          description: "Routes support tickets to the right queue.",
+          tags: ["support"],
+          is_archived: false,
+          created_at: timestamp,
+          updated_at: timestamp,
+        },
+      ]),
+      jsonResponse([
+        {
+          id: "version-1",
+          workflow_id: "workflow-abc",
+          version: 1,
+          graph: {},
+          metadata: {
+            canvas: {
+              snapshot: {
+                name: "Support triage",
+                description: "Routes support tickets to the right queue.",
+                nodes: [
+                  {
+                    id: "start",
+                    type: "trigger",
+                    position: { x: 0, y: 0 },
+                    data: { label: "Start" },
+                  },
+                ],
+                edges: [],
+              },
+              summary: { added: 0, removed: 0, modified: 0 },
+              message: "Initial draft",
+            },
+          },
+          notes: null,
+          created_by: "canvas-app",
+          created_at: timestamp,
+          updated_at: timestamp,
+        },
+      ]),
+    ]);
+
+    const workflows = await listWorkflows();
+
+    expect(workflows).toHaveLength(1);
+    expect(workflows[0]?.nodes).toHaveLength(1);
+    expect(workflows[0]?.versions[0]?.summary.modified).toBe(0);
+    expect(mockFetch).toHaveBeenCalledTimes(2);
+  });
+});

package/src/features/workflow/lib/workflow-storage.sanitized-save.integration.test.ts

@@ -0,0 +1,116 @@
+import { describe, expect, it } from "vitest";
+
+import { saveWorkflow } from "./workflow-storage";
+import {
+  getFetchMock,
+  jsonResponse,
+  queueResponses,
+  setupFetchMock,
+} from "./workflow-storage.test-helpers";
+
+setupFetchMock();
+
+describe("workflow-storage API integration - sanitized nodes", () => {
+  it("saves nodes without runtime data or status when pre-sanitized", async () => {
+    const mockFetch = getFetchMock();
+    const timestamp = new Date().toISOString();
+    const sanitizedNodes = [
+      {
+        id: "node-1",
+        type: "default",
+        position: { x: 100, y: 100 },
+        data: {
+          type: "ai",
+          label: "AI Node",
+          description: "An AI node",
+          prompt: "Hello world",
+        },
+      },
+    ];
+
+    const snapshot = {
+      name: "Test Workflow",
+      description: "Test workflow with sanitized data",
+      nodes: sanitizedNodes,
+      edges: [],
+    };
+
+    queueResponses([
+      jsonResponse({
+        id: "workflow-456",
+        name: snapshot.name,
+        slug: "workflow-456",
+        description: snapshot.description,
+        tags: [],
+        is_archived: false,
+        created_at: timestamp,
+        updated_at: timestamp,
+      }),
+      jsonResponse({
+        id: "version-1",
+        workflow_id: "workflow-456",
+        version: 1,
+        graph: { nodes: [], edges: [] },
+        metadata: {},
+        notes: "Test save",
+        created_by: "canvas-app",
+        created_at: timestamp,
+        updated_at: timestamp,
+      }),
+      jsonResponse({
+        id: "workflow-456",
+        name: snapshot.name,
+        slug: "workflow-456",
+        description: snapshot.description,
+        tags: [],
+        is_archived: false,
+        created_at: timestamp,
+        updated_at: timestamp,
+      }),
+      jsonResponse([
+        {
+          id: "version-1",
+          workflow_id: "workflow-456",
+          version: 1,
+          graph: { nodes: [], edges: [] },
+          metadata: {
+            canvas: {
+              snapshot,
+              summary: { added: 0, removed: 0, modified: 0 },
+              message: "Test save",
+            },
+          },
+          notes: "Test save",
+          created_by: "canvas-app",
+          created_at: timestamp,
+          updated_at: timestamp,
+        },
+      ]),
+    ]);
+
+    await saveWorkflow(
+      {
+        name: snapshot.name,
+        description: snapshot.description,
+        tags: [],
+        nodes: sanitizedNodes,
+        edges: snapshot.edges,
+      },
+      { versionMessage: "Test save" },
+    );
+
+    const versionPayload = JSON.parse(
+      (mockFetch.mock.calls[1]?.[1]?.body ?? "{}") as string,
+    );
+
+    const savedNode = versionPayload.metadata.canvas.snapshot.nodes[0];
+
+    expect(savedNode).toBeDefined();
+    expect(savedNode.data.runtime).toBeUndefined();
+    expect(savedNode.data.status).toBeUndefined();
+    expect(savedNode.data.label).toBe("AI Node");
+    expect(savedNode.data.description).toBe("An AI node");
+    expect(savedNode.data.prompt).toBe("Hello world");
+    expect(savedNode.data.type).toBe("ai");
+  });
+});

package/src/features/workflow/lib/workflow-storage.save.integration.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it, vi } from "vitest";
+
+import { WORKFLOW_STORAGE_EVENT, saveWorkflow } from "./workflow-storage";
+import {
+  getFetchMock,
+  jsonResponse,
+  queueResponses,
+  setupFetchMock,
+} from "./workflow-storage.test-helpers";
+
+setupFetchMock();
+
+describe("workflow-storage API integration - save workflow", () => {
+  it("saves workflows by invoking the backend endpoints", async () => {
+    const mockFetch = getFetchMock();
+    const timestamp = new Date().toISOString();
+    const snapshot = {
+      name: "Marketing qualification",
+      description: "Scores inbound leads and routes them to reps.",
+      nodes: [
+        {
+          id: "trigger-1",
+          type: "trigger",
+          position: { x: 0, y: 0 },
+          data: {
+            type: "trigger",
+            label: "Webhook trigger",
+            description: "Starts the workflow when a webhook fires.",
+            status: "idle" as const,
+          },
+        },
+      ],
+      edges: [],
+    };
+
+    queueResponses([
+      jsonResponse({
+        id: "workflow-123",
+        name: snapshot.name,
+        slug: "workflow-123",
+        description: snapshot.description,
+        tags: ["draft"],
+        is_archived: false,
+        created_at: timestamp,
+        updated_at: timestamp,
+      }),
+      jsonResponse({
+        id: "version-1",
+        workflow_id: "workflow-123",
+        version: 1,
+        graph: { nodes: [], edges: [] },
+        metadata: {},
+        notes: "Initial draft",
+        created_by: "canvas-app",
+        created_at: timestamp,
+        updated_at: timestamp,
+      }),
+      jsonResponse({
+        id: "workflow-123",
+        name: snapshot.name,
+        slug: "workflow-123",
+        description: snapshot.description,
+        tags: ["draft"],
+        is_archived: false,
+        created_at: timestamp,
+        updated_at: timestamp,
+      }),
+      jsonResponse([
+        {
+          id: "version-1",
+          workflow_id: "workflow-123",
+          version: 1,
+          graph: { nodes: [], edges: [] },
+          metadata: {
+            canvas: {
+              snapshot,
+              summary: { added: 0, removed: 0, modified: 0 },
+              message: "Initial draft",
+            },
+          },
+          notes: "Initial draft",
+          created_by: "canvas-app",
+          created_at: timestamp,
+          updated_at: timestamp,
+        },
+      ]),
+    ]);
+
+    const listener = vi.fn();
+    window.addEventListener(WORKFLOW_STORAGE_EVENT, listener);
+
+    const saved = await saveWorkflow(
+      {
+        name: snapshot.name,
+        description: snapshot.description,
+        tags: ["draft"],
+        nodes: snapshot.nodes,
+        edges: snapshot.edges,
+      },
+      { versionMessage: "Initial draft" },
+    );
+
+    expect(saved.id).toBe("workflow-123");
+    expect(saved.versions).toHaveLength(1);
+    expect(saved.nodes).toHaveLength(1);
+    expect(listener).toHaveBeenCalled();
+
+    const versionPayload = JSON.parse(
+      (mockFetch.mock.calls[1]?.[1]?.body ?? "{}") as string,
+    );
+
+    expect(versionPayload.metadata.canvas.snapshot.nodes[0]?.id).toBe(
+      "trigger-1",
+    );
+
+    window.removeEventListener(WORKFLOW_STORAGE_EVENT, listener);
+
+    expect(mockFetch).toHaveBeenCalledTimes(4);
+    expect(String(mockFetch.mock.calls[0]?.[0])).toContain("/api/workflows");
+    expect(String(mockFetch.mock.calls[1]?.[0])).toContain(
+      "/api/workflows/workflow-123/versions",
+    );
+  });
+});

package/src/features/workflow/lib/workflow-storage.test-helpers.ts

@@ -0,0 +1,29 @@
+import { beforeEach, vi } from "vitest";
+
+const mockFetch = vi.fn<Parameters<typeof fetch>, ReturnType<typeof fetch>>();
+
+export const jsonResponse = (data: unknown, status = 200) =>
+  new Response(JSON.stringify(data), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+
+export const queueResponses = (responses: Response[]) => {
+  const queue = [...responses];
+  mockFetch.mockImplementation(() => {
+    const next = queue.shift();
+    if (!next) {
+      throw new Error("No more mocked responses available");
+    }
+    return Promise.resolve(next);
+  });
+};
+
+export const getFetchMock = () => mockFetch;
+
+export const setupFetchMock = () => {
+  beforeEach(() => {
+    mockFetch.mockReset();
+    globalThis.fetch = mockFetch as unknown as typeof fetch;
+  });
+};