merge main into rh-test

tests-ui/tests/composables/BrowserTabTitle.test.ts

@@ -26,7 +26,7 @@ vi.mock('@/stores/executionStore', () => ({
 const settingStore = reactive({
   get: vi.fn(() => 'Enabled')
 })
-vi.mock('@/stores/settingStore', () => ({
+vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: () => settingStore
 }))
 
@@ -34,7 +34,7 @@ vi.mock('@/stores/settingStore', () => ({
 const workflowStore = reactive({
   activeWorkflow: null as any
 })
-vi.mock('@/stores/workflowStore', () => ({
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
   useWorkflowStore: () => workflowStore
 }))
 

tests-ui/tests/composables/canvas/useCanvasTransformSync.test.ts

@@ -1,129 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-
-import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
-
-// Mock canvas store
-let mockGetCanvas = vi.fn()
-vi.mock('@/stores/graphStore', () => ({
-  useCanvasStore: vi.fn(() => ({
-    getCanvas: mockGetCanvas
-  }))
-}))
-
-describe('useCanvasTransformSync', () => {
-  let mockCanvas: { ds: { scale: number; offset: [number, number] } }
-  let syncFn: ReturnType<typeof vi.fn>
-
-  beforeEach(() => {
-    mockCanvas = {
-      ds: {
-        scale: 1,
-        offset: [0, 0]
-      }
-    }
-    syncFn = vi.fn()
-    mockGetCanvas = vi.fn(() => mockCanvas)
-    vi.clearAllMocks()
-  })
-
-  it('should not call syncFn when transform has not changed', async () => {
-    const { startSync } = useCanvasTransformSync(syncFn, { autoStart: false })
-
-    startSync()
-    await nextTick()
-
-    // Should call once initially
-    expect(syncFn).toHaveBeenCalledTimes(1)
-
-    // Wait for next RAF cycle
-    await new Promise((resolve) => requestAnimationFrame(resolve))
-
-    // Should not call again since transform didn't change
-    expect(syncFn).toHaveBeenCalledTimes(1)
-  })
-
-  it('should call syncFn when scale changes', async () => {
-    const { startSync } = useCanvasTransformSync(syncFn, { autoStart: false })
-
-    startSync()
-    await nextTick()
-
-    expect(syncFn).toHaveBeenCalledTimes(1)
-
-    // Change scale
-    mockCanvas.ds.scale = 2
-
-    // Wait for next RAF cycle
-    await new Promise((resolve) => requestAnimationFrame(resolve))
-
-    expect(syncFn).toHaveBeenCalledTimes(2)
-  })
-
-  it('should call syncFn when offset changes', async () => {
-    const { startSync } = useCanvasTransformSync(syncFn, { autoStart: false })
-
-    startSync()
-    await nextTick()
-
-    expect(syncFn).toHaveBeenCalledTimes(1)
-
-    // Change offset
-    mockCanvas.ds.offset = [10, 20]
-
-    // Wait for next RAF cycles
-    await new Promise((resolve) => requestAnimationFrame(resolve))
-
-    expect(syncFn).toHaveBeenCalledTimes(2)
-  })
-
-  it('should stop calling syncFn after stopSync is called', async () => {
-    const { startSync, stopSync } = useCanvasTransformSync(syncFn, {
-      autoStart: false
-    })
-
-    startSync()
-    await nextTick()
-
-    expect(syncFn).toHaveBeenCalledTimes(1)
-
-    stopSync()
-
-    // Change transform after stopping
-    mockCanvas.ds.scale = 2
-
-    // Wait for RAF cycle
-    await new Promise((resolve) => requestAnimationFrame(resolve))
-
-    // Should not call again
-    expect(syncFn).toHaveBeenCalledTimes(1)
-  })
-
-  it('should handle null canvas gracefully', async () => {
-    mockGetCanvas.mockReturnValue(null)
-    const { startSync } = useCanvasTransformSync(syncFn, { autoStart: false })
-
-    startSync()
-    await nextTick()
-
-    // Should not call syncFn with null canvas
-    expect(syncFn).not.toHaveBeenCalled()
-  })
-
-  it('should call onStart and onStop callbacks', () => {
-    const onStart = vi.fn()
-    const onStop = vi.fn()
-
-    const { startSync, stopSync } = useCanvasTransformSync(syncFn, {
-      autoStart: false,
-      onStart,
-      onStop
-    })
-
-    startSync()
-    expect(onStart).toHaveBeenCalledTimes(1)
-
-    stopSync()
-    expect(onStop).toHaveBeenCalledTimes(1)
-  })
-})

tests-ui/tests/composables/canvas/useSelectedLiteGraphItems.test.ts

@@ -2,14 +2,14 @@ import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import {
   LGraphEventMode,
-  LGraphNode,
-  Positionable,
+  type Positionable,
   Reroute
 } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
-import { useCanvasStore } from '@/stores/graphStore'
 
 // Mock the app module
 vi.mock('@/scripts/app', () => ({
@@ -237,9 +237,9 @@ describe('useSelectedLiteGraphItems', () => {
       toggleSelectedNodesMode(LGraphEventMode.NEVER)
 
       // node1 should change from ALWAYS to NEVER
-      // node2 should change from NEVER to ALWAYS (since it was already NEVER)
+      // node2 should stay NEVER (since a selected node exists which is not NEVER)
       expect(node1.mode).toBe(LGraphEventMode.NEVER)
-      expect(node2.mode).toBe(LGraphEventMode.ALWAYS)
+      expect(node2.mode).toBe(LGraphEventMode.NEVER)
     })
 
     it('toggleSelectedNodesMode should set mode to ALWAYS when already in target mode', () => {

tests-ui/tests/composables/element/useTransformState.test.ts

@@ -0,0 +1,351 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
+
+// Create a mock canvas context for transform testing
+function createMockCanvasContext() {
+  return {
+    canvas: {
+      width: 1280,
+      height: 720,
+      getBoundingClientRect: () => ({
+        left: 0,
+        top: 0,
+        width: 1280,
+        height: 720,
+        right: 1280,
+        bottom: 720,
+        x: 0,
+        y: 0
+      })
+    },
+    ds: {
+      offset: [0, 0],
+      scale: 1
+    }
+  }
+}
+
+describe('useTransformState', () => {
+  let transformState: ReturnType<typeof useTransformState>
+
+  beforeEach(() => {
+    transformState = useTransformState()
+  })
+
+  describe('initial state', () => {
+    it('should initialize with default camera values', () => {
+      const { camera } = transformState
+      expect(camera.x).toBe(0)
+      expect(camera.y).toBe(0)
+      expect(camera.z).toBe(1)
+    })
+
+    it('should generate correct initial transform style', () => {
+      const { transformStyle } = transformState
+      expect(transformStyle.value).toEqual({
+        transform: 'scale(1) translate(0px, 0px)',
+        transformOrigin: '0 0'
+      })
+    })
+  })
+
+  describe('syncWithCanvas', () => {
+    it('should sync camera state with canvas transform', () => {
+      const { syncWithCanvas, camera } = transformState
+      const mockCanvas = createMockCanvasContext()
+
+      // Set mock canvas transform
+      mockCanvas.ds.offset = [100, 50]
+      mockCanvas.ds.scale = 2
+
+      syncWithCanvas(mockCanvas as any)
+
+      expect(camera.x).toBe(100)
+      expect(camera.y).toBe(50)
+      expect(camera.z).toBe(2)
+    })
+
+    it('should handle null canvas gracefully', () => {
+      const { syncWithCanvas, camera } = transformState
+
+      syncWithCanvas(null as any)
+
+      // Should remain at initial values
+      expect(camera.x).toBe(0)
+      expect(camera.y).toBe(0)
+      expect(camera.z).toBe(1)
+    })
+
+    it('should handle canvas without ds property', () => {
+      const { syncWithCanvas, camera } = transformState
+      const canvasWithoutDs = { canvas: {} }
+
+      syncWithCanvas(canvasWithoutDs as any)
+
+      // Should remain at initial values
+      expect(camera.x).toBe(0)
+      expect(camera.y).toBe(0)
+      expect(camera.z).toBe(1)
+    })
+
+    it('should update transform style after sync', () => {
+      const { syncWithCanvas, transformStyle } = transformState
+      const mockCanvas = createMockCanvasContext()
+
+      mockCanvas.ds.offset = [150, 75]
+      mockCanvas.ds.scale = 0.5
+
+      syncWithCanvas(mockCanvas as any)
+
+      expect(transformStyle.value).toEqual({
+        transform: 'scale(0.5) translate(150px, 75px)',
+        transformOrigin: '0 0'
+      })
+    })
+  })
+
+  describe('coordinate conversions', () => {
+    beforeEach(() => {
+      // Set up a known transform state
+      const mockCanvas = createMockCanvasContext()
+      mockCanvas.ds.offset = [100, 50]
+      mockCanvas.ds.scale = 2
+      transformState.syncWithCanvas(mockCanvas as any)
+    })
+
+    describe('canvasToScreen', () => {
+      it('should convert canvas coordinates to screen coordinates', () => {
+        const { canvasToScreen } = transformState
+
+        const canvasPoint = { x: 10, y: 20 }
+        const screenPoint = canvasToScreen(canvasPoint)
+
+        // screen = (canvas + offset) * scale
+        // x: (10 + 100) * 2 = 220
+        // y: (20 + 50) * 2 = 140
+        expect(screenPoint).toEqual({ x: 220, y: 140 })
+      })
+
+      it('should handle zero coordinates', () => {
+        const { canvasToScreen } = transformState
+
+        const screenPoint = canvasToScreen({ x: 0, y: 0 })
+        expect(screenPoint).toEqual({ x: 200, y: 100 })
+      })
+
+      it('should handle negative coordinates', () => {
+        const { canvasToScreen } = transformState
+
+        const screenPoint = canvasToScreen({ x: -10, y: -20 })
+        expect(screenPoint).toEqual({ x: 180, y: 60 })
+      })
+    })
+
+    describe('screenToCanvas', () => {
+      it('should convert screen coordinates to canvas coordinates', () => {
+        const { screenToCanvas } = transformState
+
+        const screenPoint = { x: 220, y: 140 }
+        const canvasPoint = screenToCanvas(screenPoint)
+
+        // canvas = screen / scale - offset
+        // x: 220 / 2 - 100 = 10
+        // y: 140 / 2 - 50 = 20
+        expect(canvasPoint).toEqual({ x: 10, y: 20 })
+      })
+
+      it('should be inverse of canvasToScreen', () => {
+        const { canvasToScreen, screenToCanvas } = transformState
+
+        const originalPoint = { x: 25, y: 35 }
+        const screenPoint = canvasToScreen(originalPoint)
+        const backToCanvas = screenToCanvas(screenPoint)
+
+        expect(backToCanvas.x).toBeCloseTo(originalPoint.x)
+        expect(backToCanvas.y).toBeCloseTo(originalPoint.y)
+      })
+    })
+  })
+
+  describe('getNodeScreenBounds', () => {
+    beforeEach(() => {
+      const mockCanvas = createMockCanvasContext()
+      mockCanvas.ds.offset = [100, 50]
+      mockCanvas.ds.scale = 2
+      transformState.syncWithCanvas(mockCanvas as any)
+    })
+
+    it('should calculate correct screen bounds for a node', () => {
+      const { getNodeScreenBounds } = transformState
+
+      const nodePos = [10, 20]
+      const nodeSize = [200, 100]
+      const bounds = getNodeScreenBounds(nodePos, nodeSize)
+
+      // Top-left: canvasToScreen(10, 20) = (220, 140)
+      // Width: 200 * 2 = 400
+      // Height: 100 * 2 = 200
+      expect(bounds.x).toBe(220)
+      expect(bounds.y).toBe(140)
+      expect(bounds.width).toBe(400)
+      expect(bounds.height).toBe(200)
+    })
+  })
+
+  describe('isNodeInViewport', () => {
+    beforeEach(() => {
+      const mockCanvas = createMockCanvasContext()
+      mockCanvas.ds.offset = [0, 0]
+      mockCanvas.ds.scale = 1
+      transformState.syncWithCanvas(mockCanvas as any)
+    })
+
+    const viewport = { width: 1000, height: 600 }
+
+    it('should return true for nodes inside viewport', () => {
+      const { isNodeInViewport } = transformState
+
+      const nodePos = [100, 100]
+      const nodeSize = [200, 100]
+
+      expect(isNodeInViewport(nodePos, nodeSize, viewport)).toBe(true)
+    })
+
+    it('should return false for nodes completely outside viewport', () => {
+      const { isNodeInViewport } = transformState
+
+      // Node far to the right
+      expect(isNodeInViewport([2000, 100], [200, 100], viewport)).toBe(false)
+
+      // Node far to the left
+      expect(isNodeInViewport([-500, 100], [200, 100], viewport)).toBe(false)
+
+      // Node far below
+      expect(isNodeInViewport([100, 1000], [200, 100], viewport)).toBe(false)
+
+      // Node far above
+      expect(isNodeInViewport([100, -500], [200, 100], viewport)).toBe(false)
+    })
+
+    it('should return true for nodes partially in viewport with margin', () => {
+      const { isNodeInViewport } = transformState
+
+      // Node slightly outside but within margin
+      const nodePos = [-50, -50]
+      const nodeSize = [100, 100]
+
+      expect(isNodeInViewport(nodePos, nodeSize, viewport, 0.2)).toBe(true)
+    })
+
+    it('should return false for tiny nodes (size culling)', () => {
+      const { isNodeInViewport } = transformState
+
+      // Node is in viewport but too small
+      const nodePos = [100, 100]
+      const nodeSize = [3, 3] // Less than 4 pixels
+
+      expect(isNodeInViewport(nodePos, nodeSize, viewport)).toBe(false)
+    })
+
+    it('should adjust margin based on zoom level', () => {
+      const { isNodeInViewport, syncWithCanvas } = transformState
+      const mockCanvas = createMockCanvasContext()
+
+      // Test with very low zoom
+      mockCanvas.ds.scale = 0.05
+      syncWithCanvas(mockCanvas as any)
+
+      // Node at edge should still be visible due to increased margin
+      expect(isNodeInViewport([1100, 100], [200, 100], viewport)).toBe(true)
+
+      // Test with high zoom
+      mockCanvas.ds.scale = 4
+      syncWithCanvas(mockCanvas as any)
+
+      // Margin should be tighter
+      expect(isNodeInViewport([1100, 100], [200, 100], viewport)).toBe(false)
+    })
+  })
+
+  describe('getViewportBounds', () => {
+    beforeEach(() => {
+      const mockCanvas = createMockCanvasContext()
+      mockCanvas.ds.offset = [100, 50]
+      mockCanvas.ds.scale = 2
+      transformState.syncWithCanvas(mockCanvas as any)
+    })
+
+    it('should calculate viewport bounds in canvas coordinates', () => {
+      const { getViewportBounds } = transformState
+      const viewport = { width: 1000, height: 600 }
+
+      const bounds = getViewportBounds(viewport, 0.2)
+
+      // With 20% margin:
+      // marginX = 1000 * 0.2 = 200
+      // marginY = 600 * 0.2 = 120
+      // topLeft in screen: (-200, -120)
+      // bottomRight in screen: (1200, 720)
+
+      // Convert to canvas coordinates (canvas = screen / scale - offset):
+      // topLeft: (-200 / 2 - 100, -120 / 2 - 50) = (-200, -110)
+      // bottomRight: (1200 / 2 - 100, 720 / 2 - 50) = (500, 310)
+
+      expect(bounds.x).toBe(-200)
+      expect(bounds.y).toBe(-110)
+      expect(bounds.width).toBe(700) // 500 - (-200)
+      expect(bounds.height).toBe(420) // 310 - (-110)
+    })
+
+    it('should handle zero margin', () => {
+      const { getViewportBounds } = transformState
+      const viewport = { width: 1000, height: 600 }
+
+      const bounds = getViewportBounds(viewport, 0)
+
+      // No margin, so viewport bounds are exact
+      expect(bounds.x).toBe(-100) // 0 / 2 - 100
+      expect(bounds.y).toBe(-50) // 0 / 2 - 50
+      expect(bounds.width).toBe(500) // 1000 / 2
+      expect(bounds.height).toBe(300) // 600 / 2
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle extreme zoom levels', () => {
+      const { syncWithCanvas, canvasToScreen } = transformState
+      const mockCanvas = createMockCanvasContext()
+
+      // Very small zoom
+      mockCanvas.ds.scale = 0.001
+      syncWithCanvas(mockCanvas as any)
+
+      const point1 = canvasToScreen({ x: 1000, y: 1000 })
+      expect(point1.x).toBeCloseTo(1)
+      expect(point1.y).toBeCloseTo(1)
+
+      // Very large zoom
+      mockCanvas.ds.scale = 100
+      syncWithCanvas(mockCanvas as any)
+
+      const point2 = canvasToScreen({ x: 1, y: 1 })
+      expect(point2.x).toBe(100)
+      expect(point2.y).toBe(100)
+    })
+
+    it('should handle zero scale in screenToCanvas', () => {
+      const { syncWithCanvas, screenToCanvas } = transformState
+      const mockCanvas = createMockCanvasContext()
+
+      // Scale of 0 gets converted to 1 by || operator
+      mockCanvas.ds.scale = 0
+      syncWithCanvas(mockCanvas as any)
+
+      // Should use scale of 1 due to camera.z || 1 in implementation
+      const result = screenToCanvas({ x: 100, y: 100 })
+      expect(result.x).toBe(100) // (100 - 0) / 1
+      expect(result.y).toBe(100) // (100 - 0) / 1
+    })
+  })
+})

tests-ui/tests/composables/graph/useCanvasInteractions.test.ts

@@ -1,126 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
-import { app } from '@/scripts/app'
-import * as settingStore from '@/stores/settingStore'
-
-// Mock the app and canvas
-vi.mock('@/scripts/app', () => ({
-  app: {
-    canvas: {
-      canvas: null as HTMLCanvasElement | null
-    }
-  }
-}))
-
-// Mock the setting store
-vi.mock('@/stores/settingStore', () => ({
-  useSettingStore: vi.fn()
-}))
-
-describe('useCanvasInteractions', () => {
-  let mockCanvas: HTMLCanvasElement
-  let mockSettingStore: { get: ReturnType<typeof vi.fn> }
-  let canvasInteractions: ReturnType<typeof useCanvasInteractions>
-
-  beforeEach(() => {
-    // Clear mocks
-    vi.clearAllMocks()
-
-    // Create mock canvas element
-    mockCanvas = document.createElement('canvas')
-    mockCanvas.dispatchEvent = vi.fn()
-    app.canvas!.canvas = mockCanvas
-
-    // Mock setting store
-    mockSettingStore = { get: vi.fn() }
-    vi.mocked(settingStore.useSettingStore).mockReturnValue(
-      mockSettingStore as any
-    )
-
-    canvasInteractions = useCanvasInteractions()
-  })
-
-  describe('handleWheel', () => {
-    it('should check navigation mode from settings', () => {
-      mockSettingStore.get.mockReturnValue('standard')
-
-      const wheelEvent = new WheelEvent('wheel', {
-        ctrlKey: true,
-        deltaY: -100
-      })
-
-      canvasInteractions.handleWheel(wheelEvent)
-
-      expect(mockSettingStore.get).toHaveBeenCalledWith(
-        'Comfy.Canvas.NavigationMode'
-      )
-    })
-
-    it('should not forward regular wheel events in standard mode', () => {
-      mockSettingStore.get.mockReturnValue('standard')
-
-      const wheelEvent = new WheelEvent('wheel', {
-        deltaY: -100
-      })
-
-      canvasInteractions.handleWheel(wheelEvent)
-
-      expect(mockCanvas.dispatchEvent).not.toHaveBeenCalled()
-    })
-
-    it('should forward all wheel events to canvas in legacy mode', () => {
-      mockSettingStore.get.mockReturnValue('legacy')
-
-      const wheelEvent = new WheelEvent('wheel', {
-        deltaY: -100,
-        cancelable: true
-      })
-
-      canvasInteractions.handleWheel(wheelEvent)
-
-      expect(mockCanvas.dispatchEvent).toHaveBeenCalled()
-    })
-
-    it('should handle missing canvas gracefully', () => {
-      ;(app.canvas as any).canvas = null
-      mockSettingStore.get.mockReturnValue('standard')
-
-      const wheelEvent = new WheelEvent('wheel', {
-        ctrlKey: true,
-        deltaY: -100
-      })
-
-      expect(() => {
-        canvasInteractions.handleWheel(wheelEvent)
-      }).not.toThrow()
-    })
-  })
-
-  describe('forwardEventToCanvas', () => {
-    it('should dispatch event to canvas element', () => {
-      const wheelEvent = new WheelEvent('wheel', {
-        deltaY: -100,
-        ctrlKey: true
-      })
-
-      canvasInteractions.forwardEventToCanvas(wheelEvent)
-
-      expect(mockCanvas.dispatchEvent).toHaveBeenCalledWith(
-        expect.any(WheelEvent)
-      )
-    })
-
-    it('should handle missing canvas gracefully', () => {
-      ;(app.canvas as any).canvas = null
-
-      const wheelEvent = new WheelEvent('wheel', {
-        deltaY: -100
-      })
-
-      expect(() => {
-        canvasInteractions.forwardEventToCanvas(wheelEvent)
-      }).not.toThrow()
-    })
-  })
-})

tests-ui/tests/composables/graph/useSelectionState.test.ts

@@ -0,0 +1,270 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
+import { type Ref, ref } from 'vue'
+
+import { useSelectionState } from '@/composables/graph/useSelectionState'
+import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
+import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+import { isImageNode, isLGraphNode } from '@/utils/litegraphUtil'
+import { filterOutputNodes } from '@/utils/nodeFilterUtil'
+
+// Test interfaces
+interface TestNodeConfig {
+  type?: string
+  mode?: LGraphEventMode
+  flags?: { collapsed?: boolean }
+  pinned?: boolean
+  removable?: boolean
+}
+
+interface TestNode {
+  type: string
+  mode: LGraphEventMode
+  flags?: { collapsed?: boolean }
+  pinned?: boolean
+  removable?: boolean
+  isSubgraphNode: () => boolean
+}
+
+type MockedItem = TestNode | { type: string; isNode: boolean }
+
+// Mock all stores
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: vi.fn()
+}))
+
+vi.mock('@/stores/nodeDefStore', () => ({
+  useNodeDefStore: vi.fn()
+}))
+
+vi.mock('@/stores/workspace/sidebarTabStore', () => ({
+  useSidebarTabStore: vi.fn()
+}))
+
+vi.mock('@/stores/workspace/nodeHelpStore', () => ({
+  useNodeHelpStore: vi.fn()
+}))
+
+vi.mock('@/composables/sidebarTabs/useNodeLibrarySidebarTab', () => ({
+  useNodeLibrarySidebarTab: vi.fn()
+}))
+
+vi.mock('@/utils/litegraphUtil', () => ({
+  isLGraphNode: vi.fn(),
+  isImageNode: vi.fn()
+}))
+
+vi.mock('@/utils/nodeFilterUtil', () => ({
+  filterOutputNodes: vi.fn()
+}))
+
+const createTestNode = (config: TestNodeConfig = {}): TestNode => {
+  return {
+    type: config.type || 'TestNode',
+    mode: config.mode || LGraphEventMode.ALWAYS,
+    flags: config.flags,
+    pinned: config.pinned,
+    removable: config.removable,
+    isSubgraphNode: () => false
+  }
+}
+
+// Mock comment/connection objects
+const mockComment = { type: 'comment', isNode: false }
+const mockConnection = { type: 'connection', isNode: false }
+
+describe('useSelectionState', () => {
+  // Mock store instances
+  let mockSelectedItems: Ref<MockedItem[]>
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setActivePinia(createPinia())
+
+    // Setup mock canvas store with proper ref
+    mockSelectedItems = ref([])
+    vi.mocked(useCanvasStore).mockReturnValue({
+      selectedItems: mockSelectedItems,
+      // Add minimal required properties for the store
+      $id: 'canvas',
+      $state: {} as any,
+      $patch: vi.fn(),
+      $reset: vi.fn(),
+      $subscribe: vi.fn(),
+      $onAction: vi.fn(),
+      $dispose: vi.fn(),
+      _customProperties: new Set(),
+      _p: {} as any
+    } as any)
+
+    // Setup mock node def store
+    vi.mocked(useNodeDefStore).mockReturnValue({
+      fromLGraphNode: vi.fn((node: TestNode) => {
+        if (node?.type === 'TestNode') {
+          return { nodePath: 'test.TestNode', name: 'TestNode' }
+        }
+        return null
+      }),
+      // Add minimal required properties for the store
+      $id: 'nodeDef',
+      $state: {} as any,
+      $patch: vi.fn(),
+      $reset: vi.fn(),
+      $subscribe: vi.fn(),
+      $onAction: vi.fn(),
+      $dispose: vi.fn(),
+      _customProperties: new Set(),
+      _p: {} as any
+    } as any)
+
+    // Setup mock sidebar tab store
+    const mockToggleSidebarTab = vi.fn()
+    vi.mocked(useSidebarTabStore).mockReturnValue({
+      activeSidebarTabId: null,
+      toggleSidebarTab: mockToggleSidebarTab,
+      // Add minimal required properties for the store
+      $id: 'sidebarTab',
+      $state: {} as any,
+      $patch: vi.fn(),
+      $reset: vi.fn(),
+      $subscribe: vi.fn(),
+      $onAction: vi.fn(),
+      $dispose: vi.fn(),
+      _customProperties: new Set(),
+      _p: {} as any
+    } as any)
+
+    // Setup mock node help store
+    const mockOpenHelp = vi.fn()
+    const mockCloseHelp = vi.fn()
+    const mockNodeHelpStore = {
+      isHelpOpen: false,
+      currentHelpNode: null,
+      openHelp: mockOpenHelp,
+      closeHelp: mockCloseHelp,
+      // Add minimal required properties for the store
+      $id: 'nodeHelp',
+      $state: {} as any,
+      $patch: vi.fn(),
+      $reset: vi.fn(),
+      $subscribe: vi.fn(),
+      $onAction: vi.fn(),
+      $dispose: vi.fn(),
+      _customProperties: new Set(),
+      _p: {} as any
+    }
+    vi.mocked(useNodeHelpStore).mockReturnValue(mockNodeHelpStore as any)
+
+    // Setup mock composables
+    vi.mocked(useNodeLibrarySidebarTab).mockReturnValue({
+      id: 'node-library-tab',
+      title: 'Node Library',
+      type: 'custom',
+      render: () => null
+    } as any)
+
+    // Setup mock utility functions
+    vi.mocked(isLGraphNode).mockImplementation((item: unknown) => {
+      const typedItem = item as { isNode?: boolean }
+      return typedItem?.isNode !== false
+    })
+    vi.mocked(isImageNode).mockImplementation((node: unknown) => {
+      const typedNode = node as { type?: string }
+      return typedNode?.type === 'ImageNode'
+    })
+    vi.mocked(filterOutputNodes).mockImplementation(
+      (nodes: TestNode[]) => nodes.filter((n) => n.type === 'OutputNode') as any
+    )
+  })
+
+  describe('Selection Detection', () => {
+    test('should return false when nothing selected', () => {
+      const { hasAnySelection } = useSelectionState()
+      expect(hasAnySelection.value).toBe(false)
+    })
+
+    test('should return true when items selected', () => {
+      // Update the mock data before creating the composable
+      const node1 = createTestNode()
+      const node2 = createTestNode()
+      mockSelectedItems.value = [node1, node2]
+
+      const { hasAnySelection } = useSelectionState()
+      expect(hasAnySelection.value).toBe(true)
+    })
+  })
+
+  describe('Node Type Filtering', () => {
+    test('should pick only LGraphNodes from mixed selections', () => {
+      // Update the mock data before creating the composable
+      const graphNode = createTestNode()
+      mockSelectedItems.value = [graphNode, mockComment, mockConnection]
+
+      const { selectedNodes } = useSelectionState()
+      expect(selectedNodes.value).toHaveLength(1)
+      expect(selectedNodes.value[0]).toEqual(graphNode)
+    })
+  })
+
+  describe('Node State Computation', () => {
+    test('should detect bypassed nodes', () => {
+      // Update the mock data before creating the composable
+      const bypassedNode = createTestNode({ mode: LGraphEventMode.BYPASS })
+      mockSelectedItems.value = [bypassedNode]
+
+      const { selectedNodes } = useSelectionState()
+      const isBypassed = selectedNodes.value.some(
+        (n) => n.mode === LGraphEventMode.BYPASS
+      )
+      expect(isBypassed).toBe(true)
+    })
+
+    test('should detect pinned/collapsed states', () => {
+      // Update the mock data before creating the composable
+      const pinnedNode = createTestNode({ pinned: true })
+      const collapsedNode = createTestNode({ flags: { collapsed: true } })
+      mockSelectedItems.value = [pinnedNode, collapsedNode]
+
+      const { selectedNodes } = useSelectionState()
+      const isPinned = selectedNodes.value.some((n) => n.pinned === true)
+      const isCollapsed = selectedNodes.value.some(
+        (n) => n.flags?.collapsed === true
+      )
+      const isBypassed = selectedNodes.value.some(
+        (n) => n.mode === LGraphEventMode.BYPASS
+      )
+      expect(isPinned).toBe(true)
+      expect(isCollapsed).toBe(true)
+      expect(isBypassed).toBe(false)
+    })
+
+    test('should provide non-reactive state computation', () => {
+      // Update the mock data before creating the composable
+      const node = createTestNode({ pinned: true })
+      mockSelectedItems.value = [node]
+
+      const { selectedNodes } = useSelectionState()
+      const isPinned = selectedNodes.value.some((n) => n.pinned === true)
+      const isCollapsed = selectedNodes.value.some(
+        (n) => n.flags?.collapsed === true
+      )
+      const isBypassed = selectedNodes.value.some(
+        (n) => n.mode === LGraphEventMode.BYPASS
+      )
+
+      expect(isPinned).toBe(true)
+      expect(isCollapsed).toBe(false)
+      expect(isBypassed).toBe(false)
+
+      // Test with empty selection using new composable instance
+      mockSelectedItems.value = []
+      const { selectedNodes: newSelectedNodes } = useSelectionState()
+      const newIsPinned = newSelectedNodes.value.some((n) => n.pinned === true)
+      expect(newIsPinned).toBe(false)
+    })
+  })
+})

tests-ui/tests/composables/graph/useTransformSettling.test.ts

@@ -0,0 +1,277 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import { useTransformSettling } from '@/renderer/core/layout/transform/useTransformSettling'
+
+describe('useTransformSettling', () => {
+  let element: HTMLDivElement
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    element = document.createElement('div')
+    document.body.appendChild(element)
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    document.body.removeChild(element)
+  })
+
+  it('should track wheel events and settle after delay', async () => {
+    const { isTransforming } = useTransformSettling(element)
+
+    // Initially not transforming
+    expect(isTransforming.value).toBe(false)
+
+    // Dispatch wheel event
+    element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+
+    // Should be transforming
+    expect(isTransforming.value).toBe(true)
+
+    // Advance time but not past settle delay
+    vi.advanceTimersByTime(100)
+    expect(isTransforming.value).toBe(true)
+
+    // Advance past settle delay (default 200ms)
+    vi.advanceTimersByTime(150)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should reset settle timer on subsequent wheel events', async () => {
+    const { isTransforming } = useTransformSettling(element, {
+      settleDelay: 300
+    })
+
+    // First wheel event
+    element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+    expect(isTransforming.value).toBe(true)
+
+    // Advance time partially
+    vi.advanceTimersByTime(200)
+    expect(isTransforming.value).toBe(true)
+
+    // Another wheel event should reset the timer
+    element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+
+    // Advance 200ms more - should still be transforming
+    vi.advanceTimersByTime(200)
+    expect(isTransforming.value).toBe(true)
+
+    // Need another 100ms to settle (300ms total from last event)
+    vi.advanceTimersByTime(100)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should track pan events when trackPan is enabled', async () => {
+    const { isTransforming } = useTransformSettling(element, {
+      trackPan: true,
+      settleDelay: 200
+    })
+
+    // Pointer down should start transform
+    element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    await nextTick()
+    expect(isTransforming.value).toBe(true)
+
+    // Pointer move should keep it active
+    vi.advanceTimersByTime(100)
+    element.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }))
+    await nextTick()
+
+    // Should still be transforming
+    expect(isTransforming.value).toBe(true)
+
+    // Pointer up
+    element.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }))
+    await nextTick()
+
+    // Should still be transforming until settle delay
+    expect(isTransforming.value).toBe(true)
+
+    // Advance past settle delay
+    vi.advanceTimersByTime(200)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should not track pan events when trackPan is disabled', async () => {
+    const { isTransforming } = useTransformSettling(element, {
+      trackPan: false
+    })
+
+    // Pointer events should not trigger transform
+    element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    element.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }))
+    await nextTick()
+
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should handle pointer cancel events', async () => {
+    const { isTransforming } = useTransformSettling(element, {
+      trackPan: true,
+      settleDelay: 200
+    })
+
+    // Start panning
+    element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    await nextTick()
+    expect(isTransforming.value).toBe(true)
+
+    // Cancel instead of up
+    element.dispatchEvent(new PointerEvent('pointercancel', { bubbles: true }))
+    await nextTick()
+
+    // Should still settle normally
+    vi.advanceTimersByTime(200)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should work with ref target', async () => {
+    const targetRef = ref<HTMLElement | null>(null)
+    const { isTransforming } = useTransformSettling(targetRef)
+
+    // No target yet
+    expect(isTransforming.value).toBe(false)
+
+    // Set target
+    targetRef.value = element
+    await nextTick()
+
+    // Now events should work
+    element.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+    expect(isTransforming.value).toBe(true)
+
+    vi.advanceTimersByTime(200)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should use capture phase for events', async () => {
+    const captureHandler = vi.fn()
+    const bubbleHandler = vi.fn()
+
+    // Add handlers to verify capture phase
+    element.addEventListener('wheel', captureHandler, true)
+    element.addEventListener('wheel', bubbleHandler, false)
+
+    const { isTransforming } = useTransformSettling(element)
+
+    // Create child element
+    const child = document.createElement('div')
+    element.appendChild(child)
+
+    // Dispatch event on child
+    child.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
+    await nextTick()
+
+    // Capture handler should be called before bubble handler
+    expect(captureHandler).toHaveBeenCalled()
+    expect(isTransforming.value).toBe(true)
+
+    element.removeEventListener('wheel', captureHandler, true)
+    element.removeEventListener('wheel', bubbleHandler, false)
+  })
+
+  it('should throttle pointer move events', async () => {
+    const { isTransforming } = useTransformSettling(element, {
+      trackPan: true,
+      pointerMoveThrottle: 50,
+      settleDelay: 100
+    })
+
+    // Start panning
+    element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    await nextTick()
+
+    // Fire many pointer move events rapidly
+    for (let i = 0; i < 10; i++) {
+      element.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }))
+      vi.advanceTimersByTime(5) // 5ms between events
+    }
+    await nextTick()
+
+    // Should still be transforming
+    expect(isTransforming.value).toBe(true)
+
+    // End panning
+    element.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }))
+
+    // Advance past settle delay
+    vi.advanceTimersByTime(100)
+    expect(isTransforming.value).toBe(false)
+  })
+
+  it('should clean up event listeners when component unmounts', async () => {
+    const removeEventListenerSpy = vi.spyOn(element, 'removeEventListener')
+
+    // Create a test component
+    const TestComponent = {
+      setup() {
+        const { isTransforming } = useTransformSettling(element, {
+          trackPan: true
+        })
+        return { isTransforming }
+      },
+      template: '<div>{{ isTransforming }}</div>'
+    }
+
+    const wrapper = mount(TestComponent)
+    await nextTick()
+
+    // Unmount component
+    wrapper.unmount()
+
+    // Should have removed all event listeners
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'wheel',
+      expect.any(Function),
+      expect.objectContaining({ capture: true })
+    )
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'pointerdown',
+      expect.any(Function),
+      expect.objectContaining({ capture: true })
+    )
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'pointermove',
+      expect.any(Function),
+      expect.objectContaining({ capture: true })
+    )
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'pointerup',
+      expect.any(Function),
+      expect.objectContaining({ capture: true })
+    )
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'pointercancel',
+      expect.any(Function),
+      expect.objectContaining({ capture: true })
+    )
+  })
+
+  it('should use passive listeners when specified', async () => {
+    const addEventListenerSpy = vi.spyOn(element, 'addEventListener')
+
+    useTransformSettling(element, {
+      passive: true,
+      trackPan: true
+    })
+
+    // Check that passive option was used for appropriate events
+    expect(addEventListenerSpy).toHaveBeenCalledWith(
+      'wheel',
+      expect.any(Function),
+      expect.objectContaining({ passive: true, capture: true })
+    )
+    expect(addEventListenerSpy).toHaveBeenCalledWith(
+      'pointermove',
+      expect.any(Function),
+      expect.objectContaining({ passive: true, capture: true })
+    )
+  })
+})

