orcheo-canvas 0.0.1

package/src/features/workflow/components/nodes/workflow-node-handle-config.ts

@@ -0,0 +1,22 @@
+import type { NodeHandleConfig, WorkflowNodeData } from "./workflow-node.types";
+
+export const deriveInputHandles = (
+  data: WorkflowNodeData,
+): NodeHandleConfig[] => {
+  if (data.hideInputHandle) {
+    return [];
+  }
+  if (data.inputs && data.inputs.length > 0) {
+    return data.inputs;
+  }
+  return [{ id: undefined }];
+};
+
+export const deriveOutputHandles = (
+  data: WorkflowNodeData,
+): NodeHandleConfig[] => {
+  if (data.outputs && data.outputs.length > 0) {
+    return data.outputs;
+  }
+  return [{ id: undefined }];
+};

package/src/features/workflow/components/nodes/workflow-node-handles.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { Handle, Position } from "@xyflow/react";
+
+import type { NodeHandleConfig } from "./workflow-node.types";
+
+const toHandlePosition = (
+  value: NodeHandleConfig["position"],
+  fallback: Position,
+): Position => {
+  switch (value) {
+    case "left":
+      return Position.Left;
+    case "right":
+      return Position.Right;
+    case "top":
+      return Position.Top;
+    case "bottom":
+      return Position.Bottom;
+    default:
+      return fallback;
+  }
+};
+
+const renderHandle = (
+  handle: NodeHandleConfig,
+  index: number,
+  total: number,
+  type: "source" | "target",
+) => {
+  const fallback = type === "target" ? Position.Left : Position.Right;
+  const position = toHandlePosition(handle.position, fallback);
+  const percent = ((index + 1) / (total + 1)) * 100;
+  const style: React.CSSProperties = {};
+
+  if (total > 1) {
+    if (position === Position.Left || position === Position.Right) {
+      style.top = `${percent}%`;
+    } else {
+      style.left = `${percent}%`;
+    }
+  }
+
+  const labelStyle =
+    total > 1
+      ? { top: `${percent}%`, transform: "translateY(-50%)" }
+      : { top: "50%", transform: "translateY(-50%)" };
+
+  return (
+    <React.Fragment key={`${type}-${handle.id ?? index}`}>
+      <Handle
+        type={type}
+        id={handle.id}
+        position={position}
+        className="!h-2 !w-2 !bg-primary !border-2 !border-background !z-10 !pointer-events-auto"
+        style={style}
+        isConnectable
+      />
+      {type === "source" && handle.label && (
+        <span
+          className="absolute left-[calc(100%+8px)] text-[6px] uppercase tracking-wide text-muted-foreground pointer-events-none whitespace-nowrap"
+          style={labelStyle}
+        >
+          {handle.label}
+        </span>
+      )}
+    </React.Fragment>
+  );
+};
+
+export const WorkflowNodeHandles = ({
+  handles,
+  type,
+}: {
+  handles: NodeHandleConfig[];
+  type: "source" | "target";
+}) =>
+  handles.map((handle, index) =>
+    renderHandle(handle, index, handles.length, type),
+  );

package/src/features/workflow/components/nodes/workflow-node-style.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { AlertCircle, CheckCircle, Clock } from "lucide-react";
+
+import type { NodeStatus } from "./workflow-node.types";
+
+type StatusIconMap = Record<NodeStatus, React.ReactNode>;
+
+const statusIconMap: StatusIconMap = {
+  idle: <Clock className="h-4 w-4 text-muted-foreground" />,
+  running: <Clock className="h-4 w-4 text-blue-500 animate-pulse" />,
+  success: <CheckCircle className="h-4 w-4 text-green-500" />,
+  error: <AlertCircle className="h-4 w-4 text-red-500" />,
+};
+
+type NodeColorKey =
+  | "default"
+  | "api"
+  | "function"
+  | "trigger"
+  | "data"
+  | "ai"
+  | "python";
+
+const nodeColorPalette: Record<NodeColorKey, string> = {
+  default: "bg-card border-border",
+  api: "bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-800/50",
+  function:
+    "bg-purple-50 border-purple-200 dark:bg-purple-950/30 dark:border-purple-800/50",
+  trigger:
+    "bg-amber-50 border-amber-200 dark:bg-amber-950/30 dark:border-amber-800/50",
+  data: "bg-green-50 border-green-200 dark:bg-green-950/30 dark:border-green-800/50",
+  ai: "bg-indigo-50 border-indigo-200 dark:bg-indigo-950/30 dark:border-indigo-800/50",
+  python:
+    "bg-orange-50 border-orange-200 dark:bg-orange-950/30 dark:border-orange-800/50",
+};
+
+export const getStatusIcon = (status: NodeStatus): React.ReactNode =>
+  statusIconMap[status];
+
+export const getNodeColor = (type?: string): string => {
+  if (!type) {
+    return nodeColorPalette.default;
+  }
+  if (
+    Object.prototype.hasOwnProperty.call(nodeColorPalette, type as NodeColorKey)
+  ) {
+    return nodeColorPalette[type as NodeColorKey];
+  }
+  return nodeColorPalette.default;
+};

