test: cover queue display formatting

## Summary

Fix the two current blockers that prevented `pnpm test:coverage` from
completing on `main`.

Stack order: 1/x

## Changes

- Mock `load3dAdvanced` in the lazy-loader test so coverage does not
import the real Load3DAdvanced UI graph.
- Track the active workflow status in `useWorkflowStatusDismissal` so
terminal statuses arriving after activation are cleared.

## Test Results

| | before | after |
| -- | -- | -- |
| `pnpm test:coverage` | ❌ failed, so the stack had no usable coverage
baseline | ✅ passed with 877 test files passed; 11,772 passed / 8
skipped |
| focused tests | `load3dLazy` timed out; `useWorkflowStatusDismissal`
failed its active-workflow status case | ✅ `load3dLazy`: 13 passed;
`useWorkflowStatusDismissal`: 4 passed |

## Coverage

| | before | after |
| -- | -- | -- |
| statements | unavailable | 62.84% |
| branches | unavailable | 53.03% |
| functions | unavailable | 56.94% |
| lines | unavailable | 64.05% |

Screenshots: N/A, no UI change.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a
summary for commit 94c4c9bac1. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: huang47 <157390+huang47@users.noreply.github.com>

browser_tests/tests/vueNodes/interactions/node/move.spec.ts

@@ -335,6 +335,30 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
     await comfyPage.canvasOps.moveMouseToEmptyArea()
   })
 
