orcheo-canvas 0.0.1

package/src/features/workflow/components/panels/node-inspector/types.ts

@@ -0,0 +1,31 @@
+import type { Edge, Node } from "@xyflow/react";
+
+export type NodeRuntimeCacheEntry = {
+  inputs?: unknown;
+  outputs?: unknown;
+  messages?: unknown;
+  raw?: unknown;
+  updatedAt?: string;
+};
+
+export interface NodeInspectorProps {
+  node?: {
+    id: string;
+    type: string;
+    data: Record<string, unknown>;
+  };
+  nodes?: Node[];
+  edges?: Edge[];
+  onClose?: () => void;
+  onSave?: (nodeId: string, data: Record<string, unknown>) => void;
+  runtimeCache?: Record<string, NodeRuntimeCacheEntry>;
+  onCacheRuntime?: (nodeId: string, runtime: NodeRuntimeCacheEntry) => void;
+  className?: string;
+}
+
+export interface SchemaField {
+  name: string;
+  type: string;
+  path: string;
+  description?: string;
+}

package/src/features/workflow/components/panels/node-inspector/use-node-tester.ts

@@ -0,0 +1,209 @@
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { executeNode } from "@/lib/api";
+import type { NodeInspectorProps, NodeRuntimeCacheEntry } from "./types";
+import { isRecord } from "./utils";
+
+interface UseNodeTesterParams {
+  node?: NodeInspectorProps["node"];
+  backendType: string | null;
+  draftData: Record<string, unknown>;
+  liveInputs: unknown;
+  upstreamOutputs: Record<string, unknown>;
+  useLiveData: boolean;
+  onCacheRuntime?: (nodeId: string, runtime: NodeRuntimeCacheEntry) => void;
+}
+
+interface UseNodeTesterReturn {
+  isTestingNode: boolean;
+  testResult: unknown;
+  testError: string | null;
+  handleTestNode: () => Promise<void>;
+}
+
+const buildNodeConfig = (
+  node: NonNullable<NodeInspectorProps["node"]>,
+  draftData: Record<string, unknown>,
+  backendType: string,
+): Record<string, unknown> => {
+  const nodeConfig: Record<string, unknown> = {
+    name: node.id,
+    ...draftData,
+  };
+
+  delete nodeConfig.runtime;
+  delete nodeConfig.label;
+  delete nodeConfig.description;
+  delete nodeConfig.iconKey;
+  delete nodeConfig.backendType;
+  delete nodeConfig.type;
+
+  nodeConfig.type = backendType;
+
+  if (
+    backendType === "SetVariableNode" &&
+    Array.isArray(nodeConfig.variables)
+  ) {
+    const variablesArray = nodeConfig.variables as Array<
+      Record<string, unknown>
+    >;
+    const variablesDict: Record<string, unknown> = {};
+
+    for (const variable of variablesArray) {
+      if (!variable?.name) continue;
+
+      const variableName = String(variable.name);
+      const valueType =
+        typeof variable.valueType === "string" ? variable.valueType : "string";
+      let typedValue = variable.value ?? null;
+
+      if (typedValue !== null && typedValue !== undefined) {
+        switch (valueType) {
+          case "number":
+            typedValue = Number(typedValue);
+            break;
+          case "boolean":
+            typedValue =
+              typedValue === true || typedValue === "true" || typedValue === 1;
+            break;
+          case "object":
+            if (typeof typedValue === "string") {
+              try {
+                typedValue = JSON.parse(typedValue);
+              } catch {
+                console.warn(
+                  `Failed to parse object value for ${variableName}, using empty object`,
+                );
+                typedValue = {};
+              }
+            }
+            break;
+          default:
+            typedValue = String(typedValue);
+        }
+      }
+
+      variablesDict[variableName] = typedValue;
+    }
+
+    nodeConfig.variables = variablesDict;
+  }
+
+  return nodeConfig;
+};
+
+export function useNodeTester({
+  node,
+  backendType,
+  draftData,
+  liveInputs,
+  upstreamOutputs,
+  useLiveData,
+  onCacheRuntime,
+}: UseNodeTesterParams): UseNodeTesterReturn {
+  const [isTestingNode, setIsTestingNode] = useState(false);
+  const [testResult, setTestResult] = useState<unknown>(null);
+  const [testError, setTestError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setTestResult(null);
+    setTestError(null);
+  }, [node?.id]);
+
+  const handleTestNode = useCallback(async () => {
+    if (!node) {
+      toast.error("Cannot test node: node not found");
+      return;
+    }
+
+    const resolvedBackendType =
+      typeof draftData?.backendType === "string"
+        ? (draftData.backendType as string)
+        : backendType;
+
+    if (!resolvedBackendType) {
+      toast.error(
+        "Cannot test node: missing backend type information. This node may not support testing yet.",
+      );
+      return;
+    }
+
+    setIsTestingNode(true);
+    setTestError(null);
+    setTestResult(null);
+
+    try {
+      const nodeConfig = buildNodeConfig(node, draftData, resolvedBackendType);
+
+      let inputs: Record<string, unknown> = {};
+
+      if (useLiveData && isRecord(liveInputs)) {
+        inputs = { ...liveInputs };
+      } else if (Object.keys(upstreamOutputs).length > 0) {
+        inputs = { ...upstreamOutputs };
+      }
+
+      const response = await executeNode({
+        node_config: nodeConfig,
+        inputs,
+      });
+
+      if (response.status === "success") {
+        setTestResult(response.result);
+        const timestamp = new Date().toISOString();
+        const cachedInputs = { ...inputs };
+        const runtimeUpdate: NodeRuntimeCacheEntry = {
+          ...(Object.keys(cachedInputs).length > 0
+            ? { inputs: cachedInputs }
+            : {}),
+          raw: response.result,
+          updatedAt: timestamp,
+        };
+
+        if (response.result !== undefined) {
+          if (isRecord(response.result)) {
+            const resultRecord = response.result as Record<string, unknown>;
+            if (resultRecord.outputs !== undefined) {
+              runtimeUpdate.outputs = resultRecord.outputs;
+            } else if (runtimeUpdate.outputs === undefined) {
+              runtimeUpdate.outputs = response.result;
+            }
+            if (resultRecord.messages !== undefined) {
+              runtimeUpdate.messages = resultRecord.messages;
+            }
+          } else {
+            runtimeUpdate.outputs = response.result;
+          }
+        }
+
+        onCacheRuntime?.(node.id, runtimeUpdate);
+        toast.success("Node executed successfully");
+      } else {
+        setTestError(response.error || "Unknown error");
+        toast.error("Node execution failed");
+      }
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Failed to execute node";
+      setTestError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setIsTestingNode(false);
+    }
+  }, [
+    backendType,
+    draftData,
+    liveInputs,
+    node,
+    onCacheRuntime,
+    upstreamOutputs,
+    useLiveData,
+  ]);
+
+  return {
+    isTestingNode,
+    testResult,
+    testError,
+    handleTestNode,
+  };
+}

