[refactor] address PR review feedback from @DrJKL

- Replace hardcoded #0B8CE9 color with blue-100 class for consistency
- Replace magic number 56px with top-14 class for progress bar positioning
- Use storeToRefs() for better Pinia reactivity
- Reduce heavy commenting per maintainer preference

src/renderer/extensions/vueNodes/execution/useExecutionStateProvider.ts

@@ -1,3 +1,4 @@
+import { storeToRefs } from 'pinia'
 import { computed, provide } from 'vue'
 
 import {
@@ -16,14 +17,14 @@ import { useExecutionStore } from '@/stores/executionStore'
  */
 export const useExecutionStateProvider = () => {
   const executionStore = useExecutionStore()
+  const { executingNodeIds: storeExecutingNodeIds, nodeProgressStates } =
+    storeToRefs(executionStore)
 
   // Convert execution store data to the format expected by Vue nodes
   const executingNodeIds = computed(
-    () => new Set(executionStore.executingNodeIds.map(String))
+    () => new Set(storeExecutingNodeIds.value.map(String))
   )
 
-  const nodeProgressStates = computed(() => executionStore.nodeProgressStates)
-
   // Provide the execution state to all child Vue nodes
   provide(ExecutingNodeIdsKey, executingNodeIds)
   provide(NodeProgressStatesKey, nodeProgressStates)

src/renderer/extensions/vueNodes/execution/useNodeExecutionState.ts

@@ -16,64 +16,39 @@ import type { NodeProgressState } from '@/schemas/apiSchema'
  * @returns Object containing reactive execution state and progress
  */
 export const useNodeExecutionState = (nodeId: string) => {
-  // Inject execution state from parent GraphCanvas
   const executingNodeIds = inject(ExecutingNodeIdsKey, ref(new Set<string>()))
   const nodeProgressStates = inject(
     NodeProgressStatesKey,
     ref<Record<string, NodeProgressState>>({})
   )
 
-  // Computed execution state - only re-evaluates when this node's execution state changes
   const executing = computed(() => {
     return executingNodeIds.value.has(nodeId)
   })
 
-  // Computed progress state - returns progress percentage (0-1) or undefined
   const progress = computed(() => {
     const state = nodeProgressStates.value[nodeId]
     return state?.max > 0 ? state.value / state.max : undefined
   })
 
-  // Raw progress state for advanced use cases
   const progressState = computed(() => nodeProgressStates.value[nodeId])
 
-  // Convenience computed for progress display
   const progressPercentage = computed(() => {
     const prog = progress.value
     return prog !== undefined ? Math.round(prog * 100) : undefined
   })
 
-  // Execution state details
   const executionState = computed(() => {
     const state = progressState.value
     if (!state) return 'idle'
-    return state.state // 'pending' | 'running' | 'finished' | 'error'
+    return state.state
   })
 
   return {
-    /**
-     * Whether this node is currently executing
-     */
     executing,
-
-    /**
-     * Progress as a decimal (0-1) or undefined if no progress available
-     */
     progress,
-
-    /**
-     * Progress as a percentage (0-100) or undefined if no progress available
-     */
     progressPercentage,
-
-    /**
-     * Raw progress state object from execution store
-     */
     progressState,
-
-    /**
-     * Current execution state: 'idle' | 'pending' | 'running' | 'finished' | 'error'
-     */
     executionState
   }
 }