orcheo-canvas 0.0.1

package/src/features/workflow/pages/workflow-canvas/hooks/execution-record-updater.ts

@@ -0,0 +1,118 @@
+import { isRecord } from "@features/workflow/pages/workflow-canvas/helpers/validation";
+
+import type {
+  NodeRuntimeData,
+  NodeStatus,
+  WorkflowExecution,
+  WorkflowExecutionStatus,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+interface ExecutionRecordUpdateParams {
+  execution: WorkflowExecution;
+  executionStatus: WorkflowExecutionStatus | null;
+  nodeUpdates: Record<string, NodeStatus>;
+  runtimeUpdates: Record<string, NodeRuntimeData>;
+  logLevel: "INFO" | "DEBUG" | "ERROR" | "WARNING";
+  message: string;
+  timestamp: Date;
+  graphToCanvas: Record<string, string>;
+}
+
+export function updateExecutionRecord({
+  execution,
+  executionStatus,
+  nodeUpdates,
+  runtimeUpdates,
+  logLevel,
+  message,
+  timestamp,
+  graphToCanvas,
+}: ExecutionRecordUpdateParams): WorkflowExecution {
+  const updatedNodes = execution.nodes.map((node) => {
+    const nextStatus = nodeUpdates[node.id];
+    const runtime = runtimeUpdates[node.id];
+    let updatedNode = node;
+    if (nextStatus) {
+      updatedNode = { ...updatedNode, status: nextStatus };
+    } else if (
+      executionStatus &&
+      executionStatus !== "running" &&
+      node.status === "running"
+    ) {
+      const fallback: NodeStatus =
+        executionStatus === "failed"
+          ? "error"
+          : executionStatus === "partial"
+            ? "warning"
+            : "success";
+      updatedNode = { ...updatedNode, status: fallback };
+    }
+
+    if (runtime) {
+      const existingDetails =
+        node.details && isRecord(node.details)
+          ? (node.details as Record<string, unknown>)
+          : {};
+      const nextDetails: Record<string, unknown> = {
+        ...existingDetails,
+      };
+      if (runtime.inputs !== undefined) {
+        nextDetails.inputs = runtime.inputs;
+      }
+      if (runtime.outputs !== undefined) {
+        nextDetails.outputs = runtime.outputs;
+      }
+      if (runtime.messages !== undefined) {
+        nextDetails.messages = runtime.messages;
+      }
+      nextDetails.raw = runtime.raw;
+      nextDetails.updatedAt = runtime.updatedAt;
+      updatedNode = { ...updatedNode, details: nextDetails };
+    }
+
+    return updatedNode;
+  });
+
+  const logs = [
+    ...execution.logs,
+    {
+      timestamp: timestamp.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+      }),
+      level: logLevel,
+      message,
+    },
+  ];
+
+  const duration =
+    timestamp.getTime() - new Date(execution.startTime).getTime();
+
+  const issues = logLevel === "ERROR" ? execution.issues + 1 : execution.issues;
+
+  const metadata = {
+    ...(execution.metadata ?? {}),
+    graphToCanvas: {
+      ...(execution.metadata?.graphToCanvas ?? {}),
+      ...graphToCanvas,
+    },
+  };
+
+  const status = executionStatus ?? execution.status;
+  const endTime =
+    executionStatus && executionStatus !== "running"
+      ? timestamp.toISOString()
+      : execution.endTime;
+
+  return {
+    ...execution,
+    status,
+    nodes: updatedNodes,
+    logs,
+    duration,
+    issues,
+    endTime,
+    metadata,
+  };
+}

package/src/features/workflow/pages/workflow-canvas/hooks/execution-record.ts

@@ -0,0 +1,69 @@
+import { generateRandomId } from "@features/workflow/pages/workflow-canvas/helpers/id";
+
+import type {
+  CanvasEdge,
+  CanvasNode,
+  NodeStatus,
+  WorkflowExecution,
+  WorkflowExecutionNode,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+export function createExecutionRecord(
+  executionId: string,
+  nodes: CanvasNode[],
+  edges: CanvasEdge[],
+  graphToCanvas: Record<string, string>,
+): WorkflowExecution {
+  const startTime = new Date();
+  const executionNodes: WorkflowExecutionNode[] = nodes.map((node) => ({
+    id: node.id,
+    type:
+      typeof node.data?.type === "string"
+        ? node.data.type
+        : (node.type ?? "custom"),
+    name:
+      typeof node.data?.label === "string" && node.data.label.trim()
+        ? node.data.label
+        : node.id,
+    position: node.position,
+    status: "running",
+    iconKey:
+      typeof node.data?.iconKey === "string" ? node.data.iconKey : undefined,
+  }));
+
+  const executionEdges: CanvasEdge[] = edges.map((edge) => ({
+    id: edge.id ?? generateRandomId("edge"),
+    source: edge.source,
+    target: edge.target,
+  }));
+
+  return {
+    id: executionId,
+    runId: executionId,
+    status: "running",
+    startTime: startTime.toISOString(),
+    duration: 0,
+    issues: 0,
+    nodes: executionNodes,
+    edges: executionEdges,
+    logs: [
+      {
+        timestamp: startTime.toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+          second: "2-digit",
+        }),
+        level: "INFO" as const,
+        message: "Workflow execution started",
+      },
+    ],
+    metadata: { graphToCanvas },
+  };
+}
+
+export function markNodesAsRunning(nodes: CanvasNode[]): CanvasNode[] {
+  return nodes.map((node) => ({
+    ...node,
+    data: { ...node.data, status: "running" as NodeStatus },
+  }));
+}

