Enhance API Node Configuration Component with Authorization and Request Features

- Added support for additional HTTP methods (HEAD, OPTIONS) in the API node configuration.
- Refactored the request configuration section to focus on authorization, including dynamic fields for various auth types (Bearer, Basic, API Key).
- Introduced a new KeyValueTable component for managing query parameters and headers, improving user experience in configuring API requests.
- Updated the request body handling to support multiple body types (form-data, x-www-form-urlencoded, raw, binary) with appropriate UI elements.
- Enhanced response handling and testing steps to align with the new configuration structure, ensuring a seamless API interaction experience.

components/process-flow/ApiNodeConfiguration.vue

@@ -24,6 +24,8 @@
             <option value="PUT">PUT</option>
             <option value="PATCH">PATCH</option>
             <option value="DELETE">DELETE</option>
+            <option value="HEAD">HEAD</option>
+            <option value="OPTIONS">OPTIONS</option>
           </select>
           <p class="mt-1 text-xs text-gray-500">
             The HTTP method determines how the API call interacts with the endpoint.
@@ -48,112 +50,116 @@
       </div>
     </div>
     
-    <!-- Step 2: Headers and Body -->
+    <!-- Step 2: Authorization -->
     <div class="mb-6 bg-gray-50 p-4 rounded-md border border-gray-200">
       <div class="flex items-center mb-3">
         <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
           <span class="text-xs font-semibold text-indigo-600">2</span>
         </div>
-        <h4 class="font-medium">Request Configuration</h4>
+        <h4 class="font-medium">Authorization</h4>
       </div>
-      
-      <!-- Headers -->
-      <div class="mb-4">
-        <label class="block text-sm font-medium text-gray-700 mb-1">Headers</label>
-        <div class="bg-white p-3 border rounded-md shadow-sm">
-          <div class="flex gap-2 mb-2">
-            <VariableBrowser
-              :availableVariables="availableVariables"
-              placeholder="Insert Variable into Headers..."
-              :allowCreate="false"
-              @update:modelValue="insertVariable($event, 'headers')"
-              class="flex-grow"
-            />
-            <RsButton
-              variant="secondary"
-              size="sm"
-              @click="formatJson('headers')"
-              title="Format JSON"
-              class="flex-shrink-0"
-            >
-              <Icon name="material-symbols:format-align-left" />
-              Format
-            </RsButton>
-          </div>
-          <textarea
-            id="headers"
-            v-model="localNodeData.headers"
-            class="w-full p-2 border rounded-md shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 text-sm font-mono"
-            placeholder='{ "Authorization": "Bearer {accessToken}" }'
-            rows="4"
-            @blur="saveChanges"
-          ></textarea>
-          <p class="mt-1 text-xs text-gray-500">
-            Set HTTP headers as a JSON object. Use variables with <code class="bg-gray-100 px-1">{variableName}</code> syntax.
-          </p>
-          
-          <!-- Headers Preview -->
-          <div v-if="localNodeData.headers" class="mt-3 pt-3 border-t border-gray-200">
-            <div class="text-xs font-medium text-gray-700 mb-1">Preview with Current Values:</div>
-            <div class="bg-gray-50 border rounded p-2">
-              <pre class="text-xs font-mono whitespace-pre-wrap">{{ getPreviewWithValues('headers') }}</pre>
-            </div>
-          </div>
-        </div>
+      <div class="mb-2">
+        <label class="block text-sm font-medium text-gray-700 mb-1">Type</label>
+        <select v-if="localNodeData.authorization" v-model="localNodeData.authorization.type" class="w-48 p-2 border rounded text-sm" @change="saveChanges">
+          <option v-for="type in AUTH_TYPES" :key="type.value" :value="type.value">{{ type.label }}</option>
+        </select>
       </div>
-      
-      <!-- Request Body - show only for POST, PUT, PATCH -->
-      <div v-if="showRequestBody" class="mt-4">
-        <label class="block text-sm font-medium text-gray-700 mb-1">Request Body</label>
-        <div class="bg-white p-3 border rounded-md shadow-sm">
-          <div class="flex gap-2 mb-2">
-            <VariableBrowser
-              :availableVariables="availableVariables"
-              placeholder="Insert Variable into Request Body..."
-              :allowCreate="false"
-              @update:modelValue="insertVariable($event, 'requestBody')"
-              class="flex-grow"
-            />
-            <RsButton
-              variant="secondary"
-              size="sm"
-              @click="formatJson('requestBody')"
-              title="Format JSON"
-              class="flex-shrink-0"
-            >
-              <Icon name="material-symbols:format-align-left" />
-              Format
-            </RsButton>
-          </div>
-          <textarea
-            id="requestBody"
-            v-model="localNodeData.requestBody"
-            class="w-full p-2 border rounded-md shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 text-sm font-mono"
-            placeholder='{ "key": "value", "userId": "{userId}" }'
-            rows="6"
-            @blur="saveChanges"
-          ></textarea>
-          <p class="mt-1 text-xs text-gray-500">
-            Request body to send with the API call. Use variables with <code class="bg-gray-100 px-1">{variableName}</code> syntax.
-          </p>
-          
-          <!-- Request Body Preview -->
-          <div v-if="localNodeData.requestBody" class="mt-3 pt-3 border-t border-gray-200">
-            <div class="text-xs font-medium text-gray-700 mb-1">Preview with Current Values:</div>
-            <div class="bg-gray-50 border rounded p-2">
-              <pre class="text-xs font-mono whitespace-pre-wrap">{{ getPreviewWithValues('requestBody') }}</pre>
-            </div>
-          </div>
-        </div>
+      <div v-if="localNodeData.authorization && localNodeData.authorization.type" v-for="field in getAuthFields()" :key="field.key" class="mb-2">
+        <label class="block text-xs font-medium text-gray-600 mb-1">{{ field.label }}</label>
+        <input v-if="field.type !== 'select'" :type="field.type" v-model="localNodeData.authorization[field.key]" :placeholder="field.placeholder" class="w-full px-2 py-1 border rounded text-sm" @input="saveChanges" />
+        <select v-else v-model="localNodeData.authorization[field.key]" class="w-full px-2 py-1 border rounded text-sm" @change="saveChanges">
+          <option v-for="opt in field.options" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+        </select>
       </div>
     </div>
     
-    <!-- Step 3: Response Handling -->
-    <div class="mb-6 bg-gray-50 p-4 rounded-md border border-gray-200">
+    <!-- Step 3: Params (GET, DELETE, etc.) -->
+    <div v-if="showParams" class="mb-6 bg-gray-50 p-4 rounded-md border border-gray-200">
       <div class="flex items-center mb-3">
         <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
           <span class="text-xs font-semibold text-indigo-600">3</span>
         </div>
