feat: Migrate to Jobs API (PR 2 of 3) (#7170)

## Summary Migrate frontend from legacy `/history`, `/history_v2`, and `/queue` endpoints to the unified `/jobs` API with memory optimization and lazy loading. **This is PR 2 of 3** - Core migration, depends on PR 1. ## Changes - **What**: - Replace `api.getQueue()` and `api.getHistory()` implementations to use Jobs API fetchers - Implement lazy loading for workflow and full outputs via `/jobs/{id}` endpoint in `useJobMenu` - Add `TaskItemImpl` class wrapping `JobListItem` for queue store compatibility - Rename `reconcileHistory` to `reconcileJobs` for clarity - Use `execution_start_time` and `execution_end_time` from API for execution timing - Use `workflowId` from job instead of nested `workflow.id` - Update `useJobMenu` to fetch job details on demand (`openJobWorkflow`, `exportJobWorkflow`) - **Breaking**: Requires backend Jobs API support (ComfyUI with `/jobs` endpoint) ## Review Focus 1. **Lazy loading in `useJobMenu`**: `openJobWorkflow` and `exportJobWorkflow` now fetch from API on demand instead of accessing `taskRef.workflow` 2. **`TaskItemImpl` wrapper**: Adapts `JobListItem` to existing queue store interface 3. **Error reporting**: Uses `execution_error` field from API for rich error dialogs 4. **Memory optimization**: Only fetches full job details when needed ## Files Changed - `src/scripts/api.ts` - Updated `getQueue()` and `getHistory()` to use Jobs API - `src/stores/queueStore.ts` - Added `TaskItemImpl`, updated to use `JobListItem` - `src/composables/useJobMenu.ts` - Lazy loading for workflow access - `src/composables/useJobList.ts` - Updated types - Various test files updated ## Dependencies - **Depends on**: PR 1 (Jobs API Infrastructure) - #7169 ## Next PR - **PR 3**: Remove legacy history code and unused types ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7170-feat-Migrate-to-Jobs-API-PR-2-of-3-2bf6d73d3650811b94f4fbe69944bba6) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Christian Byrne <cbyrne@comfy.org>
2026-04-21 23:09:39 +00:00 · 2026-01-13 19:38:00 -08:00
parent 9b912ff454
commit d27e177d61
44 changed files with 1596 additions and 3066 deletions
--- a/src/components/queue/QueueProgressOverlay.vue
+++ b/src/components/queue/QueueProgressOverlay.vue
@@ -262,7 +262,7 @@ const focusAssetInSidebar = async (item: JobListItem) => {

 const inspectJobAsset = wrapWithErrorHandlingAsync(
  async (item: JobListItem) => {
-    openResultGallery(item)
+    await openResultGallery(item)
    await focusAssetInSidebar(item)
  }
 )
--- a/src/components/queue/job/JobDetailsPopover.stories.ts
+++ b/src/components/queue/job/JobDetailsPopover.stories.ts
@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'

-import type { TaskStatus } from '@/schemas/apiSchema'
+import type {
+  JobListItem,
+  JobStatus
+} from '@/platform/remote/comfyui/jobs/jobTypes'
 import { useExecutionStore } from '@/stores/executionStore'
 import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'

@@ -37,91 +40,86 @@ function resetStores() {
  exec.nodeProgressStatesByPrompt = {}
 }

+function makeTask(
+  id: string,
+  priority: number,
+  fields: Partial<JobListItem> & { status: JobStatus; create_time: number }
+): TaskItemImpl {
+  const job: JobListItem = {
+    id,
+    priority,
+    last_state_update: null,
+    update_time: fields.create_time,
+    ...fields
+  }
+  return new TaskItemImpl(job)
+}
+
 function makePendingTask(
  id: string,
-  index: number,
-  createTimeMs?: number
+  priority: number,
+  createTimeMs: number
 ): TaskItemImpl {
-  const extraData = {
-    client_id: 'c1',
-    ...(typeof createTimeMs === 'number' ? { create_time: createTimeMs } : {})
-  }
-  return new TaskItemImpl('Pending', [index, id, {}, extraData, []])
+  return makeTask(id, priority, {
+    status: 'pending',
+    create_time: createTimeMs
+  })
 }

 function makeRunningTask(
  id: string,
-  index: number,
-  createTimeMs?: number
+  priority: number,
+  createTimeMs: number
 ): TaskItemImpl {
-  const extraData = {
-    client_id: 'c1',
-    ...(typeof createTimeMs === 'number' ? { create_time: createTimeMs } : {})
-  }
-  return new TaskItemImpl('Running', [index, id, {}, extraData, []])
+  return makeTask(id, priority, {
+    status: 'in_progress',
+    create_time: createTimeMs
+  })
 }

 function makeRunningTaskWithStart(
  id: string,
-  index: number,
+  priority: number,
  startedSecondsAgo: number
 ): TaskItemImpl {
  const start = Date.now() - startedSecondsAgo * 1000
-  const status: TaskStatus = {
-    status_str: 'success',
-    completed: false,
-    messages: [['execution_start', { prompt_id: id, timestamp: start } as any]]
-  }
-  return new TaskItemImpl(
-    'Running',
-    [index, id, {}, { client_id: 'c1', create_time: start - 5000 }, []],
-    status
-  )
+  return makeTask(id, priority, {
+    status: 'in_progress',
+    create_time: start - 5000,
+    update_time: start
+  })
 }

 function makeHistoryTask(
  id: string,
-  index: number,
+  priority: number,
  durationSec: number,
  ok: boolean,
  errorMessage?: string
 ): TaskItemImpl {
-  const start = Date.now() - durationSec * 1000 - 1000
-  const end = start + durationSec * 1000
-  const messages: TaskStatus['messages'] = ok
-    ? [
-        ['execution_start', { prompt_id: id, timestamp: start } as any],
-        ['execution_success', { prompt_id: id, timestamp: end } as any]
-      ]
-    : [
-        ['execution_start', { prompt_id: id, timestamp: start } as any],
-        [
-          'execution_error',
-          {
-            prompt_id: id,
-            timestamp: end,
-            node_id: '1',
-            node_type: 'Node',
-            executed: [],
-            exception_message:
-              errorMessage || 'Demo error: Node failed during execution',
-            exception_type: 'RuntimeError',
-            traceback: [],
-            current_inputs: {},
-            current_outputs: {}
-          } as any
-        ]
-      ]
-  const status: TaskStatus = {
-    status_str: ok ? 'success' : 'error',
-    completed: true,
-    messages
-  }
-  return new TaskItemImpl(
-    'History',
-    [index, id, {}, { client_id: 'c1', create_time: start }, []],
-    status
-  )
+  const now = Date.now()
+  const executionEndTime = now
+  const executionStartTime = now - durationSec * 1000
+  return makeTask(id, priority, {
+    status: ok ? 'completed' : 'failed',
+    create_time: executionStartTime - 5000,
+    update_time: now,
+    execution_start_time: executionStartTime,
+    execution_end_time: executionEndTime,
+    execution_error: errorMessage
+      ? {
+          prompt_id: id,
+          timestamp: now,
+          node_id: '1',
+          node_type: 'ExampleNode',
+          exception_message: errorMessage,
+          exception_type: 'RuntimeError',
+          traceback: [],
+          current_inputs: {},
+          current_outputs: {}
+        }
+      : undefined
+  })
 }

 export const Queued: Story = {
@@ -140,8 +138,12 @@ export const Queued: Story = {
        makePendingTask(jobId, queueIndex, Date.now() - 90_000)
      ]
      // Add some other pending jobs to give context
-      queue.pendingTasks.push(makePendingTask('job-older-1', 100))
-      queue.pendingTasks.push(makePendingTask('job-older-2', 101))
+      queue.pendingTasks.push(
+        makePendingTask('job-older-1', 100, Date.now() - 60_000)
+      )
+      queue.pendingTasks.push(
+        makePendingTask('job-older-2', 101, Date.now() - 30_000)
+      )

      // Queued at (in metadata on prompt[4])

--- a/src/components/queue/job/JobGroupsList.vue
+++ b/src/components/queue/job/JobGroupsList.vue
@@ -12,7 +12,7 @@
        v-for="ji in group.items"
        :key="ji.id"
        :job-id="ji.id"
-        :workflow-id="ji.taskRef?.workflow?.id"
+        :workflow-id="ji.taskRef?.workflowId"
        :state="ji.state"
        :title="ji.title"
        :right-text="ji.meta"
--- a/src/components/queue/job/useJobErrorReporting.test.ts
+++ b/src/components/queue/job/useJobErrorReporting.test.ts
@@ -2,64 +2,43 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, ref } from 'vue'
 import type { ComputedRef } from 'vue'

-import type { ExecutionErrorWsMessage, TaskStatus } from '@/schemas/apiSchema'
-import { TaskItemImpl } from '@/stores/queueStore'
+import type { TaskItemImpl } from '@/stores/queueStore'
 import type { JobErrorDialogService } from '@/components/queue/job/useJobErrorReporting'
 import { useJobErrorReporting } from '@/components/queue/job/useJobErrorReporting'
+import type { ExecutionError } from '@/platform/remote/comfyui/jobs/jobTypes'

-const createExecutionErrorMessage = (
-  overrides: Partial<ExecutionErrorWsMessage> = {}
-): ExecutionErrorWsMessage => ({
-  prompt_id: 'prompt',
-  timestamp: 100,
-  node_id: 'node-1',
-  node_type: 'KSampler',
-  executed: [],
-  exception_message: 'default failure',
-  exception_type: 'RuntimeError',
-  traceback: ['Trace line'],
-  current_inputs: {},
-  current_outputs: {},
-  ...overrides
-})
-
-/**
- * Creates a real TaskItemImpl with the given status messages.
- * Uses the actual TaskItemImpl class to test the real errorMessage/executionError getters.
- */
-function createTaskWithMessages(
-  messages: TaskStatus['messages'] = []
-): TaskItemImpl {
-  const status: TaskStatus = {
-    status_str: 'error',
-    completed: false,
-    messages
-  }
-  return new TaskItemImpl(
-    'History',
-    [0, 'test-prompt-id', {}, { client_id: 'test-client' }, []],
-    status
-  )
-}
+const createTaskWithError = (
+  promptId: string,
+  errorMessage?: string,
+  executionError?: ExecutionError,
+  createTime?: number
+): TaskItemImpl =>
+  ({
+    promptId,
+    errorMessage,
+    executionError,
+    createTime: createTime ?? Date.now()
+  }) as unknown as TaskItemImpl

 describe('useJobErrorReporting', () => {
  let taskState = ref<TaskItemImpl | null>(null)
  let taskForJob: ComputedRef<TaskItemImpl | null>
  let copyToClipboard: ReturnType<typeof vi.fn>
-  let showExecutionErrorDialog: ReturnType<typeof vi.fn>
  let showErrorDialog: ReturnType<typeof vi.fn>
+  let showExecutionErrorDialog: ReturnType<typeof vi.fn>
  let dialog: JobErrorDialogService
  let composable: ReturnType<typeof useJobErrorReporting>

  beforeEach(() => {
+    vi.clearAllMocks()
    taskState = ref<TaskItemImpl | null>(null)
    taskForJob = computed(() => taskState.value)
    copyToClipboard = vi.fn()
-    showExecutionErrorDialog = vi.fn()
    showErrorDialog = vi.fn()
+    showExecutionErrorDialog = vi.fn()
    dialog = {
-      showExecutionErrorDialog,
-      showErrorDialog
+      showErrorDialog,
+      showExecutionErrorDialog
    } as unknown as JobErrorDialogService
    composable = useJobErrorReporting({
      taskForJob,
@@ -75,81 +54,112 @@ describe('useJobErrorReporting', () => {
  })

  it('exposes a computed message that reflects the current task error', () => {
-    taskState.value = createTaskWithMessages([
-      [
-        'execution_error',
-        createExecutionErrorMessage({ exception_message: 'First failure' })
-      ]
-    ])
+    taskState.value = createTaskWithError('job-1', 'First failure')
    expect(composable.errorMessageValue.value).toBe('First failure')

-    taskState.value = createTaskWithMessages([
-      [
-        'execution_error',
-        createExecutionErrorMessage({ exception_message: 'Second failure' })
-      ]
-    ])
+    taskState.value = createTaskWithError('job-2', 'Second failure')
    expect(composable.errorMessageValue.value).toBe('Second failure')
  })

-  it('returns empty string when task has no error', () => {
-    taskState.value = null
+  it('returns empty string when no error message', () => {
+    taskState.value = createTaskWithError('job-1')
    expect(composable.errorMessageValue.value).toBe('')
+  })

-    taskState.value = createTaskWithMessages([])
+  it('returns empty string when task is null', () => {
+    taskState.value = null
    expect(composable.errorMessageValue.value).toBe('')
  })

  it('only calls the copy handler when a message exists', () => {
-    taskState.value = createTaskWithMessages([
-      [
-        'execution_error',
-        createExecutionErrorMessage({ exception_message: 'Clipboard failure' })
-      ]
-    ])
+    taskState.value = createTaskWithError('job-1', 'Clipboard failure')
    composable.copyErrorMessage()
    expect(copyToClipboard).toHaveBeenCalledTimes(1)
    expect(copyToClipboard).toHaveBeenCalledWith('Clipboard failure')

    copyToClipboard.mockClear()
-    taskState.value = createTaskWithMessages([])
+    taskState.value = createTaskWithError('job-2')
    composable.copyErrorMessage()
    expect(copyToClipboard).not.toHaveBeenCalled()
  })

-  it('prefers the detailed execution dialog when detail is available', () => {
-    const detail = createExecutionErrorMessage({
-      exception_message: 'Detailed failure'
-    })
-    taskState.value = createTaskWithMessages([['execution_error', detail]])
+  it('shows simple error dialog when only errorMessage present', () => {
+    taskState.value = createTaskWithError('job-1', 'Queue job error')
    composable.reportJobError()
-    expect(showExecutionErrorDialog).toHaveBeenCalledTimes(1)
-    expect(showExecutionErrorDialog).toHaveBeenCalledWith(detail)
-    expect(showErrorDialog).not.toHaveBeenCalled()
-  })

-  it('shows a fallback dialog when only a message is available', () => {
-    const message = 'Queue job error'
-    taskState.value = createTaskWithMessages([])
-    const valueSpy = vi
-      .spyOn(composable.errorMessageValue, 'value', 'get')
-      .mockReturnValue(message)
-
-    expect(composable.errorMessageValue.value).toBe(message)
-    composable.reportJobError()
-    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
    expect(showErrorDialog).toHaveBeenCalledTimes(1)
    const [errorArg, optionsArg] = showErrorDialog.mock.calls[0]
    expect(errorArg).toBeInstanceOf(Error)
-    expect(errorArg.message).toBe(message)
+    expect(errorArg.message).toBe('Queue job error')
    expect(optionsArg).toEqual({ reportType: 'queueJobError' })
-    valueSpy.mockRestore()
+    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
  })

-  it('does nothing when no error could be extracted', () => {
-    taskState.value = createTaskWithMessages([])
+  it('does nothing when no task exists', () => {
+    taskState.value = null
    composable.reportJobError()
+    expect(showErrorDialog).not.toHaveBeenCalled()
    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
+  })
+
+  it('shows rich error dialog when execution_error available on task', () => {
+    const executionError: ExecutionError = {
+      prompt_id: 'job-1',
+      timestamp: 12345,
+      node_id: '5',
+      node_type: 'KSampler',
+      executed: ['1', '2'],
+      exception_message: 'CUDA out of memory',
+      exception_type: 'RuntimeError',
+      traceback: ['line 1', 'line 2'],
+      current_inputs: {},
+      current_outputs: {}
+    }
+    taskState.value = createTaskWithError(
+      'job-1',
+      'CUDA out of memory',
+      executionError,
+      12345
+    )
+
+    composable.reportJobError()
+
+    expect(showExecutionErrorDialog).toHaveBeenCalledTimes(1)
+    expect(showExecutionErrorDialog).toHaveBeenCalledWith(executionError)
    expect(showErrorDialog).not.toHaveBeenCalled()
  })
+
+  it('passes execution_error directly to dialog', () => {
+    const executionError: ExecutionError = {
+      prompt_id: 'job-1',
+      timestamp: 12345,
+      node_id: '5',
+      node_type: 'KSampler',
+      exception_message: 'Error',
+      exception_type: 'RuntimeError',
+      traceback: ['line 1'],
+      current_inputs: {},
+      current_outputs: {}
+    }
+    taskState.value = createTaskWithError(
+      'job-1',
+      'Error',
+      executionError,
+      12345
+    )
+
+    composable.reportJobError()
+
+    expect(showExecutionErrorDialog).toHaveBeenCalledTimes(1)
+    expect(showExecutionErrorDialog).toHaveBeenCalledWith(executionError)
+  })
+
+  it('does nothing when no error message and no execution_error', () => {
+    taskState.value = createTaskWithError('job-1')
+
+    composable.reportJobError()
+
+    expect(showErrorDialog).not.toHaveBeenCalled()
+    expect(showExecutionErrorDialog).not.toHaveBeenCalled()
+  })
 })
--- a/src/components/queue/job/useJobErrorReporting.ts
+++ b/src/components/queue/job/useJobErrorReporting.ts
@@ -28,9 +28,7 @@ export const useJobErrorReporting = ({
  copyToClipboard,
  dialog
 }: UseJobErrorReportingOptions) => {
-  const errorMessageValue = computed(() => {
-    return taskForJob.value?.executionError?.exception_message ?? ''
-  })
+  const errorMessageValue = computed(() => taskForJob.value?.errorMessage ?? '')

  const copyErrorMessage = () => {
    if (errorMessageValue.value) {
@@ -44,6 +42,7 @@ export const useJobErrorReporting = ({
      dialog.showExecutionErrorDialog(executionError)
      return
    }
+
    if (errorMessageValue.value) {
      dialog.showErrorDialog(new Error(errorMessageValue.value), {
        reportType: 'queueJobError'
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -52,37 +52,13 @@
        class="pb-1 px-2 2xl:px-4"
        :show-generation-time-sort="activeTab === 'output'"
      />
-      <div
-        v-if="isQueuePanelV2Enabled"
-        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 v-if="showLoadingState">
+      <div v-if="loading && !displayAssets.length">
        <ProgressSpinner class="absolute left-1/2 w-[50px] -translate-x-1/2" />
      </div>
-      <div v-else-if="showEmptyState">
+      <div v-else-if="!loading && !displayAssets.length">
        <NoResultsPlaceholder
          icon="pi pi-info-circle"
          :title="
@@ -96,15 +72,7 @@
        />
      </div>
      <div v-else class="relative size-full" @click="handleEmptySpaceClick">
-        <AssetsSidebarListView
-          v-if="isListView"
-          :assets="displayAssets"
-          :is-selected="isSelected"
-          @select-asset="handleAssetSelect"
-          @approach-end="handleApproachEnd"
-        />
        <VirtualGrid
-          v-else
          :items="mediaAssetsWithKey"
          :grid-style="{
            display: 'grid',
@@ -122,15 +90,11 @@
              :output-count="getOutputCount(item)"
              :show-delete-button="shouldShowDeleteButton"
              :open-context-menu-id="openContextMenuId"
-              :selected-assets="getSelectedAssets(displayAssets)"
-              :has-selection="hasSelection"
              @click="handleAssetSelect(item)"
              @zoom="handleZoomClick(item)"
              @output-count-click="enterFolderView(item)"
              @asset-deleted="refreshAssets"
              @context-menu-opened="openContextMenuId = item.id"
-              @bulk-download="handleBulkDownload"
-              @bulk-delete="handleBulkDelete"
            />
          </template>
        </VirtualGrid>
@@ -146,6 +110,7 @@
          <div ref="selectionCountButtonRef" class="inline-flex w-48">
            <Button
              variant="secondary"
+              size="lg"
              :class="cn(isCompact && 'text-left')"
              @click="handleDeselectAll"
            >
@@ -200,7 +165,7 @@

 <script setup lang="ts">
 import { useDebounceFn, useElementHover, useResizeObserver } from '@vueuse/core'
-import Divider from 'primevue/divider'
+import { Divider } from 'primevue'
 import ProgressSpinner from 'primevue/progressspinner'
 import { useToast } from 'primevue/usetoast'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
@@ -209,7 +174,6 @@ import { useI18n } from 'vue-i18n'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import Load3dViewerContent from '@/components/load3d/Load3dViewerContent.vue'
-import AssetsSidebarListView from '@/components/sidebar/tabs/AssetsSidebarListView.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
 import Tab from '@/components/tab/Tab.vue'
@@ -224,29 +188,19 @@ import { useMediaAssetFiltering } from '@/platform/assets/composables/useMediaAs
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { isCloud } from '@/platform/distribution/types'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useCommandStore } from '@/stores/commandStore'
+import { getJobDetail } from '@/services/jobOutputCache'
 import { useDialogStore } from '@/stores/dialogStore'
-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 settingStore = useSettingStore()
+const { t } = useI18n()

 const activeTab = ref<'input' | 'output'>('output')
+const viewMode = ref<'list' | 'grid'>('grid')
 const folderPromptId = ref<string | null>(null)
 const folderExecutionTime = ref<number | undefined>(undefined)
 const isInFolderView = computed(() => folderPromptId.value !== null)
-const viewMode = ref<'list' | 'grid'>('grid')
-const isQueuePanelV2Enabled = computed(() =>
-  settingStore.get('Comfy.Queue.QPOV2')
-)
-const isListView = computed(
-  () => isQueuePanelV2Enabled.value && viewMode.value === 'list'
-)

 // Track which asset's context menu is open (for single-instance context menu management)
 const openContextMenuId = ref<string | null>(null)
@@ -258,6 +212,11 @@ const shouldShowDeleteButton = computed(() => {
  return true
 })

+const getOutputCount = (item: AssetItem): number => {
+  const count = item.user_metadata?.outputCount
+  return typeof count === 'number' && count > 0 ? count : 1
+}
+
 const shouldShowOutputCount = (item: AssetItem): boolean => {
  if (activeTab.value !== 'output' || isInFolderView.value) {
    return false
@@ -270,19 +229,6 @@ const formattedExecutionTime = computed(() => {
  return formatDuration(folderExecutionTime.value * 1000)
 })

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

 const inputAssets = useMediaAssets('input')
@@ -295,8 +241,6 @@ const {
  hasSelection,
  clearSelection,
  getSelectedAssets,
-  getOutputCount,
-  getTotalOutputCount,
  activate: activateSelection,
  deactivate: deactivateSelection
 } = useAssetSelection()
@@ -328,7 +272,7 @@ const isHoveringSelectionCount = useElementHover(selectionCountButtonRef)
 // Total output count for all selected assets
 const totalOutputCount = computed(() => {
  const selectedAssets = getSelectedAssets(displayAssets.value)
-  return getTotalOutputCount(selectedAssets)
+  return selectedAssets.reduce((sum, asset) => sum + getOutputCount(asset), 0)
 })

 const currentAssets = computed(() =>
@@ -359,20 +303,6 @@ const displayAssets = computed(() => {
  return filteredAssets.value
 })

-const showLoadingState = computed(
-  () =>
-    loading.value &&
-    displayAssets.value.length === 0 &&
-    (!isListView.value || activeJobsCount.value === 0)
-)
-
-const showEmptyState = computed(
-  () =>
-    !loading.value &&
-    displayAssets.value.length === 0 &&
-    (!isListView.value || activeJobsCount.value === 0)
-)
-
 watch(displayAssets, (newAssets) => {
  if (currentGalleryAssetId.value && galleryActiveIndex.value !== -1) {
    const newIndex = newAssets.findIndex(
@@ -471,16 +401,16 @@ const handleZoomClick = (asset: AssetItem) => {
  }
 }

-const enterFolderView = (asset: AssetItem) => {
+const enterFolderView = async (asset: AssetItem) => {
  const metadata = getOutputAssetMetadata(asset.user_metadata)
  if (!metadata) {
    console.warn('Invalid output asset metadata')
    return
  }

-  const { promptId, allOutputs, executionTimeInSeconds } = metadata
+  const { promptId, allOutputs, executionTimeInSeconds, outputCount } = metadata

-  if (!promptId || !Array.isArray(allOutputs) || allOutputs.length === 0) {
+  if (!promptId) {
    console.warn('Missing required folder view data')
    return
  }
@@ -488,7 +418,49 @@ const enterFolderView = (asset: AssetItem) => {
  folderPromptId.value = promptId
  folderExecutionTime.value = executionTimeInSeconds

-  folderAssets.value = allOutputs.map((output) => ({
+  // Determine which outputs to display
+  let outputsToDisplay = allOutputs ?? []
+
+  // If outputCount indicates more outputs than we have, fetch full outputs
+  const needsFullOutputs =
+    typeof outputCount === 'number' &&
+    outputCount > 1 &&
+    outputsToDisplay.length < outputCount
+
+  if (needsFullOutputs) {
+    const jobDetail = await getJobDetail(promptId)
+    if (jobDetail?.outputs) {
+      // Convert job outputs to ResultItemImpl array
+      outputsToDisplay = Object.entries(jobDetail.outputs).flatMap(
+        ([nodeId, nodeOutputs]) =>
+          Object.entries(nodeOutputs).flatMap(([mediaType, items]) =>
+            (
+              items as Array<{
+                filename: string
+                subfolder: string
+                type: string
+              }>
+            )
+              .map(
+                (item) =>
+                  new ResultItemImpl({
+                    ...item,
+                    nodeId,
+                    mediaType
+                  })
+              )
+              .filter((r) => r.supportsPreview)
+          )
+      )
+    }
+  }
+
+  if (outputsToDisplay.length === 0) {
+    console.warn('No outputs available for folder view')
+    return
+  }
+
+  folderAssets.value = outputsToDisplay.map((output) => ({
    id: `${output.nodeId}-${output.filename}`,
    name: output.filename,
    size: 0,
@@ -563,20 +535,6 @@ const handleDeleteSelected = async () => {
  clearSelection()
 }

-const handleBulkDownload = (assets: AssetItem[]) => {
-  downloadMultipleAssets(assets)
-  clearSelection()
-}
-
-const handleBulkDelete = async (assets: AssetItem[]) => {
-  await deleteMultipleAssets(assets)
-  clearSelection()
-}
-
-const handleClearQueue = async () => {
-  await commandStore.execute('Comfy.ClearPendingTasks')
-}
-
 const handleApproachEnd = useDebounceFn(async () => {
  if (
    activeTab.value === 'output' &&