From 571a5a04e5795ec9a7589f6ed3f003ae82dc46f3 Mon Sep 17 00:00:00 2001
From: Nikhil-Doye <nikhil.doye@gmail.com>
Date: Mon, 27 Oct 2025 14:56:56 -0400
Subject: [PATCH] Add test input configuration feature to ExecutionPanel

- Introduced TestInputConfigurator component for configuring test inputs in workflows.
- Enhanced ExecutionPanel to include a button for opening the test input configuration modal.
- Integrated test input management logic using the new TestInputManager service to handle input mappings and validation.
- Updated workflow execution logic to apply test inputs based on user configuration, improving flexibility and usability in testing scenarios.
---
 src/components/ExecutionPanel.tsx        |  41 +++
 src/components/TestInputConfigurator.tsx | 344 +++++++++++++++++++++++
 src/services/testInputManager.ts         | 303 ++++++++++++++++++++
 src/store/workflowStore.ts               |  38 ++-
 4 files changed, 705 insertions(+), 21 deletions(-)
 create mode 100644 src/components/TestInputConfigurator.tsx
 create mode 100644 src/services/testInputManager.ts

diff --git a/src/components/ExecutionPanel.tsx b/src/components/ExecutionPanel.tsx
index 61a6da1..0c13779 100644
--- a/src/components/ExecutionPanel.tsx
+++ b/src/components/ExecutionPanel.tsx
@@ -1,7 +1,12 @@
 import React from "react";
+import { TestInputConfigurator } from "./TestInputConfigurator";
 import { useWorkflowStore } from "../store/workflowStore";
 import { ExecutionConfiguration } from "./ExecutionConfiguration";
 import { ExecutionPlanPreview } from "./ExecutionPlanPreview";
