orcheo-canvas 0.0.1

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

@@ -0,0 +1,96 @@
+import { toast } from "@/hooks/use-toast";
+import {
+  buildClipboardPayload,
+  encodeClipboardPayload,
+  signatureFromClipboardPayload,
+} from "@features/workflow/pages/workflow-canvas/helpers/clipboard";
+import {
+  toPersistedEdge,
+  toPersistedNode,
+} from "@features/workflow/pages/workflow-canvas/helpers/transformers";
+import type {
+  CanvasEdge,
+  CanvasNode,
+  CopyClipboardOptions,
+  CopyClipboardResult,
+  WorkflowClipboardPayload,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+interface CopySelectionOptions {
+  nodesToCopy: CanvasNode[];
+  edges: CanvasEdge[];
+  copyOptions?: CopyClipboardOptions;
+}
+
+interface CopySelectionResult {
+  result: CopyClipboardResult;
+  payload: WorkflowClipboardPayload;
+  signature: string;
+}
+
+export async function copySelectionToClipboard(
+  options: CopySelectionOptions,
+): Promise<CopySelectionResult | null> {
+  const { nodesToCopy, edges, copyOptions = {} } = options;
+
+  if (nodesToCopy.length === 0) {
+    toast({
+      title: "No nodes selected",
+      description: "Select at least one node to copy.",
+      variant: "destructive",
+    });
+    return null;
+  }
+
+  const selectedIds = new Set(nodesToCopy.map((node) => node.id));
+  const persistedNodes = nodesToCopy.map(toPersistedNode);
+  const persistedEdges = edges
+    .filter(
+      (edge) => selectedIds.has(edge.source) && selectedIds.has(edge.target),
+    )
+    .map(toPersistedEdge);
+
+  const payload = buildClipboardPayload(persistedNodes, persistedEdges);
+  const signature = signatureFromClipboardPayload(payload);
+
+  let systemClipboardCopied = false;
+
+  if (
+    typeof navigator !== "undefined" &&
+    navigator.clipboard &&
+    typeof navigator.clipboard.writeText === "function"
+  ) {
+    try {
+      await navigator.clipboard.writeText(encodeClipboardPayload(payload));
+      systemClipboardCopied = true;
+    } catch (error) {
+      console.warn("Failed to write workflow selection to clipboard", error);
+    }
+  }
+
+  if (!copyOptions.skipSuccessToast) {
+    toast({
+      title: nodesToCopy.length === 1 ? "Node copied" : "Nodes copied",
+      description: `${nodesToCopy.length} node${
+        nodesToCopy.length === 1 ? "" : "s"
+      } copied${systemClipboardCopied ? "" : " (available for in-app paste)"}.`,
+    });
+  } else if (!systemClipboardCopied) {
+    toast({
+      title: "Nodes copied (in-app clipboard)",
+      description:
+        "System clipboard unavailable. Paste with Ctrl/Cmd+V in this tab.",
+    });
+  }
+
+  return {
+    payload,
+    signature,
+    result: {
+      success: true,
+      nodeCount: nodesToCopy.length,
+      edgeCount: persistedEdges.length,
+      usedFallback: !systemClipboardCopied,
+    },
+  };
+}

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

@@ -0,0 +1,109 @@
+import {
+  PASTE_BASE_OFFSET,
+  PASTE_OFFSET_INCREMENT,
+  PASTE_OFFSET_MAX_STEPS,
+} from "@features/workflow/pages/workflow-canvas/helpers/clipboard";
+import { generateRandomId } from "@features/workflow/pages/workflow-canvas/helpers/id";
+import {
+  createIdentityAllocator,
+  sanitizeLabel,
+} from "@features/workflow/pages/workflow-canvas/helpers/node-identity";
+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";
+
+interface PreparePasteOptions {
+  payload: WorkflowClipboardPayload;
+  existingNodes: CanvasNode[];
+  pasteStep: number;
+  convertPersistedNodesToCanvas: (
+    nodes: PersistedWorkflowNode[],
+  ) => CanvasNode[];
+  convertPersistedEdgesToCanvas: (
+    edges: PersistedWorkflowEdge[],
+  ) => CanvasEdge[];
+}
+
+interface PreparePasteResult {
+  nodes: CanvasNode[];
+  edges: CanvasEdge[];
+  nextStep: number;
+}
+
+export function preparePasteSelection(
+  options: PreparePasteOptions,
+): PreparePasteResult | null {
+  const {
+    payload,
+    existingNodes,
+    pasteStep,
+    convertPersistedNodesToCanvas,
+    convertPersistedEdgesToCanvas,
+  } = options;
+
+  if (payload.nodes.length === 0) {
+    return null;
+  }
+
+  const offset = PASTE_BASE_OFFSET + pasteStep * PASTE_OFFSET_INCREMENT;
+  const nextStep = Math.min(pasteStep + 1, PASTE_OFFSET_MAX_STEPS);
+  const idMap = new Map<string, string>();
+  const allocateIdentity = createIdentityAllocator(existingNodes);
+
+  const remappedNodes = payload.nodes.map((node) => {
+    const baseLabel =
+      typeof node.data?.label === "string" && node.data.label.trim().length > 0
+        ? node.data.label
+        : sanitizeLabel(node.id);
+    const { id: newId, label } = allocateIdentity(baseLabel);
+    idMap.set(node.id, newId);
+    const position = node.position ?? { x: 0, y: 0 };
+    return {
+      ...node,
+      id: newId,
+      position: {
+        x: position.x + offset,
+        y: position.y + offset,
+      },
+      data: {
+        ...node.data,
+        label,
+      },
+    };
+  });
+
+  const remappedEdges = payload.edges
+    .map((edge) => {
+      const sourceId = idMap.get(edge.source);
+      const targetId = idMap.get(edge.target);
+      if (!sourceId || !targetId) {
+        return null;
+      }
+      return {
+        ...edge,
+        id: generateRandomId("edge"),
+        source: sourceId,
+        target: targetId,
+      };
+    })
+    .filter(Boolean) as PersistedWorkflowEdge[];
+
+  const canvasNodes = convertPersistedNodesToCanvas(remappedNodes);
+  const canvasEdges = convertPersistedEdgesToCanvas(remappedEdges);
+
+  if (canvasNodes.length === 0) {
+    return null;
+  }
+
+  return {
+    nodes: canvasNodes,
+    edges: canvasEdges,
+    nextStep,
+  };
+}

package/src/features/workflow/pages/workflow-canvas/hooks/workflow-runner-websocket.ts

@@ -0,0 +1,146 @@
+import { toast } from "@/hooks/use-toast";
+
+import type { MutableRefObject } from "react";
+
+import type {
+  CanvasNode,
+  NodeStatus,
+  WorkflowExecution,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+import type { TraceUpdateMessage } from "@features/workflow/pages/workflow-canvas/helpers/trace";
+
+interface WebSocketParams {
+  ws: WebSocket;
+  executionId: string;
+  config: Record<string, unknown>;
+  graphToCanvas: Record<string, string>;
+  nodes: CanvasNode[];
+  currentWorkflowId: string | null;
+  isMountedRef: MutableRefObject<boolean>;
+  applyExecutionUpdate: (
+    executionId: string,
+    payload: Record<string, unknown>,
+    graphToCanvas: Record<string, string>,
+  ) => void;
+  setIsRunning: React.Dispatch<React.SetStateAction<boolean>>;
+  setExecutions: React.Dispatch<React.SetStateAction<WorkflowExecution[]>>;
+  websocketRef: MutableRefObject<WebSocket | null>;
+  onTraceUpdate?: (update: TraceUpdateMessage) => void;
+}
+
+export function setupExecutionWebSocket({
+  ws,
+  executionId,
+  config,
+  graphToCanvas,
+  nodes,
+  currentWorkflowId,
+  isMountedRef,
+  applyExecutionUpdate,
+  setIsRunning,
+  setExecutions,
+  websocketRef,
+  onTraceUpdate,
+}: WebSocketParams) {
+  const startTime = new Date();
+
+  ws.onopen = () => {
+    const payload = {
+      type: "run_workflow",
+      graph_config: config,
+      inputs: {
+        canvas: {
+          triggered_from: "canvas-app",
+          workflow_id: currentWorkflowId ?? "canvas-preview",
+          at: startTime.toISOString(),
+        },
+        metadata: {
+          node_count: nodes.length,
+          edge_count: graphToCanvas ? Object.keys(graphToCanvas).length : 0,
+        },
+      },
+      execution_id: executionId,
+    };
+    ws.send(JSON.stringify(payload));
+  };
+
+  ws.onmessage = (event) => {
+    if (!isMountedRef.current) {
+      return;
+    }
+    try {
+      const data = JSON.parse(event.data) as Record<string, unknown>;
+      if (data?.type === "trace:update") {
+        onTraceUpdate?.(data as TraceUpdateMessage);
+        return;
+      }
+      applyExecutionUpdate(executionId, data, graphToCanvas);
+    } catch (error) {
+      console.error("Failed to parse workflow update", error);
+      toast({
+        title: "Workflow update error",
+        description:
+          error instanceof Error ? error.message : "Unknown parsing error",
+        variant: "destructive",
+      });
+    }
+  };
+
+  ws.onerror = () => {
+    if (!isMountedRef.current) {
+      return;
+    }
+    const timestamp = new Date();
+    setIsRunning(false);
+    setExecutions((prev) =>
+      prev.map((execution) => {
+        if (execution.id !== executionId) {
+          return execution;
+        }
+        const errorLog = {
+          timestamp: timestamp.toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+          }),
+          level: "ERROR" as const,
+          message: "WebSocket connection reported an error.",
+        };
+        const updatedNodes = execution.nodes.map((node) =>
+          node.status === "running"
+            ? { ...node, status: "error" as NodeStatus }
+            : node,
+        );
+        return {
+          ...execution,
+          status: execution.status === "success" ? execution.status : "failed",
+          nodes: updatedNodes,
+          logs: [...execution.logs, errorLog],
+          endTime: execution.endTime ?? timestamp.toISOString(),
+          duration:
+            timestamp.getTime() - new Date(execution.startTime).getTime(),
+          issues: execution.issues + 1,
+        };
+      }),
+    );
+    toast({
+      title: "Workflow stream error",
+      description: "The WebSocket connection reported an error.",
+      variant: "destructive",
+    });
+    if (websocketRef.current === ws) {
+      websocketRef.current.close();
+      websocketRef.current = null;
+    }
+  };
+
+  ws.onclose = () => {
+    if (!isMountedRef.current) {
+      return;
+    }
+    setIsRunning(false);
+    if (websocketRef.current === ws) {
+      websocketRef.current = null;
+    }
+  };
+}