tests-ui/tests/composables/graph/useWidgetValue.test.ts

@@ -0,0 +1,503 @@
+import {
+  type MockedFunction,
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi
+} from 'vitest'
+import { ref } from 'vue'
+
+import {
+  useBooleanWidgetValue,
+  useNumberWidgetValue,
+  useStringWidgetValue,
+  useWidgetValue
+} from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+describe('useWidgetValue', () => {
+  let mockWidget: SimplifiedWidget<string>
+  let mockEmit: MockedFunction<(event: 'update:modelValue', value: any) => void>
+  let consoleWarnSpy: ReturnType<typeof vi.spyOn>
+
+  beforeEach(() => {
+    mockWidget = {
+      name: 'testWidget',
+      type: 'string',
+      value: 'initial',
+      callback: vi.fn()
+    }
+    mockEmit = vi.fn()
+    consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    consoleWarnSpy.mockRestore()
+  })
+
+  describe('basic functionality', () => {
+    it('should initialize with modelValue', () => {
+      const { localValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'test value',
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      expect(localValue.value).toBe('test value')
+    })
+
+    it('should use defaultValue when modelValue is null', () => {
+      const { localValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: null as any,
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      expect(localValue.value).toBe('default')
+    })
+
+    it('should use defaultValue when modelValue is undefined', () => {
+      const { localValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: undefined as any,
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      expect(localValue.value).toBe('default')
+    })
+  })
+
+  describe('onChange handler', () => {
+    it('should update localValue immediately', () => {
+      const { localValue, onChange } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'initial',
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      onChange('new value')
+      expect(localValue.value).toBe('new value')
+    })
+
+    it('should emit update:modelValue event', () => {
+      const { onChange } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'initial',
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      onChange('new value')
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'new value')
+    })
+
+    // useGraphNodeMaanger's createWrappedWidgetCallback makes the callback right now instead of useWidgetValue
+    // it('should call widget callback if it exists', () => {
+    //   const { onChange } = useWidgetValue({
+    //     widget: mockWidget,
+    //     modelValue: 'initial',
+    //     defaultValue: '',
+    //     emit: mockEmit
+    //   })
+
+    //   onChange('new value')
+    //   expect(mockWidget.callback).toHaveBeenCalledWith('new value')
+    // })
+
+    it('should not error if widget callback is undefined', () => {
+      const widgetWithoutCallback = { ...mockWidget, callback: undefined }
+      const { onChange } = useWidgetValue({
+        widget: widgetWithoutCallback,
+        modelValue: 'initial',
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      expect(() => onChange('new value')).not.toThrow()
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'new value')
+    })
+
+    it('should handle null values', () => {
+      const { localValue, onChange } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'initial',
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      onChange(null as any)
+      expect(localValue.value).toBe('default')
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'default')
+    })
+
+    it('should handle undefined values', () => {
+      const { localValue, onChange } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'initial',
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      onChange(undefined as any)
+      expect(localValue.value).toBe('default')
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'default')
+    })
+  })
+
+  describe('type safety', () => {
+    it('should handle type mismatches with warning', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'numberWidget',
+        type: 'number',
+        value: 42,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useWidgetValue({
+        widget: numberWidget,
+        modelValue: 10,
+        defaultValue: 0,
+        emit: mockEmit
+      })
+
+      // Pass string to number widget
+      onChange('not a number' as any)
+
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        'useWidgetValue: Type mismatch for widget numberWidget. Expected number, got string'
+      )
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 0) // Uses defaultValue
+    })
+
+    it('should accept values of matching type', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'numberWidget',
+        type: 'number',
+        value: 42,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useWidgetValue({
+        widget: numberWidget,
+        modelValue: 10,
+        defaultValue: 0,
+        emit: mockEmit
+      })
+
+      onChange(25)
+      expect(consoleWarnSpy).not.toHaveBeenCalled()
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 25)
+    })
+  })
+
+  describe('transform function', () => {
+    it('should apply transform function to new values', () => {
+      const transform = vi.fn((value: string) => value.toUpperCase())
+      const { onChange } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'initial',
+        defaultValue: '',
+        emit: mockEmit,
+        transform
+      })
+
+      onChange('hello')
+      expect(transform).toHaveBeenCalledWith('hello')
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'HELLO')
+    })
+
+    it('should skip type checking when transform is provided', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'numberWidget',
+        type: 'number',
+        value: 42,
+        callback: vi.fn()
+      }
+
+      const transform = (value: string) => parseInt(value, 10) || 0
+      const { onChange } = useWidgetValue({
+        widget: numberWidget,
+        modelValue: 10,
+        defaultValue: 0,
+        emit: mockEmit,
+        transform
+      })
+
+      onChange('123')
+      expect(consoleWarnSpy).not.toHaveBeenCalled()
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 123)
+    })
+  })
+
+  describe('external updates', () => {
+    it('should update localValue when modelValue changes', async () => {
+      const modelValue = ref('initial')
+      const { localValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: modelValue.value,
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      expect(localValue.value).toBe('initial')
+
+      // Simulate parent updating modelValue
+      modelValue.value = 'updated externally'
+
+      // Re-create the composable with new value (simulating prop change)
+      const { localValue: newLocalValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: modelValue.value,
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      expect(newLocalValue.value).toBe('updated externally')
+    })
+
+    it('should handle external null values', async () => {
+      const modelValue = ref<string | null>('initial')
+      const { localValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: modelValue.value!,
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      expect(localValue.value).toBe('initial')
+
+      // Simulate external update to null
+      modelValue.value = null
+      const { localValue: newLocalValue } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: modelValue.value as any,
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      expect(newLocalValue.value).toBe('default')
+    })
+  })
+
+  describe('useStringWidgetValue helper', () => {
+    it('should handle string values correctly', () => {
+      const stringWidget: SimplifiedWidget<string> = {
+        name: 'textWidget',
+        type: 'string',
+        value: 'hello',
+        callback: vi.fn()
+      }
+
+      const { localValue, onChange } = useStringWidgetValue(
+        stringWidget,
+        'initial',
+        mockEmit
+      )
+
+      expect(localValue.value).toBe('initial')
+
+      onChange('new string')
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 'new string')
+    })
+
+    it('should transform undefined to empty string', () => {
+      const stringWidget: SimplifiedWidget<string> = {
+        name: 'textWidget',
+        type: 'string',
+        value: '',
+        callback: vi.fn()
+      }
+
+      const { onChange } = useStringWidgetValue(stringWidget, '', mockEmit)
+
+      onChange(undefined as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', '')
+    })
+
+    it('should convert non-string values to string', () => {
+      const stringWidget: SimplifiedWidget<string> = {
+        name: 'textWidget',
+        type: 'string',
+        value: '',
+        callback: vi.fn()
+      }
+
+      const { onChange } = useStringWidgetValue(stringWidget, '', mockEmit)
+
+      onChange(123 as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', '123')
+    })
+  })
+
+  describe('useNumberWidgetValue helper', () => {
+    it('should handle number values correctly', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'sliderWidget',
+        type: 'number',
+        value: 50,
+        callback: vi.fn()
+      }
+
+      const { localValue, onChange } = useNumberWidgetValue(
+        numberWidget,
+        25,
+        mockEmit
+      )
+
+      expect(localValue.value).toBe(25)
+
+      onChange(75)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 75)
+    })
+
+    it('should handle array values from PrimeVue Slider', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'sliderWidget',
+        type: 'number',
+        value: 50,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useNumberWidgetValue(numberWidget, 25, mockEmit)
+
+      // PrimeVue Slider can emit number[]
+      onChange([42, 100] as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 42)
+    })
+
+    it('should handle empty array', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'sliderWidget',
+        type: 'number',
+        value: 50,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useNumberWidgetValue(numberWidget, 25, mockEmit)
+
+      onChange([] as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 0)
+    })
+
+    it('should convert string numbers', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'numberWidget',
+        type: 'number',
+        value: 0,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useNumberWidgetValue(numberWidget, 0, mockEmit)
+
+      onChange('42' as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 42)
+    })
+
+    it('should handle invalid number conversions', () => {
+      const numberWidget: SimplifiedWidget<number> = {
+        name: 'numberWidget',
+        type: 'number',
+        value: 0,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useNumberWidgetValue(numberWidget, 0, mockEmit)
+
+      onChange('not-a-number' as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', 0)
+    })
+  })
+
+  describe('useBooleanWidgetValue helper', () => {
+    it('should handle boolean values correctly', () => {
+      const boolWidget: SimplifiedWidget<boolean> = {
+        name: 'toggleWidget',
+        type: 'boolean',
+        value: false,
+        callback: vi.fn()
+      }
+
+      const { localValue, onChange } = useBooleanWidgetValue(
+        boolWidget,
+        true,
+        mockEmit
+      )
+
+      expect(localValue.value).toBe(true)
+
+      onChange(false)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', false)
+    })
+
+    it('should convert truthy values to true', () => {
+      const boolWidget: SimplifiedWidget<boolean> = {
+        name: 'toggleWidget',
+        type: 'boolean',
+        value: false,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useBooleanWidgetValue(boolWidget, false, mockEmit)
+
+      onChange('truthy' as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', true)
+    })
+
+    it('should convert falsy values to false', () => {
+      const boolWidget: SimplifiedWidget<boolean> = {
+        name: 'toggleWidget',
+        type: 'boolean',
+        value: false,
+        callback: vi.fn()
+      }
+
+      const { onChange } = useBooleanWidgetValue(boolWidget, true, mockEmit)
+
+      onChange(0 as any)
+      expect(mockEmit).toHaveBeenCalledWith('update:modelValue', false)
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle rapid onChange calls', () => {
+      const { onChange } = useWidgetValue({
+        widget: mockWidget,
+        modelValue: 'initial',
+        defaultValue: '',
+        emit: mockEmit
+      })
+
+      onChange('value1')
+      onChange('value2')
+      onChange('value3')
+
+      expect(mockEmit).toHaveBeenCalledTimes(3)
+      expect(mockEmit).toHaveBeenNthCalledWith(1, 'update:modelValue', 'value1')
+      expect(mockEmit).toHaveBeenNthCalledWith(2, 'update:modelValue', 'value2')
+      expect(mockEmit).toHaveBeenNthCalledWith(3, 'update:modelValue', 'value3')
+    })
+
+    it('should handle widget with all properties undefined', () => {
+      const minimalWidget = {
+        name: 'minimal',
+        type: 'unknown'
+      } as SimplifiedWidget<any>
+
+      const { localValue, onChange } = useWidgetValue({
+        widget: minimalWidget,
+        modelValue: 'test',
+        defaultValue: 'default',
+        emit: mockEmit
+      })
+
+      expect(localValue.value).toBe('test')
+      expect(() => onChange('new')).not.toThrow()
+    })
+  })
+})

