@invect/ui 0.0.1

package/src/components/flow-editor/node-config-panel/hooks/use-node-config-panel-state.ts

@@ -0,0 +1,284 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import type { Node, Edge } from '@xyflow/react';
+import { parseJson, stringifyJson } from '../utils';
+import { useFlowEditorStore } from '../../flow-editor.store';
+import type { ReactFlowNodeData } from '@invect/core/types';
+
+/**
+ * Generate a slug from a label string (snake_case, alphanumeric only)
+ */
+function generateSlug(label: string): string {
+  return label
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '_')
+    .replace(/^_+|_+$/g, '')
+    .substring(0, 50);
+}
+
+/**
+ * Compute input data for a node based on its incoming edges.
+ * Maps output data from source nodes using their reference_id as keys.
+ * Structure matches the backend's buildIncomingDataObject format for template resolution.
+ *
+ * Example output:
+ * {
+ *   "some_node": { output: "value from some_node" },
+ *   "other_node": { output: "value from other_node" }
+ * }
+ */
+// Extended node data type that includes preview-related properties
+// These are runtime properties added during editing, not part of the base ReactFlowNodeData type
+interface ExtendedNodeData {
+  id?: string;
+  type?: string;
+  display_name?: string;
+  reference_id?: string;
+  status?: string;
+  executionStatus?: string;
+  executionError?: string;
+  executionOutput?: unknown;
+  params?: Record<string, unknown>;
+  inputs?: unknown;
+  outputs?: unknown;
+  // Preview/editor-specific properties
+  previewInput?: unknown;
+  previewOutput?: unknown;
+  mockInputData?: unknown;
+  mockOutputData?: unknown;
+  lastInputs?: unknown;
+  exampleInput?: unknown;
+  exampleOutput?: unknown;
+}
+
+function computeInputFromEdges(
+  targetNodeId: string,
+  nodes: Node[],
+  edges: Edge[],
+): Record<string, unknown> {
+  const incomingEdges = edges.filter((edge) => edge.target === targetNodeId);
+
+  if (incomingEdges.length === 0) {
+    return {};
+  }
+
+  const inputData: Record<string, unknown> = {};
+
+  for (const edge of incomingEdges) {
+    const sourceNode = nodes.find((n) => n.id === edge.source);
+    if (!sourceNode) {
+      continue;
+    }
+
+    // Cast to access ReactFlowNodeData properties at runtime
+    const sourceNodeData = sourceNode.data as ExtendedNodeData;
+    const displayName = sourceNodeData.display_name || sourceNode.id;
+
+    // Use reference_id if available, otherwise generate slug from display name
+    const slug = sourceNodeData.reference_id || generateSlug(displayName);
+
+    // Get the output data from the source node
+    const sourceOutput =
+      sourceNodeData.previewOutput ??
+      sourceNodeData.executionOutput ??
+      sourceNodeData.mockOutputData ??
+      sourceNodeData.exampleOutput;
+
+    if (sourceOutput !== undefined && sourceOutput !== null) {
+      // Map directly: { slug: outputValue }
+      // This allows templates to use {{ slug }} directly for the output value
+      inputData[slug] = sourceOutput;
+    } else {
+      // Source node has not been run yet - show placeholder
+      inputData[slug] = `[NO DATA]`;
+    }
+  }
+
+  return inputData;
+}
+
+interface UsePreviewStateOptions {
+  nodeId: string | null;
+  updateNodeData: (nodeId: string, data: Partial<ReactFlowNodeData>) => void;
+}
+
+export function usePreviewState({ nodeId, updateNodeData }: UsePreviewStateOptions) {
+  // Use Zustand store as source of truth instead of React Flow's internal store
+  const nodes = useFlowEditorStore((s) => s.nodes);
+  const edges = useFlowEditorStore((s) => s.edges);
+
+  // Find the current node from our store
+  const node = useMemo(() => {
+    if (!nodeId) {
+      return null;
+    }
+    return nodes.find((n) => n.id === nodeId) ?? null;
+  }, [nodeId, nodes]);
+
+  const [inputPreview, setInputPreview] = useState('');
+  const [outputPreview, setOutputPreview] = useState('');
+  const [inputError, setInputError] = useState<string | null>(null);
+  const [outputError, setOutputError] = useState<string | null>(null);
+
+  // Test mode state
+  const [isTestMode, setIsTestMode] = useState(false);
+  const [originalInputPreview, setOriginalInputPreview] = useState<string | null>(null);
+
+  const prevNodeIdRef = useRef<string | null>(null);
+
+  // Initialize previews when node changes
+  useEffect(() => {
+    const nodeIdChanged = prevNodeIdRef.current !== nodeId;
+    prevNodeIdRef.current = nodeId;
+
+    if (!node || !nodeId) {
+      setInputPreview('');
+      setOutputPreview('');
+      setInputError(null);
+      setOutputError(null);
+      setIsTestMode(false);
+      setOriginalInputPreview(null);
+      return;
+    }
+
+    if (nodeIdChanged) {
+      // Cast to extended type to access preview properties
+      const currentNodeData = node.data as ExtendedNodeData;
+      const computedInput = computeInputFromEdges(nodeId, nodes, edges);
+      const hasComputedInput = Object.keys(computedInput).length > 0;
+
+      let initialInput: string;
+      if (currentNodeData.previewInput) {
+        initialInput = stringifyJson(currentNodeData.previewInput);
+      } else if (hasComputedInput) {
+        initialInput = stringifyJson(computedInput);
+      } else {
+        initialInput = stringifyJson(
+          currentNodeData.mockInputData ??
+            currentNodeData.lastInputs ??
+            currentNodeData.exampleInput ??
+            {},
+        );
+      }
+
+      setInputPreview(initialInput);
+      setOriginalInputPreview(initialInput);
+      setIsTestMode(false);
+
+      setOutputPreview(
+        stringifyJson(
+          currentNodeData.previewOutput ??
+            currentNodeData.executionOutput ??
+            currentNodeData.mockOutputData ??
+            currentNodeData.exampleOutput ??
+            {},
+        ),
+      );
+
+      setInputError(null);
+      setOutputError(null);
+    }
+  }, [nodeId, nodes, edges, node]);
+
+  const handleInputPreviewChange = useCallback(
+    (value: string) => {
+      setInputPreview(value);
+      setInputError(null);
+
+      if (originalInputPreview !== null && value !== originalInputPreview) {
+        setIsTestMode(true);
+      } else if (value === originalInputPreview) {
+        setIsTestMode(false);
+      }
+
+      if (nodeId) {
+        const parsed = parseJson(value, setInputError);
+        if (parsed !== null) {
+          // Note: previewInput is an extended property, cast is needed
+          updateNodeData(nodeId, { previewInput: parsed } as Partial<ReactFlowNodeData>);
+        }
+      }
+    },
+    [nodeId, updateNodeData, originalInputPreview],
+  );
+
+  const handleOutputPreviewChange = useCallback(
+    (value: string) => {
+      setOutputPreview(value);
+      setOutputError(null);
+
+      if (nodeId) {
+        const parsed = parseJson(value, setOutputError);
+        if (parsed !== null) {
+          // Note: previewOutput is an extended property, cast is needed
+          updateNodeData(nodeId, { previewOutput: parsed } as Partial<ReactFlowNodeData>);
+        }
+      }
+    },
+    [nodeId, updateNodeData],
+  );
+
+  const handleResetTestMode = useCallback(() => {
+    if (originalInputPreview !== null) {
+      setInputPreview(originalInputPreview);
+      setIsTestMode(false);
+
+      if (nodeId) {
+        const parsed = parseJson(originalInputPreview, setInputError);
+        if (parsed !== null) {
+          // Note: previewInput is an extended property, cast is needed
+          updateNodeData(nodeId, { previewInput: parsed } as Partial<ReactFlowNodeData>);
+        }
+      }
+    }
+  }, [originalInputPreview, nodeId, updateNodeData]);
+
+  const updateFromExecution = useCallback((newInput: string, newOutput: string) => {
+    setInputPreview(newInput);
+    setOriginalInputPreview(newInput);
+    setOutputPreview(newOutput);
+    setIsTestMode(false);
+  }, []);
+
+  // Refresh input preview from edges (used after running upstream nodes)
+  const refreshInputFromEdges = useCallback(() => {
+    if (!nodeId) {
+      return;
+    }
+
+    const computedInput = computeInputFromEdges(nodeId, nodes, edges);
+    const newInputStr = stringifyJson(computedInput);
+
+    setInputPreview(newInputStr);
+    setOriginalInputPreview(newInputStr);
+    setIsTestMode(false);
+    setInputError(null);
+  }, [nodeId, nodes, edges]);
+
+  // Get upstream variable names (reference IDs from connected upstream nodes)
+  const upstreamVariables = useMemo(() => {
+    if (!nodeId) {
+      return [];
+    }
+    const computedInput = computeInputFromEdges(nodeId, nodes, edges);
+    return Object.keys(computedInput);
+  }, [nodeId, nodes, edges]);
+
+  return {
+    inputPreview,
+    outputPreview,
+    inputError,
+    outputError,
+    isTestMode,
+    originalInputPreview,
+    upstreamVariables,
+    setInputPreview,
+    setOutputPreview,
+    setInputError,
+    setOutputError,
+    handleInputPreviewChange,
+    handleOutputPreviewChange,
+    handleResetTestMode,
+    updateFromExecution,
+    refreshInputFromEdges,
+  };
+}

