refactor: simplify queue history list coverage

package.json

@@ -71,6 +71,7 @@
     "@primevue/themes": "catalog:",
     "@sentry/vue": "catalog:",
     "@sparkjsdev/spark": "catalog:",
+    "@tanstack/vue-virtual": "catalog:",
     "@tiptap/core": "catalog:",
     "@tiptap/extension-link": "catalog:",
     "@tiptap/extension-table": "catalog:",

pnpm-lock.yaml

@@ -102,6 +102,9 @@ catalogs:
     '@tailwindcss/vite':
       specifier: ^4.2.0
       version: 4.2.0
+    '@tanstack/vue-virtual':
+      specifier: ^3.13.12
+      version: 3.13.12
     '@testing-library/jest-dom':
       specifier: ^6.9.1
       version: 6.9.1
@@ -452,6 +455,9 @@ importers:
       '@sparkjsdev/spark':
         specifier: 'catalog:'
         version: 0.1.10
+      '@tanstack/vue-virtual':
+        specifier: 'catalog:'
+        version: 3.13.12(vue@3.5.13(typescript@5.9.3))
       '@tiptap/core':
         specifier: 'catalog:'
         version: 2.27.2(@tiptap/pm@2.27.2)

pnpm-workspace.yaml

@@ -30,6 +30,7 @@ catalog:
   '@sentry/vite-plugin': ^4.6.0
   '@sentry/vue': ^10.32.1
   '@sparkjsdev/spark': ^0.1.10
+  '@tanstack/vue-virtual': ^3.13.12
   '@storybook/addon-docs': ^10.2.10
   '@storybook/addon-mcp': 0.1.6
   '@storybook/vue3': ^10.2.10

src/components/queue/QueueOverlayExpanded.vue

@@ -20,7 +20,7 @@
       @update:selected-sort-mode="$emit('update:selectedSortMode', $event)"
     />
 
-    <div class="min-h-0 flex-1 overflow-y-auto">
+    <div class="min-h-0 flex-1">
       <JobAssetsList
         :displayed-job-groups="displayedJobGroups"
         @cancel-item="onCancelItemEvent"

src/components/queue/job/JobAssetsList.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable vue/one-component-per-file -- test stubs */
 /* eslint-disable testing-library/no-container, testing-library/no-node-access -- stubs lack ARIA roles; data attributes for props */
 /* eslint-disable testing-library/prefer-user-event -- fireEvent needed: fake timers require fireEvent for mouseEnter/mouseLeave */
 import { fireEvent, render, screen } from '@testing-library/vue'
@@ -6,21 +5,27 @@ import userEvent from '@testing-library/user-event'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, nextTick } from 'vue'
 
+import './testUtils/mockTanstackVirtualizer'
+
 import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
