fix(manager): expose failure count on focusable Failed tab

The failure-count tooltip was on the non-focusable <i> indicator,
so keyboard users could not get the hint when focusing the tab.
Move the accessible name and title to the parent <a> (the actual
focusable element), and mark the icon aria-hidden since it is
purely decorative now.

src/locales/en/main.json

@@ -384,7 +384,12 @@
     "legacyManagerSearchTip": "Looking for ComfyUI-Manager? You can enable the legacy manager UI by starting ComfyUI with the --enable-manager-legacy-ui flag.",
     "failed": "Failed",
     "failedToInstall": "Failed to Install",
+    "failedTabIndicatorTooltip": "{count} installation failed | {count} installations failed",
     "installError": "Install Error",
+    "installFailureToast": {
+      "summary": "Installation failed",
+      "detail": "{count} extension failed to install. Check the Failed tab for details. | {count} extensions failed to install. Check the Failed tab for details."
+    },
     "importFailedGenericError": "Package failed to import. Check the console for more details.",
     "noNodesFound": "No nodes found",
     "noNodesFoundDescription": "The pack's nodes either could not be parsed, or the pack is a frontend extension only and doesn't have any nodes.",

src/workbench/extensions/manager/components/ManagerProgressToast.vue

@@ -18,11 +18,25 @@ const { isRestarting, isRestartCompleted, applyChanges } = useApplyChanges()
 const isExpanded = ref(false)
 const activeTabIndex = ref(0)
 
+const FAILED_TAB_KEY = 'failed'
+
+const failedCount = computed(() => comfyManagerStore.failedTasksIds.length)
+const hasFailures = computed(() => failedCount.value > 0)
+
+const failedTabIndicatorLabel = computed(() =>
+  t(
+    'manager.failedTabIndicatorTooltip',
+    { count: failedCount.value },
+    failedCount.value
+  )
+)
+
 const tabs = computed(() => [
   { label: t('manager.installationQueue') },
   {
+    key: FAILED_TAB_KEY,
     label: t('manager.failed', {
-      count: comfyManagerStore.failedTasksIds.length
+      count: failedCount.value
     })
   }
 ])
@@ -169,7 +183,31 @@ onBeforeUnmount(() => {
             menuitem: { class: 'font-medium' },
             action: { class: 'px-4 py-2' }
           }"
-        />
+        >
+          <template #item="{ item, props, label }">
+            <a
+              v-bind="props.action"
+              class="flex items-center gap-2"
+              :aria-label="
+                item.key === FAILED_TAB_KEY && hasFailures
+                  ? `${label} — ${failedTabIndicatorLabel}`
+                  : undefined
+              "
+              :title="
+                item.key === FAILED_TAB_KEY && hasFailures
+                  ? failedTabIndicatorLabel
+                  : undefined
+              "
+            >
+              <span>{{ label }}</span>
+              <i
+                v-if="item.key === FAILED_TAB_KEY && hasFailures"
+                class="pi pi-exclamation-circle text-danger"
+                aria-hidden="true"
+              />
+            </a>
+          </template>
+        </TabMenu>
       </div>
 
       <div

src/workbench/extensions/manager/stores/comfyManagerStore.test.ts

@@ -1,6 +1,6 @@
 import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick, ref } from 'vue'
 
 import { useComfyManagerService } from '@/workbench/extensions/manager/services/comfyManagerService'
@@ -55,6 +55,23 @@ vi.mock('vue-i18n', () => ({
   }))
 }))
 
