orcheo-canvas 0.0.1

package/src/features/workflow/components/canvas/annotations-layer.tsx

@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+import { AnnotationComposer } from "./annotations-layer/annotation-composer";
+import { AnnotationList } from "./annotations-layer/annotation-list";
+import type { Annotation } from "./annotations-layer/types";
+
+interface AnnotationsLayerProps {
+  annotations?: Annotation[];
+  onAddAnnotation?: (annotation: Omit<Annotation, "id" | "createdAt">) => void;
+  onUpdateAnnotation?: (id: string, content: string) => void;
+  onDeleteAnnotation?: (id: string) => void;
+  readOnly?: boolean;
+  className?: string;
+}
+
+export default function AnnotationsLayer({
+  annotations = [],
+  onAddAnnotation,
+  onUpdateAnnotation,
+  onDeleteAnnotation,
+  readOnly = false,
+  className,
+}: AnnotationsLayerProps) {
+  const [isAddingAnnotation, setIsAddingAnnotation] = useState(false);
+  const [newAnnotationPosition, setNewAnnotationPosition] = useState({
+    x: 0,
+    y: 0,
+  });
+  const [newAnnotationContent, setNewAnnotationContent] = useState("");
+
+  const handleCanvasClick = (event: React.MouseEvent) => {
+    if (!isAddingAnnotation) {
+      return;
+    }
+
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    setNewAnnotationPosition({ x, y });
+  };
+
+  const exitAnnotationMode = () => {
+    setIsAddingAnnotation(false);
+    setNewAnnotationContent("");
+  };
+
+  const toggleAddMode = () => {
+    setIsAddingAnnotation((prev) => {
+      if (prev) {
+        setNewAnnotationContent("");
+      }
+      return !prev;
+    });
+  };
+
+  const handleAddAnnotation = () => {
+    if (!newAnnotationContent.trim() || !onAddAnnotation) {
+      return;
+    }
+
+    onAddAnnotation({
+      content: newAnnotationContent,
+      position: newAnnotationPosition,
+      author: {
+        name: "Current User",
+        avatar: "https://avatar.vercel.sh/avery",
+      },
+    });
+    exitAnnotationMode();
+  };
+
+  return (
+    <div
+      className={cn("absolute inset-0 pointer-events-none", className)}
+      onClick={isAddingAnnotation ? handleCanvasClick : undefined}
+    >
+      {!readOnly && (
+        <AnnotationComposer
+          isAdding={isAddingAnnotation}
+          position={newAnnotationPosition}
+          content={newAnnotationContent}
+          onToggle={toggleAddMode}
+          onContentChange={setNewAnnotationContent}
+          onSubmit={handleAddAnnotation}
+          onCancel={exitAnnotationMode}
+        />
+      )}
+
+      <AnnotationList
+        annotations={annotations}
+        readOnly={readOnly}
+        onUpdateAnnotation={onUpdateAnnotation}
+        onDeleteAnnotation={onDeleteAnnotation}
+      />
+    </div>
+  );
+}

package/src/features/workflow/components/canvas/breakpoints-layer.tsx