+  test('pointerCancel stops autopan', async ({ comfyPage }) => {
+    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+    await ksampler.header.click({ trial: true })
+    await comfyPage.page.mouse.down()
+
+    const getOffset = () => comfyPage.canvasOps.getOffset()
+    const initialOffset = await getOffset()
+    await comfyPage.page.mouse.move(10, 10, { steps: 20 })
+    await expect.poll(getOffset, 'drag with autopan').not.toEqual(initialOffset)
+
+    await test.step('move outside pan range and cancel drag', async () => {
+      await comfyPage.page.mouse.move(400, 400, { steps: 20 })
+      await ksampler.header.evaluate((node) =>
+        node.dispatchEvent(new PointerEvent('pointercancel', { bubbles: true }))
+      )
+    })
+
+    const secondaryOffset = await getOffset()
+
+    await comfyPage.page.mouse.move(10, 10, { steps: 20 })
+    await comfyPage.nextFrame()
+    expect(await getOffset(), 'drag canceled').toEqual(secondaryOffset)
+  })
+
   test(
     '@mobile should allow moving nodes by dragging on touch devices',
     { tag: '@screenshot' },

package.json

@@ -19,7 +19,10 @@
     "size:collect": "node scripts/size-collect.js",
     "size:report": "node scripts/size-report.js",
     "collect-i18n": "pnpm exec playwright test --config=playwright.i18n.config.ts",
-    "dev:cloud": "cross-env DEV_SERVER_COMFYUI_URL='https://testcloud.comfy.org/' vite --config vite.config.mts",
+    "dev:cloud": "pnpm dev:cloud:test",
+    "dev:cloud:test": "cross-env DEV_SERVER_COMFYUI_URL=https://testcloud.comfy.org/ vite --config vite.config.mts",
+    "dev:cloud:staging": "cross-env DEV_SERVER_COMFYUI_URL=https://stagingcloud.comfy.org/ vite --config vite.config.mts",
+    "dev:cloud:prod": "cross-env DEV_SERVER_COMFYUI_URL=https://cloud.comfy.org/ vite --config vite.config.mts",
     "dev:desktop": "pnpm --filter @comfyorg/desktop-ui run dev",
     "dev:electron": "cross-env DISTRIBUTION=desktop vite --config vite.electron.config.mts",
     "dev:no-vue": "cross-env DISABLE_VUE_PLUGINS=true vite --config vite.config.mts",

src/composables/useWorkflowStatusDismissal.ts

@@ -8,12 +8,12 @@ export function useWorkflowStatusDismissal() {
   const executionStore = useExecutionStore()
 
   watch(
-    () => workflowStore.activeWorkflow,
-    (workflow) => {
-      if (
-        workflow &&
-        executionStore.getWorkflowStatus(workflow) !== 'running'
-      ) {
+    () => {
+      const workflow = workflowStore.activeWorkflow
+      return [workflow, executionStore.getWorkflowStatus(workflow)] as const
+    },
+    ([workflow, status]) => {
+      if (workflow && status !== undefined && status !== 'running') {
         executionStore.clearWorkflowStatus(workflow)
       }
     },

src/extensions/core/load3dLazy.test.ts

@@ -26,6 +26,7 @@ vi.mock('@/scripts/app', () => ({
 }))
 
 vi.mock('@/extensions/core/load3d', () => ({}))
+vi.mock('@/extensions/core/load3dAdvanced', () => ({}))
 vi.mock('@/extensions/core/load3dPreviewExtensions', () => ({}))
 vi.mock('@/extensions/core/saveMesh', () => ({}))
 

src/extensions/core/uploadAudio.test.ts

@@ -246,3 +246,37 @@ describe('Comfy.UploadAudio AUDIOUPLOAD widget', () => {
     expect(mockFetchApi).not.toHaveBeenCalled()
   })
 })
+
+type AudioUIWidget = (node: LGraphNode, inputName: string) => unknown
+
+async function loadAudioUIWidget() {
+  vi.resetModules()
+  mockRegisterExtension.mockClear()
+  await import('./uploadAudio')
+  const extension = mockRegisterExtension.mock.calls
+    .map(([extension]) => extension as ComfyExtension)
+    .find((extension) => extension.name === 'Comfy.AudioWidget')
+  if (!extension)
+    throw new Error('Comfy.AudioWidget extension was not registered')
+  const widgets = await extension.getCustomWidgets!(fromAny({}))
+  return (widgets as Record<string, AudioUIWidget>).AUDIO_UI
+}
+
+describe('Comfy.AudioWidget AUDIO_UI widget', () => {
+  it('excludes the audio player from workflow and prompt serialization', async () => {
+    const AUDIO_UI = await loadAudioUIWidget()
+    const domWidget = {
+      serialize: true,
+      options: {} as Record<string, unknown>
+    }
+    const node = fromAny<LGraphNode, unknown>({
+      addDOMWidget: vi.fn(() => domWidget),
+      constructor: { nodeData: { output_node: false } }
+    })
+
+    AUDIO_UI(node, 'audioUI')
+
+    expect(domWidget.serialize).toBe(false)
+    expect(domWidget.options.serialize).toBe(false)
+  })
+})

src/extensions/core/uploadAudio.ts

@@ -128,6 +128,7 @@ app.registerExtension({
         const audioUIWidget: DOMWidget<HTMLAudioElement, string> =
           node.addDOMWidget(inputName, /* name=*/ 'audioUI', audio)
         audioUIWidget.serialize = false
+        audioUIWidget.options.serialize = false
         const { nodeData } = node.constructor
         if (nodeData == null) throw new TypeError('nodeData is null')
 

src/lib/litegraph/src/LGraphCanvas.ts

@@ -829,6 +829,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
       if (this._lowQualityZoomThreshold > 0) {
         this._isLowQuality = scale < this._lowQualityZoomThreshold
       }
+      this.setDirty(true, true)
     }
 
     // Initialize link renderer if graph is available

src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts

@@ -129,6 +129,21 @@ describe('useSubscriptionDialog', () => {
       expect(props).not.toHaveProperty('onChooseTeam')
     })
 
+    it('sizes the unified pricing dialog via the Reka contentClass, not the ignored PrimeVue style', () => {
+      mockTeamWorkspacesEnabled.value = true
+      mockIsInPersonalWorkspace.value = true
+      const { showPricingTable } = useSubscriptionDialog()
+
+      showPricingTable()
+
+      const { dialogComponentProps } = mockShowLayoutDialog.mock.calls[0][0]
+      // Reka (the default renderer) sizes via size/contentClass; a PrimeVue
+      // `style` width is silently ignored and collapses the wide table to the
+      // default md (576px) frame.
+      expect(dialogComponentProps).toHaveProperty('contentClass')
+      expect(dialogComponentProps).not.toHaveProperty('style')
+    })
+
     it('defaults to the personal tab in a personal workspace', () => {
       mockTeamWorkspacesEnabled.value = true
       mockIsInPersonalWorkspace.value = true

src/platform/cloud/subscription/composables/useSubscriptionDialog.ts

@@ -129,18 +129,15 @@ export const useSubscriptionDialog = () => {
             (workspaceStore.isInPersonalWorkspace ? 'personal' : 'team')
         },
         dialogComponentProps: {
-          // The dialog hugs its content so each step sizes itself: the pricing
-          // table stays wide/fixed (cards fill it, DES QA 2026-06-13) while the
-          // compact confirm/success steps shrink instead of floating in the big
-          // pricing modal. Sizes are set on the content root per checkoutStep.
-          style: 'max-width: 95vw; max-height: 90vh;',
-          pt: {
-            root: { class: 'rounded-2xl bg-transparent' },
-            content: {
-              class:
-                '!p-0 rounded-2xl border border-border-default bg-secondary-background shadow-[0_25px_80px_rgba(5,6,12,0.45)]'
-            }
-          }
+          // Reka (the default renderer) sizes via size/contentClass; a PrimeVue
+          // `style` width is ignored here and collapses the table to the default
+          // `md` frame. `w-fit` lets each step hug its content — the pricing
+          // table fills its 1280px content while the compact confirm/success
+          // steps shrink (the content root sets its own width per checkoutStep).
+          renderer: 'reka',
+          size: 'full',
+          contentClass:
+            'w-fit max-w-[min(1280px,95vw)] sm:max-w-[min(1280px,95vw)] max-h-[90vh] rounded-2xl border border-border-default bg-secondary-background shadow-[0_25px_80px_rgba(5,6,12,0.45)]'
         }
       })
       return

src/renderer/core/layout/__tests__/TransformPane.test.ts

@@ -21,7 +21,6 @@ vi.mock('@/renderer/core/layout/transform/useTransformState', () => {
     useTransformState: () => ({
       camera: computed(() => mockData.mockCamera),
       transformStyle: computed(() => mockData.mockTransformStyle),
-      canvasToScreen: vi.fn(),
       screenToCanvas: vi.fn(),
       isNodeInViewport: vi.fn(),
       syncWithCanvas
@@ -180,7 +179,6 @@ describe('TransformPane', () => {
 
       const transformState = useTransformState()
       expect(transformState.syncWithCanvas).toBeDefined()
-      expect(transformState.canvasToScreen).toBeDefined()
       expect(transformState.screenToCanvas).toBeDefined()
     })
   })

src/renderer/core/layout/transform/useTransformState.test.ts

@@ -117,34 +117,6 @@ describe('useTransformState', () => {
       transformState.syncWithCanvas(mockCanvas as LGraphCanvas)
     })
 
-    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
@@ -157,186 +129,10 @@ describe('useTransformState', () => {
         // 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 LGraphCanvas)
-    })
-
-    it('should calculate correct screen bounds for a node', () => {
-      const { getNodeScreenBounds } = transformState
-
-      const nodePos: [number, number] = [10, 20]
-      const nodeSize: [number, number] = [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 LGraphCanvas)
-    })
-
-    const viewport = { width: 1000, height: 600 }
-
-    it('should return true for nodes inside viewport', () => {
-      const { isNodeInViewport } = transformState
-
-      const nodePos: [number, number] = [100, 100]
-      const nodeSize: [number, number] = [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: [number, number] = [-50, -50]
-      const nodeSize: [number, number] = [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: [number, number] = [100, 100]
-      const nodeSize: [number, number] = [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 LGraphCanvas)
-
-      // 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 LGraphCanvas)
-
-      // 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 LGraphCanvas)
-    })
-
-    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 LGraphCanvas)
-
-      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 LGraphCanvas)
-
-      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()

src/renderer/core/layout/transform/useTransformState.ts

@@ -104,24 +104,6 @@ function useTransformStateIndividual() {
     camera.z = canvas.ds.scale || 1
   }
 
-  /**
-   * Converts canvas coordinates to screen coordinates
-   *
-   * Applies the same transform that LiteGraph uses for rendering.
-   * Essential for positioning Vue components to align with canvas elements.
-   *
-   * Formula: screen = (canvas + offset) * scale
-   *
-   * @param point - Point in canvas coordinate system
-   * @returns Point in screen coordinate system
-   */
-  function canvasToScreen(point: Point): Point {
-    return {
-      x: (point.x + camera.x) * camera.z,
-      y: (point.y + camera.y) * camera.z
-    }
-  }
-
   /**
    * Converts screen coordinates to canvas coordinates
    *
@@ -140,111 +122,11 @@ function useTransformStateIndividual() {
     }
   }
 
-  // Get node's screen bounds for culling
-  function getNodeScreenBounds(
-    pos: [number, number],
-    size: [number, number]
-  ): DOMRect {
-    const topLeft = canvasToScreen({ x: pos[0], y: pos[1] })
-    const width = size[0] * camera.z
-    const height = size[1] * camera.z
-
-    return new DOMRect(topLeft.x, topLeft.y, width, height)
-  }
-
-  // Helper: Calculate zoom-adjusted margin for viewport culling
-  function calculateAdjustedMargin(baseMargin: number): number {
-    if (camera.z < 0.1) return Math.min(baseMargin * 5, 2.0)
-    if (camera.z > 3.0) return Math.max(baseMargin * 0.5, 0.05)
-    return baseMargin
-  }
-
-  // Helper: Check if node is too small to be visible at current zoom
-  function isNodeTooSmall(nodeSize: [number, number]): boolean {
-    const nodeScreenSize = Math.max(nodeSize[0], nodeSize[1]) * camera.z
-    return nodeScreenSize < 4
-  }
-
-  // Helper: Calculate expanded viewport bounds with margin
-  function getExpandedViewportBounds(
-    viewport: { width: number; height: number },
-    margin: number
-  ) {
-    const marginX = viewport.width * margin
-    const marginY = viewport.height * margin
-    return {
-      left: -marginX,
-      right: viewport.width + marginX,
-      top: -marginY,
-      bottom: viewport.height + marginY
-    }
-  }
-
-  // Helper: Test if node intersects with viewport bounds
-  function testViewportIntersection(
-    screenPos: { x: number; y: number },
-    nodeSize: [number, number],
-    bounds: { left: number; right: number; top: number; bottom: number }
-  ): boolean {
-    const nodeRight = screenPos.x + nodeSize[0] * camera.z
-    const nodeBottom = screenPos.y + nodeSize[1] * camera.z
-
-    return !(
-      nodeRight < bounds.left ||
-      screenPos.x > bounds.right ||
-      nodeBottom < bounds.top ||
-      screenPos.y > bounds.bottom
-    )
-  }
-
-  // Check if node is within viewport with frustum and size-based culling
-  function isNodeInViewport(
-    nodePos: [number, number],
-    nodeSize: [number, number],
-    viewport: { width: number; height: number },
-    margin: number = 0.2
-  ): boolean {
-    // Early exit for tiny nodes
-    if (isNodeTooSmall(nodeSize)) return false
-
-    const screenPos = canvasToScreen({ x: nodePos[0], y: nodePos[1] })
-    const adjustedMargin = calculateAdjustedMargin(margin)
-    const bounds = getExpandedViewportBounds(viewport, adjustedMargin)
-
-    return testViewportIntersection(screenPos, nodeSize, bounds)
-  }
-
-  // Get viewport bounds in canvas coordinates (for spatial index queries)
-  function getViewportBounds(
-    viewport: { width: number; height: number },
-    margin: number = 0.2
-  ) {
-    const marginX = viewport.width * margin
-    const marginY = viewport.height * margin
-
-    const topLeft = screenToCanvas({ x: -marginX, y: -marginY })
-    const bottomRight = screenToCanvas({
-      x: viewport.width + marginX,
-      y: viewport.height + marginY
-    })
-
-    return {
-      x: topLeft.x,
-      y: topLeft.y,
-      width: bottomRight.x - topLeft.x,
-      height: bottomRight.y - topLeft.y
-    }
-  }
-
   return {
     camera: readonly(camera),
     transformStyle,
     syncWithCanvas,
-    canvasToScreen,
-    screenToCanvas,
-    getNodeScreenBounds,
-    isNodeInViewport,
-    getViewportBounds
+    screenToCanvas
   }
 }
 

src/renderer/extensions/vueNodes/layout/useNodeDrag.test.ts

@@ -113,7 +113,8 @@ vi.mock('@/utils/litegraphUtil', () => ({
 }))
 
 vi.mock('@vueuse/core', () => ({
-  createSharedComposable: (fn: () => unknown) => fn
+  createSharedComposable: (fn: () => unknown) => fn,
+  whenever: vi.fn()
 }))
 
 import { useNodeDrag } from '@/renderer/extensions/vueNodes/layout/useNodeDrag'

src/renderer/extensions/vueNodes/layout/useNodeDrag.ts

@@ -1,3 +1,4 @@
+import { createSharedComposable, whenever } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { toValue } from 'vue'
 
@@ -16,7 +17,6 @@ import { useNodeSnap } from '@/renderer/extensions/vueNodes/composables/useNodeS
 import { useShiftKeySync } from '@/renderer/extensions/vueNodes/composables/useShiftKeySync'
 import { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
 import { isLGraphGroup } from '@/utils/litegraphUtil'
-import { createSharedComposable } from '@vueuse/core'
 
 export const useNodeDrag = createSharedComposable(useNodeDragIndividual)
 
@@ -282,27 +282,29 @@ function useNodeDragIndividual() {
       }
     }
 
+    resetDragState()
+  }
+
+  function resetDragState() {
     dragStartPos = null
     dragStartMouse = null
     otherSelectedNodesStartPositions = null
     selectedGroups = null
     lastCanvasDelta = null
 
-    // Stop auto-pan
     autoPan?.stop()
     autoPan = null
 
-    // Stop tracking shift key state
     stopShiftSync?.()
     stopShiftSync = null
 
-    // Cancel any pending animation frame
     if (rafId !== null) {
       cancelAnimationFrame(rafId)
       rafId = null
     }
   }
 
+  whenever(() => !layoutStore.isDraggingVueNodes.value, resetDragState)
   return {
     startDrag,
     handleDrag,

src/utils/queueDisplay.test.ts

@@ -0,0 +1,227 @@
+import { describe, expect, it } from 'vitest'
+
+import type { JobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
+import type { JobState } from '@/types/queue'
+import type { BuildJobDisplayCtx } from '@/utils/queueDisplay'
+import { buildJobDisplay, iconForJobState } from '@/utils/queueDisplay'
+
+type QueueDisplayTask = Parameters<typeof buildJobDisplay>[0]
+type PreviewOutput = NonNullable<QueueDisplayTask['previewOutput']>
+
+function createJob(
+  status: JobListItem['status'],
+  overrides: Partial<JobListItem> = {}
+): JobListItem {
+  return {
+    id: 'job-123456',
+    status,
+    create_time: 1_710_000_000_000,
+    priority: 12,
+    ...overrides
+  }
+}
+
+function createTask({
+  job,
+  jobId = 'job-123456',
+  createTime = 1_710_000_000_000,
+  executionTime,
+  executionTimeInSeconds,
+  previewOutput
+}: {
+  job?: Partial<JobListItem>
+  jobId?: string
+  createTime?: number
+  executionTime?: number
+  executionTimeInSeconds?: number
+  previewOutput?: PreviewOutput
+} = {}): QueueDisplayTask {
+  return {
+    job: createJob(job?.status ?? 'pending', job),
+    jobId,
+    createTime,
+    executionTime,
+    executionTimeInSeconds,
+    previewOutput
+  } as QueueDisplayTask
+}
+
+function createCtx(
+  overrides: Partial<BuildJobDisplayCtx> = {}
+): BuildJobDisplayCtx {
+  return {
+    t: (key, values) => {
+      const entries = Object.entries(values ?? {})
+      if (!entries.length) return key
+
+      return `${key}(${entries
+        .map(([name, value]) => `${name}=${String(value)}`)
+        .join(',')})`
+    },
+    locale: 'en-US',
+    formatClockTimeFn: (ts, locale) => `${locale}:${ts}`,
+    isActive: false,
+    ...overrides
+  }
+}
+
+describe('iconForJobState', () => {
+  it.for<[JobState, string]>([
+    ['pending', 'icon-[lucide--loader-circle]'],
+    ['initialization', 'icon-[lucide--server-crash]'],
+    ['running', 'icon-[lucide--zap]'],
+    ['completed', 'icon-[lucide--check-check]'],
+    ['failed', 'icon-[lucide--alert-circle]']
+  ])('maps %s to its icon', ([state, icon]) => {
+    expect(iconForJobState(state)).toBe(icon)
+  })
+})
+
+describe('buildJobDisplay', () => {
+  it('shows the added hint for pending jobs when requested', () => {
+    expect(
+      buildJobDisplay(
+        createTask(),
+        'pending',
+        createCtx({ showAddedHint: true })
+      )
+    ).toEqual({
+      iconName: 'icon-[lucide--check]',
+      primary: 'queue.jobAddedToQueue',
+      secondary: 'en-US:1710000000000',
+      showClear: true
+    })
+  })
+
+  it('shows queued time for pending and initializing jobs', () => {
+    expect(buildJobDisplay(createTask(), 'pending', createCtx())).toMatchObject(
+      {
+        iconName: 'icon-[lucide--loader-circle]',
+        primary: 'queue.inQueue',
+        secondary: 'en-US:1710000000000',
+        showClear: true
+      }
+    )
+
+    expect(
+      buildJobDisplay(createTask(), 'initialization', createCtx())
+    ).toMatchObject({
+      iconName: 'icon-[lucide--server-crash]',
+      primary: 'queue.initializingAlmostReady',
+      secondary: 'en-US:1710000000000',
+      showClear: true
+    })
+  })
+
+  it('formats active running progress from the injected context', () => {
+    expect(
+      buildJobDisplay(
+        createTask({ job: { status: 'in_progress' } }),
+        'running',
+        createCtx({
+          isActive: true,
+          totalPercent: 42.7,
+          currentNodePercent: -10,
+          currentNodeName: 'KSampler'
+        })
+      )
+    ).toEqual({
+      iconName: 'icon-[lucide--zap]',
+      primary: 'sideToolbar.queueProgressOverlay.total(percent=43%)',
+      secondary:
+        'KSampler sideToolbar.queueProgressOverlay.colonPercent(percent=0%)',
+      showClear: true
+    })
+  })
+
+  it('uses a compact running label when the job is not active', () => {
+    expect(
+      buildJobDisplay(
+        createTask({ job: { status: 'in_progress' } }),
+        'running',
+        createCtx()
+      )
+    ).toEqual({
+      iconName: 'icon-[lucide--zap]',
+      primary: 'g.running',
+      secondary: '',
+      showClear: true
+    })
+  })
+
+  it('shows local completed jobs as the preview filename', () => {
+    expect(
+      buildJobDisplay(
+        createTask({
+          job: {
+            status: 'completed'
+          },
+          executionTimeInSeconds: 3.51,
+          previewOutput: {
+            filename: 'preview.png',
+            isImage: true,
+            url: '/api/view?filename=preview.png&type=output&subfolder='
+          } as PreviewOutput
+        }),
+        'completed',
+        createCtx()
+      )
+    ).toEqual({
+      iconName: 'icon-[lucide--check-check]',
+      iconImageUrl: '/api/view?filename=preview.png&type=output&subfolder=',
+      primary: 'preview.png',
+      secondary: '3.51s',
+      showClear: false
+    })
+  })
+
+  it('shows cloud completed jobs as elapsed time', () => {
+    expect(
+      buildJobDisplay(
+        createTask({
+          job: {
+            status: 'completed'
+          },
+          executionTime: 64_000,
+          executionTimeInSeconds: 64
+        }),
+        'completed',
+        createCtx({ isCloud: true })
+      )
+    ).toMatchObject({
+      iconName: 'icon-[lucide--check-check]',
+      primary: 'queue.completedIn(duration=1m 4s)',
+      secondary: '64.00s',
+      showClear: false
+    })
+  })
+
+  it('falls back to job title for completed jobs without a preview filename', () => {
+    expect(
+      buildJobDisplay(
+        createTask({
+          job: {
+            status: 'completed',
+            priority: 42
+          }
+        }),
+        'completed',
+        createCtx()
+      )
+    ).toMatchObject({
+      iconName: 'icon-[lucide--check-check]',
+      primary: 'g.job #42',
+      secondary: '',
+      showClear: false
+    })
+  })
+
+  it('shows failed jobs as clearable failures', () => {
+    expect(buildJobDisplay(createTask(), 'failed', createCtx())).toEqual({
+      iconName: 'icon-[lucide--alert-circle]',
+      primary: 'g.failed',
+      secondary: 'g.failed',
+      showClear: true
+    })
+  })
+})