tests-ui/tests/composables/node/useNodePricing.test.ts

@@ -8,7 +8,12 @@ import type { IComboWidget } from '@/lib/litegraph/src/types/widgets'
 function createMockNode(
   nodeTypeName: string,
   widgets: Array<{ name: string; value: any }> = [],
-  isApiNode = true
+  isApiNode = true,
+  inputs: Array<{
+    name: string
+    connected?: boolean
+    useLinksArray?: boolean
+  }> = []
 ): LGraphNode {
   const mockWidgets = widgets.map(({ name, value }) => ({
     name,
@@ -16,7 +21,16 @@ function createMockNode(
     type: 'combo'
   })) as IComboWidget[]
 
-  return {
+  const mockInputs =
+    inputs.length > 0
+      ? inputs.map(({ name, connected, useLinksArray }) =>
+          useLinksArray
+            ? { name, links: connected ? [1] : [] }
+            : { name, link: connected ? 1 : null }
+        )
+      : undefined
+
+  const node: any = {
     id: Math.random().toString(),
     widgets: mockWidgets,
     constructor: {
@@ -25,7 +39,24 @@ function createMockNode(
         api_node: isApiNode
       }
     }
-  } as unknown as LGraphNode
+  }
+
+  if (mockInputs) {
+    node.inputs = mockInputs
+    // Provide the common helpers some frontend code may call
+    node.findInputSlot = function (portName: string) {
+      return this.inputs?.findIndex((i: any) => i.name === portName) ?? -1
+    }
+    node.isInputConnected = function (idx: number) {
+      const port = this.inputs?.[idx]
+      if (!port) return false
+      if (typeof port.link !== 'undefined') return port.link != null
+      if (Array.isArray(port.links)) return port.links.length > 0
+      return false
+    }
+  }
+
+  return node as LGraphNode
 }
 
 describe('useNodePricing', () => {
@@ -363,34 +394,51 @@ describe('useNodePricing', () => {
   })
 
   describe('dynamic pricing - IdeogramV3', () => {
-    it('should return $0.09 for Quality rendering speed', () => {
+    it('should return correct prices for IdeogramV3 node', () => {
       const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('IdeogramV3', [
-        { name: 'rendering_speed', value: 'Quality' }
-      ])
 
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe('$0.09/Run')
-    })
+      const testCases = [
+        {
+          rendering_speed: 'Quality',
+          character_image: false,
+          expected: '$0.09/Run'
+        },
+        {
+          rendering_speed: 'Quality',
+          character_image: true,
+          expected: '$0.20/Run'
+        },
+        {
+          rendering_speed: 'Default',
+          character_image: false,
+          expected: '$0.06/Run'
+        },
+        {
+          rendering_speed: 'Default',
+          character_image: true,
+          expected: '$0.15/Run'
+        },
+        {
+          rendering_speed: 'Turbo',
+          character_image: false,
+          expected: '$0.03/Run'
+        },
+        {
+          rendering_speed: 'Turbo',
+          character_image: true,
+          expected: '$0.10/Run'
+        }
+      ]
 
-    it('should return $0.06 for Balanced rendering speed', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('IdeogramV3', [
-        { name: 'rendering_speed', value: 'Balanced' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe('$0.06/Run')
-    })
-
-    it('should return $0.03 for Turbo rendering speed', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('IdeogramV3', [
-        { name: 'rendering_speed', value: 'Turbo' }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe('$0.03/Run')
+      testCases.forEach(({ rendering_speed, character_image, expected }) => {
+        const node = createMockNode(
+          'IdeogramV3',
+          [{ name: 'rendering_speed', value: rendering_speed }],
+          true,
+          [{ name: 'character_image', connected: character_image }]
+        )
+        expect(getNodeDisplayPrice(node)).toBe(expected)
+      })
     })
 
     it('should return range when rendering_speed widget is missing', () => {
@@ -457,7 +505,7 @@ describe('useNodePricing', () => {
   })
 
   describe('dynamic pricing - Veo3VideoGenerationNode', () => {
-    it('should return $2.00 for veo-3.0-fast-generate-001 without audio', () => {
+    it('should return $0.80 for veo-3.0-fast-generate-001 without audio', () => {
       const { getNodeDisplayPrice } = useNodePricing()
       const node = createMockNode('Veo3VideoGenerationNode', [
         { name: 'model', value: 'veo-3.0-fast-generate-001' },
@@ -465,49 +513,49 @@ describe('useNodePricing', () => {
       ])
 
       const price = getNodeDisplayPrice(node)
-      expect(price).toBe('$2.00/Run')
+      expect(price).toBe('$0.80/Run')
     })
 
-    it('should return $3.20 for veo-3.0-fast-generate-001 with audio', () => {
+    it('should return $1.20 for veo-3.0-fast-generate-001 with audio', () => {
       const { getNodeDisplayPrice } = useNodePricing()
       const node = createMockNode('Veo3VideoGenerationNode', [
         { name: 'model', value: 'veo-3.0-fast-generate-001' },
         { name: 'generate_audio', value: true }
       ])
 
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$1.20/Run')
+    })
+
+    it('should return $1.60 for veo-3.0-generate-001 without audio', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('Veo3VideoGenerationNode', [
+        { name: 'model', value: 'veo-3.0-generate-001' },
+        { name: 'generate_audio', value: false }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$1.60/Run')
+    })
+
+    it('should return $3.20 for veo-3.0-generate-001 with audio', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('Veo3VideoGenerationNode', [
+        { name: 'model', value: 'veo-3.0-generate-001' },
+        { name: 'generate_audio', value: true }
+      ])
+
       const price = getNodeDisplayPrice(node)
       expect(price).toBe('$3.20/Run')
     })
 
-    it('should return $4.00 for veo-3.0-generate-001 without audio', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('Veo3VideoGenerationNode', [
-        { name: 'model', value: 'veo-3.0-generate-001' },
-        { name: 'generate_audio', value: false }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe('$4.00/Run')
-    })
-
-    it('should return $6.00 for veo-3.0-generate-001 with audio', () => {
-      const { getNodeDisplayPrice } = useNodePricing()
-      const node = createMockNode('Veo3VideoGenerationNode', [
-        { name: 'model', value: 'veo-3.0-generate-001' },
-        { name: 'generate_audio', value: true }
-      ])
-
-      const price = getNodeDisplayPrice(node)
-      expect(price).toBe('$6.00/Run')
-    })
-
     it('should return range when widgets are missing', () => {
       const { getNodeDisplayPrice } = useNodePricing()
       const node = createMockNode('Veo3VideoGenerationNode', [])
 
       const price = getNodeDisplayPrice(node)
       expect(price).toBe(
-        '$2.00-6.00/Run (varies with model & audio generation)'
+        '$0.80-3.20/Run (varies with model & audio generation)'
       )
     })
 
@@ -519,7 +567,7 @@ describe('useNodePricing', () => {
 
       const price = getNodeDisplayPrice(node)
       expect(price).toBe(
-        '$2.00-6.00/Run (varies with model & audio generation)'
+        '$0.80-3.20/Run (varies with model & audio generation)'
       )
     })
 
@@ -531,7 +579,7 @@ describe('useNodePricing', () => {
 
       const price = getNodeDisplayPrice(node)
       expect(price).toBe(
-        '$2.00-6.00/Run (varies with model & audio generation)'
+        '$0.80-3.20/Run (varies with model & audio generation)'
       )
     })
   })
@@ -935,7 +983,11 @@ describe('useNodePricing', () => {
           const { getRelevantWidgetNames } = useNodePricing()
 
           const widgetNames = getRelevantWidgetNames('IdeogramV3')
-          expect(widgetNames).toEqual(['rendering_speed', 'num_images'])
+          expect(widgetNames).toEqual([
+            'rendering_speed',
+            'num_images',
+            'character_image'
+          ])
         })
       })
 
@@ -1728,4 +1780,273 @@ describe('useNodePricing', () => {
       })
     })
   })
+
+  describe('dynamic pricing - ByteDanceSeedreamNode', () => {
+    it('should return fallback when widgets are missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('ByteDanceSeedreamNode', [])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.03/Run ($0.03 for one output image)')
+    })
+
+    it('should return $0.03/Run when sequential generation is disabled', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('ByteDanceSeedreamNode', [
+        { name: 'sequential_image_generation', value: 'disabled' },
+        { name: 'max_images', value: 5 }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.03/Run')
+    })
+
+    it('should multiply by max_images when sequential generation is enabled', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('ByteDanceSeedreamNode', [
+        { name: 'sequential_image_generation', value: 'enabled' },
+        { name: 'max_images', value: 4 }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.12/Run ($0.03 for one output image)')
+    })
+  })
+
+  describe('dynamic pricing - ByteDance Seedance video nodes', () => {
+    it('should return base 10s range for PRO 1080p on ByteDanceTextToVideoNode', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('ByteDanceTextToVideoNode', [
+        { name: 'model', value: 'seedance-1-0-pro' },
+        { name: 'duration', value: '10' },
+        { name: 'resolution', value: '1080p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$1.18-$1.22/Run')
+    })
+
+    it('should scale to half for 5s PRO 1080p on ByteDanceTextToVideoNode', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('ByteDanceTextToVideoNode', [
+        { name: 'model', value: 'seedance-1-0-pro' },
+        { name: 'duration', value: '5' },
+        { name: 'resolution', value: '1080p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.59-$0.61/Run')
+    })
+
+    it('should scale for 8s PRO 480p on ByteDanceImageToVideoNode', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('ByteDanceImageToVideoNode', [
+        { name: 'model', value: 'seedance-1-0-pro' },
+        { name: 'duration', value: '8' },
+        { name: 'resolution', value: '480p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.18-$0.19/Run')
+    })
+
+    it('should scale correctly for 12s PRO 720p on ByteDanceFirstLastFrameNode', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('ByteDanceFirstLastFrameNode', [
+        { name: 'model', value: 'seedance-1-0-pro' },
+        { name: 'duration', value: '12' },
+        { name: 'resolution', value: '720p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.61-$0.67/Run')
+    })
+
+    it('should collapse to a single value when min and max round equal for LITE 480p 3s on ByteDanceImageReferenceNode', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('ByteDanceImageReferenceNode', [
+        { name: 'model', value: 'seedance-1-0-lite' },
+        { name: 'duration', value: '3' },
+        { name: 'resolution', value: '480p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.05/Run') // 0.17..0.18 scaled by 0.3 both round to 0.05
+    })
+
+    it('should return Token-based when required widgets are missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const missingModel = createMockNode('ByteDanceFirstLastFrameNode', [
+        { name: 'duration', value: '10' },
+        { name: 'resolution', value: '1080p' }
+      ])
+      const missingResolution = createMockNode('ByteDanceImageToVideoNode', [
+        { name: 'model', value: 'seedance-1-0-pro' },
+        { name: 'duration', value: '10' }
+      ])
+      const missingDuration = createMockNode('ByteDanceTextToVideoNode', [
+        { name: 'model', value: 'seedance-1-0-lite' },
+        { name: 'resolution', value: '720p' }
+      ])
+
+      expect(getNodeDisplayPrice(missingModel)).toBe('Token-based')
+      expect(getNodeDisplayPrice(missingResolution)).toBe('Token-based')
+      expect(getNodeDisplayPrice(missingDuration)).toBe('Token-based')
+    })
+  })
+
+  describe('dynamic pricing - WanTextToVideoApi', () => {
+    it('should return $1.50 for 10s at 1080p', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanTextToVideoApi', [
+        { name: 'duration', value: '10' },
+        { name: 'size', value: '1080p: 4:3 (1632x1248)' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$1.50/Run') // 0.15 * 10
+    })
+
+    it('should return $0.50 for 5s at 720p', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanTextToVideoApi', [
+        { name: 'duration', value: 5 },
+        { name: 'size', value: '720p: 16:9 (1280x720)' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.50/Run') // 0.10 * 5
+    })
+
+    it('should return $0.15 for 3s at 480p', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanTextToVideoApi', [
+        { name: 'duration', value: '3' },
+        { name: 'size', value: '480p: 1:1 (624x624)' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.15/Run') // 0.05 * 3
+    })
+
+    it('should fall back when widgets are missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const missingBoth = createMockNode('WanTextToVideoApi', [])
+      const missingSize = createMockNode('WanTextToVideoApi', [
+        { name: 'duration', value: '5' }
+      ])
+      const missingDuration = createMockNode('WanTextToVideoApi', [
+        { name: 'size', value: '1080p' }
+      ])
+
+      expect(getNodeDisplayPrice(missingBoth)).toBe('$0.05-0.15/second')
+      expect(getNodeDisplayPrice(missingSize)).toBe('$0.05-0.15/second')
+      expect(getNodeDisplayPrice(missingDuration)).toBe('$0.05-0.15/second')
+    })
+
+    it('should fall back on invalid duration', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanTextToVideoApi', [
+        { name: 'duration', value: 'invalid' },
+        { name: 'size', value: '1080p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.05-0.15/second')
+    })
+
+    it('should fall back on unknown resolution', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanTextToVideoApi', [
+        { name: 'duration', value: '10' },
+        { name: 'size', value: '2K' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.05-0.15/second')
+    })
+  })
+
+  describe('dynamic pricing - WanImageToVideoApi', () => {
+    it('should return $0.80 for 8s at 720p', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanImageToVideoApi', [
+        { name: 'duration', value: 8 },
+        { name: 'resolution', value: '720p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.80/Run') // 0.10 * 8
+    })
+
+    it('should return $0.60 for 12s at 480P', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanImageToVideoApi', [
+        { name: 'duration', value: '12' },
+        { name: 'resolution', value: '480P' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.60/Run') // 0.05 * 12
+    })
+
+    it('should return $1.50 for 10s at 1080p', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanImageToVideoApi', [
+        { name: 'duration', value: '10' },
+        { name: 'resolution', value: '1080p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$1.50/Run') // 0.15 * 10
+    })
+
+    it('should handle "5s" string duration at 1080P', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanImageToVideoApi', [
+        { name: 'duration', value: '5s' },
+        { name: 'resolution', value: '1080P' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.75/Run') // 0.15 * 5
+    })
+
+    it('should fall back when widgets are missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const missingBoth = createMockNode('WanImageToVideoApi', [])
+      const missingRes = createMockNode('WanImageToVideoApi', [
+        { name: 'duration', value: '5' }
+      ])
+      const missingDuration = createMockNode('WanImageToVideoApi', [
+        { name: 'resolution', value: '1080p' }
+      ])
+
+      expect(getNodeDisplayPrice(missingBoth)).toBe('$0.05-0.15/second')
+      expect(getNodeDisplayPrice(missingRes)).toBe('$0.05-0.15/second')
+      expect(getNodeDisplayPrice(missingDuration)).toBe('$0.05-0.15/second')
+    })
+
+    it('should fall back on invalid duration', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanImageToVideoApi', [
+        { name: 'duration', value: 'invalid' },
+        { name: 'resolution', value: '720p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.05-0.15/second')
+    })
+
+    it('should fall back on unknown resolution', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('WanImageToVideoApi', [
+        { name: 'duration', value: '10' },
+        { name: 'resolution', value: 'weird-res' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.05-0.15/second')
+    })
+  })
 })

tests-ui/tests/composables/nodePack/usePacksSelection.test.ts

@@ -0,0 +1,378 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import type { components } from '@/types/comfyRegistryTypes'
+import { usePacksSelection } from '@/workbench/extensions/manager/composables/nodePack/usePacksSelection'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+
+vi.mock('vue-i18n', async () => {
+  const actual = await vi.importActual('vue-i18n')
+  return {
+    ...actual,
+    useI18n: () => ({
+      t: vi.fn((key) => key)
+    })
+  }
+})
+
+type NodePack = components['schemas']['Node']
+
+describe('usePacksSelection', () => {
+  let managerStore: ReturnType<typeof useComfyManagerStore>
+  let mockIsPackInstalled: ReturnType<typeof vi.fn>
+
+  const createMockPack = (id: string): NodePack => ({
+    id,
+    name: `Pack ${id}`,
+    description: `Description for pack ${id}`,
+    category: 'Nodes',
+    author: 'Test Author',
+    license: 'MIT',
+    repository: 'https://github.com/test/pack',
+    tags: [],
+    status: 'NodeStatusActive'
+  })
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    const pinia = createPinia()
+    setActivePinia(pinia)
+
+    managerStore = useComfyManagerStore()
+
+    // Mock the isPackInstalled method
+    mockIsPackInstalled = vi.fn()
+    managerStore.isPackInstalled = mockIsPackInstalled
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  describe('installedPacks', () => {
+    it('should filter and return only installed packs', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2'),
+        createMockPack('pack3')
+      ])
+
+      mockIsPackInstalled.mockImplementation((id: string) => {
+        return id === 'pack1' || id === 'pack3'
+      })
+
+      const { installedPacks } = usePacksSelection(nodePacks)
+
+      expect(installedPacks.value).toHaveLength(2)
+      expect(installedPacks.value[0].id).toBe('pack1')
+      expect(installedPacks.value[1].id).toBe('pack3')
+      expect(mockIsPackInstalled).toHaveBeenCalledTimes(3)
+    })
+
+    it('should return empty array when no packs are installed', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2')
+      ])
+
+      mockIsPackInstalled.mockReturnValue(false)
+
+      const { installedPacks } = usePacksSelection(nodePacks)
+
+      expect(installedPacks.value).toHaveLength(0)
+    })
+
+    it('should update when nodePacks ref changes', () => {
+      const nodePacks = ref<NodePack[]>([createMockPack('pack1')])
+      mockIsPackInstalled.mockReturnValue(true)
+
+      const { installedPacks } = usePacksSelection(nodePacks)
+      expect(installedPacks.value).toHaveLength(1)
+
+      // Add more packs
+      nodePacks.value = [
+        createMockPack('pack1'),
+        createMockPack('pack2'),
+        createMockPack('pack3')
+      ]
+
+      expect(installedPacks.value).toHaveLength(3)
+    })
+  })
+
+  describe('notInstalledPacks', () => {
+    it('should filter and return only not installed packs', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2'),
+        createMockPack('pack3')
+      ])
+
+      mockIsPackInstalled.mockImplementation((id: string) => {
+        return id === 'pack1'
+      })
+
+      const { notInstalledPacks } = usePacksSelection(nodePacks)
+
+      expect(notInstalledPacks.value).toHaveLength(2)
+      expect(notInstalledPacks.value[0].id).toBe('pack2')
+      expect(notInstalledPacks.value[1].id).toBe('pack3')
+    })
+
+    it('should return all packs when none are installed', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2')
+      ])
+
+      mockIsPackInstalled.mockReturnValue(false)
+
+      const { notInstalledPacks } = usePacksSelection(nodePacks)
+
+      expect(notInstalledPacks.value).toHaveLength(2)
+    })
+  })
+
+  describe('isAllInstalled', () => {
+    it('should return true when all packs are installed', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2')
+      ])
+
+      mockIsPackInstalled.mockReturnValue(true)
+
+      const { isAllInstalled } = usePacksSelection(nodePacks)
+
+      expect(isAllInstalled.value).toBe(true)
+    })
+
+    it('should return false when not all packs are installed', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2')
+      ])
+
+      mockIsPackInstalled.mockImplementation((id: string) => id === 'pack1')
+
+      const { isAllInstalled } = usePacksSelection(nodePacks)
+
+      expect(isAllInstalled.value).toBe(false)
+    })
+
+    it('should return true for empty array', () => {
+      const nodePacks = ref<NodePack[]>([])
+
+      const { isAllInstalled } = usePacksSelection(nodePacks)
+
+      expect(isAllInstalled.value).toBe(true)
+    })
+  })
+
+  describe('isNoneInstalled', () => {
+    it('should return true when no packs are installed', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2')
+      ])
+
+      mockIsPackInstalled.mockReturnValue(false)
+
+      const { isNoneInstalled } = usePacksSelection(nodePacks)
+
+      expect(isNoneInstalled.value).toBe(true)
+    })
+
+    it('should return false when some packs are installed', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2')
+      ])
+
+      mockIsPackInstalled.mockImplementation((id: string) => id === 'pack1')
+
+      const { isNoneInstalled } = usePacksSelection(nodePacks)
+
+      expect(isNoneInstalled.value).toBe(false)
+    })
+
+    it('should return true for empty array', () => {
+      const nodePacks = ref<NodePack[]>([])
+
+      const { isNoneInstalled } = usePacksSelection(nodePacks)
+
+      expect(isNoneInstalled.value).toBe(true)
+    })
+  })
+
+  describe('isMixed', () => {
+    it('should return true when some but not all packs are installed', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2'),
+        createMockPack('pack3')
+      ])
+
+      mockIsPackInstalled.mockImplementation((id: string) => {
+        return id === 'pack1' || id === 'pack2'
+      })
+
+      const { isMixed } = usePacksSelection(nodePacks)
+
+      expect(isMixed.value).toBe(true)
+    })
+
+    it('should return false when all packs are installed', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2')
+      ])
+
+      mockIsPackInstalled.mockReturnValue(true)
+
+      const { isMixed } = usePacksSelection(nodePacks)
+
+      expect(isMixed.value).toBe(false)
+    })
+
+    it('should return false when no packs are installed', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2')
+      ])
+
+      mockIsPackInstalled.mockReturnValue(false)
+
+      const { isMixed } = usePacksSelection(nodePacks)
+
+      expect(isMixed.value).toBe(false)
+    })
+
+    it('should return false for empty array', () => {
+      const nodePacks = ref<NodePack[]>([])
+
+      const { isMixed } = usePacksSelection(nodePacks)
+
+      expect(isMixed.value).toBe(false)
+    })
+  })
+
+  describe('selectionState', () => {
+    it('should return "all-installed" when all packs are installed', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2')
+      ])
+
+      mockIsPackInstalled.mockReturnValue(true)
+
+      const { selectionState } = usePacksSelection(nodePacks)
+
+      expect(selectionState.value).toBe('all-installed')
+    })
+
+    it('should return "none-installed" when no packs are installed', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2')
+      ])
+
+      mockIsPackInstalled.mockReturnValue(false)
+
+      const { selectionState } = usePacksSelection(nodePacks)
+
+      expect(selectionState.value).toBe('none-installed')
+    })
+
+    it('should return "mixed" when some packs are installed', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2'),
+        createMockPack('pack3')
+      ])
+
+      mockIsPackInstalled.mockImplementation((id: string) => id === 'pack1')
+
+      const { selectionState } = usePacksSelection(nodePacks)
+
+      expect(selectionState.value).toBe('mixed')
+    })
+
+    it('should update when installation status changes', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2')
+      ])
+
+      mockIsPackInstalled.mockReturnValue(false)
+
+      const { selectionState } = usePacksSelection(nodePacks)
+      expect(selectionState.value).toBe('none-installed')
+
+      // Change mock to simulate installation
+      mockIsPackInstalled.mockReturnValue(true)
+
+      // Force reactivity update
+      nodePacks.value = [...nodePacks.value]
+
+      expect(selectionState.value).toBe('all-installed')
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle packs with undefined ids', () => {
+      const nodePacks = ref<NodePack[]>([
+        { ...createMockPack('pack1'), id: undefined as any },
+        createMockPack('pack2')
+      ])
+
+      mockIsPackInstalled.mockImplementation((id: string) => id === 'pack2')
+
+      const { installedPacks, notInstalledPacks } = usePacksSelection(nodePacks)
+
+      expect(installedPacks.value).toHaveLength(1)
+      expect(installedPacks.value[0].id).toBe('pack2')
+      expect(notInstalledPacks.value).toHaveLength(1)
+    })
+
+    it('should handle dynamic changes to pack installation status', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2')
+      ])
+
+      const installationStatus: Record<string, boolean> = {
+        pack1: false,
+        pack2: false
+      }
+
+      mockIsPackInstalled.mockImplementation(
+        (id: string) => installationStatus[id] || false
+      )
+
+      const { installedPacks, notInstalledPacks, selectionState } =
+        usePacksSelection(nodePacks)
+
+      expect(selectionState.value).toBe('none-installed')
+      expect(installedPacks.value).toHaveLength(0)
+      expect(notInstalledPacks.value).toHaveLength(2)
+
+      // Simulate installing pack1
+      installationStatus.pack1 = true
+      nodePacks.value = [...nodePacks.value] // Trigger reactivity
+
+      expect(selectionState.value).toBe('mixed')
+      expect(installedPacks.value).toHaveLength(1)
+      expect(notInstalledPacks.value).toHaveLength(1)
+
+      // Simulate installing pack2
+      installationStatus.pack2 = true
+      nodePacks.value = [...nodePacks.value] // Trigger reactivity
+
+      expect(selectionState.value).toBe('all-installed')
+      expect(installedPacks.value).toHaveLength(2)
+      expect(notInstalledPacks.value).toHaveLength(0)
+    })
+  })
+})

