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.
Enhance Workflow Execution with Notification and Decision Node Features
2025-07-16 08:39:43 +08:00 · 2025-07-16 08:39:36 +08:00
5 changed files with 1455 additions and 187 deletions
--- a/components/process-flow/ApiNodeConfiguration.vue
+++ b/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>
--- a/components/process-flow/KeyValueTable.vue
+++ b/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> 
--- a/docs/json/process-builder/processDefinition.json
+++ b/docs/json/process-builder/processDefinition.json
@ -54,6 +54,28 @@
      "animated": true,
      "sourceHandle": "html-1752550500000-right",
      "targetHandle": "end-1752546716111-left"
+    },
+    {
+      "id": "html-1752550500000-notification-1752621850786-1752621852927",
+      "data": {},
+      "type": "custom",
+      "label": "",
+      "source": "html-1752550500000",
+      "target": "notification-1752621850786",
+      "animated": true,
+      "sourceHandle": "html-1752550500000-bottom",
+      "targetHandle": "notification-1752621850786-left"
+    },
+    {
+      "id": "notification-1752621850786-end-1752546716111-1752621856004",
+      "data": {},
+      "type": "custom",
+      "label": "",
+      "source": "notification-1752621850786",
+      "target": "end-1752546716111",
+      "animated": true,
+      "sourceHandle": "notification-1752621850786-right",
+      "targetHandle": "end-1752546716111-left"
    }
  ],
  "nodes": [
@ -99,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",
@ -131,7 +160,7 @@
      },
      "type": "script",
      "label": "Script Task",
-      "position": { "x": 1200, "y": 330 }
+      "position": { "x": 1185, "y": 330 }
    },
    {
      "id": "html-1752550500000",
@ -148,12 +177,37 @@
      },
      "type": "html",
      "label": "Show Result",
-      "position": { "x": 1560, "y": 105 }
+      "position": { "x": 1425, "y": 75 }
+    },
+    {
+      "id": "notification-1752621850786",
+      "data": {
+        "label": "Notification",
+        "message": "This is the notification",
+        "subject": "This is the notification",
+        "priority": "medium",
+        "expiration": { "unit": "hours", "value": 24, "enabled": false },
+        "description": "Send notification to users",
+        "htmlMessage": "",
+        "messageFormat": "text",
+        "recipientRole": "",
+        "recipientType": "email",
+        "recipientUser": "",
+        "recipientEmail": "mdafiqiskandar@gmail.com",
+        "recipientGroup": "",
+        "deliveryOptions": { "sms": false, "email": false, "inApp": true },
+        "richTextMessage": "",
+        "notificationType": "info",
+        "recipientVariable": ""
+      },
+      "type": "notification",
+      "label": "Notification",
+      "position": { "x": 1590, "y": 360 }
    }
  ],
  "viewport": {
-    "x": -660.4278622401489,
-    "y": 202.3364877443377,
-    "zoom": 0.8153893887682282
+    "x": -118.4524312896406,
+    "y": 314.4180761099366,
+    "zoom": 0.6437632135306554
  }
 }
--- a/docs/process-variables-system.md
+++ b/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)
--- a/pages/workflow/[id].vue
+++ b/pages/workflow/[id].vue
@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import FormScriptEngine from '~/components/FormScriptEngine.vue';
 import ConditionalLogicEngine from '~/components/ConditionalLogicEngine.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);
@ -130,24 +131,115 @@ const startProcessExecution = async () => {
  }
 };