-import type { JobListItem as ApiJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
-import { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
 
 import JobAssetsList from './JobAssetsList.vue'
 
-const JobDetailsPopoverStub = defineComponent({
-  name: 'JobDetailsPopover',
-  props: {
-    jobId: { type: String, required: true },
-    workflowId: { type: String, default: undefined }
-  },
-  template:
-    '<div class="job-details-popover-stub" :data-job-id="jobId" :data-workflow-id="workflowId" />'
-})
+const hoisted = vi.hoisted(() => ({
+  jobDetailsPopoverStub: {
+    name: 'JobDetailsPopover',
+    props: {
+      jobId: { type: String, required: true },
+      workflowId: { type: String, default: undefined }
+    },
+    template:
+      '<div class="job-details-popover-stub" :data-job-id="jobId" :data-workflow-id="workflowId" />'
+  }
+}))
+
+vi.mock('@/components/queue/job/JobDetailsPopover.vue', () => ({
+  default: hoisted.jobDetailsPopoverStub
+}))
 
 const AssetsListItemStub = defineComponent({
   name: 'AssetsListItem',
@@ -65,71 +70,81 @@ vi.mock('vue-i18n', () => {
   }
 })
 
-const createResultItem = (
+type TestPreviewOutput = {
+  url: string
+  isImage: boolean
+  isVideo: boolean
+}
+
+type TestTaskRef = {
+  workflowId?: string
+  previewOutput?: TestPreviewOutput
+}
+
+type TestJobListItem = Omit<JobListItem, 'taskRef'> & {
+  taskRef?: TestTaskRef
+}
+
+type TestJobGroup = Omit<JobGroup, 'items'> & {
+  items: TestJobListItem[]
+}
+
+const createPreviewOutput = (
   filename: string,
   mediaType: string = 'images'
-): ResultItemImpl => {
-  const item = new ResultItemImpl({
-    filename,
-    subfolder: '',
-    type: 'output',
-    nodeId: 'node-1',
-    mediaType
-  })
-  Object.defineProperty(item, 'url', {
-    get: () => `/api/view/${filename}`
-  })
-  return item
-}
-
-const createTaskRef = (preview?: ResultItemImpl): TaskItemImpl => {
-  const job: ApiJobListItem = {
-    id: `task-${Math.random().toString(36).slice(2)}`,
-    status: 'completed',
-    create_time: Date.now(),
-    preview_output: null,
-    outputs_count: preview ? 1 : 0,
-    workflow_id: 'workflow-1',
-    priority: 0
+): TestPreviewOutput => {
+  const url = `/api/view/${filename}`
+  return {
+    url,
+    isImage: mediaType === 'images',
+    isVideo: mediaType === 'video'
   }
-  const flatOutputs = preview ? [preview] : []
-  return new TaskItemImpl(job, {}, flatOutputs)
 }
 
-const buildJob = (overrides: Partial<JobListItem> = {}): JobListItem => ({
+const createTaskRef = (preview?: TestPreviewOutput): TestTaskRef => ({
+  workflowId: 'workflow-1',
+  ...(preview && { previewOutput: preview })
+})
+
+const buildJob = (
+  overrides: Partial<TestJobListItem> = {}
+): TestJobListItem => ({
   id: 'job-1',
   title: 'Job 1',
   meta: 'meta',
   state: 'completed',
-  taskRef: createTaskRef(createResultItem('job-1.png')),
+  taskRef: createTaskRef(createPreviewOutput('job-1.png')),
   ...overrides
 })
 
-function renderJobAssetsList(
-  jobs: JobListItem[],
-  callbacks: {
-    onViewItem?: (item: JobListItem) => void
-  } = {}
-) {
-  const displayedJobGroups: JobGroup[] = [
-    {
-      key: 'group-1',
-      label: 'Group 1',
-      items: jobs
-    }
-  ]
-
+function renderJobAssetsList({
+  jobs = [],
+  displayedJobGroups,
+  attrs,
+  onViewItem
+}: {
+  jobs?: TestJobListItem[]
+  displayedJobGroups?: TestJobGroup[]
+  attrs?: Record<string, string>
+  onViewItem?: (item: JobListItem) => void
+} = {}) {
   const user = userEvent.setup()
 
   const result = render(JobAssetsList, {
     props: {
-      displayedJobGroups,
-      ...(callbacks.onViewItem && { onViewItem: callbacks.onViewItem })
+      displayedJobGroups: (displayedJobGroups ?? [
+        {
+          key: 'group-1',
+          label: 'Group 1',
+          items: jobs
+        }
+      ]) as JobGroup[],
+      ...(onViewItem && { onViewItem })
     },
+    attrs,
     global: {
       stubs: {
         teleport: true,
-        JobDetailsPopover: JobDetailsPopoverStub,
         AssetsListItem: AssetsListItemStub
       }
     }
@@ -168,10 +183,57 @@ afterEach(() => {
 })
 
 describe('JobAssetsList', () => {
+  it('renders grouped headers alongside job rows', () => {
+    const displayedJobGroups: TestJobGroup[] = [
+      {
+        key: 'today',
+        label: 'Today',
+        items: [buildJob({ id: 'job-1' })]
+      },
+      {
+        key: 'yesterday',
+        label: 'Yesterday',
+        items: [buildJob({ id: 'job-2', title: 'Job 2' })]
+      }
+    ]
+
+    const { container } = renderJobAssetsList({ displayedJobGroups })
+
+    expect(screen.getByText('Today')).toBeTruthy()
+    expect(screen.getByText('Yesterday')).toBeTruthy()
+    expect(container.querySelector('[data-job-id="job-1"]')).not.toBeNull()
+    expect(container.querySelector('[data-job-id="job-2"]')).not.toBeNull()
+  })
+
+  it('forwards parent attrs to the scroll container', () => {
+    renderJobAssetsList({
+      attrs: {
+        class: 'min-h-0 flex-1'
+      },
+      displayedJobGroups: [
+        {
+          key: 'today',
+          label: 'Today',
+          items: [buildJob({ id: 'job-1' })]
+        }
+      ]
+    })
+
+    expect(screen.getByTestId('job-assets-list').className.split(' ')).toEqual(
+      expect.arrayContaining([
+        'min-h-0',
+        'flex-1',
+        'h-full',
+        'overflow-y-auto',
+        'pb-4'
+      ])
+    )
+  })
+
   it('emits viewItem on preview-click for completed jobs with preview', async () => {
     const job = buildJob()
     const onViewItem = vi.fn()
-    const { user } = renderJobAssetsList([job], { onViewItem })
+    const { user } = renderJobAssetsList({ jobs: [job], onViewItem })
 
     await user.click(screen.getByTestId('preview-trigger'))
 
@@ -181,7 +243,7 @@ describe('JobAssetsList', () => {
   it('emits viewItem on double-click for completed jobs with preview', async () => {
     const job = buildJob()
     const onViewItem = vi.fn()
-    const { container, user } = renderJobAssetsList([job], { onViewItem })
+    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
 
     const stubRoot = container.querySelector('.assets-list-item-stub')!
     await user.dblClick(stubRoot)
@@ -192,10 +254,10 @@ describe('JobAssetsList', () => {
   it('emits viewItem on double-click for completed video jobs without icon image', async () => {
     const job = buildJob({
       iconImageUrl: undefined,
-      taskRef: createTaskRef(createResultItem('job-1.webm', 'video'))
+      taskRef: createTaskRef(createPreviewOutput('job-1.webm', 'video'))
     })
     const onViewItem = vi.fn()
-    const { container, user } = renderJobAssetsList([job], { onViewItem })
+    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
 
     const stubRoot = container.querySelector('.assets-list-item-stub')!
     expect(stubRoot.getAttribute('data-preview-url')).toBe(
@@ -211,10 +273,10 @@ describe('JobAssetsList', () => {
   it('emits viewItem on icon click for completed 3D jobs without preview tile', async () => {
     const job = buildJob({
       iconImageUrl: undefined,
-      taskRef: createTaskRef(createResultItem('job-1.glb', 'model'))
+      taskRef: createTaskRef(createPreviewOutput('job-1.glb', 'model'))
     })
     const onViewItem = vi.fn()
-    const { container, user } = renderJobAssetsList([job], { onViewItem })
+    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
 
     const icon = container.querySelector('.assets-list-item-stub i')!
     await user.click(icon)
@@ -225,10 +287,10 @@ describe('JobAssetsList', () => {
   it('does not emit viewItem on double-click for non-completed jobs', async () => {
     const job = buildJob({
       state: 'running',
-      taskRef: createTaskRef(createResultItem('job-1.png'))
+      taskRef: createTaskRef(createPreviewOutput('job-1.png'))
     })
     const onViewItem = vi.fn()
-    const { container, user } = renderJobAssetsList([job], { onViewItem })
+    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
 
     const stubRoot = container.querySelector('.assets-list-item-stub')!
     await user.dblClick(stubRoot)
@@ -242,7 +304,7 @@ describe('JobAssetsList', () => {
       taskRef: createTaskRef()
     })
     const onViewItem = vi.fn()
-    const { container } = renderJobAssetsList([job], { onViewItem })
+    const { container } = renderJobAssetsList({ jobs: [job], onViewItem })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
     await fireEvent.mouseEnter(jobRow)
@@ -256,7 +318,7 @@ describe('JobAssetsList', () => {
   it('shows and hides the job details popover with hover delays', async () => {
     vi.useFakeTimers()
     const job = buildJob()
-    const { container } = renderJobAssetsList([job])
+    const { container } = renderJobAssetsList({ jobs: [job] })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 
@@ -286,7 +348,7 @@ describe('JobAssetsList', () => {
   it('keeps the job details popover open while hovering the popover', async () => {
     vi.useFakeTimers()
     const job = buildJob()
-    const { container } = renderJobAssetsList([job])
+    const { container } = renderJobAssetsList({ jobs: [job] })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 
@@ -319,7 +381,7 @@ describe('JobAssetsList', () => {
   it('positions the popover to the right of rows near the left viewport edge', async () => {
     vi.useFakeTimers()
     const job = buildJob()
-    const { container } = renderJobAssetsList([job])
+    const { container } = renderJobAssetsList({ jobs: [job] })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 
@@ -344,7 +406,7 @@ describe('JobAssetsList', () => {
   it('positions the popover to the left of rows near the right viewport edge', async () => {
     vi.useFakeTimers()
     const job = buildJob()
-    const { container } = renderJobAssetsList([job])
+    const { container } = renderJobAssetsList({ jobs: [job] })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 
@@ -370,7 +432,9 @@ describe('JobAssetsList', () => {
     vi.useFakeTimers()
     const firstJob = buildJob({ id: 'job-1' })
     const secondJob = buildJob({ id: 'job-2', title: 'Job 2' })
-    const { container } = renderJobAssetsList([firstJob, secondJob])
+    const { container } = renderJobAssetsList({
+      jobs: [firstJob, secondJob]
+    })
 
     const firstRow = container.querySelector('[data-job-id="job-1"]')!
     const secondRow = container.querySelector('[data-job-id="job-2"]')!
@@ -398,7 +462,9 @@ describe('JobAssetsList', () => {
     vi.useFakeTimers()
     const firstJob = buildJob({ id: 'job-1' })
     const secondJob = buildJob({ id: 'job-2', title: 'Job 2' })
-    const { container } = renderJobAssetsList([firstJob, secondJob])
+    const { container } = renderJobAssetsList({
+      jobs: [firstJob, secondJob]
+    })
 
     const firstRow = container.querySelector('[data-job-id="job-1"]')!
     const secondRow = container.querySelector('[data-job-id="job-2"]')!
@@ -429,7 +495,7 @@ describe('JobAssetsList', () => {
   it('does not show details if the hovered row disappears before the show delay ends', async () => {
     vi.useFakeTimers()
     const job = buildJob()
-    const { container, rerender } = renderJobAssetsList([job])
+    const { container, rerender } = renderJobAssetsList({ jobs: [job] })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 

src/components/queue/job/JobAssetsList.vue

@@ -1,79 +1,92 @@
 <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>
-      <div
-        v-for="job in group.items"
-        :key="job.id"
-        :data-job-id="job.id"
-        @mouseenter="onJobEnter(job, $event)"
-        @mouseleave="onJobLeave(job.id)"
-      >
-        <AssetsListItem
-          :class="
-            cn(
-              'w-full shrink-0 cursor-default text-text-primary transition-colors hover:bg-secondary-background-hover',
-              job.state === 'running' && 'bg-secondary-background'
-            )
-          "
-          :preview-url="getJobPreviewUrl(job)"
-          :is-video-preview="isVideoPreviewJob(job)"
-          :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"
-          @contextmenu.prevent.stop="$emit('menu', job, $event)"
-          @dblclick.stop="emitViewItem(job)"
-          @preview-click="emitViewItem(job)"
-          @click.stop
+  <div
+    ref="scrollContainer"
+    v-bind="$attrs"
+    data-testid="job-assets-list"
+    class="h-full overflow-y-auto pb-4"
+    @scroll="onListScroll"
+  >
+    <div :style="virtualWrapperStyle">
+      <template v-for="{ row, virtualItem } in virtualRows" :key="row.key">
+        <div
+          v-if="row.type === 'header'"
+          class="box-border px-3 pb-2 text-xs leading-none text-text-secondary"
+          :style="getVirtualRowStyle(virtualItem)"
         >
-          <template v-if="hoveredJobId === job.id" #actions>
-            <Button
-              v-if="isCancelable(job)"
-              variant="destructive"
-              size="icon"
-              :aria-label="t('g.cancel')"
-              @click.stop="emitCancelItem(job)"
+          {{ row.label }}
+        </div>
+        <div
+          v-else-if="row.type === 'job'"
+          class="box-border px-3"
+          :style="getVirtualRowStyle(virtualItem)"
+        >
+          <div
+            :data-job-id="row.job.id"
+            class="h-12"
+            @mouseenter="onJobEnter(row.job, $event)"
+            @mouseleave="onJobLeave(row.job.id)"
+          >
+            <AssetsListItem
+              :class="
+                cn(
+                  'size-full shrink-0 cursor-default text-text-primary transition-colors hover:bg-secondary-background-hover',
+                  row.job.state === 'running' && 'bg-secondary-background'
+                )
+              "
+              :preview-url="getJobPreviewUrl(row.job)"
+              :is-video-preview="isVideoPreviewJob(row.job)"
+              :preview-alt="row.job.title"
+              :icon-name="row.job.iconName ?? iconForJobState(row.job.state)"
+              :icon-class="getJobIconClass(row.job)"
+              :primary-text="row.job.title"
+              :secondary-text="row.job.meta"
+              :progress-total-percent="row.job.progressTotalPercent"
+              :progress-current-percent="row.job.progressCurrentPercent"
+              @contextmenu.prevent.stop="$emit('menu', row.job, $event)"
+              @dblclick.stop="emitViewItem(row.job)"
+              @preview-click="emitViewItem(row.job)"
+              @click.stop
             >
-              <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="emitDeleteItem(job)"
-            >
-              <i class="icon-[lucide--trash-2] size-4" />
-            </Button>
-            <Button
-              v-else-if="job.state === 'completed'"
-              variant="textonly"
-              size="sm"
-              @click.stop="emitCompletedViewItem(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>
+              <template v-if="hoveredJobId === row.job.id" #actions>
+                <Button
+                  v-if="isCancelable(row.job)"
+                  variant="destructive"
+                  size="icon"
+                  :aria-label="t('g.cancel')"
+                  @click.stop="emitCancelItem(row.job)"
+                >
+                  <i class="icon-[lucide--x] size-4" />
+                </Button>
+                <Button
+                  v-else-if="isFailedDeletable(row.job)"
+                  variant="destructive"
+                  size="icon"
+                  :aria-label="t('g.delete')"
+                  @click.stop="emitDeleteItem(row.job)"
+                >
+                  <i class="icon-[lucide--trash-2] size-4" />
+                </Button>
+                <Button
+                  v-else-if="row.job.state === 'completed'"
+                  variant="textonly"
+                  size="sm"
+                  @click.stop="emitCompletedViewItem(row.job)"
+                >
+                  {{ t('menuLabels.View') }}
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="icon"
+                  :aria-label="t('g.more')"
+                  @click.stop="$emit('menu', row.job, $event)"
+                >
+                  <i class="icon-[lucide--ellipsis] size-4" />
+                </Button>
+              </template>
+            </AssetsListItem>
+          </div>
+        </div>
+      </template>
     </div>
   </div>
 
@@ -97,8 +110,11 @@
 </template>
 
 <script setup lang="ts">
+import type { VirtualItem } from '@tanstack/vue-virtual'
+import type { CSSProperties } from 'vue'
+import { useVirtualizer } from '@tanstack/vue-virtual'
 import { useI18n } from 'vue-i18n'
-import { nextTick, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 
 import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
 import { getHoverPopoverPosition } from '@/components/queue/job/getHoverPopoverPosition'
@@ -110,6 +126,17 @@ import { cn } from '@/utils/tailwindUtil'
 import { iconForJobState } from '@/utils/queueDisplay'
 import { isActiveJobState } from '@/utils/queueUtil'
 
+import { buildVirtualJobRows } from './buildVirtualJobRows'
+import type { VirtualJobRow } from './buildVirtualJobRows'
+
+const HEADER_ROW_HEIGHT = 20
+const GROUP_ROW_GAP = 16
+const JOB_ROW_HEIGHT = 48
+
+defineOptions({
+  inheritAttrs: false
+})
+
 const { displayedJobGroups } = defineProps<{ displayedJobGroups: JobGroup[] }>()
 
 const emit = defineEmits<{
@@ -120,9 +147,43 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+const scrollContainer = ref<HTMLElement | null>(null)
 const hoveredJobId = ref<string | null>(null)
 const activeRowElement = ref<HTMLElement | null>(null)
 const popoverPosition = ref<{ top: number; left: number } | null>(null)
+const flatRows = computed(() => buildVirtualJobRows(displayedJobGroups))
+const virtualizer = useVirtualizer({
+  get count(): number {
+    return flatRows.value.length
+  },
+  getItemKey(index: number) {
+    return flatRows.value[index]?.key ?? index
+  },
+  estimateSize(index: number) {
+    const row = flatRows.value[index]
+    return row ? getRowHeight(row, index, flatRows.value) : JOB_ROW_HEIGHT
+  },
+  getScrollElement() {
+    return scrollContainer.value
+  },
+  overscan: 12
+})
+const virtualRows = computed(() => {
+  const rows = flatRows.value
+  return virtualizer.value
+    .getVirtualItems()
+    .flatMap((virtualItem: VirtualItem) => {
+      const row = rows[virtualItem.index]
+      return row ? [{ row, virtualItem }] : []
+    })
+})
+const virtualWrapperStyle = computed<CSSProperties>(() => ({
+  position: 'relative',
+  width: '100%',
+  ...(flatRows.value.length > 0 && {
+    height: `${virtualizer.value.getTotalSize()}px`
+  })
+}))
 const {
   activeDetails,
   clearHoverTimers,
@@ -135,6 +196,37 @@ const {
   onReset: clearPopoverAnchor
 })
 
+function getVirtualRowStyle(virtualItem: VirtualItem): CSSProperties {
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: `${virtualItem.size}px`,
+    transform: `translateY(${virtualItem.start}px)`,
+    overflowAnchor: 'none'
+  }
+}
+
+function getRowHeight(
+  row: VirtualJobRow,
+  index: number,
+  rows: VirtualJobRow[]
+): number {
+  if (row.type === 'header') {
+    return HEADER_ROW_HEIGHT
+  }
+
+  return (
+    JOB_ROW_HEIGHT + (rows[index + 1]?.type === 'header' ? GROUP_ROW_GAP : 0)
+  )
+}
+
+function onListScroll() {
+  hoveredJobId.value = null
+  resetActiveDetails()
+}
+
 function clearPopoverAnchor() {
   activeRowElement.value = null
   popoverPosition.value = null

src/components/queue/job/buildVirtualJobRows.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest'
+
+import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
+
+import { buildVirtualJobRows } from './buildVirtualJobRows'
+
+function buildJob(id: string): JobListItem {
+  return {
+    id,
+    title: `Job ${id}`,
+    meta: 'meta',
+    state: 'completed'
+  }
+}
+
+describe('buildVirtualJobRows', () => {
+  it('flattens grouped jobs into headers and rows in display order', () => {
+    const displayedJobGroups: JobGroup[] = [
+      {
+        key: 'today',
+        label: 'Today',
+        items: [buildJob('job-1'), buildJob('job-2')]
+      },
+      {
+        key: 'yesterday',
+        label: 'Yesterday',
+        items: [buildJob('job-3')]
+      }
+    ]
+
+    expect(buildVirtualJobRows(displayedJobGroups)).toEqual([
+      {
+        key: 'header-today',
+        type: 'header',
+        label: 'Today'
+      },
+      {
+        key: 'job-job-1',
+        type: 'job',
+        job: displayedJobGroups[0].items[0]
+      },
+      {
+        key: 'job-job-2',
+        type: 'job',
+        job: displayedJobGroups[0].items[1]
+      },
+      {
+        key: 'header-yesterday',
+        type: 'header',
+        label: 'Yesterday'
+      },
+      {
+        key: 'job-job-3',
+        type: 'job',
+        job: displayedJobGroups[1].items[0]
+      }
+    ])
+  })
+
+  it('keeps a single group flattened without extra row metadata', () => {
+    const displayedJobGroups: JobGroup[] = [
+      {
+        key: 'today',
+        label: 'Today',
+        items: [buildJob('job-1')]
+      }
+    ]
+
+    expect(buildVirtualJobRows(displayedJobGroups)).toEqual([
+      {
+        key: 'header-today',
+        type: 'header',
+        label: 'Today'
+      },
+      {
+        key: 'job-job-1',
+        type: 'job',
+        job: displayedJobGroups[0].items[0]
+      }
+    ])
+  })
+})

src/components/queue/job/buildVirtualJobRows.ts

@@ -0,0 +1,37 @@
+import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
+
+export type VirtualJobRow =
+  | {
+      key: string
+      type: 'header'
+      label: string
+    }
+  | {
+      key: string
+      type: 'job'
+      job: JobListItem
+    }
+
+export function buildVirtualJobRows(
+  displayedJobGroups: JobGroup[]
+): VirtualJobRow[] {
+  const rows: VirtualJobRow[] = []
+
+  displayedJobGroups.forEach((group) => {
+    rows.push({
+      key: `header-${group.key}`,
+      type: 'header',
+      label: group.label
+    })
+
+    group.items.forEach((job) => {
+      rows.push({
+        key: `job-${job.id}`,
+        type: 'job',
+        job
+      })
+    })
+  })
+
+  return rows
+}

src/components/queue/job/testUtils/mockTanstackVirtualizer.ts

@@ -0,0 +1,33 @@
+import { vi } from 'vitest'
+
+vi.mock('@tanstack/vue-virtual', async () => {
+  const { computed } = await import('vue')
+
+  return {
+    useVirtualizer: (options: {
+      count: number
+      estimateSize: (index: number) => number
+      getItemKey?: (index: number) => number | string
+    }) =>
+      computed(() => {
+        let start = 0
+        const items = Array.from({ length: options.count }, (_, index) => {
+          const size = options.estimateSize(index)
+          const item = {
+            key: options.getItemKey?.(index) ?? index,
+            index,
+            start,
+            size
+          }
+
+          start += size
+          return item
+        })
+
+        return {
+          getVirtualItems: () => items,
+          getTotalSize: () => start
+        }
+      })
+  }
+})

src/components/sidebar/tabs/JobHistorySidebarTab.test.ts

@@ -1,163 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { createI18n } from 'vue-i18n'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent, nextTick } from 'vue'
-
-import JobHistorySidebarTab from './JobHistorySidebarTab.vue'
-
-const JobDetailsPopoverStub = defineComponent({
-  name: 'JobDetailsPopover',
-  props: {
-    jobId: { type: String, required: true },
-    workflowId: { type: String, default: undefined }
-  },
-  template: '<div class="job-details-popover-stub" />'
-})
-
-vi.mock('@/composables/queue/useJobList', async () => {
-  const { ref } = await import('vue')
-  const jobHistoryItem = {
-    id: 'job-1',
-    title: 'Job 1',
-    meta: 'meta',
-    state: 'completed',
-    taskRef: {
-      workflowId: 'workflow-1',
-      previewOutput: {
-        isImage: true,
-        isVideo: false,
-        url: '/api/view/job-1.png'
-      }
-    }
-  }
-
-  return {
-    useJobList: () => ({
-      selectedJobTab: ref('All'),
-      selectedWorkflowFilter: ref('all'),
-      selectedSortMode: ref('mostRecent'),
-      searchQuery: ref(''),
-      hasFailedJobs: ref(false),
-      filteredTasks: ref([]),
-      groupedJobItems: ref([
-        {
-          key: 'group-1',
-          label: 'Group 1',
-          items: [jobHistoryItem]
-        }
-      ])
-    })
-  }
-})
-
-vi.mock('@/composables/queue/useJobMenu', () => ({
-  useJobMenu: () => ({
-    jobMenuEntries: [],
-    cancelJob: vi.fn()
-  })
-}))
-
-vi.mock('@/composables/queue/useQueueClearHistoryDialog', () => ({
-  useQueueClearHistoryDialog: () => ({
-    showQueueClearHistoryDialog: vi.fn()
-  })
-}))
-
-vi.mock('@/composables/queue/useResultGallery', async () => {
-  const { ref } = await import('vue')
-  return {
-    useResultGallery: () => ({
-      galleryActiveIndex: ref(-1),
-      galleryItems: ref([]),
-      onViewItem: vi.fn()
-    })
-  }
-})
-
-vi.mock('@/composables/useErrorHandling', () => ({
-  useErrorHandling: () => ({
-    wrapWithErrorHandlingAsync: <T extends (...args: never[]) => unknown>(
-      fn: T
-    ) => fn
-  })
-}))
-
-vi.mock('@/stores/commandStore', () => ({
-  useCommandStore: () => ({
-    execute: vi.fn()
-  })
-}))
-
-vi.mock('@/stores/dialogStore', () => ({
-  useDialogStore: () => ({
-    showDialog: vi.fn()
-  })
-}))
-
-vi.mock('@/stores/executionStore', () => ({
-  useExecutionStore: () => ({
-    clearInitializationByJobIds: vi.fn()
-  })
-}))
-
-vi.mock('@/stores/queueStore', () => ({
-  useQueueStore: () => ({
-    runningTasks: [],
-    pendingTasks: [],
-    delete: vi.fn()
-  })
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: { en: {} }
-})
-
-const SidebarTabTemplateStub = {
-  name: 'SidebarTabTemplate',
-  props: ['title'],
-  template:
-    '<div><slot name="alt-title" /><slot name="header" /><slot name="body" /></div>'
-}
-
-function mountComponent() {
-  return mount(JobHistorySidebarTab, {
-    global: {
-      plugins: [i18n],
-      stubs: {
-        SidebarTabTemplate: SidebarTabTemplateStub,
-        JobFilterTabs: true,
-        JobFilterActions: true,
-        JobHistoryActionsMenu: true,
-        JobContextMenu: true,
-        ResultGallery: true,
-        teleport: true,
-        JobDetailsPopover: JobDetailsPopoverStub
-      }
-    }
-  })
-}
-
-afterEach(() => {
-  vi.useRealTimers()
-})
-
-describe('JobHistorySidebarTab', () => {
-  it('shows the job details popover for jobs in the history panel', async () => {
-    vi.useFakeTimers()
-    const wrapper = mountComponent()
-    const jobRow = wrapper.find('[data-job-id="job-1"]')
-
-    await jobRow.trigger('mouseenter')
-    await vi.advanceTimersByTimeAsync(200)
-    await nextTick()
-
-    const popover = wrapper.findComponent(JobDetailsPopoverStub)
-    expect(popover.exists()).toBe(true)
-    expect(popover.props()).toMatchObject({
-      jobId: 'job-1',
-      workflowId: 'workflow-1'
-    })
-  })
-})

src/components/sidebar/tabs/JobHistorySidebarTab.vue

@@ -46,22 +46,25 @@
       </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"
-      />
-      <MediaLightbox
-        v-model:active-index="galleryActiveIndex"
-        :all-gallery-items="galleryItems"
-      />
+      <div class="flex h-full min-h-0 flex-col">
+        <JobAssetsList
+          class="min-h-0 flex-1"
+          :displayed-job-groups="displayedJobGroups"
+          @cancel-item="onCancelItem"
+          @delete-item="onDeleteItem"
+          @view-item="onViewItem"
+          @menu="onMenuItem"
+        />
+        <JobContextMenu
+          ref="jobContextMenuRef"
+          :entries="jobMenuEntries"
+          @action="onJobMenuAction"
+        />
+        <MediaLightbox
+          v-model:active-index="galleryActiveIndex"
+          :all-gallery-items="galleryItems"
+        />
+      </div>
     </template>
   </SidebarTabTemplate>
 </template>