@invect/ui 0.0.1

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

@@ -0,0 +1,283 @@
+import { create } from 'zustand';
+import type { FlowRunResult } from '@invect/core/types';
+import { parseJson, stringifyJson } from './utils';
+
+/**
+ * State for the node config panel
+ */
+interface NodeConfigPanelState {
+  // Panel state
+  nodeId: string | null;
+  flowId: string | null;
+
+  // Input/Output previews
+  inputPreview: string;
+  outputPreview: string;
+  inputError: string | null;
+  outputError: string | null;
+
+  // Test mode
+  isTestMode: boolean;
+  originalInputPreview: string | null;
+
+  // Execution state
+  isRunningNode: boolean;
+  runError: string | null;
+
+  // Credential modal
+  isCreateCredentialOpen: boolean;
+  activeCredentialField: string | null;
+}
+
+/**
+ * Actions for the node config panel
+ */
+interface NodeConfigPanelActions {
+  // Initialization
+  initializeForNode: (
+    nodeId: string,
+    flowId: string,
+    initialInput: string,
+    initialOutput: string,
+  ) => void;
+  reset: () => void;
+
+  // Input preview
+  setInputPreview: (value: string) => void;
+  setInputError: (error: string | null) => void;
+
+  // Output preview
+  setOutputPreview: (value: string) => void;
+  setOutputError: (error: string | null) => void;
+
+  // Test mode
+  enterTestMode: () => void;
+  exitTestMode: () => void;
+  resetTestMode: () => void;
+
+  // Execution
+  setIsRunningNode: (isRunning: boolean) => void;
+  setRunError: (error: string | null) => void;
+
+  // Credential modal
+  openCreateCredentialModal: (fieldName: string) => void;
+  closeCreateCredentialModal: () => void;
+
+  // Execution result handlers
+  handleTestModeSuccess: (output: unknown) => void;
+  handleNormalModeSuccess: (
+    result: FlowRunResult,
+    nodeId: string,
+    updateNodeData: (nodeId: string, data: Record<string, unknown>) => void,
+  ) => void;
+  handleExecutionError: (error: string) => void;
+}
+
+type NodeConfigPanelStore = NodeConfigPanelState & NodeConfigPanelActions;
+
+const initialState: NodeConfigPanelState = {
+  nodeId: null,
+  flowId: null,
+  inputPreview: '{}',
+  outputPreview: '{}',
+  inputError: null,
+  outputError: null,
+  isTestMode: false,
+  originalInputPreview: null,
+  isRunningNode: false,
+  runError: null,
+  isCreateCredentialOpen: false,
+  activeCredentialField: null,
+};
+
+/**
+ * Extract the output value from a node execution result
+ */
+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;
+}
+
+/**
+ * Format output for display - strings as-is, objects as JSON
+ */
+function formatOutputForDisplay(output: unknown): string {
+  if (typeof output === 'string') {
+    return output;
+  }
+  return stringifyJson(output);
+}
+
+/**
+ * Zustand store for node config panel state management
+ */
+export const useNodeConfigPanelStore = create<NodeConfigPanelStore>((set, get) => ({
+  ...initialState,
+
+  initializeForNode: (nodeId, flowId, initialInput, initialOutput) => {
+    set({
+      nodeId,
+      flowId,
+      inputPreview: initialInput,
+      outputPreview: initialOutput,
+      originalInputPreview: initialInput,
+      inputError: null,
+      outputError: null,
+      isTestMode: false,
+      runError: null,
+    });
+  },
+
+  reset: () => {
+    set(initialState);
+  },
+
+  setInputPreview: (value) => {
+    const { originalInputPreview } = get();
+    const isTestMode = originalInputPreview !== null && value !== originalInputPreview;
+
+    set({
+      inputPreview: value,
+      inputError: null,
+      isTestMode,
+    });
+  },
+
+  setInputError: (error) => {
+    set({ inputError: error });
+  },
+
+  setOutputPreview: (value) => {
+    set({
+      outputPreview: value,
+      outputError: null,
+    });
+  },
+
+  setOutputError: (error) => {
+    set({ outputError: error });
+  },
+
+  enterTestMode: () => {
+    set({ isTestMode: true });
+  },
+
+  exitTestMode: () => {
+    set({ isTestMode: false });
+  },
+
+  resetTestMode: () => {
+    const { originalInputPreview } = get();
+    if (originalInputPreview !== null) {
+      set({
+        inputPreview: originalInputPreview,
+        isTestMode: false,
+      });
+    }
+  },
+
+  setIsRunningNode: (isRunning) => {
+    set({ isRunningNode: isRunning });
+  },
+
+  setRunError: (error) => {
+    set({ runError: error });
+  },
+
+  openCreateCredentialModal: (fieldName) => {
+    set({
+      isCreateCredentialOpen: true,
+      activeCredentialField: fieldName,
+    });
+  },
+
+  closeCreateCredentialModal: () => {
+    set({
+      isCreateCredentialOpen: false,
+      activeCredentialField: null,
+    });
+  },
+
+  handleTestModeSuccess: (output) => {
+    const displayValue = formatOutputForDisplay(output);
+    set({
+      outputPreview: displayValue,
+      outputError: null,
+      runError: null,
+    });
+  },
+
+  handleNormalModeSuccess: (result, nodeId, updateNodeData) => {
+    // Update input/output data for 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 traceInputs = trace.inputs;
+        const traceOutput = extractOutputValue(trace.outputs);
+
+        updateNodeData(traceNodeId, {
+          previewInput: traceInputs,
+          previewOutput: traceOutput,
+        });
+      }
+    }
+
+    // Update local state for the current node's output display
+    const nodeOutput = result.outputs?.[nodeId];
+    const output = extractOutputValue(nodeOutput);
+    const displayValue = formatOutputForDisplay(output);
+
+    // Update input preview from the current node's trace
+    const currentTrace = result.traces?.find((t: { nodeId: string }) => t.nodeId === nodeId);
+    const newInputPreview = currentTrace?.inputs
+      ? stringifyJson(currentTrace.inputs)
+      : get().inputPreview;
+
+    set({
+      outputPreview: displayValue,
+      outputError: null,
+      runError: null,
+      inputPreview: newInputPreview,
+      originalInputPreview: newInputPreview,
+      isTestMode: false,
+    });
+  },
+
+  handleExecutionError: (error) => {
+    set({
+      runError: error,
+      outputError: error,
+    });
+  },
+}));
+
+/**
+ * Hook to get parsed input data for test mode execution
+ */
+export function useParsedInputPreview(): Record<string, unknown> {
+  const inputPreview = useNodeConfigPanelStore((state) => state.inputPreview);
+  return parseJson(inputPreview, () => ({})) || {};
+}

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