package/src/features/workflow/pages/workflow-canvas.test.tsx

@@ -0,0 +1,194 @@
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import WorkflowCanvas from "./workflow-canvas";
+
+class ResizeObserverMock {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+beforeAll(() => {
+  Object.defineProperty(globalThis, "ResizeObserver", {
+    configurable: true,
+    writable: true,
+    value: ResizeObserverMock,
+  });
+  class WebSocketMock {
+    static CONNECTING = 0;
+    static OPEN = 1;
+    static CLOSING = 2;
+    static CLOSED = 3;
+
+    readyState = WebSocketMock.CONNECTING;
+    url: string;
+    sent: string[] = [];
+    onopen: ((event: Event) => void) | null = null;
+    onmessage: ((event: MessageEvent<string>) => void) | null = null;
+    onerror: ((event: Event) => void) | null = null;
+    onclose: ((event: Event) => void) | null = null;
+
+    constructor(url: string) {
+      this.url = url;
+      queueMicrotask(() => {
+        this.readyState = WebSocketMock.OPEN;
+        this.onopen?.(new Event("open"));
+      });
+    }
+
+    send(data: string) {
+      this.sent.push(data);
+    }
+
+    close() {
+      this.readyState = WebSocketMock.CLOSED;
+      this.onclose?.(new Event("close"));
+    }
+
+    addEventListener() {}
+
+    removeEventListener() {}
+
+    dispatchEvent() {
+      return true;
+    }
+  }
+
+  Object.defineProperty(globalThis, "WebSocket", {
+    configurable: true,
+    writable: true,
+    value: WebSocketMock,
+  });
+  if (!globalThis.crypto) {
+    Object.defineProperty(globalThis, "crypto", {
+      value: {},
+    });
+  }
+  if (!globalThis.crypto.randomUUID) {
+    Object.defineProperty(globalThis.crypto, "randomUUID", {
+      value: vi.fn(
+        () => `test-node-${Math.random().toString(36).slice(2, 10)}`,
+      ),
+    });
+  }
+  if (!URL.createObjectURL) {
+    Object.defineProperty(URL, "createObjectURL", {
+      value: vi.fn(() => "blob:mock"),
+    });
+  }
+  if (!URL.revokeObjectURL) {
+    Object.defineProperty(URL, "revokeObjectURL", {
+      value: vi.fn(),
+    });
+  }
+  Object.defineProperty(window.HTMLElement.prototype, "scrollIntoView", {
+    value: vi.fn(),
+    configurable: true,
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+const renderCanvas = () => {
+  const initialNodes = [
+    {
+      id: "node-1",
+      type: "default" as const,
+      position: { x: 0, y: 0 },
+      data: { type: "default", label: "Initial Node", status: "idle" as const },
+      selected: true,
+      draggable: true,
+    },
+  ];
+
+  return render(
+    <MemoryRouter initialEntries={["/workflow-canvas"]}>
+      <Routes>
+        <Route
+          path="/workflow-canvas"
+          element={<WorkflowCanvas initialNodes={initialNodes} />}
+        />
+      </Routes>
+    </MemoryRouter>,
+  );
+};
+
+describe("WorkflowCanvas editing history", () => {
+  it("supports undo and redo via buttons", async () => {
+    renderCanvas();
+
+    const initialNodes = await screen.findAllByText("Initial Node");
+    expect(initialNodes.length).toBeGreaterThan(0);
+
+    // Verify undo and redo buttons start disabled (no history yet)
+    const undoButton = screen.getByRole("button", { name: /undo/i });
+    const redoButton = screen.getByRole("button", { name: /redo/i });
+
+    expect(undoButton).toBeDisabled();
+    expect(redoButton).toBeDisabled();
+  });
+
+  it("supports keyboard shortcuts for undo and redo", async () => {
+    renderCanvas();
+
+    const initialNodes = await screen.findAllByText("Initial Node");
+    expect(initialNodes.length).toBeGreaterThan(0);
+
+    // Verify buttons exist and are initially disabled
+    const undoButtons = screen.getAllByRole("button", { name: /undo/i });
+    const redoButtons = screen.getAllByRole("button", { name: /redo/i });
+
+    expect(undoButtons[0]).toBeDisabled();
+    expect(redoButtons[0]).toBeDisabled();
+  });
+
+  it("opens the node search overlay from toolbar", async () => {
+    renderCanvas();
+
+    const searchButtons = await screen.findAllByRole("button", {
+      name: /search nodes/i,
+    });
+    const searchButton = searchButtons[0];
+    fireEvent.click(searchButton);
+
+    const searchPanels = await screen.findAllByTestId("workflow-search");
+    const searchInput = within(searchPanels[0]).getByPlaceholderText(
+      "Search nodes...",
+    );
+    fireEvent.change(searchInput, { target: { value: "Initial" } });
+
+    await waitFor(() => {
+      const matches = document.querySelectorAll('[data-search-match="true"]');
+      expect(matches.length).toBeGreaterThan(0);
+    });
+  });
+
+  it("opens the search overlay with ctrl+f", async () => {
+    renderCanvas();
+
+    await screen.findAllByRole("button", { name: /search nodes/i });
+
+    fireEvent.keyDown(document, { key: "f", ctrlKey: true });
+
+    const searchPanels = await screen.findAllByTestId("workflow-search");
+
+    expect(searchPanels.length).toBeGreaterThan(0);
+  });
+
+  it("renders the trace tab in the workflow tabs", async () => {
+    renderCanvas();
+
+    const traceTabs = await screen.findAllByRole("tab", { name: /trace/i });
+    expect(traceTabs.length).toBeGreaterThan(0);
+  });
+});

package/src/features/workflow/pages/workflow-canvas.tsx

@@ -0,0 +1,23 @@
+import { WorkflowCanvasLayout } from "@features/workflow/pages/workflow-canvas/components/workflow-canvas-layout";
+import { useWorkflowCanvasController } from "@features/workflow/pages/workflow-canvas/hooks/controller/use-workflow-canvas-controller";
+
+import type {
+  CanvasEdge,
+  CanvasNode,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+interface WorkflowCanvasProps {
+  initialNodes?: CanvasNode[];
+  initialEdges?: CanvasEdge[];
+}
+
+export default function WorkflowCanvas({
+  initialNodes = [],
+  initialEdges = [],
+}: WorkflowCanvasProps) {
+  const { layoutProps } = useWorkflowCanvasController(
+    initialNodes,
+    initialEdges,
+  );
+  return <WorkflowCanvasLayout {...layoutProps} />;
+}