tests-ui/tests/composables/nodePack/usePacksStatus.test.ts

@@ -0,0 +1,384 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import type { components } from '@/types/comfyRegistryTypes'
+import { usePacksStatus } from '@/workbench/extensions/manager/composables/nodePack/usePacksStatus'
+import { useConflictDetectionStore } from '@/workbench/extensions/manager/stores/conflictDetectionStore'
+import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+
+type NodePack = components['schemas']['Node']
+type NodeStatus = components['schemas']['NodeStatus']
+type NodeVersionStatus = components['schemas']['NodeVersionStatus']
+
+describe('usePacksStatus', () => {
+  let conflictDetectionStore: ReturnType<typeof useConflictDetectionStore>
+
+  const createMockPack = (
+    id: string,
+    status?: NodeStatus | NodeVersionStatus
+  ): NodePack => ({
+    id,
+    name: `Pack ${id}`,
+    description: `Description for pack ${id}`,
+    category: 'Nodes',
+    author: 'Test Author',
+    license: 'MIT',
+    repository: 'https://github.com/test/pack',
+    tags: [],
+    status: (status || 'NodeStatusActive') as NodeStatus
+  })
+
+  const createMockConflict = (
+    packageId: string,
+    type: 'import_failed' | 'banned' | 'pending' = 'import_failed'
+  ): ConflictDetectionResult => ({
+    package_id: packageId,
+    package_name: `Pack ${packageId}`,
+    has_conflict: true,
+    conflicts: [
+      {
+        type,
+        current_value: 'current',
+        required_value: 'required'
+      }
+    ],
+    is_compatible: false
+  })
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setActivePinia(createPinia())
+    conflictDetectionStore = useConflictDetectionStore()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  describe('hasImportFailed', () => {
+    it('should return true when at least one pack has import_failed conflict', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2'),
+        createMockPack('pack3')
+      ])
+
+      // Set up mock conflicts
+      conflictDetectionStore.setConflictedPackages([
+        createMockConflict('pack2', 'import_failed'),
+        createMockConflict('pack3', 'banned')
+      ])
+
+      const { hasImportFailed } = usePacksStatus(nodePacks)
+
+      expect(hasImportFailed.value).toBe(true)
+    })
+
+    it('should return false when no pack has import_failed conflict', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2')
+      ])
+
+      // Set up mock conflicts with no import_failed
+      conflictDetectionStore.setConflictedPackages([
+        createMockConflict('pack1', 'pending'),
+        createMockConflict('pack2', 'banned')
+      ])
+
+      const { hasImportFailed } = usePacksStatus(nodePacks)
+
+      expect(hasImportFailed.value).toBe(false)
+    })
+
+    it('should return false when no conflicts exist', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2')
+      ])
+
+      conflictDetectionStore.setConflictedPackages([])
+
+      const { hasImportFailed } = usePacksStatus(nodePacks)
+
+      expect(hasImportFailed.value).toBe(false)
+    })
+
+    it('should handle packs without ids', () => {
+      const nodePacks = ref<NodePack[]>([
+        { ...createMockPack('pack1'), id: undefined as any },
+        createMockPack('pack2')
+      ])
+
+      conflictDetectionStore.setConflictedPackages([
+        createMockConflict('pack2', 'import_failed')
+      ])
+
+      const { hasImportFailed } = usePacksStatus(nodePacks)
+
+      expect(hasImportFailed.value).toBe(true)
+    })
+
+    it('should update when conflicts change', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2')
+      ])
+
+      conflictDetectionStore.setConflictedPackages([])
+
+      const { hasImportFailed } = usePacksStatus(nodePacks)
+      expect(hasImportFailed.value).toBe(false)
+
+      // Add import_failed conflict
+      conflictDetectionStore.setConflictedPackages([
+        createMockConflict('pack1', 'import_failed')
+      ])
+
+      expect(hasImportFailed.value).toBe(true)
+    })
+  })
+
+  describe('overallStatus', () => {
+    it('should prioritize banned status over all others', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1', 'NodeStatusActive'),
+        createMockPack('pack2', 'NodeStatusBanned'),
+        createMockPack('pack3', 'NodeVersionStatusDeleted')
+      ])
+
+      const { overallStatus } = usePacksStatus(nodePacks)
+
+      expect(overallStatus.value).toBe('NodeStatusBanned')
+    })
+
+    it('should prioritize version banned over deleted and active', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1', 'NodeStatusActive'),
+        createMockPack('pack2', 'NodeVersionStatusBanned'),
+        createMockPack('pack3', 'NodeVersionStatusDeleted')
+      ])
+
+      const { overallStatus } = usePacksStatus(nodePacks)
+
+      expect(overallStatus.value).toBe('NodeVersionStatusBanned')
+    })
+
+    it('should prioritize deleted status appropriately', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1', 'NodeStatusActive'),
+        createMockPack('pack2', 'NodeStatusDeleted'),
+        createMockPack('pack3', 'NodeVersionStatusActive')
+      ])
+
+      const { overallStatus } = usePacksStatus(nodePacks)
+
+      expect(overallStatus.value).toBe('NodeStatusDeleted')
+    })
+
+    it('should prioritize version deleted over flagged and active', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1', 'NodeVersionStatusFlagged'),
+        createMockPack('pack2', 'NodeVersionStatusDeleted'),
+        createMockPack('pack3', 'NodeVersionStatusActive')
+      ])
+
+      const { overallStatus } = usePacksStatus(nodePacks)
+
+      expect(overallStatus.value).toBe('NodeVersionStatusDeleted')
+    })
+
+    it('should prioritize flagged status over pending and active', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1', 'NodeVersionStatusPending'),
+        createMockPack('pack2', 'NodeVersionStatusFlagged'),
+        createMockPack('pack3', 'NodeVersionStatusActive')
+      ])
+
+      const { overallStatus } = usePacksStatus(nodePacks)
+
+      expect(overallStatus.value).toBe('NodeVersionStatusFlagged')
+    })
+
+    it('should prioritize pending status over active', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1', 'NodeVersionStatusActive'),
+        createMockPack('pack2', 'NodeVersionStatusPending'),
+        createMockPack('pack3', 'NodeStatusActive')
+      ])
+
+      const { overallStatus } = usePacksStatus(nodePacks)
+
+      expect(overallStatus.value).toBe('NodeVersionStatusPending')
+    })
+
+    it('should return NodeStatusActive when all packs are active', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1', 'NodeStatusActive'),
+        createMockPack('pack2', 'NodeStatusActive')
+      ])
+
+      const { overallStatus } = usePacksStatus(nodePacks)
+
+      expect(overallStatus.value).toBe('NodeStatusActive')
+    })
+
+    it('should return NodeStatusActive as default when all packs have no status', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2')
+      ])
+
+      const { overallStatus } = usePacksStatus(nodePacks)
+
+      // Since createMockPack sets status to 'NodeStatusActive' by default
+      expect(overallStatus.value).toBe('NodeStatusActive')
+    })
+
+    it('should handle empty pack array', () => {
+      const nodePacks = ref<NodePack[]>([])
+
+      const { overallStatus } = usePacksStatus(nodePacks)
+
+      expect(overallStatus.value).toBe('NodeVersionStatusActive')
+    })
+
+    it('should update when pack statuses change', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1', 'NodeStatusActive'),
+        createMockPack('pack2', 'NodeStatusActive')
+      ])
+
+      const { overallStatus } = usePacksStatus(nodePacks)
+      expect(overallStatus.value).toBe('NodeStatusActive')
+
+      // Change one pack to banned
+      nodePacks.value = [
+        createMockPack('pack1', 'NodeStatusBanned'),
+        createMockPack('pack2', 'NodeStatusActive')
+      ]
+
+      expect(overallStatus.value).toBe('NodeStatusBanned')
+    })
+  })
+
+  describe('integration with import failures', () => {
+    it('should return NodeVersionStatusActive when import failures exist (handled separately)', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1', 'NodeStatusActive'),
+        createMockPack('pack2', 'NodeStatusActive')
+      ])
+
+      conflictDetectionStore.setConflictedPackages([
+        createMockConflict('pack1', 'import_failed')
+      ])
+
+      const { hasImportFailed, overallStatus } = usePacksStatus(nodePacks)
+
+      expect(hasImportFailed.value).toBe(true)
+      // When import failed exists, it returns NodeVersionStatusActive
+      expect(overallStatus.value).toBe('NodeVersionStatusActive')
+    })
+
+    it('should return NodeVersionStatusActive when import failures exist even with banned status', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1', 'NodeStatusBanned'),
+        createMockPack('pack2', 'NodeStatusActive')
+      ])
+
+      conflictDetectionStore.setConflictedPackages([
+        createMockConflict('pack2', 'import_failed')
+      ])
+
+      const { hasImportFailed, overallStatus } = usePacksStatus(nodePacks)
+
+      expect(hasImportFailed.value).toBe(true)
+      // Import failed takes priority and returns NodeVersionStatusActive
+      expect(overallStatus.value).toBe('NodeVersionStatusActive')
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle multiple conflicts per package', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2')
+      ])
+
+      conflictDetectionStore.setConflictedPackages([
+        {
+          package_id: 'pack1',
+          package_name: 'Pack pack1',
+          has_conflict: true,
+          conflicts: [
+            {
+              type: 'pending',
+              current_value: 'current1',
+              required_value: 'required1'
+            },
+            {
+              type: 'import_failed',
+              current_value: 'current2',
+              required_value: 'required2'
+            }
+          ],
+          is_compatible: false
+        }
+      ])
+
+      const { hasImportFailed } = usePacksStatus(nodePacks)
+
+      expect(hasImportFailed.value).toBe(true)
+    })
+
+    it('should handle packs with no conflicts in store', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1'),
+        createMockPack('pack2')
+      ])
+
+      const { hasImportFailed } = usePacksStatus(nodePacks)
+
+      expect(hasImportFailed.value).toBe(false)
+    })
+
+    it('should handle mixed status types correctly', () => {
+      const nodePacks = ref<NodePack[]>([
+        createMockPack('pack1', 'NodeStatusBanned'),
+        createMockPack('pack2', 'NodeVersionStatusBanned'),
+        createMockPack('pack3', 'NodeStatusDeleted'),
+        createMockPack('pack4', 'NodeVersionStatusDeleted'),
+        createMockPack('pack5', 'NodeVersionStatusFlagged'),
+        createMockPack('pack6', 'NodeVersionStatusPending'),
+        createMockPack('pack7', 'NodeStatusActive'),
+        createMockPack('pack8', 'NodeVersionStatusActive')
+      ])
+
+      const { overallStatus } = usePacksStatus(nodePacks)
+
+      // Should return the highest priority status (NodeStatusBanned)
+      expect(overallStatus.value).toBe('NodeStatusBanned')
+    })
+
+    it('should be reactive to nodePacks changes', () => {
+      const nodePacks = ref<NodePack[]>([])
+
+      const { overallStatus } = usePacksStatus(nodePacks)
+      expect(overallStatus.value).toBe('NodeVersionStatusActive')
+
+      // Add packs
+      nodePacks.value = [
+        createMockPack('pack1', 'NodeStatusDeleted'),
+        createMockPack('pack2', 'NodeStatusActive')
+      ]
+
+      expect(overallStatus.value).toBe('NodeStatusDeleted')
+
+      // Add a higher priority status
+      nodePacks.value.push(createMockPack('pack3', 'NodeStatusBanned'))
+
+      expect(overallStatus.value).toBe('NodeStatusBanned')
+    })
+  })
+})

tests-ui/tests/composables/useConflictAcknowledgment.test.ts