+        <h4 class="font-medium">Query Parameters</h4>
+      </div>
+      <KeyValueTable
+        v-model="localNodeData.params"
+        :variables="processVariables"
+        :allow-variable-insert="true"
+        placeholder-key="Param Key"
+        placeholder-value="Param Value"
+        @update:modelValue="saveChanges"
+      />
+    </div>
+    
+    <!-- Step 4: Headers -->
+    <div class="mb-6 bg-gray-50 p-4 rounded-md border border-gray-200">
+      <div class="flex items-center mb-3">
+        <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
+          <span class="text-xs font-semibold text-indigo-600">4</span>
+        </div>
+        <h4 class="font-medium">Headers</h4>
+      </div>
+      <KeyValueTable
+        v-model="localNodeData.headers"
+        :variables="processVariables"
+        :allow-variable-insert="true"
+        placeholder-key="Header Name"
+        placeholder-value="Header Value"
+        @update:modelValue="saveChanges"
+      />
+    </div>
+    
+    <!-- Step 5: Body (POST/PUT/PATCH) -->
+    <div v-if="showRequestBody && localNodeData.body && bodyType" class="mb-6 bg-gray-50 p-4 rounded-md border border-gray-200">
+      <div class="flex items-center mb-3">
+        <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
+          <span class="text-xs font-semibold text-indigo-600">5</span>
+        </div>
+        <h4 class="font-medium">Request Body</h4>
+      </div>
+      <div class="mb-2">
+        <label class="block text-sm font-medium text-gray-700 mb-1">Body Type</label>
+        <select v-model="localNodeData.body.type" class="w-64 p-2 border rounded text-sm" @change="saveChanges">
+          <option v-for="type in BODY_TYPES" :key="type.value" :value="type.value">{{ type.label }}</option>
+        </select>
+      </div>
+      <div v-if="['form-data', 'x-www-form-urlencoded'].includes(bodyType)">
+        <KeyValueTable
+          :model-value="getBodyData()"
+          :variables="processVariables"
+          :allow-variable-insert="true"
+          placeholder-key="Field Name"
+          placeholder-value="Field Value"
+          @update:modelValue="setBodyData"
+        />
+      </div>
+      <div v-else-if="bodyType === 'raw'">
+        <textarea v-model="localNodeData.body.data" rows="6" class="w-full p-2 border rounded font-mono text-sm" placeholder="Raw body (JSON, XML, etc.)" @input="saveChanges"></textarea>
+        <VariableBrowser
+          :available-variables="processVariables"
+          :allow-create="false"
+          :placeholder="'Insert variable...'"
+          @update:modelValue="insertVariableToRaw"
+          class="w-48 mt-2"
+        />
+        <div v-if="rawBodyJsonWarning && rawBodyHasVariable" class="mt-2 text-xs text-red-600 flex items-center gap-1">
+          <Icon name="material-symbols:warning" class="w-4 h-4" />
+          {{ rawBodyJsonWarning }}
+        </div>
+      </div>
+      <div v-else-if="bodyType === 'binary'">
+        <input type="file" @change="handleFileUpload" />
+        <div v-if="localNodeData.body.data" class="mt-2 text-xs text-gray-600">Selected: {{ localNodeData.body.data }}</div>
+      </div>
+      <div v-else class="text-xs text-gray-500">No body will be sent.</div>
+    </div>
+    
+    <!-- Step 6: Response Handling -->
+    <div class="mb-6 bg-gray-50 p-4 rounded-md border border-gray-200">
+      <div class="flex items-center mb-3">
+        <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
+          <span class="text-xs font-semibold text-indigo-600">6</span>
+        </div>
         <h4 class="font-medium">Response Handling</h4>
       </div>
       
@@ -208,11 +214,11 @@
       </div>
     </div>
     
-    <!-- Step 4: Test API Call -->
+    <!-- Step 7: Test API Call -->
     <div class="mb-6 bg-gray-50 p-4 rounded-md border border-gray-200">
       <div class="flex items-center mb-3">
         <div class="w-6 h-6 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
-          <span class="text-xs font-semibold text-indigo-600">4</span>
+          <span class="text-xs font-semibold text-indigo-600">7</span>
         </div>
         <h4 class="font-medium">Test API Call</h4>
       </div>
@@ -276,6 +282,22 @@
 import { ref, computed, watch, nextTick } from 'vue';
 import { useProcessBuilderStore } from '@/stores/processBuilder';
 import VariableBrowser from './VariableBrowser.vue';
