feat: split job history into a dedicated sidebar tab (#8957)

## Summary Move queue job history into a dedicated sidebar tab (gated by `Comfy.Queue.QPOV2`) and remove mixed job-history UI from the Assets sidebar so assets and job controls are separated. ## Changes - **What**: - Added `JobHistorySidebarTab` with reusable job UI primitives: `JobFilterTabs`, `JobFilterActions`, `JobAssetsList`, and shared `JobHistoryActionsMenu`. - Added reactive `job-history` tab registration in `sidebarTabStore`; prepends above Assets when `Comfy.Queue.QPOV2` is enabled and unregisters cleanly when disabled. - Added debounced search to `useJobList` (filters by job title, metadata, and prompt id). - Extracted clear-history dialog logic to `useQueueClearHistoryDialog` and reused it from queue overlay and job history tab. - Removed active-job rendering and queue-clear controls from assets list/grid/tab views; assets sidebar now focuses on media assets only. - Removed the QPOV2 gate from `MediaAssetViewModeToggle` and updated queue/job localized copy. - Added and updated tests for queue overlay header actions, job filters, search filtering, sidebar tab registration, and assets sidebar behavior. ## Review Focus - Verify QPOV2 toggle behavior: - `Docked Job History` menu action toggles `Comfy.Queue.QPOV2`. - `job-history` tab insertion/removal order and active-tab reset on removal. - Verify behavior split between tabs: - Job controls (cancel/delete/view/filter/search/clear history/clear queue) live in Job History. - Assets sidebar loading/empty states and list/grid rendering remain correct after removing active jobs. ## Screenshots (if applicable) <img width="670" height="707" alt="image" src="https://github.com/user-attachments/assets/3a201fcb-d104-4e95-b5fe-49c4006a30a5" />
2026-02-21 15:24:09 +00:00 · 2026-02-20 16:42:41 -08:00
parent 7baa14af86
commit b3aed9afd0
27 changed files with 1194 additions and 662 deletions
--- a/src/components/queue/JobHistoryActionsMenu.vue
+++ b/src/components/queue/JobHistoryActionsMenu.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="flex items-center gap-1">
+    <Popover :show-arrow="false">
+      <template #button>
+        <Button
+          v-tooltip.top="moreTooltipConfig"
+          variant="textonly"
+          size="icon"
+          :aria-label="t('sideToolbar.queueProgressOverlay.moreOptions')"
+        >
+          <i
+            class="icon-[lucide--more-horizontal] block size-4 leading-none text-text-secondary"
+          />
+        </Button>
+      </template>
+      <template #default="{ close }">
+        <div class="flex min-w-[14rem] flex-col items-stretch font-inter">
+          <Button
+            data-testid="docked-job-history-action"
+            class="w-full justify-between text-sm font-light"
+            variant="textonly"
+            size="sm"
+            @click="onToggleDockedJobHistory"
+          >
+            <span class="flex items-center gap-2">
+              <i
+                class="icon-[lucide--panel-left-close] size-4 text-text-secondary"
+              />
+              <span>{{
+                t('sideToolbar.queueProgressOverlay.dockedJobHistory')
+              }}</span>
+            </span>
+            <i
+              v-if="isQueuePanelV2Enabled"
+              class="icon-[lucide--check] size-4"
+            />
+          </Button>
+          <!-- TODO: Bug in assets sidebar panel derives assets from history, so despite this not deleting the assets, it still effectively shows to the user as deleted -->
+          <template v-if="showClearHistoryAction">
+            <div class="my-1 border-t border-interface-stroke" />
+            <Button
+              data-testid="clear-history-action"
+              class="h-auto min-h-0 w-full items-start justify-start whitespace-normal"
+              variant="textonly"
+              size="sm"
+              @click="onClearHistoryFromMenu(close)"
+            >
+              <i
+                class="icon-[lucide--trash-2] size-4 shrink-0 self-center text-destructive-background"
+              />
+              <span
+                class="flex flex-col items-start break-words text-left leading-tight"
+              >
+                <span class="text-sm font-light">
+                  {{ t('sideToolbar.queueProgressOverlay.clearHistory') }}
+                </span>
+                <span class="text-xs text-text-secondary font-light">
+                  {{
+                    t(
+                      'sideToolbar.queueProgressOverlay.clearHistoryMenuAssetsNote'
+                    )
+                  }}
+                </span>
+              </span>
+            </Button>
+          </template>
+        </div>
+      </template>
+    </Popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Popover from '@/components/ui/Popover.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+import { isCloud } from '@/platform/distribution/types'
+import { useSettingStore } from '@/platform/settings/settingStore'
+
+const emit = defineEmits<{
+  (e: 'clearHistory'): void
+}>()
+
+const { t } = useI18n()
+const settingStore = useSettingStore()
+
+const moreTooltipConfig = computed(() => buildTooltipConfig(t('g.more')))
+const isQueuePanelV2Enabled = computed(() =>
+  settingStore.get('Comfy.Queue.QPOV2')
+)
+const showClearHistoryAction = computed(() => !isCloud)
+
+const onClearHistoryFromMenu = (close: () => void) => {
+  close()
+  emit('clearHistory')
+}
+
+const onToggleDockedJobHistory = async () => {
+  await settingStore.set('Comfy.Queue.QPOV2', !isQueuePanelV2Enabled.value)
+}
+</script>
--- a/src/components/queue/QueueOverlayExpanded.vue
+++ b/src/components/queue/QueueOverlayExpanded.vue
@@ -51,6 +51,7 @@ import type {
 } from '@/composables/queue/useJobList'
 import type { MenuEntry } from '@/composables/queue/useJobMenu'
 import { useJobMenu } from '@/composables/queue/useJobMenu'
+import { useErrorHandling } from '@/composables/useErrorHandling'

 import QueueOverlayHeader from './QueueOverlayHeader.vue'
 import JobContextMenu from './job/JobContextMenu.vue'
@@ -83,6 +84,7 @@ const emit = defineEmits<{

 const currentMenuItem = ref<JobListItem | null>(null)
 const jobContextMenuRef = ref<InstanceType<typeof JobContextMenu> | null>(null)
+const { wrapWithErrorHandlingAsync } = useErrorHandling()

 const { jobMenuEntries } = useJobMenu(
  () => currentMenuItem.value,
@@ -102,9 +104,9 @@ const onMenuItem = (item: JobListItem, event: Event) => {
  jobContextMenuRef.value?.open(event)
 }

-const onJobMenuAction = async (entry: MenuEntry) => {
+const onJobMenuAction = wrapWithErrorHandlingAsync(async (entry: MenuEntry) => {
  if (entry.kind === 'divider') return
  if (entry.onClick) await entry.onClick()
  jobContextMenuRef.value?.hide()
-}
+})
 </script>
--- a/src/components/queue/QueueOverlayHeader.test.ts
+++ b/src/components/queue/QueueOverlayHeader.test.ts
@@ -1,28 +1,40 @@
 import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
-import { defineComponent } from 'vue'
+import { defineComponent, h } from 'vue'

-const popoverToggleSpy = vi.fn()
-const popoverHideSpy = vi.fn()
+const popoverCloseSpy = vi.fn()

-vi.mock('primevue/popover', () => {
+vi.mock('@/components/ui/Popover.vue', () => {
  const PopoverStub = defineComponent({
    name: 'Popover',
-    setup(_, { slots, expose }) {
-      const toggle = (event: Event) => {
-        popoverToggleSpy(event)
-      }
-      const hide = () => {
-        popoverHideSpy()
-      }
-      expose({ toggle, hide })
-      return () => slots.default?.()
+    setup(_, { slots }) {
+      return () =>
+        h('div', [
+          slots.button?.(),
+          slots.default?.({
+            close: () => {
+              popoverCloseSpy()
+            }
+          })
+        ])
    }
  })
  return { default: PopoverStub }
 })

+const mockGetSetting = vi.fn((key: string) =>
+  key === 'Comfy.Queue.QPOV2' ? true : undefined
+)
+const mockSetSetting = vi.fn()
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: mockGetSetting,
+    set: mockSetSetting
+  })
+}))
+
 import QueueOverlayHeader from './QueueOverlayHeader.vue'
 import * as tooltipConfig from '@/composables/useTooltipConfig'

@@ -43,7 +55,8 @@ const i18n = createI18n({
          queuedSuffix: 'queued',
          clearQueued: 'Clear queued',
          moreOptions: 'More options',
-          clearHistory: 'Clear history'
+          clearHistory: 'Clear history',
+          dockedJobHistory: 'Docked Job History'
        }
      }
    }
