diff --git a/src/components/TopMenuSection.test.ts b/src/components/TopMenuSection.test.ts
index c9693caedf..2ef1ffef55 100644
--- a/src/components/TopMenuSection.test.ts
+++ b/src/components/TopMenuSection.test.ts
@@ -215,6 +215,17 @@ describe('TopMenuSection', () => {
const queueButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
expect(queueButton.text()).toContain('3 active')
+ expect(wrapper.find('[data-testid="active-jobs-indicator"]').exists()).toBe(
+ true
+ )
+ })
+
+ it('hides the active jobs indicator when no jobs are active', () => {
+ const wrapper = createWrapper()
+
+ expect(wrapper.find('[data-testid="active-jobs-indicator"]').exists()).toBe(
+ false
+ )
})
it('hides queue progress overlay when QPO V2 is enabled', async () => {
diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue
index 5dc780b62f..69f79baad0 100644
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -60,7 +60,7 @@
? isQueueOverlayExpanded
: undefined
"
- class="px-3"
+ class="relative px-3"
data-testid="queue-overlay-toggle"
@click="toggleQueueOverlay"
@contextmenu.stop.prevent="showQueueContextMenu"
@@ -68,6 +68,12 @@
{{ activeJobsLabel }}
+
{{
isQueuePanelV2Enabled
@@ -139,6 +145,7 @@ import { useI18n } from 'vue-i18n'
import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
+import StatusBadge from '@/components/common/StatusBadge.vue'
import QueueInlineProgressSummary from '@/components/queue/QueueInlineProgressSummary.vue'
import QueueNotificationBannerHost from '@/components/queue/QueueNotificationBannerHost.vue'
import QueueProgressOverlay from '@/components/queue/QueueProgressOverlay.vue'