fix: acknowledge a new run ahead of outcome banners

browser_tests/tests/queueNotificationBanners.spec.ts

@@ -1,14 +1,23 @@
 import type { Page } from '@playwright/test'
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { expect, mergeTests } from '@playwright/test'
+
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
+import {
+  createRouteMockJob,
+  jobsRouteFixture
+} from '@e2e/fixtures/jobsRouteFixture'
 import { TestIds } from '@e2e/fixtures/selectors'
+import { webSocketFixture } from '@e2e/fixtures/ws'
+
+const test = mergeTests(comfyPageFixture, webSocketFixture, jobsRouteFixture)
 
 // Mirrors BANNER_DISMISS_DELAY_MS in src/composables/queue/useQueueNotificationBanners.ts.
 // Duplicated here to avoid pulling production source (and its litegraph
 // transitive deps) into the Playwright TS loader.
 const BANNER_DISMISS_DELAY_MS = 4000
 const BANNER_ASSERT_TIMEOUT_MS = BANNER_DISMISS_DELAY_MS + 2000
+const BANNER_MOCK_FINISH_SKEW_MS = 60_000
 
 const REQUEST_ID_PRIMARY = 1
 const REQUEST_ID_SECONDARY = 2
@@ -147,6 +156,43 @@ test.describe('Queue notification banners', { tag: ['@ui'] }, () => {
     })
   })
 