@@ -66,6 +79,11 @@ const mountHeader = (props = {}) =>
  })

 describe('QueueOverlayHeader', () => {
+  beforeEach(() => {
+    popoverCloseSpy.mockClear()
+    mockSetSetting.mockClear()
+  })
+
  it('renders header title and concurrent indicator when enabled', () => {
    const wrapper = mountHeader({ concurrentWorkflowCount: 3 })

@@ -102,19 +120,33 @@ describe('QueueOverlayHeader', () => {
    )
  })

-  it('toggles popover and emits clear history', async () => {
+  it('emits clear history from the menu', async () => {
    const spy = vi.spyOn(tooltipConfig, 'buildTooltipConfig')

    const wrapper = mountHeader()

-    const moreButton = wrapper.get('button[aria-label="More options"]')
-    await moreButton.trigger('click')
-    expect(popoverToggleSpy).toHaveBeenCalledTimes(1)
+    expect(wrapper.find('button[aria-label="More options"]').exists()).toBe(
+      true
+    )
    expect(spy).toHaveBeenCalledWith('More')

-    const clearHistoryButton = wrapper.get('button[aria-label="Clear history"]')
+    const clearHistoryButton = wrapper.get(
+      '[data-testid="clear-history-action"]'
+    )
    await clearHistoryButton.trigger('click')
-    expect(popoverHideSpy).toHaveBeenCalledTimes(1)
+    expect(popoverCloseSpy).toHaveBeenCalledTimes(1)
    expect(wrapper.emitted('clearHistory')).toHaveLength(1)
  })
+
+  it('toggles docked job history setting from the menu', async () => {
+    const wrapper = mountHeader()
+
+    const dockedJobHistoryButton = wrapper.get(
+      '[data-testid="docked-job-history-action"]'
+    )
+    await dockedJobHistoryButton.trigger('click')
+
+    expect(mockSetSetting).toHaveBeenCalledTimes(1)
+    expect(mockSetSetting).toHaveBeenCalledWith('Comfy.Queue.QPOV2', false)
+  })
 })
--- a/src/components/queue/QueueOverlayHeader.vue
+++ b/src/components/queue/QueueOverlayHeader.vue
@@ -37,62 +37,17 @@
        <i class="icon-[lucide--list-x] size-4" />
      </Button>
    </div>
-    <div v-if="!isCloud" class="flex items-center gap-1">
-      <Button
-        v-tooltip.top="moreTooltipConfig"
-        variant="textonly"
-        size="icon"
-        :aria-label="t('sideToolbar.queueProgressOverlay.moreOptions')"
-        @click="onMoreClick"
-      >
-        <i
-          class="icon-[lucide--more-horizontal] block size-4 leading-none text-text-secondary"
-        />
-      </Button>
-      <Popover
-        ref="morePopoverRef"
-        :dismissable="true"
-        :close-on-escape="true"
-        unstyled
-        :pt="{
-          root: { class: 'absolute z-50' },
-          content: {
-            class: [
-              'bg-transparent border-none p-0 pt-2 rounded-lg shadow-lg font-inter'
-            ]
-          }
-        }"
-      >
-        <div
-          class="flex flex-col items-stretch rounded-lg border border-interface-stroke bg-interface-panel-surface px-2 py-3 font-inter"
-        >
-          <Button
-            class="w-full justify-start"
-            variant="textonly"
-            size="sm"
-            :aria-label="t('sideToolbar.queueProgressOverlay.clearHistory')"
-            @click="onClearHistoryFromMenu"
-          >
-            <i class="icon-[lucide--file-x-2] size-4 text-muted" />
-            <span>{{
-              t('sideToolbar.queueProgressOverlay.clearHistory')
-            }}</span>
-          </Button>
-        </div>
-      </Popover>
-    </div>
+    <JobHistoryActionsMenu @clear-history="$emit('clearHistory')" />
  </div>
 </template>

 <script setup lang="ts">
-import Popover from 'primevue/popover'
-import type { PopoverMethods } from 'primevue/popover'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

+import JobHistoryActionsMenu from '@/components/queue/JobHistoryActionsMenu.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
-import { isCloud } from '@/platform/distribution/types'

 defineProps<{
  headerTitle: string
@@ -101,24 +56,13 @@ defineProps<{
  queuedCount: number
 }>()

-const emit = defineEmits<{
+defineEmits<{
  (e: 'clearHistory'): void
  (e: 'clearQueued'): void
 }>()

 const { t } = useI18n()
-
-const morePopoverRef = ref<PopoverMethods | null>(null)
-const moreTooltipConfig = computed(() => buildTooltipConfig(t('g.more')))
 const clearAllJobsTooltip = computed(() =>
  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.clearAllJobsTooltip'))
 )
-
-const onMoreClick = (event: MouseEvent) => {
-  morePopoverRef.value?.toggle(event)
-}
-const onClearHistoryFromMenu = () => {
-  morePopoverRef.value?.hide()
-  emit('clearHistory')
-}
 </script>
--- a/src/components/queue/QueueProgressOverlay.test.ts
+++ b/src/components/queue/QueueProgressOverlay.test.ts
@@ -7,6 +7,7 @@ import QueueProgressOverlay from '@/components/queue/QueueProgressOverlay.vue'
 import { i18n } from '@/i18n'
 import type { JobStatus } from '@/platform/remote/comfyui/jobs/jobTypes'
 import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'

 vi.mock('@/platform/distribution/types', () => ({
  isCloud: false
@@ -20,7 +21,12 @@ const QueueOverlayExpandedStub = defineComponent({
      required: true
    }
  },
-  template: '<div data-testid="expanded-title">{{ headerTitle }}</div>'
+  template: `
+    <div>
+      <div data-testid="expanded-title">{{ headerTitle }}</div>
+      <button data-testid="show-assets-button" @click="$emit('show-assets')" />
+    </div>
+  `
 })

 function createTask(id: string, status: JobStatus): TaskItemImpl {
@@ -41,10 +47,11 @@ const mountComponent = (
    stubActions: false
  })
  const queueStore = useQueueStore(pinia)
+  const sidebarTabStore = useSidebarTabStore(pinia)
  queueStore.runningTasks = runningTasks
  queueStore.pendingTasks = pendingTasks

-  return mount(QueueProgressOverlay, {
+  const wrapper = mount(QueueProgressOverlay, {
    props: {
      expanded: true
    },
@@ -60,6 +67,8 @@ const mountComponent = (
      }
    }
  })
+
+  return { wrapper, sidebarTabStore }
 }

 describe('QueueProgressOverlay', () => {
@@ -68,7 +77,7 @@ describe('QueueProgressOverlay', () => {
  })

  it('shows expanded header with running and queued labels', () => {
-    const wrapper = mountComponent(
+    const { wrapper } = mountComponent(
      [
        createTask('running-1', 'in_progress'),
        createTask('running-2', 'in_progress')
@@ -82,7 +91,10 @@ describe('QueueProgressOverlay', () => {
  })

  it('shows only running label when queued count is zero', () => {
-    const wrapper = mountComponent([createTask('running-1', 'in_progress')], [])
+    const { wrapper } = mountComponent(
+      [createTask('running-1', 'in_progress')],
+      []
+    )

    expect(wrapper.get('[data-testid="expanded-title"]').text()).toBe(
      '1 running'
@@ -90,10 +102,22 @@ describe('QueueProgressOverlay', () => {
  })

  it('shows job queue title when there are no active jobs', () => {
-    const wrapper = mountComponent([], [])
+    const { wrapper } = mountComponent([], [])

    expect(wrapper.get('[data-testid="expanded-title"]').text()).toBe(
      'Job Queue'
    )
  })
+
+  it('toggles the assets sidebar tab when show-assets is clicked', async () => {
+    const { wrapper, sidebarTabStore } = mountComponent([], [])
+
+    expect(sidebarTabStore.activeSidebarTabId).toBe(null)
+
+    await wrapper.get('[data-testid="show-assets-button"]').trigger('click')
+    expect(sidebarTabStore.activeSidebarTabId).toBe('assets')
+
+    await wrapper.get('[data-testid="show-assets-button"]').trigger('click')
+    expect(sidebarTabStore.activeSidebarTabId).toBe(null)
+  })
 })
--- a/src/components/queue/QueueProgressOverlay.vue
+++ b/src/components/queue/QueueProgressOverlay.vue
@@ -22,7 +22,7 @@
        :queued-count="queuedCount"
        :displayed-job-groups="displayedJobGroups"
        :has-failed-jobs="hasFailedJobs"
-        @show-assets="openAssetsSidebar"
+        @show-assets="toggleAssetsSidebar"
        @clear-history="onClearHistoryFromMenu"
        @clear-queued="cancelQueuedWorkflows"
        @cancel-item="onCancelItem"
@@ -59,10 +59,10 @@ import { useI18n } from 'vue-i18n'

 import QueueOverlayActive from '@/components/queue/QueueOverlayActive.vue'
 import QueueOverlayExpanded from '@/components/queue/QueueOverlayExpanded.vue'
-import QueueClearHistoryDialog from '@/components/queue/dialogs/QueueClearHistoryDialog.vue'
 import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
 import { useJobList } from '@/composables/queue/useJobList'
 import type { JobListItem } from '@/composables/queue/useJobList'
+import { useQueueClearHistoryDialog } from '@/composables/queue/useQueueClearHistoryDialog'
 import { useQueueProgress } from '@/composables/queue/useQueueProgress'
 import { useResultGallery } from '@/composables/queue/useResultGallery'
 import { useErrorHandling } from '@/composables/useErrorHandling'
@@ -71,7 +71,6 @@ import { isCloud } from '@/platform/distribution/types'
 import { api } from '@/scripts/api'
 import { useAssetsStore } from '@/stores/assetsStore'
 import { useCommandStore } from '@/stores/commandStore'
-import { useDialogStore } from '@/stores/dialogStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useQueueStore } from '@/stores/queueStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
@@ -97,9 +96,9 @@ const queueStore = useQueueStore()
 const commandStore = useCommandStore()
 const executionStore = useExecutionStore()
 const sidebarTabStore = useSidebarTabStore()
-const dialogStore = useDialogStore()
 const assetsStore = useAssetsStore()
 const assetSelectionStore = useAssetSelectionStore()
+const { showQueueClearHistoryDialog } = useQueueClearHistoryDialog()
 const { wrapWithErrorHandlingAsync } = useErrorHandling()

 const {
@@ -243,6 +242,10 @@ const viewAllJobs = () => {
  setExpanded(true)
 }

+const toggleAssetsSidebar = () => {
+  sidebarTabStore.toggleSidebarTab('assets')
+}
+
 const openAssetsSidebar = () => {
  sidebarTabStore.activeSidebarTabId = 'assets'
 }
@@ -309,28 +312,7 @@ const interruptAll = wrapWithErrorHandlingAsync(async () => {
  await queueStore.update()
 })

-const showClearHistoryDialog = () => {
-  dialogStore.showDialog({
-    key: 'queue-clear-history',
-    component: QueueClearHistoryDialog,
-    dialogComponentProps: {
-      headless: true,
-      closable: false,
-      closeOnEscape: true,
-      dismissableMask: true,
-      pt: {
-        root: {
-          class: 'max-w-[360px] w-auto bg-transparent border-none shadow-none'
-        },
-        content: {
-          class: '!p-0 bg-transparent'
-        }
-      }
-    }
-  })
-}
-
 const onClearHistoryFromMenu = () => {
-  showClearHistoryDialog()
+  showQueueClearHistoryDialog()
 }
 </script>
--- a/src/components/queue/job/JobAssetsList.vue
+++ b/src/components/queue/job/JobAssetsList.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="flex flex-col gap-4 px-3 pb-4">
+    <div
+      v-for="group in displayedJobGroups"
+      :key="group.key"
+      class="flex flex-col gap-2"
+    >
+      <div class="text-xs leading-none text-text-secondary">
+        {{ group.label }}
+      </div>
+      <AssetsListItem
+        v-for="job in group.items"
+        :key="job.id"
+        class="w-full shrink-0 cursor-default text-text-primary transition-colors hover:bg-secondary-background-hover"
+        :preview-url="job.iconImageUrl"
+        :preview-alt="job.title"
+        :icon-name="job.iconName ?? iconForJobState(job.state)"
+        :icon-class="getJobIconClass(job)"
+        :primary-text="job.title"
+        :secondary-text="job.meta"
+        :progress-total-percent="job.progressTotalPercent"
+        :progress-current-percent="job.progressCurrentPercent"
+        @mouseenter="hoveredJobId = job.id"
+        @mouseleave="onJobLeave(job.id)"
+        @contextmenu.prevent.stop="$emit('menu', job, $event)"
+        @click.stop
+      >
+        <template v-if="hoveredJobId === job.id" #actions>
+          <Button
+            v-if="isCancelable(job)"
+            variant="destructive"
+            size="icon"
+            :aria-label="t('g.cancel')"
+            @click.stop="$emit('cancelItem', job)"
+          >
+            <i class="icon-[lucide--x] size-4" />
+          </Button>
+          <Button
+            v-else-if="isFailedDeletable(job)"
+            variant="destructive"
+            size="icon"
+            :aria-label="t('g.delete')"
+            @click.stop="$emit('deleteItem', job)"
+          >
+            <i class="icon-[lucide--trash-2] size-4" />
+          </Button>
+          <Button
+            v-else-if="job.state === 'completed'"
+            variant="textonly"
+            size="sm"
+            @click.stop="$emit('viewItem', job)"
+          >
+            {{ t('menuLabels.View') }}
+          </Button>
+          <Button
+            variant="secondary"
+            size="icon"
+            :aria-label="t('g.more')"
+            @click.stop="$emit('menu', job, $event)"
+          >
+            <i class="icon-[lucide--ellipsis] size-4" />
+          </Button>
+        </template>
+      </AssetsListItem>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { ref } from 'vue'
+
+import Button from '@/components/ui/button/Button.vue'
+import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
+import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
+import { iconForJobState } from '@/utils/queueDisplay'
+import { isActiveJobState } from '@/utils/queueUtil'
+
+defineProps<{ displayedJobGroups: JobGroup[] }>()
+
+defineEmits<{
+  (e: 'cancelItem', item: JobListItem): void
+  (e: 'deleteItem', item: JobListItem): void
+  (e: 'menu', item: JobListItem, ev: MouseEvent): void
+  (e: 'viewItem', item: JobListItem): void
+}>()
+
+const { t } = useI18n()
+const hoveredJobId = ref<string | null>(null)
+
+const onJobLeave = (jobId: string) => {
+  if (hoveredJobId.value === jobId) {
+    hoveredJobId.value = null
+  }
+}
+
+const isCancelable = (job: JobListItem) =>
+  job.showClear !== false && isActiveJobState(job.state)
+
+const isFailedDeletable = (job: JobListItem) =>
+  job.showClear !== false && job.state === 'failed'
+
+const getJobIconClass = (job: JobListItem): string | undefined => {
+  const iconName = job.iconName ?? iconForJobState(job.state)
+  if (!job.iconImageUrl && iconName === iconForJobState('pending')) {
+    return 'animate-spin'
+  }
+  return undefined
+}
+</script>
--- a/src/components/queue/job/JobFilterActions.vue
+++ b/src/components/queue/job/JobFilterActions.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="flex min-w-0 items-center gap-2">
+    <SearchBox
+      v-if="showSearch"
+      :model-value="searchQuery"
+      class="min-w-0 flex-1"
+      :placeholder="searchPlaceholderText"
+      @update:model-value="onSearchQueryUpdate"
+    />
+    <div
+      class="flex shrink-0 items-center gap-2"
+      :class="{ 'ml-2': !showSearch }"
+    >
+      <Popover :show-arrow="false">
+        <template #button>
+          <Button
+            v-tooltip.top="filterTooltipConfig"
+            variant="secondary"
+            size="icon"
+            :aria-label="t('sideToolbar.queueProgressOverlay.filterJobs')"
+          >
+            <i class="icon-[lucide--list-filter] size-4" />
+            <span
+              v-if="selectedWorkflowFilter !== 'all'"
+              class="pointer-events-none absolute -top-1 -right-1 inline-block size-2 rounded-full bg-base-foreground"
+            />
+          </Button>
+        </template>
+        <template #default="{ close }">
+          <div class="flex min-w-[12rem] flex-col items-stretch">
+            <Button
+              class="w-full justify-between"
+              variant="textonly"
+              size="md"
+              @click="onSelectWorkflowFilter('all', close)"
+            >
+              <span>{{
+                t('sideToolbar.queueProgressOverlay.filterAllWorkflows')
+              }}</span>
+              <i
+                v-if="selectedWorkflowFilter === 'all'"
+                class="icon-[lucide--check] size-4"
+              />
+            </Button>
+            <div class="mx-2 mt-1 h-px" />
+            <Button
+              class="w-full justify-between"
+              variant="textonly"
+              size="md"
+              @click="onSelectWorkflowFilter('current', close)"
+            >
+              <span>{{
+                t('sideToolbar.queueProgressOverlay.filterCurrentWorkflow')
+              }}</span>
+              <i
+                v-if="selectedWorkflowFilter === 'current'"
+                class="icon-[lucide--check] block size-4 leading-none text-text-secondary"
+              />
+            </Button>
+          </div>
+        </template>
+      </Popover>
+      <Popover :show-arrow="false">
+        <template #button>
+          <Button
+            v-tooltip.top="sortTooltipConfig"
+            variant="secondary"
+            size="icon"
+            :aria-label="t('sideToolbar.queueProgressOverlay.sortJobs')"
+          >
+            <i class="icon-[lucide--arrow-up-down] size-4" />
+            <span
+              v-if="selectedSortMode !== 'mostRecent'"
+              class="pointer-events-none absolute -top-1 -right-1 inline-block size-2 rounded-full bg-base-foreground"
+            />
+          </Button>
+        </template>
+        <template #default="{ close }">
+          <div class="flex min-w-[12rem] flex-col items-stretch">
+            <template v-for="(mode, index) in jobSortModes" :key="mode">
+              <Button
+                class="w-full justify-between"
+                variant="textonly"
+                size="md"
+                @click="onSelectSortMode(mode, close)"
+              >
+                <span>{{ sortLabel(mode) }}</span>
+                <i
+                  v-if="selectedSortMode === mode"
+                  class="icon-[lucide--check] size-4 text-text-secondary"
+                />
+              </Button>
+              <div
+                v-if="index < jobSortModes.length - 1"
+                class="mx-2 mt-1 h-px"
+              />
+            </template>
+          </div>
+        </template>
+      </Popover>
+      <Button
+        v-if="showAssetsAction"
+        v-tooltip.top="showAssetsTooltipConfig"
+        variant="secondary"
+        size="icon"
+        :aria-label="t('sideToolbar.queueProgressOverlay.showAssetsPanel')"
+        @click="emit('showAssets')"
+      >
+        <i class="icon-[comfy--image-ai-edit] size-4" />
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import SearchBox from '@/components/common/SearchBox.vue'
+import Popover from '@/components/ui/Popover.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { jobSortModes } from '@/composables/queue/useJobList'
+import type { JobSortMode } from '@/composables/queue/useJobList'
+import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+
+const {
+  hideShowAssetsAction = false,
+  showSearch = false,
+  searchPlaceholder
+} = defineProps<{
+  hideShowAssetsAction?: boolean
+  showSearch?: boolean
+  searchPlaceholder?: string
+}>()
+
+const selectedWorkflowFilter = defineModel<'all' | 'current'>(
+  'selectedWorkflowFilter',
+  { required: true }
+)
+const selectedSortMode = defineModel<JobSortMode>('selectedSortMode', {
+  required: true
+})
+const searchQuery = defineModel<string>('searchQuery', { default: '' })
+
+const emit = defineEmits<{
+  (e: 'showAssets'): void
+}>()
+
+const { t } = useI18n()
+
+const filterTooltipConfig = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.filterBy'))
+)
+const sortTooltipConfig = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.sortBy'))
+)
+const showAssetsTooltipConfig = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.showAssets'))
+)
+const showAssetsAction = computed(() => !hideShowAssetsAction)
+const searchPlaceholderText = computed(
+  () => searchPlaceholder ?? t('sideToolbar.queueProgressOverlay.searchJobs')
+)
+
+const selectWorkflowFilter = (value: 'all' | 'current') => {
+  selectedWorkflowFilter.value = value
+}
+
+const onSelectWorkflowFilter = (
+  value: 'all' | 'current',
+  close: () => void
+) => {
+  selectWorkflowFilter(value)
+  close()
+}
+
+const selectSortMode = (value: JobSortMode) => {
+  selectedSortMode.value = value
+}
+
+const onSelectSortMode = (value: JobSortMode, close: () => void) => {
+  selectSortMode(value)
+  close()
+}
+
+const onSearchQueryUpdate = (value: string | undefined) => {
+  searchQuery.value = value ?? ''
+}
+
+const sortLabel = (mode: JobSortMode) => {
+  if (mode === 'mostRecent') {
+    return t('queue.jobList.sortMostRecent')
+  }
+  if (mode === 'totalGenerationTime') {
+    return t('queue.jobList.sortTotalGenerationTime')
+  }
+  return ''
+}
+</script>
--- a/src/components/queue/job/JobFilterTabs.vue
+++ b/src/components/queue/job/JobFilterTabs.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="min-w-0 flex-1 overflow-x-auto">
+    <div class="inline-flex items-center gap-1 whitespace-nowrap">
+      <Button
+        v-for="tab in visibleJobTabs"
+        :key="tab"
+        :variant="selectedJobTab === tab ? 'secondary' : 'muted-textonly'"
+        size="sm"
+        @click="$emit('update:selectedJobTab', tab)"
+      >
+        {{ tabLabel(tab) }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { jobTabs } from '@/composables/queue/useJobList'
+import type { JobTab } from '@/composables/queue/useJobList'
+
+const { selectedJobTab, hasFailedJobs } = defineProps<{
+  selectedJobTab: JobTab
+  hasFailedJobs: boolean
+}>()
+
+defineEmits<{
+  (e: 'update:selectedJobTab', value: JobTab): void
+}>()
+
+const { t } = useI18n()
+
+const visibleJobTabs = computed(() =>
+  hasFailedJobs ? jobTabs : jobTabs.filter((tab) => tab !== 'Failed')
+)
+
+const tabLabel = (tab: JobTab) => {
+  if (tab === 'All') return t('g.all')
+  if (tab === 'Completed') return t('g.completed')
+  return t('g.failed')
+}
+</script>
--- a/src/components/queue/job/JobFiltersBar.test.ts
+++ b/src/components/queue/job/JobFiltersBar.test.ts
@@ -76,4 +76,24 @@ describe('JobFiltersBar', () => {

    expect(wrapper.emitted('showAssets')).toHaveLength(1)
  })
+
+  it('hides the assets icon button when hideShowAssetsAction is true', () => {
+    const wrapper = mount(JobFiltersBar, {
+      props: {
+        selectedJobTab: 'All',
+        selectedWorkflowFilter: 'all',
+        selectedSortMode: 'mostRecent',
+        hasFailedJobs: false,
+        hideShowAssetsAction: true
+      },
+      global: {
+        plugins: [i18n],
+        directives: { tooltip: () => undefined }
+      }
+    })
+
+    expect(
+      wrapper.find('button[aria-label="Show assets panel"]').exists()
+    ).toBe(false)
+  })
 })
--- a/src/components/queue/job/JobFiltersBar.vue
+++ b/src/components/queue/job/JobFiltersBar.vue
@@ -1,225 +1,46 @@
 <template>
  <div class="flex items-center justify-between gap-2 px-3">
-    <div class="min-w-0 flex-1 overflow-x-auto">
-      <div class="inline-flex items-center gap-1 whitespace-nowrap">
-        <Button
-          v-for="tab in visibleJobTabs"
-          :key="tab"
-          :variant="selectedJobTab === tab ? 'secondary' : 'muted-textonly'"
-          size="sm"
-          class="px-3"
-          @click="$emit('update:selectedJobTab', tab)"
-        >
-          {{ tabLabel(tab) }}
-        </Button>
-      </div>
-    </div>
-    <div class="ml-2 flex shrink-0 items-center gap-2">
-      <Button
-        v-if="showWorkflowFilter"
-        v-tooltip.top="filterTooltipConfig"
-        variant="secondary"
-        size="icon"
-        :aria-label="t('sideToolbar.queueProgressOverlay.filterJobs')"
-        @click="onFilterClick"
-      >
-        <i class="icon-[lucide--list-filter] size-4" />
-        <span
-          v-if="selectedWorkflowFilter !== 'all'"
-          class="pointer-events-none absolute -top-1 -right-1 inline-block size-2 rounded-full bg-base-foreground"
-        />
-      </Button>
-      <Popover
-        v-if="showWorkflowFilter"
-        ref="filterPopoverRef"
-        :dismissable="true"
-        :close-on-escape="true"
-        unstyled
-        :pt="{
-          root: { class: 'absolute z-50' },
-          content: {
-            class: [
-              'bg-transparent border-none p-0 pt-2 rounded-lg shadow-lg font-inter'
-            ]
-          }
-        }"
-      >
-        <div
-          class="flex min-w-[12rem] flex-col items-stretch rounded-lg border border-interface-stroke bg-interface-panel-surface px-2 py-3"
-        >
-          <Button
-            class="w-full justify-between"
-            variant="textonly"
-            size="sm"
-            @click="selectWorkflowFilter('all')"
-          >
-            <span>{{
-              t('sideToolbar.queueProgressOverlay.filterAllWorkflows')
-            }}</span>
-            <i
-              v-if="selectedWorkflowFilter === 'all'"
-              class="icon-[lucide--check] size-4"
-            />
-          </Button>
-          <div class="mx-2 mt-1 h-px" />
-          <Button
-            class="w-full justify-between"
-            variant="textonly"
-            @click="selectWorkflowFilter('current')"
-          >
-            <span>{{
-              t('sideToolbar.queueProgressOverlay.filterCurrentWorkflow')
-            }}</span>
-            <i
-              v-if="selectedWorkflowFilter === 'current'"
-              class="icon-[lucide--check] block size-4 leading-none text-text-secondary"
-            />
-          </Button>
-        </div>
-      </Popover>
-      <Button
-        v-tooltip.top="sortTooltipConfig"
-        variant="secondary"
-        size="icon"
-        :aria-label="t('sideToolbar.queueProgressOverlay.sortJobs')"
-        @click="onSortClick"
-      >
-        <i class="icon-[lucide--arrow-up-down] size-4" />
-        <span
-          v-if="selectedSortMode !== 'mostRecent'"
-          class="pointer-events-none absolute -top-1 -right-1 inline-block size-2 rounded-full bg-base-foreground"
-        />
-      </Button>
-      <Popover
-        ref="sortPopoverRef"
-        :dismissable="true"
-        :close-on-escape="true"
-        unstyled
-        :pt="{
-          root: { class: 'absolute z-50' },
-          content: {
-            class: [
-              'bg-transparent border-none p-0 pt-2 rounded-lg shadow-lg font-inter'
-            ]
-          }
-        }"
-      >
-        <div
-          class="flex min-w-[12rem] flex-col items-stretch rounded-lg border border-interface-stroke bg-interface-panel-surface px-2 py-3"
-        >
-          <template v-for="(mode, index) in jobSortModes" :key="mode">
-            <Button
-              class="w-full justify-between"
-              variant="textonly"
-              size="sm"
-              @click="selectSortMode(mode)"
-            >
-              <span>{{ sortLabel(mode) }}</span>
-              <i
-                v-if="selectedSortMode === mode"
-                class="icon-[lucide--check] size-4 text-text-secondary"
-              />
-            </Button>
-            <div
-              v-if="index < jobSortModes.length - 1"
-              class="mx-2 mt-1 h-px"
-            />
-          </template>
-        </div>
-      </Popover>
-      <Button
-        v-tooltip.top="showAssetsTooltipConfig"
-        variant="secondary"
-        size="icon"
-        :aria-label="t('sideToolbar.queueProgressOverlay.showAssetsPanel')"
-        @click="$emit('showAssets')"
-      >
-        <i class="icon-[comfy--image-ai-edit] size-4" />
-      </Button>
-    </div>
+    <JobFilterTabs
+      :selected-job-tab="selectedJobTab"
+      :has-failed-jobs="hasFailedJobs"
+      @update:selected-job-tab="$emit('update:selectedJobTab', $event)"
+    />
+    <JobFilterActions
+      :selected-workflow-filter="selectedWorkflowFilter"
+      :selected-sort-mode="selectedSortMode"
+      :hide-show-assets-action="hideShowAssetsAction"
+      @show-assets="$emit('showAssets')"
+      @update:selected-workflow-filter="
+        $emit('update:selectedWorkflowFilter', $event)
+      "
+      @update:selected-sort-mode="$emit('update:selectedSortMode', $event)"
+    />
  </div>
 </template>

 <script setup lang="ts">
-import Popover from 'primevue/popover'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import { jobSortModes, jobTabs } from '@/composables/queue/useJobList'
+import JobFilterActions from '@/components/queue/job/JobFilterActions.vue'
+import JobFilterTabs from '@/components/queue/job/JobFilterTabs.vue'
 import type { JobSortMode, JobTab } from '@/composables/queue/useJobList'
-import { buildTooltipConfig } from '@/composables/useTooltipConfig'
-import { isCloud } from '@/platform/distribution/types'

-const props = defineProps<{
+const {
+  selectedJobTab,
+  selectedWorkflowFilter,
+  selectedSortMode,
+  hasFailedJobs,
+  hideShowAssetsAction
+} = defineProps<{
  selectedJobTab: JobTab
  selectedWorkflowFilter: 'all' | 'current'
  selectedSortMode: JobSortMode
  hasFailedJobs: boolean
+  hideShowAssetsAction?: boolean
 }>()

-const emit = defineEmits<{
+defineEmits<{
  (e: 'showAssets'): void
  (e: 'update:selectedJobTab', value: JobTab): void
  (e: 'update:selectedWorkflowFilter', value: 'all' | 'current'): void
  (e: 'update:selectedSortMode', value: JobSortMode): void
 }>()
-
-const { t } = useI18n()
-const filterPopoverRef = ref<InstanceType<typeof Popover> | null>(null)
-const sortPopoverRef = ref<InstanceType<typeof Popover> | null>(null)
-
-const filterTooltipConfig = computed(() =>
-  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.filterBy'))
-)
-const sortTooltipConfig = computed(() =>
-  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.sortBy'))
-)
-const showAssetsTooltipConfig = computed(() =>
-  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.showAssets'))
-)
-
-// This can be removed when cloud implements /jobs and we switch to it.
-const showWorkflowFilter = !isCloud
-
-const visibleJobTabs = computed(() =>
-  props.hasFailedJobs ? jobTabs : jobTabs.filter((tab) => tab !== 'Failed')
-)
-
-const onFilterClick = (event: Event) => {
-  if (filterPopoverRef.value) {
-    filterPopoverRef.value.toggle(event)
-  }
-}
-const selectWorkflowFilter = (value: 'all' | 'current') => {
-  filterPopoverRef.value?.hide()
-  emit('update:selectedWorkflowFilter', value)
-}
-
-const onSortClick = (event: Event) => {
-  if (sortPopoverRef.value) {
-    sortPopoverRef.value.toggle(event)
-  }
-}
-
-const selectSortMode = (value: JobSortMode) => {
-  sortPopoverRef.value?.hide()
-  emit('update:selectedSortMode', value)
-}
-
-const tabLabel = (tab: JobTab) => {
-  if (tab === 'All') return t('g.all')
-  if (tab === 'Completed') return t('g.completed')
-  return t('g.failed')
-}
-
-const sortLabel = (mode: JobSortMode) => {
-  if (mode === 'mostRecent') {
-    return t('queue.jobList.sortMostRecent')
-  }
-  if (mode === 'totalGenerationTime') {
-    return t('queue.jobList.sortTotalGenerationTime')
-  }
-  return ''
-}
 </script>
--- a/src/components/sidebar/tabs/AssetsSidebarGridView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarGridView.vue
@@ -1,23 +1,7 @@
 <template>
  <div class="flex h-full flex-col">
-    <!-- Active Jobs Grid -->
-    <div
-      v-if="!isInFolderView && isQueuePanelV2Enabled && activeJobItems.length"
-      class="grid max-h-[50%] scrollbar-custom overflow-y-auto"
-      :style="gridStyle"
-    >
-      <ActiveMediaAssetCard
-        v-for="job in activeJobItems"
-        :key="job.id"
-        :job="job"
-      />
-    </div>
-
    <!-- Assets Header -->
-    <div
-      v-if="assets.length"
-      :class="cn('px-2 2xl:px-4', activeJobItems.length && 'mt-2')"
-    >
+    <div v-if="assets.length" class="px-2 2xl:px-4">
      <div
        class="flex items-center py-2 text-sm font-normal leading-normal text-muted-foreground font-inter"
      >
@@ -59,25 +43,18 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'

 import VirtualGrid from '@/components/common/VirtualGrid.vue'
-import ActiveMediaAssetCard from '@/platform/assets/components/ActiveMediaAssetCard.vue'
-import { useJobList } from '@/composables/queue/useJobList'
 import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { isActiveJobState } from '@/utils/queueUtil'
-import { cn } from '@/utils/tailwindUtil'
-import { useSettingStore } from '@/platform/settings/settingStore'

 const {
  assets,
  isSelected,
-  isInFolderView = false,
  assetType = 'output',
  showOutputCount,
  getOutputCount
 } = defineProps<{
  assets: AssetItem[]
  isSelected: (assetId: string) => boolean
-  isInFolderView?: boolean
  assetType?: 'input' | 'output'
  showOutputCount: (asset: AssetItem) => boolean
  getOutputCount: (asset: AssetItem) => number
@@ -92,19 +69,9 @@ const emit = defineEmits<{
 }>()

 const { t } = useI18n()
-const { jobItems } = useJobList()
-const settingStore = useSettingStore()
-
-const isQueuePanelV2Enabled = computed(() =>
-  settingStore.get('Comfy.Queue.QPOV2')
-)

 type AssetGridItem = { key: string; asset: AssetItem }

-const activeJobItems = computed(() =>
-  jobItems.value.filter((item) => isActiveJobState(item.state)).toReversed()
-)
-
 const assetItems = computed<AssetGridItem[]>(() =>
  assets.map((asset) => ({
    key: `asset-${asset.id}`,
--- a/src/components/sidebar/tabs/AssetsSidebarListView.test.ts
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.test.ts
@@ -1,6 +1,9 @@
 import { mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { ref } from 'vue'
+import { defineComponent } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import type { OutputStackListItem } from '@/platform/assets/composables/useOutputStacks'

 import AssetsSidebarListView from './AssetsSidebarListView.vue'

@@ -10,141 +13,63 @@ vi.mock('vue-i18n', () => ({
  })
 }))

-vi.mock('@/composables/queue/useJobActions', () => ({
-  useJobActions: () => ({
-    cancelAction: { variant: 'ghost', label: 'Cancel', icon: 'pi pi-times' },
-    canCancelJob: ref(false),
-    runCancelJob: vi.fn()
-  })
-}))
-
-const mockJobItems = ref<
-  Array<{
-    id: string
-    title: string
-    meta: string
-    state: string
-    createTime?: number
-  }>
->([])
-
-vi.mock('@/composables/queue/useJobList', () => ({
-  useJobList: () => ({
-    jobItems: mockJobItems
-  })
-}))
-
 vi.mock('@/stores/assetsStore', () => ({
  useAssetsStore: () => ({
    isAssetDeleting: () => false
  })
 }))

-vi.mock('@/platform/settings/settingStore', () => ({
-  useSettingStore: () => ({
-    get: (key: string) => key === 'Comfy.Queue.QPOV2'
+const VirtualGridStub = defineComponent({
+  name: 'VirtualGrid',
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  template:
+    '<div><slot v-for="item in items" :key="item.key" name="item" :item="item" /></div>'
+})
+
+const buildAsset = (id: string, name: string): AssetItem =>
+  ({
+    id,
+    name,
+    tags: []
+  }) satisfies AssetItem
+
+const buildOutputItem = (asset: AssetItem): OutputStackListItem => ({
+  key: `asset-${asset.id}`,
+  asset
+})
+
+const mountListView = (assetItems: OutputStackListItem[] = []) =>
+  mount(AssetsSidebarListView, {
+    props: {
+      assetItems,
+      selectableAssets: [],
+      isSelected: () => false,
+      isStackExpanded: () => false,
+      toggleStack: async () => {},
+      assetType: 'output'
+    },
+    global: {
+      stubs: {
+        VirtualGrid: VirtualGridStub
+      }
+    }
  })
-}))
-
-vi.mock('@/utils/queueUtil', () => ({
-  isActiveJobState: (state: string) =>
-    state === 'pending' || state === 'running'
-}))
-
-vi.mock('@/utils/queueDisplay', () => ({
-  iconForJobState: () => 'pi pi-spinner'
-}))
-
-vi.mock('@/platform/assets/schemas/assetMetadataSchema', () => ({
-  getOutputAssetMetadata: () => undefined
-}))
-
-vi.mock('@/platform/assets/utils/mediaIconUtil', () => ({
-  iconForMediaType: () => 'pi pi-file'
-}))
-
-vi.mock('@/utils/formatUtil', () => ({
-  formatDuration: (d: number) => `${d}s`,
-  formatSize: (s: number) => `${s}B`,
-  getMediaTypeFromFilename: () => 'image',
-  truncateFilename: (name: string) => name
-}))

 describe('AssetsSidebarListView', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockJobItems.value = []
+  it('shows generated assets header when there are assets', () => {
+    const wrapper = mountListView([buildOutputItem(buildAsset('a1', 'x.png'))])
+
+    expect(wrapper.text()).toContain('sideToolbar.generatedAssetsHeader')
  })

-  const defaultProps = {
-    assetItems: [],
-    selectableAssets: [],
-    isSelected: () => false,
-    isStackExpanded: () => false,
-    toggleStack: async () => {}
-  }
+  it('does not show assets header when there are no assets', () => {
+    const wrapper = mountListView([])

-  it('displays active jobs in oldest-first order (FIFO)', () => {
-    mockJobItems.value = [
-      {
-        id: 'newest',
-        title: 'Newest Job',
-        meta: '',
-        state: 'pending',
-        createTime: 3000
-      },
-      {
-        id: 'middle',
-        title: 'Middle Job',
-        meta: '',
-        state: 'running',
-        createTime: 2000
-      },
-      {
-        id: 'oldest',
-        title: 'Oldest Job',
-        meta: '',
-        state: 'pending',
-        createTime: 1000
-      }
-    ]
-
-    const wrapper = mount(AssetsSidebarListView, {
-      props: defaultProps,
-      shallow: true
-    })
-
-    const jobListItems = wrapper.findAllComponents({ name: 'AssetsListItem' })
-    expect(jobListItems).toHaveLength(3)
-
-    const displayedTitles = jobListItems.map((item) =>
-      item.props('primaryText')
-    )
-    expect(displayedTitles).toEqual(['Oldest Job', 'Middle Job', 'Newest Job'])
-  })
-
-  it('excludes completed and failed jobs from active jobs section', () => {
-    mockJobItems.value = [
-      { id: 'pending', title: 'Pending', meta: '', state: 'pending' },
-      { id: 'completed', title: 'Completed', meta: '', state: 'completed' },
-      { id: 'failed', title: 'Failed', meta: '', state: 'failed' },
-      { id: 'running', title: 'Running', meta: '', state: 'running' }
-    ]
-
-    const wrapper = mount(AssetsSidebarListView, {
-      props: defaultProps,
-      shallow: true
-    })
-
-    const jobListItems = wrapper.findAllComponents({ name: 'AssetsListItem' })
-    expect(jobListItems).toHaveLength(2)
-
-    const displayedTitles = jobListItems.map((item) =>
-      item.props('primaryText')
-    )
-    expect(displayedTitles).toContain('Running')
-    expect(displayedTitles).toContain('Pending')
-    expect(displayedTitles).not.toContain('Completed')
-    expect(displayedTitles).not.toContain('Failed')
+    expect(wrapper.text()).not.toContain('sideToolbar.generatedAssetsHeader')
  })
 })
--- a/src/components/sidebar/tabs/AssetsSidebarListView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.vue
@@ -1,48 +1,6 @@
 <template>
  <div class="flex h-full flex-col">
-    <div
-      v-if="isQueuePanelV2Enabled && activeJobItems.length"
-      class="flex max-h-[50%] scrollbar-custom flex-col gap-2 overflow-y-auto px-2"
-    >
-      <AssetsListItem
-        v-for="job in activeJobItems"
-        :key="job.id"
-        :class="
-          cn(
-            'w-full shrink-0 text-text-primary transition-colors hover:bg-secondary-background-hover',
-            'cursor-default'
-          )
-        "
-        :preview-url="job.iconImageUrl"
-        :preview-alt="job.title"
-        :icon-name="job.iconName"
-        :icon-class="getJobIconClass(job)"
-        :primary-text="job.title"
-        :secondary-text="job.meta"
-        :progress-total-percent="job.progressTotalPercent"
-        :progress-current-percent="job.progressCurrentPercent"
-        @mouseenter="onJobEnter(job.id)"
-        @mouseleave="onJobLeave(job.id)"
-        @click.stop
-      >
-        <template v-if="hoveredJobId === job.id" #actions>
-          <Button
-            v-if="canCancelJob"
-            :variant="cancelAction.variant"
-            size="icon"
-            :aria-label="cancelAction.label"
-            @click.stop="runCancelJob()"
-          >
-            <i :class="cancelAction.icon" class="size-4" />
-          </Button>
-        </template>
-      </AssetsListItem>
-    </div>
-
-    <div
-      v-if="assetItems.length"
-      :class="cn('px-2', activeJobItems.length && 'mt-2')"
-    >
+    <div v-if="assetItems.length" class="px-2">
      <div
        class="flex items-center p-2 text-sm font-normal leading-normal text-muted-foreground font-inter"
      >
@@ -119,31 +77,25 @@
 </template>

 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'

 import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { useJobActions } from '@/composables/queue/useJobActions'
-import type { JobListItem } from '@/composables/queue/useJobList'
-import { useJobList } from '@/composables/queue/useJobList'
 import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
 import type { OutputStackListItem } from '@/platform/assets/composables/useOutputStacks'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { iconForMediaType } from '@/platform/assets/utils/mediaIconUtil'
 import { useAssetsStore } from '@/stores/assetsStore'
-import { isActiveJobState } from '@/utils/queueUtil'
 import {
  formatDuration,
  formatSize,
  getMediaTypeFromFilename,
  truncateFilename
 } from '@/utils/formatUtil'
-import { iconForJobState } from '@/utils/queueDisplay'
 import { cn } from '@/utils/tailwindUtil'
-import { useSettingStore } from '@/platform/settings/settingStore'

 const {
  assetItems,
@@ -170,24 +122,7 @@ const emit = defineEmits<{
 }>()

 const { t } = useI18n()
-const { jobItems } = useJobList()
-const settingStore = useSettingStore()
-
-const isQueuePanelV2Enabled = computed(() =>
-  settingStore.get('Comfy.Queue.QPOV2')
-)
-const hoveredJobId = ref<string | null>(null)
 const hoveredAssetId = ref<string | null>(null)
-const activeJobItems = computed(() =>
-  jobItems.value.filter((item) => isActiveJobState(item.state)).toReversed()
-)
-const hoveredJob = computed(() =>
-  hoveredJobId.value
-    ? (activeJobItems.value.find((job) => job.id === hoveredJobId.value) ??
-      null)
-    : null
-)
-const { cancelAction, canCancelJob, runCancelJob } = useJobActions(hoveredJob)

 const listGridStyle = {
  display: 'grid',
@@ -240,16 +175,6 @@ function getAssetCardClass(selected: boolean): string {
  )
 }

-function onJobEnter(jobId: string) {
-  hoveredJobId.value = jobId
-}
-
-function onJobLeave(jobId: string) {
-  if (hoveredJobId.value === jobId) {
-    hoveredJobId.value = null
-  }
-}
-
 function onAssetEnter(assetId: string) {
  hoveredAssetId.value = assetId
 }
@@ -259,13 +184,4 @@ function onAssetLeave(assetId: string) {
    hoveredAssetId.value = null
  }
 }
-
-function getJobIconClass(job: JobListItem): string | undefined {
-  const classes = []
-  const iconName = job.iconName ?? iconForJobState(job.state)
-  if (!job.iconImageUrl && iconName === iconForJobState('pending')) {
-    classes.push('animate-spin')
-  }
-  return classes.length ? classes.join(' ') : undefined
-}
 </script>
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -53,31 +53,7 @@
        class="pb-1 px-2 2xl:px-4"
        :show-generation-time-sort="activeTab === 'output'"
      />
-      <div
-        v-if="isQueuePanelV2Enabled && !isInFolderView"
-        class="flex items-center justify-between px-2 py-2 2xl:px-4"
-      >
-        <span class="text-sm text-muted-foreground">
-          {{ activeJobsLabel }}
-        </span>
-        <div class="flex items-center gap-2">
-          <span class="text-sm text-base-foreground">
-            {{ t('sideToolbar.queueProgressOverlay.clearQueueTooltip') }}
-          </span>
-          <Button
-            variant="destructive"
-            size="icon"
-            :aria-label="
-              t('sideToolbar.queueProgressOverlay.clearQueueTooltip')
-            "
-            :disabled="queuedCount === 0"
-            @click="handleClearQueue"
-          >
-            <i class="icon-[lucide--list-x] size-4" />
-          </Button>
-        </div>
-      </div>
-      <Divider v-else type="dashed" class="my-2" />
+      <Divider type="dashed" class="my-2" />
    </template>
    <template #body>
      <div
@@ -126,7 +102,6 @@
          v-else
          :assets="displayAssets"
          :is-selected="isSelected"
-          :is-in-folder-view="isInFolderView"
          :asset-type="activeTab"
          :show-output-count="shouldShowOutputCount"
          :get-output-count="getOutputCount"
@@ -226,7 +201,6 @@ import {
  useResizeObserver,
  useStorage
 } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
 import Divider from 'primevue/divider'
 import { useToast } from 'primevue/usetoast'
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
@@ -258,20 +232,12 @@ import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import type { MediaKind } from '@/platform/assets/schemas/mediaAssetSchema'
 import { resolveOutputAssetItems } from '@/platform/assets/utils/outputAssetUtil'
 import { isCloud } from '@/platform/distribution/types'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import { useExecutionStore } from '@/stores/executionStore'
-import { ResultItemImpl, useQueueStore } from '@/stores/queueStore'
+import { ResultItemImpl } from '@/stores/queueStore'
 import { formatDuration, getMediaTypeFromFilename } from '@/utils/formatUtil'
 import { cn } from '@/utils/tailwindUtil'

-const { t, n } = useI18n()
-const commandStore = useCommandStore()
-const queueStore = useQueueStore()
-const { activeJobsCount } = storeToRefs(queueStore)
-const executionStore = useExecutionStore()
-const settingStore = useSettingStore()
+const { t } = useI18n()

 const emit = defineEmits<{ assetSelected: [asset: AssetItem] }>()

@@ -284,12 +250,7 @@ const viewMode = useStorage<'list' | 'grid'>(
  'Comfy.Assets.Sidebar.ViewMode',
  'grid'
 )
-const isQueuePanelV2Enabled = computed(() =>
-  settingStore.get('Comfy.Queue.QPOV2')
-)
-const isListView = computed(
-  () => isQueuePanelV2Enabled.value && viewMode.value === 'list'
-)
+const isListView = computed(() => viewMode.value === 'list')

 const contextMenuRef = ref<InstanceType<typeof MediaAssetContextMenu>>()
 const contextMenuAsset = ref<AssetItem | null>(null)
@@ -321,16 +282,6 @@ const formattedExecutionTime = computed(() => {
  return formatDuration(folderExecutionTime.value * 1000)
 })

-const queuedCount = computed(() => queueStore.pendingTasks.length)
-const activeJobsLabel = computed(() => {
-  const count = activeJobsCount.value
-  return t(
-    'sideToolbar.queueProgressOverlay.activeJobs',
-    { count: n(count) },
-    count
-  )
-})
-
 const toast = useToast()

 const inputAssets = useMediaAssets('input')
@@ -456,17 +407,12 @@ const isFolderLoading = computed(

 const showLoadingState = computed(
  () =>
-    (loading.value || isFolderLoading.value) &&
-    displayAssets.value.length === 0 &&
-    activeJobsCount.value === 0
+    (loading.value || isFolderLoading.value) && displayAssets.value.length === 0
 )

 const showEmptyState = computed(
  () =>
-    !loading.value &&
-    !isFolderLoading.value &&
-    displayAssets.value.length === 0 &&
-    activeJobsCount.value === 0
+    !loading.value && !isFolderLoading.value && displayAssets.value.length === 0
 )

 watch(visibleAssets, (newAssets) => {
@@ -562,16 +508,6 @@ const handleBulkDelete = async (assets: AssetItem[]) => {
  }
 }

-const handleClearQueue = async () => {
-  const pendingJobIds = queueStore.pendingTasks
-    .map((task) => task.jobId)
-    .filter((id): id is string => typeof id === 'string' && id.length > 0)
-
-  await commandStore.execute('Comfy.ClearPendingTasks')
-
-  executionStore.clearInitializationByJobIds(pendingJobIds)
-}
-
 const handleBulkAddToWorkflow = async (assets: AssetItem[]) => {
  await addMultipleToWorkflow(assets)
  clearSelection()
--- a/src/components/sidebar/tabs/JobHistorySidebarTab.vue
+++ b/src/components/sidebar/tabs/JobHistorySidebarTab.vue
@@ -0,0 +1,188 @@
+<template>
+  <SidebarTabTemplate :title="$t('queue.jobHistory')">
+    <template #alt-title>
+      <div class="ml-auto flex shrink-0 items-center">
+        <JobHistoryActionsMenu @clear-history="showQueueClearHistoryDialog" />
+      </div>
+    </template>
+    <template #header>
+      <div class="flex flex-col gap-2 pb-1">
+        <div class="px-3 py-2">
+          <JobFilterTabs
+            v-model:selected-job-tab="selectedJobTab"
+            :has-failed-jobs="hasFailedJobs"
+          />
+        </div>
+        <JobFilterActions
+          v-model:selected-workflow-filter="selectedWorkflowFilter"
+          v-model:selected-sort-mode="selectedSortMode"
+          v-model:search-query="searchQuery"
+          class="px-3"
+          :hide-show-assets-action="true"
+          :show-search="true"
+          :search-placeholder="t('sideToolbar.queueProgressOverlay.searchJobs')"
+        />
+      </div>
+      <div
+        class="flex items-center justify-between px-3 pb-1 text-xs leading-none text-text-primary"
+      >
+        <span class="text-text-secondary">{{ activeQueueSummary }}</span>
+        <div class="flex items-center gap-2">
+          <span class="text-xs text-base-foreground">
+            {{ t('sideToolbar.queueProgressOverlay.clearQueueTooltip') }}
+          </span>
+          <Button
+            variant="destructive"
+            size="icon"
+            :aria-label="
+              t('sideToolbar.queueProgressOverlay.clearQueueTooltip')
+            "
+            :disabled="queuedCount === 0"
+            @click="clearQueuedWorkflows"
+          >
+            <i class="icon-[lucide--list-x] size-4" />
+          </Button>
+        </div>
+      </div>
+    </template>
+    <template #body>
+      <JobAssetsList
+        :displayed-job-groups="displayedJobGroups"
+        @cancel-item="onCancelItem"
+        @delete-item="onDeleteItem"
+        @view-item="onViewItem"
+        @menu="onMenuItem"
+      />
+      <JobContextMenu
+        ref="jobContextMenuRef"
+        :entries="jobMenuEntries"
+        @action="onJobMenuAction"
+      />
+      <ResultGallery
+        v-model:active-index="galleryActiveIndex"
+        :all-gallery-items="galleryItems"
+      />
+    </template>
+  </SidebarTabTemplate>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import JobFilterActions from '@/components/queue/job/JobFilterActions.vue'
+import JobFilterTabs from '@/components/queue/job/JobFilterTabs.vue'
+import JobAssetsList from '@/components/queue/job/JobAssetsList.vue'
+import JobContextMenu from '@/components/queue/job/JobContextMenu.vue'
+import JobHistoryActionsMenu from '@/components/queue/JobHistoryActionsMenu.vue'
+import type { MenuEntry } from '@/composables/queue/useJobMenu'
+import { useJobMenu } from '@/composables/queue/useJobMenu'
+import { useJobList } from '@/composables/queue/useJobList'
+import type { JobListItem } from '@/composables/queue/useJobList'
+import { useQueueClearHistoryDialog } from '@/composables/queue/useQueueClearHistoryDialog'
+import { useResultGallery } from '@/composables/queue/useResultGallery'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
+import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
+import Button from '@/components/ui/button/Button.vue'
+import { useCommandStore } from '@/stores/commandStore'
+import { useExecutionStore } from '@/stores/executionStore'
+import { useQueueStore } from '@/stores/queueStore'
+
+const { t, n } = useI18n()
+const commandStore = useCommandStore()
+const executionStore = useExecutionStore()
+const queueStore = useQueueStore()
+const { showQueueClearHistoryDialog } = useQueueClearHistoryDialog()
+const { wrapWithErrorHandlingAsync } = useErrorHandling()
+const {
+  selectedJobTab,
+  selectedWorkflowFilter,
+  selectedSortMode,
+  searchQuery,
+  hasFailedJobs,
+  filteredTasks,
+  groupedJobItems
+} = useJobList()
+
+const displayedJobGroups = computed(() => groupedJobItems.value)
+const runningCount = computed(() => queueStore.runningTasks.length)
+const queuedCount = computed(() => queueStore.pendingTasks.length)
+
+const runningJobsLabel = computed(() =>
+  t('sideToolbar.queueProgressOverlay.runningJobsLabel', {
+    count: n(runningCount.value)
+  })
+)
+const queuedJobsLabel = computed(() =>
+  t('sideToolbar.queueProgressOverlay.queuedJobsLabel', {
+    count: n(queuedCount.value)
+  })
+)
+const activeQueueSummary = computed(() => {
+  if (runningCount.value === 0 && queuedCount.value === 0) {
+    return t('sideToolbar.queueProgressOverlay.noActiveJobs')
+  }
+  if (queuedCount.value === 0) {
+    return runningJobsLabel.value
+  }
+  if (runningCount.value === 0) {
+    return queuedJobsLabel.value
+  }
+  return t('sideToolbar.queueProgressOverlay.runningQueuedSummary', {
+    running: runningJobsLabel.value,
+    queued: queuedJobsLabel.value
+  })
+})
+
+const clearQueuedWorkflows = wrapWithErrorHandlingAsync(async () => {
+  const pendingJobIds = queueStore.pendingTasks
+    .map((task) => task.jobId)
+    .filter((id): id is string => typeof id === 'string' && id.length > 0)
+
+  await commandStore.execute('Comfy.ClearPendingTasks')
+  executionStore.clearInitializationByJobIds(pendingJobIds)
+})
+
+const {
+  galleryActiveIndex,
+  galleryItems,
+  onViewItem: openResultGallery
+} = useResultGallery(() => filteredTasks.value)
+
+const onViewItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
+  await openResultGallery(item)
+})
+
+const onInspectAsset = (item: JobListItem) => {
+  void onViewItem(item)
+}
+
+const currentMenuItem = ref<JobListItem | null>(null)
+const jobContextMenuRef = ref<InstanceType<typeof JobContextMenu> | null>(null)
+
+const { jobMenuEntries, cancelJob } = useJobMenu(
+  () => currentMenuItem.value,
+  onInspectAsset
+)
+
+const onCancelItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
+  await cancelJob(item)
+})
+
+const onDeleteItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
+  if (!item.taskRef) return
+  await queueStore.delete(item.taskRef)
+})
+
+const onMenuItem = (item: JobListItem, event: Event) => {
+  currentMenuItem.value = item
+  jobContextMenuRef.value?.open(event)
+}
+
+const onJobMenuAction = wrapWithErrorHandlingAsync(async (entry: MenuEntry) => {
+  if (entry.kind === 'divider') return
+  if (entry.onClick) await entry.onClick()
+  jobContextMenuRef.value?.hide()
+})
+</script>
--- a/src/components/ui/Popover.vue
+++ b/src/components/ui/Popover.vue
@@ -15,10 +15,16 @@ defineOptions({
  inheritAttrs: false
 })

-defineProps<{
+const {
+  entries,
+  icon,
+  to,
+  showArrow = true
+} = defineProps<{
  entries?: MenuItem[]
  icon?: string
  to?: string | HTMLElement
+  showArrow?: boolean
 }>()
 </script>

@@ -39,7 +45,7 @@ defineProps<{
        v-bind="$attrs"
        class="z-1700 rounded-lg p-2 bg-base-background shadow-sm border border-border-subtle will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
      >
-        <slot>
+        <slot :close>
          <div class="flex flex-col p-1">
            <template v-for="item in entries ?? []" :key="item.label">
              <div
@@ -71,7 +77,10 @@ defineProps<{
            </template>
          </div>
        </slot>
-        <PopoverArrow class="fill-base-background stroke-border-subtle" />
+        <PopoverArrow
+          v-if="showArrow"
+          class="fill-base-background stroke-border-subtle"
+        />
      </PopoverContent>
    </PopoverPortal>
  </PopoverRoot>
--- a/src/composables/queue/useJobList.test.ts
+++ b/src/composables/queue/useJobList.test.ts
@@ -421,6 +421,52 @@ describe('useJobList', () => {
    expect(instance.filteredTasks.value.map((t) => t.jobId)).toEqual(['wf-1'])
  })

+  it('filters jobs by search query', async () => {
+    vi.useFakeTimers()
+    queueStoreMock.historyTasks = [
+      createTask({
+        jobId: 'alpha',
+        queueIndex: 2,
+        mockState: 'completed',
+        createTime: 2000,
+        executionEndTimestamp: 2000
+      }),
+      createTask({
+        jobId: 'beta',
+        queueIndex: 1,
+        mockState: 'failed',
+        createTime: 1000,
+        executionEndTimestamp: 1000
+      })
+    ]
+
+    const instance = initComposable()
+    await flush()
+    expect(instance.filteredTasks.value.map((task) => task.jobId)).toEqual([
+      'alpha',
+      'beta'
+    ])
+
+    instance.searchQuery.value = 'beta'
+    await vi.advanceTimersByTimeAsync(200)
+    await flush()
+    expect(instance.filteredTasks.value.map((task) => task.jobId)).toEqual([
+      'beta'
+    ])
+
+    instance.searchQuery.value = 'failed meta'
+    await vi.advanceTimersByTimeAsync(200)
+    await flush()
+    expect(instance.filteredTasks.value.map((task) => task.jobId)).toEqual([
+      'beta'
+    ])
+
+    instance.searchQuery.value = 'does-not-exist'
+    await vi.advanceTimersByTimeAsync(200)
+    await flush()
+    expect(instance.filteredTasks.value).toEqual([])
+  })
+
  it('hydrates job items with active progress and compute hours', async () => {
    queueStoreMock.runningTasks = [
      createTask({
--- a/src/composables/queue/useJobList.ts
+++ b/src/composables/queue/useJobList.ts
@@ -1,3 +1,4 @@
+import { refDebounced } from '@vueuse/core'
 import { orderBy } from 'es-toolkit/array'
 import { computed, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -197,6 +198,8 @@ export function useJobList() {
  const selectedJobTab = ref<JobTab>('All')
  const selectedWorkflowFilter = ref<'all' | 'current'>('all')
  const selectedSortMode = ref<JobSortMode>('mostRecent')
+  const searchQuery = ref('')
+  const debouncedSearchQuery = refDebounced(searchQuery, 150)

  const mostRecentTimestamp = (task: TaskItemImpl) => task.createTime ?? 0

@@ -248,8 +251,12 @@ export function useJobList() {
    return entries
  })

+  const normalizedSearchQuery = computed(() =>
+    debouncedSearchQuery.value.trim().toLocaleLowerCase()
+  )
+
  const filteredTasks = computed<TaskItemImpl[]>(() =>
-    filteredTaskEntries.value.map(({ task }) => task)
+    searchableTaskEntries.value.map(({ task }) => task)
  )

  const jobItems = computed<JobListItem[]>(() => {
@@ -307,11 +314,31 @@ export function useJobList() {
    return m
  })

+  const searchableTaskEntries = computed<TaskWithState[]>(() => {
+    if (!normalizedSearchQuery.value) return filteredTaskEntries.value
+
+    return filteredTaskEntries.value.filter(({ task }) => {
+      const taskId = String(task.jobId ?? '').toLocaleLowerCase()
+      const item = jobItemById.value.get(String(task.jobId))
+      if (!item) {
+        return taskId.includes(normalizedSearchQuery.value)
+      }
+
+      const title = item.title.toLocaleLowerCase()
+      const meta = item.meta.toLocaleLowerCase()
+      return (
+        title.includes(normalizedSearchQuery.value) ||
+        meta.includes(normalizedSearchQuery.value) ||
+        taskId.includes(normalizedSearchQuery.value)
+      )
+    })
+  })
+
  const groupedJobItems = computed<JobGroup[]>(() => {
    const groups: JobGroup[] = []
    const index = new Map<string, number>()
    const localeValue = locale.value
-    for (const { task, state } of filteredTaskEntries.value) {
+    for (const { task, state } of searchableTaskEntries.value) {
      let ts: number | undefined
      if (state === 'completed' || state === 'failed') {
        ts = task.executionEndTimestamp
@@ -356,6 +383,7 @@ export function useJobList() {
    selectedJobTab,
    selectedWorkflowFilter,
    selectedSortMode,
+    searchQuery,
    hasFailedJobs,
    // data sources
    allTasksSorted,
--- a/src/composables/queue/useQueueClearHistoryDialog.ts
+++ b/src/composables/queue/useQueueClearHistoryDialog.ts
@@ -0,0 +1,32 @@
+import QueueClearHistoryDialog from '@/components/queue/dialogs/QueueClearHistoryDialog.vue'
+import { useDialogStore } from '@/stores/dialogStore'
+
+export const useQueueClearHistoryDialog = () => {
+  const dialogStore = useDialogStore()
+
+  const showQueueClearHistoryDialog = () => {
+    dialogStore.showDialog({
+      key: 'queue-clear-history',
+      component: QueueClearHistoryDialog,
+      dialogComponentProps: {
+        headless: true,
+        closable: false,
+        closeOnEscape: true,
+        dismissableMask: true,
+        pt: {
+          root: {
+            class: 'max-w-90 w-auto bg-transparent border-none shadow-none'
+          },
+          content: {
+            class: 'bg-transparent',
+            style: 'padding: 0'
+          }
+        }
+      }
+    })
+  }
+
+  return {
+    showQueueClearHistoryDialog
+  }
+}
--- a/src/composables/sidebarTabs/useJobHistorySidebarTab.ts
+++ b/src/composables/sidebarTabs/useJobHistorySidebarTab.ts
@@ -0,0 +1,16 @@
+import { markRaw } from 'vue'
+
+import JobHistorySidebarTab from '@/components/sidebar/tabs/JobHistorySidebarTab.vue'
+import type { SidebarTabExtension } from '@/types/extensionTypes'
+
+export const useJobHistorySidebarTab = (): SidebarTabExtension => {
+  return {
+    id: 'job-history',
+    icon: 'icon-[lucide--history]',
+    title: 'queue.jobHistory',
+    tooltip: 'queue.jobHistory',
+    label: 'queue.jobHistory',
+    component: markRaw(JobHistorySidebarTab),
+    type: 'vue'
+  }
+}
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -825,11 +825,14 @@
      "showAssetsPanel": "Show assets panel",
      "queuedSuffix": "queued",
      "clearQueued": "Clear queued",
-      "clearHistory": "Clear job queue history",
+      "clearHistory": "Clear job history",
+      "dockedJobHistory": "Docked Job History",
+      "clearHistoryMenuAssetsNote": "Media assets won't be deleted.",
      "filterJobs": "Filter jobs",
      "filterBy": "Filter by",
      "filterAllWorkflows": "All workflows",
      "filterCurrentWorkflow": "Current workflow",
+      "searchJobs": "Search...",
      "sortJobs": "Sort jobs",
      "sortBy": "Sort by",
      "activeJobs": "{count} active job | {count} active jobs",
--- a/src/platform/assets/components/AssetsListItem.vue
+++ b/src/platform/assets/components/AssetsListItem.vue
@@ -59,19 +59,28 @@
    <div class="relative z-1 flex min-w-0 flex-1 flex-col gap-1">
      <div
        v-if="$slots.primary || primaryText"
-        class="text-xs leading-none text-text-primary"
+        class="min-w-0 text-xs leading-none text-text-primary"
      >
-        <slot name="primary">{{ primaryText }}</slot>
+        <slot v-if="$slots.primary" name="primary" />
+        <span v-else class="block truncate" :title="primaryText">
+          {{ primaryText }}
+        </span>
      </div>
      <div
        v-if="$slots.secondary || secondaryText"
-        class="text-xs leading-none text-text-secondary"
+        class="min-w-0 text-xs leading-none text-text-secondary"
      >
-        <slot name="secondary">{{ secondaryText }}</slot>
+        <slot v-if="$slots.secondary" name="secondary" />
+        <span v-else class="block truncate" :title="secondaryText">
+          {{ secondaryText }}
+        </span>
      </div>
    </div>

-    <div v-if="$slots.actions" class="relative z-1 flex items-center gap-2">
+    <div
+      v-if="$slots.actions"
+      class="relative z-1 flex shrink-0 items-center gap-2"
+    >
      <slot name="actions" />
    </div>

--- a/src/platform/assets/components/MediaAssetFilterBar.vue
+++ b/src/platform/assets/components/MediaAssetFilterBar.vue
@@ -34,20 +34,14 @@
          />
        </template>
      </AssetSortButton>
-      <MediaAssetViewModeToggle
-        v-if="isQueuePanelV2Enabled"
-        v-model:view-mode="viewMode"
-      />
+      <MediaAssetViewModeToggle v-model:view-mode="viewMode" />
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import { computed } from 'vue'
-
 import SearchBox from '@/components/common/SearchBox.vue'
 import { isCloud } from '@/platform/distribution/types'
-import { useSettingStore } from '@/platform/settings/settingStore'

 import MediaAssetFilterButton from './MediaAssetFilterButton.vue'
 import MediaAssetFilterMenu from './MediaAssetFilterMenu.vue'
@@ -70,11 +64,6 @@ const emit = defineEmits<{
 const sortBy = defineModel<SortBy>('sortBy', { required: true })
 const viewMode = defineModel<'list' | 'grid'>('viewMode', { required: true })

-const settingStore = useSettingStore()
-const isQueuePanelV2Enabled = computed(() =>
-  settingStore.get('Comfy.Queue.QPOV2')
-)
-
 const handleSearchChange = (value: string | undefined) => {
  emit('update:searchQuery', value ?? '')
 }
--- a/src/stores/workspace/sidebarTabStore.test.ts
+++ b/src/stores/workspace/sidebarTabStore.test.ts
@@ -0,0 +1,151 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { nextTick, ref } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+
+const { mockGetSetting, mockRegisterCommand, mockRegisterCommands } =
+  vi.hoisted(() => ({
+    mockGetSetting: vi.fn(),
+    mockRegisterCommand: vi.fn(),
+    mockRegisterCommands: vi.fn()
+  }))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: mockGetSetting
+  })
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    registerCommand: mockRegisterCommand,
+    commands: []
+  })
+}))
+
+vi.mock('@/stores/menuItemStore', () => ({
+  useMenuItemStore: () => ({
+    registerCommands: mockRegisterCommands
+  })
+}))
+
+vi.mock('@/i18n', () => ({
+  t: (key: string) => key,
+  te: () => false
+}))
+
+vi.mock('@/composables/sidebarTabs/useAssetsSidebarTab', () => ({
+  useAssetsSidebarTab: () => ({
+    id: 'assets',
+    title: 'assets',
+    type: 'vue',
+    component: {}
+  })
+}))
+
+vi.mock('@/composables/sidebarTabs/useJobHistorySidebarTab', () => ({
+  useJobHistorySidebarTab: () => ({
+    id: 'job-history',
+    title: 'job-history',
+    type: 'vue',
+    component: {}
+  })
+}))
+
+vi.mock('@/composables/sidebarTabs/useNodeLibrarySidebarTab', () => ({
+  useNodeLibrarySidebarTab: () => ({
+    id: 'node-library',
+    title: 'node-library',
+    type: 'vue',
+    component: {}
+  })
+}))
+
+vi.mock('@/composables/sidebarTabs/useModelLibrarySidebarTab', () => ({
+  useModelLibrarySidebarTab: () => ({
+    id: 'model-library',
+    title: 'model-library',
+    type: 'vue',
+    component: {}
+  })
+}))
+
+vi.mock(
+  '@/platform/workflow/management/composables/useWorkflowsSidebarTab',
+  () => ({
+    useWorkflowsSidebarTab: () => ({
+      id: 'workflows',
+      title: 'workflows',
+      type: 'vue',
+      component: {}
+    })
+  })
+)
+
+describe('useSidebarTabStore', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    mockGetSetting.mockReset()
+    mockRegisterCommand.mockClear()
+    mockRegisterCommands.mockClear()
+  })
+
+  it('registers the job history tab when QPO V2 is enabled', () => {
+    mockGetSetting.mockImplementation((key: string) =>
+      key === 'Comfy.Queue.QPOV2' ? true : undefined
+    )
+
+    const store = useSidebarTabStore()
+    store.registerCoreSidebarTabs()
+
+    expect(store.sidebarTabs.map((tab) => tab.id)).toEqual([
+      'job-history',
+      'assets',
+      'node-library',
+      'model-library',
+      'workflows'
+    ])
+    expect(mockRegisterCommand).toHaveBeenCalledTimes(5)
+  })
+
+  it('does not register the job history tab when QPO V2 is disabled', () => {
+    mockGetSetting.mockImplementation((key: string) =>
+      key === 'Comfy.Queue.QPOV2' ? false : undefined
+    )
+
+    const store = useSidebarTabStore()
+    store.registerCoreSidebarTabs()
+
+    expect(store.sidebarTabs.map((tab) => tab.id)).toEqual([
+      'assets',
+      'node-library',
+      'model-library',
+      'workflows'
+    ])
+    expect(mockRegisterCommand).toHaveBeenCalledTimes(4)
+  })
+
+  it('prepends the job history tab when QPO V2 is toggled on', async () => {
+    const qpoV2Enabled = ref(false)
+    mockGetSetting.mockImplementation((key: string) =>
+      key === 'Comfy.Queue.QPOV2' ? qpoV2Enabled.value : undefined
+    )
+
+    const store = useSidebarTabStore()
+    store.registerCoreSidebarTabs()
+
+    qpoV2Enabled.value = true
+    await nextTick()
+
+    expect(store.sidebarTabs.map((tab) => tab.id)).toEqual([
+      'job-history',
+      'assets',
+      'node-library',
+      'model-library',
+      'workflows'
+    ])
+    expect(mockRegisterCommand).toHaveBeenCalledTimes(5)
+  })
+})
--- a/src/stores/workspace/sidebarTabStore.ts
+++ b/src/stores/workspace/sidebarTabStore.ts
@@ -1,7 +1,8 @@
 import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'

 import { useAssetsSidebarTab } from '@/composables/sidebarTabs/useAssetsSidebarTab'
+import { useJobHistorySidebarTab } from '@/composables/sidebarTabs/useJobHistorySidebarTab'
 import { useModelLibrarySidebarTab } from '@/composables/sidebarTabs/useModelLibrarySidebarTab'
 import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
 import { t, te } from '@/i18n'
@@ -26,8 +27,13 @@ export const useSidebarTabStore = defineStore('sidebarTab', () => {
    activeSidebarTabId.value = activeSidebarTabId.value === tabId ? null : tabId
  }

-  const registerSidebarTab = (tab: SidebarTabExtension) => {
-    sidebarTabs.value = [...sidebarTabs.value, tab]
+  const registerSidebarTab = (
+    tab: SidebarTabExtension,
+    options?: { prepend?: boolean }
+  ) => {
+    sidebarTabs.value = options?.prepend
+      ? [tab, ...sidebarTabs.value]
+      : [...sidebarTabs.value, tab]

    // Generate label in format "Toggle X Sidebar"
    const labelFunction = () => {
@@ -45,7 +51,8 @@ export const useSidebarTabStore = defineStore('sidebarTab', () => {
        'node-library': 'sideToolbar.nodeLibrary',
        'model-library': 'sideToolbar.modelLibrary',
        workflows: 'sideToolbar.workflows',
-        assets: 'sideToolbar.assets'
+        assets: 'sideToolbar.assets',
+        'job-history': 'queue.jobHistory'
      }

      const key = menubarLabelKeys[tab.id]
@@ -95,6 +102,9 @@ export const useSidebarTabStore = defineStore('sidebarTab', () => {
      const newSidebarTabs = [...sidebarTabs.value]
      newSidebarTabs.splice(index, 1)
      sidebarTabs.value = newSidebarTabs
+      if (activeSidebarTabId.value === id) {
+        activeSidebarTabId.value = null
+      }
    }
  }

@@ -102,6 +112,25 @@ export const useSidebarTabStore = defineStore('sidebarTab', () => {
   * Register the core sidebar tabs.
   */
  const registerCoreSidebarTabs = () => {
+    const settingStore = useSettingStore()
+    const jobHistoryTabId = 'job-history'
+    const syncJobHistoryTab = (enabled: boolean) => {
+      const hasJobHistoryTab = sidebarTabs.value.some(
+        (tab) => tab.id === jobHistoryTabId
+      )
+      if (enabled && !hasJobHistoryTab) {
+        registerSidebarTab(useJobHistorySidebarTab(), { prepend: true })
+      } else if (!enabled && hasJobHistoryTab) {
+        unregisterSidebarTab(jobHistoryTabId)
+      }
+    }
+
+    syncJobHistoryTab(settingStore.get('Comfy.Queue.QPOV2'))
+    watch(
+      () => settingStore.get('Comfy.Queue.QPOV2'),
+      (enabled) => syncJobHistoryTab(enabled)
+    )
+
    registerSidebarTab(useAssetsSidebarTab())
    registerSidebarTab(useNodeLibrarySidebarTab())
    registerSidebarTab(useModelLibrarySidebarTab())
--- a/src/storybook/mocks/useJobList.ts
+++ b/src/storybook/mocks/useJobList.ts
@@ -22,9 +22,13 @@ function buildGroupedJobItems(): JobGroup[] {

 const groupedJobItems = computed<JobGroup[]>(buildGroupedJobItems)

+export const jobTabs = ['All', 'Completed', 'Failed'] as const
+export const jobSortModes = ['mostRecent', 'totalGenerationTime'] as const
+
 const selectedJobTab = ref<JobTab>('All')
 const selectedWorkflowFilter = ref<'all' | 'current'>('all')
 const selectedSortMode = ref<JobSortMode>('mostRecent')
+const searchQuery = ref('')
 const currentNodeName = ref('KSampler')
 function buildEmptyTasks(): TaskItemImpl[] {
  return []
@@ -48,6 +52,7 @@ export function useJobList() {
    selectedJobTab,
    selectedWorkflowFilter,
    selectedSortMode,
+    searchQuery,
    hasFailedJobs,
    allTasksSorted,
    filteredTasks,