-// Helper: Get next node ID by following edges
-function getNextNodeId(currentNodeId) {
-  const edge = workflowData.value.edges.find(e => e.source === currentNodeId);
-  return edge ? edge.target : null;
+// Helper: Get all outgoing edges for a node
+function getOutgoingEdges(currentNodeId) {
+  return workflowData.value.edges.filter(e => e.source === currentNodeId);
 }

-// Move to next step in workflow (edge-based)
+// Helper: Get next node ID by following edges (for single-path nodes)
+function getNextNodeId(currentNodeId) {
+  const edges = getOutgoingEdges(currentNodeId);
+  return edges.length > 0 ? edges[0].target : null;
+}
+
+// Helper: Check if a node can auto-progress (has single outgoing edge)
+function canAutoProgress(node) {
+  const outgoingEdges = getOutgoingEdges(node.id);
+  return outgoingEdges.length === 1;
+}
+
+// Helper: Get next node ID for decision/gateway nodes based on conditions
+function getNextNodeIdForDecision(currentNodeId) {
+  const currentNodeObj = workflowData.value.nodes.find(n => n.id === currentNodeId);
+  const outgoingEdges = getOutgoingEdges(currentNodeId);
+  
+  if (!currentNodeObj || !outgoingEdges.length) return null;
+  
+  const { conditions = [], defaultPath } = currentNodeObj.data || {};
+  
+  // Evaluate conditions
+  for (const condition of conditions) {
+    if (evaluateCondition(condition, processVariables.value)) {
+      // Find the edge that matches this condition's target
+      const edge = outgoingEdges.find(e => e.data?.conditionId === condition.id || e.label === condition.label);
+      if (edge) return edge.target;
+    }
+  }
+  
+  // If no conditions match, use default path
+  if (defaultPath) {
+    const defaultEdge = outgoingEdges.find(e => e.data?.isDefault || e.label?.toLowerCase().includes('default'));
+    if (defaultEdge) return defaultEdge.target;
+  }
+  
+  // Fallback to first edge
+  return outgoingEdges[0]?.target || null;
+}
+
+// Helper: Evaluate a single condition
+function evaluateCondition(condition, variables) {
+  const { variable, operator, value } = condition;
+  const variableValue = variables[variable];
+  
+  switch (operator) {
+    case 'equals':
+    case '==':
+      return variableValue == value;
+    case 'not_equals':
+    case '!=':
+      return variableValue != value;
+    case 'greater_than':
+    case '>':
+      return Number(variableValue) > Number(value);
+    case 'less_than':
+    case '<':
+      return Number(variableValue) < Number(value);
+    case 'greater_than_or_equal':
+    case '>=':
+      return Number(variableValue) >= Number(value);
+    case 'less_than_or_equal':
+    case '<=':
+      return Number(variableValue) <= Number(value);
+    case 'contains':
+      return String(variableValue).includes(String(value));
+    case 'not_contains':
+      return !String(variableValue).includes(String(value));
+    case 'is_empty':
+      return !variableValue || variableValue === '' || variableValue === null || variableValue === undefined;
+    case 'is_not_empty':
+      return variableValue && variableValue !== '' && variableValue !== null && variableValue !== undefined;
+    default:
+      console.warn('[Workflow] Unknown condition operator:', operator);
+      return false;
+  }
+}
+
+// Move to a specific node by its ID
+const moveToSpecificNode = (targetNodeId) => {
+  const nextIndex = workflowData.value.nodes.findIndex(n => n.id === targetNodeId);
+  if (nextIndex !== -1) {
+    currentStep.value = nextIndex;
+    const node = workflowData.value.nodes[currentStep.value];
+    console.log(`[Workflow] Moved to node: ${node.type} - ${node.data?.label || node.label}`);
+    return true;
+  }
+  return false;
+};
+
+// Move to next step in workflow (only for single-path auto-progressable nodes)
 const moveToNextStep = () => {
  const currentNode = workflowData.value.nodes[currentStep.value];
  if (!currentNode) return;
+  
+  // Only auto-progress if there's exactly one outgoing edge
+  if (!canAutoProgress(currentNode)) {
+    console.log(`[Workflow] Node ${currentNode.id} has multiple paths, waiting for user choice`);
+    return;
+  }
+  
  const nextNodeId = getNextNodeId(currentNode.id);
  if (nextNodeId) {
-    const nextIndex = workflowData.value.nodes.findIndex(n => n.id === nextNodeId);
-    if (nextIndex !== -1) {
-      currentStep.value = nextIndex;
-      const node = workflowData.value.nodes[currentStep.value];
-      console.log(`[Workflow] Entered node: ${node.type} - ${node.data?.label || node.label}`);
-    }
+    moveToSpecificNode(nextNodeId);
  }
 };

@ -155,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();
    }
