[refactor] Reorganize Vue nodes to domain-driven design architecture (#5085)

* refactor: Reorganize Vue nodes system to domain-driven design architecture

Move Vue nodes code from scattered technical layers to domain-focused structure:

- Widget system → src/renderer/extensions/vueNodes/widgets/
- LOD optimization → src/renderer/extensions/vueNodes/lod/
- Layout logic → src/renderer/extensions/vueNodes/layout/
- Node components → src/renderer/extensions/vueNodes/components/
- Test structure mirrors source organization

Benefits:
- Clear domain boundaries instead of technical layers
- Everything Vue nodes related in renderer domain (not workbench)
- camelCase naming (vueNodes vs vue-nodes)
- Tests co-located with source domains
- All imports updated to new DDD structure

* fix: Skip spatial index performance test on CI to avoid flaky timing

Performance tests are inherently flaky on CI due to variable system
performance. This test should only run locally like the other
performance tests.

tests-ui/tests/renderer/extensions/vueNodes/lod/useLOD.test.ts

@@ -0,0 +1,270 @@
+import { describe, expect, it } from 'vitest'
+import { ref } from 'vue'
+
+import {
+  LODLevel,
+  LOD_THRESHOLDS,
+  supportsFeatureAtZoom,
+  useLOD
+} from '@/renderer/extensions/vueNodes/lod/useLOD'
+
+describe('useLOD', () => {
+  describe('LOD level detection', () => {
+    it('should return MINIMAL for zoom <= 0.4', () => {
+      const zoomRef = ref(0.4)
+      const { lodLevel } = useLOD(zoomRef)
+      expect(lodLevel.value).toBe(LODLevel.MINIMAL)
+
+      zoomRef.value = 0.2
+      expect(lodLevel.value).toBe(LODLevel.MINIMAL)
+
+      zoomRef.value = 0.1
+      expect(lodLevel.value).toBe(LODLevel.MINIMAL)
+    })
+
+    it('should return REDUCED for 0.4 < zoom <= 0.8', () => {
+      const zoomRef = ref(0.5)
+      const { lodLevel } = useLOD(zoomRef)
+      expect(lodLevel.value).toBe(LODLevel.REDUCED)
+
+      zoomRef.value = 0.6
+      expect(lodLevel.value).toBe(LODLevel.REDUCED)
+
+      zoomRef.value = 0.8
+      expect(lodLevel.value).toBe(LODLevel.REDUCED)
+    })
+
+    it('should return FULL for zoom > 0.8', () => {
+      const zoomRef = ref(0.9)
+      const { lodLevel } = useLOD(zoomRef)
+      expect(lodLevel.value).toBe(LODLevel.FULL)
+
+      zoomRef.value = 1.0
+      expect(lodLevel.value).toBe(LODLevel.FULL)
+
+      zoomRef.value = 2.5
+      expect(lodLevel.value).toBe(LODLevel.FULL)
+    })
+
+    it('should be reactive to zoom changes', () => {
+      const zoomRef = ref(0.2)
+      const { lodLevel } = useLOD(zoomRef)
+
+      expect(lodLevel.value).toBe(LODLevel.MINIMAL)
+
+      zoomRef.value = 0.6
+      expect(lodLevel.value).toBe(LODLevel.REDUCED)
+
+      zoomRef.value = 1.0
+      expect(lodLevel.value).toBe(LODLevel.FULL)
+    })
+  })
+
+  describe('rendering decisions', () => {
+    it('should disable all rendering for MINIMAL LOD', () => {
+      const zoomRef = ref(0.2)
+      const {
+        shouldRenderWidgets,
+        shouldRenderSlots,
+        shouldRenderContent,
+        shouldRenderSlotLabels,
+        shouldRenderWidgetLabels
+      } = useLOD(zoomRef)
+
+      expect(shouldRenderWidgets.value).toBe(false)
+      expect(shouldRenderSlots.value).toBe(false)
+      expect(shouldRenderContent.value).toBe(false)
+      expect(shouldRenderSlotLabels.value).toBe(false)
+      expect(shouldRenderWidgetLabels.value).toBe(false)
+    })
+
+    it('should enable widgets/slots but disable labels for REDUCED LOD', () => {
+      const zoomRef = ref(0.6)
+      const {
+        shouldRenderWidgets,
+        shouldRenderSlots,
+        shouldRenderContent,
+        shouldRenderSlotLabels,
+        shouldRenderWidgetLabels
+      } = useLOD(zoomRef)
+
+      expect(shouldRenderWidgets.value).toBe(true)
+      expect(shouldRenderSlots.value).toBe(true)
+      expect(shouldRenderContent.value).toBe(false)
+      expect(shouldRenderSlotLabels.value).toBe(false)
+      expect(shouldRenderWidgetLabels.value).toBe(false)
+    })
+
+    it('should enable all rendering for FULL LOD', () => {
+      const zoomRef = ref(1.0)
+      const {
+        shouldRenderWidgets,
+        shouldRenderSlots,
+        shouldRenderContent,
+        shouldRenderSlotLabels,
+        shouldRenderWidgetLabels
+      } = useLOD(zoomRef)
+
+      expect(shouldRenderWidgets.value).toBe(true)
+      expect(shouldRenderSlots.value).toBe(true)
+      expect(shouldRenderContent.value).toBe(true)
+      expect(shouldRenderSlotLabels.value).toBe(true)
+      expect(shouldRenderWidgetLabels.value).toBe(true)
+    })
+  })
+
+  describe('CSS classes', () => {
+    it('should return correct CSS class for each LOD level', () => {
+      const zoomRef = ref(0.2)
+      const { lodCssClass } = useLOD(zoomRef)
+
+      expect(lodCssClass.value).toBe('lg-node--lod-minimal')
+
+      zoomRef.value = 0.6
+      expect(lodCssClass.value).toBe('lg-node--lod-reduced')
+
+      zoomRef.value = 1.0
+      expect(lodCssClass.value).toBe('lg-node--lod-full')
+    })
+  })
+
+  describe('essential widgets filtering', () => {
+    it('should return all widgets for FULL LOD', () => {
+      const zoomRef = ref(1.0)
+      const { getEssentialWidgets } = useLOD(zoomRef)
+
+      const widgets = [
+        { type: 'combo' },
+        { type: 'text' },
+        { type: 'button' },
+        { type: 'slider' }
+      ]
+
+      expect(getEssentialWidgets(widgets)).toEqual(widgets)
+    })
+
+    it('should return empty array for MINIMAL LOD', () => {
+      const zoomRef = ref(0.2)
+      const { getEssentialWidgets } = useLOD(zoomRef)
+
+      const widgets = [{ type: 'combo' }, { type: 'text' }, { type: 'button' }]
+
+      expect(getEssentialWidgets(widgets)).toEqual([])
+    })
+
+    it('should filter to essential types for REDUCED LOD', () => {
+      const zoomRef = ref(0.6)
+      const { getEssentialWidgets } = useLOD(zoomRef)
+
+      const widgets = [
+        { type: 'combo' },
+        { type: 'text' },
+        { type: 'button' },
+        { type: 'slider' },
+        { type: 'toggle' },
+        { type: 'number' }
+      ]
+
+      const essential = getEssentialWidgets(widgets)
+      expect(essential).toHaveLength(4)
+      expect(essential.map((w: any) => w.type)).toEqual([
+        'combo',
+        'slider',
+        'toggle',
+        'number'
+      ])
+    })
+
+    it('should handle case-insensitive widget types', () => {
+      const zoomRef = ref(0.6)
+      const { getEssentialWidgets } = useLOD(zoomRef)
+
+      const widgets = [
+        { type: 'COMBO' },
+        { type: 'Select' },
+        { type: 'TOGGLE' }
+      ]
+
+      const essential = getEssentialWidgets(widgets)
+      expect(essential).toHaveLength(3)
+    })
+
+    it('should handle widgets with undefined or missing type', () => {
+      const zoomRef = ref(0.6)
+      const { getEssentialWidgets } = useLOD(zoomRef)
+
+      const widgets = [
+        { type: 'combo' },
+        { type: undefined },
+        {},
+        { type: 'slider' }
+      ]
+
+      const essential = getEssentialWidgets(widgets)
+      expect(essential).toHaveLength(2)
+      expect(essential.map((w: any) => w.type)).toEqual(['combo', 'slider'])
+    })
+  })
+
+  describe('performance metrics', () => {
+    it('should provide debug metrics', () => {
+      const zoomRef = ref(0.6)
+      const { lodMetrics } = useLOD(zoomRef)
+
+      expect(lodMetrics.value).toEqual({
+        level: LODLevel.REDUCED,
+        zoom: 0.6,
+        widgetCount: 'full',
+        slotCount: 'full'
+      })
+    })
+
+    it('should update metrics when zoom changes', () => {
+      const zoomRef = ref(0.2)
+      const { lodMetrics } = useLOD(zoomRef)
+
+      expect(lodMetrics.value.level).toBe(LODLevel.MINIMAL)
+      expect(lodMetrics.value.widgetCount).toBe('none')
+      expect(lodMetrics.value.slotCount).toBe('none')
+
+      zoomRef.value = 1.0
+      expect(lodMetrics.value.level).toBe(LODLevel.FULL)
+      expect(lodMetrics.value.widgetCount).toBe('full')
+      expect(lodMetrics.value.slotCount).toBe('full')
+    })
+  })
+})
+
+describe('LOD_THRESHOLDS', () => {
+  it('should export correct threshold values', () => {
+    expect(LOD_THRESHOLDS.FULL_THRESHOLD).toBe(0.8)
+    expect(LOD_THRESHOLDS.REDUCED_THRESHOLD).toBe(0.4)
+    expect(LOD_THRESHOLDS.MINIMAL_THRESHOLD).toBe(0.0)
+  })
+})
+
+describe('supportsFeatureAtZoom', () => {
+  it('should return correct feature support for different zoom levels', () => {
+    expect(supportsFeatureAtZoom(1.0, 'renderWidgets')).toBe(true)
+    expect(supportsFeatureAtZoom(1.0, 'renderSlots')).toBe(true)
+    expect(supportsFeatureAtZoom(1.0, 'renderContent')).toBe(true)
+
+    expect(supportsFeatureAtZoom(0.6, 'renderWidgets')).toBe(true)
+    expect(supportsFeatureAtZoom(0.6, 'renderSlots')).toBe(true)
+    expect(supportsFeatureAtZoom(0.6, 'renderContent')).toBe(false)
+
+    expect(supportsFeatureAtZoom(0.2, 'renderWidgets')).toBe(false)
+    expect(supportsFeatureAtZoom(0.2, 'renderSlots')).toBe(false)
+    expect(supportsFeatureAtZoom(0.2, 'renderContent')).toBe(false)
+  })
+
+  it('should handle threshold boundary values correctly', () => {
+    expect(supportsFeatureAtZoom(0.8, 'renderWidgets')).toBe(true)
+    expect(supportsFeatureAtZoom(0.8, 'renderContent')).toBe(false)
+
+    expect(supportsFeatureAtZoom(0.81, 'renderContent')).toBe(true)
+
+    expect(supportsFeatureAtZoom(0.4, 'renderWidgets')).toBe(false)
+    expect(supportsFeatureAtZoom(0.41, 'renderWidgets')).toBe(true)
+  })
+})

tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts

@@ -0,0 +1,39 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useComboWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useComboWidget'
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+
+vi.mock('@/scripts/widgets', () => ({
+  addValueControlWidgets: vi.fn()
+}))
+
+describe('useComboWidget', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should handle undefined spec', () => {
+    const constructor = useComboWidget()
+    const mockNode = {
+      addWidget: vi.fn().mockReturnValue({ options: {} } as any)
+    }
+
+    const inputSpec: InputSpec = {
+      type: 'COMBO',
+      name: 'inputName'
+    }
+
+    const widget = constructor(mockNode as any, inputSpec)
+
+    expect(mockNode.addWidget).toHaveBeenCalledWith(
+      'combo',
+      'inputName',
+      undefined, // default value
+      expect.any(Function), // callback
+      expect.objectContaining({
+        values: []
+      })
+    )
+    expect(widget).toEqual({ options: {} })
+  })
+})

tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.test.ts

@@ -0,0 +1,80 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { _for_testing } from '@/renderer/extensions/vueNodes/widgets/composables/useFloatWidget'
+
+vi.mock('@/scripts/widgets', () => ({
+  addValueControlWidgets: vi.fn()
+}))
+
+vi.mock('@/stores/settingStore', () => ({
+  useSettingStore: () => ({
+    settings: {}
+  })
+}))
+
+const { onFloatValueChange } = _for_testing
+
+describe('useFloatWidget', () => {
+  describe('onFloatValueChange', () => {
+    let widget: any
+
+    beforeEach(() => {
+      // Reset the widget before each test
+      widget = {
+        options: {},
+        value: 0
+      }
+    })
+
+    it('should not round values when round option is not set', () => {
+      widget.options.round = undefined
+      onFloatValueChange.call(widget, 5.7)
+      expect(widget.value).toBe(5.7)
+    })
+
+    it('should round values based on round option', () => {
+      widget.options.round = 0.5
+      onFloatValueChange.call(widget, 5.7)
+      expect(widget.value).toBe(5.5)
+
+      widget.options.round = 0.1
+      onFloatValueChange.call(widget, 5.74)
+      expect(widget.value).toBe(5.7)
+
+      widget.options.round = 1
+      onFloatValueChange.call(widget, 5.7)
+      expect(widget.value).toBe(6)
+    })
+
+    it('should respect min and max constraints after rounding', () => {
+      widget.options.round = 0.5
+      widget.options.min = 1
+      widget.options.max = 5
+
+      // Should round to 1 and respect min
+      onFloatValueChange.call(widget, 0.7)
+      expect(widget.value).toBe(1)
+
+      // Should round to 5.5 but be clamped to max of 5
+      onFloatValueChange.call(widget, 5.3)
+      expect(widget.value).toBe(5)
+
+      // Should round to 3.5 and be within bounds
+      onFloatValueChange.call(widget, 3.6)
+      expect(widget.value).toBe(3.5)
+    })
+
+    it('should handle Number.EPSILON for precision issues', () => {
+      widget.options.round = 0.1
+
+      // Without Number.EPSILON, 1.35 / 0.1 = 13.499999999999998
+      // which would round to 13 * 0.1 = 1.3 instead of 1.4
+      onFloatValueChange.call(widget, 1.35)
+      expect(widget.value).toBeCloseTo(1.4, 10)
+
+      // Test another edge case
+      onFloatValueChange.call(widget, 2.95)
+      expect(widget.value).toBeCloseTo(3, 10)
+    })
+  })
+})

tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useIntWidget.test.ts

@@ -0,0 +1,72 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { _for_testing } from '@/renderer/extensions/vueNodes/widgets/composables/useIntWidget'
+
+vi.mock('@/scripts/widgets', () => ({
+  addValueControlWidgets: vi.fn()
+}))
+
+vi.mock('@/stores/settingStore', () => ({
+  useSettingStore: () => ({
+    settings: {}
+  })
+}))
+
+const { onValueChange } = _for_testing
+
+describe('useIntWidget', () => {
+  describe('onValueChange', () => {
+    let widget: any
+
+    beforeEach(() => {
+      // Reset the widget before each test
+      widget = {
+        options: {},
+        value: 0
+      }
+    })
+
+    it('should round values based on step size', () => {
+      widget.options.step2 = 0.1
+      onValueChange.call(widget, 5.7)
+      expect(widget.value).toBe(5.7)
+
+      widget.options.step2 = 0.5
+      onValueChange.call(widget, 7.3)
+      expect(widget.value).toBe(7.5)
+
+      widget.options.step2 = 1
+      onValueChange.call(widget, 23.4)
+      expect(widget.value).toBe(23)
+    })
+
+    it('should handle undefined step by using default of 1', () => {
+      widget.options.step2 = undefined
+      onValueChange.call(widget, 3.7)
+      expect(widget.value).toBe(4)
+    })
+
+    it('should account for min value offset', () => {
+      widget.options.step2 = 2
+      widget.options.min = 1
+      // 2 valid values between 1.6 are 1 and 3
+      // 1.6 is closer to 1, so it should round to 1
+      onValueChange.call(widget, 1.6)
+      expect(widget.value).toBe(1)
+    })
+
+    it('should handle undefined min by using default of 0', () => {
+      widget.options.step2 = 2
+      widget.options.min = undefined
+      onValueChange.call(widget, 5.7)
+      expect(widget.value).toBe(6)
+    })
+
+    it('should handle NaN shift value', () => {
+      widget.options.step2 = 0
+      widget.options.min = 1
+      onValueChange.call(widget, 5.7)
+      expect(widget.value).toBe(6)
+    })
+  })
+})

tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useManagerQueue.test.ts