package/src/components/flow-editor/node-config-panel/hooks/use-node-execution.ts

@@ -0,0 +1,287 @@
+import { useCallback, useState } from 'react';
+import { parseJson, stringifyJson } from '../utils';
+import type { UseMutationResult } from '@tanstack/react-query';
+
+// Options for save operation
+interface SaveOptions {
+  skipSuccessToast?: boolean;
+}
+
+// Flow actions interface
+interface FlowActions {
+  onExecute: () => Promise<void>;
+  isExecuting: boolean;
+  isDirty?: boolean;
+  onSave?: (options?: SaveOptions) => Promise<boolean>;
+  isSaving?: boolean;
+}
+
+interface ExecutionResult {
+  success: boolean;
+  output?: unknown;
+  error?: string;
+  fieldErrors?: Record<string, string>;
+  traces?: Array<{
+    nodeId: string;
+    inputs: unknown;
+    outputs: unknown;
+  }>;
+}
+
+// Type for the executeFlowToNode mutation
+type ExecuteFlowToNodeMutation = UseMutationResult<
+  unknown,
+  Error,
+  {
+    flowId: string;
+    nodeId: string;
+    inputs?: Record<string, unknown>;
+    options?: { useBatchProcessing?: boolean };
+  }
+>;
+
+// Type for the testNode mutation
+type TestNodeMutation = UseMutationResult<
+  unknown,
+  Error,
+  {
+    nodeType: string;
+    params: Record<string, unknown>;
+    inputs: Record<string, unknown>;
+  }
+>;
+
+interface UseNodeExecutionOptions {
+  nodeId: string | null;
+  flowId: string;
+  nodeType: string;
+  nodeParams: Record<string, unknown>;
+  executeFlowToNodeMutation: ExecuteFlowToNodeMutation;
+  testNodeMutation?: TestNodeMutation;
+  flowActions: FlowActions | null;
+  updateNodeData: (nodeId: string, data: Record<string, unknown>) => void;
+  isTestMode: boolean;
+  inputPreview: string;
+  onExecutionComplete: (input: string, output: string) => void;
+}
+
+/**
+ * Extract output value from the structured node output format
+ */
+function extractOutputValue(nodeOutput: unknown): unknown {
+  if (!nodeOutput || typeof nodeOutput !== 'object') {
+    return null;
+  }
+
+  const typedOutput = nodeOutput as { data?: { variables?: Record<string, { value: unknown }> } };
+
+  if (typedOutput.data?.variables?.output) {
+    const outputVar = typedOutput.data.variables.output;
+    return outputVar && typeof outputVar === 'object' && 'value' in outputVar
+      ? outputVar.value
+      : outputVar;
+  }
+
+  if (typedOutput.data?.variables) {
+    const firstVar = Object.values(typedOutput.data.variables)[0];
+    return firstVar && typeof firstVar === 'object' && 'value' in firstVar
+      ? firstVar.value
+      : firstVar;
+  }
+
+  return null;
+}
+
+/**
+ * Parse Zod prettifyError output to extract per-field error messages.
+ * Zod v4 errors look like: "✕ Invalid input: expected string, received undefined\n  → at to"
+ * Multiple errors are separated by newlines.
+ */
+function parseFieldErrorsFromString(errorStr: string): Record<string, string> | null {
+  const fieldErrors: Record<string, string> = {};
+  // Split on the arrow marker and extract "message → at fieldName" pairs
+  const parts = errorStr.split('→');
+  for (let i = 1; i < parts.length; i++) {
+    const afterArrow = parts[i].match(/^\s*at\s+(\w+)/);
+    if (!afterArrow) {
+      continue;
+    }
+    const fieldName = afterArrow[1];
+    // Message is everything in the previous part (after any prior field match)
+    const rawMessage = (parts[i - 1] ?? '').replace(/\n[ \t]*$/, '');
+    // Take the last line as the message (handles multi-error strings)
+    const lastLine = rawMessage.split('\n').pop() ?? '';
+    const message = lastLine.replace(/^[✕×]\s*/, '').trim();
+    if (fieldName && message) {
+      fieldErrors[fieldName] = message;
+    }
+  }
+  return Object.keys(fieldErrors).length > 0 ? fieldErrors : null;
+}
+
+export function useNodeExecution({
+  nodeId,
+  flowId,
+  nodeType,
+  nodeParams,
+  executeFlowToNodeMutation,
+  testNodeMutation,
+  flowActions,
+  updateNodeData,
+  isTestMode,
+  inputPreview,
+  onExecutionComplete,
+}: UseNodeExecutionOptions) {
+  const [isRunning, setIsRunning] = useState(false);
+  const [runError, setRunError] = useState<string | null>(null);
+  const [outputError, setOutputError] = useState<string | null>(null);
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string> | null>(null);
+
+  const runNode = useCallback(async () => {
+    if (!nodeId || !flowId) {
+      return;
+    }
+
+    setIsRunning(true);
+    setRunError(null);
+    setOutputError(null);
+    setFieldErrors(null);
+
+    try {
+      // Auto-save flow before running
+      if (flowActions?.onSave) {
+        const saveSucceeded = await flowActions.onSave({ skipSuccessToast: true });
+        if (!saveSucceeded) {
+          setRunError('Failed to save flow. Please fix any validation errors and try again.');
+          setOutputError('Save failed - check node configuration');
+          setIsRunning(false);
+          return;
+        }
+      }
+
+      if (isTestMode) {
+        // Test mode: run single node with custom input
+        if (!testNodeMutation) {
+          setRunError('Test mode is not available');
+          setOutputError('Test mode is not available');
+          setIsRunning(false);
+          return;
+        }
+
+        const testInput = parseJson(inputPreview, () => ({})) || {};
+        const result = (await testNodeMutation.mutateAsync({
+          nodeType,
+          params: nodeParams,
+          inputs: testInput,
+        })) as ExecutionResult;
+
+        if (result.success && result.output) {
+          const output = extractOutputValue(result.output) ?? result.output;
+          const displayValue = typeof output === 'string' ? output : stringifyJson(output);
+
+          updateNodeData(nodeId, { previewOutput: output });
+          onExecutionComplete(inputPreview, displayValue);
+        } else {
+          setRunError(result.error || 'Test execution failed');
+          setOutputError(result.error || 'Test execution failed');
+          if (result.fieldErrors) {
+            setFieldErrors(result.fieldErrors);
+          }
+        }
+      } else {
+        // Normal mode: run flow up to this node
+        const result = (await executeFlowToNodeMutation.mutateAsync({
+          flowId,
+          nodeId,
+          inputs: {},
+          options: { useBatchProcessing: false },
+        })) as {
+          status: string;
+          error?: string;
+          nodeErrors?: Record<string, string>;
+          traces?: Array<{ nodeId: string; inputs: unknown; outputs: unknown; error?: string }>;
+          outputs?: Record<string, unknown>;
+        };
+
+        if (result.status === 'SUCCESS') {
+          // Update all executed nodes from traces
+          if (result.traces && Array.isArray(result.traces)) {
+            for (const trace of result.traces) {
+              const traceNodeId = trace.nodeId;
+              if (!traceNodeId) {
+                continue;
+              }
+
+              const traceOutput = extractOutputValue(trace.outputs);
+              updateNodeData(traceNodeId, {
+                previewInput: trace.inputs,
+                previewOutput: traceOutput,
+              });
+            }
+          }
+
+          // Get current node's output
+          const nodeOutput = result.outputs?.[nodeId];
+          const output = extractOutputValue(nodeOutput);
+          const displayValue = typeof output === 'string' ? output : stringifyJson(output);
+
+          // Get current node's input from trace
+          const currentTrace = result.traces?.find((t: { nodeId: string }) => t.nodeId === nodeId);
+          const newInputPreview = currentTrace?.inputs
+            ? stringifyJson(currentTrace.inputs)
+            : inputPreview;
+
+          onExecutionComplete(newInputPreview, displayValue);
+        } else if (result.status === 'PAUSED_FOR_BATCH') {
+          setRunError('Execution paused for batch processing. Check the Runs view for status.');
+          setOutputError('Waiting for batch processing...');
+        } else {
+          // Extract the most specific error available:
+          // 1. Error for this specific node from nodeErrors
+          // 2. Top-level error from the result
+          // 3. Error from the failed trace
+          // 4. Generic fallback
+          const specificError =
+            result.nodeErrors?.[nodeId] ||
+            result.error ||
+            result.traces?.find((t) => t.error)?.error ||
+            'Node execution failed';
+          setRunError(specificError);
+          setOutputError(specificError);
+          // Try to parse field-specific errors from the error string
+          const parsed = parseFieldErrorsFromString(specificError);
+          if (parsed) {
+            setFieldErrors(parsed);
+          }
+        }
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred';
+      setRunError(errorMessage);
+      setOutputError(errorMessage);
+    } finally {
+      setIsRunning(false);
+    }
+  }, [
+    executeFlowToNodeMutation,
+    testNodeMutation,
+    nodeId,
+    flowId,
+    flowActions,
+    isTestMode,
+    inputPreview,
+    nodeType,
+    nodeParams,
+    updateNodeData,
+    onExecutionComplete,
+  ]);
+
+  return {
+    isRunning,
+    runError,
+    outputError,
+    fieldErrors,
+    runNode,
+    setOutputError,
+  };
+}