@@ -0,0 +1,148 @@
+import React, { useState } from "react";
+import { Button } from "@/design-system/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/design-system/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { Bug, X } from "lucide-react";
+
+interface Breakpoint {
+  id: string;
+  nodeId: string;
+  position: { x: number; y: number };
+  enabled: boolean;
+}
+
+interface BreakpointsLayerProps {
+  breakpoints?: Breakpoint[];
+  onToggleBreakpoint?: (id: string) => void;
+  onRemoveBreakpoint?: (id: string) => void;
+  debugMode?: boolean;
+  className?: string;
+}
+
+export default function BreakpointsLayer({
+  breakpoints = [],
+  onToggleBreakpoint,
+  onRemoveBreakpoint,
+  debugMode = false,
+  className,
+}: BreakpointsLayerProps) {
+  const [isAddingBreakpoint, setIsAddingBreakpoint] = useState(false);
+
+  const handleToggleDebugMode = () => {
+    setIsAddingBreakpoint(!isAddingBreakpoint);
+  };
+
+  return (
+    <div className={cn("absolute inset-0 pointer-events-none", className)}>
+      {/* Debug mode toggle button */}
+      <div className="absolute top-4 left-4 pointer-events-auto z-10">
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant={debugMode ? "default" : "outline"}
+                size="sm"
+                onClick={handleToggleDebugMode}
+                className="gap-2"
+              >
+                {isAddingBreakpoint ? (
+                  <>
+                    <X className="h-4 w-4" />
+                    Cancel
+                  </>
+                ) : (
+                  <>
+                    <Bug className="h-4 w-4" />
+
+                    {debugMode ? "Debug Mode" : "Add Breakpoint"}
+                  </>
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {isAddingBreakpoint
+                ? "Cancel adding breakpoint"
+                : debugMode
+                  ? "Currently in debug mode"
+                  : "Add breakpoints to pause workflow execution"}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+
+      {/* Instructions when adding breakpoint */}
+      {isAddingBreakpoint && (
+        <div className="absolute top-16 left-4 bg-background border border-border rounded-md p-2 shadow-md pointer-events-auto">
+          <p className="text-xs text-muted-foreground">
+            Click on a node to add a breakpoint
+          </p>
+        </div>
+      )}
+
+      {/* Existing breakpoints */}
+      {breakpoints.map((breakpoint) => (
+        <div
+          key={breakpoint.id}
+          className="absolute pointer-events-auto"
+          style={{
+            left: `${breakpoint.position.x}px`,
+            top: `${breakpoint.position.y}px`,
+            transform: "translate(-50%, -50%)",
+          }}
+        >
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className={cn(
+                    "h-5 w-5 rounded-full p-0 border-2",
+                    breakpoint.enabled
+                      ? "bg-red-500 border-red-500 hover:bg-red-600 hover:border-red-600"
+                      : "bg-muted border-muted-foreground hover:bg-muted hover:border-foreground",
+                  )}
+                  onClick={() => onToggleBreakpoint?.(breakpoint.id)}
+                  onContextMenu={(e) => {
+                    e.preventDefault();
+                    onRemoveBreakpoint?.(breakpoint.id);
+                  }}
+                >
+                  <span className="sr-only">
+                    {breakpoint.enabled ? "Disable" : "Enable"} breakpoint
+                  </span>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="text-xs">
+                  <p>
+                    {breakpoint.enabled
+                      ? "Breakpoint active"
+                      : "Breakpoint disabled"}
+                  </p>
+                  <p className="text-muted-foreground">
+                    Click to {breakpoint.enabled ? "disable" : "enable"},
+                    right-click to remove
+                  </p>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      ))}
+
+      {/* Debug execution status */}
+      {debugMode && (
+        <div className="absolute bottom-4 left-4 bg-background border border-border rounded-md p-2 shadow-md pointer-events-auto flex items-center gap-2">
+          <div className="h-3 w-3 rounded-full bg-amber-500 animate-pulse"></div>
+          <span className="text-xs font-medium">Debug Mode Active</span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/features/workflow/components/canvas/connection-validator.tsx

@@ -0,0 +1,230 @@
+import React, { useState, useEffect } from "react";
+import type { Connection, Edge, Node } from "@xyflow/react";
+import { AlertCircle, X } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/design-system/ui/alert";
+import { Button } from "@/design-system/ui/button";
+import { cn } from "@/lib/utils";
+
+export interface ValidationError {
+  id: string;
+  type: "connection" | "credential" | "node";
+  message: string;
+  sourceId?: string;
+  targetId?: string;
+  nodeName?: string;
+  nodeId?: string;
+}
+
+interface ConnectionValidatorProps {
+  errors: ValidationError[];
+  onDismiss: (id: string) => void;
+  onFix?: (error: ValidationError) => void;
+  className?: string;
+}
+
+interface ValidatorNodeData {
+  type?: string;
+  label?: string;
+  credentials?: {
+    id?: string;
+  } | null;
+}
+
+type ValidatorNode = Node<ValidatorNodeData>;
+type ValidatorEdge = Edge<Record<string, unknown>>;
+
+export default function ConnectionValidator({
+  errors,
+  onDismiss,
+  onFix,
+  className,
+}: ConnectionValidatorProps) {
+  const [visibleErrors, setVisibleErrors] = useState<ValidationError[]>([]);
+
+  useEffect(() => {
+    setVisibleErrors(errors);
+  }, [errors]);
+
+  const handleDismiss = (id: string) => {
+    setVisibleErrors((prev) => prev.filter((error) => error.id !== id));
+    onDismiss(id);
+  };
+
+  if (visibleErrors.length === 0) return null;
+
+  return (
+    <div
+      className={cn(
+        "absolute bottom-4 right-4 z-10 w-96 max-h-[calc(100vh-8rem)] overflow-y-auto space-y-2",
+        className,
+      )}
+    >
+      {visibleErrors.map((error) => (
+        <Alert
+          key={error.id}
+          variant="destructive"
+          className="flex items-start pr-12 relative"
+        >
+          <AlertCircle className="h-4 w-4 mt-0.5" />
+
+          <div className="ml-2 flex-1">
+            <AlertTitle>
+              {error.type === "connection"
+                ? "Invalid Connection"
+                : error.type === "credential"
+                  ? "Missing Credentials"
+                  : "Node Configuration Error"}
+            </AlertTitle>
+            <AlertDescription className="text-sm mt-1">
+              {error.message}
+              {error.type === "connection" &&
+                error.sourceId &&
+                error.targetId && (
+                  <div className="mt-1 text-xs">
+                    <span className="font-medium">From:</span> {error.sourceId}
+                    <br />
+                    <span className="font-medium">To:</span> {error.targetId}
+                  </div>
+                )}
+              {error.type === "node" && error.nodeName && (
+                <div className="mt-1 text-xs">
+                  <span className="font-medium">Node:</span> {error.nodeName}
+                </div>
+              )}
+              {onFix && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="mt-2 bg-destructive/10 border-destructive/20 hover:bg-destructive/20"
+                  onClick={() => onFix(error)}
+                >
+                  Fix Issue
+                </Button>
+              )}
+            </AlertDescription>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6 absolute top-2 right-2 text-destructive-foreground/70 hover:text-destructive-foreground"
+            onClick={() => handleDismiss(error.id)}
+          >
+            <X className="h-3 w-3" />
+          </Button>
+        </Alert>
+      ))}
+    </div>
+  );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function validateConnection(
+  connection: Connection,
+  nodes: ValidatorNode[],
+  edges: ValidatorEdge[],
+): ValidationError | null {
+  // Get source and target nodes
+  const sourceNode = nodes.find((node) => node.id === connection.source);
+  const targetNode = nodes.find((node) => node.id === connection.target);
+
+  if (!sourceNode || !targetNode) {
+    return {
+      id: `conn-${Date.now()}`,
+      type: "connection",
+      message: "Source or target node not found",
+      sourceId: connection.source,
+      targetId: connection.target,
+    };
+  }
+
+  // Check if connection already exists
+  const connectionExists = edges.some(
+    (edge) =>
+      edge.source === connection.source && edge.target === connection.target,
+  );
+
+  if (connectionExists) {
+    return {
+      id: `conn-${Date.now()}`,
+      type: "connection",
+      message: "Connection already exists between these nodes",
+      sourceId: connection.source,
+      targetId: connection.target,
+    };
+  }
+
+  // Check for incompatible node types (example validation)
+  if (
+    sourceNode.data.type === "trigger" &&
+    targetNode.data.type === "trigger"
+  ) {
+    return {
+      id: `conn-${Date.now()}`,
+      type: "connection",
+      message: "Cannot connect a trigger node to another trigger node",
+      sourceId: connection.source,
+      targetId: connection.target,
+    };
+  }
+
+  // Check for circular references
+  const wouldCreateCycle = checkForCycle(
+    connection.source,
+    connection.target,
+    edges,
+  );
+  if (wouldCreateCycle) {
+    return {
+      id: `conn-${Date.now()}`,
+      type: "connection",
+      message: "This connection would create a circular reference",
+      sourceId: connection.source,
+      targetId: connection.target,
+    };
+  }
+
+  return null;
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function validateNodeCredentials(
+  node: ValidatorNode,
+): ValidationError | null {
+  // Example validation for credentials
+  if (
+    (node.data.type === "api" || node.data.type === "database") &&
+    (!node.data.credentials || !node.data.credentials.id)
+  ) {
+    return {
+      id: `cred-${node.id}-${Date.now()}`,
+      type: "credential",
+      message: `${node.data.label} requires credentials to be configured`,
+      nodeName: node.data.label,
+      nodeId: node.id,
+    };
+  }
+
+  return null;
+}
+
+// Helper function to check for cycles in the graph
+function checkForCycle(
+  source: string,
+  target: string,
+  edges: ValidatorEdge[],
+  visited: Set<string> = new Set(),
+): boolean {
+  if (source === target) return true;
+  if (visited.has(target)) return false;
+
+  visited.add(target);
+
+  const outgoingEdges = edges.filter((edge) => edge.source === target);
+  for (const edge of outgoingEdges) {
+    if (checkForCycle(source, edge.target, edges, visited)) {
+      return true;
+    }
+  }
+
+  return false;
+}

package/src/features/workflow/components/canvas/custom-edge.tsx

@@ -0,0 +1,154 @@
+import React from "react";
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  EdgeProps,
+  getBezierPath,
+  useReactFlow,
+} from "@xyflow/react";
+import { Trash2 } from "lucide-react";
+import { useEdgeHoverContext } from "@features/workflow/components/canvas/edge-hover-context";
+import { toast } from "@/hooks/use-toast";
+
+export default function CustomEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  markerEnd,
+}: EdgeProps) {
+  const edgeHoverContext = useEdgeHoverContext();
+  const [localHovered, setLocalHovered] = React.useState(false);
+  const { setEdges } = useReactFlow();
+
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  const hoveredEdgeId = edgeHoverContext?.hoveredEdgeId ?? null;
+  const setHoveredEdgeId = edgeHoverContext?.setHoveredEdgeId;
+
+  const showHover = React.useCallback(
+    (hovered: boolean) => {
+      if (setHoveredEdgeId) {
+        const nextId = hovered ? id : null;
+        if (hoveredEdgeId === nextId) {
+          return;
+        }
+        setHoveredEdgeId(nextId);
+      } else {
+        setLocalHovered(hovered);
+      }
+    },
+    [hoveredEdgeId, id, setHoveredEdgeId],
+  );
+
+  const isHovered =
+    setHoveredEdgeId !== undefined ? hoveredEdgeId === id : localHovered;
+
+  const handleDelete = (event: React.MouseEvent) => {
+    event.stopPropagation();
+
+    try {
+      let wasRemoved = false;
+      setEdges((edges) => {
+        let removedInUpdate = false;
+        const nextEdges = edges.filter((edge) => {
+          const keep = edge.id !== id;
+          if (!keep) {
+            removedInUpdate = true;
+          }
+          return keep;
+        });
+        wasRemoved = removedInUpdate;
+        return nextEdges;
+      });
+
+      if (!wasRemoved) {
+        toast({
+          title: "Edge not found",
+          description: "The selected connection could not be located.",
+          variant: "destructive",
+        });
+      }
+
+      showHover(false);
+    } catch (error) {
+      console.error("Failed to delete edge", error);
+      const description =
+        error instanceof Error
+          ? error.message
+          : "An unexpected error occurred while removing the connection.";
+      toast({
+        title: "Failed to delete edge",
+        description,
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <>
+      {/* Invisible wider path for easier hovering */}
+      <path
+        d={edgePath}
+        fill="none"
+        stroke="currentColor"
+        strokeOpacity={0}
+        strokeWidth={20}
+        style={{ pointerEvents: "stroke" }}
+        onMouseEnter={() => {
+          if (!setHoveredEdgeId) {
+            setLocalHovered(true);
+          }
+        }}
+        onMouseLeave={() => {
+          if (!setHoveredEdgeId) {
+            setLocalHovered(false);
+          }
+        }}
+        className="react-flow__edge-interaction"
+      />
+      {/* Visible edge */}
+      <BaseEdge
+        path={edgePath}
+        markerEnd={markerEnd}
+        interactionWidth={20}
+        style={{
+          ...style,
+          strokeWidth: isHovered ? 3 : 2,
+        }}
+      />
+      <EdgeLabelRenderer>
+        {isHovered && (
+          <div
+            data-edge-id={id}
+            style={{
+              position: "absolute",
+              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+              pointerEvents: "all",
+            }}
+            className="nodrag nopan"
+            onMouseEnter={() => showHover(true)}
+            onMouseLeave={() => showHover(false)}
+          >
+            <Trash2
+              className="h-3 w-3 text-red-500 cursor-pointer"
+              onClick={handleDelete}
+              aria-label="Delete edge"
+            />
+          </div>
+        )}
+      </EdgeLabelRenderer>
+    </>
+  );
+}

package/src/features/workflow/components/canvas/edge-hover-context.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+export interface EdgeHoverContextValue {
+  hoveredEdgeId: string | null;
+  setHoveredEdgeId: (edgeId: string | null) => void;
+}
+
+export const EdgeHoverContext =
+  React.createContext<EdgeHoverContextValue | null>(null);
+
+export const useEdgeHoverContext = () => React.useContext(EdgeHoverContext);