Add progress bars on Vue Nodes (#5469)

* track execution progress in vue nodes

* add test

* remove pointless execution state test

The test was mocking everything including the provide/inject mechanism,
so it wasn't testing real behavior. The execution progress feature
works correctly as verified through manual testing.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* remove accidentally committed PR_TEMPLATE.md

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* [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

* fix: update LGraphNode test to mock useNodeExecutionState properly

The test was failing because it passed executing as a prop, but the component
uses the useNodeExecutionState composable. Added proper mock for the composable
to test the animate-pulse class application during execution.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>

tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.spec.ts

@@ -1,13 +1,14 @@
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
 import LGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
 import { useVueElementTracking } from '@/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking'
+import { useNodeExecutionState } from '@/renderer/extensions/vueNodes/execution/useNodeExecutionState'
 
 vi.mock(
   '@/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking',
@@ -42,6 +43,19 @@ vi.mock('@/renderer/extensions/vueNodes/lod/useLOD', () => ({
   LODLevel: { MINIMAL: 0 }
 }))
 
+vi.mock(
+  '@/renderer/extensions/vueNodes/execution/useNodeExecutionState',
+  () => ({
+    useNodeExecutionState: vi.fn(() => ({
+      executing: computed(() => false),
+      progress: computed(() => undefined),
+      progressPercentage: computed(() => undefined),
+      progressState: computed(() => undefined as any),
+      executionState: computed(() => 'idle' as const)
+    }))
+  })
+)
+
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
@@ -92,6 +106,14 @@ describe('LGraphNode', () => {
 
   beforeEach(() => {
     vi.clearAllMocks()
+    // Reset to default mock
+    vi.mocked(useNodeExecutionState).mockReturnValue({
+      executing: computed(() => false),
+      progress: computed(() => undefined),
+      progressPercentage: computed(() => undefined),
+      progressState: computed(() => undefined as any),
+      executionState: computed(() => 'idle' as const)
+    })
   })
 
   it('should call resize tracking composable with node ID', () => {
@@ -143,7 +165,16 @@ describe('LGraphNode', () => {
   })
 
   it('should apply executing animation when executing prop is true', () => {
-    const wrapper = mountLGraphNode({ nodeData: mockNodeData, executing: true })
+    // Mock the execution state to return executing: true
+    vi.mocked(useNodeExecutionState).mockReturnValue({
+      executing: computed(() => true),
+      progress: computed(() => undefined),
+      progressPercentage: computed(() => undefined),
+      progressState: computed(() => undefined as any),
+      executionState: computed(() => 'running' as const)
+    })
+
+    const wrapper = mountLGraphNode({ nodeData: mockNodeData })
 
     expect(wrapper.classes()).toContain('animate-pulse')
   })