+const { toastAddMock } = vi.hoisted(() => ({
+  toastAddMock: vi.fn()
+}))
+
+vi.mock('@/platform/updates/common/toastStore', () => ({
+  useToastStore: vi.fn(() => ({
+    add: toastAddMock
+  }))
+}))
+
+vi.mock('@/i18n', () => ({
+  t: (key: string, params?: Record<string, unknown>) => {
+    if (params && 'count' in params) return `${key}:${String(params.count)}`
+    return key
+  }
+}))
+
 interface EnabledDisabledTestCase {
   desc: string
   installed: Record<string, ManagerPackInstalled>
@@ -79,6 +96,8 @@ describe('useComfyManagerStore', () => {
   beforeEach(() => {
     setActivePinia(createTestingPinia({ stubActions: false }))
     vi.clearAllMocks()
+    toastAddMock.mockClear()
+    vi.useFakeTimers()
     mockManagerService = {
       isLoading: ref(false),
       error: ref(null),
@@ -102,6 +121,10 @@ describe('useComfyManagerStore', () => {
     vi.mocked(useComfyManagerService).mockReturnValue(mockManagerService)
   })
 
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
   const testCases: EnabledDisabledTestCase[] = [
     {
       desc: 'Two enabled versions',
@@ -501,4 +524,83 @@ describe('useComfyManagerStore', () => {
       expect(store.isPackInstalled('disabled-pack')).toBe(true)
     })
   })
+
+  describe('installation failure toast', () => {
+    const setTaskHistory = (
+      store: ReturnType<typeof useComfyManagerStore>,
+      history: Record<string, ManagerComponents['schemas']['TaskHistoryItem']>
+    ) => {
+      store.taskHistory = history
+    }
+
+    const errorTask = (
+      id: string
+    ): ManagerComponents['schemas']['TaskHistoryItem'] => ({
+      ui_id: id,
+      client_id: 'test',
+      kind: 'install',
+      result: 'failed',
+      status: { status_str: 'error', completed: false, messages: ['boom'] },
+      timestamp: new Date().toISOString()
+    })
+
+    const successTask = (
+      id: string
+    ): ManagerComponents['schemas']['TaskHistoryItem'] => ({
+      ui_id: id,
+      client_id: 'test',
+      kind: 'install',
+      result: 'success',
+      status: { status_str: 'success', completed: true, messages: [] },
+      timestamp: new Date().toISOString()
+    })
+
+    it('shows an error toast when a task fails', async () => {
+      const store = useComfyManagerStore()
+      setTaskHistory(store, { a: errorTask('a') })
+      await nextTick()
+      await vi.runAllTimersAsync()
+
+      expect(toastAddMock).toHaveBeenCalledTimes(1)
+      const message = toastAddMock.mock.calls[0][0]
+      expect(message.severity).toBe('error')
+      expect(message.summary).toBe('manager.installFailureToast.summary')
+      expect(message.detail).toBe('manager.installFailureToast.detail:1')
+    })
+
+    it('does not show a toast when all tasks succeed', async () => {
+      const store = useComfyManagerStore()
+      setTaskHistory(store, { a: successTask('a'), b: successTask('b') })
+      await nextTick()
+      await vi.runAllTimersAsync()
+
+      expect(toastAddMock).not.toHaveBeenCalled()
+    })
+
+    it('coalesces multiple failures that land in quick succession', async () => {
+      const store = useComfyManagerStore()
+      setTaskHistory(store, { a: errorTask('a') })
+      await nextTick()
+      setTaskHistory(store, { a: errorTask('a'), b: errorTask('b') })
+      await nextTick()
+      await vi.runAllTimersAsync()
+
+      expect(toastAddMock).toHaveBeenCalledTimes(1)
+      expect(toastAddMock.mock.calls[0][0].detail).toBe(
+        'manager.installFailureToast.detail:2'
+      )
+    })
+
+    it('does not show a stale toast when resetTaskState runs before the debounce fires', async () => {
+      const store = useComfyManagerStore()
+      setTaskHistory(store, { a: errorTask('a') })
+      await nextTick()
+
+      store.resetTaskState()
+      await nextTick()
+      await vi.runAllTimersAsync()
+
+      expect(toastAddMock).not.toHaveBeenCalled()
+    })
+  })
 })

src/workbench/extensions/manager/stores/comfyManagerStore.ts

@@ -1,4 +1,4 @@
-import { useEventListener, whenever } from '@vueuse/core'
+import { useDebounceFn, useEventListener, whenever } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { v4 as uuidv4 } from 'uuid'
 import { ref, watch } from 'vue'
@@ -6,6 +6,7 @@ import { ref, watch } from 'vue'
 import { t } from '@/i18n'
 import { useCachedRequest } from '@/composables/useCachedRequest'
 import { useServerLogs } from '@/composables/useServerLogs'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 
@@ -112,6 +113,30 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
     { deep: true }
   )
 
+  const pendingFailureCount = ref(0)
+
+  const flushFailureToast = useDebounceFn(() => {
+    if (pendingFailureCount.value === 0) return
+    const count = pendingFailureCount.value
+    pendingFailureCount.value = 0
+    useToastStore().add({
+      severity: 'error',
+      summary: t('manager.installFailureToast.summary'),
+      detail: t('manager.installFailureToast.detail', { count }, count),
+      life: 8000
+    })
+  }, 300)
+
+  watch(
+    () => failedTasksIds.value.length,
+    (newCount, oldCount) => {
+      const delta = newCount - (oldCount ?? 0)
+      if (delta <= 0) return
+      pendingFailureCount.value += delta
+      void flushFailureToast()
+    }
+  )
+
   const getPackId = (pack: ManagerPackInstalled) => pack.cnr_id || pack.aux_id
 
   const isInstalledPackId = (packName: string | undefined): boolean =>
@@ -336,7 +361,10 @@ export const useComfyManagerStore = defineStore('comfyManager', () => {
   }
 
   const resetTaskState = () => {
-    // Clear all task-related reactive state for fresh start after restart
+    // Clear all task-related reactive state for fresh start after restart.
+    // Also clear pendingFailureCount so any in-flight debounced failure
+    // toast (which reads this value before firing) becomes a no-op.
+    pendingFailureCount.value = 0
     taskLogs.value = []
     taskHistory.value = {}
     succeededTasksIds.value = []