feat: enhance task persistence and implement centralized kanban board

app/components/FlowNodeRenderer.vue

@@ -18,6 +18,9 @@
       <div v-if="data.state" :class="stateBadgeClass">
         {{ stateLabel }}
       </div>
+      <div v-if="data.priority" :class="priorityBadgeClass">
+        {{ priorityLabel }}
+      </div>
     </div>
 
     <!-- Content preview for measurement -->
@@ -99,9 +102,15 @@ const nodeStyle = computed(() => {
   }
   
   if (props.data.state === 'completed') {
-    baseStyle.borderColor = '#10b981'
+    baseStyle.borderColor = '#10b981' // Green
   } else if (props.data.state === 'in_progress') {
-    baseStyle.borderColor = '#f59e0b'
+    baseStyle.borderColor = '#3b82f6' // Blue
+  } else if (props.data.state === 'review') {
+    baseStyle.borderColor = '#a855f7' // Purple
+  } else if (props.data.state === 'blocked') {
+    baseStyle.borderColor = '#ef4444' // Red
+  } else if (props.data.state === 'todo') {
+    baseStyle.borderColor = '#64748b' // Slate
   }
   
   return baseStyle
@@ -124,22 +133,44 @@ const nodeIcon = computed(() => {
 const nodeStateClass = computed(() => {
   const state = props.data.state
   if (state === 'completed') return 'border-emerald-600 bg-emerald-950/20'
-  if (state === 'in_progress') return 'border-yellow-600 bg-yellow-950/20'
+  if (state === 'in_progress') return 'border-blue-600 bg-blue-950/20'
+  if (state === 'review') return 'border-purple-600 bg-purple-950/20'
+  if (state === 'blocked') return 'border-red-600 bg-red-950/20'
+  if (state === 'todo') return 'border-slate-500 bg-slate-900/50'
   return ''
 })
 
 const stateBadgeClass = computed(() => {
   const state = props.data.state
   if (state === 'completed') return 'px-1.5 py-0.5 bg-emerald-800/50 text-emerald-300 rounded text-[10px] font-medium'
-  if (state === 'in_progress') return 'px-1.5 py-0.5 bg-yellow-800/50 text-yellow-300 rounded text-[10px] font-medium'
-  return 'px-1.5 py-0.5 bg-slate-700 text-slate-400 rounded text-[10px] font-medium'
+  if (state === 'in_progress') return 'px-1.5 py-0.5 bg-blue-800/50 text-blue-300 rounded text-[10px] font-medium'
+  if (state === 'review') return 'px-1.5 py-0.5 bg-purple-800/50 text-purple-300 rounded text-[10px] font-medium'
+  if (state === 'blocked') return 'px-1.5 py-0.5 bg-red-800/50 text-red-300 rounded text-[10px] font-medium'
+  return 'px-1.5 py-0.5 bg-slate-700 text-slate-300 rounded text-[10px] font-medium'
 })
 
 const stateLabel = computed(() => {
   const state = props.data.state
-  if (state === 'completed') return '✓'
-  if (state === 'in_progress') return '⟳'
-  return '○'
+  if (state === 'completed') return '✅ Done'
+  if (state === 'in_progress') return '⏳ In Progress'
+  if (state === 'review') return '👀 Review'
+  if (state === 'blocked') return '⛔ Blocked'
+  return '📋 To Do'
+})
+
+// Priority handling
+const priorityBadgeClass = computed(() => {
+  const prio = props.data.priority
+  if (prio === 'high') return 'px-1.5 py-0.5 bg-red-800/50 text-red-300 rounded text-[10px] font-bold'
+  if (prio === 'low') return 'px-1.5 py-0.5 bg-slate-800/50 text-slate-400 rounded text-[10px] font-medium'
+  return 'px-1.5 py-0.5 bg-blue-800/50 text-blue-300 rounded text-[10px] font-medium' // medium
+})
+
+const priorityLabel = computed(() => {
+  const prio = props.data.priority
+  if (prio === 'high') return '🔥 High'
+  if (prio === 'low') return '🧊 Low'
+  return '⚡ Med'
 })
 
 // Get node title from text content