@ -177,49 +283,284 @@ 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);
-        moveToNextStep();
-      } catch (err) {
-        processVariables.value[errorVariable] = err;
-        console.error('[Workflow] API call failed:', err);
-        if (continueOnError) {
-          moveToNextStep();
-        } else {
-          error.value = 'API call failed: ' + (err.message || err);
+      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 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 if (currentNode.value?.type === 'script') {
      console.log(`[Workflow] Executing script node: ${currentNode.value.data?.label || currentNode.value.label}`);
      // Simulate script execution
      await new Promise(resolve => setTimeout(resolve, 500));
-      moveToNextStep();
+      
+      // Only auto-progress if there's a single outgoing edge
+      if (canAutoProgress(currentNode.value)) {
+        moveToNextStep();
+      } else {
+        console.log('[Workflow] Script completed, multiple paths available - waiting for user choice');
+      }
+    } else if (currentNode.value?.type === 'html') {
+      console.log(`[Workflow] Processing HTML node: ${currentNode.value.data?.label || currentNode.value.label}`);
+      // HTML nodes are user-interactive, so we don't auto-advance
+      // The user will click a button to continue
+      return;
+    } else if (currentNode.value?.type === 'notification') {
+      console.log(`[Workflow] Sending notification: ${currentNode.value.data?.label || currentNode.value.label}`);
+      // Enhanced notification node execution
+      const {
+        notificationType = 'info',
+        recipients = [],
+        message = '',
+        subject = '',
+        continueOnError = true
+      } = currentNode.value.data || {};
+      
+      try {
+        // Simulate notification sending
+        console.log('[Workflow] Notification sent:', { type: notificationType, recipients, message, subject });
+        await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate API call delay
+        
+        // Only auto-progress if there's a single outgoing edge
+        if (canAutoProgress(currentNode.value)) {
+          moveToNextStep();
+        } else {
+          console.log('[Workflow] Notification sent, multiple paths available - waiting for user choice');
+        }
+      } catch (err) {
+        console.error('[Workflow] Notification failed:', err);
+        if (continueOnError) {
+          if (canAutoProgress(currentNode.value)) {
+            moveToNextStep();
+          } else {
+            console.log('[Workflow] Notification failed but continuing, multiple paths available - waiting for user choice');
+          }
+        } else {
+          error.value = 'Notification failed: ' + (err.message || err);
+        }
+      }
+    } else if (['decision', 'gateway'].includes(currentNode.value?.type)) {
+      console.log(`[Workflow] Processing decision node: ${currentNode.value.data?.label || currentNode.value.label}`);
+      // Decision nodes require user interaction or automatic condition evaluation
+      // We'll handle this in the template section
+      return;
    }
    // Add more node types as needed
  } catch (err) {
@ -238,6 +579,9 @@ const getStepInfo = (node) => {
    'api': { label: 'API Call', icon: 'material-symbols:api', color: 'purple' },
    'script': { label: 'Script Execution', icon: 'material-symbols:code', color: 'orange' },
    'decision': { label: 'Decision Point', icon: 'material-symbols:alt-route', color: 'yellow' },
+    'gateway': { label: 'Decision Gateway', icon: 'material-symbols:fork-right', color: 'yellow' },
+    'html': { label: 'HTML Content', icon: 'material-symbols:code-blocks', color: 'indigo' },
+    'notification': { label: 'Notification', icon: 'material-symbols:notifications', color: 'pink' },
    'end': { label: 'Process Complete', icon: 'material-symbols:check-circle', color: 'green' }
  };
  
@ -300,20 +644,42 @@ onMounted(() => {
 // Watch for step changes to auto-execute non-form steps or load form data
 watch(currentStep, async (newStep) => {
  if (currentNode.value) {
-    if (['api', 'script'].includes(currentNode.value.type)) {
+    if (['api', 'script', 'notification'].includes(currentNode.value.type)) {
      await executeCurrentStep();
    } else if (currentNode.value.type === 'form') {
      // Load form data for form nodes
      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;
          formStore.updatePreviewFormData(formData.value);
        }
      }
+    } else if (['decision', 'gateway'].includes(currentNode.value.type)) {
+      // Handle decision nodes
+      await executeDecisionNode();
    }
+    // html nodes are handled in template - no auto-execution needed
  }
 });

@ -322,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);

@ -337,6 +710,55 @@ const validateAndSubmit = () => {
  }
 };

+// Handle decision node execution (automatic or manual)
+const executeDecisionNode = async () => {
+  try {
+    stepLoading.value = true;
+    const currentNodeObj = workflowData.value.nodes[currentStep.value];
+    const { executionType = 'automatic' } = currentNodeObj.data || {};
+    
+    if (executionType === 'automatic') {
+      // Automatic decision based on conditions
+      const nextNodeId = getNextNodeIdForDecision(currentNodeObj.id);
+      if (nextNodeId) {
+        if (moveToSpecificNode(nextNodeId)) {
+          const node = workflowData.value.nodes[currentStep.value];
+          console.log(`[Workflow] Decision made automatically, moving to: ${node.data?.label || node.label}`);
+        }
+      }
+    }
+    // Manual decisions are handled in the template with buttons
+  } catch (err) {
+    console.error('[Workflow] Error executing decision:', err);
+    error.value = 'Failed to execute decision';
+  } finally {
+    stepLoading.value = false;
+  }
+};
+
+// Handle manual decision choice
+const makeDecision = (targetNodeId) => {
+  if (moveToSpecificNode(targetNodeId)) {
+    const node = workflowData.value.nodes[currentStep.value];
+    console.log(`[Workflow] Manual decision made, moving to: ${node.data?.label || node.label}`);
+  }
+};
+
+// 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];
+    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);
+  });
+};
+
 // Compute the workflow path by following edges from start to end
 function computeWorkflowPath() {
  const path = [];
@ -371,6 +793,68 @@ const currentStepIndex = computed(() => {
  return workflowPath.value.indexOf(currentNode.value?.id) + 1;
 });
 const totalSteps = computed(() => workflowPath.value.length);
+
+// Computed: Interpolated HTML content for HTML nodes
+const interpolatedHtmlContent = computed(() => {
+  if (currentNode.value?.type !== 'html') return '';
+  
+  const htmlContent = currentNode.value?.data?.htmlCode || currentNode.value?.data?.htmlContent || '';
+  return interpolateHtmlContent(htmlContent);
+});
+
+// Computed: CSS styles for HTML nodes
+const htmlNodeStyles = computed(() => {
+  if (currentNode.value?.type !== 'html') return '';
+  return currentNode.value?.data?.cssCode || '';
+});
+
+// CSS injection for HTML nodes
+let currentStyleElement = null;
+
+// Function to inject CSS
+const injectHtmlNodeCSS = (cssCode) => {
+  // Remove previous style element
+  if (currentStyleElement) {
+    currentStyleElement.remove();
+    currentStyleElement = null;
+  }
+  
+  // Add new styles if available
+  if (cssCode && cssCode.trim()) {
+    currentStyleElement = document.createElement('style');
+    currentStyleElement.textContent = cssCode;
+    currentStyleElement.setAttribute('data-workflow-html-node', 'true');
+    document.head.appendChild(currentStyleElement);
+  }
+};
+
+// Watch for HTML node CSS changes and inject styles
+watch(htmlNodeStyles, (newStyles) => {
+  injectHtmlNodeCSS(newStyles);
+}, { immediate: true });
+
+// Cleanup styles on unmount
+onUnmounted(() => {
+  if (currentStyleElement) {
+    currentStyleElement.remove();
+    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>
@ -463,6 +947,9 @@ const totalSteps = computed(() => workflowPath.value.length);
              getStepInfo(currentNode).color === 'green' ? 'bg-green-100 text-green-600' :
              getStepInfo(currentNode).color === 'purple' ? 'bg-purple-100 text-purple-600' :
              getStepInfo(currentNode).color === 'orange' ? 'bg-orange-100 text-orange-600' :
+              getStepInfo(currentNode).color === 'yellow' ? 'bg-yellow-100 text-yellow-600' :
+              getStepInfo(currentNode).color === 'indigo' ? 'bg-indigo-100 text-indigo-600' :
+              getStepInfo(currentNode).color === 'pink' ? 'bg-pink-100 text-pink-600' :
              'bg-gray-100 text-gray-600'
            ]">
              <Icon :name="getStepInfo(currentNode).icon" class="w-6 h-6" />
@ -527,7 +1014,8 @@ const totalSteps = computed(() => workflowPath.value.length);
                <template v-for="(component, index) in currentForm.formComponents" :key="index">
                  <ComponentPreview 
                    :component="component" 
-                    :is-preview="false" 
+                    :is-preview="false"
+                    :field-states="fieldStates"
                  />
                </template>
                <div class="flex justify-end pt-6 border-t border-gray-200">
@ -573,13 +1061,167 @@ const totalSteps = computed(() => workflowPath.value.length);
          </div>
        </div>

-        <!-- API/Script Step -->
-        <div v-else-if="['api', 'script'].includes(currentNode.type)" class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center">
-          <Icon name="material-symbols:progress-activity" class="w-8 h-8 animate-spin text-blue-500 mx-auto mb-4" />
-          <h3 class="text-lg font-semibold text-gray-900 mb-2">
-            {{ currentNode.type === 'api' ? 'Calling API...' : 'Executing Script...' }}
-          </h3>
-          <p class="text-gray-600">Please wait while we process this step</p>
+        <!-- API/Script/Notification Step -->
+        <div v-else-if="['api', 'script', 'notification'].includes(currentNode.type)" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+          <!-- Processing State -->
+          <div v-if="stepLoading" class="text-center py-8">
+            <Icon name="material-symbols:progress-activity" class="w-8 h-8 animate-spin text-blue-500 mx-auto mb-4" />
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">
+              {{ 
+                currentNode.type === 'api' ? 'Calling API...' : 
+                currentNode.type === 'script' ? 'Executing Script...' :
+                'Sending Notification...'
+              }}
+            </h3>
+            <p class="text-gray-600">Please wait while we process this step</p>
+          </div>
+          
+          <!-- Completed State with Multiple Paths -->
+          <div v-else-if="!canAutoProgress(currentNode)" class="space-y-4">
+            <div class="text-center">
+              <Icon name="material-symbols:check-circle" class="w-8 h-8 text-green-500 mx-auto mb-4" />
+              <h3 class="text-lg font-semibold text-gray-900 mb-2">
+                {{ 
+                  currentNode.type === 'api' ? 'API Call Complete' : 
+                  currentNode.type === 'script' ? 'Script Executed' :
+                  'Notification Sent'
+                }}
+              </h3>
+              <p class="text-gray-600 mb-6">{{ currentNode.data?.label || currentNode.label }}</p>
+            </div>
+            
+            <!-- Multiple Path Options -->
+            <div class="border-t border-gray-200 pt-4">
+              <h4 class="font-medium text-gray-700 mb-3">Choose your next step:</h4>
+              <div class="grid gap-2">
+                <template v-for="edge in getOutgoingEdges(currentNode.id)" :key="edge.id">
+                  <RsButton 
+                    @click="makeDecision(edge.target)"
+                    variant="outline"
+                    class="justify-between p-3"
+                  >
+                    <span>Continue to: {{ getNodeLabel(edge.target) }}</span>
+                    <Icon name="material-symbols:arrow-right-alt" />
+                  </RsButton>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- HTML Content Step -->
+        <div v-else-if="currentNode.type === 'html'" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+          <div class="mb-4">
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">
+              {{ currentNode.data?.title || currentNode.data?.label || 'Content Display' }}
+            </h3>
+            <p v-if="currentNode.data?.description" class="text-gray-600 text-sm">
+              {{ currentNode.data.description }}
+            </p>
+          </div>
+          
+          <!-- HTML Content -->
+          <div class="html-content-container border border-gray-200 rounded-lg p-4 mb-6">
+            <div 
+              v-if="interpolatedHtmlContent" 
+              v-html="interpolatedHtmlContent"
+              class="prose max-w-none"
+            ></div>
+            <div v-else class="text-center text-gray-500 py-8">
+              <Icon name="material-symbols:code-blocks" class="w-12 h-12 mx-auto mb-2" />
+              <p>No HTML content provided</p>
+            </div>
+          </div>
+          
+          <!-- Continue Options -->
+          <div class="pt-4 border-t border-gray-200">
+            <!-- Single Path - Simple Continue Button -->
+            <div v-if="canAutoProgress(currentNode)" class="flex justify-end">
+              <RsButton 
+                @click="moveToNextStep"
+                :disabled="stepLoading"
+                variant="primary"
+              >
+                <Icon v-if="stepLoading" name="material-symbols:progress-activity" class="w-4 h-4 animate-spin mr-2" />
+                <template v-if="!stepLoading">
+                  Continue to: {{ getNextNodeObject(currentNode)?.data?.label || getNextNodeObject(currentNode)?.label || 'Next Step' }}
+                </template>
+                <template v-else>
+                  Processing...
+                </template>
+              </RsButton>
+            </div>
+            
+            <!-- Multiple Paths - Show Options -->
+            <div v-else class="space-y-3">
+              <h4 class="font-medium text-gray-700">Choose your next step:</h4>
+              <div class="grid gap-2">
+                <template v-for="edge in getOutgoingEdges(currentNode.id)" :key="edge.id">
+                  <RsButton 
+                    @click="makeDecision(edge.target)"
+                    variant="outline"
+                    class="justify-between p-3"
+                  >
+                    <span>Continue to: {{ getNodeLabel(edge.target) }}</span>
+                    <Icon name="material-symbols:arrow-right-alt" />
+                  </RsButton>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Decision/Gateway Step -->
+        <div v-else-if="['decision', 'gateway'].includes(currentNode.type)" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+          <div class="mb-4">
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">
+              {{ currentNode.data?.title || currentNode.data?.label || 'Make a Decision' }}
+            </h3>
+            <p v-if="currentNode.data?.description" class="text-gray-600 text-sm">
+              {{ currentNode.data.description }}
+            </p>
+          </div>
+          
+          <!-- Manual Decision Options -->
+          <div v-if="currentNode.data?.executionType === 'manual'" class="space-y-4">
+            <p class="text-gray-700 mb-4">Please choose one of the following options:</p>
+            <div class="grid gap-3">
+              <template v-for="edge in workflowData.edges.filter(e => e.source === currentNode.id)" :key="edge.id">
+                <RsButton 
+                  @click="makeDecision(edge.target)"
+                  variant="outline"
+                  class="justify-start p-4 h-auto"
+                >
+                  <div class="text-left">
+                    <div class="font-medium">{{ edge.label || 'Option' }}</div>
+                    <div v-if="edge.data?.description" class="text-sm text-gray-500 mt-1">
+                      {{ edge.data.description }}
+                    </div>
+                  </div>
+                  <Icon name="material-symbols:arrow-right-alt" class="ml-auto" />
+                </RsButton>
+              </template>
+            </div>
+          </div>
+          
+          <!-- Automatic Decision Processing -->
+          <div v-else class="text-center py-8">
+            <Icon name="material-symbols:progress-activity" class="w-8 h-8 animate-spin text-yellow-500 mx-auto mb-4" />
+            <h4 class="text-lg font-medium text-gray-900 mb-2">Evaluating Conditions</h4>
+            <p class="text-gray-600">Please wait while we determine the next step...</p>
+            
+            <!-- Show conditions being evaluated -->
+            <div v-if="currentNode.data?.conditions?.length" class="mt-6 text-left">
+              <h5 class="font-medium text-gray-700 mb-3">Conditions:</h5>
+              <div class="space-y-2">
+                <div v-for="(condition, index) in currentNode.data.conditions" :key="index" 
+                     class="flex items-center gap-2 text-sm text-gray-600 bg-gray-50 p-2 rounded">
+                  <Icon name="material-symbols:rule" class="w-4 h-4" />
+                  <span>{{ condition.variable }} {{ condition.operator }} {{ condition.value }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
        </div>

        <!-- Other Step Types -->
@ -593,8 +1235,46 @@ const totalSteps = computed(() => workflowPath.value.length);
          </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>