@@ -0,0 +1,172 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { Node } from '@xyflow/react';
+import type { NodeDefinition } from '../../../types/node-definition.types';
+import { useResolveNodeDefinition } from '../../../api/node-data.api';
+
+interface UseNodeConfigStateOptions {
+  node: Node<Record<string, unknown>> | null;
+  nodeType: string;
+  definition?: NodeDefinition;
+  /** Callback to persist params back to Zustand. Required for backend resolution writes. */
+  onParamsChange?: (nodeId: string, params: Record<string, unknown>) => void;
+}
+
+interface UseNodeConfigStateResult {
+  definition?: NodeDefinition;
+  values: Record<string, unknown>;
+  warnings: string[];
+  errors: string[];
+  updateField: (fieldName: string, value: unknown) => void;
+  isUpdating: boolean;
+}
+
+function buildDefaultParams(definition?: NodeDefinition): Record<string, unknown> {
+  if (!definition?.paramFields?.length) {
+    return {};
+  }
+
+  return definition.paramFields.reduce<Record<string, unknown>>((acc, field) => {
+    if (field.defaultValue !== undefined) {
+      acc[field.name] = field.defaultValue;
+    }
+    return acc;
+  }, {});
+}
+
+/**
+ * Hook for node configuration state — reads params from the node (Zustand)
+ * and provides validation, backend config resolution, and field update.
+ *
+ * After Phase 1.3 refactor: `values` is derived from node.data.params (Zustand),
+ * NOT stored locally. This eliminates the dual-source-of-truth problem.
+ */
+export function useNodeConfigState({
+  node,
+  nodeType,
+  definition,
+  onParamsChange,
+}: UseNodeConfigStateOptions): UseNodeConfigStateResult {
+  const nodeDefinitionResolver = useResolveNodeDefinition();
+  const nodeId = node?.id ?? null;
+
+  const [activeDefinition, setActiveDefinition] = useState<NodeDefinition | undefined>(definition);
+  const [warnings, setWarnings] = useState<string[]>([]);
+  const [errors, setErrors] = useState<string[]>([]);
+
+  const lastRequestIdRef = useRef(0);
+  const resolveDefinitionRef = useRef<
+    (params: Record<string, unknown>, change?: { field: string; value: unknown }) => void
+  >(() => {
+    // noop placeholder until ready
+  });
+
+  // Read params directly from the node (Zustand is the single source of truth)
+  const nodeParams = node?.data?.params as Record<string, unknown> | undefined;
+  const defaults = useMemo(() => buildDefaultParams(definition), [definition]);
+  const values = useMemo(() => ({ ...defaults, ...nodeParams }), [defaults, nodeParams]);
+
+  const hasNode = Boolean(node);
+
+  // Stable ref for onParamsChange to avoid re-creating resolveDefinition
+  const onParamsChangeRef = useRef(onParamsChange);
+  onParamsChangeRef.current = onParamsChange;
+
+  const resolveDefinition = useCallback(
+    (params: Record<string, unknown>, change?: { field: string; value: unknown }) => {
+      const requestId = ++lastRequestIdRef.current;
+
+      nodeDefinitionResolver.mutate(
+        {
+          nodeType,
+          nodeId,
+          params,
+          changeField: change?.field,
+          changeValue: change?.value,
+        },
+        {
+          onSuccess: (response) => {
+            if (requestId !== lastRequestIdRef.current) {
+              return;
+            }
+
+            setActiveDefinition(response.definition ?? definition);
+            setWarnings(response.warnings ?? []);
+            setErrors(response.errors ?? []);
+
+            // Write resolved params back to Zustand (e.g. provider detection sets model list)
+            if (response.params && nodeId && onParamsChangeRef.current) {
+              onParamsChangeRef.current(nodeId, response.params);
+            }
+          },
+          onError: (error) => {
+            if (requestId !== lastRequestIdRef.current) {
+              return;
+            }
+
+            setErrors([
+              error instanceof Error ? error.message : 'Failed to resolve node definition',
+            ]);
+          },
+        },
+      );
+    },
+    [nodeDefinitionResolver, nodeType, nodeId, definition],
+  );
+
+  useEffect(() => {
+    resolveDefinitionRef.current = resolveDefinition;
+  }, [resolveDefinition]);
+
+  useEffect(() => {
+    setActiveDefinition(definition);
+  }, [definition]);
+
+  // Reset transient state when node changes; trigger initial backend resolution if needed
+  const nodeParamsSignature = useMemo(() => JSON.stringify(nodeParams ?? {}), [nodeParams]);
+  useEffect(() => {
+    if (!hasNode) {
+      setWarnings([]);
+      setErrors([]);
+      lastRequestIdRef.current = 0;
+      return;
+    }
+
+    setWarnings([]);
+    setErrors([]);
+
+    // Call the backend config resolution when the node has a credential
+    // that needs provider detection (e.g. model selection, batch processing toggle).
+    const credentialId =
+      typeof values.credentialId === 'string' && values.credentialId
+        ? values.credentialId
+        : undefined;
+    if (credentialId) {
+      resolveDefinitionRef.current(values, { field: 'credentialId', value: credentialId });
+    }
+  }, [hasNode, nodeId, nodeParamsSignature, nodeType]);
+
+  // Fields that should trigger a backend config update when changed
+  const FIELDS_REQUIRING_CONFIG_UPDATE = new Set(['credentialId', 'provider']);
+
+  const updateField = useCallback(
+    (fieldName: string, value: unknown) => {
+      // Compute next params from current values
+      const next = { ...values, [fieldName]: value };
+
+      // Only call the backend config update for fields that need dynamic resolution
+      if (FIELDS_REQUIRING_CONFIG_UPDATE.has(fieldName)) {
+        resolveDefinitionRef.current(next, { field: fieldName, value });
+      }
+    },
+    [values],
+  );
+
+  return {
+    definition: activeDefinition,
+    values,
+    warnings,
+    errors,
+    updateField,
+    isUpdating: nodeDefinitionResolver.isPending,
+  };
+}

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