+import KeyValueTable from './KeyValueTable.vue';
+
+const AUTH_TYPES = [
+  { value: 'none', label: 'None' },
+  { value: 'bearer', label: 'Bearer Token' },
+  { value: 'basic', label: 'Basic Auth' },
+  { value: 'apiKey', label: 'API Key' }
+];
+
+const BODY_TYPES = [
+  { value: 'none', label: 'None' },
+  { value: 'form-data', label: 'form-data' },
+  { value: 'x-www-form-urlencoded', label: 'x-www-form-urlencoded' },
+  { value: 'raw', label: 'raw' },
+  { value: 'binary', label: 'binary' }
+];
 
 const props = defineProps({
   nodeData: {
@@ -294,17 +316,7 @@ const emit = defineEmits(['update']);
 const processStore = useProcessBuilderStore();
 
 // Local state for node data - create a deep copy to avoid mutation issues
-const localNodeData = ref({
-  label: 'API Call',
-  description: '',
-  apiMethod: 'GET',
-  apiUrl: '',
-  requestBody: '',
-  headers: '{ "Content-Type": "application/json" }',
-  outputVariable: 'apiResponse',
-  continueOnError: false,
-  errorVariable: 'apiError'
-});
+const localNodeData = ref(migrateNodeData(props.nodeData));
 
 // Computed for showing request body based on method
 const showRequestBody = computed(() => {
@@ -324,22 +336,16 @@ const availableVariables = computed(() => {
   return globalVars;
 });
 
+// Get process variables for substitution
+const processVariables = computed(() => {
+  // Use processStore.currentProcess.variables (object) and convert to array
+  const varsObj = processStore.currentProcess?.variables || {};
+  return Object.values(varsObj);
+});
+
 // Watch for changes from parent props
 watch(() => props.nodeData, (newNodeData) => {
-  if (newNodeData) {
-    // Create a deep copy to break reactivity chains with parent
-    localNodeData.value = {
-      label: newNodeData.label || 'API Call',
-      description: newNodeData.description || '',
-      apiMethod: newNodeData.apiMethod || 'GET',
-      apiUrl: newNodeData.apiUrl || '',
-      requestBody: newNodeData.requestBody || '',
-      headers: newNodeData.headers || '{ "Content-Type": "application/json" }',
-      outputVariable: newNodeData.outputVariable || 'apiResponse',
-      continueOnError: newNodeData.continueOnError || false,
-      errorVariable: newNodeData.errorVariable || 'apiError'
-    };
-  }
+  if (newNodeData) localNodeData.value = migrateNodeData(newNodeData);
 }, { immediate: true, deep: true });
 
 // Function to create a new global variable
@@ -559,6 +565,178 @@ function getPreviewWithValues(field) {
     return localNodeData.value[field] || '';
   }
 }
+
+// --- Authorization Fields ---
+function getAuthFields() {
+  switch (localNodeData.value.authorization.type) {
+    case 'bearer':
+      return [
+        { key: 'token', label: 'Token', type: 'text', placeholder: 'Bearer token', value: localNodeData.value.authorization.token || '' }
+      ];
+    case 'basic':
+      return [
+        { key: 'username', label: 'Username', type: 'text', placeholder: 'Username', value: localNodeData.value.authorization.username || '' },
+        { key: 'password', label: 'Password', type: 'password', placeholder: 'Password', value: localNodeData.value.authorization.password || '' }
+      ];
+    case 'apiKey':
+      return [
+        { key: 'key', label: 'Key Name', type: 'text', placeholder: 'e.g. X-API-Key', value: localNodeData.value.authorization.key || '' },
+        { key: 'value', label: 'Key Value', type: 'text', placeholder: 'API Key Value', value: localNodeData.value.authorization.value || '' },
+        { key: 'in', label: 'Add To', type: 'select', options: [
+          { value: 'header', label: 'Header' },
+          { value: 'query', label: 'Query Param' }
+        ], value: localNodeData.value.authorization.in || 'header' }
+      ];
+    default:
+      return [];
+  }
+}
+function updateAuthField(field, value) {
+  localNodeData.value.authorization[field] = value;
+  saveChanges();
+}
+
+// --- Body Data Handling ---
+function getBodyData() {
+  if (['form-data', 'x-www-form-urlencoded'].includes(localNodeData.value.body.type)) {
+    return Array.isArray(localNodeData.value.body.data) ? localNodeData.value.body.data : [];
+  }
+  if (localNodeData.value.body.type === 'raw') {
+    return typeof localNodeData.value.body.data === 'string' ? localNodeData.value.body.data : '';
+  }
+  if (localNodeData.value.body.type === 'binary') {
+    return localNodeData.value.body.data || null;
+  }
+  return [];
+}
+function setBodyData(val) {
+  if (['form-data', 'x-www-form-urlencoded'].includes(localNodeData.value.body.type)) {
+    localNodeData.value.body.data = val;
+  } else if (localNodeData.value.body.type === 'raw') {
+    localNodeData.value.body.data = val;
+  } else if (localNodeData.value.body.type === 'binary') {
+    localNodeData.value.body.data = val;
+  }
+  saveChanges();
+}
+
+// --- File Upload for Binary ---
+function handleFileUpload(e) {
+  const file = e.target.files[0];
+  if (file) {
+    localNodeData.value.body.data = file.name;
+    saveChanges();
+  }
+}
+
+// --- JSON Validation for Raw Body ---
+const rawBodyIsJson = computed(() => {
+  if (bodyType.value !== 'raw') return false;
+  const val = localNodeData.value.body?.data || '';
+  // Only check if it looks like JSON
+  if (!val.trim().startsWith('{') && !val.trim().startsWith('[')) return false;
+  try {
+    // Replace {variable} with a string to allow parsing
+    const replaced = val.replace(/\{[a-zA-Z0-9_]+\}/g, '"VAR"');
+    JSON.parse(replaced);
+    return true;
+  } catch {
+    return false;
+  }
+});
+const rawBodyHasVariable = computed(() => {
+  if (bodyType.value !== 'raw') return false;
+  const val = localNodeData.value.body?.data || '';
+  return /\{[a-zA-Z0-9_]+\}/.test(val);
+});
+const rawBodyJsonWarning = computed(() => {
+  if (bodyType.value !== 'raw') return '';
+  const val = localNodeData.value.body?.data || '';
+  if (!val.trim().startsWith('{') && !val.trim().startsWith('[')) return '';
+  try {
+    // Replace both quoted and unquoted {variable} with "VAR"
+    let replaced = val
+      .replace(/"\{[a-zA-Z0-9_]+\}"/g, '"VAR"') // quoted
+      .replace(/\{[a-zA-Z0-9_]+\}/g, '"VAR"');    // unquoted
+    JSON.parse(replaced);
+    return '';
+  } catch {
+    return 'Warning: Your request body is not valid JSON. Make sure variables are inside quotes.';
+  }
+});
+
+// --- Variable Insertion Helper ---
+function insertVariableToRaw(varName) {
+  if (!varName) return;
+  const textarea = document.querySelector('textarea[placeholder="Raw body (JSON, XML, etc.)"]');
+  let val = localNodeData.value.body.data || '';
+  let insertText = `{${varName}}`;
+  // Detect if inside quotes
+  let cursor = textarea ? textarea.selectionStart : val.length;
+  let before = val.substring(0, cursor);
+  let after = val.substring(cursor);
+  // Check if body looks like JSON
+  const isJson = val.trim().startsWith('{') || val.trim().startsWith('[');
+  // Check if cursor is inside quotes
+  let insideQuotes = false;
+  if (isJson && textarea) {
+    // Count quotes before cursor
+    const quotesBefore = before.split('"').length - 1;
+    insideQuotes = quotesBefore % 2 === 1;
+  }
+  if (isJson && !insideQuotes) {
+    insertText = `"{${varName}}"`;
+  }
+  // Insert at cursor
+  localNodeData.value.body.data = before + insertText + after;
+  saveChanges();
+  // Move cursor after inserted variable
+  nextTick(() => {
+    if (textarea) {
+      const newPos = before.length + insertText.length;
+      textarea.focus();
+      textarea.selectionStart = textarea.selectionEnd = newPos;
+    }
+  });
+}
+
+// --- UI State ---
+const showParams = computed(() => ['GET', 'DELETE', 'HEAD', 'OPTIONS'].includes(localNodeData.value.apiMethod));
+
+// Defensive computed for bodyType and authType
+const bodyType = computed(() => localNodeData.value.body && localNodeData.value.body.type ? localNodeData.value.body.type : 'none');
+const authType = computed(() => localNodeData.value.authorization && localNodeData.value.authorization.type ? localNodeData.value.authorization.type : 'none');
+
+function migrateNodeData(data) {
+  const migrated = { ...data };
+  // Headers
+  if (typeof migrated.headers === 'string') {
+    try {
+      const obj = JSON.parse(migrated.headers);
+      migrated.headers = Object.entries(obj).map(([key, value]) => ({ key, value }));
+    } catch {
+      migrated.headers = [];
+    }
+  } else if (!Array.isArray(migrated.headers)) {
+    migrated.headers = [];
+  }
+  // Params
+  if (!Array.isArray(migrated.params)) migrated.params = [];
+  // Body
+  if (!migrated.body || typeof migrated.body !== 'object') {
+    migrated.body = { type: 'none', data: [] };
+  } else {
+    if (!migrated.body.type) migrated.body.type = 'none';
+    if (migrated.body.data === undefined) migrated.body.data = migrated.body.type === 'raw' ? '' : [];
+  }
+  if (typeof data.requestBody === 'string' && (!migrated.body || migrated.body.type === 'none')) {
+    migrated.body = { type: 'raw', data: data.requestBody };
+  }
+  // Auth
+  if (!migrated.authorization || typeof migrated.authorization !== 'object') migrated.authorization = { type: 'none' };
+  if (!migrated.authorization.type) migrated.authorization.type = 'none';
+  return migrated;
+}
 </script>
 
 <style scoped>

components/process-flow/KeyValueTable.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <div v-for="(row, idx) in rows" :key="idx" class="flex items-center gap-2 mb-2">
+      <input
+        v-model="row.key"
+        :placeholder="placeholderKey"
+        class="w-32 px-2 py-1 border rounded text-sm"
+        @input="emitChange"
+      />
+      <input
+        v-model="row.value"
+        :placeholder="placeholderValue"
+        class="flex-1 px-2 py-1 border rounded text-sm"
+        @input="emitChange"
+        :ref="el => valueInputs[idx] = el"
+      />
+      <VariableBrowser
+        v-if="allowVariableInsert && variables && variables.length"
+        :available-variables="variables"
+        :placeholder="'Insert variable...'"
+        :allow-create="false"
+        @update:modelValue="varName => insertVariable(idx, varName)"
+        class="w-32"
+      />
+      <button @click="removeRow(idx)" class="px-2 py-1 text-xs bg-red-100 text-red-700 rounded hover:bg-red-200">✕</button>
+    </div>
+    <button @click="addRow" class="mt-1 px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200">+ Add</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from 'vue';
+import VariableBrowser from './VariableBrowser.vue';
+const props = defineProps({
+  modelValue: { type: Array, default: () => [] },
+  placeholderKey: { type: String, default: 'Key' },
+  placeholderValue: { type: String, default: 'Value' },
+  allowVariableInsert: { type: Boolean, default: false },
+  variables: { type: Array, default: () => [] }
+});
+const emit = defineEmits(['update:modelValue']);
+const rows = ref(props.modelValue.map(r => ({ ...r })));
+const valueInputs = ref([]);
+watch(() => props.modelValue, v => { rows.value = v.map(r => ({ ...r })); });
+function emitChange() { emit('update:modelValue', rows.value.map(r => ({ ...r }))); }
+function addRow() { rows.value.push({ key: '', value: '' }); emitChange(); }
+function removeRow(idx) { rows.value.splice(idx, 1); emitChange(); }
+function insertVariable(idx, varName) {
+  if (!varName) return;
+  const input = valueInputs.value[idx];
+  if (input && input.selectionStart !== undefined) {
+    const start = input.selectionStart;
+    const end = input.selectionEnd;
+    const before = rows.value[idx].value.substring(0, start);
+    const after = rows.value[idx].value.substring(end);
+    rows.value[idx].value = before + `{${varName}}` + after;
+    emitChange();
+    // Move cursor after inserted variable
+    nextTick(() => {
+      input.focus();
+      input.selectionStart = input.selectionEnd = start + varName.length + 2;
+    });
+  } else {
+    rows.value[idx].value += `{${varName}}`;
+    emitChange();
+  }
+}
+</script> 

docs/json/process-builder/processDefinition.json

@@ -121,14 +121,21 @@
     {
       "id": "api-1752550319410",
       "data": {
+        "body": { "data": "{ \"title\" : \"{todoTitle}\"}", "type": "raw" },
         "label": "API Call",
-        "apiUrl": "https://jsonplaceholder.typicode.com/todos/1",
-        "headers": "{ \"Content-Type\": \"application/json\" }",
-        "apiMethod": "GET",
+        "shape": "rectangle",
+        "apiUrl": "https://jsonplaceholder.typicode.com/posts",
+        "params": [],
+        "headers": [{ "key": "Content-Type", "value": "application/json" }],
+        "apiMethod": "POST",
+        "textColor": "#1e40af",
+        "borderColor": "#3b82f6",
         "description": "External API call",
         "requestBody": "",
+        "authorization": { "type": "none" },
         "errorVariable": "apiError",
         "outputVariable": "apiResponse",
+        "backgroundColor": "#eff6ff",
         "continueOnError": false
       },
       "type": "api",
@@ -199,8 +206,8 @@
     }
   ],
   "viewport": {
-    "x": -572.7398904538663,
-    "y": 253.200827139402,
-    "zoom": 0.8444612090080732
+    "x": -118.4524312896406,
+    "y": 314.4180761099366,
+    "zoom": 0.6437632135306554
   }
 }

docs/process-variables-system.md

@@ -0,0 +1,288 @@
+# Process Variables System Documentation
+
+## Overview
+
+Process variables serve as the **central nervous system** for data flow and state management in the BPM system. They enable dynamic behavior, external system integration, and stateful execution across multiple user interactions and system boundaries.
+
+## Architecture Components
+
+### 1. VariableManager.vue - Central Variable Management
+
+**Location**: `components/process-flow/VariableManager.vue`
+
+**Primary Functions:**
+- **Variable Creation & Management**: Add, edit, delete process variables with comprehensive type support
+- **Usage Tracking**: Analyzes where variables are used across all node types (form, API, script, gateway, etc.)
+- **Variable Navigation**: Click-to-navigate from variable usage to specific nodes in the process
+- **Type Organization**: Groups variables by data type (string, int, decimal, boolean, date, object, etc.)
+
+**Key Features:**
+- **14+ Variable Types**: string, int, decimal, boolean, date, datetime, object, array, currency, email, UUID, etc.
+- **Deep Usage Analysis**: Scans all node data for variable references in multiple formats:
+  - Template placeholders: `{variableName}`, `{{variableName}}`
+  - JavaScript references: `${variableName}`, `processVariables.variableName`
+  - Direct value assignments and API outputs
+- **Cross-Node Detection**: Finds variables in API URLs, form mappings, script code, business rules, notifications
+
+### 2. VariableBrowser.vue - Variable Selection Component
+
+**Location**: `components/process-flow/VariableBrowser.vue`
+
+**Purpose**: Used throughout the process builder for variable selection in node configurations
+
+**Key Features:**
+- **Grouped Selection**: Variables organized by type with optgroups
+- **Live Preview**: Shows current variable values in selection dropdown
+- **Inline Creation**: "+" button to create new variables on-the-fly
+- **Type Filtering**: Can restrict to specific variable types
+- **Validation**: Checks for variable existence and naming conflicts
+- **Rich Type Support**: 20+ variable types including special types (currency, email, UUID, etc.)
+
+**Integration Points:**
+- Form node configuration (input/output mappings)
+- API node configuration (URL parameters, request body)
+- Script node configuration (input/output variables)
+- Business rule conditions and actions
+- Gateway decision logic
+- Notification recipient and content variables
+
+### 3. variableStore.js - Legacy Store
+
+**Location**: `stores/variableStore.js`
+
+**Note**: This appears to be a legacy store with basic functionality. The actual variable management is handled primarily by the `processBuilder` store.
+
+**Features:**
+- **Scope Management**: Global vs process-level variables
+- **Basic CRUD**: Add, update, delete variables
+- **Simple Structure**: Arrays for global and process variables
+- **Node Variables**: Input/output tracking for individual nodes
+
+## Variable Lifecycle & Data Flow
+
+### 1. Variable Creation
+
+- **Primary Source**: VariableManager component for explicit creation
+- **Secondary Source**: VariableBrowser inline creation during node configuration
+- **Auto-Creation**: Form nodes can auto-create variables from mappings (`createVariableFromMapping`)
+
+### 2. Variable Usage Across Node Types
+
+#### Form Nodes (`FormNodeConfiguration.vue`)
+- **Input Mappings**: Process variables → Form field pre-filling
+- **Output Mappings**: Form submission data → Process variables
+- **Field Conditions**: Process variables control field visibility/behavior
+- **Assignment Variables**: Dynamic task assignment based on variable values
+
+**Example Configuration:**
+```javascript
+{
+  inputMappings: [
+    {
+      processVariable: "customerName",
+      formField: "name"
+    }
+  ],
+  outputMappings: [
+    {
+      formField: "email",
+      processVariable: "customerEmail"
+    }
+  ],
+  fieldConditions: [
+    {
+      processVariable: "userType",
+      operator: "equals",
+      value: "premium",
+      targetField: "specialOffers",
+      action: "show"
+    }
+  ]
+}
+```
+
+#### API Nodes
+- **URL Interpolation**: Variables embedded in API endpoints
+- **Request Body**: Variables in JSON payloads
+- **Headers**: Dynamic authentication tokens/values
+- **Output Variables**: API responses stored as process variables
+- **Error Handling**: Error data captured in designated variables
+
+**Example Configuration:**
+```javascript
+{
+  apiUrl: "https://api.example.com/users/{userId}",
+  requestBody: "{\"name\": \"{customerName}\", \"email\": \"{customerEmail}\"}",
+  headers: "{\"Authorization\": \"Bearer {authToken}\"}",
+  outputVariable: "apiResponse",
+  errorVariable: "apiError"
+}
+```
+
+#### Script Nodes
+- **Input Variables**: Pass process variables to script execution
+- **Output Variables**: Script results stored back to process variables
+- **Script Code**: Direct variable references in JavaScript code
+
+**Example Configuration:**
+```javascript
+{
+  inputVariables: ["customerAge", "orderAmount"],
+  outputVariables: [
+    {
+      name: "discount",
+      type: "decimal",
+      description: "Calculated discount amount"
+    }
+  ],
+  scriptCode: `
+    const discount = customerAge > 65 ? orderAmount * 0.1 : 0;
+    return { discount };
+  `
+}
+```
+
+#### Business Rule Nodes
+- **Conditions**: Variables used in rule evaluation logic
+- **Actions**: Variables updated based on rule outcomes
+- **Complex Logic**: AND/OR conditions with multiple variable checks
+
+#### Gateway/Decision Nodes
+- **Decision Logic**: Variables determine process flow paths
+- **Condition Evaluation**: Dynamic routing based on variable values
+
+### 3. Variable Reference Patterns
+
+The system supports multiple variable reference formats:
+
+- **Template**: `{variableName}`, `{{variableName}}`
+- **JavaScript**: `${variableName}`, `processVariables.variableName`
+- **JSON**: Direct string/object references
+- **API Integration**: URL parameters, headers, body content
+
+### 4. Variable Tracking & Dependencies
+
+- **Usage Analysis**: Real-time tracking of where variables are used
+- **Dependency Management**: Prevents deletion of variables in use
+- **Navigation Support**: Click-to-navigate from variable to usage location
+- **Reference Counting**: Shows total references per variable
+
+### 5. Process Execution Context
+
+Variables serve as the **data backbone** of process execution:
+
+- **State Management**: Track process state between nodes
+- **Data Transformation**: Convert and format data as it flows
+- **Decision Making**: Enable dynamic process paths
+- **Integration**: Bridge between external systems and process logic
+- **User Interaction**: Store and recall user input across process steps
+
+## Variable Types
+
+### Basic Types
+- **string**: Text values
+- **int**: Whole numbers
+- **decimal**: Decimal numbers
+- **boolean**: True/False values
+- **date**: Date values only
+- **datetime**: Date and time values
+
+### Complex Types
+- **object**: JSON objects and complex data structures
+- **array**: Lists of values
+- **map**: Key-value pairs
+
+### Special Types
+- **currency**: Monetary values
+- **percentage**: Percentage values
+- **email**: Email addresses
+- **url**: URLs
+- **phone**: Phone numbers
+- **uuid**: Unique identifiers
+- **file**: File references
+- **image**: Image references
+- **binary**: Binary data
+
+## Form Integration
+
+### Form Node Configuration Steps
+
+The form node configuration provides a comprehensive 4-step process:
+
+#### Step 1: Form Selection
+- Select existing forms or create new ones
+- Integration with FormSelector component
+
+#### Step 2: Form Data Mapping
+- **Input Mappings**: Process variables → Form field pre-filling
+- **Output Mappings**: Form submission data → Process variables
+- Bidirectional data flow configuration
+
+#### Step 3: Field Conditions
+- Configure conditional field behavior based on process variables
+- Supported operators: equals, not_equals, is_true, is_false, is_empty, etc.
+- Actions: readonly, hide, required, optional, show, enable
+
+#### Step 4: Task Assignment
+- **Public**: Anyone can complete
+- **Specific Users**: Select individual users
+- **Role-based**: Assign to user roles
+- **Dynamic**: Use process variables to determine assignee
+
+## API Integration
+
+Variables enable seamless integration with external APIs:
+
+- **Dynamic URLs**: Embed variables in API endpoints
+- **Request Customization**: Variables in headers, body, and parameters
+- **Response Handling**: Store API responses in process variables
+- **Error Management**: Capture and handle API errors
+
+## Best Practices
+
+### Variable Naming
+- Use descriptive names (e.g., `customerEmail` instead of `email`)
+- Follow camelCase convention
+- Avoid spaces and special characters
+- Use consistent prefixes for related variables
+
+### Type Selection
+- Choose the most specific type for better validation
+- Use `object` for complex data structures
+- Use `array` for lists of items
+- Use special types (email, currency) for semantic clarity
+
+### Scope Management
+- Prefer process-level variables for data that persists across nodes
+- Use global variables sparingly for truly global data
+- Document variable purposes and expected values
+
+### Dependency Management
+- Review variable usage before deletion
+- Use the usage tracking feature to understand dependencies
+- Plan variable lifecycle aligned with process flow
+
+## Development Notes
+
+### Store Integration
+Variables are primarily managed through the `processBuilder` store:
+- `processStore.addProcessVariable()`
+- `processStore.getProcessVariables()`
+- `processStore.updateProcessVariable()`
+- `processStore.deleteProcessVariable()`
+
+### Component Integration
+- VariableBrowser is used throughout node configuration modals
+- VariableManager provides comprehensive variable management UI
+- Real-time validation and error handling
+
+### Performance Considerations
+- Variable usage analysis runs on-demand to avoid performance issues
+- Deep object cloning used to prevent reactivity issues
+- Efficient grouping and filtering for large variable sets
+
+## Related Documentation
+
+- [Form Builder System](./form-builder-system.md)
+- [Process Definition Schema](./json/process-builder/processDefinition.json)
+- [Process Variables Example](./json/process-builder/processVariables.json)

pages/workflow/[id].vue

@@ -36,6 +36,7 @@ const currentForm = ref(null);
 const tasks = ref([]);
 const conditionalLogicScript = ref('');
 const combinedScript = ref('');
+const fieldStates = ref({});
 
 // Get process ID from route
 const processId = computed(() => route.params.id);
@@ -246,17 +247,31 @@ const moveToNextStep = () => {
 const handleFormSubmit = async () => {
   try {
     stepLoading.value = true;
-    
     console.log('[Workflow] Form submitted. Data:', formData.value);
-    // Save form data to process variables
-    Object.assign(processVariables.value, formData.value);
     
-    // Move to next step
+    // Apply output mappings if configured
+    if (currentNode.value.data?.outputMappings?.length > 0) {
+      applyOutputMappings(
+        currentNode.value.data, 
+        formData.value, 
+        processVariables.value
+      );
+    } else {
+      // Fallback to current flat assignment behavior
+      Object.assign(processVariables.value, formData.value);
+    }
+    
+    // Handle assignment variables
+    if (currentNode.value.data?.assignmentVariable) {
+      processVariables.value[currentNode.value.data.assignmentVariable] = {
+        completedBy: 'currentUser', // TODO: Get from auth context
+        completedAt: new Date().toISOString(),
+        formData: { ...formData.value }
+      };
+    }
+    
     moveToNextStep();
-
     console.log('[Workflow] After form submit, current node:', currentNode.value);
-    
-    // If next step is API or script, execute it automatically
     if (currentNode.value && ['api', 'script'].includes(currentNode.value.type)) {
       await executeCurrentStep();
     }
@@ -268,52 +283,227 @@ const handleFormSubmit = async () => {
   }
 };
 
-// Execute current step (for API/script nodes)
+// --- Utility: Substitute variables in a string ---
+function substituteVariables(str, variables) {
+  if (typeof str !== 'string') return str;
+  return str.replace(/\{([a-zA-Z0-9_]+)\}/g, (match, varName) => {
+    const value = variables[varName];
+    if (value === undefined || value === null) return '';
+    if (typeof value === 'object') {
+      return JSON.stringify(value);
+    }
+    return String(value);
+  });
+}
+
+// --- Variable Mapping Functions ---
+
+// Apply input mappings to pre-fill form with process variables
+function applyInputMappings(nodeData, processVars, formData) {
+  const { inputMappings = [] } = nodeData;
+  console.log('[Workflow] Applying input mappings:', inputMappings);
+  
+  inputMappings.forEach(mapping => {
+    const { processVariable, formField } = mapping;
+    if (processVars[processVariable] !== undefined) {
+      formData[formField] = processVars[processVariable];
+      console.log(`[Workflow] Mapped ${processVariable} -> ${formField}:`, processVars[processVariable]);
+    }
+  });
+}
+
+// Apply output mappings to save form data to process variables
+function applyOutputMappings(nodeData, formData, processVars) {
+  const { outputMappings = [] } = nodeData;
+  console.log('[Workflow] Applying output mappings:', outputMappings);
+  
+  outputMappings.forEach(mapping => {
+    const { formField, processVariable } = mapping;
+    if (formData[formField] !== undefined) {
+      processVars[processVariable] = formData[formField];
+      console.log(`[Workflow] Mapped ${formField} -> ${processVariable}:`, formData[formField]);
+    }
+  });
+}
+
+// Apply field conditions for dynamic form behavior
+function applyFieldConditions(nodeData, processVars) {
+  const { fieldConditions = [] } = nodeData;
+  const fieldStates = {};
+  
+  fieldConditions.forEach(condition => {
+    const { processVariable, operator, value, targetField, action } = condition;
+    
+    if (evaluateCondition({ variable: processVariable, operator, value }, processVars)) {
+      fieldStates[targetField] = {
+        ...fieldStates[targetField],
+        [action]: true
+      };
+      console.log(`[Workflow] Field condition applied: ${targetField} -> ${action}`);
+    }
+  });
+  
+  return fieldStates;
+}
+
+// --- Utility: Build API request from node data ---
+function buildApiRequest(nodeData, variables) {
+  // 1. URL (with param substitution)
+  let url = substituteVariables(nodeData.apiUrl, variables);
+
+  // 2. Params (for GET, DELETE, etc.)
+  let params = Array.isArray(nodeData.params) ? nodeData.params : [];
+  if (params.length) {
+    const query = params
+      .filter(p => p.key)
+      .map(p => `${encodeURIComponent(substituteVariables(p.key, variables))}=${encodeURIComponent(substituteVariables(p.value, variables))}`)
+      .join('&');
+    if (query) {
+      url += (url.includes('?') ? '&' : '?') + query;
+    }
+  }
+
+  // 3. Headers
+  let headers = {};
+  if (Array.isArray(nodeData.headers)) {
+    nodeData.headers.forEach(h => {
+      if (h.key) headers[substituteVariables(h.key, variables)] = substituteVariables(h.value, variables);
+    });
+  } else if (typeof nodeData.headers === 'object') {
+    headers = { ...nodeData.headers };
+  }
+
+  // 4. Authorization
+  if (nodeData.authorization && nodeData.authorization.type && nodeData.authorization.type !== 'none') {
+    const auth = nodeData.authorization;
+    if (auth.type === 'bearer' && auth.token) {
+      headers['Authorization'] = `Bearer ${substituteVariables(auth.token, variables)}`;
+    } else if (auth.type === 'basic' && auth.username && auth.password) {
+      const token = btoa(`${substituteVariables(auth.username, variables)}:${substituteVariables(auth.password, variables)}`);
+      headers['Authorization'] = `Basic ${token}`;
+    } else if (auth.type === 'apiKey' && auth.key && auth.value) {
+      if (auth.in === 'header') {
+        headers[substituteVariables(auth.key, variables)] = substituteVariables(auth.value, variables);
+      } else if (auth.in === 'query') {
+        url += (url.includes('?') ? '&' : '?') + `${encodeURIComponent(substituteVariables(auth.key, variables))}=${encodeURIComponent(substituteVariables(auth.value, variables))}`;
+      }
+    }
+  }
+
+  // 5. Body
+  let body;
+  if (nodeData.body && nodeData.body.type && nodeData.body.type !== 'none') {
+    if (['form-data', 'x-www-form-urlencoded'].includes(nodeData.body.type)) {
+      const dataArr = Array.isArray(nodeData.body.data) ? nodeData.body.data : [];
+      if (nodeData.body.type === 'form-data') {
+        body = new FormData();
+        dataArr.forEach(item => {
+          if (item.key) body.append(substituteVariables(item.key, variables), substituteVariables(item.value, variables));
+        });
+        // Remove content-type header for FormData (browser will set it)
+        if (headers['Content-Type']) delete headers['Content-Type'];
+      } else {
+        // x-www-form-urlencoded
+        body = dataArr
+          .filter(item => item.key)
+          .map(item => `${encodeURIComponent(substituteVariables(item.key, variables))}=${encodeURIComponent(substituteVariables(item.value, variables))}`)
+          .join('&');
+        headers['Content-Type'] = 'application/x-www-form-urlencoded';
+      }
+    } else if (nodeData.body.type === 'raw') {
+      body = substituteVariables(nodeData.body.data, variables);
+      // Try to detect JSON
+      if (body && body.trim().startsWith('{')) {
+        headers['Content-Type'] = 'application/json';
+      }
+    } else if (nodeData.body.type === 'binary') {
+      // Not supported in workflow execution context
+      body = undefined;
+    }
+  }
+
+  return { url, headers, body };
+}
+
+// Update executeCurrentStep for API node
 const executeCurrentStep = async () => {
   try {
     stepLoading.value = true;
-
     console.log('[Workflow] Executing current step:', currentNode.value);
-    
     if (currentNode.value?.type === 'api') {
       console.log(`[Workflow] Executing API node: ${currentNode.value.data?.label || currentNode.value.label}`);
-      // Enhanced API node execution
-      const {
-        apiUrl,
-        apiMethod = 'GET',
-        headers = '{}',
-        requestBody = '',
-        outputVariable = 'apiResponse',
-        errorVariable = 'apiError',
-        continueOnError = false
-      } = currentNode.value.data || {};
-      try {
-        const response = await $fetch(apiUrl, {
-          method: apiMethod,
-          headers: headers ? JSON.parse(headers) : {},
-          body: requestBody ? JSON.parse(requestBody) : undefined,
-        });
-        processVariables.value[outputVariable] = response;
-        processVariables.value[errorVariable] = null;
-        console.log('[Workflow] API call success. Output variable set:', outputVariable, response);
-        
-        // Only auto-progress if there's a single outgoing edge
-        if (canAutoProgress(currentNode.value)) {
-          moveToNextStep();
-        } else {
-          console.log('[Workflow] API completed, multiple paths available - waiting for user choice');
-        }
-      } catch (err) {
-        processVariables.value[errorVariable] = err;
-        console.error('[Workflow] API call failed:', err);
-        if (continueOnError) {
+      const nodeData = currentNode.value.data || {};
+      // Use new structure if present
+      if (nodeData.body || nodeData.headers || nodeData.params || nodeData.authorization) {
+        const { url, headers, body } = buildApiRequest(nodeData, processVariables.value);
+        const apiMethod = nodeData.apiMethod || 'GET';
+        const outputVariable = nodeData.outputVariable || 'apiResponse';
+        const errorVariable = nodeData.errorVariable || 'apiError';
+        const continueOnError = nodeData.continueOnError || false;
+        try {
+          const response = await $fetch(url, {
+            method: apiMethod,
+            headers,
+            body: ['GET', 'HEAD'].includes(apiMethod) ? undefined : body,
+          });
+          processVariables.value[outputVariable] = response;
+          processVariables.value[errorVariable] = null;
+          console.log('[Workflow] API call success. Output variable set:', outputVariable, response);
           if (canAutoProgress(currentNode.value)) {
             moveToNextStep();
           } else {
-            console.log('[Workflow] API failed but continuing, multiple paths available - waiting for user choice');
+            console.log('[Workflow] API completed, multiple paths available - waiting for user choice');
+          }
+        } catch (err) {
+          processVariables.value[errorVariable] = err;
+          console.error('[Workflow] API call failed:', err);
+          if (continueOnError) {
+            if (canAutoProgress(currentNode.value)) {
+              moveToNextStep();
+            } else {
+              console.log('[Workflow] API failed but continuing, multiple paths available - waiting for user choice');
+            }
+          } else {
+            error.value = 'API call failed: ' + (err.message || err);
+          }
+        }
+      } else {
+        // Fallback: old structure
+        const {
+          apiUrl,
+          apiMethod = 'GET',
+          headers = '{}',
+          requestBody = '',
+          outputVariable = 'apiResponse',
+          errorVariable = 'apiError',
+          continueOnError = false
+        } = nodeData;
+        try {
+          const response = await $fetch(apiUrl, {
+            method: apiMethod,
+            headers: headers ? JSON.parse(headers) : {},
+            body: requestBody ? JSON.parse(requestBody) : undefined,
+          });
+          processVariables.value[outputVariable] = response;
+          processVariables.value[errorVariable] = null;
+          console.log('[Workflow] API call success. Output variable set:', outputVariable, response);
+          if (canAutoProgress(currentNode.value)) {
+            moveToNextStep();
+          } else {
+            console.log('[Workflow] API completed, multiple paths available - waiting for user choice');
+          }
+        } catch (err) {
+          processVariables.value[errorVariable] = err;
+          console.error('[Workflow] API call failed:', err);
+          if (continueOnError) {
+            if (canAutoProgress(currentNode.value)) {
+              moveToNextStep();
+            } else {
+              console.log('[Workflow] API failed but continuing, multiple paths available - waiting for user choice');
+            }
+          } else {
+            error.value = 'API call failed: ' + (err.message || err);
           }
-        } else {
-          error.value = 'API call failed: ' + (err.message || err);
         }
       }
     } else if (currentNode.value?.type === 'script') {
@@ -461,6 +651,24 @@ watch(currentStep, async (newStep) => {
       const formId = currentNode.value.data?.formId;
       if (formId) {
         currentForm.value = await loadFormData(formId);
+        
+        // Apply input mappings to pre-fill form
+        if (currentNode.value.data?.inputMappings) {
+          applyInputMappings(
+            currentNode.value.data, 
+            processVariables.value, 
+            formData.value
+          );
+        }
+        
+        // Apply field conditions
+        if (currentNode.value.data?.fieldConditions) {
+          fieldStates.value = applyFieldConditions(
+            currentNode.value.data, 
+            processVariables.value
+          );
+        }
+        
         // Update form store with form components and data for ComponentPreview
         if (currentForm.value?.formComponents) {
           formStore.formComponents = currentForm.value.formComponents;
@@ -480,6 +688,13 @@ watch(formData, (newData) => {
   formStore.updatePreviewFormData(newData);
 }, { deep: true });
 
+// Watch for process variable changes and re-evaluate field conditions
+watch(processVariables, (newVars) => {
+  if (currentNode.value?.type === 'form' && currentNode.value.data?.fieldConditions) {
+    fieldStates.value = applyFieldConditions(currentNode.value.data, newVars);
+  }
+}, { deep: true });
+
 // Add FormKit form ref
 const formRef = ref(null);
 
@@ -532,11 +747,15 @@ const makeDecision = (targetNodeId) => {
 // Helper: Interpolate process variables in HTML content
 const interpolateHtmlContent = (htmlContent) => {
   if (!htmlContent || typeof htmlContent !== 'string') return htmlContent;
-  
   // Replace {{ processVariables.variableName }} with actual values
   return htmlContent.replace(/\{\{\s*processVariables\.(\w+)\s*\}\}/g, (match, variableName) => {
     const value = processVariables.value[variableName];
-    return value !== undefined && value !== null ? String(value) : '';
+    if (value === undefined || value === null) return '';
+    if (typeof value === 'object') {
+      // Pretty print object as JSON, wrapped in <pre> if not already inside <pre>
+      return `<pre style='display:inline;white-space:pre-wrap;'>${JSON.stringify(value, null, 2)}</pre>`;
+    }
+    return String(value);
   });
 };
 
@@ -621,6 +840,21 @@ onUnmounted(() => {
     currentStyleElement = null;
   }
 });
+
+// Helper: Get next node object for single-path nodes
+function getNextNodeObject(currentNode) {
+  if (!currentNode || !workflowData.value?.nodes) return null;
+  const edges = getOutgoingEdges(currentNode.id);
+  if (edges.length !== 1) return null;
+  const nextNodeId = edges[0].target;
+  return workflowData.value.nodes.find(n => n.id === nextNodeId) || null;
+}
+
+// Helper: Get next node label by node ID
+function getNodeLabel(nodeId) {
+  const node = workflowData.value.nodes.find(n => n.id === nodeId);
+  return node?.data?.label || node?.label || 'Next Step';
+}
 </script>
 
 <template>
@@ -781,6 +1015,7 @@ onUnmounted(() => {
                   <ComponentPreview 
                     :component="component" 
                     :is-preview="false"
+                    :field-states="fieldStates"
                   />
                 </template>
                 <div class="flex justify-end pt-6 border-t border-gray-200">
@@ -865,7 +1100,7 @@ onUnmounted(() => {
                     variant="outline"
                     class="justify-between p-3"
                   >
-                    <span>{{ edge.label || 'Continue' }}</span>
+                    <span>Continue to: {{ getNodeLabel(edge.target) }}</span>
                     <Icon name="material-symbols:arrow-right-alt" />
                   </RsButton>
                 </template>
@@ -908,7 +1143,12 @@ onUnmounted(() => {
                 variant="primary"
               >
                 <Icon v-if="stepLoading" name="material-symbols:progress-activity" class="w-4 h-4 animate-spin mr-2" />
-                {{ stepLoading ? 'Processing...' : 'Continue' }}
+                <template v-if="!stepLoading">
+                  Continue to: {{ getNextNodeObject(currentNode)?.data?.label || getNextNodeObject(currentNode)?.label || 'Next Step' }}
+                </template>
+                <template v-else>
+                  Processing...
+                </template>
               </RsButton>
             </div>
             
@@ -922,7 +1162,7 @@ onUnmounted(() => {
                     variant="outline"
                     class="justify-between p-3"
                   >
-                    <span>{{ edge.label || 'Continue' }}</span>
+                    <span>Continue to: {{ getNodeLabel(edge.target) }}</span>
                     <Icon name="material-symbols:arrow-right-alt" />
                   </RsButton>
                 </template>
@@ -995,8 +1235,46 @@ onUnmounted(() => {
           </RsButton>
         </div>
 
+        <!-- Variable Mapping Debug (only in development) -->
+        <div v-if="currentNode.type === 'form'" class="bg-gray-100 rounded-lg p-4">
+          <details>
+            <summary class="font-medium text-gray-700 cursor-pointer mb-2">Variable Mapping Debug</summary>
+            <div class="space-y-3 text-xs">
+              <!-- Input Mappings -->
+              <div v-if="currentNode.data?.inputMappings?.length">
+                <p class="font-medium text-gray-700">Input Mappings (Process → Form):</p>
+                <pre class="text-gray-600 bg-white p-2 rounded border overflow-auto">{{ JSON.stringify(currentNode.data.inputMappings, null, 2) }}</pre>
+              </div>
+              
+              <!-- Output Mappings -->
+              <div v-if="currentNode.data?.outputMappings?.length">
+                <p class="font-medium text-gray-700">Output Mappings (Form → Process):</p>
+                <pre class="text-gray-600 bg-white p-2 rounded border overflow-auto">{{ JSON.stringify(currentNode.data.outputMappings, null, 2) }}</pre>
+              </div>
+              
+              <!-- Field Conditions -->
+              <div v-if="currentNode.data?.fieldConditions?.length">
+                <p class="font-medium text-gray-700">Field Conditions:</p>
+                <pre class="text-gray-600 bg-white p-2 rounded border overflow-auto">{{ JSON.stringify(currentNode.data.fieldConditions, null, 2) }}</pre>
+              </div>
+              
+              <!-- Current Field States -->
+              <div v-if="Object.keys(fieldStates).length">
+                <p class="font-medium text-gray-700">Active Field States:</p>
+                <pre class="text-gray-600 bg-white p-2 rounded border overflow-auto">{{ JSON.stringify(fieldStates, null, 2) }}</pre>
+              </div>
+              
+              <!-- Form Data -->
+              <div v-if="Object.keys(formData).length">
+                <p class="font-medium text-gray-700">Current Form Data:</p>
+                <pre class="text-gray-600 bg-white p-2 rounded border overflow-auto">{{ JSON.stringify(formData, null, 2) }}</pre>
+              </div>
+            </div>
+          </details>
+        </div>
+
         <!-- Process Variables Debug (only in development) -->
-        <div v-if="Object.keys(processVariables).length > 0" class="bg-gray-100 rounded-lg p-4">
+        <div v-if="Object.keys(processVariables).length > 0" class="bg-gray-100 rounded-lg p-4 mt-4">
           <details>
             <summary class="font-medium text-gray-700 cursor-pointer mb-2">Process Variables (Debug)</summary>
             <pre class="text-xs text-gray-600 bg-white p-2 rounded border overflow-auto">{{ JSON.stringify(processVariables, null, 2) }}</pre>