@@ -0,0 +1,186 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+describe('useConflictAcknowledgment', () => {
+  beforeEach(() => {
+    // Set up Pinia for each test
+    setActivePinia(createPinia())
+    // Clear localStorage before each test
+    localStorage.clear()
+    // Reset modules to ensure fresh state
+    vi.resetModules()
+  })
+
+  afterEach(() => {
+    localStorage.clear()
+  })
+
+  describe('initial state loading', () => {
+    it('should load empty state when localStorage is empty', async () => {
+      vi.resetModules()
+      const { useConflictAcknowledgment } = await import(
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+      )
+      const { acknowledgmentState } = useConflictAcknowledgment()
+
+      expect(acknowledgmentState.value).toEqual({
+        modal_dismissed: false,
+        red_dot_dismissed: false,
+        warning_banner_dismissed: false
+      })
+    })
+
+    it('should load existing state from localStorage', async () => {
+      // Pre-populate localStorage with JSON values (as useStorage expects)
+      localStorage.setItem('Comfy.ConflictModalDismissed', JSON.stringify(true))
+      localStorage.setItem(
+        'Comfy.ConflictRedDotDismissed',
+        JSON.stringify(true)
+      )
+      localStorage.setItem(
+        'Comfy.ConflictWarningBannerDismissed',
+        JSON.stringify(true)
+      )
+
+      // Need to import the module after localStorage is set
+      vi.resetModules()
+      const { useConflictAcknowledgment } = await import(
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+      )
+      const { acknowledgmentState } = useConflictAcknowledgment()
+
+      expect(acknowledgmentState.value).toEqual({
+        modal_dismissed: true,
+        red_dot_dismissed: true,
+        warning_banner_dismissed: true
+      })
+    })
+  })
+
+  describe('dismissal functions', () => {
+    it('should mark conflicts as seen with unified function', async () => {
+      vi.resetModules()
+      const { useConflictAcknowledgment } = await import(
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+      )
+      const { markConflictsAsSeen, acknowledgmentState } =
+        useConflictAcknowledgment()
+
+      markConflictsAsSeen()
+
+      expect(acknowledgmentState.value.modal_dismissed).toBe(true)
+    })
+
+    it('should dismiss red dot notification', async () => {
+      vi.resetModules()
+      const { useConflictAcknowledgment } = await import(
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+      )
+      const { dismissRedDotNotification, acknowledgmentState } =
+        useConflictAcknowledgment()
+
+      dismissRedDotNotification()
+
+      expect(acknowledgmentState.value.red_dot_dismissed).toBe(true)
+    })
+
+    it('should dismiss warning banner', async () => {
+      vi.resetModules()
+      const { useConflictAcknowledgment } = await import(
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+      )
+      const { dismissWarningBanner, acknowledgmentState } =
+        useConflictAcknowledgment()
+
+      dismissWarningBanner()
+
+      expect(acknowledgmentState.value.warning_banner_dismissed).toBe(true)
+    })
+
+    it('should mark all conflicts as seen', async () => {
+      vi.resetModules()
+      const { useConflictAcknowledgment } = await import(
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+      )
+      const { markConflictsAsSeen, acknowledgmentState } =
+        useConflictAcknowledgment()
+
+      markConflictsAsSeen()
+
+      expect(acknowledgmentState.value.modal_dismissed).toBe(true)
+      expect(acknowledgmentState.value.red_dot_dismissed).toBe(true)
+      expect(acknowledgmentState.value.warning_banner_dismissed).toBe(true)
+    })
+  })
+
+  describe('computed properties', () => {
+    it('should calculate shouldShowConflictModal correctly', async () => {
+      // Need fresh module import to ensure clean state
+      vi.resetModules()
+      const { useConflictAcknowledgment } = await import(
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+      )
+      const { shouldShowConflictModal, markConflictsAsSeen } =
+        useConflictAcknowledgment()
+
+      expect(shouldShowConflictModal.value).toBe(true)
+
+      markConflictsAsSeen()
+      expect(shouldShowConflictModal.value).toBe(false)
+    })
+
+    it('should calculate shouldShowRedDot correctly based on conflicts', async () => {
+      vi.resetModules()
+      const { useConflictAcknowledgment } = await import(
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+      )
+      const { shouldShowRedDot, dismissRedDotNotification } =
+        useConflictAcknowledgment()
+
+      // Initially false because no conflicts exist
+      expect(shouldShowRedDot.value).toBe(false)
+
+      dismissRedDotNotification()
+      expect(shouldShowRedDot.value).toBe(false)
+    })
+
+    it('should calculate shouldShowManagerBanner correctly', async () => {
+      vi.resetModules()
+      const { useConflictAcknowledgment } = await import(
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+      )
+      const { shouldShowManagerBanner, dismissWarningBanner } =
+        useConflictAcknowledgment()
+
+      // Initially false because no conflicts exist
+      expect(shouldShowManagerBanner.value).toBe(false)
+
+      dismissWarningBanner()
+      expect(shouldShowManagerBanner.value).toBe(false)
+    })
+  })
+
+  describe('localStorage persistence', () => {
+    it('should persist to localStorage automatically', async () => {
+      // Need fresh module import to ensure clean state
+      vi.resetModules()
+      const { useConflictAcknowledgment } = await import(
+        '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+      )
+      const { markConflictsAsSeen, dismissWarningBanner } =
+        useConflictAcknowledgment()
+
+      markConflictsAsSeen()
+      dismissWarningBanner()
+
+      // Wait a tick for useStorage to sync
+      await new Promise((resolve) => setTimeout(resolve, 10))
+
+      // VueUse useStorage should automatically persist to localStorage as JSON
+      expect(localStorage.getItem('Comfy.ConflictModalDismissed')).toBe('true')
+      expect(localStorage.getItem('Comfy.ConflictWarningBannerDismissed')).toBe(
+        'true'
+      )
+    })
+  })
+})

tests-ui/tests/composables/useConflictDetection.test.ts

@@ -0,0 +1,469 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed, ref } from 'vue'
+
+import { useComfyRegistryService } from '@/services/comfyRegistryService'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+import type { components } from '@/types/comfyRegistryTypes'
+import { useInstalledPacks } from '@/workbench/extensions/manager/composables/nodePack/useInstalledPacks'
+import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
+import { useComfyManagerService } from '@/workbench/extensions/manager/services/comfyManagerService'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import { useConflictDetectionStore } from '@/workbench/extensions/manager/stores/conflictDetectionStore'
+import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+import { checkVersionCompatibility } from '@/workbench/extensions/manager/utils/versionUtil'
+
+// Mock dependencies
+vi.mock('@/workbench/extensions/manager/services/comfyManagerService', () => ({
+  useComfyManagerService: vi.fn()
+}))
+
+vi.mock('@/services/comfyRegistryService', () => ({
+  useComfyRegistryService: vi.fn()
+}))
+
+vi.mock('@/stores/systemStatsStore', () => ({
+  useSystemStatsStore: vi.fn()
+}))
+
+vi.mock('@/workbench/extensions/manager/utils/versionUtil', () => ({
+  getFrontendVersion: vi.fn(() => '1.24.0'),
+  checkVersionCompatibility: vi.fn()
+}))
+
+vi.mock('@/workbench/extensions/manager/utils/systemCompatibility', () => ({
+  checkOSCompatibility: vi.fn(),
+  checkAcceleratorCompatibility: vi.fn(),
+  normalizeOSList: vi.fn((list) => list)
+}))
+
+vi.mock('@/workbench/extensions/manager/utils/conflictUtils', () => ({
+  consolidateConflictsByPackage: vi.fn((results) => results),
+  createBannedConflict: vi.fn((isBanned) =>
+    isBanned
+      ? {
+          type: 'banned',
+          current_value: 'installed',
+          required_value: 'not_banned'
+        }
+      : null
+  ),
+  createPendingConflict: vi.fn((isPending) =>
+    isPending
+      ? {
+          type: 'pending',
+          current_value: 'installed',
+          required_value: 'not_pending'
+        }
+      : null
+  ),
+  generateConflictSummary: vi.fn((results, duration) => ({
+    total_packages: results.length,
+    compatible_packages: results.filter(
+      (r: ConflictDetectionResult) => r.is_compatible
+    ).length,
+    conflicted_packages: results.filter(
+      (r: ConflictDetectionResult) => r.has_conflict
+    ).length,
+    banned_packages: 0,
+    pending_packages: 0,
+    conflicts_by_type_details: {},
+    last_check_timestamp: new Date().toISOString(),
+    check_duration_ms: duration
+  }))
+}))
+
+vi.mock(
+  '@/workbench/extensions/manager/composables/useConflictAcknowledgment',
+  () => ({
+    useConflictAcknowledgment: vi.fn()
+  })
+)
+
+vi.mock(
+  '@/workbench/extensions/manager/composables/nodePack/useInstalledPacks',
+  () => ({
+    useInstalledPacks: vi.fn()
+  })
+)
+
+vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore', () => ({
+  useComfyManagerStore: vi.fn()
+}))
+
+vi.mock('@/workbench/extensions/manager/stores/conflictDetectionStore', () => ({
+  useConflictDetectionStore: vi.fn()
+}))
+
+vi.mock('@/workbench/extensions/manager/composables/useManagerState', () => ({
+  useManagerState: vi.fn(() => ({
+    isNewManagerUI: { value: true }
+  }))
+}))
+
+describe('useConflictDetection', () => {
+  let pinia: ReturnType<typeof createPinia>
+
+  const mockComfyManagerService = {
+    getImportFailInfoBulk: vi.fn(),
+    isLoading: ref(false),
+    error: ref<string | null>(null)
+  } as unknown as ReturnType<typeof useComfyManagerService>
+
+  const mockRegistryService = {
+    getBulkNodeVersions: vi.fn(),
+    isLoading: ref(false),
+    error: ref<string | null>(null)
+  } as unknown as ReturnType<typeof useComfyRegistryService>
+
+  // Create a ref that can be modified in tests
+  const mockInstalledPacksWithVersions = ref<{ id: string; version: string }[]>(
+    []
+  )
+
+  const mockInstalledPacks = {
+    startFetchInstalled: vi.fn(),
+    installedPacks: ref<components['schemas']['Node'][]>([]),
+    installedPacksWithVersions: computed(
+      () => mockInstalledPacksWithVersions.value
+    ),
+    isReady: ref(false),
+    isLoading: ref(false),
+    error: ref<unknown>(null)
+  } as unknown as ReturnType<typeof useInstalledPacks>
+
+  const mockManagerStore = {
+    isPackEnabled: vi.fn()
+  } as unknown as ReturnType<typeof useComfyManagerStore>
+
+  // Create refs that can be used to control computed properties
+  const mockConflictedPackages = ref<ConflictDetectionResult[]>([])
+
+  const mockConflictStore = {
+    hasConflicts: computed(() =>
+      mockConflictedPackages.value.some((p) => p.has_conflict)
+    ),
+    conflictedPackages: mockConflictedPackages,
+    bannedPackages: computed(() =>
+      mockConflictedPackages.value.filter((p) =>
+        p.conflicts?.some((c) => c.type === 'banned')
+      )
+    ),
+    securityPendingPackages: computed(() =>
+      mockConflictedPackages.value.filter((p) =>
+        p.conflicts?.some((c) => c.type === 'pending')
+      )
+    ),
+    setConflictedPackages: vi.fn(),
+    clearConflicts: vi.fn()
+  } as unknown as ReturnType<typeof useConflictDetectionStore>
+
+  const mockSystemStatsStore = {
+    systemStats: {
+      system: {
+        os: 'darwin', // sys.platform returns 'darwin' for macOS
+        ram_total: 17179869184,
+        ram_free: 8589934592,
+        comfyui_version: '0.3.41',
+        required_frontend_version: '1.24.0',
+        python_version:
+          '3.11.0 (main, Oct 13 2023, 09:34:16) [Clang 15.0.0 (clang-1500.0.40.1)]',
+        pytorch_version: '2.1.0',
+        embedded_python: false,
+        argv: []
+      },
+      devices: [
+        {
+          name: 'Apple M1 Pro',
+          type: 'mps',
+          index: 0,
+          vram_total: 17179869184,
+          vram_free: 8589934592,
+          torch_vram_total: 17179869184,
+          torch_vram_free: 8589934592
+        }
+      ]
+    },
+    isInitialized: ref(true),
+    $state: {} as never,
+    $patch: vi.fn(),
+    $reset: vi.fn(),
+    $subscribe: vi.fn(),
+    $onAction: vi.fn(),
+    $dispose: vi.fn(),
+    $id: 'systemStats',
+    _customProperties: new Set<string>()
+  } as unknown as ReturnType<typeof useSystemStatsStore>
+
+  const mockAcknowledgment = {
+    checkComfyUIVersionChange: vi.fn(),
+    acknowledgmentState: computed(() => ({})),
+    shouldShowConflictModal: computed(() => false),
+    shouldShowRedDot: computed(() => false),
+    shouldShowManagerBanner: computed(() => false),
+    dismissRedDotNotification: vi.fn(),
+    dismissWarningBanner: vi.fn(),
+    markConflictsAsSeen: vi.fn()
+  } as unknown as ReturnType<typeof useConflictAcknowledgment>
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    pinia = createPinia()
+    setActivePinia(pinia)
+
+    // Setup mocks
+    vi.mocked(useComfyManagerService).mockReturnValue(mockComfyManagerService)
+    vi.mocked(useComfyRegistryService).mockReturnValue(mockRegistryService)
+    vi.mocked(useSystemStatsStore).mockReturnValue(mockSystemStatsStore)
+    vi.mocked(useConflictAcknowledgment).mockReturnValue(mockAcknowledgment)
+    vi.mocked(useInstalledPacks).mockReturnValue(mockInstalledPacks)
+    vi.mocked(useComfyManagerStore).mockReturnValue(mockManagerStore)
+    vi.mocked(useConflictDetectionStore).mockReturnValue(mockConflictStore)
+
+    // Reset mock implementations
+    vi.mocked(mockInstalledPacks.startFetchInstalled).mockResolvedValue(
+      undefined
+    )
+    vi.mocked(mockManagerStore.isPackEnabled).mockReturnValue(true)
+    vi.mocked(mockRegistryService.getBulkNodeVersions).mockResolvedValue({
+      node_versions: []
+    })
+    vi.mocked(mockComfyManagerService.getImportFailInfoBulk).mockResolvedValue(
+      {}
+    )
+
+    // Reset the installedPacksWithVersions data
+    mockInstalledPacksWithVersions.value = []
+    // Reset conflicted packages
+    mockConflictedPackages.value = []
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  describe('system environment collection', () => {
+    it('should collect system environment correctly', async () => {
+      const { collectSystemEnvironment } = useConflictDetection()
+      const environment = await collectSystemEnvironment()
+
+      expect(environment).toEqual({
+        comfyui_version: '0.3.41',
+        frontend_version: '1.24.0',
+        os: 'darwin',
+        accelerator: 'mps'
+      })
+    })
+
+    it('should handle missing system stats gracefully', async () => {
+      mockSystemStatsStore.systemStats = null as never
+
+      const { collectSystemEnvironment } = useConflictDetection()
+      const environment = await collectSystemEnvironment()
+
+      // When systemStats is null, empty strings are used as fallback
+      expect(environment).toEqual({
+        comfyui_version: '',
+        frontend_version: '1.24.0',
+        os: '',
+        accelerator: ''
+      })
+    })
+  })
+
+  describe('conflict detection', () => {
+    it('should detect version conflicts', async () => {
+      // Setup installed packages
+      mockInstalledPacks.isReady.value = true
+      mockInstalledPacks.installedPacks.value = [
+        {
+          id: 'test-pack',
+          name: 'Test Pack',
+          latest_version: { version: '1.0.0' }
+        } as components['schemas']['Node']
+      ]
+
+      mockInstalledPacksWithVersions.value = [
+        {
+          id: 'test-pack',
+          version: '1.0.0'
+        }
+      ]
+
+      // Mock registry response with version requirements
+      vi.mocked(mockRegistryService.getBulkNodeVersions).mockResolvedValue({
+        node_versions: [
+          {
+            status: 'success' as const,
+            identifier: { node_id: 'test-pack', version: '1.0.0' },
+            node_version: {
+              supported_comfyui_version: '>=0.4.0',
+              supported_comfyui_frontend_version: '>=2.0.0',
+              supported_os: ['Windows', 'Linux', 'macOS'],
+              supported_accelerators: ['CUDA', 'Metal', 'CPU'],
+              status: 'NodeVersionStatusActive' as const,
+              version: '1.0.0',
+              publisher_id: 'test-publisher',
+              node_id: 'test-pack',
+              created_at: '2024-01-01T00:00:00Z'
+            } as components['schemas']['NodeVersion']
+          }
+        ]
+      })
+
+      // Mock version checks to return conflicts
+      vi.mocked(checkVersionCompatibility).mockImplementation(
+        (type, current, required) => {
+          if (type === 'comfyui_version' && required === '>=0.4.0') {
+            return {
+              type: 'comfyui_version',
+              current_value: current || '0.3.41',
+              required_value: '>=0.4.0'
+            }
+          }
+          return null
+        }
+      )
+
+      const { runFullConflictAnalysis } = useConflictDetection()
+      const result = await runFullConflictAnalysis()
+
+      expect(result.success).toBe(true)
+      expect(result.results).toHaveLength(1)
+      expect(result.results[0].has_conflict).toBe(true)
+      expect(result.results[0].conflicts).toContainEqual({
+        type: 'comfyui_version',
+        current_value: '0.3.41',
+        required_value: '>=0.4.0'
+      })
+    })
+
+    it('should detect banned packages', async () => {
+      mockInstalledPacks.isReady.value = true
+      mockInstalledPacks.installedPacks.value = [
+        {
+          id: 'banned-pack',
+          name: 'Banned Pack'
+        } as components['schemas']['Node']
+      ]
+
+      mockInstalledPacksWithVersions.value = [
+        {
+          id: 'banned-pack',
+          version: '1.0.0'
+        }
+      ]
+
+      vi.mocked(mockRegistryService.getBulkNodeVersions).mockResolvedValue({
+        node_versions: [
+          {
+            status: 'success' as const,
+            identifier: { node_id: 'banned-pack', version: '1.0.0' },
+            node_version: {
+              status: 'NodeVersionStatusBanned' as const,
+              version: '1.0.0',
+              publisher_id: 'test-publisher',
+              node_id: 'banned-pack',
+              created_at: '2024-01-01T00:00:00Z',
+              supported_comfyui_version: undefined,
+              supported_comfyui_frontend_version: undefined,
+              supported_os: undefined,
+              supported_accelerators: undefined
+            } as components['schemas']['NodeVersion']
+          }
+        ]
+      })
+
+      const { runFullConflictAnalysis } = useConflictDetection()
+      const result = await runFullConflictAnalysis()
+
+      expect(result.results[0].conflicts).toContainEqual({
+        type: 'banned',
+        current_value: 'installed',
+        required_value: 'not_banned'
+      })
+    })
+
+    it('should detect import failures', async () => {
+      mockInstalledPacks.isReady.value = true
+      mockInstalledPacksWithVersions.value = [
+        {
+          id: 'fail-pack',
+          version: '1.0.0'
+        }
+      ]
+
+      vi.mocked(
+        mockComfyManagerService.getImportFailInfoBulk
+      ).mockResolvedValue({
+        'fail-pack': {
+          msg: 'Import error',
+          name: 'fail-pack',
+          path: '/path/to/pack'
+        } as any // The actual API returns different structure than types
+      })
+
+      // Mock registry response for the package
+      vi.mocked(mockRegistryService.getBulkNodeVersions).mockResolvedValue({
+        node_versions: []
+      })
+
+      const { runFullConflictAnalysis } = useConflictDetection()
+      const result = await runFullConflictAnalysis()
+
+      expect(result.results).toHaveLength(1)
+      // Import failure should match the actual implementation
+      expect(result.results[0].conflicts).toContainEqual({
+        type: 'import_failed',
+        current_value: 'installed',
+        required_value: 'Import error'
+      })
+    })
+  })
+
+  describe('computed properties', () => {
+    it('should expose conflict status from store', () => {
+      mockConflictedPackages.value = [
+        {
+          package_id: 'test',
+          package_name: 'Test',
+          has_conflict: true,
+          is_compatible: false,
+          conflicts: []
+        }
+      ]
+
+      useConflictDetection()
+
+      // The hasConflicts computed should be true since we have a conflict
+      expect(mockConflictedPackages.value).toHaveLength(1)
+      expect(mockConflictedPackages.value[0].has_conflict).toBe(true)
+    })
+  })
+
+  describe('initialization', () => {
+    it('should initialize without errors', async () => {
+      // Mock that installed packs are ready
+      mockInstalledPacks.isReady.value = true
+      mockInstalledPacksWithVersions.value = []
+
+      // Ensure startFetchInstalled resolves
+      vi.mocked(mockInstalledPacks.startFetchInstalled).mockResolvedValue(
+        undefined
+      )
+
+      const { initializeConflictDetection } = useConflictDetection()
+
+      // Set a timeout to prevent hanging
+      await expect(
+        Promise.race([
+          initializeConflictDetection(),
+          new Promise((_, reject) =>
+            setTimeout(() => reject(new Error('Timeout')), 1000)
+          )
+        ])
+      ).resolves.not.toThrow()
+    })
+  })
+})

tests-ui/tests/composables/useCoreCommands.test.ts

@@ -2,21 +2,29 @@ import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useCoreCommands } from '@/composables/useCoreCommands'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
-import { useSettingStore } from '@/stores/settingStore'
 