package/src/features/workflow/components/panels/node-inspector/utils.ts

@@ -0,0 +1,82 @@
+import { DEFAULT_PYTHON_CODE } from "@features/workflow/lib/python-node";
+import type { NodeInspectorProps, NodeRuntimeCacheEntry } from "./types";
+
+export const isRecord = (value: unknown): value is Record<string, unknown> => {
+  return typeof value === "object" && value !== null;
+};
+
+export const extractPythonCode = (
+  node?: NodeInspectorProps["node"],
+): string => {
+  if (!node) {
+    return DEFAULT_PYTHON_CODE;
+  }
+  const candidate = node.data?.code;
+  return typeof candidate === "string" && candidate.length > 0
+    ? candidate
+    : DEFAULT_PYTHON_CODE;
+};
+
+export const getSemanticType = (
+  node?: NodeInspectorProps["node"],
+): string | null => {
+  if (!node) {
+    return null;
+  }
+  const dataType = node.data?.type;
+  if (typeof dataType === "string" && dataType.length > 0) {
+    return dataType.toLowerCase();
+  }
+  return typeof node.type === "string" && node.type.length > 0
+    ? node.type.toLowerCase()
+    : null;
+};
+
+export const formatUpdatedAt = (timestamp?: string): string | null => {
+  if (!timestamp) {
+    return null;
+  }
+  const parsed = new Date(timestamp);
+  if (Number.isNaN(parsed.getTime())) {
+    return timestamp;
+  }
+  return parsed.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+};
+
+export const getOutputDisplay = (
+  runtime: NodeRuntimeCacheEntry | null,
+): {
+  outputDisplay: unknown;
+  hasLiveOutputs: boolean;
+} => {
+  if (!runtime) {
+    return { outputDisplay: undefined, hasLiveOutputs: false };
+  }
+
+  const { outputs, messages, raw } = runtime;
+  let display: unknown = raw;
+
+  if (outputs !== undefined || messages !== undefined) {
+    const merged: Record<string, unknown> = {};
+    if (outputs !== undefined) {
+      merged.outputs = outputs as unknown;
+    }
+    if (messages !== undefined) {
+      merged.messages = messages as unknown;
+    }
+    display =
+      outputs !== undefined && messages === undefined ? outputs : merged;
+  }
+
+  const hasOutputs =
+    outputs !== undefined || messages !== undefined || display !== undefined;
+
+  return {
+    outputDisplay: display,
+    hasLiveOutputs: hasOutputs,
+  };
+};