@@ -0,0 +1,329 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import { useManagerQueue } from '@/composables/useManagerQueue'
+import { api } from '@/scripts/api'
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn()
+  }
+}))
+
+describe('useManagerQueue', () => {
+  const createMockTask = (result: any = 'result') => ({
+    task: vi.fn().mockResolvedValue(result),
+    onComplete: vi.fn()
+  })
+
+  const createQueueWithMockTask = () => {
+    const queue = useManagerQueue()
+    const mockTask = createMockTask()
+    queue.enqueueTask(mockTask)
+    return { queue, mockTask }
+  }
+
+  const getEventListenerCallback = () =>
+    vi.mocked(api.addEventListener).mock.calls[0][1]
+
+  const simulateServerStatus = async (status: 'done' | 'in_progress') => {
+    const event = new CustomEvent('cm-queue-status', {
+      detail: { status }
+    })
+    getEventListenerCallback()!(event as any)
+    await nextTick()
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('initialization', () => {
+    it('should initialize with empty queue and DONE status', () => {
+      const queue = useManagerQueue()
+
+      expect(queue.queueLength.value).toBe(0)
+      expect(queue.statusMessage.value).toBe('done')
+      expect(queue.allTasksDone.value).toBe(true)
+    })
+  })
+
+  describe('queue management', () => {
+    it('should add tasks to the queue', () => {
+      const queue = useManagerQueue()
+      const mockTask = createMockTask()
+
+      queue.enqueueTask(mockTask)
+
+      expect(queue.queueLength.value).toBe(1)
+      expect(queue.allTasksDone.value).toBe(false)
+    })
+
+    it('should clear the queue when clearQueue is called', () => {
+      const queue = useManagerQueue()
+
+      // Add some tasks
+      queue.enqueueTask(createMockTask())
+      queue.enqueueTask(createMockTask())
+
+      expect(queue.queueLength.value).toBe(2)
+
+      // Clear the queue
+      queue.clearQueue()
+
+      expect(queue.queueLength.value).toBe(0)
+      expect(queue.allTasksDone.value).toBe(true)
+    })
+  })
+
+  describe('server status handling', () => {
+    it('should update server status when receiving websocket events', async () => {
+      const queue = useManagerQueue()
+
+      await simulateServerStatus('in_progress')
+
+      expect(queue.statusMessage.value).toBe('in_progress')
+      expect(queue.allTasksDone.value).toBe(false)
+    })
+
+    it('should handle invalid status values gracefully', async () => {
+      const queue = useManagerQueue()
+
+      // Simulate an invalid status
+      const event = new CustomEvent('cm-queue-status', {
+        detail: null as any
+      })
+
+      getEventListenerCallback()!(event)
+      await nextTick()
+
+      // Should maintain the default status
+      expect(queue.statusMessage.value).toBe('done')
+    })
+
+    it('should handle missing status property gracefully', async () => {
+      const queue = useManagerQueue()
+
+      // Simulate a detail object without status property
+      const event = new CustomEvent('cm-queue-status', {
+        detail: { someOtherProperty: 'value' } as any
+      })
+
+      getEventListenerCallback()!(event)
+      await nextTick()
+
+      // Should maintain the default status
+      expect(queue.statusMessage.value).toBe('done')
+    })
+  })
+
+  describe('task execution', () => {
+    it('should start the next task when server is idle and queue has items', async () => {
+      const { queue, mockTask } = createQueueWithMockTask()
+
+      await simulateServerStatus('done')
+
+      // Task should have been started
+      expect(mockTask.task).toHaveBeenCalled()
+      expect(queue.queueLength.value).toBe(0)
+    })
+
+    it('should execute onComplete callback when task completes and server becomes idle', async () => {
+      const { mockTask } = createQueueWithMockTask()
+
+      // Start the task
+      await simulateServerStatus('done')
+      expect(mockTask.task).toHaveBeenCalled()
+
+      // Simulate task completion
+      await mockTask.task.mock.results[0].value
+
+      // Simulate server cycle (in_progress -> done)
+      await simulateServerStatus('in_progress')
+      expect(mockTask.onComplete).not.toHaveBeenCalled()
+
+      await simulateServerStatus('done')
+      expect(mockTask.onComplete).toHaveBeenCalled()
+    })
+
+    it('should handle tasks without onComplete callback', async () => {
+      const queue = useManagerQueue()
+      const mockTask = { task: vi.fn().mockResolvedValue('result') }
+
+      queue.enqueueTask(mockTask)
+
+      // Start the task
+      await simulateServerStatus('done')
+      expect(mockTask.task).toHaveBeenCalled()
+
+      // Simulate task completion
+      await mockTask.task.mock.results[0].value
+
+      // Simulate server cycle
+      await simulateServerStatus('in_progress')
+      await simulateServerStatus('done')
+
+      // Should not throw errors even without onComplete
+      expect(queue.allTasksDone.value).toBe(true)
+    })
+
+    it('should process multiple tasks in sequence', async () => {
+      const queue = useManagerQueue()
+      const mockTask1 = createMockTask('result1')
+      const mockTask2 = createMockTask('result2')
+
+      // Add tasks to the queue
+      queue.enqueueTask(mockTask1)
+      queue.enqueueTask(mockTask2)
+      expect(queue.queueLength.value).toBe(2)
+
+      // Process first task
+      await simulateServerStatus('done')
+      expect(mockTask1.task).toHaveBeenCalled()
+      expect(queue.queueLength.value).toBe(1)
+
+      // Complete first task
+      await mockTask1.task.mock.results[0].value
+      await simulateServerStatus('in_progress')
+      await simulateServerStatus('done')
+      expect(mockTask1.onComplete).toHaveBeenCalled()
+
+      // Process second task
+      expect(mockTask2.task).toHaveBeenCalled()
+      expect(queue.queueLength.value).toBe(0)
+
+      // Complete second task
+      await mockTask2.task.mock.results[0].value
+      await simulateServerStatus('in_progress')
+      await simulateServerStatus('done')
+      expect(mockTask2.onComplete).toHaveBeenCalled()
+
+      // Queue should be empty and all tasks done
+      expect(queue.queueLength.value).toBe(0)
+      expect(queue.allTasksDone.value).toBe(true)
+    })
+
+    it('should handle task that returns rejected promise', async () => {
+      const queue = useManagerQueue()
+      const mockTask = {
+        task: vi.fn().mockRejectedValue(new Error('Task failed')),
+        onComplete: vi.fn()
+      }
+
+      queue.enqueueTask(mockTask)
+
+      // Start the task
+      await simulateServerStatus('done')
+      expect(mockTask.task).toHaveBeenCalled()
+
+      // Let the promise rejection happen
+      try {
+        await mockTask.task()
+      } catch (e) {
+        // Ignore the error
+      }
+
+      // Simulate server cycle
+      await simulateServerStatus('in_progress')
+      await simulateServerStatus('done')
+
+      // onComplete should still be called for failed tasks
+      expect(mockTask.onComplete).toHaveBeenCalled()
+    })
+
+    it('should handle multiple multiple tasks enqueued at once while server busy', async () => {
+      const queue = useManagerQueue()
+      const mockTask1 = createMockTask()
+      const mockTask2 = createMockTask()
+      const mockTask3 = createMockTask()
+
+      // Three tasks enqueued at once
+      await simulateServerStatus('in_progress')
+      await Promise.all([
+        queue.enqueueTask(mockTask1),
+        queue.enqueueTask(mockTask2),
+        queue.enqueueTask(mockTask3)
+      ])
+
+      // Task 1
+      await simulateServerStatus('done')
+      expect(mockTask1.task).toHaveBeenCalled()
+
+      // Verify state of onComplete callbacks
+      expect(mockTask1.onComplete).toHaveBeenCalled()
+      expect(mockTask2.onComplete).not.toHaveBeenCalled()
+      expect(mockTask3.onComplete).not.toHaveBeenCalled()
+
+      // Verify state of queue
+      expect(queue.queueLength.value).toBe(2)
+      expect(queue.allTasksDone.value).toBe(false)
+
+      // Task 2
+      await simulateServerStatus('in_progress')
+      await simulateServerStatus('done')
+      expect(mockTask2.task).toHaveBeenCalled()
+
+      // Verify state of onComplete callbacks
+      expect(mockTask2.onComplete).toHaveBeenCalled()
+      expect(mockTask3.onComplete).not.toHaveBeenCalled()
+
+      // Verify state of queue
+      expect(queue.queueLength.value).toBe(1)
+      expect(queue.allTasksDone.value).toBe(false)
+
+      // Task 3
+      await simulateServerStatus('in_progress')
+      await simulateServerStatus('done')
+
+      // Verify state of onComplete callbacks
+      expect(mockTask3.task).toHaveBeenCalled()
+      expect(mockTask3.onComplete).toHaveBeenCalled()
+
+      // Verify state of queue
+      expect(queue.queueLength.value).toBe(0)
+      expect(queue.allTasksDone.value).toBe(true)
+    })
+
+    it('should handle adding tasks while processing is in progress', async () => {
+      const queue = useManagerQueue()
+      const mockTask1 = createMockTask()
+      const mockTask2 = createMockTask()
+
+      // Add first task and start processing
+      queue.enqueueTask(mockTask1)
+      await simulateServerStatus('done')
+      expect(mockTask1.task).toHaveBeenCalled()
+
+      // Add second task while first is processing
+      queue.enqueueTask(mockTask2)
+      expect(queue.queueLength.value).toBe(1)
+
+      // Complete first task
+      await mockTask1.task.mock.results[0].value
+      await simulateServerStatus('in_progress')
+      await simulateServerStatus('done')
+
+      // Second task should now be processed
+      expect(mockTask2.task).toHaveBeenCalled()
+    })
+
+    it('should handle server status changes without tasks in queue', async () => {
+      const queue = useManagerQueue()
+
+      // Cycle server status without any tasks
+      await simulateServerStatus('in_progress')
+      await simulateServerStatus('done')
+      await simulateServerStatus('in_progress')
+      await simulateServerStatus('done')
+
+      // Should not cause any errors
+      expect(queue.allTasksDone.value).toBe(true)
+    })
+  })
+})

tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts

@@ -0,0 +1,684 @@
+import axios from 'axios'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useRemoteWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget'
+import { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
+
+vi.mock('axios', () => {
+  return {
+    default: {
+      get: vi.fn()
+    }
+  }
+})
+
+vi.mock('@/i18n', () => ({
+  i18n: {
+    global: {
+      t: vi.fn((key) => key)
+    }
+  }
+}))
+
+vi.mock('@/stores/settingStore', () => ({
+  useSettingStore: () => ({
+    settings: {}
+  })
+}))
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn()
+  }
+}))
+
+vi.mock('@/composables/functional/useChainCallback', () => ({
+  useChainCallback: vi.fn((original, ...callbacks) => {
+    return function (this: any, ...args: any[]) {
+      original?.apply(this, args)
+      callbacks.forEach((cb: any) => cb.apply(this, args))
+    }
+  })
+}))
+
+const FIRST_BACKOFF = 1000 // backoff is 1s on first retry
+const DEFAULT_VALUE = 'Loading...'
+
+function createMockConfig(overrides = {}): RemoteWidgetConfig {
+  return {
+    route: `/api/test/${Date.now()}${Math.random().toString(36).substring(2, 15)}`,
+    refresh: 0,
+    ...overrides
+  }
+}
+
+const createMockOptions = (inputOverrides = {}) => ({
+  remoteConfig: createMockConfig(inputOverrides),
+  defaultValue: DEFAULT_VALUE,
+  node: {
+    addWidget: vi.fn()
+  } as any,
+  widget: {} as any
+})
+
+function mockAxiosResponse(data: unknown, status = 200) {
+  vi.mocked(axios.get).mockResolvedValueOnce({ data, status })
+}
+
+function mockAxiosError(error: Error | string) {
+  const err = error instanceof Error ? error : new Error(error)
+  vi.mocked(axios.get).mockRejectedValueOnce(err)
+}
+
+function createHookWithData(data: unknown, inputOverrides = {}) {
+  mockAxiosResponse(data)
+  const hook = useRemoteWidget(createMockOptions(inputOverrides))
+  return hook
+}
+
+async function setupHookWithResponse(data: unknown, inputOverrides = {}) {
+  const hook = createHookWithData(data, inputOverrides)
+  const result = await getResolvedValue(hook)
+  return { hook, result }
+}
+
+async function getResolvedValue(hook: ReturnType<typeof useRemoteWidget>) {
+  // Create a promise that resolves when the fetch is complete
+  const responsePromise = new Promise<void>((resolve) => {
+    hook.getValue(() => resolve())
+  })
+  await responsePromise
+  return hook.getCachedValue()
+}
+
+describe('useRemoteWidget', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Reset mocks
+    vi.mocked(axios.get).mockReset()
+    // Reset cache between tests
+    vi.spyOn(Map.prototype, 'get').mockClear()
+    vi.spyOn(Map.prototype, 'set').mockClear()
+    vi.spyOn(Map.prototype, 'delete').mockClear()
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('initialization', () => {
+    it('should create hook with default values', () => {
+      const hook = useRemoteWidget(createMockOptions())
+      expect(hook.getCachedValue()).toBeUndefined()
+      expect(hook.getValue()).toBe('Loading...')
+    })
+
+    it('should generate consistent cache keys', () => {
+      const options = createMockOptions()
+      const hook1 = useRemoteWidget(options)
+      const hook2 = useRemoteWidget(options)
+      expect(hook1.cacheKey).toBe(hook2.cacheKey)
+    })
+
+    it('should handle query params in cache key', () => {
+      const hook1 = useRemoteWidget(
+        createMockOptions({ query_params: { a: 1 } })
+      )
+      const hook2 = useRemoteWidget(
+        createMockOptions({ query_params: { a: 2 } })
+      )
+      expect(hook1.cacheKey).not.toBe(hook2.cacheKey)
+    })
+  })
+
+  describe('fetchOptions', () => {
+    it('should fetch data successfully', async () => {
+      const mockData = ['optionA', 'optionB']
+      const { hook, result } = await setupHookWithResponse(mockData)
+      expect(result).toEqual(mockData)
+      expect(vi.mocked(axios.get)).toHaveBeenCalledWith(
+        hook.cacheKey.split(';')[0], // Get the route part from cache key
+        expect.any(Object)
+      )
+    })
+
+    it('should use response_key if provided', async () => {
+      const mockResponse = { items: ['optionB', 'optionA', 'optionC'] }
+      const { result } = await setupHookWithResponse(mockResponse, {
+        response_key: 'items'
+      })
+      expect(result).toEqual(mockResponse.items)
+    })
+
+    it('should cache successful responses', async () => {
+      const mockData = ['optionA', 'optionB', 'optionC', 'optionD']
+      const { hook } = await setupHookWithResponse(mockData)
+      const entry = hook.getCacheEntry()
+
+      expect(entry?.data).toEqual(mockData)
+      expect(entry?.error).toBeNull()
+    })
+
+    it('should handle fetch errors', async () => {
+      const error = new Error('Network error')
+      mockAxiosError(error)
+
+      const { hook } = await setupHookWithResponse([])
+
+      const entry = hook.getCacheEntry()
+      expect(entry?.error).toBeTruthy()
+      expect(entry?.lastErrorTime).toBeDefined()
+    })
+
+    it('should handle empty array responses', async () => {
+      const { result } = await setupHookWithResponse([])
+      expect(result).toEqual([])
+    })
+
+    it('should handle malformed response data', async () => {
+      const hook = useRemoteWidget(createMockOptions())
+
+      mockAxiosResponse(null)
+      const data1 = hook.getValue()
+
+      mockAxiosResponse(undefined)
+      const data2 = hook.getValue()
+
+      expect(data1).toBe(DEFAULT_VALUE)
+      expect(data2).toBe(DEFAULT_VALUE)
+    })
+
+    it('should handle non-200 status codes', async () => {
+      mockAxiosError('Request failed with status code 404')
+
+      const { hook } = await setupHookWithResponse([])
+      const entry = hook.getCacheEntry()
+      expect(entry?.error?.message).toBe('Request failed with status code 404')
+    })
+  })
+
+  describe('refresh behavior', () => {
+    beforeEach(() => {
+      vi.useFakeTimers()
+    })
+
+    afterEach(() => {
+      vi.useRealTimers()
+      vi.clearAllMocks()
+    })
+
+    describe('permanent widgets (no refresh)', () => {
+      it('permanent widgets should not attempt fetch after initialization', async () => {
+        const mockData = ['data that is permanent after initialization']
+        const { hook } = await setupHookWithResponse(mockData)
+
+        await getResolvedValue(hook)
+        await getResolvedValue(hook)
+
+        expect(vi.mocked(axios.get)).toHaveBeenCalledTimes(1)
+      })
+
+      it('permanent widgets should re-fetch if refreshValue is called', async () => {
+        const mockData = ['data that is permanent after initialization']
+        const { hook } = await setupHookWithResponse(mockData)
+
+        await getResolvedValue(hook)
+        const refreshedData = ['data that user forced to be fetched']
+        mockAxiosResponse(refreshedData)
+
+        hook.refreshValue()
+        const data = await getResolvedValue(hook)
+        expect(data).toEqual(refreshedData)
+      })
+
+      it('permanent widgets should still retry if request fails', async () => {
+        mockAxiosError('Network error')
+
+        const hook = useRemoteWidget(createMockOptions())
+        await getResolvedValue(hook)
+        expect(vi.mocked(axios.get)).toHaveBeenCalledTimes(1)
+
+        vi.setSystemTime(Date.now() + FIRST_BACKOFF)
+        const secondData = await getResolvedValue(hook)
+        expect(secondData).toBe('Loading...')
+        expect(vi.mocked(axios.get)).toHaveBeenCalledTimes(2)
+      })
+
+      it('should treat empty refresh field as permanent', async () => {
+        const { hook } = await setupHookWithResponse(['data that is permanent'])
+
+        await getResolvedValue(hook)
+        await getResolvedValue(hook)
+
+        expect(vi.mocked(axios.get)).toHaveBeenCalledTimes(1)
+      })
+    })
+
+    it('should refresh when data is stale', async () => {
+      const refresh = 256
+      const mockData1 = ['option1']
+      const mockData2 = ['option2']
+
+      const { hook } = await setupHookWithResponse(mockData1, { refresh })
+      mockAxiosResponse(mockData2)
+
+      vi.setSystemTime(Date.now() + refresh)
+      const newData = await getResolvedValue(hook)
+
+      expect(newData).toEqual(mockData2)
+      expect(vi.mocked(axios.get)).toHaveBeenCalledTimes(2)
+    })
+
+    it('should not refresh when data is not stale', async () => {
+      const { hook } = await setupHookWithResponse(['option1'], {
+        refresh: 512
+      })
+
+      vi.setSystemTime(Date.now() + 128)
+      await getResolvedValue(hook)
+
+      expect(vi.mocked(axios.get)).toHaveBeenCalledTimes(1)
+    })
+
+    it('should use backoff instead of refresh after error', async () => {
+      const refresh = 4096
+      const { hook } = await setupHookWithResponse(['first success'], {
+        refresh
+      })
+
+      mockAxiosError('Network error')
+      vi.setSystemTime(Date.now() + refresh)
+      await getResolvedValue(hook)
+      expect(vi.mocked(axios.get)).toHaveBeenCalledTimes(2)
+
+      mockAxiosResponse(['second success'])
+      vi.setSystemTime(Date.now() + FIRST_BACKOFF)
+      const thirdData = await getResolvedValue(hook)
+      expect(thirdData).toEqual(['second success'])
+      expect(vi.mocked(axios.get)).toHaveBeenCalledTimes(3)
+    })
+
+    it('should use last valid value after error', async () => {
+      const refresh = 4096
+      const { hook } = await setupHookWithResponse(['a valid value'], {
+        refresh
+      })
+
+      mockAxiosError('Network error')
+      vi.setSystemTime(Date.now() + refresh)
+      const secondData = await getResolvedValue(hook)
+
+      expect(secondData).toEqual(['a valid value'])
+      expect(vi.mocked(axios.get)).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  describe('error handling and backoff', () => {
+    beforeEach(() => {
+      vi.useFakeTimers()
+    })
+
+    afterEach(() => {
+      vi.useRealTimers()
+    })
+
+    it('should implement exponential backoff on errors', async () => {
+      mockAxiosError('Network error')
+
+      const hook = useRemoteWidget(createMockOptions())
+      await getResolvedValue(hook)
+      const entry1 = hook.getCacheEntry()
+      expect(entry1?.error).toBeTruthy()
+
+      await getResolvedValue(hook)
+      expect(vi.mocked(axios.get)).toHaveBeenCalledTimes(1)
+
+      vi.setSystemTime(Date.now() + 500)
+      await getResolvedValue(hook)
+      expect(vi.mocked(axios.get)).toHaveBeenCalledTimes(1) // Still backing off
+
+      vi.setSystemTime(Date.now() + 3000)
+      await getResolvedValue(hook)
+      expect(vi.mocked(axios.get)).toHaveBeenCalledTimes(2)
+      expect(entry1?.data).toBeDefined()
+    })
+
+    it('should reset error state on successful fetch', async () => {
+      mockAxiosError('Network error')
+      const hook = useRemoteWidget(createMockOptions())
+      const firstData = await getResolvedValue(hook)
+      expect(firstData).toBe('Loading...')
+
+      vi.setSystemTime(Date.now() + 3000)
+      mockAxiosResponse(['option1'])
+      const secondData = await getResolvedValue(hook)
+      expect(secondData).toEqual(['option1'])
+
+      const entry = hook.getCacheEntry()
+      expect(entry?.error).toBeNull()
+      expect(entry?.retryCount).toBe(0)
+    })
+
+    it('should save successful data after backoff', async () => {
+      mockAxiosError('Network error')
+      const hook = useRemoteWidget(createMockOptions())
+      await getResolvedValue(hook)
+      const entry1 = hook.getCacheEntry()
+      expect(entry1?.error).toBeTruthy()
+
+      vi.setSystemTime(Date.now() + 3000)
+      mockAxiosResponse(['success after backoff'])
+      const secondData = await getResolvedValue(hook)
+      expect(secondData).toEqual(['success after backoff'])
+
+      const entry2 = hook.getCacheEntry()
+      expect(entry2?.error).toBeNull()
+      expect(entry2?.retryCount).toBe(0)
+    })
+
+    it('should save successful data after multiple backoffs', async () => {
+      mockAxiosError('Network error')
+      mockAxiosError('Network error')
+      mockAxiosError('Network error')
+      const hook = useRemoteWidget(createMockOptions())
+      await getResolvedValue(hook)
+      const entry1 = hook.getCacheEntry()
+      expect(entry1?.error).toBeTruthy()
+
+      vi.setSystemTime(Date.now() + 3000)
+      const secondData = await getResolvedValue(hook)
+      expect(secondData).toBe('Loading...')
+      expect(entry1?.error).toBeDefined()
+
+      vi.setSystemTime(Date.now() + 9000)
+      const thirdData = await getResolvedValue(hook)
+      expect(thirdData).toBe('Loading...')
+      expect(entry1?.error).toBeDefined()
+
+      vi.setSystemTime(Date.now() + 120_000)
+      mockAxiosResponse(['success after multiple backoffs'])
+      const fourthData = await getResolvedValue(hook)
+      expect(fourthData).toEqual(['success after multiple backoffs'])
+
+      const entry2 = hook.getCacheEntry()
+      expect(entry2?.error).toBeNull()
+      expect(entry2?.retryCount).toBe(0)
+    })
+  })
+
+  describe('cache management', () => {
+    it('should clear cache entries', async () => {
+      const { hook } = await setupHookWithResponse(['to be cleared'])
+      expect(hook.getCachedValue()).toBeDefined()
+
+      hook.refreshValue()
+      expect(hook.getCachedValue()).toBe(DEFAULT_VALUE)
+    })
+
+    it('should prevent duplicate in-flight requests', async () => {
+      const promise = Promise.resolve({ data: ['non-duplicate'] })
+      vi.mocked(axios.get).mockImplementationOnce(() => promise as any)
+
+      const hook = useRemoteWidget(createMockOptions())
+      const [result1, result2] = await Promise.all([
+        getResolvedValue(hook),
+        getResolvedValue(hook)
+      ])
+
+      expect(result1).toBe(result2)
+      expect(vi.mocked(axios.get)).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('concurrent access and multiple instances', () => {
+    it('should handle concurrent hook instances with same route', async () => {
+      mockAxiosResponse(['shared data'])
+      const options = createMockOptions()
+      const hook1 = useRemoteWidget(options)
+      const hook2 = useRemoteWidget(options)
+
+      // Since they have the same route, only one request will be made
+      await Promise.race([getResolvedValue(hook1), getResolvedValue(hook2)])
+
+      const data1 = hook1.getValue()
+      const data2 = hook2.getValue()
+
+      expect(data1).toEqual(['shared data'])
+      expect(data2).toEqual(['shared data'])
+      expect(vi.mocked(axios.get)).toHaveBeenCalledTimes(1)
+      expect(hook1.getCachedValue()).toBe(hook2.getCachedValue())
+    })
+
+    it('should use shared cache across multiple hooks', async () => {
+      mockAxiosResponse(['shared data'])
+      const options = createMockOptions()
+      const hook1 = useRemoteWidget(options)
+      const hook2 = useRemoteWidget(options)
+      const hook3 = useRemoteWidget(options)
+      const hook4 = useRemoteWidget(options)
+
+      const data1 = await getResolvedValue(hook1)
+      const data2 = await getResolvedValue(hook2)
+      const data3 = await getResolvedValue(hook3)
+      const data4 = await getResolvedValue(hook4)
+
+      expect(data1).toEqual(['shared data'])
+      expect(data2).toBe(data1)
+      expect(data3).toBe(data1)
+      expect(data4).toBe(data1)
+      expect(vi.mocked(axios.get)).toHaveBeenCalledTimes(1)
+      expect(hook1.getCachedValue()).toBe(hook2.getCachedValue())
+      expect(hook2.getCachedValue()).toBe(hook3.getCachedValue())
+      expect(hook3.getCachedValue()).toBe(hook4.getCachedValue())
+    })
+
+    it('should handle rapid cache clearing during fetch', async () => {
+      let resolvePromise: (value: any) => void
+      const delayedPromise = new Promise((resolve) => {
+        resolvePromise = resolve
+      })
+
+      vi.mocked(axios.get).mockImplementationOnce(() => delayedPromise as any)
+
+      const hook = useRemoteWidget(createMockOptions())
+      hook.getValue()
+      hook.refreshValue()
+
+      resolvePromise!({ data: ['delayed data'] })
+      const data = await getResolvedValue(hook)
+
+      // The value should be the default value because the refreshValue
+      // clears the cache and the fetch is aborted
+      expect(data).toEqual(DEFAULT_VALUE)
+      expect(hook.getCachedValue()).toBe(DEFAULT_VALUE)
+    })
+
+    it('should handle widget destroyed during fetch', async () => {
+      let resolvePromise: (value: any) => void
+      const delayedPromise = new Promise((resolve) => {
+        resolvePromise = resolve
+      })
+
+      vi.mocked(axios.get).mockImplementationOnce(() => delayedPromise as any)
+
+      let hook = useRemoteWidget(createMockOptions())
+      const fetchPromise = hook.getValue()
+
+      hook = null as any
+
+      resolvePromise!({ data: ['delayed data'] })
+      await fetchPromise
+
+      expect(hook).toBeNull()
+      hook = useRemoteWidget(createMockOptions())
+
+      const data2 = await getResolvedValue(hook)
+      expect(data2).toEqual(DEFAULT_VALUE)
+    })
+  })
+
+  describe('auto-refresh on task completion', () => {
+    it('should add auto-refresh toggle widget', () => {
+      const mockNode = {
+        addWidget: vi.fn(),
+        widgets: []
+      }
+      const mockWidget = {
+        refresh: vi.fn()
+      }
+
+      useRemoteWidget({
+        remoteConfig: createMockConfig(),
+        defaultValue: DEFAULT_VALUE,
+        node: mockNode as any,
+        widget: mockWidget as any
+      })
+
+      // Should add auto-refresh toggle widget
+      expect(mockNode.addWidget).toHaveBeenCalledWith(
+        'toggle',
+        'Auto-refresh after generation',
+        false,
+        expect.any(Function),
+        {
+          serialize: false
+        }
+      )
+    })
+
+    it('should register event listener when enabled', async () => {
+      const { api } = await import('@/scripts/api')
+
+      const mockNode = {
+        addWidget: vi.fn(),
+        widgets: []
+      }
+      const mockWidget = {
+        refresh: vi.fn()
+      }
+
+      useRemoteWidget({
+        remoteConfig: createMockConfig(),
+        defaultValue: DEFAULT_VALUE,
+        node: mockNode as any,
+        widget: mockWidget as any
+      })
+
+      // Event listener should be registered immediately
+      expect(api.addEventListener).toHaveBeenCalledWith(
+        'execution_success',
+        expect.any(Function)
+      )
+    })
+
+    it('should refresh widget when workflow completes successfully', async () => {
+      const { api } = await import('@/scripts/api')
+      let executionSuccessHandler: (() => void) | undefined
+
+      // Capture the event handler
+      vi.mocked(api.addEventListener).mockImplementation((event, handler) => {
+        if (event === 'execution_success') {
+          executionSuccessHandler = handler as () => void
+        }
+      })
+
+      const mockNode = {
+        addWidget: vi.fn(),
+        widgets: []
+      }
+      const mockWidget = {} as any
+
+      useRemoteWidget({
+        remoteConfig: createMockConfig(),
+        defaultValue: DEFAULT_VALUE,
+        node: mockNode as any,
+        widget: mockWidget
+      })
+
+      // Spy on the refresh function that was added by useRemoteWidget
+      const refreshSpy = vi.spyOn(mockWidget, 'refresh')
+
+      // Get the toggle callback and enable auto-refresh
+      const toggleCallback = mockNode.addWidget.mock.calls.find(
+        (call) => call[0] === 'toggle'
+      )?.[3]
+      toggleCallback?.(true)
+
+      // Simulate workflow completion
+      executionSuccessHandler?.()
+
+      expect(refreshSpy).toHaveBeenCalled()
+    })
+
+    it('should not refresh when toggle is disabled', async () => {
+      const { api } = await import('@/scripts/api')
+      let executionSuccessHandler: (() => void) | undefined
+
+      // Capture the event handler
+      vi.mocked(api.addEventListener).mockImplementation((event, handler) => {
+        if (event === 'execution_success') {
+          executionSuccessHandler = handler as () => void
+        }
+      })
+
+      const mockNode = {
+        addWidget: vi.fn(),
+        widgets: []
+      }
+      const mockWidget = {} as any
+
+      useRemoteWidget({
+        remoteConfig: createMockConfig(),
+        defaultValue: DEFAULT_VALUE,
+        node: mockNode as any,
+        widget: mockWidget
+      })
+
+      // Spy on the refresh function that was added by useRemoteWidget
+      const refreshSpy = vi.spyOn(mockWidget, 'refresh')
+
+      // Toggle is disabled by default
+      // Simulate workflow completion
+      executionSuccessHandler?.()
+
+      expect(refreshSpy).not.toHaveBeenCalled()
+    })
+
+    it('should cleanup event listener on node removal', async () => {
+      const { api } = await import('@/scripts/api')
+      let executionSuccessHandler: (() => void) | undefined
+
+      // Capture the event handler
+      vi.mocked(api.addEventListener).mockImplementation((event, handler) => {
+        if (event === 'execution_success') {
+          executionSuccessHandler = handler as () => void
+        }
+      })
+
+      const mockNode = {
+        addWidget: vi.fn(),
+        widgets: [],
+        onRemoved: undefined as any
+      }
+      const mockWidget = {
+        refresh: vi.fn()
+      }
+
+      useRemoteWidget({
+        remoteConfig: createMockConfig(),
+        defaultValue: DEFAULT_VALUE,
+        node: mockNode as any,
+        widget: mockWidget as any
+      })
+
+      // Simulate node removal
+      mockNode.onRemoved?.()
+
+      expect(api.removeEventListener).toHaveBeenCalledWith(
+        'execution_success',
+        executionSuccessHandler
+      )
+    })
+  })
+})

tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts

@@ -0,0 +1,141 @@
+import { describe, expect, it } from 'vitest'
+
+import { useWidgetRenderer } from '@/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer'
+import { WidgetType } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
+
+describe('useWidgetRenderer', () => {
+  const { getWidgetComponent, shouldRenderAsVue } = useWidgetRenderer()
+
+  describe('getWidgetComponent', () => {
+    // Test number type mappings
+    describe('number types', () => {
+      it('should map number type to NUMBER widget', () => {
+        expect(getWidgetComponent('number')).toBe(WidgetType.NUMBER)
+      })
+
+      it('should map slider type to SLIDER widget', () => {
+        expect(getWidgetComponent('slider')).toBe(WidgetType.SLIDER)
+      })
+
+      it('should map INT type to INT widget', () => {
+        expect(getWidgetComponent('INT')).toBe(WidgetType.INT)
+      })
+
+      it('should map FLOAT type to FLOAT widget', () => {
+        expect(getWidgetComponent('FLOAT')).toBe(WidgetType.FLOAT)
+      })
+    })
+
+    // Test text type mappings
+    describe('text types', () => {
+      it('should map text variations to STRING widget', () => {
+        expect(getWidgetComponent('text')).toBe(WidgetType.STRING)
+        expect(getWidgetComponent('string')).toBe(WidgetType.STRING)
+        expect(getWidgetComponent('STRING')).toBe(WidgetType.STRING)
+      })
+
+      it('should map multiline text types to TEXTAREA widget', () => {
+        expect(getWidgetComponent('multiline')).toBe(WidgetType.TEXTAREA)
+        expect(getWidgetComponent('textarea')).toBe(WidgetType.TEXTAREA)
+        expect(getWidgetComponent('MARKDOWN')).toBe(WidgetType.MARKDOWN)
+        expect(getWidgetComponent('customtext')).toBe(WidgetType.TEXTAREA)
+      })
+    })
+
+    // Test selection type mappings
+    describe('selection types', () => {
+      it('should map combo types to COMBO widget', () => {
+        expect(getWidgetComponent('combo')).toBe(WidgetType.COMBO)
+        expect(getWidgetComponent('COMBO')).toBe(WidgetType.COMBO)
+      })
+    })
+
+    // Test boolean type mappings
+    describe('boolean types', () => {
+      it('should map boolean types to appropriate widgets', () => {
+        expect(getWidgetComponent('toggle')).toBe(WidgetType.TOGGLESWITCH)
+        expect(getWidgetComponent('boolean')).toBe(WidgetType.BOOLEAN)
+        expect(getWidgetComponent('BOOLEAN')).toBe(WidgetType.BOOLEAN)
+      })
+    })
+
+    // Test advanced widget mappings
+    describe('advanced widgets', () => {
+      it('should map color types to COLOR widget', () => {
+        expect(getWidgetComponent('color')).toBe(WidgetType.COLOR)
+        expect(getWidgetComponent('COLOR')).toBe(WidgetType.COLOR)
+      })
+
+      it('should map image types to IMAGE widget', () => {
+        expect(getWidgetComponent('image')).toBe(WidgetType.IMAGE)
+        expect(getWidgetComponent('IMAGE')).toBe(WidgetType.IMAGE)
+      })
+
+      it('should map file types to FILEUPLOAD widget', () => {
+        expect(getWidgetComponent('file')).toBe(WidgetType.FILEUPLOAD)
+        expect(getWidgetComponent('FILEUPLOAD')).toBe(WidgetType.FILEUPLOAD)
+      })
+
+      it('should map button types to BUTTON widget', () => {
+        expect(getWidgetComponent('button')).toBe(WidgetType.BUTTON)
+        expect(getWidgetComponent('BUTTON')).toBe(WidgetType.BUTTON)
+      })
+    })
+
+    // Test fallback behavior
+    describe('fallback behavior', () => {
+      it('should return STRING widget for unknown types', () => {
+        expect(getWidgetComponent('unknown')).toBe(WidgetType.STRING)
+        expect(getWidgetComponent('custom_widget')).toBe(WidgetType.STRING)
+        expect(getWidgetComponent('')).toBe(WidgetType.STRING)
+      })
+
+      it('should return STRING widget for unmapped but valid types', () => {
+        expect(getWidgetComponent('datetime')).toBe(WidgetType.STRING)
+        expect(getWidgetComponent('json')).toBe(WidgetType.STRING)
+      })
+    })
+  })
+
+  describe('shouldRenderAsVue', () => {
+    it('should return false for widgets marked as canvas-only', () => {
+      const widget = { type: 'text', options: { canvasOnly: true } }
+      expect(shouldRenderAsVue(widget)).toBe(false)
+    })
+
+    it('should return false for widgets without a type', () => {
+      const widget = { options: {} }
+      expect(shouldRenderAsVue(widget)).toBe(false)
+    })
+
+    it('should return true for widgets with mapped types', () => {
+      expect(shouldRenderAsVue({ type: 'text' })).toBe(true)
+      expect(shouldRenderAsVue({ type: 'number' })).toBe(true)
+      expect(shouldRenderAsVue({ type: 'combo' })).toBe(true)
+    })
+
+    it('should return true even for unknown types (fallback to STRING)', () => {
+      expect(shouldRenderAsVue({ type: 'unknown_type' })).toBe(true)
+    })
+
+    it('should respect options while checking type', () => {
+      const widget = { type: 'text', options: { someOption: 'value' } }
+      expect(shouldRenderAsVue(widget)).toBe(true)
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle widgets with empty options', () => {
+      const widget = { type: 'text', options: {} }
+      expect(shouldRenderAsVue(widget)).toBe(true)
+    })
+
+    it('should handle case sensitivity correctly', () => {
+      // Test that both lowercase and uppercase work
+      expect(getWidgetComponent('string')).toBe(WidgetType.STRING)
+      expect(getWidgetComponent('STRING')).toBe(WidgetType.STRING)
+      expect(getWidgetComponent('combo')).toBe(WidgetType.COMBO)
+      expect(getWidgetComponent('COMBO')).toBe(WidgetType.COMBO)
+    })
+  })
+})