From ed00664882b3766ae9a5e80ad8e65c5313cbe977 Mon Sep 17 00:00:00 2001
From: Md Afiq Iskandar <mdafiqiskandar@gmail.com>
Date: Mon, 28 Jul 2025 11:35:38 +0800
Subject: [PATCH] Implement Node Validation System for Process Flow

- Introduced a comprehensive node validation system in the process flow builder, enhancing the user experience by providing real-time feedback on node configurations and process integrity.
- Added `useNodeValidation` composable to manage validation logic, including checks for required nodes, configuration completeness, and flow logic.
- Integrated validation indicators in node components (ApiNode, FormNode, GatewayNode, ScriptNode) to visually represent validation issues.
- Created `ValidationIndicator` and `ValidationTooltip` components for displaying validation statuses and detailed messages.
- Updated `ProcessFlowCanvas.vue` to trigger validation on node and edge changes, ensuring immediate feedback during process design.
- Enhanced `processBuilder` store to manage validation results and summary statistics, allowing for a centralized validation state.
- Documented the validation system implementation plan to guide future enhancements and user training.
---
 .claude/settings.local.json                   |   7 +-
 components/process-flow/ProcessFlowCanvas.vue | 181 ++++++
 .../process-flow/ValidationIndicator.vue      | 175 ++++++
 components/process-flow/ValidationTooltip.vue | 160 +++++
 components/process-flow/custom/ApiNode.vue    |  16 +
 components/process-flow/custom/FormNode.vue   |  16 +
 .../process-flow/custom/GatewayNode.vue       |  16 +
 components/process-flow/custom/ScriptNode.vue |  16 +
 composables/useNodeValidation.js              | 589 ++++++++++++++++++
 docs/node-validation-system-plan.md           | 463 ++++++++++++++
 stores/processBuilder.js                      | 101 ++-
 11 files changed, 1737 insertions(+), 3 deletions(-)
 create mode 100644 components/process-flow/ValidationIndicator.vue
 create mode 100644 components/process-flow/ValidationTooltip.vue
 create mode 100644 composables/useNodeValidation.js
 create mode 100644 docs/node-validation-system-plan.md

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index a4af320..c8b6d3d 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -1,8 +1,11 @@
 {
   "permissions": {
     "allow": [
-      "Bash(mkdir:*)"
+      "Bash(mkdir:*)",
+      "Bash(yarn dev:*)",
+      "Bash(yarn lint:*)",
+      "Bash(yarn build:*)"
     ],
     "deny": []
   }
-}
\ No newline at end of file
+}
diff --git a/components/process-flow/ProcessFlowCanvas.vue b/components/process-flow/ProcessFlowCanvas.vue
index 3aba1b0..cf6cc47 100644
--- a/components/process-flow/ProcessFlowCanvas.vue
+++ b/components/process-flow/ProcessFlowCanvas.vue
@@ -14,6 +14,7 @@ import { Background } from "@vue-flow/background";
 import { Controls } from "@vue-flow/controls";
 import { MiniMap } from "@vue-flow/minimap";
 import InteractiveArrowEdge from "./InteractiveArrowEdge.vue";
+import { useNodeValidation } from '~/composables/useNodeValidation';
 // Import all file-based custom node components
 import StartNode from "~/components/process-flow/custom/StartNode.vue";
 import EndNode from "~/components/process-flow/custom/EndNode.vue";