+  test.describe('Run acknowledgement priority', () => {
+    test('a new run is acknowledged over an outcome banner still on screen', async ({
+      comfyPage,
+      getWebSocket,
+      jobsRoutes
+    }) => {
+      const failedJobId = 'failed-job-1'
+      // mockJobsScenario matches queueStore's own maxHistoryItems (64); the bare
+      // mockJobsHistory default is 200 and never matches the request. The finish
+      // time has to beat the moment the queue goes active, which is later than
+      // this mock is built.
+      await jobsRoutes.mockJobsScenario({
+        history: [
+          createRouteMockJob({
+            id: failedJobId,
+            status: 'failed',
+            execution_end_time: Date.now() + BANNER_MOCK_FINISH_SKEW_MS
+          })
+        ]
+      })
+
+      const exec = new ExecutionHelper(comfyPage, await getWebSocket())
+      exec.executionStart(failedJobId)
+      exec.executionError(failedJobId, '1', 'boom')
+      exec.status(0)
+
+      const banner = bannerLocator(comfyPage.page)
+      await expect(banner).toContainText('failed', {
+        timeout: BANNER_ASSERT_TIMEOUT_MS
+      })
+
+      await dispatchPromptQueueing(comfyPage.page)
+
+      await expect(banner).toContainText('queuing')
+    })
+  })
+
   test.describe('Direct queued event (no pending predecessor)', () => {
     test('promptQueued without prior queueing shows queued banner directly', async ({
       comfyPage

src/composables/queue/useQueueNotificationBanners.test.ts

@@ -343,4 +343,134 @@ describe(useQueueNotificationBanners, () => {
       unmount()
     }
   })
+
+  it('acknowledges a new run over an outcome notification still on screen', async () => {
+    const { unmount, composable } = mountComposable()
+
+    try {
+      await runBatch({
+        start: 5_000,
+        finish: 5_100,
+        tasks: [createTask({ state: 'Failed', ts: 5_050 })]
+      })
+
+      expect(composable.currentNotification.value).toEqual({
+        type: 'failed',
+        count: 1
+      })
+
+      mockApi.dispatchEvent(
+        new CustomEvent('promptQueueing', {
+          detail: { requestId: 7, batchCount: 1 }
+        })
+      )
+      await nextTick()
+
+      expect(composable.currentNotification.value).toEqual({
+        type: 'queuedPending',
+        count: 1,
+        requestId: 7
+      })
+    } finally {
+      unmount()
+    }
+  })
+
+  it('acknowledges a new run ahead of outcome notifications still waiting', async () => {
+    const { unmount, composable } = mountComposable()
+
+    try {
+      await runBatch({
+        start: 6_000,
+        finish: 6_100,
+        tasks: [
+          createTask({ ts: 6_050 }),
+          createTask({ state: 'Failed', ts: 6_060 })
+        ]
+      })
+
+      expect(composable.currentNotification.value).toEqual({
+        type: 'completed',
+        count: 1,
+        thumbnailUrls: []
+      })
+
+      mockApi.dispatchEvent(
+        new CustomEvent('promptQueueing', {
+          detail: { requestId: 8, batchCount: 1 }
+        })
+      )
+      await nextTick()
+
+      expect(composable.currentNotification.value).toEqual({
+        type: 'queuedPending',
+        count: 1,
+        requestId: 8
+      })
+
+      await vi.advanceTimersByTimeAsync(4000)
+      await nextTick()
+
+      expect(composable.currentNotification.value).toEqual({
+        type: 'failed',
+        count: 1
+      })
+    } finally {
+      unmount()
+    }
+  })
+
+  it('keeps a later run ahead of outcomes while an acknowledgement shows', async () => {
+    const { unmount, composable } = mountComposable()
+
+    try {
+      await runBatch({
+        start: 7_000,
+        finish: 7_100,
+        tasks: [
+          createTask({ ts: 7_050 }),
+          createTask({ state: 'Failed', ts: 7_060 })
+        ]
+      })
+
+      mockApi.dispatchEvent(
+        new CustomEvent('promptQueueing', {
+          detail: { requestId: 9, batchCount: 1 }
+        })
+      )
+      await nextTick()
+
+      expect(composable.currentNotification.value).toEqual({
+        type: 'queuedPending',
+        count: 1,
+        requestId: 9
+      })
+
+      mockApi.dispatchEvent(
+        new CustomEvent('promptQueueing', {
+          detail: { requestId: 10, batchCount: 1 }
+        })
+      )
+      await nextTick()
+
+      await vi.advanceTimersByTimeAsync(4000)
+      await nextTick()
+
+      expect(composable.currentNotification.value).toEqual({
+        type: 'queuedPending',
+        count: 1,
+        requestId: 10
+      })
+
+      await vi.advanceTimersByTimeAsync(4000)
+      await nextTick()
+
+      expect(composable.currentNotification.value).toEqual({
+        type: 'failed',
+        count: 1
+      })
+    } finally {
+      unmount()
+    }
+  })
 })

src/composables/queue/useQueueNotificationBanners.ts

@@ -36,6 +36,12 @@ export type QueueNotificationBanner =
   | QueueCompletedNotification
   | QueueFailedNotification
 
+const isRunAcknowledgement = (notification: QueueNotificationBanner) =>
+  notification.type === 'queuedPending' || notification.type === 'queued'
+
+const isOutcome = (notification: QueueNotificationBanner) =>
+  notification.type === 'completed' || notification.type === 'failed'
+
 const sanitizeCount = (value: number | undefined) => {
   if (!(typeof value === 'number' && value > 0)) {
     return 1
@@ -101,8 +107,36 @@ export const useQueueNotificationBanners = () => {
     )
   }
 
+  const queuePositionFor = (notification: QueueNotificationBanner) => {
+    if (!isRunAcknowledgement(notification)) {
+      return pendingNotifications.value.length
+    }
+    const firstOutcome = pendingNotifications.value.findIndex(isOutcome)
+    return firstOutcome === -1
+      ? pendingNotifications.value.length
+      : firstOutcome
+  }
+
   const queueNotification = (notification: QueueNotificationBanner) => {
-    pendingNotifications.value = [...pendingNotifications.value, notification]
+    if (isRunAcknowledgement(notification)) {
+      const active = activeNotification.value
+      if (active === null || isOutcome(active)) {
+        clearDismissTimer()
+        activeNotification.value = null
+        pendingNotifications.value = [
+          notification,
+          ...pendingNotifications.value
+        ]
+        showNextNotification()
+        return
+      }
+    }
+
+    pendingNotifications.value = pendingNotifications.value.toSpliced(
+      queuePositionFor(notification),
+      0,
+      notification
+    )
     showNextNotification()
   }