package/src/features/workflow/components/panels/rjsf-basic-widgets.tsx

@@ -0,0 +1,21 @@
+/**
+ * Aggregates the basic widget sets to keep the theme entry tidy.
+ */
+
+import { RegistryWidgetsType } from "@rjsf/utils";
+import { primitiveWidgets } from "./rjsf-input-widgets";
+import { textWidgets } from "./rjsf-text-widgets";
+
+export const basicWidgets = {
+  ...textWidgets,
+  ...primitiveWidgets,
+} satisfies Pick<
+  RegistryWidgetsType,
+  | "TextWidget"
+  | "TextareaWidget"
+  | "NumberWidget"
+  | "CheckboxWidget"
+  | "SelectWidget"
+>;
+
+export { primitiveWidgets, textWidgets };

package/src/features/workflow/components/panels/rjsf-condition-widgets.tsx

@@ -0,0 +1,241 @@
+/* eslint-disable react-refresh/only-export-components */
+/**
+ * Condition-specific widgets that provide operator pickers and typed operands.
+ */
+
+import React from "react";
+import { RegistryWidgetsType, WidgetProps, getUiOptions } from "@rjsf/utils";
+import { Input } from "@/design-system/ui/input";
+import { Button } from "@/design-system/ui/button";
+import { Check } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/design-system/ui/dropdown-menu";
+import {
+  conditionOperatorGroups,
+  type ConditionOperatorGroup,
+  type ConditionOperatorOption,
+} from "@features/workflow/lib/node-schemas";
+import {
+  hasSchemaFieldData,
+  insertSchemaFieldReference,
+  readSchemaFieldDragData,
+} from "./schema-dnd";
+
+const formatOperandValue = (value: unknown): string => {
+  if (value === undefined) {
+    return "";
+  }
+  if (value === null) {
+    return "null";
+  }
+  if (typeof value === "object") {
+    try {
+      return JSON.stringify(value);
+    } catch (error) {
+      console.error("Failed to stringify operand", error);
+      return "";
+    }
+  }
+  return String(value);
+};
+
+const parseOperandValue = (rawValue: string): unknown => {
+  const trimmed = rawValue.trim();
+  if (trimmed.length === 0) {
+    return undefined;
+  }
+  if (trimmed === "null") {
+    return null;
+  }
+  if (trimmed === "true") {
+    return true;
+  }
+  if (trimmed === "false") {
+    return false;
+  }
+  const numberPattern = /^-?\d+(\.\d+)?$/;
+  if (numberPattern.test(trimmed)) {
+    return Number(trimmed);
+  }
+  return rawValue;
+};
+
+function ConditionOperandWidget(props: WidgetProps) {
+  const {
+    id,
+    value,
+    onChange,
+    disabled,
+    readonly,
+    placeholder,
+    onBlur,
+    onFocus,
+  } = props;
+  const displayValue = formatOperandValue(value);
+
+  const handleDragOver = React.useCallback(
+    (event: React.DragEvent<HTMLInputElement>) => {
+      if (disabled || readonly) {
+        return;
+      }
+      if (hasSchemaFieldData(event.dataTransfer)) {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "copy";
+      }
+    },
+    [disabled, readonly],
+  );
+
+  const handleDrop = React.useCallback(
+    (event: React.DragEvent<HTMLInputElement>) => {
+      if (disabled || readonly) {
+        return;
+      }
+
+      const payload = readSchemaFieldDragData(event.dataTransfer);
+      if (!payload?.path) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      const target = event.target as HTMLInputElement;
+      const { value: nextValue, selectionStart } = insertSchemaFieldReference(
+        target,
+        payload.path,
+      );
+
+      target.value = nextValue;
+      target.focus();
+      const restoreSelection = () =>
+        target.setSelectionRange(selectionStart, selectionStart);
+      if (typeof window !== "undefined" && window.requestAnimationFrame) {
+        window.requestAnimationFrame(restoreSelection);
+      } else {
+        restoreSelection();
+      }
+
+      const parsedValue = parseOperandValue(nextValue);
+      onChange(parsedValue);
+    },
+    [disabled, onChange, readonly],
+  );
+
+  return (
+    <Input
+      id={id}
+      value={displayValue}
+      onChange={(event) => onChange(parseOperandValue(event.target.value))}
+      onBlur={(event) => onBlur?.(id, parseOperandValue(event.target.value))}
+      onFocus={(event) => onFocus?.(id, parseOperandValue(event.target.value))}
+      disabled={disabled || readonly}
+      placeholder={placeholder}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    />
+  );
+}
+
+type OperatorSelection = {
+  group: ConditionOperatorGroup;
+  option: ConditionOperatorOption;
+};
+
+const findOperatorSelection = (value: unknown): OperatorSelection | null => {
+  if (typeof value !== "string") {
+    return null;
+  }
+  for (const group of conditionOperatorGroups) {
+    const option = group.options.find((candidate) => candidate.value === value);
+    if (option) {
+      return { group, option };
+    }
+  }
+  return null;
+};
+
+function ConditionOperatorWidget(props: WidgetProps) {
+  const { id, value, onChange, disabled, readonly, options, uiSchema } = props;
+  const uiOptions = getUiOptions(uiSchema);
+  const groups =
+    (uiOptions.operatorGroups as ConditionOperatorGroup[]) ??
+    conditionOperatorGroups;
+  const selection = findOperatorSelection(value);
+  const buttonLabel = selection
+    ? `${selection.group.label} · ${selection.option.label}`
+    : "Select operator";
+  const allowedValues = new Set(
+    ((options.enumOptions as Array<{ value: string }> | undefined) ?? []).map(
+      (entry) => String(entry.value),
+    ),
+  );
+
+  const handleSelect = (nextValue: string) => {
+    if (!allowedValues.size || allowedValues.has(nextValue)) {
+      onChange(nextValue);
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          id={id}
+          variant="outline"
+          className="w-full justify-between"
+          disabled={disabled || readonly}
+        >
+          <span className="truncate text-left">{buttonLabel}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-64">
+        {groups.map((group) => (
+          <DropdownMenuSub key={group.key}>
+            <DropdownMenuSubTrigger>{group.label}</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent className="w-64">
+              {group.options.map((option) => (
+                <DropdownMenuItem
+                  key={option.value}
+                  onSelect={() => handleSelect(option.value)}
+                  className="justify-between"
+                >
+                  <div className="flex flex-col text-left">
+                    <span>{option.label}</span>
+                    {option.description && (
+                      <span className="text-xs text-muted-foreground">
+                        {option.description}
+                      </span>
+                    )}
+                  </div>
+                  {selection?.option.value === option.value && (
+                    <Check className="h-4 w-4" />
+                  )}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+type ConditionWidgetMap = Pick<
+  RegistryWidgetsType,
+  "conditionOperand" | "conditionOperator"
+>;
+
+export const conditionWidgets: ConditionWidgetMap = {
+  conditionOperand: ConditionOperandWidget,
+  conditionOperator: ConditionOperatorWidget,
+};
+
+export { ConditionOperandWidget, ConditionOperatorWidget };

package/src/features/workflow/components/panels/rjsf-input-widgets.tsx

@@ -0,0 +1,105 @@
+/* eslint-disable react-refresh/only-export-components */
+/**
+ * Primitive input widgets (number, checkbox, select).
+ */
+
+import React from "react";
+import { RegistryWidgetsType, WidgetProps } from "@rjsf/utils";
+import { Input } from "@/design-system/ui/input";
+import { Label } from "@/design-system/ui/label";
+import { Switch } from "@/design-system/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/design-system/ui/select";
+
+function NumberWidget(props: WidgetProps) {
+  const {
+    id,
+    value,
+    onChange,
+    required,
+    disabled,
+    readonly,
+    placeholder,
+    schema,
+  } = props;
+
+  return (
+    <Input
+      id={id}
+      type="number"
+      value={value ?? ""}
+      onChange={(e) => {
+        const val = e.target.value;
+        onChange(val === "" ? undefined : Number(val));
+      }}
+      required={required}
+      disabled={disabled}
+      readOnly={readonly}
+      placeholder={placeholder}
+      min={schema.minimum}
+      max={schema.maximum}
+      step={schema.multipleOf || (schema.type === "integer" ? 1 : "any")}
+    />
+  );
+}
+
+function CheckboxWidget(props: WidgetProps) {
+  const { id, value, onChange, label, disabled, readonly } = props;
+
+  return (
+    <div className="flex items-center space-x-2">
+      <Switch
+        id={id}
+        checked={Boolean(value)}
+        onCheckedChange={onChange}
+        disabled={disabled || readonly}
+      />
+      <Label htmlFor={id}>{label}</Label>
+    </div>
+  );
+}
+
+function SelectWidget(props: WidgetProps) {
+  const { id, value, onChange, options, disabled, readonly, placeholder } =
+    props;
+  const { enumOptions } = options;
+
+  return (
+    <Select
+      value={value ? String(value) : undefined}
+      onValueChange={onChange}
+      disabled={disabled || readonly}
+    >
+      <SelectTrigger id={id}>
+        <SelectValue placeholder={placeholder || "Select an option"} />
+      </SelectTrigger>
+      <SelectContent>
+        {(enumOptions as Array<{ value: string; label: string }>)?.map(
+          (option) => (
+            <SelectItem key={option.value} value={String(option.value)}>
+              {option.label}
+            </SelectItem>
+          ),
+        )}
+      </SelectContent>
+    </Select>
+  );
+}
+
+type PrimitiveWidgetMap = Pick<
+  RegistryWidgetsType,
+  "NumberWidget" | "CheckboxWidget" | "SelectWidget"
+>;
+
+export const primitiveWidgets: PrimitiveWidgetMap = {
+  NumberWidget,
+  CheckboxWidget,
+  SelectWidget,
+};
+
+export { NumberWidget, CheckboxWidget, SelectWidget };