-vi.mock('@/scripts/app', () => ({
-  app: {
-    clean: vi.fn(),
-    canvas: {
-      subgraph: null
-    },
-    graph: {
-      clear: vi.fn()
+vi.mock('@/scripts/app', () => {
+  const mockGraphClear = vi.fn()
+  const mockCanvas = { subgraph: undefined }
+
+  return {
+    app: {
+      clean: vi.fn(() => {
+        // Simulate app.clean() calling graph.clear() only when not in subgraph
+        if (!mockCanvas.subgraph) {
+          mockGraphClear()
+        }
+      }),
+      canvas: mockCanvas,
+      graph: {
+        clear: mockGraphClear
+      }
     }
   }
-}))
+})
 
 vi.mock('@/scripts/api', () => ({
   api: {
@@ -25,7 +33,7 @@ vi.mock('@/scripts/api', () => ({
   }
 }))
 
-vi.mock('@/stores/settingStore')
+vi.mock('@/platform/settings/settingStore')
 
 vi.mock('@/stores/firebaseAuthStore', () => ({
   useFirebaseAuthStore: vi.fn(() => ({}))
@@ -41,7 +49,7 @@ vi.mock('firebase/auth', () => ({
   onAuthStateChanged: vi.fn()
 }))
 
-vi.mock('@/services/workflowService', () => ({
+vi.mock('@/platform/workflow/core/services/workflowService', () => ({
   useWorkflowService: vi.fn(() => ({}))
 }))
 
@@ -61,10 +69,14 @@ vi.mock('@/stores/toastStore', () => ({
   useToastStore: vi.fn(() => ({}))
 }))
 
-vi.mock('@/stores/workflowStore', () => ({
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
   useWorkflowStore: vi.fn(() => ({}))
 }))
 
+vi.mock('@/stores/subgraphStore', () => ({
+  useSubgraphStore: vi.fn(() => ({}))
+}))
+
 vi.mock('@/stores/workspace/colorPaletteStore', () => ({
   useColorPaletteStore: vi.fn(() => ({}))
 }))

tests-ui/tests/composables/useFeatureFlags.test.ts

@@ -0,0 +1,137 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { isReactive, isReadonly } from 'vue'
+
+import {
+  ServerFeatureFlag,
+  useFeatureFlags
+} from '@/composables/useFeatureFlags'
+import { api } from '@/scripts/api'
+
+// Mock the API module
+vi.mock('@/scripts/api', () => ({
+  api: {
+    getServerFeature: vi.fn()
+  }
+}))
+
+describe('useFeatureFlags', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('flags object', () => {
+    it('should provide reactive readonly flags', () => {
+      const { flags } = useFeatureFlags()
+
+      expect(isReadonly(flags)).toBe(true)
+      expect(isReactive(flags)).toBe(true)
+    })
+
+    it('should access supportsPreviewMetadata', () => {
+      vi.mocked(api.getServerFeature).mockImplementation(
+        (path, defaultValue) => {
+          if (path === ServerFeatureFlag.SUPPORTS_PREVIEW_METADATA)
+            return true as any
+          return defaultValue
+        }
+      )
+
+      const { flags } = useFeatureFlags()
+      expect(flags.supportsPreviewMetadata).toBe(true)
+      expect(api.getServerFeature).toHaveBeenCalledWith(
+        ServerFeatureFlag.SUPPORTS_PREVIEW_METADATA
+      )
+    })
+
+    it('should access maxUploadSize', () => {
+      vi.mocked(api.getServerFeature).mockImplementation(
+        (path, defaultValue) => {
+          if (path === ServerFeatureFlag.MAX_UPLOAD_SIZE)
+            return 209715200 as any // 200MB
+          return defaultValue
+        }
+      )
+
+      const { flags } = useFeatureFlags()
+      expect(flags.maxUploadSize).toBe(209715200)
+      expect(api.getServerFeature).toHaveBeenCalledWith(
+        ServerFeatureFlag.MAX_UPLOAD_SIZE
+      )
+    })
+
+    it('should access supportsManagerV4', () => {
+      vi.mocked(api.getServerFeature).mockImplementation(
+        (path, defaultValue) => {
+          if (path === ServerFeatureFlag.MANAGER_SUPPORTS_V4) return true as any
+          return defaultValue
+        }
+      )
+
+      const { flags } = useFeatureFlags()
+      expect(flags.supportsManagerV4).toBe(true)
+      expect(api.getServerFeature).toHaveBeenCalledWith(
+        ServerFeatureFlag.MANAGER_SUPPORTS_V4
+      )
+    })
+
+    it('should return undefined when features are not available and no default provided', () => {
+      vi.mocked(api.getServerFeature).mockImplementation(
+        (_path, defaultValue) => defaultValue as any
+      )
+
+      const { flags } = useFeatureFlags()
+      expect(flags.supportsPreviewMetadata).toBeUndefined()
+      expect(flags.maxUploadSize).toBeUndefined()
+      expect(flags.supportsManagerV4).toBeUndefined()
+    })
+  })
+
+  describe('featureFlag', () => {
+    it('should create reactive computed for custom feature flags', () => {
+      vi.mocked(api.getServerFeature).mockImplementation(
+        (path, defaultValue) => {
+          if (path === 'custom.feature') return 'custom-value' as any
+          return defaultValue
+        }
+      )
+
+      const { featureFlag } = useFeatureFlags()
+      const customFlag = featureFlag('custom.feature', 'default')
+
+      expect(customFlag.value).toBe('custom-value')
+      expect(api.getServerFeature).toHaveBeenCalledWith(
+        'custom.feature',
+        'default'
+      )
+    })
+
+    it('should handle nested paths', () => {
+      vi.mocked(api.getServerFeature).mockImplementation(
+        (path, defaultValue) => {
+          if (path === 'extension.custom.nested.feature') return true as any
+          return defaultValue
+        }
+      )
+
+      const { featureFlag } = useFeatureFlags()
+      const nestedFlag = featureFlag('extension.custom.nested.feature', false)
+
+      expect(nestedFlag.value).toBe(true)
+    })
+
+    it('should work with ServerFeatureFlag enum', () => {
+      vi.mocked(api.getServerFeature).mockImplementation(
+        (path, defaultValue) => {
+          if (path === ServerFeatureFlag.MAX_UPLOAD_SIZE)
+            return 104857600 as any
+          return defaultValue
+        }
+      )
+
+      const { featureFlag } = useFeatureFlags()
+      const maxUploadSize = featureFlag(ServerFeatureFlag.MAX_UPLOAD_SIZE)
+
+      expect(maxUploadSize.value).toBe(104857600)
+    })
+  })
+})

tests-ui/tests/composables/useFrontendVersionMismatchWarning.test.ts

@@ -3,9 +3,9 @@ import { vi } from 'vitest'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
 
-import { useFrontendVersionMismatchWarning } from '@/composables/useFrontendVersionMismatchWarning'
-import { useToastStore } from '@/stores/toastStore'
-import { useVersionCompatibilityStore } from '@/stores/versionCompatibilityStore'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { useFrontendVersionMismatchWarning } from '@/platform/updates/common/useFrontendVersionMismatchWarning'
+import { useVersionCompatibilityStore } from '@/platform/updates/common/versionCompatibilityStore'
 
 // Mock globals
 //@ts-expect-error Define global for the test

tests-ui/tests/composables/useImportFailedDetection.test.ts

@@ -0,0 +1,251 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { computed, ref } from 'vue'
+
+import * as dialogService from '@/services/dialogService'
+import { useImportFailedDetection } from '@/workbench/extensions/manager/composables/useImportFailedDetection'
+import * as comfyManagerStore from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import * as conflictDetectionStore from '@/workbench/extensions/manager/stores/conflictDetectionStore'
+
+// Mock the stores and services
+vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore')
+vi.mock('@/workbench/extensions/manager/stores/conflictDetectionStore')
+vi.mock('@/services/dialogService')
+vi.mock('vue-i18n', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('vue-i18n')>()
+  return {
+    ...actual,
+    useI18n: () => ({
+      t: vi.fn((key: string) => key)
+    })
+  }
+})
+
+describe('useImportFailedDetection', () => {
+  let mockComfyManagerStore: ReturnType<
+    typeof comfyManagerStore.useComfyManagerStore
+  >
+  let mockConflictDetectionStore: ReturnType<
+    typeof conflictDetectionStore.useConflictDetectionStore
+  >
+  let mockDialogService: ReturnType<typeof dialogService.useDialogService>
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+
+    mockComfyManagerStore = {
+      isPackInstalled: vi.fn()
+    } as unknown as ReturnType<typeof comfyManagerStore.useComfyManagerStore>
+
+    mockConflictDetectionStore = {
+      getConflictsForPackageByID: vi.fn()
+    } as unknown as ReturnType<
+      typeof conflictDetectionStore.useConflictDetectionStore
+    >
+
+    mockDialogService = {
+      showErrorDialog: vi.fn()
+    } as unknown as ReturnType<typeof dialogService.useDialogService>
+
+    vi.mocked(comfyManagerStore.useComfyManagerStore).mockReturnValue(
+      mockComfyManagerStore
+    )
+    vi.mocked(conflictDetectionStore.useConflictDetectionStore).mockReturnValue(
+      mockConflictDetectionStore
+    )
+    vi.mocked(dialogService.useDialogService).mockReturnValue(mockDialogService)
+  })
+
+  it('should return false for importFailed when package is not installed', () => {
+    vi.mocked(mockComfyManagerStore.isPackInstalled).mockReturnValue(false)
+
+    const { importFailed } = useImportFailedDetection('test-package')
+
+    expect(importFailed.value).toBe(false)
+  })
+
+  it('should return false for importFailed when no conflicts exist', () => {
+    vi.mocked(mockComfyManagerStore.isPackInstalled).mockReturnValue(true)
+    vi.mocked(
+      mockConflictDetectionStore.getConflictsForPackageByID
+    ).mockReturnValue(undefined)
+
+    const { importFailed } = useImportFailedDetection('test-package')
+
+    expect(importFailed.value).toBe(false)
+  })
+
+  it('should return false for importFailed when conflicts exist but no import_failed type', () => {
+    vi.mocked(mockComfyManagerStore.isPackInstalled).mockReturnValue(true)
+    vi.mocked(
+      mockConflictDetectionStore.getConflictsForPackageByID
+    ).mockReturnValue({
+      package_id: 'test-package',
+      package_name: 'Test Package',
+      has_conflict: true,
+      is_compatible: false,
+      conflicts: [
+        {
+          type: 'comfyui_version',
+          current_value: 'current',
+          required_value: 'required'
+        },
+        {
+          type: 'frontend_version',
+          current_value: 'current',
+          required_value: 'required'
+        }
+      ]
+    })
+
+    const { importFailed } = useImportFailedDetection('test-package')
+
+    expect(importFailed.value).toBe(false)
+  })
+
+  it('should return true for importFailed when import_failed conflicts exist', () => {
+    vi.mocked(mockComfyManagerStore.isPackInstalled).mockReturnValue(true)
+    vi.mocked(
+      mockConflictDetectionStore.getConflictsForPackageByID
+    ).mockReturnValue({
+      package_id: 'test-package',
+      package_name: 'Test Package',
+      has_conflict: true,
+      is_compatible: false,
+      conflicts: [
+        {
+          type: 'import_failed',
+          current_value: 'current',
+          required_value: 'Error details'
+        },
+        {
+          type: 'comfyui_version',
+          current_value: 'current',
+          required_value: 'required'
+        }
+      ]
+    })
+
+    const { importFailed } = useImportFailedDetection('test-package')
+
+    expect(importFailed.value).toBe(true)
+  })
+
+  it('should work with computed ref packageId', () => {
+    const packageId = ref('test-package')
+    vi.mocked(mockComfyManagerStore.isPackInstalled).mockReturnValue(true)
+    vi.mocked(
+      mockConflictDetectionStore.getConflictsForPackageByID
+    ).mockReturnValue({
+      package_id: 'test-package',
+      package_name: 'Test Package',
+      has_conflict: true,
+      is_compatible: false,
+      conflicts: [
+        {
+          type: 'import_failed',
+          current_value: 'current',
+          required_value: 'Error details'
+        }
+      ]
+    })
+
+    const { importFailed } = useImportFailedDetection(
+      computed(() => packageId.value)
+    )
+
+    expect(importFailed.value).toBe(true)
+
+    // Change packageId
+    packageId.value = 'another-package'
+    vi.mocked(
+      mockConflictDetectionStore.getConflictsForPackageByID
+    ).mockReturnValue(undefined)
+
+    expect(importFailed.value).toBe(false)
+  })
+
+  it('should return correct importFailedInfo', () => {
+    const importFailedConflicts = [
+      {
+        type: 'import_failed' as const,
+        current_value: 'current',
+        required_value: 'Error 1'
+      },
+      {
+        type: 'import_failed' as const,
+        current_value: 'current',
+        required_value: 'Error 2'
+      }
+    ]
+
+    vi.mocked(mockComfyManagerStore.isPackInstalled).mockReturnValue(true)
+    vi.mocked(
+      mockConflictDetectionStore.getConflictsForPackageByID
+    ).mockReturnValue({
+      package_id: 'test-package',
+      package_name: 'Test Package',
+      has_conflict: true,
+      is_compatible: false,
+      conflicts: [
+        ...importFailedConflicts,
+        {
+          type: 'comfyui_version',
+          current_value: 'current',
+          required_value: 'required'
+        }
+      ]
+    })
+
+    const { importFailedInfo } = useImportFailedDetection('test-package')
+
+    expect(importFailedInfo.value).toEqual(importFailedConflicts)
+  })
+
+  it('should show error dialog when showImportFailedDialog is called', () => {
+    const importFailedConflicts = [
+      {
+        type: 'import_failed' as const,
+        current_value: 'current',
+        required_value: 'Error details'
+      }
+    ]
+
+    vi.mocked(mockComfyManagerStore.isPackInstalled).mockReturnValue(true)
+    vi.mocked(
+      mockConflictDetectionStore.getConflictsForPackageByID
+    ).mockReturnValue({
+      package_id: 'test-package',
+      package_name: 'Test Package',
+      has_conflict: true,
+      is_compatible: false,
+      conflicts: importFailedConflicts
+    })
+
+    const { showImportFailedDialog } = useImportFailedDetection('test-package')
+
+    showImportFailedDialog()
+
+    expect(mockDialogService.showErrorDialog).toHaveBeenCalledWith(
+      expect.any(Error),
+      {
+        title: 'manager.failedToInstall',
+        reportType: 'importFailedError'
+      }
+    )
+  })
+
+  it('should handle null packageId', () => {
+    const { importFailed, isInstalled } = useImportFailedDetection(null)
+
+    expect(importFailed.value).toBe(false)
+    expect(isInstalled.value).toBe(false)
+  })
+
+  it('should handle undefined packageId', () => {
+    const { importFailed, isInstalled } = useImportFailedDetection(undefined)
+
+    expect(importFailed.value).toBe(false)
+    expect(isInstalled.value).toBe(false)
+  })
+})

tests-ui/tests/composables/useLoad3dViewer.test.ts

@@ -4,14 +4,14 @@ import { nextTick } from 'vue'
 import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useLoad3dService } from '@/services/load3dService'
-import { useToastStore } from '@/stores/toastStore'
 
 vi.mock('@/services/load3dService', () => ({
   useLoad3dService: vi.fn()
 }))
 
-vi.mock('@/stores/toastStore', () => ({
+vi.mock('@/platform/updates/common/toastStore', () => ({
   useToastStore: vi.fn()
 }))
 

tests-ui/tests/composables/useManagerQueue.test.ts

@@ -0,0 +1,222 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import { useManagerQueue } from '@/workbench/extensions/manager/composables/useManagerQueue'
+import type { components } from '@/workbench/extensions/manager/types/generatedManagerTypes'
+
+// Mock dialog service
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: () => ({
+    showManagerProgressDialog: vi.fn()
+  })
+}))
+
+// Mock the app API
+vi.mock('@/scripts/app', () => ({
+  app: {
+    api: {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      clientId: 'test-client-id'
+    }
+  }
+}))
+
+type ManagerTaskHistory = Record<
+  string,
+  components['schemas']['TaskHistoryItem']
+>
+type ManagerTaskQueue = components['schemas']['TaskStateMessage']
+
+describe('useManagerQueue', () => {
+  let taskHistory: any
+  let taskQueue: any
+  let installedPacks: any
+
+  const createManagerQueue = () => {
+    taskHistory = ref<ManagerTaskHistory>({})
+    taskQueue = ref<ManagerTaskQueue>({
+      history: {},
+      running_queue: [],
+      pending_queue: [],
+      installed_packs: {}
+    })
+    installedPacks = ref({})
+
+    return useManagerQueue(taskHistory, taskQueue, installedPacks)
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('initialization', () => {
+    it('should initialize with empty state', () => {
+      const queue = createManagerQueue()
+
+      expect(queue.currentQueueLength.value).toBe(0)
+      expect(queue.allTasksDone.value).toBe(true)
+      expect(queue.isProcessing.value).toBe(false)
+      expect(queue.historyCount.value).toBe(0)
+    })
+  })
+
+  describe('task state management', () => {
+    it('should track task queue length', () => {
+      const queue = createManagerQueue()
+
+      // Add tasks to queue
+      taskQueue.value.running_queue = [
+        {
+          ui_id: 'task1',
+          client_id: 'test-client-id',
+          task_name: 'Installing pack1'
+        }
+      ]
+      taskQueue.value.pending_queue = [
+        {
+          ui_id: 'task2',
+          client_id: 'test-client-id',
+          task_name: 'Installing pack2'
+        }
+      ]
+
+      expect(queue.currentQueueLength.value).toBe(2)
+      expect(queue.allTasksDone.value).toBe(false)
+    })
+
+    it('should handle empty queues', () => {
+      const queue = createManagerQueue()
+
+      taskQueue.value.running_queue = []
+      taskQueue.value.pending_queue = []
+
+      expect(queue.currentQueueLength.value).toBe(0)
+      expect(queue.allTasksDone.value).toBe(true)
+    })
+  })
+
+  describe('task history management', () => {
+    it('should track task history count', () => {
+      const queue = createManagerQueue()
+
+      taskHistory.value = {
+        task1: {
+          ui_id: 'task1',
+          client_id: 'test-client-id',
+          status: { status_str: 'success', completed: true }
+        },
+        task2: {
+          ui_id: 'task2',
+          client_id: 'test-client-id',
+          status: { status_str: 'success', completed: true }
+        }
+      }
+
+      expect(queue.historyCount.value).toBe(2)
+    })
+
+    it('should filter tasks by client ID', () => {
+      const queue = createManagerQueue()
+
+      const mockState = {
+        history: {
+          task1: {
+            ui_id: 'task1',
+            client_id: 'test-client-id', // This client
+            kind: 'install',
+            timestamp: '2024-01-01T00:00:00Z',
+            result: 'success',
+            status: {
+              status_str: 'success' as const,
+              completed: true,
+              messages: []
+            }
+          },
+          task2: {
+            ui_id: 'task2',
+            client_id: 'other-client-id', // Different client
+            kind: 'install',
+            timestamp: '2024-01-01T00:00:00Z',
+            result: 'success',
+            status: {
+              status_str: 'success' as const,
+              completed: true,
+              messages: []
+            }
+          }
+        },
+        running_queue: [],
+        pending_queue: [],
+        installed_packs: {}
+      }
+
+      queue.updateTaskState(mockState)
+
+      // Should only include task from this client
+      expect(taskHistory.value).toHaveProperty('task1')
+      expect(taskHistory.value).not.toHaveProperty('task2')
+    })
+
+    it('normalizes pack IDs when updating installed packs', () => {
+      const queue = createManagerQueue()
+
+      const mockState = {
+        history: {},
+        running_queue: [],
+        pending_queue: [],
+        installed_packs: {
+          'ComfyUI-GGUF@1_1_4': {
+            enabled: false,
+            cnr_id: 'ComfyUI-GGUF',
+            ver: '1.1.4'
+          },
+          'test-pack': {
+            enabled: true,
+            cnr_id: 'test-pack',
+            ver: '2.0.0'
+          }
+        }
+      }
+
+      queue.updateTaskState(mockState)
+
+      // Packs should be accessible by normalized keys
+      expect(installedPacks.value['ComfyUI-GGUF']).toEqual({
+        enabled: false,
+        cnr_id: 'ComfyUI-GGUF',
+        ver: '1.1.4'
+      })
+      expect(installedPacks.value['test-pack']).toEqual({
+        enabled: true,
+        cnr_id: 'test-pack',
+        ver: '2.0.0'
+      })
+
+      // Version suffixed keys should not exist after normalization
+      // The pack should be accessible by its base name only (without @version)
+      expect(installedPacks.value['ComfyUI-GGUF@1_1_4']).toBeUndefined()
+    })
+
+    it('handles empty installed_packs gracefully', () => {
+      const queue = createManagerQueue()
+
+      const mockState: any = {
+        history: {},
+        running_queue: [],
+        pending_queue: [],
+        installed_packs: undefined
+      }
+
+      // Just call the function - if it throws, the test will fail automatically
+      queue.updateTaskState(mockState)
+
+      // installedPacks should remain unchanged
+      expect(installedPacks.value).toEqual({})
+    })
+  })
+})

tests-ui/tests/composables/useManagerState.test.ts

@@ -0,0 +1,356 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { api } from '@/scripts/api'
+import { useExtensionStore } from '@/stores/extensionStore'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+import {
+  ManagerUIState,
+  useManagerState
+} from '@/workbench/extensions/manager/composables/useManagerState'
+
+// Mock dependencies
+vi.mock('@/scripts/api', () => ({
+  api: {
+    getClientFeatureFlags: vi.fn(),
+    getServerFeature: vi.fn()
+  }
+}))
+
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: vi.fn(() => ({
+    flags: { supportsManagerV4: false },
+    featureFlag: vi.fn()
+  }))
+}))
+
+vi.mock('@/stores/extensionStore', () => ({
+  useExtensionStore: vi.fn()
+}))
+
+vi.mock('@/stores/systemStatsStore', () => ({
+  useSystemStatsStore: vi.fn()
+}))
+
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: vi.fn(() => ({
+    showManagerPopup: vi.fn(),
+    showLegacyManagerPopup: vi.fn(),
+    showSettingsDialog: vi.fn()
+  }))
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: vi.fn(() => ({
+    execute: vi.fn()
+  }))
+}))
+
+vi.mock('@/stores/toastStore', () => ({
+  useToastStore: vi.fn(() => ({
+    add: vi.fn()
+  }))
+}))
+
+describe('useManagerState', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('managerUIState property', () => {
+    it('should return DISABLED state when --enable-manager is NOT present', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({
+          system: { argv: ['python', 'main.py'] } // No --enable-manager flag
+        }),
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+
+      expect(managerState.managerUIState.value).toBe(ManagerUIState.DISABLED)
+    })
+
+    it('should return LEGACY_UI state when --enable-manager-legacy-ui is present', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({
+          system: {
+            argv: [
+              'python',
+              'main.py',
+              '--enable-manager',
+              '--enable-manager-legacy-ui'
+            ]
+          } // Both flags needed
+        }),
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+
+      expect(managerState.managerUIState.value).toBe(ManagerUIState.LEGACY_UI)
+    })
+
+    it('should return NEW_UI state when client and server both support v4', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager'] }
+        }), // Need --enable-manager
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
+        supports_manager_v4_ui: true
+      })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
+      vi.mocked(useFeatureFlags).mockReturnValue({
+        flags: { supportsManagerV4: true },
+        featureFlag: vi.fn()
+      } as any)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+
+      expect(managerState.managerUIState.value).toBe(ManagerUIState.NEW_UI)
+    })
+
+    it('should return LEGACY_UI state when server supports v4 but client does not', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager'] }
+        }), // Need --enable-manager
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
+        supports_manager_v4_ui: false
+      })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
+      vi.mocked(useFeatureFlags).mockReturnValue({
+        flags: { supportsManagerV4: true },
+        featureFlag: vi.fn()
+      } as any)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+
+      expect(managerState.managerUIState.value).toBe(ManagerUIState.LEGACY_UI)
+    })
+
+    it('should return LEGACY_UI state when legacy manager extension exists', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager'] }
+        }), // Need --enable-manager
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
+      vi.mocked(useFeatureFlags).mockReturnValue({
+        flags: { supportsManagerV4: false },
+        featureFlag: vi.fn()
+      } as any)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: [{ name: 'Comfy.CustomNodesManager' }]
+      } as any)
+
+      const managerState = useManagerState()
+
+      expect(managerState.managerUIState.value).toBe(ManagerUIState.LEGACY_UI)
+    })
+
+    it('should return NEW_UI state when server feature flags are undefined', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager'] }
+        }), // Need --enable-manager
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
+      vi.mocked(api.getServerFeature).mockReturnValue(undefined)
+      vi.mocked(useFeatureFlags).mockReturnValue({
+        flags: { supportsManagerV4: undefined },
+        featureFlag: vi.fn()
+      } as any)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+
+      expect(managerState.managerUIState.value).toBe(ManagerUIState.NEW_UI)
+    })
+
+    it('should return LEGACY_UI state when server does not support v4', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager'] }
+        }), // Need --enable-manager
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
+      vi.mocked(api.getServerFeature).mockReturnValue(false)
+      vi.mocked(useFeatureFlags).mockReturnValue({
+        flags: { supportsManagerV4: false },
+        featureFlag: vi.fn()
+      } as any)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+
+      expect(managerState.managerUIState.value).toBe(ManagerUIState.LEGACY_UI)
+    })
+
+    it('should handle null systemStats gracefully', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref(null),
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
+        supports_manager_v4_ui: true
+      })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
+      vi.mocked(useFeatureFlags).mockReturnValue({
+        flags: { supportsManagerV4: true },
+        featureFlag: vi.fn()
+      } as any)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+
+      // When systemStats is null, we can't check for --enable-manager flag, so manager is disabled
+      expect(managerState.managerUIState.value).toBe(ManagerUIState.DISABLED)
+    })
+  })
+
+  describe('helper properties', () => {
+    it('isManagerEnabled should return true when state is not DISABLED', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager'] }
+        }), // Need --enable-manager
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
+        supports_manager_v4_ui: true
+      })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+      expect(managerState.isManagerEnabled.value).toBe(true)
+    })
+
+    it('isManagerEnabled should return false when state is DISABLED', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({
+          system: { argv: ['python', 'main.py'] } // No --enable-manager flag means disabled
+        }),
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+      expect(managerState.isManagerEnabled.value).toBe(false)
+    })
+
+    it('isNewManagerUI should return true when state is NEW_UI', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager'] }
+        }), // Need --enable-manager
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
+        supports_manager_v4_ui: true
+      })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+      expect(managerState.isNewManagerUI.value).toBe(true)
+    })
+
+    it('isLegacyManagerUI should return true when state is LEGACY_UI', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({
+          system: {
+            argv: [
+              'python',
+              'main.py',
+              '--enable-manager',
+              '--enable-manager-legacy-ui'
+            ]
+          } // Both flags needed
+        }),
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({})
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+      expect(managerState.isLegacyManagerUI.value).toBe(true)
+    })
+
+    it('shouldShowInstallButton should return true only for NEW_UI', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager'] }
+        }), // Need --enable-manager
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
+        supports_manager_v4_ui: true
+      })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+      expect(managerState.shouldShowInstallButton.value).toBe(true)
+    })
+
+    it('shouldShowManagerButtons should return true when not DISABLED', () => {
+      vi.mocked(useSystemStatsStore).mockReturnValue({
+        systemStats: ref({
+          system: { argv: ['python', 'main.py', '--enable-manager'] }
+        }), // Need --enable-manager
+        isInitialized: ref(true)
+      } as any)
+      vi.mocked(api.getClientFeatureFlags).mockReturnValue({
+        supports_manager_v4_ui: true
+      })
+      vi.mocked(api.getServerFeature).mockReturnValue(true)
+      vi.mocked(useExtensionStore).mockReturnValue({
+        extensions: []
+      } as any)
+
+      const managerState = useManagerState()
+      expect(managerState.shouldShowManagerButtons.value).toBe(true)
+    })
+  })
+})