package/src/features/workflow/components/nodes/workflow-node.tsx

@@ -0,0 +1,147 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+import { WorkflowNodeControls } from "./workflow-node-controls";
+import {
+  deriveInputHandles,
+  deriveOutputHandles,
+} from "./workflow-node-handle-config";
+import { WorkflowNodeHandles } from "./workflow-node-handles";
+import { getNodeColor, getStatusIcon } from "./workflow-node-style";
+import type { WorkflowNodeProps } from "./workflow-node.types";
+
+const WorkflowNode = ({ id, data, selected }: WorkflowNodeProps) => {
+  const nodeData = data;
+  const [controlsVisible, setControlsVisible] = useState(false);
+  const controlsRef = useRef<HTMLDivElement>(null);
+  const nodeRef = useRef<HTMLDivElement>(null);
+
+  const {
+    label,
+    icon,
+    status = "idle" as const,
+    type,
+    isDisabled,
+    isSearchMatch = false,
+    isSearchActive = false,
+  } = nodeData;
+
+  // Handle clicks outside the controls to hide them
+  useEffect(() => {
+    const targetDocument =
+      typeof document !== "undefined" ? document : undefined;
+    if (!targetDocument) {
+      return;
+    }
+
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (
+        controlsRef.current &&
+        !controlsRef.current.contains(target) &&
+        nodeRef.current &&
+        !nodeRef.current.contains(target)
+      ) {
+        setControlsVisible(false);
+      }
+    };
+
+    targetDocument.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      targetDocument.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const nodeColor = getNodeColor(type);
+  const statusIcon = getStatusIcon(status);
+
+  const handleMouseEnter = () => {
+    setControlsVisible(true);
+  };
+
+  const handleMouseLeave = () => {
+    setControlsVisible(false);
+  };
+
+  const inputHandles = deriveInputHandles(nodeData);
+  const outputHandles = deriveOutputHandles(nodeData);
+
+  return (
+    <div
+      ref={nodeRef}
+      data-search-match={isSearchMatch ? "true" : undefined}
+      data-search-active={isSearchActive ? "true" : undefined}
+      className={cn(
+        "group relative border shadow-sm transition-all duration-200",
+        nodeColor,
+        selected && "ring-2 ring-primary ring-offset-2",
+        isSearchMatch &&
+          !isSearchActive &&
+          "ring-2 ring-sky-400/70 ring-offset-2",
+        isSearchActive && "ring-4 ring-sky-500 ring-offset-2",
+        isDisabled && "opacity-60",
+        "h-16 w-16 rounded-xl cursor-pointer",
+      )}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      tabIndex={0}
+      role="button"
+      aria-selected={Boolean(selected)}
+    >
+      {/* Simple text label */}
+      <div className="absolute -bottom-6 left-1/2 -translate-x-1/2 text-xs text-center whitespace-nowrap pointer-events-none">
+        <span
+          className={cn(
+            "px-2 py-0.5 rounded-full transition-colors",
+            isSearchActive
+              ? "bg-sky-500/10 text-sky-700 dark:text-sky-300"
+              : isSearchMatch
+                ? "bg-sky-500/5 text-sky-600 dark:text-sky-200"
+                : undefined,
+          )}
+        >
+          {label}
+        </span>
+      </div>
+
+      {/* Input handle */}
+      <WorkflowNodeHandles handles={inputHandles} type="target" />
+
+      {/* Output handle */}
+      <WorkflowNodeHandles handles={outputHandles} type="source" />
+
+      {/* Node content */}
+      <div className="h-full w-full flex items-center justify-center relative pointer-events-none">
+        {/* Status indicator in corner */}
+        <div className="absolute top-1 right-1 pointer-events-auto">
+          {statusIcon}
+        </div>
+
+        {/* Main icon */}
+        <div className="flex items-center justify-center pointer-events-auto">
+          {icon ? (
+            <div className="scale-125">{icon}</div>
+          ) : (
+            <div className="text-xs font-medium text-center">
+              {label.substring(0, 2)}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Hover actions */}
+      <WorkflowNodeControls
+        ref={controlsRef}
+        visible={controlsVisible}
+        isDisabled={isDisabled}
+        nodeId={id}
+        onDelete={(nodeId) => {
+          nodeData.onDelete?.(nodeId);
+        }}
+      />
+    </div>
+  );
+};
+
+export default WorkflowNode;

package/src/features/workflow/components/nodes/workflow-node.types.ts

@@ -0,0 +1,32 @@
+import type { NodeProps } from "@xyflow/react";
+import type React from "react";
+
+export type NodeStatus = "idle" | "running" | "success" | "error";
+
+export type NodeHandleConfig = {
+  id?: string;
+  label?: string;
+  position?: "left" | "right" | "top" | "bottom";
+};
+
+export type WorkflowNodeData = {
+  label: string;
+  description?: string;
+  icon?: React.ReactNode;
+  iconKey?: string;
+  status?: NodeStatus;
+  type?: string;
+  backendType?: string;
+  isDisabled?: boolean;
+  onLabelChange?: (id: string, newLabel: string) => void;
+  onNodeInspect?: (id: string) => void;
+  onDelete?: (id: string) => void;
+  isSearchMatch?: boolean;
+  isSearchActive?: boolean;
+  inputs?: NodeHandleConfig[];
+  outputs?: NodeHandleConfig[];
+  hideInputHandle?: boolean;
+  [key: string]: unknown;
+};
+
+export type WorkflowNodeProps = NodeProps<WorkflowNodeData>;

package/src/features/workflow/components/panels/node-inspector/config-panel.tsx

@@ -0,0 +1,130 @@
+import { useMemo } from "react";
+import { ScrollArea } from "@/design-system/ui/scroll-area";
+import { Label } from "@/design-system/ui/label";
+import { Input } from "@/design-system/ui/input";
+import { Textarea } from "@/design-system/ui/textarea";
+import Editor, { type OnMount } from "@monaco-editor/react";
+import Form from "@rjsf/core";
+import { customTemplates, customWidgets, validator } from "../rjsf-theme";
+import {
+  getNodeSchema,
+  getNodeUiSchema,
+} from "@features/workflow/lib/node-schemas";
+import type { NodeInspectorProps } from "./types";
+import type { Dispatch, SetStateAction } from "react";
+
+interface ConfigPanelProps {
+  backendType: string | null;
+  isPythonNode: boolean;
+  draftData: Record<string, unknown>;
+  setDraftData: Dispatch<SetStateAction<Record<string, unknown>>>;
+  node: NonNullable<NodeInspectorProps["node"]>;
+  pythonCode: string;
+  onPythonCodeChange: (code: string) => void;
+  onEditorMount: OnMount;
+}
+
+export function ConfigPanel({
+  backendType,
+  isPythonNode,
+  draftData,
+  setDraftData,
+  node,
+  pythonCode,
+  onPythonCodeChange,
+  onEditorMount,
+}: ConfigPanelProps) {
+  const schema = useMemo(() => getNodeSchema(backendType), [backendType]);
+  const uiSchema = useMemo(() => getNodeUiSchema(backendType), [backendType]);
+
+  if (isPythonNode) {
+    return (
+      <ScrollArea className="h-full">
+        <div className="p-6 space-y-4">
+          <div className="grid gap-2">
+            <Label htmlFor="node-name">Node Name</Label>
+            <Input
+              id="node-name"
+              value={
+                typeof draftData.label === "string"
+                  ? draftData.label
+                  : (node.data.label as string) || ""
+              }
+              placeholder="Enter node name"
+              onChange={(event) =>
+                setDraftData((current) => ({
+                  ...current,
+                  label: event.target.value,
+                }))
+              }
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="node-description">Description</Label>
+            <Textarea
+              id="node-description"
+              value={
+                typeof draftData.description === "string"
+                  ? draftData.description
+                  : (node.data.description as string) || ""
+              }
+              placeholder="Enter description"
+              rows={3}
+              onChange={(event) =>
+                setDraftData((current) => ({
+                  ...current,
+                  description: event.target.value,
+                }))
+              }
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="python-code">Python Code</Label>
+            <div className="border rounded-md overflow-hidden h-[400px]">
+              {typeof window !== "undefined" && (
+                <Editor
+                  height="100%"
+                  defaultLanguage="python"
+                  value={pythonCode}
+                  onChange={(value) => onPythonCodeChange(value || "")}
+                  onMount={onEditorMount}
+                  options={{
+                    minimap: { enabled: false },
+                    scrollBeyondLastLine: false,
+                    fontSize: 14,
+                    lineNumbers: "on",
+                  }}
+                  theme="vs-dark"
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </ScrollArea>
+    );
+  }
+
+  return (
+    <ScrollArea className="h-full">
+      <div className="p-6">
+        <Form
+          schema={schema}
+          uiSchema={uiSchema}
+          formData={draftData}
+          onChange={(data) => {
+            if (data.formData) {
+              setDraftData(data.formData);
+            }
+          }}
+          validator={validator}
+          widgets={customWidgets}
+          templates={customTemplates}
+        >
+          <div className="hidden" />
+        </Form>
+      </div>
+    </ScrollArea>
+  );
+}

package/src/features/workflow/components/panels/node-inspector/index.tsx

@@ -0,0 +1,225 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { OnMount } from "@monaco-editor/react";
+import type { editor as MonacoEditor } from "monaco-editor";
+import {
+  collectUpstreamOutputs,
+  findUpstreamNodes,
+  hasIncomingConnections,
+  mergeRuntimeSummaries,
+} from "@features/workflow/lib/graph-utils";
+import { DEFAULT_PYTHON_CODE } from "@features/workflow/lib/python-node";
+import { NodeInspectorLayout } from "./node-inspector-layout";
+import { useNodeTester } from "./use-node-tester";
+import { buildSchemaFields } from "./schema-fields";
+import type { NodeInspectorProps, NodeRuntimeCacheEntry } from "./types";
+import {
+  extractPythonCode,
+  formatUpdatedAt,
+  getOutputDisplay,
+  getSemanticType,
+  isRecord,
+} from "./utils";
+
+export default function NodeInspector({
+  node,
+  nodes = [],
+  edges = [],
+  onClose,
+  onSave,
+  runtimeCache,
+  onCacheRuntime,
+  className,
+}: NodeInspectorProps) {
+  const runtimeCandidate = node
+    ? (node.data as Record<string, unknown>)["runtime"]
+    : undefined;
+  const runtimeFromNode = isRecord(runtimeCandidate)
+    ? (runtimeCandidate as NodeRuntimeCacheEntry)
+    : undefined;
+  const cachedRuntime = node ? runtimeCache?.[node.id] : undefined;
+  const runtime = mergeRuntimeSummaries(runtimeFromNode, cachedRuntime) ?? null;
+  const hasRuntime = Boolean(runtime);
+
+  const [useLiveData, setUseLiveData] = useState(hasRuntime);
+  const [draftData, setDraftData] = useState<Record<string, unknown>>(() =>
+    node?.data ? { ...(node.data as Record<string, unknown>) } : {},
+  );
+  const [pythonCode, setPythonCode] = useState(() => extractPythonCode(node));
+  const [inputViewMode, setInputViewMode] = useState("input-json");
+  const [outputViewMode, setOutputViewMode] = useState("output-json");
+
+  const previouslyHadRuntimeRef = useRef(hasRuntime);
+  const editorKeydownDisposableRef = useRef<MonacoEditor.IDisposable | null>(
+    null,
+  );
+  const handleSaveRef = useRef<() => void>();
+
+  const upstreamNodes = useMemo(() => {
+    if (!node) return [];
+    return findUpstreamNodes(node.id, nodes, edges);
+  }, [node, nodes, edges]);
+
+  const upstreamOutputs = useMemo(() => {
+    return collectUpstreamOutputs(upstreamNodes, runtimeCache);
+  }, [runtimeCache, upstreamNodes]);
+
+  const hasUpstreamConnections = useMemo(() => {
+    if (!node) return false;
+    return hasIncomingConnections(node.id, edges);
+  }, [node, edges]);
+
+  const semanticType = getSemanticType(node);
+  const isPythonNode = semanticType === "python";
+
+  useEffect(() => {
+    if (!hasRuntime) {
+      setUseLiveData(false);
+    } else if (!previouslyHadRuntimeRef.current) {
+      setUseLiveData(true);
+    }
+    previouslyHadRuntimeRef.current = hasRuntime;
+  }, [hasRuntime]);
+
+  useEffect(() => {
+    if (!node) {
+      return;
+    }
+    if (isPythonNode) {
+      setPythonCode(extractPythonCode(node));
+    }
+    setDraftData(
+      node.data ? { ...(node.data as Record<string, unknown>) } : {},
+    );
+  }, [isPythonNode, node]);
+
+  useEffect(() => {
+    return () => {
+      editorKeydownDisposableRef.current?.dispose();
+    };
+  }, []);
+
+  const handleSave = useCallback(() => {
+    if (onSave && node) {
+      const updatedData = { ...draftData };
+      if (isPythonNode) {
+        updatedData.code =
+          pythonCode && pythonCode.length > 0
+            ? pythonCode
+            : DEFAULT_PYTHON_CODE;
+      }
+      onSave(node.id, updatedData);
+    }
+  }, [draftData, isPythonNode, node, onSave, pythonCode]);
+
+  useEffect(() => {
+    handleSaveRef.current = handleSave;
+  }, [handleSave]);
+
+  const handleEditorMount = useCallback<OnMount>((editorInstance) => {
+    editorKeydownDisposableRef.current?.dispose();
+    editorKeydownDisposableRef.current = editorInstance.onKeyDown((event) => {
+      const { key, ctrlKey, metaKey, altKey } = event.browserEvent;
+
+      const isPlainSpace =
+        (key === " " || key === "Spacebar") && !ctrlKey && !metaKey && !altKey;
+
+      if (isPlainSpace) {
+        event.browserEvent.stopPropagation();
+        return;
+      }
+
+      if ((ctrlKey || metaKey) && (key === "s" || key === "S")) {
+        event.browserEvent.preventDefault();
+        event.browserEvent.stopPropagation();
+        handleSaveRef.current?.();
+      }
+    });
+  }, []);
+
+  const liveInputs = runtime?.inputs;
+  const hasLiveInputs = liveInputs !== undefined;
+  const { outputDisplay, hasLiveOutputs } = useMemo(() => {
+    return getOutputDisplay(runtime);
+  }, [runtime]);
+  const formattedUpdatedAt = useMemo(
+    () => formatUpdatedAt(runtime?.updatedAt),
+    [runtime?.updatedAt],
+  );
+
+  const schemaFields = useMemo(() => {
+    return buildSchemaFields(
+      hasUpstreamConnections ? upstreamOutputs : undefined,
+    );
+  }, [hasUpstreamConnections, upstreamOutputs]);
+
+  const backendType = useMemo(() => {
+    if (typeof draftData?.backendType === "string") {
+      return draftData.backendType as string;
+    }
+    return typeof node?.data?.backendType === "string"
+      ? (node.data.backendType as string)
+      : null;
+  }, [draftData, node]);
+
+  const { isTestingNode, testResult, testError, handleTestNode } =
+    useNodeTester({
+      node,
+      backendType,
+      draftData,
+      liveInputs,
+      upstreamOutputs,
+      useLiveData,
+      onCacheRuntime,
+    });
+
+  if (!node) {
+    return null;
+  }
+
+  const nodeLabelCandidate = node.data?.label;
+  const nodeLabel =
+    typeof nodeLabelCandidate === "string" && nodeLabelCandidate.length > 0
+      ? nodeLabelCandidate
+      : (node.type ?? "");
+  const formattedSemanticType = semanticType
+    ? `${semanticType.charAt(0).toUpperCase()}${semanticType.slice(1)}`
+    : null;
+
+  return (
+    <NodeInspectorLayout
+      node={node}
+      className={className}
+      nodeLabel={nodeLabel}
+      formattedSemanticType={formattedSemanticType}
+      onClose={onClose}
+      inputViewMode={inputViewMode}
+      onInputViewModeChange={setInputViewMode}
+      useLiveData={useLiveData}
+      hasRuntime={hasRuntime}
+      hasLiveInputs={hasLiveInputs}
+      liveInputs={liveInputs}
+      hasUpstreamConnections={hasUpstreamConnections}
+      upstreamOutputs={upstreamOutputs}
+      schemaFields={schemaFields}
+      backendType={backendType}
+      isPythonNode={isPythonNode}
+      draftData={draftData}
+      setDraftData={setDraftData}
+      pythonCode={pythonCode}
+      onPythonCodeChange={setPythonCode}
+      onEditorMount={handleEditorMount}
+      outputViewMode={outputViewMode}
+      onOutputViewModeChange={setOutputViewMode}
+      onToggleLiveData={setUseLiveData}
+      runtime={runtime}
+      formattedUpdatedAt={formattedUpdatedAt}
+      testResult={testResult}
+      testError={testError}
+      hasLiveOutputs={hasLiveOutputs}
+      outputDisplay={outputDisplay}
+      onTestNode={handleTestNode}
+      isTestingNode={isTestingNode}
+      onSave={handleSave}
+    />
+  );
+}