merge main into rh-test

tests-ui/tests/renderer/extensions/minimap/composables/useMinimapSettings.test.ts

@@ -1,11 +1,11 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useMinimapSettings } from '@/renderer/extensions/minimap/composables/useMinimapSettings'
-import { useSettingStore } from '@/stores/settingStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 
-vi.mock('@/stores/settingStore')
+vi.mock('@/platform/settings/settingStore')
 vi.mock('@/stores/workspace/colorPaletteStore')
 
 describe('useMinimapSettings', () => {

tests-ui/tests/renderer/extensions/minimap/composables/useMinimapViewport.test.ts

@@ -1,12 +1,12 @@
+import { useRafFn } from '@vueuse/core'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
-import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
 import type { LGraph } from '@/lib/litegraph/src/litegraph'
 import { useMinimapViewport } from '@/renderer/extensions/minimap/composables/useMinimapViewport'
 import type { MinimapCanvas } from '@/renderer/extensions/minimap/types'
 
-vi.mock('@/composables/canvas/useCanvasTransformSync')
+vi.mock('@vueuse/core')
 vi.mock('@/renderer/core/spatial/boundsCalculator', () => ({
   calculateNodeBounds: vi.fn(),
   calculateMinimapScale: vi.fn(),
@@ -41,10 +41,10 @@ describe('useMinimapViewport', () => {
       ]
     } as any
 
-    vi.mocked(useCanvasTransformSync).mockReturnValue({
-      startSync: vi.fn(),
-      stopSync: vi.fn()
-    } as any)
+    vi.mocked(useRafFn, { partial: true }).mockReturnValue({
+      resume: vi.fn(),
+      pause: vi.fn()
+    })
   })
 
   it('should initialize with default bounds', () => {
@@ -206,10 +206,10 @@ describe('useMinimapViewport', () => {
     const startSyncMock = vi.fn()
     const stopSyncMock = vi.fn()
 
-    vi.mocked(useCanvasTransformSync).mockReturnValue({
-      startSync: startSyncMock,
-      stopSync: stopSyncMock
-    } as any)
+    vi.mocked(useRafFn, { partial: true }).mockReturnValue({
+      resume: startSyncMock,
+      pause: stopSyncMock
+    })
 
     const canvasRef = ref(mockCanvas as any)
     const graphRef = ref(mockGraph as any)

tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.test.ts

@@ -0,0 +1,277 @@
+import { createTestingPinia } from '@pinia/testing'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import { downloadFile } from '@/base/common/downloadUtil'
+import ImagePreview from '@/renderer/extensions/vueNodes/components/ImagePreview.vue'
+
+// Mock downloadFile to avoid DOM errors
+vi.mock('@/base/common/downloadUtil', () => ({
+  downloadFile: vi.fn()
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: {
+        editOrMaskImage: 'Edit or mask image',
+        downloadImage: 'Download image',
+        removeImage: 'Remove image',
+        viewImageOfTotal: 'View image {index} of {total}',
+        imagePreview:
+          'Image preview - Use arrow keys to navigate between images',
+        errorLoadingImage: 'Error loading image',
+        failedToDownloadImage: 'Failed to download image',
+        calculatingDimensions: 'Calculating dimensions',
+        imageFailedToLoad: 'Image failed to load',
+        loading: 'Loading'
+      }
+    }
+  }
+})
+
+describe('ImagePreview', () => {
+  const defaultProps = {
+    imageUrls: [
+      '/api/view?filename=test1.png&type=output',
+      '/api/view?filename=test2.png&type=output'
+    ]
+  }
+
+  const mountImagePreview = (props = {}) => {
+    return mount(ImagePreview, {
+      props: { ...defaultProps, ...props },
+      global: {
+        plugins: [
+          createTestingPinia({
+            createSpy: vi.fn
+          }),
+          i18n
+        ],
+        stubs: {
+          'i-lucide:venetian-mask': true,
+          'i-lucide:download': true,
+          'i-lucide:x': true,
+          'i-lucide:image-off': true,
+          Skeleton: true
+        }
+      }
+    })
+  }
+
+  it('renders image preview when imageUrls provided', () => {
+    const wrapper = mountImagePreview()
+
+    expect(wrapper.find('.image-preview').exists()).toBe(true)
+    expect(wrapper.find('img').exists()).toBe(true)
+    expect(wrapper.find('img').attributes('src')).toBe(
+      defaultProps.imageUrls[0]
+    )
+  })
+
+  it('does not render when no imageUrls provided', () => {
+    const wrapper = mountImagePreview({ imageUrls: [] })
+
+    expect(wrapper.find('.image-preview').exists()).toBe(false)
+  })
+
+  it('displays calculating dimensions text initially', () => {
+    const wrapper = mountImagePreview()
+
+    expect(wrapper.text()).toContain('Calculating dimensions')
+  })
+
+  it('shows navigation dots for multiple images', () => {
+    const wrapper = mountImagePreview()
+
+    const navigationDots = wrapper.findAll('.w-2.h-2.rounded-full')
+    expect(navigationDots).toHaveLength(2)
+  })
+
+  it('does not show navigation dots for single image', () => {
+    const wrapper = mountImagePreview({
+      imageUrls: [defaultProps.imageUrls[0]]
+    })
+
+    const navigationDots = wrapper.findAll('.w-2.h-2.rounded-full')
+    expect(navigationDots).toHaveLength(0)
+  })
+
+  it('shows action buttons on hover', async () => {
+    const wrapper = mountImagePreview()
+
+    // Initially buttons should not be visible
+    expect(wrapper.find('.actions').exists()).toBe(false)
+
+    // Trigger hover
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    // Action buttons should now be visible
+    expect(wrapper.find('.actions').exists()).toBe(true)
+    expect(wrapper.findAll('.action-btn')).toHaveLength(2) // download, remove (no mask for multiple images)
+  })
+
+  it('hides action buttons when not hovering', async () => {
+    const wrapper = mountImagePreview()
+
+    // Trigger hover
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+    expect(wrapper.find('.actions').exists()).toBe(true)
+
+    // Trigger mouse leave
+    await wrapper.trigger('mouseleave')
+    await nextTick()
+    expect(wrapper.find('.actions').exists()).toBe(false)
+  })
+
+  it('shows mask/edit button only for single images', async () => {
+    // Multiple images - should not show mask button
+    const multipleImagesWrapper = mountImagePreview()
+    await multipleImagesWrapper.trigger('mouseenter')
+    await nextTick()
+
+    const maskButtonMultiple = multipleImagesWrapper.find(
+      '[aria-label="Edit or mask image"]'
+    )
+    expect(maskButtonMultiple.exists()).toBe(false)
+
+    // Single image - should show mask button
+    const singleImageWrapper = mountImagePreview({
+      imageUrls: [defaultProps.imageUrls[0]]
+    })
+    await singleImageWrapper.trigger('mouseenter')
+    await nextTick()
+
+    const maskButtonSingle = singleImageWrapper.find(
+      '[aria-label="Edit or mask image"]'
+    )
+    expect(maskButtonSingle.exists()).toBe(true)
+  })
+
+  it('handles action button clicks', async () => {
+    const wrapper = mountImagePreview({
+      imageUrls: [defaultProps.imageUrls[0]]
+    })
+
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    // Test Edit/Mask button - just verify it can be clicked without errors
+    const editButton = wrapper.find('[aria-label="Edit or mask image"]')
+    expect(editButton.exists()).toBe(true)
+    await editButton.trigger('click')
+
+    // Test Remove button - just verify it can be clicked without errors
+    const removeButton = wrapper.find('[aria-label="Remove image"]')
+    expect(removeButton.exists()).toBe(true)
+    await removeButton.trigger('click')
+  })
+
+  it('handles download button click', async () => {
+    const wrapper = mountImagePreview({
+      imageUrls: [defaultProps.imageUrls[0]]
+    })
+
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    // Test Download button
+    const downloadButton = wrapper.find('[aria-label="Download image"]')
+    expect(downloadButton.exists()).toBe(true)
+    await downloadButton.trigger('click')
+
+    // Verify the mocked downloadFile was called
+    expect(downloadFile).toHaveBeenCalledWith(defaultProps.imageUrls[0])
+  })
+
+  it('switches images when navigation dots are clicked', async () => {
+    const wrapper = mountImagePreview()
+
+    // Initially shows first image
+    expect(wrapper.find('img').attributes('src')).toBe(
+      defaultProps.imageUrls[0]
+    )
+
+    // Click second navigation dot
+    const navigationDots = wrapper.findAll('.w-2.h-2.rounded-full')
+    await navigationDots[1].trigger('click')
+    await nextTick()
+
+    // After clicking, component shows loading state (Skeleton), not img
+    expect(wrapper.find('skeleton-stub').exists()).toBe(true)
+    expect(wrapper.find('img').exists()).toBe(false)
+
+    // Simulate image load event to clear loading state
+    const component = wrapper.vm as any
+    component.isLoading = false
+    await nextTick()
+
+    // Now should show second image
+    const imgElement = wrapper.find('img')
+    expect(imgElement.exists()).toBe(true)
+    expect(imgElement.attributes('src')).toBe(defaultProps.imageUrls[1])
+  })
+
+  it('applies correct classes to navigation dots based on current image', async () => {
+    const wrapper = mountImagePreview()
+
+    const navigationDots = wrapper.findAll('.w-2.h-2.rounded-full')
+
+    // First dot should be active (has bg-white class)
+    expect(navigationDots[0].classes()).toContain('bg-white')
+    expect(navigationDots[1].classes()).toContain('bg-white/50')
+
+    // Switch to second image
+    await navigationDots[1].trigger('click')
+    await nextTick()
+
+    // Second dot should now be active
+    expect(navigationDots[0].classes()).toContain('bg-white/50')
+    expect(navigationDots[1].classes()).toContain('bg-white')
+  })
+
+  it('loads image without errors', async () => {
+    const wrapper = mountImagePreview()
+
+    const img = wrapper.find('img')
+    expect(img.exists()).toBe(true)
+
+    // Just verify the image element is properly set up
+    expect(img.attributes('src')).toBe(defaultProps.imageUrls[0])
+  })
+
+  it('has proper accessibility attributes', () => {
+    const wrapper = mountImagePreview()
+
+    const img = wrapper.find('img')
+    expect(img.attributes('alt')).toBe('Node output 1')
+  })
+
+  it('updates alt text when switching images', async () => {
+    const wrapper = mountImagePreview()
+
+    // Initially first image
+    expect(wrapper.find('img').attributes('alt')).toBe('Node output 1')
+
+    // Switch to second image
+    const navigationDots = wrapper.findAll('.w-2.h-2.rounded-full')
+    await navigationDots[1].trigger('click')
+    await nextTick()
+
+    // Simulate image load event to clear loading state
+    const component = wrapper.vm as any
+    component.isLoading = false
+    await nextTick()
+
+    // Alt text should update
+    const imgElement = wrapper.find('img')
+    expect(imgElement.exists()).toBe(true)
+    expect(imgElement.attributes('alt')).toBe('Node output 2')
+  })
+})

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

@@ -0,0 +1,199 @@
+import { createTestingPinia } from '@pinia/testing'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed, toValue } from 'vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import { createI18n } from 'vue-i18n'
+
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import LGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
+import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
+import { useVueElementTracking } from '@/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking'
+
+const mockData = vi.hoisted(() => ({
+  mockNodeIds: new Set<string>(),
+  mockExecuting: false
+}))
+
+vi.mock('@/renderer/core/canvas/canvasStore', () => {
+  const getCanvas = vi.fn()
+  const useCanvasStore = () => ({
+    getCanvas,
+    selectedNodeIds: computed(() => mockData.mockNodeIds)
+  })
+  return {
+    useCanvasStore
+  }
+})
+
+vi.mock(
+  '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers',
+  () => {
+    const handleNodeSelect = vi.fn()
+    return { useNodeEventHandlers: () => ({ handleNodeSelect }) }
+  }
+)
+
+vi.mock(
+  '@/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking',
+  () => ({
+    useVueElementTracking: vi.fn()
+  })
+)
+
+vi.mock('@/composables/useErrorHandling', () => ({
+  useErrorHandling: () => ({
+    toastErrorHandler: vi.fn()
+  })
+}))
+
+vi.mock('@/renderer/extensions/vueNodes/layout/useNodeLayout', () => ({
+  useNodeLayout: () => ({
+    position: { x: 100, y: 50 },
+    size: { width: 200, height: 100 },
+    startDrag: vi.fn(),
+    handleDrag: vi.fn(),
+    endDrag: vi.fn()
+  })
+}))
+
+vi.mock(
+  '@/renderer/extensions/vueNodes/execution/useNodeExecutionState',
+  () => ({
+    useNodeExecutionState: vi.fn(() => ({
+      executing: computed(() => mockData.mockExecuting),
+      progress: computed(() => undefined),
+      progressPercentage: computed(() => undefined),
+      progressState: computed(() => undefined as any),
+      executionState: computed(() => 'idle' as const)
+    }))
+  })
+)
+
+vi.mock('@/renderer/extensions/vueNodes/preview/useNodePreviewState', () => ({
+  useNodePreviewState: vi.fn(() => ({
+    latestPreviewUrl: computed(() => ''),
+    shouldShowPreviewImg: computed(() => false)
+  }))
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      'Node Render Error': 'Node Render Error'
+    }
+  }
+})
+function mountLGraphNode(props: ComponentProps<typeof LGraphNode>) {
+  return mount(LGraphNode, {
+    props,
+    global: {
+      plugins: [
+        createTestingPinia({
+          createSpy: vi.fn
+        }),
+        i18n
+      ],
+      stubs: {
+        NodeHeader: true,
+        NodeSlots: true,
+        NodeWidgets: true,
+        NodeContent: true,
+        SlotConnectionDot: true
+      }
+    }
+  })
+}
+const mockNodeData: VueNodeData = {
+  id: 'test-node-123',
+  title: 'Test Node',
+  type: 'TestNode',
+  mode: 0,
+  flags: {},
+  inputs: [],
+  outputs: [],
+  widgets: [],
+  selected: false,
+  executing: false
+}
+
+describe('LGraphNode', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+    mockData.mockNodeIds = new Set()
+    mockData.mockExecuting = false
+  })
+
+  it('should call resize tracking composable with node ID', () => {
+    mountLGraphNode({ nodeData: mockNodeData })
+
+    expect(useVueElementTracking).toHaveBeenCalledWith(
+      expect.any(Function),
+      'node'
+    )
+    const idArg = vi.mocked(useVueElementTracking).mock.calls[0]?.[0]
+    const id = toValue(idArg)
+    expect(id).toEqual('test-node-123')
+  })
+
+  it('should render with data-node-id attribute', () => {
+    const wrapper = mountLGraphNode({ nodeData: mockNodeData })
+
+    expect(wrapper.attributes('data-node-id')).toBe('test-node-123')
+  })
+
+  it('should render node title', () => {
+    // Don't stub NodeHeader for this test so we can see the title
+    const wrapper = mount(LGraphNode, {
+      props: { nodeData: mockNodeData },
+      global: {
+        plugins: [
+          createTestingPinia({
+            createSpy: vi.fn
+          }),
+          i18n
+        ],
+        stubs: {
+          NodeSlots: true,
+          NodeWidgets: true,
+          NodeContent: true,
+          SlotConnectionDot: true
+        }
+      }
+    })
+
+    expect(wrapper.text()).toContain('Test Node')
+  })
+
+  it('should apply selected styling when selected prop is true', () => {
+    mockData.mockNodeIds = new Set(['test-node-123'])
+    const wrapper = mountLGraphNode({ nodeData: mockNodeData })
+    expect(wrapper.classes()).toContain('outline-2')
+    expect(wrapper.classes()).toContain('outline-black')
+    expect(wrapper.classes()).toContain('dark-theme:outline-white')
+  })
+
+  it('should apply executing animation when executing prop is true', () => {
+    mockData.mockExecuting = true
+
+    const wrapper = mountLGraphNode({ nodeData: mockNodeData })
+
+    expect(wrapper.classes()).toContain('animate-pulse')
+  })
+
+  it('should emit node-click event on pointer up', async () => {
+    const { handleNodeSelect } = useNodeEventHandlers()
+    const wrapper = mountLGraphNode({ nodeData: mockNodeData })
+
+    await wrapper.trigger('pointerup')
+
+    expect(handleNodeSelect).toHaveBeenCalledOnce()
+    expect(handleNodeSelect).toHaveBeenCalledWith(
+      expect.any(PointerEvent),
+      mockNodeData,
+      expect.any(Boolean)
+    )
+  })
+})

tests-ui/tests/renderer/extensions/vueNodes/components/NodeHeader.subgraph.test.ts

@@ -0,0 +1,223 @@
+/**
+ * Tests for NodeHeader subgraph functionality
+ */
+import { createTestingPinia } from '@pinia/testing'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import NodeHeader from '@/renderer/extensions/vueNodes/components/NodeHeader.vue'
+import { getNodeByLocatorId } from '@/utils/graphTraversalUtil'
+
+// Mock dependencies
+vi.mock('@/scripts/app', () => ({
+  app: {
+    graph: null as any
+  }
+}))
+
+vi.mock('@/utils/graphTraversalUtil', () => ({
+  getNodeByLocatorId: vi.fn(),
+  getLocatorIdFromNodeData: vi.fn((nodeData) =>
+    nodeData.subgraphId
+      ? `${nodeData.subgraphId}:${String(nodeData.id)}`
+      : String(nodeData.id)
+  )
+}))
+
+vi.mock('@/composables/useErrorHandling', () => ({
+  useErrorHandling: () => ({
+    toastErrorHandler: vi.fn()
+  })
+}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: vi.fn((key) => key)
+  }),
+  createI18n: vi.fn(() => ({
+    global: {
+      t: vi.fn((key) => key)
+    }
+  }))
+}))
+
+vi.mock('@/i18n', () => ({
+  st: vi.fn((key) => key),
+  t: vi.fn((key) => key),
+  i18n: {
+    global: {
+      t: vi.fn((key) => key)
+    }
+  }
+}))
+
+describe('NodeHeader - Subgraph Functionality', () => {
+  // Helper to setup common mocks
+  const setupMocks = async (isSubgraph = true, hasGraph = true) => {
+    const { app } = await import('@/scripts/app')
+
+    if (hasGraph) {
+      ;(app as any).graph = { rootGraph: {} }
+    } else {
+      ;(app as any).graph = null
+    }
+
+    vi.mocked(getNodeByLocatorId).mockReturnValue({
+      isSubgraphNode: () => isSubgraph
+    } as any)
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const createMockNodeData = (
+    id: string,
+    subgraphId?: string
+  ): VueNodeData => ({
+    id,
+    title: 'Test Node',
+    type: 'TestNode',
+    mode: 0,
+    selected: false,
+    executing: false,
+    subgraphId,
+    widgets: [],
+    inputs: [],
+    outputs: [],
+    hasErrors: false,
+    flags: {}
+  })
+
+  const createWrapper = (props = {}) => {
+    return mount(NodeHeader, {
+      props,
+      global: {
+        plugins: [createTestingPinia({ createSpy: vi.fn })],
+        mocks: {
+          $t: vi.fn((key: string) => key),
+          $primevue: { config: {} }
+        }
+      }
+    })
+  }
+
+  it('should show subgraph button for subgraph nodes', async () => {
+    await setupMocks(true) // isSubgraph = true
+
+    const wrapper = createWrapper({
+      nodeData: createMockNodeData('test-node-1'),
+      readonly: false
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const subgraphButton = wrapper.find('[data-testid="subgraph-enter-button"]')
+    expect(subgraphButton.exists()).toBe(true)
+  })
+
+  it('should not show subgraph button for regular nodes', async () => {
+    await setupMocks(false) // isSubgraph = false
+
+    const wrapper = createWrapper({
+      nodeData: createMockNodeData('test-node-1'),
+      readonly: false
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const subgraphButton = wrapper.find('[data-testid="subgraph-enter-button"]')
+    expect(subgraphButton.exists()).toBe(false)
+  })
+
+  it('should not show subgraph button in readonly mode', async () => {
+    await setupMocks(true) // isSubgraph = true
+
+    const wrapper = createWrapper({
+      nodeData: createMockNodeData('test-node-1'),
+      readonly: true
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const subgraphButton = wrapper.find('[data-testid="subgraph-enter-button"]')
+    expect(subgraphButton.exists()).toBe(false)
+  })
+
+  it('should emit enter-subgraph event when button is clicked', async () => {
+    await setupMocks(true) // isSubgraph = true
+
+    const wrapper = createWrapper({
+      nodeData: createMockNodeData('test-node-1'),
+      readonly: false
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const subgraphButton = wrapper.find('[data-testid="subgraph-enter-button"]')
+    await subgraphButton.trigger('click')
+
+    expect(wrapper.emitted('enter-subgraph')).toBeTruthy()
+    expect(wrapper.emitted('enter-subgraph')).toHaveLength(1)
+  })
+
+  it('should handle subgraph context correctly', async () => {
+    await setupMocks(true) // isSubgraph = true
+
+    const wrapper = createWrapper({
+      nodeData: createMockNodeData('test-node-1', 'subgraph-id'),
+      readonly: false
+    })
+
+    await wrapper.vm.$nextTick()
+
+    // Should call getNodeByLocatorId with correct locator ID
+    expect(vi.mocked(getNodeByLocatorId)).toHaveBeenCalledWith(
+      expect.anything(),
+      'subgraph-id:test-node-1'
+    )
+
+    const subgraphButton = wrapper.find('[data-testid="subgraph-enter-button"]')
+    expect(subgraphButton.exists()).toBe(true)
+  })
+
+  it('should handle missing graph gracefully', async () => {
+    await setupMocks(true, false) // isSubgraph = true, hasGraph = false
+
+    const wrapper = createWrapper({
+      nodeData: createMockNodeData('test-node-1'),
+      readonly: false
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const subgraphButton = wrapper.find('[data-testid="subgraph-enter-button"]')
+    expect(subgraphButton.exists()).toBe(false)
+  })
+
+  it('should prevent event propagation on double click', async () => {
+    await setupMocks(true) // isSubgraph = true
+
+    const wrapper = createWrapper({
+      nodeData: createMockNodeData('test-node-1'),
+      readonly: false
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const subgraphButton = wrapper.find('[data-testid="subgraph-enter-button"]')
+
+    // Mock event object
+    const mockEvent = {
+      stopPropagation: vi.fn()
+    }
+
+    // Trigger dblclick event
+    await subgraphButton.trigger('dblclick', mockEvent)
+
+    // Should prevent propagation (handled by @dblclick.stop directive)
+    // This is tested by ensuring the component doesn't error and renders correctly
+    expect(subgraphButton.exists()).toBe(true)
+  })
+})

tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeEventHandlers.test.ts

@@ -0,0 +1,192 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed, shallowRef } from 'vue'
+
+import {
+  type GraphNodeManager,
+  type VueNodeData,
+  useGraphNodeManager
+} from '@/composables/graph/useGraphNodeManager'
+import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
+import type {
+  LGraph,
+  LGraphCanvas,
+  LGraphNode
+} from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
+import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
+
+vi.mock('@/renderer/core/canvas/canvasStore', () => {
+  const canvas: Partial<LGraphCanvas> = {
+    select: vi.fn(),
+    deselect: vi.fn(),
+    deselectAll: vi.fn()
+  }
+  const updateSelectedItems = vi.fn()
+  return {
+    useCanvasStore: vi.fn(() => ({
+      canvas: canvas as LGraphCanvas,
+      updateSelectedItems,
+      selectedItems: []
+    }))
+  }
+})
+
+vi.mock('@/renderer/core/canvas/useCanvasInteractions', () => ({
+  useCanvasInteractions: vi.fn(() => ({
+    shouldHandleNodePointerEvents: computed(() => true) // Default to allowing pointer events
+  }))
+}))
+
+vi.mock('@/renderer/core/layout/operations/layoutMutations', () => {
+  const setSource = vi.fn()
+  const bringNodeToFront = vi.fn()
+  return {
+    useLayoutMutations: vi.fn(() => ({
+      setSource,
+      bringNodeToFront
+    }))
+  }
+})
+
+vi.mock('@/composables/graph/useGraphNodeManager', () => {
+  const mockNode = {
+    id: 'node-1',
+    selected: false,
+    flags: { pinned: false }
+  }
+  const nodeManager = shallowRef({
+    getNode: vi.fn(() => mockNode as Partial<LGraphNode> as LGraphNode)
+  } as Partial<GraphNodeManager> as GraphNodeManager)
+  return {
+    useGraphNodeManager: vi.fn(() => nodeManager)
+  }
+})
+
+vi.mock('@/composables/graph/useVueNodeLifecycle', () => {
+  const nodeManager = useGraphNodeManager(undefined as unknown as LGraph)
+  return {
+    useVueNodeLifecycle: vi.fn(() => ({
+      nodeManager
+    }))
+  }
+})
+
+describe('useNodeEventHandlers', () => {
+  const { nodeManager: mockNodeManager } = useVueNodeLifecycle()
+
+  const mockNode = mockNodeManager.value!.getNode('fake_id')
+  const mockLayoutMutations = useLayoutMutations()
+
+  const testNodeData: VueNodeData = {
+    id: 'node-1',
+    title: 'Test Node',
+    type: 'test',
+    mode: 0,
+    selected: false,
+    executing: false
+  }
+
+  beforeEach(async () => {
+    vi.restoreAllMocks()
+  })
+
+  describe('handleNodeSelect', () => {
+    it('should select single node on regular click', () => {
+      const { handleNodeSelect } = useNodeEventHandlers()
+      const { canvas, updateSelectedItems } = useCanvasStore()
+
+      const event = new PointerEvent('pointerdown', {
+        bubbles: true,
+        ctrlKey: false,
+        metaKey: false
+      })
+
+      handleNodeSelect(event, testNodeData, false)
+
+      expect(canvas?.deselectAll).toHaveBeenCalledOnce()
+      expect(canvas?.select).toHaveBeenCalledWith(mockNode)
+      expect(updateSelectedItems).toHaveBeenCalledOnce()
+    })
+
+    it('should toggle selection on ctrl+click', () => {
+      const { handleNodeSelect } = useNodeEventHandlers()
+      const { canvas } = useCanvasStore()
+
+      // Test selecting unselected node with ctrl
+      mockNode!.selected = false
+
+      const ctrlClickEvent = new PointerEvent('pointerdown', {
+        bubbles: true,
+        ctrlKey: true,
+        metaKey: false
+      })
+
+      handleNodeSelect(ctrlClickEvent, testNodeData, false)
+
+      expect(canvas?.deselectAll).not.toHaveBeenCalled()
+      expect(canvas?.select).toHaveBeenCalledWith(mockNode)
+    })
+
+    it('should deselect on ctrl+click of selected node', () => {
+      const { handleNodeSelect } = useNodeEventHandlers()
+      const { canvas } = useCanvasStore()
+
+      // Test deselecting selected node with ctrl
+      mockNode!.selected = true
+
+      const ctrlClickEvent = new PointerEvent('pointerdown', {
+        bubbles: true,
+        ctrlKey: true,
+        metaKey: false
+      })
+
+      handleNodeSelect(ctrlClickEvent, testNodeData, false)
+
+      expect(canvas?.deselect).toHaveBeenCalledWith(mockNode)
+      expect(canvas?.select).not.toHaveBeenCalled()
+    })
+
+    it('should handle meta key (Cmd) on Mac', () => {
+      const { handleNodeSelect } = useNodeEventHandlers()
+      const { canvas } = useCanvasStore()
+
+      mockNode!.selected = false
+
+      const metaClickEvent = new PointerEvent('pointerdown', {
+        bubbles: true,
+        ctrlKey: false,
+        metaKey: true
+      })
+
+      handleNodeSelect(metaClickEvent, testNodeData, false)
+
+      expect(canvas?.select).toHaveBeenCalledWith(mockNode)
+      expect(canvas?.deselectAll).not.toHaveBeenCalled()
+    })
+
+    it('should bring node to front when not pinned', () => {
+      const { handleNodeSelect } = useNodeEventHandlers()
+
+      mockNode!.flags.pinned = false
+
+      const event = new PointerEvent('pointerdown')
+      handleNodeSelect(event, testNodeData, false)
+
+      expect(mockLayoutMutations.bringNodeToFront).toHaveBeenCalledWith(
+        'node-1'
+      )
+    })
+
+    it('should not bring pinned node to front', () => {
+      const { handleNodeSelect } = useNodeEventHandlers()
+
+      mockNode!.flags.pinned = true
+
+      const event = new PointerEvent('pointerdown')
+      handleNodeSelect(event, testNodeData, false)
+
+      expect(mockLayoutMutations.bringNodeToFront).not.toHaveBeenCalled()
+    })
+  })
+})

tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeZIndex.test.ts

@@ -0,0 +1,98 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
+import { LayoutSource } from '@/renderer/core/layout/types'
+import { useNodeZIndex } from '@/renderer/extensions/vueNodes/composables/useNodeZIndex'
+
+// Mock the layout mutations module
+vi.mock('@/renderer/core/layout/operations/layoutMutations')
+
+const mockedUseLayoutMutations = vi.mocked(useLayoutMutations)
+
+describe('useNodeZIndex', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('bringNodeToFront', () => {
+    it('should bring node to front with default source', () => {
+      const mockSetSource = vi.fn()
+      const mockBringNodeToFront = vi.fn()
+
+      mockedUseLayoutMutations.mockReturnValue({
+        setSource: mockSetSource,
+        bringNodeToFront: mockBringNodeToFront
+      } as Partial<ReturnType<typeof useLayoutMutations>> as ReturnType<
+        typeof useLayoutMutations
+      >)
+
+      const { bringNodeToFront } = useNodeZIndex()
+
+      bringNodeToFront('node1')
+
+      expect(mockSetSource).toHaveBeenCalledWith(LayoutSource.Vue)
+      expect(mockBringNodeToFront).toHaveBeenCalledWith('node1')
+    })
+
+    it('should bring node to front with custom source', () => {
+      const mockSetSource = vi.fn()
+      const mockBringNodeToFront = vi.fn()
+
+      mockedUseLayoutMutations.mockReturnValue({
+        setSource: mockSetSource,
+        bringNodeToFront: mockBringNodeToFront
+      } as Partial<ReturnType<typeof useLayoutMutations>> as ReturnType<
+        typeof useLayoutMutations
+      >)
+
+      const { bringNodeToFront } = useNodeZIndex()
+
+      bringNodeToFront('node2', LayoutSource.Canvas)
+
+      expect(mockSetSource).toHaveBeenCalledWith(LayoutSource.Canvas)
+      expect(mockBringNodeToFront).toHaveBeenCalledWith('node2')
+    })
+
+    it('should use custom layout source from options', () => {
+      const mockSetSource = vi.fn()
+      const mockBringNodeToFront = vi.fn()
+
+      mockedUseLayoutMutations.mockReturnValue({
+        setSource: mockSetSource,
+        bringNodeToFront: mockBringNodeToFront
+      } as Partial<ReturnType<typeof useLayoutMutations>> as ReturnType<
+        typeof useLayoutMutations
+      >)
+
+      const { bringNodeToFront } = useNodeZIndex({
+        layoutSource: LayoutSource.External
+      })
+
+      bringNodeToFront('node3')
+
+      expect(mockSetSource).toHaveBeenCalledWith(LayoutSource.External)
+      expect(mockBringNodeToFront).toHaveBeenCalledWith('node3')
+    })
+
+    it('should override layout source with explicit source parameter', () => {
+      const mockSetSource = vi.fn()
+      const mockBringNodeToFront = vi.fn()
+
+      mockedUseLayoutMutations.mockReturnValue({
+        setSource: mockSetSource,
+        bringNodeToFront: mockBringNodeToFront
+      } as Partial<ReturnType<typeof useLayoutMutations>> as ReturnType<
+        typeof useLayoutMutations
+      >)
+
+      const { bringNodeToFront } = useNodeZIndex({
+        layoutSource: LayoutSource.External
+      })
+
+      bringNodeToFront('node4', LayoutSource.Canvas)
+
+      expect(mockSetSource).toHaveBeenCalledWith(LayoutSource.Canvas)
+      expect(mockBringNodeToFront).toHaveBeenCalledWith('node4')
+    })
+  })
+})

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

@@ -0,0 +1,69 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, reactive } from 'vue'
+
+import { useLOD } from '@/renderer/extensions/vueNodes/lod/useLOD'
+
+const mockSettingStore = reactive({
+  get: vi.fn(() => 8)
+})
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => mockSettingStore
+}))
+
+describe('useLOD', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+    vi.unstubAllGlobals()
+
+    mockSettingStore.get.mockReturnValue(8)
+  })
+
+  it('should calculate isLOD value based on zoom threshold correctly', async () => {
+    vi.stubGlobal('devicePixelRatio', 1)
+
+    const camera = reactive({ z: 1 })
+    const { isLOD } = useLOD(camera)
+
+    await nextTick()
+    expect(isLOD.value).toBe(false)
+
+    camera.z = 0.55
+    await nextTick()
+    expect(isLOD.value).toBe(true)
+
+    camera.z = 0.87
+    await nextTick()
+    expect(isLOD.value).toBe(false)
+  })
+
+  it('should handle a different devicePixelRatio value', async () => {
+    vi.stubGlobal('devicePixelRatio', 3) //Threshold with 8px minFontsize = 0.19
+
+    const camera = reactive({ z: 1 })
+    const { isLOD } = useLOD(camera)
+
+    await nextTick()
+    expect(isLOD.value).toBe(false)
+
+    camera.z = 0.18
+    await nextTick()
+    expect(isLOD.value).toBe(true)
+  })
+
+  it('should respond to different minFontSize settings', async () => {
+    vi.stubGlobal('devicePixelRatio', 1)
+
+    mockSettingStore.get.mockReturnValue(16) //Now threshold is 1.14
+
+    const camera = reactive({ z: 1 })
+    const { isLOD } = useLOD(camera)
+
+    await nextTick()
+    expect(isLOD.value).toBe(true)
+
+    camera.z = 1.15
+    await nextTick()
+    expect(isLOD.value).toBe(false)
+  })
+})

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

@@ -0,0 +1,300 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
+import { assetService } from '@/platform/assets/services/assetService'
+import { useComboWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useComboWidget'
+import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+
+vi.mock('@/scripts/widgets', () => ({
+  addValueControlWidgets: vi.fn()
+}))
+
+const mockSettingStoreGet = vi.fn(() => false)
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: vi.fn(() => ({
+    get: mockSettingStoreGet
+  }))
+}))
+
+vi.mock('@/i18n', () => ({
+  t: vi.fn((key: string) =>
+    key === 'widgets.selectModel' ? 'Select model' : key
+  )
+}))
+
+vi.mock('@/platform/assets/services/assetService', () => ({
+  assetService: {
+    isAssetBrowserEligible: vi.fn(() => false)
+  }
+}))
+
+vi.mock('@/platform/assets/composables/useAssetBrowserDialog', () => {
+  const mockAssetBrowserDialogShow = vi.fn()
+  return {
+    useAssetBrowserDialog: vi.fn(() => ({
+      show: mockAssetBrowserDialogShow
+    }))
+  }
+})
+
+// Test factory functions
+function createMockWidget(overrides: Partial<IBaseWidget> = {}): IBaseWidget {
+  const mockCallback = vi.fn()
+  return {
+    type: 'combo',
+    options: {},
+    name: 'testWidget',
+    value: undefined,
+    callback: mockCallback,
+    y: 0,
+    ...overrides
+  } as IBaseWidget
+}
+
+function createMockNode(comfyClass = 'TestNode'): LGraphNode {
+  const node = new LGraphNode('TestNode')
+  node.comfyClass = comfyClass
+
+  // Spy on the addWidget method
+  vi.spyOn(node, 'addWidget').mockImplementation(
+    (type, name, value, callback) => {
+      const widget = createMockWidget({ type, name, value })
+      // Store the callback function on the widget for testing
+      if (typeof callback === 'function') {
+        widget.callback = callback
+      }
+      return widget
+    }
+  )
+
+  return node
+}
+
+function createMockInputSpec(overrides: Partial<InputSpec> = {}): InputSpec {
+  return {
+    type: 'COMBO',
+    name: 'testInput',
+    ...overrides
+  } as InputSpec
+}
+
+describe('useComboWidget', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockSettingStoreGet.mockReturnValue(false)
+    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(false)
+    vi.mocked(useAssetBrowserDialog).mockClear()
+  })
+
+  it('should handle undefined spec', () => {
+    const constructor = useComboWidget()
+    const mockWidget = createMockWidget()
+    const mockNode = createMockNode()
+    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
+    const inputSpec = createMockInputSpec({ name: 'inputName' })
+
+    const widget = constructor(mockNode, inputSpec)
+
+    expect(mockNode.addWidget).toHaveBeenCalledWith(
+      'combo',
+      'inputName',
+      undefined,
+      expect.any(Function),
+      expect.objectContaining({
+        values: []
+      })
+    )
+    expect(widget).toBe(mockWidget)
+  })
+
+  it('should create normal combo widget when asset API is disabled', () => {
+    mockSettingStoreGet.mockReturnValue(false) // Asset API disabled
+    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(true) // Widget is eligible
+
+    const constructor = useComboWidget()
+    const mockWidget = createMockWidget()
+    const mockNode = createMockNode('CheckpointLoaderSimple')
+    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
+    const inputSpec = createMockInputSpec({
+      name: 'ckpt_name',
+      options: ['model1.safetensors', 'model2.safetensors']
+    })
+
+    const widget = constructor(mockNode, inputSpec)
+    expect(widget).toBe(mockWidget)
+
+    expect(mockNode.addWidget).toHaveBeenCalledWith(
+      'combo',
+      'ckpt_name',
+      'model1.safetensors',
+      expect.any(Function),
+      { values: ['model1.safetensors', 'model2.safetensors'] }
+    )
+    expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
+    expect(widget).toBe(mockWidget)
+  })
+
+  it('should create normal combo widget when widget is not eligible for asset browser', () => {
+    mockSettingStoreGet.mockReturnValue(true)
+    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(false)
+
+    const constructor = useComboWidget()
+    const mockWidget = createMockWidget()
+    const mockNode = createMockNode()
+    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
+    const inputSpec = createMockInputSpec({
+      name: 'not_eligible_widget',
+      options: ['option1', 'option2']
+    })
+
+    const widget = constructor(mockNode, inputSpec)
+
+    expect(mockNode.addWidget).toHaveBeenCalledWith(
+      'combo',
+      'not_eligible_widget',
+      'option1',
+      expect.any(Function),
+      { values: ['option1', 'option2'] }
+    )
+    expect(vi.mocked(assetService.isAssetBrowserEligible)).toHaveBeenCalledWith(
+      'not_eligible_widget',
+      'TestNode'
+    )
+    expect(widget).toBe(mockWidget)
+  })
+
+  it('should create asset browser widget when API enabled and widget eligible', () => {
+    mockSettingStoreGet.mockReturnValue(true)
+    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(true)
+
+    const constructor = useComboWidget()
+    const mockWidget = createMockWidget({
+      type: 'asset',
+      name: 'ckpt_name',
+      value: 'model1.safetensors'
+    })
+    const mockNode = createMockNode('CheckpointLoaderSimple')
+    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
+    const inputSpec = createMockInputSpec({
+      name: 'ckpt_name',
+      options: ['model1.safetensors', 'model2.safetensors']
+    })
+
+    const widget = constructor(mockNode, inputSpec)
+
+    expect(mockNode.addWidget).toHaveBeenCalledWith(
+      'asset',
+      'ckpt_name',
+      'model1.safetensors',
+      expect.any(Function)
+    )
+    expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
+    expect(vi.mocked(assetService.isAssetBrowserEligible)).toHaveBeenCalledWith(
+      'ckpt_name',
+      'CheckpointLoaderSimple'
+    )
+    expect(widget).toBe(mockWidget)
+  })
+
+  it('should create asset browser widget with options when API enabled and widget eligible', () => {
+    mockSettingStoreGet.mockReturnValue(true)
+    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(true)
+
+    const constructor = useComboWidget()
+    const mockWidget = createMockWidget({
+      type: 'asset',
+      name: 'ckpt_name',
+      value: 'model1.safetensors'
+    })
+    const mockNode = createMockNode('CheckpointLoaderSimple')
+    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
+    const inputSpec = createMockInputSpec({
+      name: 'ckpt_name',
+      options: ['model1.safetensors', 'model2.safetensors']
+    })
+
+    const widget = constructor(mockNode, inputSpec)
+
+    expect(mockNode.addWidget).toHaveBeenCalledWith(
+      'asset',
+      'ckpt_name',
+      'model1.safetensors',
+      expect.any(Function)
+    )
+    expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
+    expect(vi.mocked(assetService.isAssetBrowserEligible)).toHaveBeenCalledWith(
+      'ckpt_name',
+      'CheckpointLoaderSimple'
+    )
+    expect(widget).toBe(mockWidget)
+  })
+
+  it('should use asset browser widget even when inputSpec has a default value but no options', () => {
+    mockSettingStoreGet.mockReturnValue(true)
+    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(true)
+
+    const constructor = useComboWidget()
+    const mockWidget = createMockWidget({
+      type: 'asset',
+      name: 'ckpt_name',
+      value: 'fallback.safetensors'
+    })
+    const mockNode = createMockNode('CheckpointLoaderSimple')
+    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
+    const inputSpec = createMockInputSpec({
+      name: 'ckpt_name',
+      default: 'fallback.safetensors'
+      // Note: no options array provided
+    })
+
+    const widget = constructor(mockNode, inputSpec)
+
+    expect(mockNode.addWidget).toHaveBeenCalledWith(
+      'asset',
+      'ckpt_name',
+      'fallback.safetensors',
+      expect.any(Function)
+    )
+    expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
+    expect(vi.mocked(assetService.isAssetBrowserEligible)).toHaveBeenCalledWith(
+      'ckpt_name',
+      'CheckpointLoaderSimple'
+    )
+    expect(widget).toBe(mockWidget)
+  })
+
+  it('should show Select model when asset widget has undefined current value', () => {
+    mockSettingStoreGet.mockReturnValue(true)
+    vi.mocked(assetService.isAssetBrowserEligible).mockReturnValue(true)
+
+    const constructor = useComboWidget()
+    const mockWidget = createMockWidget({
+      type: 'asset',
+      name: 'ckpt_name',
+      value: 'Select model'
+    })
+    const mockNode = createMockNode('CheckpointLoaderSimple')
+    vi.mocked(mockNode.addWidget).mockReturnValue(mockWidget)
+    const inputSpec = createMockInputSpec({
+      name: 'ckpt_name'
+      // Note: no default, no options, not remote - getDefaultValue returns undefined
+    })
+
+    const widget = constructor(mockNode, inputSpec)
+
+    expect(mockNode.addWidget).toHaveBeenCalledWith(
+      'asset',
+      'ckpt_name',
+      'Select model', // Should fallback to this instead of undefined
+      expect.any(Function)
+    )
+    expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
+    expect(vi.mocked(assetService.isAssetBrowserEligible)).toHaveBeenCalledWith(
+      'ckpt_name',
+      'CheckpointLoaderSimple'
+    )
+    expect(widget).toBe(mockWidget)
+  })
+})

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('@/platform/settings/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('@/platform/settings/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/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 type { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
+
+vi.mock('axios', () => {
+  return {
+    default: {
+      get: vi.fn()
+    }
+  }
+})
+
+vi.mock('@/i18n', () => ({
+  i18n: {
+    global: {
+      t: vi.fn((key) => key)
+    }
+  }
+}))
+
+vi.mock('@/platform/settings/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,168 @@
+import { describe, expect, it } from 'vitest'
+
+import WidgetButton from '@/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue'
+import WidgetColorPicker from '@/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue'
+import WidgetFileUpload from '@/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue'
+import WidgetInputNumber from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue'
+import WidgetInputText from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue'
+import WidgetMarkdown from '@/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue'
+import WidgetSelect from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue'
+import WidgetTextarea from '@/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue'
+import WidgetToggleSwitch from '@/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue'
+import {
+  getComponent,
+  isEssential,
+  shouldRenderAsVue
+} from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
+
+describe('widgetRegistry', () => {
+  describe('getComponent', () => {
+    // Test number type mappings
+    describe('number types', () => {
+      it('should map int types to slider widget', () => {
+        expect(getComponent('int')).toBe(WidgetInputNumber)
+        expect(getComponent('INT')).toBe(WidgetInputNumber)
+      })
+
+      it('should map float types to slider widget', () => {
+        expect(getComponent('float')).toBe(WidgetInputNumber)
+        expect(getComponent('FLOAT')).toBe(WidgetInputNumber)
+        expect(getComponent('number')).toBe(WidgetInputNumber)
+        expect(getComponent('slider')).toBe(WidgetInputNumber)
+      })
+    })
+
+    // Test text type mappings
+    describe('text types', () => {
+      it('should map text variations to input text widget', () => {
+        expect(getComponent('text')).toBe(WidgetInputText)
+        expect(getComponent('string')).toBe(WidgetInputText)
+        expect(getComponent('STRING')).toBe(WidgetInputText)
+      })
+
+      it('should map multiline text types to textarea widget', () => {
+        expect(getComponent('multiline')).toBe(WidgetTextarea)
+        expect(getComponent('textarea')).toBe(WidgetTextarea)
+        expect(getComponent('TEXTAREA')).toBe(WidgetTextarea)
+        expect(getComponent('customtext')).toBe(WidgetTextarea)
+      })
+
+      it('should map markdown to markdown widget', () => {
+        expect(getComponent('MARKDOWN')).toBe(WidgetMarkdown)
+        expect(getComponent('markdown')).toBe(WidgetMarkdown)
+      })
+    })
+
+    // Test selection type mappings
+    describe('selection types', () => {
+      it('should map combo types to select widget', () => {
+        expect(getComponent('combo')).toBe(WidgetSelect)
+        expect(getComponent('COMBO')).toBe(WidgetSelect)
+      })
+    })
+
+    // Test boolean type mappings
+    describe('boolean types', () => {
+      it('should map boolean types to toggle switch widget', () => {
+        expect(getComponent('toggle')).toBe(WidgetToggleSwitch)
+        expect(getComponent('boolean')).toBe(WidgetToggleSwitch)
+        expect(getComponent('BOOLEAN')).toBe(WidgetToggleSwitch)
+      })
+    })
+
+    // Test advanced widget mappings
+    describe('advanced widgets', () => {
+      it('should map color types to color picker widget', () => {
+        expect(getComponent('color')).toBe(WidgetColorPicker)
+        expect(getComponent('COLOR')).toBe(WidgetColorPicker)
+      })
+
+      it('should map file types to file upload widget', () => {
+        expect(getComponent('file')).toBe(WidgetFileUpload)
+        expect(getComponent('fileupload')).toBe(WidgetFileUpload)
+        expect(getComponent('FILEUPLOAD')).toBe(WidgetFileUpload)
+      })
+
+      it('should map button types to button widget', () => {
+        expect(getComponent('button')).toBe(WidgetButton)
+        expect(getComponent('BUTTON')).toBe(WidgetButton)
+      })
+    })
+
+    // Test fallback behavior
+    describe('fallback behavior', () => {
+      it('should return null for unknown types', () => {
+        expect(getComponent('unknown')).toBe(null)
+        expect(getComponent('custom_widget')).toBe(null)
+        expect(getComponent('')).toBe(null)
+      })
+    })
+  })
+
+  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: 'int' })).toBe(true)
+      expect(shouldRenderAsVue({ type: 'combo' })).toBe(true)
+    })
+
+    it('should return false for unknown types', () => {
+      expect(shouldRenderAsVue({ type: 'unknown_type' })).toBe(false)
+    })
+
+    it('should respect options while checking type', () => {
+      const widget = { type: 'text', options: { someOption: 'value' } }
+      expect(shouldRenderAsVue(widget)).toBe(true)
+    })
+  })
+
+  describe('isEssential', () => {
+    it('should identify essential widget types', () => {
+      expect(isEssential('int')).toBe(true)
+      expect(isEssential('INT')).toBe(true)
+      expect(isEssential('float')).toBe(true)
+      expect(isEssential('FLOAT')).toBe(true)
+      expect(isEssential('boolean')).toBe(true)
+      expect(isEssential('BOOLEAN')).toBe(true)
+      expect(isEssential('combo')).toBe(true)
+      expect(isEssential('COMBO')).toBe(true)
+    })
+
+    it('should identify non-essential widget types', () => {
+      expect(isEssential('button')).toBe(false)
+      expect(isEssential('color')).toBe(false)
+      expect(isEssential('chart')).toBe(false)
+      expect(isEssential('fileupload')).toBe(false)
+    })
+
+    it('should return false for unknown types', () => {
+      expect(isEssential('unknown')).toBe(false)
+      expect(isEssential('')).toBe(false)
+    })
+  })
+
+  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 through aliases', () => {
+      // Test that both lowercase and uppercase work
+      expect(getComponent('string')).toBe(WidgetInputText)
+      expect(getComponent('STRING')).toBe(WidgetInputText)
+      expect(getComponent('combo')).toBe(WidgetSelect)
+      expect(getComponent('COMBO')).toBe(WidgetSelect)
+    })
+  })
+})