tests-ui/tests/composables/useMinimap.test.ts

@@ -115,11 +115,11 @@ const defaultSettingStore = {
   set: vi.fn().mockResolvedValue(undefined)
 }
 
-vi.mock('@/stores/graphStore', () => ({
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
   useCanvasStore: vi.fn(() => defaultCanvasStore)
 }))
 
-vi.mock('@/stores/settingStore', () => ({
+vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: vi.fn(() => defaultSettingStore)
 }))
 
@@ -147,7 +147,7 @@ vi.mock('@/scripts/app', () => ({
   }
 }))
 
-vi.mock('@/stores/workflowStore', () => ({
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
   useWorkflowStore: vi.fn(() => ({
     activeSubgraph: null
   }))

tests-ui/tests/composables/useMissingNodes.test.ts

@@ -1,13 +1,13 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
 
-import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
-import { useWorkflowPacks } from '@/composables/nodePack/useWorkflowPacks'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { app } from '@/scripts/app'
-import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { collectAllNodes } from '@/utils/graphTraversalUtil'
+import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
+import { useWorkflowPacks } from '@/workbench/extensions/manager/composables/nodePack/useWorkflowPacks'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 
 // Mock Vue's onMounted to execute immediately for testing
 vi.mock('vue', async () => {
@@ -19,11 +19,14 @@ vi.mock('vue', async () => {
 })
 
 // Mock the dependencies
-vi.mock('@/composables/nodePack/useWorkflowPacks', () => ({
-  useWorkflowPacks: vi.fn()
-}))
+vi.mock(
+  '@/workbench/extensions/manager/composables/nodePack/useWorkflowPacks',
+  () => ({
+    useWorkflowPacks: vi.fn()
+  })
+)
 
-vi.mock('@/stores/comfyManagerStore', () => ({
+vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore', () => ({
   useComfyManagerStore: vi.fn()
 }))
 

tests-ui/tests/composables/useNodeChatHistory.test.ts

@@ -1,25 +1,28 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useNodeChatHistory } from '@/composables/node/useNodeChatHistory'
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
-vi.mock('@/composables/widgets/useChatHistoryWidget', () => ({
-  useChatHistoryWidget: () => {
-    return (node: any, inputSpec: any) => {
-      const widget = {
-        name: inputSpec.name,
-        type: inputSpec.type
+vi.mock(
+  '@/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget',
+  () => ({
+    useChatHistoryWidget: () => {
+      return (node: any, inputSpec: any) => {
+        const widget = {
+          name: inputSpec.name,
+          type: inputSpec.type
+        }
+
+        if (!node.widgets) {
+          node.widgets = []
+        }
+        node.widgets.push(widget)
+
+        return widget
       }
-
-      if (!node.widgets) {
-        node.widgets = []
-      }
-      node.widgets.push(widget)
-
-      return widget
     }
-  }
-}))
+  })
+)
 
 // Mock LGraphNode type
 type MockNode = {

tests-ui/tests/composables/useServerLogs.test.ts

@@ -3,7 +3,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
 import { useServerLogs } from '@/composables/useServerLogs'
-import { LogsWsMessage } from '@/schemas/apiSchema'
+import type { LogsWsMessage } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 
 vi.mock('@/scripts/api', () => ({

tests-ui/tests/composables/useSettingSearch.test.ts

@@ -2,16 +2,19 @@ import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
-import { useSettingSearch } from '@/composables/setting/useSettingSearch'
 import { st } from '@/i18n'
-import { getSettingInfo, useSettingStore } from '@/stores/settingStore'
+import { useSettingSearch } from '@/platform/settings/composables/useSettingSearch'
+import {
+  getSettingInfo,
+  useSettingStore
+} from '@/platform/settings/settingStore'
 
 // Mock dependencies
 vi.mock('@/i18n', () => ({
   st: vi.fn((_: string, fallback: string) => fallback)
 }))
 
-vi.mock('@/stores/settingStore', () => ({
+vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: vi.fn(),
   getSettingInfo: vi.fn()
 }))

tests-ui/tests/composables/useTemplateWorkflows.test.ts

@@ -1,13 +1,16 @@
 import { flushPromises } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { useTemplateWorkflows } from '@/composables/useTemplateWorkflows'
-import { useWorkflowTemplatesStore } from '@/stores/workflowTemplatesStore'
+import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
+import { useWorkflowTemplatesStore } from '@/platform/workflow/templates/repositories/workflowTemplatesStore'
 
 // Mock the store
-vi.mock('@/stores/workflowTemplatesStore', () => ({
-  useWorkflowTemplatesStore: vi.fn()
-}))
+vi.mock(
+  '@/platform/workflow/templates/repositories/workflowTemplatesStore',
+  () => ({
+    useWorkflowTemplatesStore: vi.fn()
+  })
+)
 
 // Mock the API
 vi.mock('@/scripts/api', () => ({
@@ -222,28 +225,22 @@ describe('useTemplateWorkflows', () => {
     const { getTemplateDescription } = useTemplateWorkflows()
 
     // Default template with localized description
-    const descWithLocalized = getTemplateDescription(
-      {
-        name: 'test',
-        localizedDescription: 'Localized Description',
-        mediaType: 'image',
-        mediaSubtype: 'jpg',
-        description: 'Test'
-      },
-      'default'
-    )
+    const descWithLocalized = getTemplateDescription({
+      name: 'test',
+      localizedDescription: 'Localized Description',
+      mediaType: 'image',
+      mediaSubtype: 'jpg',
+      description: 'Test'
+    })
     expect(descWithLocalized).toBe('Localized Description')
 
     // Custom template with description
-    const customDesc = getTemplateDescription(
-      {
-        name: 'test',
-        description: 'custom-template_description',
-        mediaType: 'image',
-        mediaSubtype: 'jpg'
-      },
-      'custom-module'
-    )
+    const customDesc = getTemplateDescription({
+      name: 'test',
+      description: 'custom-template_description',
+      mediaType: 'image',
+      mediaSubtype: 'jpg'
+    })
     expect(customDesc).toBe('custom template description')
   })
 

tests-ui/tests/composables/useUpdateAvailableNodes.test.ts

@@ -0,0 +1,558 @@
+import { compare, valid } from 'semver'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import type { components } from '@/types/comfyRegistryTypes'
+import { useInstalledPacks } from '@/workbench/extensions/manager/composables/nodePack/useInstalledPacks'
+import { useUpdateAvailableNodes } from '@/workbench/extensions/manager/composables/nodePack/useUpdateAvailableNodes'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+
+// Mock Vue's onMounted to execute immediately for testing
+vi.mock('vue', async () => {
+  const actual = await vi.importActual('vue')
+  return {
+    ...actual,
+    onMounted: (cb: () => void) => cb()
+  }
+})
+
+// Mock the dependencies
+vi.mock(
+  '@/workbench/extensions/manager/composables/nodePack/useInstalledPacks',
+  () => ({
+    useInstalledPacks: vi.fn()
+  })
+)
+
+vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore', () => ({
+  useComfyManagerStore: vi.fn()
+}))
+
+vi.mock('semver', () => ({
+  compare: vi.fn(),
+  valid: vi.fn()
+}))
+
+const mockUseInstalledPacks = vi.mocked(useInstalledPacks)
+const mockUseComfyManagerStore = vi.mocked(useComfyManagerStore)
+
+const mockSemverCompare = vi.mocked(compare)
+const mockSemverValid = vi.mocked(valid)
+
+describe('useUpdateAvailableNodes', () => {
+  const mockInstalledPacks = [
+    {
+      id: 'pack-1',
+      name: 'Outdated Pack',
+      latest_version: { version: '2.0.0' }
+    } as components['schemas']['Node'],
+    {
+      id: 'pack-2',
+      name: 'Up to Date Pack',
+      latest_version: { version: '1.0.0' }
+    } as components['schemas']['Node'],
+    {
+      id: 'pack-3',
+      name: 'Nightly Pack',
+      latest_version: { version: '1.5.0' }
+    } as components['schemas']['Node'],
+    {
+      id: 'pack-4',
+      name: 'No Latest Version',
+      latest_version: undefined
+    } as components['schemas']['Node']
+  ]
+
+  const mockStartFetchInstalled = vi.fn()
+  const mockIsPackInstalled = vi.fn()
+  const mockGetInstalledPackVersion = vi.fn()
+  const mockIsPackEnabled = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    // Default setup
+    mockIsPackInstalled.mockReturnValue(true)
+    mockIsPackEnabled.mockReturnValue(true) // Default: all packs are enabled
+    mockGetInstalledPackVersion.mockImplementation((id: string) => {
+      switch (id) {
+        case 'pack-1':
+          return '1.0.0' // outdated
+        case 'pack-2':
+          return '1.0.0' // up to date
+        case 'pack-3':
+          return 'nightly-abc123' // nightly
+        case 'pack-4':
+          return '1.0.0' // no latest version
+        default:
+          return '1.0.0'
+      }
+    })
+
+    mockSemverValid.mockImplementation((version) => {
+      return version &&
+        typeof version === 'string' &&
+        !version.includes('nightly')
+        ? version
+        : null
+    })
+
+    mockSemverCompare.mockImplementation((latest, installed) => {
+      if (latest === '2.0.0' && installed === '1.0.0') return 1 // outdated
+      if (latest === '1.0.0' && installed === '1.0.0') return 0 // up to date
+      return 0
+    })
+
+    mockUseComfyManagerStore.mockReturnValue({
+      isPackInstalled: mockIsPackInstalled,
+      getInstalledPackVersion: mockGetInstalledPackVersion,
+      isPackEnabled: mockIsPackEnabled
+    } as unknown as ReturnType<typeof useComfyManagerStore>)
+
+    mockUseInstalledPacks.mockReturnValue({
+      installedPacks: ref([]),
+      isLoading: ref(false),
+      isReady: ref(false),
+      error: ref(null),
+      startFetchInstalled: mockStartFetchInstalled,
+      installedPacksWithVersions: ref([]),
+      filterInstalledPack: vi.fn()
+    } as unknown as ReturnType<typeof useInstalledPacks>)
+  })
+
+  describe('core filtering logic', () => {
+    it('identifies outdated packs correctly', () => {
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref(mockInstalledPacks),
+        isLoading: ref(false),
+        isReady: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { updateAvailableNodePacks } = useUpdateAvailableNodes()
+
+      // Should only include pack-1 (outdated)
+      expect(updateAvailableNodePacks.value).toHaveLength(1)
+      expect(updateAvailableNodePacks.value[0].id).toBe('pack-1')
+    })
+
+    it('excludes up-to-date packs', () => {
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[1]]), // pack-2: up to date
+        isLoading: ref(false),
+        isReady: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { updateAvailableNodePacks } = useUpdateAvailableNodes()
+
+      expect(updateAvailableNodePacks.value).toHaveLength(0)
+    })
+
+    it('excludes nightly packs from updates', () => {
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[2]]), // pack-3: nightly
+        isLoading: ref(false),
+        isReady: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { updateAvailableNodePacks } = useUpdateAvailableNodes()
+
+      expect(updateAvailableNodePacks.value).toHaveLength(0)
+    })
+
+    it('excludes packs with no latest version', () => {
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[3]]), // pack-4: no latest version
+        isLoading: ref(false),
+        isReady: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { updateAvailableNodePacks } = useUpdateAvailableNodes()
+
+      expect(updateAvailableNodePacks.value).toHaveLength(0)
+    })
+
+    it('excludes uninstalled packs', () => {
+      mockIsPackInstalled.mockReturnValue(false)
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref(mockInstalledPacks),
+        isLoading: ref(false),
+        isReady: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { updateAvailableNodePacks } = useUpdateAvailableNodes()
+
+      expect(updateAvailableNodePacks.value).toHaveLength(0)
+    })
+
+    it('returns empty array when no installed packs exist', () => {
+      const { updateAvailableNodePacks } = useUpdateAvailableNodes()
+
+      expect(updateAvailableNodePacks.value).toEqual([])
+    })
+  })
+
+  describe('hasUpdateAvailable computed', () => {
+    it('returns true when updates are available', () => {
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { hasUpdateAvailable } = useUpdateAvailableNodes()
+
+      expect(hasUpdateAvailable.value).toBe(true)
+    })
+
+    it('returns false when no updates are available', () => {
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[1]]), // pack-2: up to date
+        isLoading: ref(false),
+        isReady: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { hasUpdateAvailable } = useUpdateAvailableNodes()
+
+      expect(hasUpdateAvailable.value).toBe(false)
+    })
+  })
+
+  describe('automatic data fetching', () => {
+    it('fetches installed packs automatically when none exist', () => {
+      useUpdateAvailableNodes()
+
+      expect(mockStartFetchInstalled).toHaveBeenCalledOnce()
+    })
+
+    it('does not fetch when packs already exist', () => {
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref(mockInstalledPacks),
+        isLoading: ref(false),
+        isReady: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      useUpdateAvailableNodes()
+
+      expect(mockStartFetchInstalled).not.toHaveBeenCalled()
+    })
+
+    it('does not fetch when already loading', () => {
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([]),
+        isLoading: ref(true),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      useUpdateAvailableNodes()
+
+      expect(mockStartFetchInstalled).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('state management', () => {
+    it('exposes loading state from useInstalledPacks', () => {
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([]),
+        isLoading: ref(true),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { isLoading } = useUpdateAvailableNodes()
+
+      expect(isLoading.value).toBe(true)
+    })
+
+    it('exposes error state from useInstalledPacks', () => {
+      const testError = 'Failed to fetch installed packs'
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([]),
+        isLoading: ref(false),
+        error: ref(testError),
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { error } = useUpdateAvailableNodes()
+
+      expect(error.value).toBe(testError)
+    })
+  })
+
+  describe('reactivity', () => {
+    it('updates when installed packs change', async () => {
+      const installedPacksRef = ref<components['schemas']['Node'][]>([])
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: installedPacksRef,
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { updateAvailableNodePacks, hasUpdateAvailable } =
+        useUpdateAvailableNodes()
+
+      // Initially empty
+      expect(updateAvailableNodePacks.value).toEqual([])
+      expect(hasUpdateAvailable.value).toBe(false)
+
+      // Update installed packs
+      installedPacksRef.value = [mockInstalledPacks[0]]
+      await nextTick()
+
+      // Should update available updates
+      expect(updateAvailableNodePacks.value).toHaveLength(1)
+      expect(hasUpdateAvailable.value).toBe(true)
+    })
+  })
+
+  describe('version comparison logic', () => {
+    it('calls compareVersions with correct parameters', () => {
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[0]]), // pack-1
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { updateAvailableNodePacks } = useUpdateAvailableNodes()
+
+      // Access the computed to trigger the logic
+      expect(updateAvailableNodePacks.value).toBeDefined()
+
+      expect(mockSemverCompare).toHaveBeenCalledWith('2.0.0', '1.0.0')
+    })
+
+    it('calls semver.valid to check nightly versions', () => {
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[2]]), // pack-3: nightly
+        isLoading: ref(false),
+        isReady: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { updateAvailableNodePacks } = useUpdateAvailableNodes()
+
+      // Access the computed to trigger the logic
+      expect(updateAvailableNodePacks.value).toBeDefined()
+
+      expect(mockSemverValid).toHaveBeenCalledWith('nightly-abc123')
+    })
+
+    it('calls isPackInstalled for each pack', () => {
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref(mockInstalledPacks),
+        isLoading: ref(false),
+        isReady: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { updateAvailableNodePacks } = useUpdateAvailableNodes()
+
+      // Access the computed to trigger the logic
+      expect(updateAvailableNodePacks.value).toBeDefined()
+
+      expect(mockIsPackInstalled).toHaveBeenCalledWith('pack-1')
+      expect(mockIsPackInstalled).toHaveBeenCalledWith('pack-2')
+      expect(mockIsPackInstalled).toHaveBeenCalledWith('pack-3')
+      expect(mockIsPackInstalled).toHaveBeenCalledWith('pack-4')
+    })
+  })
+
+  describe('enabledUpdateAvailableNodePacks', () => {
+    it('returns only enabled packs with updates', () => {
+      mockIsPackEnabled.mockImplementation((id: string) => {
+        // pack-1 is disabled
+        return id !== 'pack-1'
+      })
+
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[0], mockInstalledPacks[1]]),
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { updateAvailableNodePacks, enabledUpdateAvailableNodePacks } =
+        useUpdateAvailableNodes()
+
+      // pack-1 has updates but is disabled
+      expect(updateAvailableNodePacks.value).toHaveLength(1)
+      expect(updateAvailableNodePacks.value[0].id).toBe('pack-1')
+
+      // enabledUpdateAvailableNodePacks should be empty
+      expect(enabledUpdateAvailableNodePacks.value).toHaveLength(0)
+    })
+
+    it('returns all packs when all are enabled', () => {
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { updateAvailableNodePacks, enabledUpdateAvailableNodePacks } =
+        useUpdateAvailableNodes()
+
+      expect(updateAvailableNodePacks.value).toHaveLength(1)
+      expect(enabledUpdateAvailableNodePacks.value).toHaveLength(1)
+      expect(enabledUpdateAvailableNodePacks.value[0].id).toBe('pack-1')
+    })
+  })
+
+  describe('hasDisabledUpdatePacks', () => {
+    it('returns true when there are disabled packs with updates', () => {
+      mockIsPackEnabled.mockImplementation((id: string) => {
+        // pack-1 is disabled
+        return id !== 'pack-1'
+      })
+
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { hasDisabledUpdatePacks } = useUpdateAvailableNodes()
+
+      expect(hasDisabledUpdatePacks.value).toBe(true)
+    })
+
+    it('returns false when all packs with updates are enabled', () => {
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { hasDisabledUpdatePacks } = useUpdateAvailableNodes()
+
+      expect(hasDisabledUpdatePacks.value).toBe(false)
+    })
+
+    it('returns false when no packs have updates', () => {
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[1]]), // pack-2: up to date
+        isLoading: ref(false),
+        isReady: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { hasDisabledUpdatePacks } = useUpdateAvailableNodes()
+
+      expect(hasDisabledUpdatePacks.value).toBe(false)
+    })
+  })
+
+  describe('hasUpdateAvailable with disabled packs', () => {
+    it('returns false when only disabled packs have updates', () => {
+      mockIsPackEnabled.mockReturnValue(false) // All packs disabled
+
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { hasUpdateAvailable } = useUpdateAvailableNodes()
+
+      expect(hasUpdateAvailable.value).toBe(false)
+    })
+
+    it('returns true when at least one enabled pack has updates', () => {
+      mockIsPackEnabled.mockImplementation((id: string) => {
+        // Only pack-1 is enabled
+        return id === 'pack-1'
+      })
+
+      mockUseInstalledPacks.mockReturnValue({
+        installedPacks: ref([mockInstalledPacks[0]]), // pack-1: outdated
+        isLoading: ref(false),
+        error: ref(null),
+        startFetchInstalled: mockStartFetchInstalled,
+        isReady: ref(false),
+        installedPacksWithVersions: ref([]),
+        filterInstalledPack: vi.fn()
+      } as unknown as ReturnType<typeof useInstalledPacks>)
+
+      const { hasUpdateAvailable } = useUpdateAvailableNodes()
+
+      expect(hasUpdateAvailable.value).toBe(true)
+    })
+  })
+})

tests-ui/tests/composables/useWorkflowAutoSave.test.ts

@@ -1,9 +1,9 @@
 import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { useWorkflowAutoSave } from '@/composables/useWorkflowAutoSave'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import { useWorkflowAutoSave } from '@/platform/workflow/persistence/composables/useWorkflowAutoSave'
 import { api } from '@/scripts/api'