@@ -0,0 +1,147 @@
+import { useCallback } from 'react';
+import { GraphNodeType } from '@invect/core/types';
+import { useApiClient } from '../../../contexts/ApiContext';
+import { useFlowActions } from '../../../routes/flow-route-layout';
+import { useNodeConfigPanelStore, useParsedInputPreview } from './use-node-config-panel-store';
+
+interface UseRunNodeOptions {
+  nodeId: string | null;
+  flowId: string;
+  nodeType: GraphNodeType;
+  nodeParams: Record<string, unknown>;
+  updateNodeData: (nodeId: string, data: Record<string, unknown>) => void;
+}
+
+/**
+ * Hook that handles all node execution logic (both test mode and normal mode)
+ */
+export function useRunNode({
+  nodeId,
+  flowId,
+  nodeType,
+  nodeParams,
+  updateNodeData,
+}: UseRunNodeOptions) {
+  const apiClient = useApiClient();
+  const flowActions = useFlowActions();
+  const parsedInput = useParsedInputPreview();
+
+  const {
+    isTestMode,
+    isRunningNode,
+    setIsRunningNode,
+    handleTestModeSuccess,
+    handleNormalModeSuccess,
+    handleExecutionError,
+    setRunError,
+    setOutputError,
+  } = useNodeConfigPanelStore();
+
+  const runNode = useCallback(async () => {
+    if (!apiClient || !nodeId || !flowId) {
+      return;
+    }
+
+    setIsRunningNode(true);
+    setRunError(null);
+    setOutputError(null);
+
+    try {
+      // Auto-save flow before running to ensure backend has latest nodes
+      if (flowActions?.onSave) {
+        const saveSucceeded = await flowActions.onSave({ skipSuccessToast: true });
+        if (!saveSucceeded) {
+          handleExecutionError(
+            'Failed to save flow. Please fix any validation errors and try again.',
+          );
+          setIsRunningNode(false);
+          return;
+        }
+      }
+
+      if (isTestMode) {
+        // Test mode: Use testNode API with custom input (skip upstream nodes)
+        const result = await apiClient.testNode(nodeType, nodeParams, parsedInput);
+
+        if (result.success && result.output) {
+          // Extract output value
+          const typedOutput = result.output as {
+            data?: { variables?: Record<string, { value: unknown }> };
+          };
+          let output: unknown = null;
+
+          if (typedOutput.data?.variables?.output) {
+            const outputVar = typedOutput.data.variables.output;
+            output =
+              outputVar && typeof outputVar === 'object' && 'value' in outputVar
+                ? outputVar.value
+                : outputVar;
+          } else if (typedOutput.data?.variables) {
+            const firstVar = Object.values(typedOutput.data.variables)[0];
+            output =
+              firstVar && typeof firstVar === 'object' && 'value' in firstVar
+                ? firstVar.value
+                : firstVar;
+          } else {
+            output = result.output;
+          }
+
+          handleTestModeSuccess(output);
+          updateNodeData(nodeId, { previewOutput: output });
+        } else {
+          handleExecutionError(result.error || 'Test execution failed');
+        }
+      } else {
+        // Normal mode: Execute the flow up to this node
+        // Always use direct execution (no batch processing) when running from node config panel
+        const result = await apiClient.executeFlowToNode(
+          flowId,
+          nodeId,
+          {},
+          { useBatchProcessing: false },
+        );
+
+        if (result.status === 'SUCCESS') {
+          handleNormalModeSuccess(result, nodeId, updateNodeData);
+        } else if (result.status === 'PAUSED_FOR_BATCH') {
+          handleExecutionError(
+            'Execution paused for batch processing. Check the Runs view for status.',
+          );
+        } else {
+          // Extract the most specific error available
+          const specificError =
+            (result as { nodeErrors?: Record<string, string> }).nodeErrors?.[nodeId] ||
+            result.error ||
+            'Node execution failed';
+          handleExecutionError(specificError);
+        }
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred';
+      handleExecutionError(errorMessage);
+    } finally {
+      setIsRunningNode(false);
+    }
+  }, [
+    apiClient,
+    nodeId,
+    flowId,
+    flowActions,
+    isTestMode,
+    nodeType,
+    nodeParams,
+    parsedInput,
+    updateNodeData,
+    setIsRunningNode,
+    setRunError,
+    setOutputError,
+    handleTestModeSuccess,
+    handleNormalModeSuccess,
+    handleExecutionError,
+  ]);
+
+  return {
+    runNode,
+    isRunningNode,
+  };
+}

package/src/components/flow-editor/node-config-panel/utils.ts

@@ -0,0 +1,73 @@
+import * as Icons from 'lucide-react';
+
+export const getIconComponent = (iconName?: string) => {
+  if (!iconName) {
+    return Icons.Zap;
+  }
+  // @ts-ignore - Dynamic lookup of Lucide icons by name
+  return Icons[iconName] || Icons.Zap;
+};
+
+export const formatNodeTypeLabel = (value: string) => {
+  // For action-based types like "gmail.list_messages", show just the action part
+  const actionPart = value.includes('.') ? (value.split('.').pop() ?? value) : value;
+  return actionPart.toLowerCase().replace(/_/g, ' ');
+};
+
+export const stringifyJson = (value: unknown) => {
+  try {
+    if (typeof value === 'string') {
+      return value;
+    }
+    return JSON.stringify(value ?? {}, null, 2);
+  } catch {
+    return '{}';
+  }
+};
+
+export const parseJson = (
+  raw: string,
+  setError: (value: string | null) => void,
+): Record<string, unknown> | null => {
+  if (!raw.trim()) {
+    setError(null);
+    return {};
+  }
+
+  try {
+    const parsed = JSON.parse(raw);
+    setError(null);
+    return parsed;
+  } catch {
+    setError('Invalid JSON');
+    return null;
+  }
+};
+
+/**
+ * Extract the primary output value from the structured node output format.
+ * Handles the `{ data: { variables: { output: { value } } } }` wrapper.
+ */
+export 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;
+}