package/src/features/workflow/pages/workflow-canvas/hooks/execution-runtime-updates.ts

@@ -0,0 +1,84 @@
+import { isRecord } from "@features/workflow/pages/workflow-canvas/helpers/validation";
+
+import type { NodeRuntimeData } from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+export function collectRuntimeUpdates(
+  payload: Record<string, unknown>,
+  graphToCanvas: Record<string, string>,
+  updatedAt: string,
+): Record<string, NodeRuntimeData> {
+  const runtimeUpdates: Record<string, NodeRuntimeData> = {};
+  Object.entries(payload).forEach(([key, value]) => {
+    if (typeof key !== "string") {
+      return;
+    }
+    if (
+      key === "status" ||
+      key === "level" ||
+      key === "error" ||
+      key === "message" ||
+      key === "type" ||
+      key === "timestamp" ||
+      key === "step"
+    ) {
+      return;
+    }
+    const canvasNodeId = graphToCanvas[key] ?? null;
+    if (!canvasNodeId) {
+      return;
+    }
+    if (!isRecord(value)) {
+      return;
+    }
+
+    const resultsCandidate = value["results"];
+    let candidatePayload: unknown;
+
+    if (isRecord(resultsCandidate)) {
+      candidatePayload =
+        resultsCandidate[key] ??
+        resultsCandidate[canvasNodeId] ??
+        Object.values(resultsCandidate)[0];
+    }
+
+    if (candidatePayload === undefined) {
+      const directValue =
+        typeof value[key] !== "undefined" ? value[key] : undefined;
+      if (directValue !== undefined) {
+        candidatePayload = directValue;
+      }
+    }
+
+    if (candidatePayload === undefined && value["value"] !== undefined) {
+      candidatePayload = value["value"];
+    }
+
+    if (candidatePayload === undefined) {
+      candidatePayload = value;
+    }
+
+    let inputs: unknown;
+    let outputs: unknown;
+    let messages: unknown;
+    if (isRecord(candidatePayload)) {
+      inputs =
+        candidatePayload["inputs"] !== undefined
+          ? candidatePayload["inputs"]
+          : candidatePayload["input"];
+      outputs =
+        candidatePayload["outputs"] !== undefined
+          ? candidatePayload["outputs"]
+          : (candidatePayload["output"] ?? candidatePayload["result"]);
+      messages = candidatePayload["messages"];
+    }
+
+    runtimeUpdates[canvasNodeId] = {
+      ...(inputs !== undefined ? { inputs } : {}),
+      ...(outputs !== undefined ? { outputs } : {}),
+      ...(messages !== undefined ? { messages } : {}),
+      raw: candidatePayload,
+      updatedAt,
+    };
+  });
+  return runtimeUpdates;
+}

package/src/features/workflow/pages/workflow-canvas/hooks/node-factory.ts