@@ -96,6 +97,16 @@ const emit = defineEmits([
 // Get the flow instance
 const { flowInstance } = useVueFlow();
 
+// Initialize validation system
+const {
+  validateProcess,
+  validationResults,
+  isValidating,
+  overallValidationStatus,
+  validationSummary,
+  clearValidation
+} = useNodeValidation();
+
 // Initialize Vue Flow
 const {
   nodes,
@@ -734,6 +745,27 @@ onEdgesChange((changes) => {
   emit("edgesChange", changes, edges.value);
 });
 
+// Watch for changes to nodes and edges to trigger validation
+watch(
+  () => [nodes.value, edges.value],
+  ([currentNodes, currentEdges]) => {
+    if (currentNodes && currentNodes.length > 0) {
+      // Debounce validation to avoid excessive re-computation
+      clearTimeout(validationTimeout.value);
+      validationTimeout.value = setTimeout(() => {
+        validateProcess(currentNodes, currentEdges || []);
+      }, 300);
+    } else {
+      // Clear validation if no nodes
+      clearValidation();
+    }
+  },
+  { deep: true }
+);
+
+// Timeout for debouncing validation
+const validationTimeout = ref(null);
+
 // Handle new connections
 const handleConnect = (connection) => {
   if (!connection.source || !connection.target) return;
@@ -1928,6 +1960,55 @@ function fromObject(flowObject) {
           </div>
         </div>
       </Panel>
+
+      <!-- Validation Panel -->
+      <Panel position="top-left" class="validation-panel">
+        <div class="validation-panel-content">
+          <div class="flex items-center justify-between mb-2">
+            <h4 class="validation-title">Process Validation</h4>
+            <div class="validation-status" :class="overallValidationStatus">
+              <Icon 
+                :name="overallValidationStatus === 'error' ? 'material-symbols:error' : 
+                       overallValidationStatus === 'warning' ? 'material-symbols:warning' : 
+                       'material-symbols:check-circle'" 
+                class="w-4 h-4"
+              />
+              <span class="status-text">
+                {{ overallValidationStatus === 'error' ? 'Errors' : 
+                   overallValidationStatus === 'warning' ? 'Warnings' : 'Valid' }}
+              </span>
+            </div>
+          </div>
+          
+          <div v-if="validationSummary.totalIssues > 0" class="validation-summary">
+            <div class="summary-stats">
+              <span v-if="validationSummary.errors > 0" class="stat-item error">
+                {{ validationSummary.errors }} error{{ validationSummary.errors > 1 ? 's' : '' }}
+              </span>
+              <span v-if="validationSummary.warnings > 0" class="stat-item warning">
+                {{ validationSummary.warnings }} warning{{ validationSummary.warnings > 1 ? 's' : '' }}
+              </span>
+              <span v-if="validationSummary.infos > 0" class="stat-item info">
+                {{ validationSummary.infos }} info{{ validationSummary.infos > 1 ? 's' : '' }}
+              </span>
+            </div>
+          </div>
+          
+          <div v-else-if="nodes.length > 0" class="validation-success">
+            <Icon name="material-symbols:check-circle" class="w-4 h-4 text-green-500" />
+            <span class="text-green-600 text-sm">Process validation passed</span>
+          </div>
+          
+          <div v-else class="validation-empty">
+            <span class="text-gray-500 text-sm">Add nodes to validate process</span>
+          </div>
+          
+          <div v-if="isValidating" class="validation-loading">
+            <Icon name="material-symbols:refresh" class="w-4 h-4 animate-spin" />
+            <span class="text-sm text-gray-600">Validating...</span>
+          </div>
+        </div>
+      </Panel>
     </VueFlow>
   </div>
 </template>
@@ -2313,4 +2394,104 @@ function fromObject(flowObject) {
 .help-list li:last-child {
   margin-bottom: 0;
 }
+
+/* Validation Panel Styles */
+.validation-panel {
+  pointer-events: all;
+}
+
+.validation-panel-content {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 12px;
+  min-width: 220px;
+  max-width: 280px;
+}
+
+.validation-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #374151;
+  margin: 0;
+}
+
+.validation-status {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.validation-status.error {
+  color: #dc2626;
+  background: #fef2f2;
+}
+
+.validation-status.warning {
+  color: #d97706;
+  background: #fffbeb;
+}
+
+.validation-status.valid {
+  color: #059669;
+  background: #f0fdf4;
+}
+
+.validation-summary {
+  margin-top: 8px;
+}
+
+.summary-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.stat-item {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-weight: 500;
+}
+
+.stat-item.error {
+  color: #dc2626;
+  background: #fef2f2;
+}
+
+.stat-item.warning {
+  color: #d97706;
+  background: #fffbeb;
+}
+
+.stat-item.info {
+  color: #2563eb;
+  background: #eff6ff;
+}
+
+.validation-success {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.validation-empty {
+  margin-top: 8px;
+}
+
+.validation-loading {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.status-text {
+  font-size: 10px;
+}
 </style>
diff --git a/components/process-flow/ValidationIndicator.vue b/components/process-flow/ValidationIndicator.vue
new file mode 100644
index 0000000..daabd14
--- /dev/null
+++ b/components/process-flow/ValidationIndicator.vue
@@ -0,0 +1,175 @@
+<script setup>
+import { computed } from 'vue'
+import ValidationTooltip from './ValidationTooltip.vue'
+
+const props = defineProps({
+  nodeId: {
+    type: String,
+    required: true
+  },
+  validationIssues: {
+    type: Array,
+    default: () => []
+  },
+  showTooltip: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// Computed properties for validation display
+const hasIssues = computed(() => props.validationIssues.length > 0)
+
+const validationSeverity = computed(() => {
+  if (!hasIssues.value) return null
+  
+  const hasError = props.validationIssues.some(issue => issue.severity === 'error')
+  const hasWarning = props.validationIssues.some(issue => issue.severity === 'warning')
+  
+  if (hasError) return 'error'
+  if (hasWarning) return 'warning'
+  return 'info'
+})
+
+const validationIcon = computed(() => {
+  switch (validationSeverity.value) {
+    case 'error': return 'material-symbols:error'
+    case 'warning': return 'material-symbols:warning'
+    case 'info': return 'material-symbols:info'
+    default: return null
+  }
+})
+
+const validationTooltip = computed(() => {
+  if (!hasIssues.value) return null
+  
+  const issuesByType = {
+    error: props.validationIssues.filter(i => i.severity === 'error'),
+    warning: props.validationIssues.filter(i => i.severity === 'warning'),
+    info: props.validationIssues.filter(i => i.severity === 'info')
+  }
+  
+  const lines = []
+  
+  if (issuesByType.error.length > 0) {
+    lines.push('ERRORS:')
+    issuesByType.error.forEach(issue => lines.push(`• ${issue.message}`))
+  }
+  
+  if (issuesByType.warning.length > 0) {
+    if (lines.length > 0) lines.push('')
+    lines.push('WARNINGS:')
+    issuesByType.warning.forEach(issue => lines.push(`• ${issue.message}`))
+  }
+  
+  if (issuesByType.info.length > 0) {
+    if (lines.length > 0) lines.push('')
+    lines.push('INFO:')
+    issuesByType.info.forEach(issue => lines.push(`• ${issue.message}`))
+  }
+  
+  return lines.join('\n')
+})
+
+const severityClass = computed(() => {
+  return `validation-${validationSeverity.value}`
+})
+
+const severityColorClass = computed(() => {
+  switch (validationSeverity.value) {
+    case 'error': return 'text-red-500'
+    case 'warning': return 'text-yellow-500'
+    case 'info': return 'text-blue-500'
+    default: return ''
+  }
+})
+</script>
+
+<template>
+  <ValidationTooltip 
+    v-if="hasIssues && showTooltip" 
+    :content="validationTooltip"
+    position="top"
+  >
+    <div 
+      class="validation-indicator"
+      :class="severityClass"
+    >
+      <i 
+        :class="[validationIcon, severityColorClass]"
+        class="validation-icon"
+      ></i>
+      
+      <!-- Badge with issue count -->
+      <span 
+        v-if="validationIssues.length > 1"
+        class="validation-badge"
+        :class="severityClass"
+      >
+        {{ validationIssues.length }}
+      </span>
+    </div>
+  </ValidationTooltip>
+  
+  <!-- Fallback without tooltip -->
+  <div 
+    v-else-if="hasIssues"
+    class="validation-indicator"
+    :class="severityClass"
+  >
+    <i 
+      :class="[validationIcon, severityColorClass]"
+      class="validation-icon"
+    ></i>
+    
+    <!-- Badge with issue count -->
+    <span 
+      v-if="validationIssues.length > 1"
+      class="validation-badge"
+      :class="severityClass"
+    >
+      {{ validationIssues.length }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.validation-indicator {
+  @apply absolute -top-2 -right-2 z-50 flex items-center justify-center;
+  @apply w-6 h-6 rounded-full bg-white border-2 shadow-sm;
+  pointer-events: auto;
+  cursor: help;
+}
+
+.validation-indicator.validation-error {
+  @apply border-red-500 bg-red-50;
+}
+
+.validation-indicator.validation-warning {
+  @apply border-yellow-500 bg-yellow-50;
+}
+
+.validation-indicator.validation-info {
+  @apply border-blue-500 bg-blue-50;
+}
+
+.validation-icon {
+  @apply text-sm;
+}
+
+.validation-badge {
+  @apply absolute -top-1 -right-1 w-4 h-4 rounded-full text-xs;
+  @apply flex items-center justify-center text-white font-bold;
+  @apply bg-red-500;
+}
+
+.validation-badge.validation-warning {
+  @apply bg-yellow-500;
+}
+
+.validation-badge.validation-info {
+  @apply bg-blue-500;
+}
+
+/* Remove old tooltip styles - now using ValidationTooltip component */
+</style>
\ No newline at end of file
diff --git a/components/process-flow/ValidationTooltip.vue b/components/process-flow/ValidationTooltip.vue
new file mode 100644
index 0000000..a6734bc
--- /dev/null
+++ b/components/process-flow/ValidationTooltip.vue
@@ -0,0 +1,160 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true
+  },
+  position: {
+    type: String,
+    default: 'top' // top, bottom, left, right
+  }
+})
+
+const showTooltip = ref(false)
+const tooltipRef = ref(null)
+
+const positionClass = computed(() => {
+  return `tooltip-${props.position}`
+})
+
+const onMouseEnter = () => {
+  showTooltip.value = true
+}
+
+const onMouseLeave = () => {
+  showTooltip.value = false
+}
+</script>
+
+<template>
+  <div 
+    class="tooltip-container"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <slot />
+    
+    <div 
+      v-if="showTooltip && content"
+      ref="tooltipRef"
+      class="tooltip"
+      :class="positionClass"
+    >
+      <div class="tooltip-content">
+        <pre class="tooltip-text">{{ content }}</pre>
+      </div>
+      <div class="tooltip-arrow"></div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tooltip-container {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip {
+  position: absolute;
+  z-index: 9999;
+  background: #1f2937;
+  color: white;
+  border-radius: 6px;
+  padding: 8px 12px;
+  font-size: 12px;
+  white-space: nowrap;
+  max-width: 300px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  pointer-events: none;
+}
+
+.tooltip-text {
+  margin: 0;
+  white-space: pre-line;
+  font-family: inherit;
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+/* Position variants */
+.tooltip-top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 8px;
+}
+
+.tooltip-bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 8px;
+}
+
+.tooltip-left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: 8px;
+}
+
+.tooltip-right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 8px;
+}
+
+/* Arrow styles */
+.tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+.tooltip-top .tooltip-arrow {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid #1f2937;
+}
+
+.tooltip-bottom .tooltip-arrow {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #1f2937;
+}
+
+.tooltip-left .tooltip-arrow {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 6px solid #1f2937;
+}
+
+.tooltip-right .tooltip-arrow {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 6px solid #1f2937;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .tooltip {
+    max-width: 250px;
+    font-size: 11px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/process-flow/custom/ApiNode.vue b/components/process-flow/custom/ApiNode.vue
index ce66b3e..8c52544 100644
--- a/components/process-flow/custom/ApiNode.vue
+++ b/components/process-flow/custom/ApiNode.vue
@@ -1,5 +1,7 @@
 <script setup>
 import { Handle, Position } from '@vue-flow/core'
+import { useProcessBuilderStore } from '~/stores/processBuilder'
+import ValidationIndicator from '../ValidationIndicator.vue'
 
 // Define props that Vue Flow passes to custom nodes
 const props = defineProps([
@@ -10,6 +12,14 @@ const props = defineProps([
   'data'          // Custom data object
 ])
 
+// Validation functionality - get from store
+const processStore = useProcessBuilderStore()
+
+// Get validation issues for this node
+const validationIssues = computed(() => {
+  return processStore.getNodeValidation(props.id)
+})
+
 // Computed properties for node display
 const nodeLabel = computed(() => {
   return props.label || (props.data && props.data.label) || 'API Call'
@@ -104,6 +114,12 @@ const onClick = () => {
       :isValidConnection="() => true"
     />
     
+    <!-- Validation Indicator -->
+    <ValidationIndicator 
+      :node-id="id" 
+      :validation-issues="validationIssues"
+    />
+    
     <div class="custom-node-content">
       <div class="flex items-center mb-1">
         <div class="custom-node-icon">
diff --git a/components/process-flow/custom/FormNode.vue b/components/process-flow/custom/FormNode.vue
index 31ee68a..2e80330 100644
--- a/components/process-flow/custom/FormNode.vue
+++ b/components/process-flow/custom/FormNode.vue
@@ -1,5 +1,7 @@
 <script setup>
 import { Handle, Position } from '@vue-flow/core'
+import { useProcessBuilderStore } from '~/stores/processBuilder'
+import ValidationIndicator from '../ValidationIndicator.vue'
 
 // Define props that Vue Flow passes to custom nodes
 const props = defineProps([
@@ -10,6 +12,14 @@ const props = defineProps([
   'data'          // Custom data object
 ])
 
+// Validation functionality - get from store
+const processStore = useProcessBuilderStore()
+
+// Get validation issues for this node
+const validationIssues = computed(() => {
+  return processStore.getNodeValidation(props.id)
+})
+
 // Computed properties for node display
 const nodeLabel = computed(() => {
   return props.label || (props.data && props.data.label) || 'Form Task'
@@ -100,6 +110,12 @@ const onClick = () => {
       :isValidConnection="() => true"
     />
     
+    <!-- Validation Indicator -->
+    <ValidationIndicator 
+      :node-id="id" 
+      :validation-issues="validationIssues"
+    />
+
     <div class="custom-node-content">
       <div class="flex items-center mb-1">
         <div class="custom-node-icon">
diff --git a/components/process-flow/custom/GatewayNode.vue b/components/process-flow/custom/GatewayNode.vue
index fb93e29..d4fce5c 100644
--- a/components/process-flow/custom/GatewayNode.vue
+++ b/components/process-flow/custom/GatewayNode.vue
@@ -1,5 +1,7 @@
 <script setup>
 import { Handle, Position } from '@vue-flow/core'
+import { useProcessBuilderStore } from '~/stores/processBuilder'
+import ValidationIndicator from '../ValidationIndicator.vue'
 
 // Define props that Vue Flow passes to custom nodes
 const props = defineProps([
@@ -10,6 +12,14 @@ const props = defineProps([
   'data'          // Custom data object
 ])
 
+// Validation functionality
+const processStore = useProcessBuilderStore()
+
+// Get validation issues for this node
+const validationIssues = computed(() => {
+  return processStore.getNodeValidation(props.id)
+})
+
 // Computed properties for node display
 const nodeLabel = computed(() => {
   return props.label || (props.data && props.data.label) || 'Decision Point'
@@ -119,6 +129,12 @@ const onClick = () => {
       :isValidConnection="() => true"
     />
     
+    <!-- Validation Indicator -->
+    <ValidationIndicator 
+      :node-id="id" 
+      :validation-issues="validationIssues"
+    />
+    
     <div class="custom-node-content">
       <div class="material-icons">call_split</div>
       <div class="custom-node-title" :title="nodeLabel">{{ nodeLabel }}</div>
diff --git a/components/process-flow/custom/ScriptNode.vue b/components/process-flow/custom/ScriptNode.vue
index cd0240d..9e618d6 100644
--- a/components/process-flow/custom/ScriptNode.vue
+++ b/components/process-flow/custom/ScriptNode.vue
@@ -1,5 +1,7 @@
 <script setup>
 import { Handle, Position } from "@vue-flow/core";
+import { useProcessBuilderStore } from '~/stores/processBuilder'
+import ValidationIndicator from '../ValidationIndicator.vue'
 
 // Define props that Vue Flow passes to custom nodes
 const props = defineProps([
@@ -10,6 +12,14 @@ const props = defineProps([
   "data", // Custom data object
 ]);
 
+// Validation functionality
+const processStore = useProcessBuilderStore()
+
+// Get validation issues for this node
+const validationIssues = computed(() => {
+  return processStore.getNodeValidation(props.id)
+})
+
 // Computed properties for node display
 const nodeLabel = computed(() => {
   return props.label || (props.data && props.data.label) || "Script";
@@ -100,6 +110,12 @@ const onClick = () => {
       :isValidConnection="() => true"
     />
 
+    <!-- Validation Indicator -->
+    <ValidationIndicator 
+      :node-id="id" 
+      :validation-issues="validationIssues"
+    />
+
     <div class="custom-node-content">
       <div class="flex items-center mb-1">
         <div class="custom-node-icon">
diff --git a/composables/useNodeValidation.js b/composables/useNodeValidation.js
new file mode 100644
index 0000000..0db2fc9
--- /dev/null
+++ b/composables/useNodeValidation.js
@@ -0,0 +1,589 @@
+import { ref, computed, watch } from 'vue'
+
+/**
+ * Node Validation Composable
+ * Provides comprehensive validation for process flow nodes and overall process structure
+ */
+export function useNodeValidation() {
+  // Validation state
+  const validationResults = ref(new Map())
+  const isValidating = ref(false)
+  const lastValidationTime = ref(null)
+
+  // Validation configuration
+  const validationConfig = ref({
+    processStructure: {
+      requireStartNode: true,
+      requireEndNode: true,
+      allowMultipleStarts: false
+    },
+    nodeConfiguration: {
+      validateFormSelection: true,
+      validateApiUrls: true,
+      validateGatewayPaths: true,
+      validateScriptContent: true,
+      validateNotificationContent: true
+    },
+    flowLogic: {
+      checkReachability: true,
+      checkDeadEnds: true
+    }
+  })
+
+  // Validation severity levels
+  const SEVERITY = {
+    ERROR: 'error',
+    WARNING: 'warning',
+    INFO: 'info'
+  }
+
+  /**
+   * Validate individual node configuration
+   */
+  const validateNode = (node) => {
+    const issues = []
+    
+    if (!node || !node.type) {
+      issues.push({
+        type: 'configuration',
+        severity: SEVERITY.ERROR,
+        message: 'Node is missing or has no type',
+        nodeId: node?.id || 'unknown'
+      })
+      return issues
+    }
+
+    // Validate based on node type
+    switch (node.type) {
+      case 'form':
+        validateFormNode(node, issues)
+        break
+      case 'api':
+        validateApiNode(node, issues)
+        break
+      case 'gateway':
+        validateGatewayNode(node, issues)
+        break
+      case 'script':
+        validateScriptNode(node, issues)
+        break
+      case 'notification':
+        validateNotificationNode(node, issues)
+        break
+      case 'businessRule':
+        validateBusinessRuleNode(node, issues)
+        break
+      case 'html':
+        validateHtmlNode(node, issues)
+        break
+      case 'subprocess':
+        validateSubprocessNode(node, issues)
+        break
+      case 'start':
+      case 'end':
+        // Start and end nodes have minimal validation requirements
+        validateBasicNode(node, issues)
+        break
+    }
+
+    return issues
+  }
+
+  /**
+   * Validate form node configuration
+   */
+  const validateFormNode = (node, issues) => {
+    if (validationConfig.value.nodeConfiguration.validateFormSelection) {
+      if (!node.data?.formId) {
+        issues.push({
+          type: 'configuration',
+          severity: SEVERITY.WARNING,
+          message: 'Form node has no form selected',
+          nodeId: node.id,
+          recommendation: 'Select a form for this node to collect user input'
+        })
+      }
+
+      if (!node.data?.formName) {
+        issues.push({
+          type: 'configuration',
+          severity: SEVERITY.INFO,
+          message: 'Form node has no display name',
+          nodeId: node.id,
+          recommendation: 'Add a display name for better process readability'
+        })
+      }
+    }
+  }
+
+  /**
+   * Validate API node configuration
+   */
+  const validateApiNode = (node, issues) => {
+    if (validationConfig.value.nodeConfiguration.validateApiUrls) {
+      if (!node.data?.apiUrl || node.data.apiUrl.trim() === '') {
+        issues.push({
+          type: 'configuration',
+          severity: SEVERITY.ERROR,
+          message: 'API node has no URL configured',
+          nodeId: node.id,
+          recommendation: 'Configure the API endpoint URL'
+        })
+      }
+
+      if (!node.data?.apiMethod) {
+        issues.push({
+          type: 'configuration',
+          severity: SEVERITY.WARNING,
+          message: 'API node has no HTTP method specified',
+          nodeId: node.id,
+          recommendation: 'Specify the HTTP method (GET, POST, etc.)'
+        })
+      }
+
+      // Validate URL format if present
+      if (node.data?.apiUrl) {
+        try {
+          new URL(node.data.apiUrl)
+        } catch {
+          issues.push({
+            type: 'configuration',
+            severity: SEVERITY.ERROR,
+            message: 'API node has invalid URL format',
+            nodeId: node.id,
+            recommendation: 'Ensure the URL is properly formatted (e.g., https://example.com/api)'
+          })
+        }
+      }
+    }
+  }
+
+  /**
+   * Validate gateway node configuration
+   */
+  const validateGatewayNode = (node, issues) => {
+    if (validationConfig.value.nodeConfiguration.validateGatewayPaths) {
+      const conditions = node.data?.conditions || []
+      
+      if (conditions.length === 0) {
+        issues.push({
+          type: 'configuration',
+          severity: SEVERITY.WARNING,
+          message: 'Gateway node has no conditions defined',
+          nodeId: node.id,
+          recommendation: 'Add conditions to control process flow branching'
+        })
+      }
+
+      // Check for incomplete conditions
+      conditions.forEach((condition, index) => {
+        if (!condition.variable || !condition.operator || condition.value === undefined) {
+          issues.push({
+            type: 'configuration',
+            severity: SEVERITY.WARNING,
+            message: `Gateway condition ${index + 1} is incomplete`,
+            nodeId: node.id,
+            recommendation: 'Complete all condition fields (variable, operator, value)'
+          })
+        }
+      })
+    }
+  }
+
+  /**
+   * Validate script node configuration
+   */
+  const validateScriptNode = (node, issues) => {
+    if (validationConfig.value.nodeConfiguration.validateScriptContent) {
+      if (!node.data?.code || node.data.code.trim() === '') {
+        issues.push({
+          type: 'configuration',
+          severity: SEVERITY.WARNING,
+          message: 'Script node has no code defined',
+          nodeId: node.id,
+          recommendation: 'Add JavaScript code to execute in this node'
+        })
+      }
+    }
+  }
+
+  /**
+   * Validate notification node configuration
+   */
+  const validateNotificationNode = (node, issues) => {
+    if (validationConfig.value.nodeConfiguration.validateNotificationContent) {
+      if (!node.data?.content || node.data.content.trim() === '') {
+        issues.push({
+          type: 'configuration',
+          severity: SEVERITY.WARNING,
+          message: 'Notification node has no content',
+          nodeId: node.id,
+          recommendation: 'Add message content for the notification'
+        })
+      }
+
+      if (!node.data?.notificationType) {
+        issues.push({
+          type: 'configuration',
+          severity: SEVERITY.WARNING,
+          message: 'Notification node has no type specified',
+          nodeId: node.id,
+          recommendation: 'Specify notification type (email, SMS, in-app)'
+        })
+      }
+    }
+  }
+
+  /**
+   * Validate business rule node configuration
+   */
+  const validateBusinessRuleNode = (node, issues) => {
+    const rules = node.data?.rules || []
+    
+    if (rules.length === 0) {
+      issues.push({
+        type: 'configuration',
+        severity: SEVERITY.WARNING,
+        message: 'Business rule node has no rules defined',
+        nodeId: node.id,
+        recommendation: 'Add business rules to evaluate conditions'
+      })
+    }
+
+    rules.forEach((rule, index) => {
+      if (!rule.variable || !rule.operator || rule.value === undefined) {
+        issues.push({
+          type: 'configuration',
+          severity: SEVERITY.WARNING,
+          message: `Business rule ${index + 1} is incomplete`,
+          nodeId: node.id,
+          recommendation: 'Complete all rule fields (variable, operator, value)'
+        })
+      }
+    })
+  }
+
+  /**
+   * Validate HTML node configuration
+   */
+  const validateHtmlNode = (node, issues) => {
+    if (!node.data?.htmlContent || node.data.htmlContent.trim() === '') {
+      issues.push({
+        type: 'configuration',
+        severity: SEVERITY.WARNING,
+        message: 'HTML node has no content',
+        nodeId: node.id,
+        recommendation: 'Add HTML content to display in this node'
+      })
+    }
+  }
+
+  /**
+   * Validate subprocess node configuration
+   */
+  const validateSubprocessNode = (node, issues) => {
+    if (!node.data?.subprocessId) {
+      issues.push({
+        type: 'configuration',
+        severity: SEVERITY.WARNING,
+        message: 'Subprocess node has no subprocess selected',
+        nodeId: node.id,
+        recommendation: 'Select a subprocess to execute'
+      })
+    }
+  }
+
+  /**
+   * Validate basic node properties
+   */
+  const validateBasicNode = (node, issues) => {
+    if (!node.label || node.label.trim() === '') {
+      issues.push({
+        type: 'configuration',
+        severity: SEVERITY.INFO,
+        message: 'Node has no label',
+        nodeId: node.id,
+        recommendation: 'Add a descriptive label for better readability'
+      })
+    }
+  }
+
+  /**
+   * Validate overall process structure
+   */
+  const validateProcessStructure = (nodes, edges) => {
+    const issues = []
+    
+    // Check for start nodes
+    const startNodes = nodes.filter(node => node.type === 'start')
+    if (validationConfig.value.processStructure.requireStartNode) {
+      if (startNodes.length === 0) {
+        issues.push({
+          type: 'structure',
+          severity: SEVERITY.ERROR,
+          message: 'Process has no start node',
+          nodeId: null,
+          recommendation: 'Add a start node to define where the process begins'
+        })
+      } else if (startNodes.length > 1 && !validationConfig.value.processStructure.allowMultipleStarts) {
+        issues.push({
+          type: 'structure',
+          severity: SEVERITY.WARNING,
+          message: `Process has ${startNodes.length} start nodes`,
+          nodeId: null,
+          recommendation: 'Consider having only one start node for clearer process flow'
+        })
+      }
+    }
+
+    // Check for end nodes
+    const endNodes = nodes.filter(node => node.type === 'end')
+    if (validationConfig.value.processStructure.requireEndNode) {
+      if (endNodes.length === 0) {
+        issues.push({
+          type: 'structure',
+          severity: SEVERITY.WARNING,
+          message: 'Process has no end node',
+          nodeId: null,
+          recommendation: 'Add an end node to properly conclude the process'
+        })
+      }
+    }
+
+    return issues
+  }
+
+  /**
+   * Find nodes that are unreachable from start nodes
+   */
+  const findUnreachableNodes = (nodes, edges) => {
+    if (!validationConfig.value.flowLogic.checkReachability) return []
+
+    const startNodes = nodes.filter(n => n.type === 'start')
+    if (startNodes.length === 0) return []
+
+    const reachable = new Set()
+    const queue = [...startNodes.map(n => n.id)]
+
+    while (queue.length > 0) {
+      const nodeId = queue.shift()
+      if (reachable.has(nodeId)) continue
+
+      reachable.add(nodeId)
+      const outgoingEdges = edges.filter(e => e.source === nodeId)
+      queue.push(...outgoingEdges.map(e => e.target))
+    }
+
+    const unreachableNodes = nodes.filter(n => !reachable.has(n.id))
+    return unreachableNodes.map(node => ({
+      type: 'flow',
+      severity: SEVERITY.WARNING,
+      message: 'Node is unreachable from start',
+      nodeId: node.id,
+      recommendation: 'Connect this node to the main process flow or remove it'
+    }))
+  }
+
+  /**
+   * Find nodes that cannot reach any end node (dead ends)
+   */
+  const findDeadEnds = (nodes, edges) => {
+    if (!validationConfig.value.flowLogic.checkDeadEnds) return []
+
+    const endNodes = nodes.filter(n => n.type === 'end')
+    if (endNodes.length === 0) return []
+
+    const canReachEnd = new Set()
+    const queue = [...endNodes.map(n => n.id)]
+
+    while (queue.length > 0) {
+      const nodeId = queue.shift()
+      if (canReachEnd.has(nodeId)) continue
+
+      canReachEnd.add(nodeId)
+      const incomingEdges = edges.filter(e => e.target === nodeId)
+      queue.push(...incomingEdges.map(e => e.source))
+    }
+
+    const deadEndNodes = nodes.filter(n => n.type !== 'end' && !canReachEnd.has(n.id))
+    return deadEndNodes.map(node => ({
+      type: 'flow',
+      severity: SEVERITY.WARNING,
+      message: 'Node cannot reach any end node',
+      nodeId: node.id,
+      recommendation: 'Ensure this node has a path to an end node'
+    }))
+  }
+
+  /**
+   * Validate entire process (nodes + edges + structure)
+   */
+  const validateProcess = (nodes, edges) => {
+    isValidating.value = true
+    const allIssues = []
+
+    try {
+      // Clear previous results
+      validationResults.value.clear()
+
+      // Validate process structure
+      const structureIssues = validateProcessStructure(nodes, edges)
+      allIssues.push(...structureIssues)
+
+      // Validate individual nodes
+      nodes.forEach(node => {
+        const nodeIssues = validateNode(node)
+        allIssues.push(...nodeIssues)
+      })
+
+      // Validate flow logic
+      const unreachableIssues = findUnreachableNodes(nodes, edges)
+      const deadEndIssues = findDeadEnds(nodes, edges)
+      allIssues.push(...unreachableIssues)
+      allIssues.push(...deadEndIssues)
+
+      // Group issues by node
+      allIssues.forEach(issue => {
+        const nodeId = issue.nodeId || 'process'
+        if (!validationResults.value.has(nodeId)) {
+          validationResults.value.set(nodeId, [])
+        }
+        validationResults.value.get(nodeId).push(issue)
+      })
+
+      lastValidationTime.value = new Date()
+    } finally {
+      isValidating.value = false
+    }
+
+    return allIssues
+  }
+
+  /**
+   * Get validation results for a specific node
+   */
+  const getNodeValidation = (nodeId) => {
+    return validationResults.value.get(nodeId) || []
+  }
+
+  /**
+   * Get validation icon for a node
+   */
+  const getValidationIcon = (nodeId) => {
+    const issues = getNodeValidation(nodeId)
+    if (issues.length === 0) return null
+
+    const hasError = issues.some(issue => issue.severity === SEVERITY.ERROR)
+    const hasWarning = issues.some(issue => issue.severity === SEVERITY.WARNING)
+
+    if (hasError) return 'material-symbols:error'
+    if (hasWarning) return 'material-symbols:warning'
+    return 'material-symbols:info'
+  }
+
+  /**
+   * Get validation tooltip content for a node
+   */
+  const getValidationTooltip = (nodeId) => {
+    const issues = getNodeValidation(nodeId)
+    if (issues.length === 0) return null
+
+    const lines = issues.map(issue => `• ${issue.message}`)
+    return lines.join('\n')
+  }
+
+  /**
+   * Check if a node has validation issues
+   */
+  const hasValidationIssues = (nodeId) => {
+    return getNodeValidation(nodeId).length > 0
+  }
+
+  /**
+   * Get overall validation status
+   */
+  const overallValidationStatus = computed(() => {
+    let hasErrors = false
+    let hasWarnings = false
+
+    for (const issues of validationResults.value.values()) {
+      for (const issue of issues) {
+        if (issue.severity === SEVERITY.ERROR) hasErrors = true
+        if (issue.severity === SEVERITY.WARNING) hasWarnings = true
+      }
+    }
+
+    if (hasErrors) return 'error'
+    if (hasWarnings) return 'warning'
+    return 'valid'
+  })
+
+  /**
+   * Get validation summary statistics
+   */
+  const validationSummary = computed(() => {
+    let totalIssues = 0
+    let errors = 0
+    let warnings = 0
+    let infos = 0
+
+    for (const issues of validationResults.value.values()) {
+      totalIssues += issues.length
+      for (const issue of issues) {
+        switch (issue.severity) {
+          case SEVERITY.ERROR: errors++; break
+          case SEVERITY.WARNING: warnings++; break
+          case SEVERITY.INFO: infos++; break
+        }
+      }
+    }
+
+    return {
+      totalIssues,
+      errors,
+      warnings,
+      infos,
+      isValid: totalIssues === 0
+    }
+  })
+
+  /**
+   * Clear validation results
+   */
+  const clearValidation = () => {
+    validationResults.value.clear()
+    lastValidationTime.value = null
+  }
+
+  /**
+   * Update validation configuration
+   */
+  const updateValidationConfig = (newConfig) => {
+    validationConfig.value = { ...validationConfig.value, ...newConfig }
+  }
+
+  return {
+    // State
+    validationResults,
+    isValidating,
+    lastValidationTime,
+    validationConfig,
+
+    // Methods
+    validateNode,
+    validateProcess,
+    getNodeValidation,
+    getValidationIcon,
+    getValidationTooltip,
+    hasValidationIssues,
+    clearValidation,
+    updateValidationConfig,
+
+    // Computed
+    overallValidationStatus,
+    validationSummary,
+
+    // Constants
+    SEVERITY
+  }
+}
\ No newline at end of file
diff --git a/docs/node-validation-system-plan.md b/docs/node-validation-system-plan.md
new file mode 100644
index 0000000..e82ab36
--- /dev/null
+++ b/docs/node-validation-system-plan.md
@@ -0,0 +1,463 @@
+# Node Validation System Implementation Plan
+
+## Overview
+This document outlines the implementation plan for a comprehensive node validation system in the Vue Flow process builder. The system will provide visual feedback, quality-of-life improvements, and help users create robust business processes by validating process integrity and configuration completeness.
+
+## Problem Statement
+Users need guidance when building business processes to ensure:
+- Process flows are logically complete (have start/end nodes)
+- Nodes are properly configured (forms selected, APIs configured, etc.)
+- Variables are used correctly (no unused/undefined variables)
+- Gateway decision paths are complete
+- Process flows are reachable and don't have dead ends
+
+## System Architecture
+
+### Core Components
+1. **Node Validation Composable** (`composables/useNodeValidation.js`)
+2. **Validation Visual Indicators** (warning icons, tooltips)
+3. **Validation Store Integration** (with processBuilder store)
+4. **Real-time Validation Updates** (reactive validation on changes)
+
+### Integration Points
+- **ProcessFlowCanvas.vue**: Add validation visual layer
+- **Node Components**: Add validation state display
+- **Process Builder Store**: Integrate validation state
+- **Variable Store**: Hook variable usage validation
+
+## Implementation Phases
+
+### Phase 1: Foundation & Easy Wins 🟢 START HERE
+
+#### 1.1 Core Validation Infrastructure
+**Files to Create:**
+- `composables/useNodeValidation.js`
+- `types/validation.js` (TypeScript definitions if needed)
+
+**Key Features:**
+```javascript
+// Basic validation composable structure
+export function useNodeValidation() {
+  const validationResults = ref(new Map())
+  const isValidating = ref(false)
+  
+  // Core validation functions
+  const validateNode = (node) => { /* ... */ }
+  const validateProcess = (nodes, edges) => { /* ... */ }
+  const getValidationIcon = (nodeId) => { /* ... */ }
+  const getValidationTooltip = (nodeId) => { /* ... */ }
+  
+  return {
+    validationResults,
+    validateNode,
+    validateProcess,
+    // ... other methods
+  }
+}
+```
+
+#### 1.2 Basic Validation Rules (Quick Implementations)
+
+**1.2.1 Process Structure Validation**
+- ✅ **Missing Start Node**: Process must have exactly one start node
+- ✅ **Missing End Node**: Process must have at least one end node
+- ✅ **Multiple Start Nodes**: Warn if more than one start node exists
+
+**1.2.2 Node Configuration Validation**
+- ✅ **Form Node - No Form Selected**: `data.formId` is missing
+- ✅ **API Node - No URL**: `data.apiUrl` is empty/missing
+- ✅ **Gateway Node - Insufficient Paths**: Less than 2 outgoing edges
+- ✅ **Script Node - No Code**: `data.code` is empty
+- ✅ **Notification Node - No Content**: `data.content` is missing
+
+#### 1.3 Visual Indicator System
+
+**1.3.1 Node Warning Overlay**
+```vue
+<!-- Add to each node component -->
+<div v-if="hasValidationIssues" class="validation-warning">
+  <Icon name="material-symbols:warning" class="warning-icon" />
+</div>
+```
+
+**1.3.2 Hover Tooltips**
+```vue
+<!-- Tooltip component for validation messages -->
+<Tooltip v-if="validationMessage" :content="validationMessage">
+  <Icon name="material-symbols:info" />
+</Tooltip>
+```
+
+**1.3.3 Canvas Integration**
+- Add validation overlay to `ProcessFlowCanvas.vue`
+- Show process-level validation summary
+- Add validation toggle in canvas controls
+
+### Phase 2: Advanced Validations 🟡 MEDIUM PRIORITY
+
+#### 2.1 Variable Usage Analysis
+
+**2.1.1 Unused Variables Detection**
+```javascript
+// Check variables defined but never referenced
+const findUnusedVariables = (processVariables, nodes) => {
+  const usedVariables = new Set()
+  
+  // Scan all nodes for variable references
+  nodes.forEach(node => {
+    scanNodeForVariableUsage(node, usedVariables)
+  })
+  
+  // Find variables not in usedVariables set
+  return Object.keys(processVariables).filter(
+    varName => !usedVariables.has(varName)
+  )
+}
+```
+
+**2.1.2 Undefined Variables Detection**
+```javascript
+// Check nodes referencing non-existent variables
+const findUndefinedVariables = (processVariables, nodes) => {
+  const undefinedRefs = []
+  
+  nodes.forEach(node => {
+    const referencedVars = extractVariableReferences(node)
+    referencedVars.forEach(varName => {
+      if (!processVariables[varName]) {
+        undefinedRefs.push({ nodeId: node.id, variable: varName })
+      }
+    })
+  })
+  
+  return undefinedRefs
+}
+```
+
+#### 2.2 Flow Logic Validation
+
+**2.2.1 Reachability Analysis**
+```javascript
+// Find nodes unreachable from start
+const findUnreachableNodes = (nodes, edges) => {
+  const startNodes = nodes.filter(n => n.type === 'start')
+  if (startNodes.length === 0) return nodes.map(n => n.id)
+  
+  const reachable = new Set()
+  const queue = [...startNodes.map(n => n.id)]
+  
+  while (queue.length > 0) {
+    const nodeId = queue.shift()
+    if (reachable.has(nodeId)) continue
+    
+    reachable.add(nodeId)
+    const outgoingEdges = edges.filter(e => e.source === nodeId)
+    queue.push(...outgoingEdges.map(e => e.target))
+  }
+  
+  return nodes.filter(n => !reachable.has(n.id)).map(n => n.id)
+}
+```
+
+**2.2.2 Dead End Detection**
+```javascript
+// Find nodes with no path to end (except end nodes)
+const findDeadEnds = (nodes, edges) => {
+  const endNodes = nodes.filter(n => n.type === 'end')
+  if (endNodes.length === 0) return []
+  
+  // Work backwards from end nodes
+  const reachable = new Set()
+  const queue = [...endNodes.map(n => n.id)]
+  
+  while (queue.length > 0) {
+    const nodeId = queue.shift()
+    if (reachable.has(nodeId)) continue
+    
+    reachable.add(nodeId)
+    const incomingEdges = edges.filter(e => e.target === nodeId)
+    queue.push(...incomingEdges.map(e => e.source))
+  }
+  
+  return nodes
+    .filter(n => n.type !== 'end' && !reachable.has(n.id))
+    .map(n => n.id)
+}
+```
+
+#### 2.3 Gateway Completeness Validation
+
+**2.3.1 Condition Coverage**
+```javascript
+// Validate gateway has conditions for all paths
+const validateGatewayConditions = (gatewayNode, edges) => {
+  const outgoingEdges = edges.filter(e => e.source === gatewayNode.id)
+  const conditions = gatewayNode.data?.conditions || []
+  
+  const issues = []
+  
+  // Check if each outgoing edge has a corresponding condition
+  outgoingEdges.forEach(edge => {
+    const hasCondition = conditions.some(cond => 
+      cond.output === edge.label || edge.label === gatewayNode.data?.defaultPath
+    )
+    
+    if (!hasCondition) {
+      issues.push(`Edge to ${edge.target} has no condition defined`)
+    }
+  })
+  
+  return issues
+}
+```
+
+### Phase 3: Real-time Integration 🔵 ADVANCED
+
+#### 3.1 Reactive Validation System
+
+**3.1.1 Process Store Integration**
+```javascript
+// In processBuilder store
+watch(
+  () => [currentProcess.value?.nodes, currentProcess.value?.edges],
+  ([nodes, edges]) => {
+    if (nodes && edges) {
+      validateProcess(nodes, edges)
+    }
+  },
+  { deep: true }
+)
+```
+
+**3.1.2 Variable Store Integration**
+```javascript
+// In variableStore
+watch(
+  () => processVariables.value,
+  (variables) => {
+    validateVariableUsage(variables)
+  },
+  { deep: true }
+)
+```
+
+#### 3.2 Canvas UI Integration
+
+**3.2.1 Validation Summary Panel**
+```vue
+<Panel position="top-left" class="validation-panel">
+  <div class="validation-summary">
+    <h4>Process Validation</h4>
+    <div class="validation-status" :class="overallStatus">
+      <Icon :name="statusIcon" />
+      <span>{{ statusText }}</span>
+    </div>
+    
+    <div v-if="issues.length > 0" class="validation-issues">
+      <h5>Issues Found ({{ issues.length }})</h5>
+      <ul>
+        <li v-for="issue in issues" :key="issue.id" @click="focusIssue(issue)">
+          <Icon name="material-symbols:warning" />
+          {{ issue.message }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</Panel>
+```
+
+**3.2.2 Node Validation Indicators**
+```vue
+<!-- In each node component -->
+<template>
+  <div class="custom-node" :class="nodeClasses">
+    <!-- Existing node content -->
+    
+    <!-- Validation overlay -->
+    <div v-if="validationIssues.length > 0" class="validation-overlay">
+      <Tooltip :content="validationTooltip">
+        <Icon 
+          name="material-symbols:warning" 
+          class="validation-warning-icon"
+          :class="validationSeverity"
+        />
+      </Tooltip>
+    </div>
+  </div>
+</template>
+```
+
+### Phase 4: User Experience Enhancements 🟣 POLISH
+
+#### 4.1 Validation Settings & Configuration
+
+**4.1.1 Validation Rules Configuration**
+```javascript
+// User configurable validation rules
+const validationConfig = ref({
+  processStructure: {
+    requireStartNode: true,
+    requireEndNode: true,
+    allowMultipleStarts: false
+  },
+  nodeConfiguration: {
+    validateFormSelection: true,
+    validateApiUrls: true,
+    validateGatewayPaths: true
+  },
+  variableUsage: {
+    warnUnusedVariables: true,
+    errorUndefinedVariables: true
+  },
+  flowLogic: {
+    checkReachability: true,
+    checkDeadEnds: true
+  }
+})
+```
+
+#### 4.2 Validation Reporting & Export
+
+**4.2.1 Validation Report Generation**
+```javascript
+const generateValidationReport = () => {
+  return {
+    processId: currentProcess.value.id,
+    processName: currentProcess.value.name,
+    timestamp: new Date().toISOString(),
+    overallStatus: getOverallValidationStatus(),
+    summary: {
+      totalNodes: nodes.length,
+      validNodes: validNodes.length,
+      invalidNodes: invalidNodes.length,
+      warnings: warnings.length,
+      errors: errors.length
+    },
+    issues: validationResults.value,
+    recommendations: generateRecommendations()
+  }
+}
+```
+
+## Validation Rule Categories
+
+### 1. Critical Errors (🔴 Red - Blocks Process Execution)
+- No start node
+- Unreachable nodes
+- Undefined variable references
+- Invalid API configurations
+
+### 2. Warnings (🟡 Yellow - Should Fix)
+- No end node
+- Unused variables
+- Missing form selections
+- Incomplete gateway conditions
+
+### 3. Suggestions (🔵 Blue - Best Practices)
+- Process naming conventions
+- Variable naming standards
+- Node organization recommendations
+- Performance optimizations
+
+## Implementation Checklist
+
+### Phase 1 Tasks
+- [ ] Create `useNodeValidation` composable
+- [ ] Implement basic process structure validation
+- [ ] Add node configuration validation
+- [ ] Create validation visual indicators
+- [ ] Add warning icons to nodes
+- [ ] Implement hover tooltips
+- [ ] Integrate with ProcessFlowCanvas
+
+### Phase 2 Tasks
+- [ ] Variable usage analysis
+- [ ] Flow reachability validation
+- [ ] Dead end detection
+- [ ] Gateway condition validation
+- [ ] Advanced validation algorithms
+
+### Phase 3 Tasks
+- [ ] Real-time validation updates
+- [ ] Process store integration
+- [ ] Variable store integration
+- [ ] Canvas UI enhancements
+
+### Phase 4 Tasks
+- [ ] Validation settings configuration
+- [ ] Validation reporting system
+- [ ] Export functionality
+- [ ] Performance optimization
+
+## Technical Considerations
+
+### Performance
+- Use debounced validation to avoid excessive re-computation
+- Implement validation caching for unchanged nodes
+- Consider web workers for complex validation algorithms
+
+### User Experience
+- Non-blocking validation (warnings, not errors)
+- Progressive disclosure of validation details
+- Quick-fix suggestions where possible
+- Keyboard shortcuts for validation navigation
+
+### Extensibility
+- Plugin-based validation rule system
+- Custom validation rules API
+- Integration with external validation services
+
+## Testing Strategy
+
+### Unit Tests
+- Individual validation rule functions
+- Validation composable methods
+- Edge case handling
+
+### Integration Tests
+- Canvas integration validation
+- Store integration testing
+- Real-time update validation
+
+### User Testing
+- Validation feedback effectiveness
+- Performance impact assessment
+- User workflow integration
+
+## Success Metrics
+
+### Quantitative
+- Reduction in invalid process deployments
+- Decrease in process runtime errors
+- User validation engagement rate
+- Performance impact measurement
+
+### Qualitative
+- User feedback on validation helpfulness
+- Process builder confidence improvement
+- Reduced support requests for process issues
+
+## Future Enhancements
+
+### Advanced Features
+- AI-powered process optimization suggestions
+- Best practice recommendations
+- Validation rule learning from user patterns
+- Integration with process analytics
+
+### Enterprise Features
+- Organization-wide validation policies
+- Compliance validation rules
+- Audit trail for validation fixes
+- Team validation collaboration tools
+
+---
+
+## Getting Started
+
+1. **Start with Phase 1** - Basic validation infrastructure
+2. **Test thoroughly** - Ensure foundation is solid
+3. **Iterate quickly** - Get user feedback early
+4. **Build incrementally** - Add complexity gradually
+
+This document serves as the master plan for implementing a comprehensive node validation system that will significantly improve the user experience and process quality in the Vue Flow process builder.
\ No newline at end of file
diff --git a/stores/processBuilder.js b/stores/processBuilder.js
index 9ab84f0..8f0545e 100644
--- a/stores/processBuilder.js
+++ b/stores/processBuilder.js
@@ -12,7 +12,19 @@ export const useProcessBuilderStore = defineStore('processBuilder', {
     historyIndex: -1,
     unsavedChanges: false,
     lastChangeDescription: '',
-    isModifyingNodes: false // Flag to prevent interference during node operations
+    isModifyingNodes: false, // Flag to prevent interference during node operations
+    // Validation state
+    validationResults: new Map(),
+    validationSummary: {
+      totalIssues: 0,
+      errors: 0,
+      warnings: 0,
+      infos: 0,
+      isValid: true
+    },
+    overallValidationStatus: 'valid', // 'valid', 'warning', 'error'
+    lastValidationTime: null,
+    validationEnabled: true
   }),
 
   getters: {
@@ -58,6 +70,47 @@ export const useProcessBuilderStore = defineStore('processBuilder', {
      */
     canRedo: (state) => {
       return state.historyIndex < state.history.length - 1;
+    },
+
+    /**
+     * Get validation results for a specific node
+     */
+    getNodeValidation: (state) => (nodeId) => {
+      return state.validationResults.get(nodeId) || [];
+    },
+
+    /**
+     * Check if a node has validation issues
+     */
+    hasValidationIssues: (state) => (nodeId) => {
+      const issues = state.validationResults.get(nodeId);
+      return issues && issues.length > 0;
+    },
+
+    /**
+     * Get validation icon for a node
+     */
+    getValidationIcon: (state) => (nodeId) => {
+      const issues = state.validationResults.get(nodeId);
+      if (!issues || issues.length === 0) return null;
+
+      const hasError = issues.some(issue => issue.severity === 'error');
+      const hasWarning = issues.some(issue => issue.severity === 'warning');
+
+      if (hasError) return 'material-symbols:error';
+      if (hasWarning) return 'material-symbols:warning';
+      return 'material-symbols:info';
+    },
+
+    /**
+     * Get validation tooltip for a node
+     */
+    getValidationTooltip: (state) => (nodeId) => {
+      const issues = state.validationResults.get(nodeId);
+      if (!issues || issues.length === 0) return null;
+
+      const lines = issues.map(issue => `• ${issue.message}`);
+      return lines.join('\n');
     }
   },
 
@@ -1350,6 +1403,52 @@ export const useProcessBuilderStore = defineStore('processBuilder', {
       console.log(`Successfully renamed variable from "${oldName}" to "${newName}"`);
       this.unsavedChanges = true;
       return true;
+    },
+
+    /**
+     * Update validation results
+     */
+    updateValidationResults(validationResults, validationSummary, overallStatus) {
+      this.validationResults = new Map(validationResults);
+      this.validationSummary = { ...validationSummary };
+      this.overallValidationStatus = overallStatus;
+      this.lastValidationTime = new Date();
+    },
+
+    /**
+     * Clear all validation results
+     */
+    clearValidationResults() {
+      this.validationResults.clear();
+      this.validationSummary = {
+        totalIssues: 0,
+        errors: 0,
+        warnings: 0,
+        infos: 0,
+        isValid: true
+      };
+      this.overallValidationStatus = 'valid';
+      this.lastValidationTime = null;
+    },
+
+    /**
+     * Toggle validation on/off
+     */
+    toggleValidation() {
+      this.validationEnabled = !this.validationEnabled;
+      if (!this.validationEnabled) {
+        this.clearValidationResults();
+      }
+    },
+
+    /**
+     * Set validation enabled state
+     */
+    setValidationEnabled(enabled) {
+      this.validationEnabled = enabled;
+      if (!enabled) {
+        this.clearValidationResults();
+      }
     }
   }
 }); 
\ No newline at end of file