-import { useWorkflowService } from '@/services/workflowService'
 
 vi.mock('@/scripts/api', () => ({
   api: {
@@ -12,13 +12,13 @@ vi.mock('@/scripts/api', () => ({
   }
 }))
 
-vi.mock('@/services/workflowService', () => ({
+vi.mock('@/platform/workflow/core/services/workflowService', () => ({
   useWorkflowService: vi.fn(() => ({
     saveWorkflow: vi.fn()
   }))
 }))
 
-vi.mock('@/stores/settingStore', () => ({
+vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: vi.fn(() => ({
     get: vi.fn((key) => {
       if (key === 'Comfy.Workflow.AutoSave') return mockAutoSaveSetting
@@ -28,7 +28,7 @@ vi.mock('@/stores/settingStore', () => ({
   }))
 }))
 
-vi.mock('@/stores/workflowStore', () => ({
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
   useWorkflowStore: vi.fn(() => ({
     activeWorkflow: mockActiveWorkflow
   }))

tests-ui/tests/composables/widgets/useComboWidget.test.ts

@@ -1,706 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { useComboWidget } from '@/composables/widgets/useComboWidget'
-import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { fileNameMappingService } from '@/services/fileNameMappingService'
-
-// Mock api to prevent app initialization
-vi.mock('@/scripts/api', () => ({
-  api: {
-    fetchApi: vi.fn(),
-    addEventListener: vi.fn(),
-    apiURL: vi.fn((path) => `/api${path}`),
-    fileURL: vi.fn((path) => path)
-  }
-}))
-
-vi.mock('@/scripts/widgets', () => ({
-  addValueControlWidgets: vi.fn()
-}))
-
-vi.mock('@/services/fileNameMappingService', () => ({
-  fileNameMappingService: {
-    getMapping: vi.fn().mockResolvedValue({}),
-    getCachedMapping: vi.fn().mockReturnValue({}),
-    getCachedReverseMapping: vi.fn().mockReturnValue({}),
-    refreshMapping: vi.fn().mockResolvedValue({}),
-    invalidateCache: vi.fn()
-  }
-}))
-
-describe('useComboWidget', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('deduplication', () => {
-    it('should display deduplicated names in dropdown', () => {
-      const constructor = useComboWidget()
-      const mockWidget = {
-        name: 'image',
-        value: 'hash1.png',
-        options: {
-          values: ['hash1.png', 'hash2.png', 'hash3.png']
-        },
-        callback: vi.fn()
-      }
-      const mockNode = {
-        addWidget: vi.fn().mockReturnValue(mockWidget)
-      }
-
-      // Mock deduplicated mapping
-      vi.mocked(fileNameMappingService.getCachedMapping).mockImplementation(
-        (_fileType, deduplicated) => {
-          if (deduplicated) {
-            return {
-              'hash1.png': 'vacation_hash1.png',
-              'hash2.png': 'vacation_hash2.png',
-              'hash3.png': 'landscape.png'
-            }
-          }
-          return {
-            'hash1.png': 'vacation.png',
-            'hash2.png': 'vacation.png',
-            'hash3.png': 'landscape.png'
-          }
-        }
-      )
-
-      const inputSpec: InputSpec = {
-        type: 'COMBO',
-        name: 'image',
-        options: ['hash1.png', 'hash2.png', 'hash3.png']
-      }
-
-      const widget = constructor(mockNode as any, inputSpec)
-
-      // Check that dropdown values are deduplicated
-      const dropdownValues = widget.options.values
-      expect(dropdownValues).toEqual([
-        'vacation_hash1.png',
-        'vacation_hash2.png',
-        'landscape.png'
-      ])
-    })
-
-    it('should correctly handle selection of deduplicated names', () => {
-      const constructor = useComboWidget()
-      const mockWidget = {
-        name: 'image',
-        value: 'hash1.png',
-        options: {
-          values: ['hash1.png', 'hash2.png']
-        },
-        callback: vi.fn()
-      }
-      const mockNode = {
-        addWidget: vi.fn().mockReturnValue(mockWidget)
-      }
-
-      // Mock deduplicated mappings
-      vi.mocked(fileNameMappingService.getCachedMapping).mockImplementation(
-        (_fileType, deduplicated) => {
-          if (deduplicated) {
-            return {
-              'hash1.png': 'image_hash1.png',
-              'hash2.png': 'image_hash2.png'
-            }
-          }
-          return {
-            'hash1.png': 'image.png',
-            'hash2.png': 'image.png'
-          }
-        }
-      )
-
-      vi.mocked(
-        fileNameMappingService.getCachedReverseMapping
-      ).mockImplementation((_fileType, deduplicated) => {
-        if (deduplicated) {
-          return {
-            'image_hash1.png': 'hash1.png',
-            'image_hash2.png': 'hash2.png'
-          } as Record<string, string>
-        }
-        return {
-          'image.png': 'hash2.png' // Last one wins in non-dedup
-        } as Record<string, string>
-      })
-
-      const inputSpec: InputSpec = {
-        type: 'COMBO',
-        name: 'image',
-        options: ['hash1.png', 'hash2.png']
-      }
-
-      const widget = constructor(mockNode as any, inputSpec)
-
-      // Select deduplicated name
-      ;(widget as any).setValue('image_hash1.png')
-
-      // Should set the correct hash value
-      expect(widget.value).toBe('hash1.png')
-    })
-
-    it('should display correct deduplicated name in _displayValue', () => {
-      const constructor = useComboWidget()
-      const mockWidget = {
-        name: 'image',
-        value: 'abc123.png',
-        options: {
-          values: ['abc123.png', 'def456.png']
-        },
-        callback: vi.fn()
-      }
-      const mockNode = {
-        addWidget: vi.fn().mockReturnValue(mockWidget)
-      }
-
-      // Mock deduplicated mapping
-      vi.mocked(fileNameMappingService.getCachedMapping).mockImplementation(
-        (_fileType, deduplicated) => {
-          if (deduplicated) {
-            return {
-              'abc123.png': 'photo_abc123.png',
-              'def456.png': 'photo_def456.png'
-            }
-          }
-          return {
-            'abc123.png': 'photo.png',
-            'def456.png': 'photo.png'
-          }
-        }
-      )
-
-      const inputSpec: InputSpec = {
-        type: 'COMBO',
-        name: 'image',
-        options: ['abc123.png', 'def456.png']
-      }
-
-      const widget = constructor(mockNode as any, inputSpec)
-
-      // Check display value shows deduplicated name
-      expect((widget as any)._displayValue).toBe('photo_abc123.png')
-    })
-  })
-
-  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: {} })
-  })
-
-  describe('filename mapping', () => {
-    it('should apply filename mapping to widgets with file extensions', () => {
-      const constructor = useComboWidget()
-      const mockWidget = {
-        name: 'image',
-        value: 'abc123.png',
-        options: {
-          values: ['abc123.png', 'def456.jpg']
-        },
-        callback: vi.fn()
-      }
-
-      const mockNode = {
-        addWidget: vi.fn().mockReturnValue(mockWidget),
-        setDirtyCanvas: vi.fn(),
-        graph: {
-          setDirtyCanvas: vi.fn()
-        }
-      }
-
-      const inputSpec: InputSpec = {
-        type: 'COMBO',
-        name: 'image',
-        options: ['abc123.png', 'def456.jpg', 'xyz789.webp']
-      }
-
-      // Setup mapping service mocks
-      vi.mocked(fileNameMappingService.getCachedMapping).mockReturnValue({
-        'abc123.png': 'vacation_photo.png',
-        'def456.jpg': 'profile_picture.jpg',
-        'xyz789.webp': 'animated_logo.webp'
-      })
-
-      vi.mocked(fileNameMappingService.getCachedReverseMapping).mockReturnValue(
-        {
-          'vacation_photo.png': 'abc123.png',
-          'profile_picture.jpg': 'def456.jpg',
-          'animated_logo.webp': 'xyz789.webp'
-        }
-      )
-
-      vi.mocked(fileNameMappingService.getMapping).mockResolvedValue({
-        'abc123.png': 'vacation_photo.png',
-        'def456.jpg': 'profile_picture.jpg',
-        'xyz789.webp': 'animated_logo.webp'
-      })
-
-      const widget = constructor(mockNode as any, inputSpec)
-
-      // Widget should have mapping methods
-      expect(widget).toBeDefined()
-      expect(typeof (widget as any).refreshMappings).toBe('function')
-      expect(typeof (widget as any).serializeValue).toBe('function')
-    })
-
-    it('should display human-readable names in dropdown', () => {
-      const constructor = useComboWidget()
-      const mockWidget = {
-        name: 'image',
-        value: 'abc123.png',
-        options: {
-          values: ['abc123.png', 'def456.jpg']
-        },
-        callback: vi.fn()
-      }
-
-      const mockNode = {
-        addWidget: vi.fn().mockReturnValue(mockWidget),
-        setDirtyCanvas: vi.fn(),
-        graph: {
-          setDirtyCanvas: vi.fn()
-        }
-      }
-
-      const inputSpec: InputSpec = {
-        type: 'COMBO',
-        name: 'image',
-        options: ['abc123.png', 'def456.jpg']
-      }
-
-      vi.mocked(fileNameMappingService.getCachedMapping).mockReturnValue({
-        'abc123.png': 'vacation_photo.png',
-        'def456.jpg': 'profile_picture.jpg'
-      })
-
-      const widget = constructor(mockNode as any, inputSpec) as any
-
-      // Access options.values through the proxy
-      const dropdownValues = widget.options.values
-
-      // Should return human-readable names
-      expect(dropdownValues).toEqual([
-        'vacation_photo.png',
-        'profile_picture.jpg'
-      ])
-    })
-
-    it('should handle selection of human-readable name and convert to hash', () => {
-      const constructor = useComboWidget()
-      const mockWidget = {
-        name: 'image',
-        value: 'abc123.png',
-        options: {
-          values: ['abc123.png']
-        },
-        callback: vi.fn()
-      }
-
-      const mockNode = {
-        addWidget: vi.fn().mockReturnValue(mockWidget),
-        setDirtyCanvas: vi.fn(),
-        graph: {
-          setDirtyCanvas: vi.fn()
-        }
-      }
-
-      const inputSpec: InputSpec = {
-        type: 'COMBO',
-        name: 'image',
-        options: ['abc123.png']
-      }
-
-      vi.mocked(fileNameMappingService.getCachedReverseMapping).mockReturnValue(
-        {
-          'vacation_photo.png': 'abc123.png'
-        }
-      )
-
-      const widget = constructor(mockNode as any, inputSpec) as any
-
-      // Simulate selecting human-readable name
-      widget.callback('vacation_photo.png')
-
-      // Should store hash value
-      expect(widget.value).toBe('abc123.png')
-    })
-
-    it('should not apply mapping to non-file widgets', () => {
-      const constructor = useComboWidget()
-      const mockWidget = {
-        name: 'mode',
-        value: 'linear',
-        options: {
-          values: ['linear', 'cubic', 'nearest']
-        },
-        callback: vi.fn()
-      }
-
-      const mockNode = {
-        addWidget: vi.fn().mockReturnValue(mockWidget)
-      }
-
-      const inputSpec: InputSpec = {
-        type: 'COMBO',
-        name: 'mode',
-        options: ['linear', 'cubic', 'nearest']
-      }
-
-      const widget = constructor(mockNode as any, inputSpec)
-
-      // Should not have mapping methods
-      expect((widget as any).refreshMappings).toBeUndefined()
-      expect((widget as any).serializeValue).toBeUndefined()
-    })
-
-    it('should show newly uploaded file in dropdown even without mapping', () => {
-      const constructor = useComboWidget()
-      const mockWidget = {
-        name: 'image',
-        value: 'abc123.png',
-        options: {
-          values: ['abc123.png']
-        },
-        callback: vi.fn()
-      }
-
-      const mockNode = {
-        addWidget: vi.fn().mockReturnValue(mockWidget),
-        setDirtyCanvas: vi.fn(),
-        graph: {
-          setDirtyCanvas: vi.fn()
-        }
-      }
-
-      const inputSpec: InputSpec = {
-        type: 'COMBO',
-        name: 'image',
-        options: ['abc123.png']
-      }
-
-      // Start with mapping for existing file only
-      vi.mocked(fileNameMappingService.getCachedMapping).mockReturnValue({
-        'abc123.png': 'vacation_photo.png'
-      })
-
-      const widget = constructor(mockNode as any, inputSpec) as any
-
-      // Simulate adding new file without mapping yet
-      const newValues = [...mockWidget.options.values, 'new789.png']
-      mockWidget.options.values = newValues
-
-      // Mapping still doesn't have the new file
-      vi.mocked(fileNameMappingService.getCachedMapping).mockReturnValue({
-        'abc123.png': 'vacation_photo.png'
-      })
-
-      // Force refresh
-      widget.refreshMappings()
-
-      // Access updated dropdown values
-      const dropdownValues = widget.options.values
-
-      // Should show human name for mapped file and hash for unmapped file
-      expect(dropdownValues).toEqual(['vacation_photo.png', 'new789.png'])
-    })
-
-    it('should handle dropdown update after new file upload', () => {
-      const constructor = useComboWidget()
-      const mockWidget = {
-        name: 'image',
-        value: 'abc123.png',
-        options: {
-          values: ['abc123.png']
-        },
-        callback: vi.fn()
-      }
-
-      const mockNode = {
-        addWidget: vi.fn().mockReturnValue(mockWidget),
-        setDirtyCanvas: vi.fn(),
-        graph: {
-          setDirtyCanvas: vi.fn()
-        }
-      }
-
-      const inputSpec: InputSpec = {
-        type: 'COMBO',
-        name: 'image',
-        options: ['abc123.png']
-      }
-
-      // Initial mapping
-      vi.mocked(fileNameMappingService.getCachedMapping).mockReturnValue({
-        'abc123.png': 'vacation_photo.png'
-      })
-
-      const widget = constructor(mockNode as any, inputSpec) as any
-
-      // The proxy should initially return mapped values
-      expect(widget.options.values).toEqual(['vacation_photo.png'])
-
-      // Simulate adding new file by replacing the values array (as happens in practice)
-      // This is how addToComboValues would modify it
-      const newValues = [...mockWidget.options.values, 'new789.png']
-      mockWidget.options.values = newValues
-
-      // Update mapping to include the new file
-      vi.mocked(fileNameMappingService.getCachedMapping).mockReturnValue({
-        'abc123.png': 'vacation_photo.png',
-        'new789.png': 'new_upload.png'
-      })
-
-      // Force refresh of cached values
-      widget.refreshMappings()
-
-      // Access updated dropdown values - proxy should recompute with new mapping
-      const dropdownValues = widget.options.values
-
-      // Should include both mapped names
-      expect(dropdownValues).toEqual(['vacation_photo.png', 'new_upload.png'])
-    })
-
-    it('should display hash as fallback when no mapping exists', () => {
-      const constructor = useComboWidget()
-      const mockWidget = {
-        name: 'image',
-        value: 'unmapped123.png',
-        options: {
-          values: ['unmapped123.png']
-        },
-        callback: vi.fn()
-      }
-
-      const mockNode = {
-        addWidget: vi.fn().mockReturnValue(mockWidget),
-        setDirtyCanvas: vi.fn(),
-        graph: {
-          setDirtyCanvas: vi.fn()
-        }
-      }
-
-      const inputSpec: InputSpec = {
-        type: 'COMBO',
-        name: 'image',
-        options: ['unmapped123.png']
-      }
-
-      // Return empty mapping
-      vi.mocked(fileNameMappingService.getCachedMapping).mockReturnValue({})
-
-      const widget = constructor(mockNode as any, inputSpec) as any
-
-      // Access _displayValue
-      const displayValue = widget._displayValue
-
-      // Should show hash when no mapping exists
-      expect(displayValue).toBe('unmapped123.png')
-
-      // Dropdown should also show hash
-      const dropdownValues = widget.options.values
-      expect(dropdownValues).toEqual(['unmapped123.png'])
-    })
-
-    it('should serialize widget value as hash for API calls', () => {
-      const constructor = useComboWidget()
-      const mockWidget = {
-        name: 'image',
-        value: 'abc123.png',
-        options: {
-          values: ['abc123.png']
-        },
-        callback: vi.fn()
-      }
-
-      const mockNode = {
-        addWidget: vi.fn().mockReturnValue(mockWidget),
-        setDirtyCanvas: vi.fn(),
-        graph: {
-          setDirtyCanvas: vi.fn()
-        }
-      }
-
-      const inputSpec: InputSpec = {
-        type: 'COMBO',
-        name: 'image',
-        options: ['abc123.png']
-      }
-
-      vi.mocked(fileNameMappingService.getCachedMapping).mockReturnValue({
-        'abc123.png': 'vacation_photo.png'
-      })
-
-      const widget = constructor(mockNode as any, inputSpec) as any
-
-      // serializeValue should always return hash
-      const serialized = widget.serializeValue()
-      expect(serialized).toBe('abc123.png')
-    })
-
-    it('should ensure widget.value always contains hash for API calls', () => {
-      const constructor = useComboWidget()
-      const mockWidget = {
-        name: 'image',
-        value: 'abc123.png',
-        options: {
-          values: ['abc123.png']
-        },
-        callback: vi.fn()
-      }
-
-      const mockNode = {
-        addWidget: vi.fn().mockReturnValue(mockWidget),
-        setDirtyCanvas: vi.fn(),
-        graph: {
-          setDirtyCanvas: vi.fn()
-        }
-      }
-
-      const inputSpec: InputSpec = {
-        type: 'COMBO',
-        name: 'image',
-        options: ['abc123.png']
-      }
-
-      vi.mocked(fileNameMappingService.getCachedMapping).mockReturnValue({
-        'abc123.png': 'vacation.png'
-      })
-
-      vi.mocked(fileNameMappingService.getCachedReverseMapping).mockReturnValue(
-        {
-          'vacation.png': 'abc123.png'
-        }
-      )
-
-      const widget = constructor(mockNode as any, inputSpec) as any
-
-      // Simulate user selecting from dropdown (human name)
-      widget.setValue('vacation.png')
-
-      // Widget.value should contain the hash for API calls
-      expect(widget.value).toBe('abc123.png')
-
-      // Callback should also convert human name to hash
-      widget.callback('vacation.png')
-      expect(widget.value).toBe('abc123.png')
-
-      // The value used for API calls should always be the hash
-      // This is what would be used in /view?filename=...
-      const apiValue = widget.value
-      expect(apiValue).toBe('abc123.png')
-    })
-
-    it('should handle arrow key navigation with filename mapping', () => {
-      const constructor = useComboWidget()
-      const mockWidget = {
-        name: 'image',
-        value: 'abc123.png',
-        options: {
-          values: ['abc123.png', 'def456.jpg', 'xyz789.webp']
-        },
-        callback: vi.fn()
-      }
-
-      const mockNode = {
-        addWidget: vi.fn().mockReturnValue(mockWidget),
-        setDirtyCanvas: vi.fn(),
-        graph: {
-          setDirtyCanvas: vi.fn()
-        }
-      }
-
-      const inputSpec: InputSpec = {
-        type: 'COMBO',
-        name: 'image',
-        options: ['abc123.png', 'def456.jpg', 'xyz789.webp']
-      }
-
-      vi.mocked(fileNameMappingService.getCachedMapping).mockReturnValue({
-        'abc123.png': 'vacation.png',
-        'def456.jpg': 'profile.jpg',
-        'xyz789.webp': 'banner.webp'
-      })
-
-      vi.mocked(fileNameMappingService.getCachedReverseMapping).mockReturnValue(
-        {
-          'vacation.png': 'abc123.png',
-          'profile.jpg': 'def456.jpg',
-          'banner.webp': 'xyz789.webp'
-        }
-      )
-
-      const widget = constructor(mockNode as any, inputSpec) as any
-
-      // Test increment (arrow right/up)
-      widget.incrementValue({ canvas: { last_mouseclick: 0 } })
-
-      // Should move from abc123.png to def456.jpg
-      expect(widget.value).toBe('def456.jpg')
-
-      // Test decrement (arrow left/down)
-      widget.decrementValue({ canvas: { last_mouseclick: 0 } })
-
-      // Should move back to abc123.png
-      expect(widget.value).toBe('abc123.png')
-    })
-
-    it('should handle mixed file and non-file options', () => {
-      const constructor = useComboWidget()
-      const mockWidget = {
-        name: 'source',
-        value: 'abc123.png',
-        options: {
-          values: ['abc123.png', 'none', 'default']
-        },
-        callback: vi.fn()
-      }
-
-      const mockNode = {
-        addWidget: vi.fn().mockReturnValue(mockWidget),
-        setDirtyCanvas: vi.fn(),
-        graph: {
-          setDirtyCanvas: vi.fn()
-        }
-      }
-
-      const inputSpec: InputSpec = {
-        type: 'COMBO',
-        name: 'source',
-        options: ['abc123.png', 'none', 'default']
-      }
-
-      vi.mocked(fileNameMappingService.getCachedMapping).mockReturnValue({
-        'abc123.png': 'background.png'
-      })
-
-      const widget = constructor(mockNode as any, inputSpec) as any
-
-      const dropdownValues = widget.options.values
-
-      // Should map file, but leave non-files unchanged
-      expect(dropdownValues).toEqual(['background.png', 'none', 'default'])
-    })
-  })
-})

tests-ui/tests/composables/widgets/useFloatWidget.test.ts

@@ -1,80 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { _for_testing } from '@/composables/widgets/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/composables/widgets/useIntWidget.test.ts

@@ -1,72 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { _for_testing } from '@/composables/widgets/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/composables/widgets/useManagerQueue.test.ts

@@ -1,329 +0,0 @@
-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/composables/widgets/useRemoteWidget.test.ts

@@ -1,684 +0,0 @@
-import axios from 'axios'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { useRemoteWidget } from '@/composables/widgets/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
-      )
-    })
-  })
-})