@@ -0,0 +1,166 @@
+import {
+  determineNodeType,
+  isRecord,
+} from "@features/workflow/pages/workflow-canvas/helpers/validation";
+import {
+  DEFAULT_NODE_LABEL,
+  createIdentityAllocator,
+} from "@features/workflow/pages/workflow-canvas/helpers/node-identity";
+import {
+  DEFAULT_STICKY_NOTE_COLOR,
+  DEFAULT_STICKY_NOTE_CONTENT,
+  DEFAULT_STICKY_NOTE_HEIGHT,
+  DEFAULT_STICKY_NOTE_WIDTH,
+  STICKY_NOTE_MIN_HEIGHT,
+  STICKY_NOTE_MIN_WIDTH,
+  isStickyNoteColor,
+  sanitizeStickyNoteContent,
+  sanitizeStickyNoteDimension,
+} from "@features/workflow/pages/workflow-canvas/helpers/sticky-notes";
+import {
+  getNodeIcon,
+  inferNodeIconKey,
+} from "@features/workflow/lib/node-icons";
+import { defaultNodeStyle } from "@features/workflow/pages/workflow-canvas/helpers/transformers";
+
+import type {
+  CanvasNode,
+  NodeData,
+  NodeStatus,
+  SidebarNodeDefinition,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+import type { MutableRefObject } from "react";
+import type { StickyNoteColor } from "@features/workflow/components/nodes/sticky-note-node";
+
+export interface NodeBaseData {
+  nodeType: string;
+  baseDataRest: Partial<NodeData>;
+  semanticType: string;
+  nodeId: string;
+  label: string;
+  description: string;
+}
+
+export function buildNodeBaseData(
+  node: SidebarNodeDefinition,
+  nodesRef: MutableRefObject<CanvasNode[]>,
+): NodeBaseData {
+  const nodeType = determineNodeType(node.id);
+  const baseDataRest: Partial<NodeData> = isRecord(node.data)
+    ? { ...(node.data as Partial<NodeData>) }
+    : {};
+  delete baseDataRest.icon;
+  delete baseDataRest.onOpenChat;
+
+  const semanticType =
+    nodeType === "startEnd"
+      ? node.id === "start-node"
+        ? "start"
+        : "end"
+      : typeof node.type === "string" && node.type.length > 0
+        ? node.type
+        : typeof baseDataRest.type === "string" && baseDataRest.type.length > 0
+          ? baseDataRest.type
+          : "default";
+  const baseLabel =
+    typeof node.name === "string" && node.name.length > 0
+      ? node.name
+      : typeof baseDataRest.label === "string" && baseDataRest.label.length > 0
+        ? baseDataRest.label
+        : DEFAULT_NODE_LABEL;
+  const allocateIdentity = createIdentityAllocator(nodesRef.current);
+  const { id: nodeId, label } = allocateIdentity(baseLabel);
+  const description =
+    typeof node.description === "string" && node.description.length > 0
+      ? node.description
+      : typeof baseDataRest.description === "string"
+        ? baseDataRest.description
+        : "";
+
+  return {
+    nodeType,
+    baseDataRest,
+    semanticType,
+    nodeId,
+    label,
+    description,
+  };
+}
+
+export function createStickyNode(
+  base: NodeBaseData,
+  position: { x: number; y: number },
+  handleUpdateStickyNoteNode: (nodeId: string, data: Partial<NodeData>) => void,
+): CanvasNode {
+  return {
+    id: base.nodeId,
+    type: "stickyNote",
+    position,
+    style: defaultNodeStyle,
+    data: {
+      ...base.baseDataRest,
+      label: base.label,
+      description: base.description,
+      type: base.semanticType,
+      status: "idle" as NodeStatus,
+      color: isStickyNoteColor(base.baseDataRest.color)
+        ? (base.baseDataRest.color as StickyNoteColor)
+        : DEFAULT_STICKY_NOTE_COLOR,
+      content: sanitizeStickyNoteContent(
+        base.baseDataRest.content ?? DEFAULT_STICKY_NOTE_CONTENT,
+      ),
+      width: sanitizeStickyNoteDimension(
+        base.baseDataRest.width,
+        DEFAULT_STICKY_NOTE_WIDTH,
+        STICKY_NOTE_MIN_WIDTH,
+      ),
+      height: sanitizeStickyNoteDimension(
+        base.baseDataRest.height,
+        DEFAULT_STICKY_NOTE_HEIGHT,
+        STICKY_NOTE_MIN_HEIGHT,
+      ),
+      onUpdateStickyNote: handleUpdateStickyNoteNode,
+    },
+    draggable: true,
+    connectable: false,
+  };
+}
+
+export function createStandardNode(
+  base: NodeBaseData,
+  position: { x: number; y: number },
+  handleOpenChat: (nodeId: string) => void,
+): CanvasNode {
+  const rawIconKey =
+    typeof base.baseDataRest.iconKey === "string"
+      ? base.baseDataRest.iconKey
+      : undefined;
+  const finalIconKey =
+    inferNodeIconKey({
+      iconKey: rawIconKey,
+      label: base.label,
+      type: base.semanticType,
+    }) ?? rawIconKey;
+  const iconNode = getNodeIcon(finalIconKey) ?? base.baseDataRest.icon;
+
+  return {
+    id: base.nodeId,
+    type: base.nodeType,
+    position,
+    style: defaultNodeStyle,
+    data: {
+      ...base.baseDataRest,
+      label: base.label,
+      description: base.description,
+      type: base.semanticType,
+      status: "idle" as NodeStatus,
+      iconKey: finalIconKey,
+      icon: iconNode,
+      onOpenChat:
+        base.nodeType === "chatTrigger"
+          ? () => handleOpenChat(base.nodeId)
+          : undefined,
+    },
+    draggable: true,
+  };
+}

package/src/features/workflow/pages/workflow-canvas/hooks/use-canvas-ui-state.ts

@@ -0,0 +1,19 @@
+import { useState } from "react";
+
+export function useCanvasUiState() {
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState("canvas");
+  const [hoveredEdgeId, setHoveredEdgeId] = useState<string | null>(null);
+
+  return {
+    sidebarCollapsed,
+    setSidebarCollapsed,
+    selectedNodeId,
+    setSelectedNodeId,
+    activeTab,
+    setActiveTab,
+    hoveredEdgeId,
+    setHoveredEdgeId,
+  };
+}

package/src/features/workflow/pages/workflow-canvas/hooks/use-decorated-nodes.ts

@@ -0,0 +1,115 @@
+import { useMemo } from "react";
+
+import type {
+  StickyNoteColor,
+  StickyNoteNodeData,
+} from "@features/workflow/components/nodes/sticky-note-node";
+import {
+  DEFAULT_STICKY_NOTE_COLOR,
+  DEFAULT_STICKY_NOTE_HEIGHT,
+  DEFAULT_STICKY_NOTE_WIDTH,
+  STICKY_NOTE_MIN_HEIGHT,
+  STICKY_NOTE_MIN_WIDTH,
+  isStickyNoteColor,
+  sanitizeStickyNoteContent,
+  sanitizeStickyNoteDimension,
+} from "@features/workflow/pages/workflow-canvas/helpers/sticky-notes";
+import type {
+  CanvasNode,
+  NodeData,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+type UseDecoratedNodesArgs = {
+  nodes: CanvasNode[];
+  isSearchOpen: boolean;
+  searchMatchSet: Set<string>;
+  searchMatches: string[];
+  currentSearchIndex: number;
+  handleDeleteNode: (id: string) => void;
+  handleUpdateStickyNoteNode: (
+    id: string,
+    updates: Partial<
+      Pick<StickyNoteNodeData, "color" | "content" | "width" | "height">
+    >,
+  ) => void;
+};
+
+export const useDecoratedNodes = ({
+  nodes,
+  isSearchOpen,
+  searchMatchSet,
+  searchMatches,
+  currentSearchIndex,
+  handleDeleteNode,
+  handleUpdateStickyNoteNode,
+}: UseDecoratedNodesArgs) => {
+  return useMemo(() => {
+    return nodes.map((node) => {
+      const isMatch = searchMatchSet.has(node.id);
+      const isActive =
+        isMatch &&
+        isSearchOpen &&
+        searchMatches[currentSearchIndex] === node.id;
+      const isStickyNoteNode = node.type === "stickyNote";
+
+      const baseData = {
+        ...node.data,
+        onDelete: handleDeleteNode,
+        ...(isStickyNoteNode
+          ? { onUpdateStickyNote: handleUpdateStickyNoteNode }
+          : {}),
+      } as NodeData & Record<string, unknown>;
+
+      const augmentedData = isStickyNoteNode
+        ? ({
+            ...baseData,
+            label:
+              typeof baseData.label === "string" && baseData.label.length > 0
+                ? baseData.label
+                : "Sticky Note",
+            color: isStickyNoteColor(baseData.color)
+              ? (baseData.color as StickyNoteColor)
+              : DEFAULT_STICKY_NOTE_COLOR,
+            content: sanitizeStickyNoteContent(baseData.content),
+            width: sanitizeStickyNoteDimension(
+              baseData.width,
+              DEFAULT_STICKY_NOTE_WIDTH,
+              STICKY_NOTE_MIN_WIDTH,
+            ),
+            height: sanitizeStickyNoteDimension(
+              baseData.height,
+              DEFAULT_STICKY_NOTE_HEIGHT,
+              STICKY_NOTE_MIN_HEIGHT,
+            ),
+            onUpdateStickyNote: handleUpdateStickyNoteNode,
+          } as NodeData)
+        : baseData;
+
+      const decoratedData = !isSearchOpen
+        ? {
+            ...augmentedData,
+            isSearchMatch: false,
+            isSearchActive: false,
+          }
+        : {
+            ...augmentedData,
+            isSearchMatch: isMatch,
+            isSearchActive: isActive,
+          };
+
+      return {
+        ...node,
+        data: decoratedData,
+        ...(isStickyNoteNode ? { connectable: false } : {}),
+      };
+    });
+  }, [
+    currentSearchIndex,
+    handleDeleteNode,
+    handleUpdateStickyNoteNode,
+    isSearchOpen,
+    nodes,
+    searchMatchSet,
+    searchMatches,
+  ]);
+};