+import {
+  testInputManager,
+  TestInputConfig,
+} from "../services/testInputManager";
 import {
   Zap,
   Play,
@@ -19,6 +24,9 @@ import {
   BarChart3,
   Layers,
   GitBranch,
+  Zap as TestIcon,
+  Trash2,
+  X,
 } from "lucide-react";
 
 export const ExecutionPanel: React.FC = () => {
@@ -41,6 +49,9 @@ export const ExecutionPanel: React.FC = () => {
   const [showStats, setShowStats] = React.useState(false);
   const [showConfig, setShowConfig] = React.useState(false);
   const [showPlanPreview, setShowPlanPreview] = React.useState(false);
+  const [showTestInputConfig, setShowTestInputConfig] = React.useState(false);
+  const [testInputConfig, setTestInputConfig] =
+    React.useState<TestInputConfig | null>(null);
 
   const handleExecute = async () => {
     if (isExecuting) {
@@ -51,6 +62,8 @@ export const ExecutionPanel: React.FC = () => {
     if (!currentWorkflow) return;
 
     try {
+      // For now, execute without test input
+      // In a future enhancement, you could pass the testInputConfig here
       await executeWorkflow();
     } catch (error) {
       console.error("Execution failed:", error);
@@ -278,6 +291,13 @@ export const ExecutionPanel: React.FC = () => {
                 >
                   <Download className="w-4 h-4" />
                 </button>
+                <button
+                  onClick={() => setShowTestInputConfig(true)}
+                  className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+                  title="Configure test inputs"
+                >
+                  <TestIcon className="w-4 h-4" />
+                </button>
                 <button
                   onClick={() => togglePanel("executionPanel")}
                   className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
@@ -336,6 +356,16 @@ export const ExecutionPanel: React.FC = () => {
                 <RotateCcw className="w-4 h-4" />
               </button>
 
+              {/* Test Input Configuration Button */}
+              <button
+                onClick={() => setShowTestInputConfig(true)}
+                className="px-4 py-3 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition-all duration-200 flex items-center space-x-2"
+                title="Configure test inputs"
+              >
+                <TestIcon className="w-4 h-4" />
+                <span className="font-medium hidden sm:inline">Test Input</span>
+              </button>
+
               <button
                 onClick={createTestWorkflow}
                 className="px-4 py-3 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition-all duration-200"
@@ -547,6 +577,17 @@ export const ExecutionPanel: React.FC = () => {
         isOpen={showPlanPreview}
         onClose={() => setShowPlanPreview(false)}
       />
+
+      {/* Test Input Configuration Modal */}
+      <TestInputConfigurator
+        isOpen={showTestInputConfig}
+        onClose={() => setShowTestInputConfig(false)}
+        nodes={currentWorkflow?.nodes || []}
+        onApply={(config) => {
+          setTestInputConfig(config);
+          setShowTestInputConfig(false);
+        }}
+      />
     </div>
   );
 };
diff --git a/src/components/TestInputConfigurator.tsx b/src/components/TestInputConfigurator.tsx
new file mode 100644
index 0000000..4f397a8
--- /dev/null
+++ b/src/components/TestInputConfigurator.tsx
@@ -0,0 +1,344 @@
+import React, { useState, useEffect } from "react";
+import {
+  X,
+  Plus,
+  Trash2,
+  ChevronDown,
+  ChevronUp,
+  AlertCircle,
+  CheckCircle,
+} from "lucide-react";
+import {
+  testInputManager,
+  TestInputConfig,
+  DataInputNode,
+} from "../services/testInputManager";
+
+interface TestInputConfiguratorProps {
+  nodes: any[];
+  isOpen: boolean;
+  onClose: () => void;
+  onApply: (config: TestInputConfig) => void;
+  initialValue?: string;
+}
+
+export const TestInputConfigurator: React.FC<TestInputConfiguratorProps> = ({
+  nodes,
+  isOpen,
+  onClose,
+  onApply,
+  initialValue,
+}) => {
+  const [mode, setMode] = useState<"single" | "multiple" | "auto">("auto");
+  const [mappings, setMappings] = useState<
+    Array<{ nodeId: string; value: string }>
+  >([]);
+  const [fallbackValue, setFallbackValue] = useState<string>(
+    initialValue || ""
+  );
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const dataInputNodes = testInputManager.findDataInputNodes(nodes);
+  const status = testInputManager.getStatus(
+    { mode, mappings, fallbackValue },
+    nodes
+  );
+
+  // Initialize configuration based on data input nodes
+  useEffect(() => {
+    if (!isOpen) return;
+
+    if (dataInputNodes.length === 0) {
+      setMode("auto");
+    } else if (dataInputNodes.length === 1) {
+      setMode("single");
+      setMappings([
+        { nodeId: dataInputNodes[0].id, value: initialValue || "" },
+      ]);
+    } else {
+      setMode("auto");
+      setMappings([]);
+    }
+  }, [isOpen, dataInputNodes, initialValue]);
+
+  const handleApply = () => {
+    const config: TestInputConfig = { mode, mappings, fallbackValue };
+
+    const validation = testInputManager.validateTestInputConfig(config, nodes);
+    if (!validation.isValid) {
+      alert(`Validation errors:\n${validation.errors.join("\n")}`);
+      return;
+    }
+
+    onApply(config);
+    onClose();
+  };
+
+  const addMapping = () => {
+    if (dataInputNodes.length > 0) {
+      const unmappedNode = dataInputNodes.find(
+        (n) => !mappings.some((m) => m.nodeId === n.id)
+      );
+      if (unmappedNode) {
+        setMappings([...mappings, { nodeId: unmappedNode.id, value: "" }]);
+      }
+    }
+  };
+
+  const removeMapping = (nodeId: string) => {
+    setMappings(mappings.filter((m) => m.nodeId !== nodeId));
+  };
+
+  const updateMapping = (nodeId: string, value: string) => {
+    setMappings(
+      mappings.map((m) => (m.nodeId === nodeId ? { ...m, value } : m))
+    );
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-96 flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50">
+          <div>
+            <h2 className="text-xl font-bold text-gray-900">
+              Configure Test Inputs
+            </h2>
+            <p className="text-sm text-gray-600 mt-1">
+              {dataInputNodes.length} data input node
+              {dataInputNodes.length !== 1 ? "s" : ""} found
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 text-gray-400 hover:text-gray-600 transition-colors"
+          >
+            <X className="w-6 h-6" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-6 space-y-4">
+          {dataInputNodes.length === 0 ? (
+            <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg flex items-start space-x-3">
+              <AlertCircle className="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5" />
+              <div>
+                <p className="text-sm font-semibold text-yellow-900">
+                  No Input Nodes
+                </p>
+                <p className="text-sm text-yellow-700 mt-1">
+                  Add a Data Input node to your workflow to configure test
+                  inputs
+                </p>
+              </div>
+            </div>
+          ) : (
+            <>
+              {/* Mode Selection */}
+              <div className="space-y-3">
+                <label className="block text-sm font-semibold text-gray-900">
+                  Input Mode
+                </label>
+                <div className="grid grid-cols-3 gap-2">
+                  {["single", "multiple", "auto"].map((m) => (
+                    <button
+                      key={m}
+                      onClick={() => {
+                        setMode(m as "single" | "multiple" | "auto");
+                        if (m === "single" && dataInputNodes.length > 0) {
+                          setMappings([
+                            {
+                              nodeId: dataInputNodes[0].id,
+                              value: initialValue || "",
+                            },
+                          ]);
+                        } else if (m === "auto") {
+                          setMappings([]);
+                        }
+                      }}
+                      className={`px-4 py-2 rounded-lg font-medium text-sm transition-colors ${
+                        mode === m
+                          ? "bg-blue-600 text-white"
+                          : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                      }`}
+                    >
+                      {m === "single"
+                        ? "Single"
+                        : m === "multiple"
+                        ? "Multiple"
+                        : "Auto"}
+                    </button>
+                  ))}
+                </div>
+                <p className="text-xs text-gray-600 mt-2">
+                  {mode === "single" && "Configure one primary input node"}
+                  {mode === "multiple" &&
+                    "Map test data to each input node individually"}
+                  {mode === "auto" &&
+                    "Same test data applied to all input nodes"}
+                </p>
+              </div>
+
+              {/* Input Configuration */}
+              {mode === "auto" && (
+                <div className="space-y-2 p-4 bg-gray-50 rounded-lg border border-gray-200">
+                  <label className="block text-sm font-semibold text-gray-900">
+                    Test Data (Applied to All Inputs)
+                  </label>
+                  <textarea
+                    value={fallbackValue}
+                    onChange={(e) => setFallbackValue(e.target.value)}
+                    placeholder="Enter test data here..."
+                    className="w-full p-3 border border-gray-300 rounded-lg font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    rows={3}
+                  />
+                  <p className="text-xs text-gray-600">
+                    This data will be sent to all {dataInputNodes.length} input
+                    node{dataInputNodes.length !== 1 ? "s" : ""}
+                  </p>
+                </div>
+              )}
+
+              {mode === "single" && (
+                <div className="space-y-2 p-4 bg-gray-50 rounded-lg border border-gray-200">
+                  <label className="block text-sm font-semibold text-gray-900">
+                    Select Input Node & Data
+                  </label>
+                  {mappings.length > 0 && (
+                    <>
+                      <select
+                        value={mappings[0].nodeId}
+                        onChange={(e) => {
+                          const newMapping = {
+                            ...mappings[0],
+                            nodeId: e.target.value,
+                          };
+                          setMappings([newMapping]);
+                        }}
+                        className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      >
+                        {dataInputNodes.map((node) => (
+                          <option key={node.id} value={node.id}>
+                            {node.label}
+                          </option>
+                        ))}
+                      </select>
+                      <textarea
+                        value={mappings[0].value}
+                        onChange={(e) =>
+                          updateMapping(mappings[0].nodeId, e.target.value)
+                        }
+                        placeholder="Enter test data..."
+                        className="w-full p-3 border border-gray-300 rounded-lg font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        rows={3}
+                      />
+                    </>
+                  )}
+                </div>
+              )}
+
+              {mode === "multiple" && (
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <label className="block text-sm font-semibold text-gray-900">
+                      Configure Each Input
+                    </label>
+                    {mappings.length < dataInputNodes.length && (
+                      <button
+                        onClick={addMapping}
+                        className="flex items-center space-x-1 px-3 py-1 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                      >
+                        <Plus className="w-4 h-4" />
+                        <span>Add Mapping</span>
+                      </button>
+                    )}
+                  </div>
+
+                  {mappings.length === 0 ? (
+                    <button
+                      onClick={addMapping}
+                      className="w-full p-4 border-2 border-dashed border-gray-300 rounded-lg text-gray-600 hover:border-gray-400 transition-colors"
+                    >
+                      Click to add first mapping
+                    </button>
+                  ) : (
+                    <div className="space-y-3">
+                      {mappings.map((mapping) => {
+                        const node = dataInputNodes.find(
+                          (n) => n.id === mapping.nodeId
+                        );
+                        return (
+                          <div
+                            key={mapping.nodeId}
+                            className="p-3 border border-gray-300 rounded-lg space-y-2 bg-white"
+                          >
+                            <div className="flex items-center justify-between">
+                              <span className="font-medium text-sm text-gray-900">
+                                {node?.label || mapping.nodeId}
+                              </span>
+                              {mappings.length > 1 && (
+                                <button
+                                  onClick={() => removeMapping(mapping.nodeId)}
+                                  className="p-1 text-red-600 hover:text-red-700 hover:bg-red-50 rounded transition-colors"
+                                >
+                                  <Trash2 className="w-4 h-4" />
+                                </button>
+                              )}
+                            </div>
+                            <textarea
+                              value={mapping.value}
+                              onChange={(e) =>
+                                updateMapping(mapping.nodeId, e.target.value)
+                              }
+                              placeholder="Enter test data for this input..."
+                              className="w-full p-2 border border-gray-300 rounded font-mono text-xs focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                              rows={2}
+                            />
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="p-6 border-t border-gray-200 bg-gray-50 flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            {status.icon === "✅" && (
+              <CheckCircle className="w-5 h-5 text-green-600" />
+            )}
+            {status.icon === "⚠️" && (
+              <AlertCircle className="w-5 h-5 text-yellow-600" />
+            )}
+            {status.icon === "ℹ️" && (
+              <AlertCircle className="w-5 h-5 text-blue-600" />
+            )}
+            <span className="text-sm text-gray-700">{status.message}</span>
+          </div>
+
+          <div className="flex items-center space-x-3">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors font-medium"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleApply}
+              disabled={dataInputNodes.length === 0}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
+            >
+              Apply
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/services/testInputManager.ts b/src/services/testInputManager.ts
new file mode 100644
index 0000000..8f6f2da
--- /dev/null
+++ b/src/services/testInputManager.ts
@@ -0,0 +1,303 @@
+/**
+ * Test Input Manager
+ * Manages test data distribution across multiple data input nodes in a workflow
+ */
+
+export interface DataInputNode {
+  id: string;
+  label: string;
+  type: "dataInput";
+}
+
+export interface TestInputMapping {
+  nodeId: string;
+  value: string | any;
+  label?: string;
+}
+
+export interface TestInputConfig {
+  mode: "single" | "multiple" | "auto";
+  mappings: TestInputMapping[];
+  fallbackValue?: string;
+}
+
+export class TestInputManager {
+  /**
+   * Find all data input nodes in the workflow
+   */
+  findDataInputNodes(nodes: any[]): DataInputNode[] {
+    return nodes
+      .filter(
+        (node) => node.data?.type === "dataInput" || node.type === "dataInput"
+      )
+      .map((node) => ({
+        id: node.id,
+        label: node.data?.label || `Input (${node.id.slice(0, 8)})`,
+        type: "dataInput" as const,
+      }));
+  }
+
+  /**
+   * Validate test input configuration
+   */
+  validateTestInputConfig(
+    config: TestInputConfig,
+    nodes: any[]
+  ): { isValid: boolean; errors: string[] } {
+    const errors: string[] = [];
+    const dataInputNodes = this.findDataInputNodes(nodes);
+
+    if (dataInputNodes.length === 0) {
+      errors.push("No data input nodes found in workflow");
+      return { isValid: false, errors };
+    }
+
+    if (config.mode === "multiple") {
+      if (config.mappings.length === 0) {
+        errors.push("Multiple mode selected but no mappings provided");
+      }
+
+      config.mappings.forEach((mapping) => {
+        if (!dataInputNodes.some((n) => n.id === mapping.nodeId)) {
+          errors.push(`Node ${mapping.nodeId} is not a data input node`);
+        }
+
+        if (!mapping.value) {
+          errors.push(`No value provided for node ${mapping.nodeId}`);
+        }
+      });
+    } else if (config.mode === "single") {
+      if (config.mappings.length !== 1) {
+        errors.push("Single mode requires exactly one mapping");
+      }
+
+      if (config.mappings.length > 0 && !config.mappings[0].value) {
+        errors.push("No value provided for single input");
+      }
+    }
+
+    return { isValid: errors.length === 0, errors };
+  }
+
+  /**
+   * Apply test inputs to workflow nodes
+   */
+  applyTestInputs(nodes: any[], testInputConfig: TestInputConfig): any[] {
+    const dataInputNodes = this.findDataInputNodes(nodes);
+
+    if (dataInputNodes.length === 0) {
+      console.warn("No data input nodes found in workflow");
+      return nodes;
+    }
+
+    const updatedNodes = nodes.map((node) => {
+      // Find matching mapping for this node
+      const mapping = testInputConfig.mappings.find(
+        (m) => m.nodeId === node.id
+      );
+
+      if (!mapping && testInputConfig.mode === "auto") {
+        // In auto mode, use fallback value for all inputs
+        if (testInputConfig.fallbackValue && node.data?.type === "dataInput") {
+          return {
+            ...node,
+            data: {
+              ...node.data,
+              config: {
+                ...node.data?.config,
+                defaultValue: testInputConfig.fallbackValue,
+              },
+            },
+          };
+        }
+      } else if (mapping && node.id === mapping.nodeId) {
+        // Apply mapped value
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            config: {
+              ...node.data?.config,
+              defaultValue: mapping.value,
+            },
+          },
+        };
+      }
+
+      return node;
+    });
+
+    return updatedNodes;
+  }
+
+  /**
+   * Generate test input config from legacy format (single string)
+   */
+  fromLegacyFormat(
+    testInput: string | undefined,
+    nodes: any[]
+  ): TestInputConfig {
+    const dataInputNodes = this.findDataInputNodes(nodes);
+
+    if (!testInput) {
+      return { mode: "auto", mappings: [], fallbackValue: undefined };
+    }
+
+    if (dataInputNodes.length === 0) {
+      return { mode: "auto", mappings: [], fallbackValue: testInput };
+    }
+
+    if (dataInputNodes.length === 1) {
+      return {
+        mode: "single",
+        mappings: [
+          {
+            nodeId: dataInputNodes[0].id,
+            value: testInput,
+            label: dataInputNodes[0].label,
+          },
+        ],
+      };
+    }
+
+    // Multiple input nodes: use auto mode with fallback
+    return {
+      mode: "auto",
+      mappings: [],
+      fallbackValue: testInput,
+    };
+  }
+
+  /**
+   * Get summary of test input configuration
+   */
+  getSummary(config: TestInputConfig, nodes: any[]): string {
+    const dataInputNodes = this.findDataInputNodes(nodes);
+
+    if (dataInputNodes.length === 0) {
+      return "⚠️ No data input nodes in workflow";
+    }
+
+    if (config.mode === "single") {
+      const mapping = config.mappings[0];
+      const node = dataInputNodes.find((n) => n.id === mapping.nodeId);
+      return `📥 Single input: "${mapping.value}" → ${
+        node?.label || mapping.nodeId
+      }`;
+    }
+
+    if (config.mode === "multiple") {
+      const mappedCount = config.mappings.length;
+      return `📥 Multiple inputs: ${mappedCount} node(s) configured`;
+    }
+
+    // Auto mode
+    if (config.fallbackValue) {
+      return `📥 Auto mode: "${config.fallbackValue}" → all inputs (${dataInputNodes.length} nodes)`;
+    }
+
+    return "📥 Auto mode: No value set";
+  }
+
+  /**
+   * Validate that all data input nodes are provided inputs
+   */
+  allInputsProvided(config: TestInputConfig, nodes: any[]): boolean {
+    const dataInputNodes = this.findDataInputNodes(nodes);
+
+    if (config.mode === "auto") {
+      return !!config.fallbackValue;
+    }
+
+    if (config.mode === "single") {
+      return config.mappings.length === 1 && !!config.mappings[0].value;
+    }
+
+    // Multiple mode: all configured nodes must have values
+    return (
+      config.mappings.length === dataInputNodes.length &&
+      config.mappings.every((m) => !!m.value)
+    );
+  }
+
+  /**
+   * Get test input status for UI display
+   */
+  getStatus(
+    config: TestInputConfig,
+    nodes: any[]
+  ): {
+    status: "unconfigured" | "partial" | "complete";
+    message: string;
+    icon: string;
+  } {
+    const dataInputNodes = this.findDataInputNodes(nodes);
+
+    if (dataInputNodes.length === 0) {
+      return {
+        status: "unconfigured",
+        message: "No input nodes",
+        icon: "ℹ️",
+      };
+    }
+
+    if (config.mode === "auto") {
+      if (!config.fallbackValue) {
+        return {
+          status: "unconfigured",
+          message: `${dataInputNodes.length} inputs, no data`,
+          icon: "⚠️",
+        };
+      }
+      return {
+        status: "complete",
+        message: `${dataInputNodes.length} inputs configured`,
+        icon: "✅",
+      };
+    }
+
+    if (config.mode === "single") {
+      if (config.mappings.length === 0 || !config.mappings[0].value) {
+        return {
+          status: "unconfigured",
+          message: "No test data",
+          icon: "⚠️",
+        };
+      }
+      return {
+        status: "complete",
+        message: "Test data ready",
+        icon: "✅",
+      };
+    }
+
+    // Multiple mode
+    const providedCount = config.mappings.filter((m) => m.value).length;
+    const totalCount = dataInputNodes.length;
+
+    if (providedCount === 0) {
+      return {
+        status: "unconfigured",
+        message: `No inputs configured (${totalCount} available)`,
+        icon: "⚠️",
+      };
+    }
+
+    if (providedCount < totalCount) {
+      return {
+        status: "partial",
+        message: `${providedCount}/${totalCount} inputs configured`,
+        icon: "⚠️",
+      };
+    }
+
+    return {
+      status: "complete",
+      message: `All ${totalCount} inputs configured`,
+      icon: "✅",
+    };
+  }
+}
+
+// Singleton instance
+export const testInputManager = new TestInputManager();
diff --git a/src/store/workflowStore.ts b/src/store/workflowStore.ts
index 9b26999..a7ceeb2 100644
--- a/src/store/workflowStore.ts
+++ b/src/store/workflowStore.ts
@@ -14,6 +14,11 @@ import { agentManager } from "../services/agents/AgentManager";
 import { executionEngine, ExecutionPlan } from "../services/executionEngine";
 import { LabelDependencyManager } from "../utils/labelDependencyManager";
 
+import {
+  testInputManager,
+  TestInputConfig,
+} from "../services/testInputManager";
+
 // localStorage key for workflows
 const WORKFLOWS_STORAGE_KEY = "agent-workflow-builder-workflows";
 
@@ -638,29 +643,20 @@ export const useWorkflowStore = create<WorkflowStore>((set, get) => ({
         retryPolicy: options?.retryPolicy || executionConfig.retryPolicy,
       };
 
-      // If test input is provided, update the data input node
+      // Apply test inputs using the new test input manager
       if (testInput) {
-        const dataInputNode = currentWorkflow.nodes.find(
-          (node) => node.data.type === "dataInput"
+        // Convert legacy string format to new config format
+        const testInputConfig = testInputManager.fromLegacyFormat(
+          testInput,
+          currentWorkflow.nodes
         );
-        if (dataInputNode) {
-          // Update the node's config with test input
-          const updatedNodes = currentWorkflow.nodes.map((node) =>
-            node.id === dataInputNode.id
-              ? {
-                  ...node,
-                  data: {
-                    ...node.data,
-                    config: {
-                      ...node.data.config,
-                      defaultValue: testInput,
-                    },
-                  },
-                }
-              : node
-          );
-          set({ currentWorkflow: { ...currentWorkflow, nodes: updatedNodes } });
-        }
+
+        // Apply the test input configuration to workflow nodes
+        const updatedNodes = testInputManager.applyTestInputs(
+          currentWorkflow.nodes,
+          testInputConfig
+        );
+        set({ currentWorkflow: { ...currentWorkflow, nodes: updatedNodes } });
       }
 
       // Execute using the advanced execution engine