[QPOv2] Add list view to assets sidepanel (#7737)

This adds the list view to the media assets sidepanel, while also adding
the active jobs to be displayed right now.

The design for this is actually changing, which is why it is in draft
right now. There are technical limitations of the virtual grid that
doesn't make it easy for both the active jobs and generated assets to
exist on the same container. Currently WIP right now.


Part of the QPO v2 iteration, figma design can be found
[here](https://www.figma.com/design/LVilZgHGk5RwWOkVN6yCEK/Queue-Progress-Modal?node-id=3330-37286&m=dev).
This will be implemented in a series of stacked PRs that can be reviewed
and merged individually.

main <-- #7737, #7743, #7745

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7737-QPOv2-Add-list-view-to-assets-sidepanel-2d26d73d365081858e22c48902bd56e2)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>

src/components/queue/job/QueueJobItem.vue

@@ -50,20 +50,22 @@
       <div
         v-if="
           props.state === 'running' &&
-          (props.progressTotalPercent !== undefined ||
-            props.progressCurrentPercent !== undefined)
+          hasAnyProgressPercent(
+            props.progressTotalPercent,
+            props.progressCurrentPercent
+          )
         "
-        class="absolute inset-0"
+        :class="progressBarContainerClass"
       >
         <div
-          v-if="props.progressTotalPercent !== undefined"
-          class="pointer-events-none absolute inset-y-0 left-0 h-full bg-interface-panel-job-progress-primary transition-[width]"
-          :style="{ width: `${props.progressTotalPercent}%` }"
+          v-if="hasProgressPercent(props.progressTotalPercent)"
+          :class="progressBarPrimaryClass"
+          :style="progressPercentStyle(props.progressTotalPercent)"
         />
         <div
-          v-if="props.progressCurrentPercent !== undefined"
-          class="pointer-events-none absolute inset-y-0 left-0 h-full bg-interface-panel-job-progress-secondary transition-[width]"
-          :style="{ width: `${props.progressCurrentPercent}%` }"
+          v-if="hasProgressPercent(props.progressCurrentPercent)"
+          :class="progressBarSecondaryClass"
+          :style="progressPercentStyle(props.progressCurrentPercent)"
         />
       </div>
 
@@ -201,6 +203,7 @@ import { useI18n } from 'vue-i18n'
 import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
 import QueueAssetPreview from '@/components/queue/job/QueueAssetPreview.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { useProgressBarBackground } from '@/composables/useProgressBarBackground'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import type { JobState } from '@/types/queue'
 import { iconForJobState } from '@/utils/queueDisplay'
@@ -245,6 +248,14 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+const {
+  progressBarContainerClass,
+  progressBarPrimaryClass,
+  progressBarSecondaryClass,
+  hasProgressPercent,
+  hasAnyProgressPercent,
+  progressPercentStyle
+} = useProgressBarBackground()
 
 const cancelTooltipConfig = computed(() => buildTooltipConfig(t('g.cancel')))
 const deleteTooltipConfig = computed(() => buildTooltipConfig(t('g.delete')))

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="flex h-full flex-col">
+    <div
+      v-if="activeJobItems.length"
+      class="flex max-h-[50%] 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="assets.length"
+      :class="cn('px-2', activeJobItems.length && 'mt-2')"
+    >
+      <div
+        class="flex items-center py-2 text-sm font-normal leading-normal text-muted-foreground font-inter"
+      >
+        {{ t('sideToolbar.generatedAssetsHeader') }}
+      </div>
+    </div>
+
+    <VirtualGrid
+      class="flex-1"
+      :items="assetItems"
+      :grid-style="listGridStyle"
+      @approach-end="emit('approach-end')"
+    >
+      <template #item="{ item }">
+        <AssetsListItem
+          role="button"
+          tabindex="0"
+          :aria-label="
+            t('assetBrowser.ariaLabel.assetCard', {
+              name: item.asset.name,
+              type: getMediaTypeFromFilename(item.asset.name)
+            })
+          "
+          :class="getAssetCardClass(isSelected(item.asset.id))"
+          :preview-url="item.asset.preview_url"
+          :preview-alt="item.asset.name"
+          :icon-name="
+            iconForMediaType(getMediaTypeFromFilename(item.asset.name))
+          "
+          :primary-text="getAssetPrimaryText(item.asset)"
+          :secondary-text="getAssetSecondaryText(item.asset)"
+          @click.stop="emit('select-asset', item.asset)"
+        />
+      </template>
+    </VirtualGrid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+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 { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { iconForMediaType } from '@/platform/assets/utils/mediaIconUtil'
+import type { JobState } from '@/types/queue'
+import {
+  formatDuration,
+  formatSize,
+  getMediaTypeFromFilename,
+  truncateFilename
+} from '@/utils/formatUtil'
+import { iconForJobState } from '@/utils/queueDisplay'
+import { cn } from '@/utils/tailwindUtil'
+
+const { assets, isSelected } = defineProps<{
+  assets: AssetItem[]
+  isSelected: (assetId: string) => boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'select-asset', asset: AssetItem): void
+  (e: 'approach-end'): void
+}>()
+
+const { t } = useI18n()
+const { jobItems } = useJobList()
+const hoveredJobId = ref<string | null>(null)
+
+type AssetListItem = { key: string; asset: AssetItem }
+
+const activeJobItems = computed(() =>
+  jobItems.value.filter((item) => isActiveJobState(item.state))
+)
+const hoveredJob = computed(() =>
+  hoveredJobId.value
+    ? (activeJobItems.value.find((job) => job.id === hoveredJobId.value) ??
+      null)
+    : null
+)
+const { cancelAction, canCancelJob, runCancelJob } = useJobActions(hoveredJob)
+
+const assetItems = computed<AssetListItem[]>(() =>
+  assets.map((asset) => ({
+    key: `asset-${asset.id}`,
+    asset
+  }))
+)
+
+const listGridStyle = {
+  display: 'grid',
+  gridTemplateColumns: 'minmax(0, 1fr)',
+  padding: '0 0.5rem',
+  gap: '0.5rem'
+}
+
+function isActiveJobState(state: JobState): boolean {
+  return (
+    state === 'pending' || state === 'initialization' || state === 'running'
+  )
+}
+
+function getAssetPrimaryText(asset: AssetItem): string {
+  return truncateFilename(asset.name)
+}
+
+function getAssetSecondaryText(asset: AssetItem): string {
+  const metadata = getOutputAssetMetadata(asset.user_metadata)
+  if (typeof metadata?.executionTimeInSeconds === 'number') {
+    return `${metadata.executionTimeInSeconds.toFixed(2)}s`
+  }
+
+  const duration = asset.user_metadata?.duration
+  if (typeof duration === 'number') {
+    return formatDuration(duration)
+  }
+
+  if (typeof asset.size === 'number') {
+    return formatSize(asset.size)
+  }
+
+  return ''
+}
+
+function getAssetCardClass(selected: boolean): string {
+  return cn(
+    'w-full text-text-primary transition-colors hover:bg-secondary-background-hover',
+    'cursor-pointer',
+    selected &&
+      'bg-secondary-background-hover ring-1 ring-inset ring-modal-card-border-highlighted'
+  )
+}
+
+function onJobEnter(jobId: string) {
+  hoveredJobId.value = jobId
+}
+
+function onJobLeave(jobId: string) {
+  if (hoveredJobId.value === jobId) {
+    hoveredJobId.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>

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -79,10 +79,10 @@
       <Divider v-else type="dashed" class="my-2" />
     </template>
     <template #body>
-      <div v-if="loading && !displayAssets.length">
+      <div v-if="showLoadingState">
         <ProgressSpinner class="absolute left-1/2 w-[50px] -translate-x-1/2" />
       </div>
-      <div v-else-if="!loading && !displayAssets.length">
+      <div v-else-if="showEmptyState">
         <NoResultsPlaceholder
           icon="pi pi-info-circle"
           :title="
@@ -96,7 +96,15 @@
         />
       </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',
@@ -201,6 +209,7 @@ 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'
@@ -235,6 +244,9 @@ 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)
@@ -347,6 +359,20 @@ 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(

src/composables/queue/useJobActions.ts

@@ -0,0 +1,59 @@
+import { computed, toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import type { JobListItem } from '@/composables/queue/useJobList'
+import { useJobMenu } from '@/composables/queue/useJobMenu'
+import type { JobState } from '@/types/queue'
+
+type JobAction = {
+  icon: string
+  label: string
+  variant: 'destructive' | 'secondary' | 'textonly'
+}
+
+export function useJobActions(
+  job: MaybeRefOrGetter<JobListItem | null | undefined>
+) {
+  const { t } = useI18n()
+  const { wrapWithErrorHandlingAsync } = useErrorHandling()
+  const { cancelJob } = useJobMenu()
+
+  const cancelAction: JobAction = {
+    icon: 'icon-[lucide--x]',
+    label: t('sideToolbar.queueProgressOverlay.cancelJobTooltip'),
+    variant: 'destructive'
+  }
+
+  const cancellableStates: JobState[] = ['pending', 'initialization', 'running']
+
+  const jobRef = computed(() => toValue(job) ?? null)
+
+  const canCancelJob = computed(() => {
+    const currentJob = jobRef.value
+    if (!currentJob) {
+      return false
+    }
+
+    return (
+      currentJob.showClear !== false &&
+      cancellableStates.includes(currentJob.state)
+    )
+  })
+
+  const runCancelJob = wrapWithErrorHandlingAsync(async () => {
+    const currentJob = jobRef.value
+    if (!currentJob) {
+      return
+    }
+
+    await cancelJob(currentJob)
+  })
+
+  return {
+    cancelAction,
+    canCancelJob,
+    runCancelJob
+  }
+}

src/composables/queue/useJobMenu.ts

@@ -41,7 +41,7 @@ export type MenuEntry =
  * @param onInspectAsset Callback to trigger when inspecting a completed job's asset
  */
 export function useJobMenu(
-  currentMenuItem: () => JobListItem | null,
+  currentMenuItem: () => JobListItem | null = () => null,
   onInspectAsset?: (item: JobListItem) => void
 ) {
   const workflowStore = useWorkflowStore()
@@ -52,37 +52,40 @@ export function useJobMenu(
   const nodeDefStore = useNodeDefStore()
   const mediaAssetActions = useMediaAssetActions()
 
-  const openJobWorkflow = async () => {
-    const item = currentMenuItem()
-    if (!item) return
-    const data = item.taskRef?.workflow
+  const resolveItem = (item?: JobListItem | null): JobListItem | null =>
+    item ?? currentMenuItem()
+
+  const openJobWorkflow = async (item?: JobListItem | null) => {
+    const target = resolveItem(item)
+    if (!target) return
+    const data = target.taskRef?.workflow
     if (!data) return
-    const filename = `Job ${item.id}.json`
+    const filename = `Job ${target.id}.json`
     const temp = workflowStore.createTemporary(filename, data)
     await workflowService.openWorkflow(temp)
   }
 
-  const copyJobId = async () => {
-    const item = currentMenuItem()
-    if (!item) return
-    await copyToClipboard(item.id)
+  const copyJobId = async (item?: JobListItem | null) => {
+    const target = resolveItem(item)
+    if (!target) return
+    await copyToClipboard(target.id)
   }
 
-  const cancelJob = async () => {
-    const item = currentMenuItem()
-    if (!item) return
-    if (item.state === 'running' || item.state === 'initialization') {
-      await api.interrupt(item.id)
-    } else if (item.state === 'pending') {
-      await api.deleteItem('queue', item.id)
+  const cancelJob = async (item?: JobListItem | null) => {
+    const target = resolveItem(item)
+    if (!target) return
+    if (target.state === 'running' || target.state === 'initialization') {
+      await api.interrupt(target.id)
+    } else if (target.state === 'pending') {
+      await api.deleteItem('queue', target.id)
     }
     await queueStore.update()
   }
 
-  const copyErrorMessage = async () => {
-    const item = currentMenuItem()
-    if (!item) return
-    const msgs = item.taskRef?.status?.messages as any[] | undefined
+  const copyErrorMessage = async (item?: JobListItem | null) => {
+    const target = resolveItem(item)
+    if (!target) return
+    const msgs = target.taskRef?.status?.messages as any[] | undefined
     const err = msgs?.find((m: any) => m?.[0] === 'execution_error')?.[1] as
       | ExecutionErrorWsMessage
       | undefined
@@ -90,10 +93,10 @@ export function useJobMenu(
     if (message) await copyToClipboard(String(message))
   }
 
-  const reportError = () => {
-    const item = currentMenuItem()
-    if (!item) return
-    const msgs = item.taskRef?.status?.messages as any[] | undefined
+  const reportError = (item?: JobListItem | null) => {
+    const target = resolveItem(item)
+    if (!target) return
+    const msgs = target.taskRef?.status?.messages as any[] | undefined
     const err = msgs?.find((m: any) => m?.[0] === 'execution_error')?.[1] as
       | ExecutionErrorWsMessage
       | undefined
@@ -102,10 +105,10 @@ export function useJobMenu(
 
   // This is very magical only because it matches the respective backend implementation
   // There is or will be a better way to do this
-  const addOutputLoaderNode = async () => {
-    const item = currentMenuItem()
-    if (!item) return
-    const result: ResultItemImpl | undefined = item.taskRef?.previewOutput
+  const addOutputLoaderNode = async (item?: JobListItem | null) => {
+    const target = resolveItem(item)
+    if (!target) return
+    const result: ResultItemImpl | undefined = target.taskRef?.previewOutput
     if (!result) return
 
     let nodeType: 'LoadImage' | 'LoadVideo' | 'LoadAudio' | null = null
@@ -153,10 +156,10 @@ export function useJobMenu(
   /**
    * Trigger a download of the job's previewable output asset.
    */
-  const downloadPreviewAsset = () => {
-    const item = currentMenuItem()
-    if (!item) return
-    const result: ResultItemImpl | undefined = item.taskRef?.previewOutput
+  const downloadPreviewAsset = (item?: JobListItem | null) => {
+    const target = resolveItem(item)
+    if (!target) return
+    const result: ResultItemImpl | undefined = target.taskRef?.previewOutput
     if (!result) return
     downloadFile(result.url)
   }
@@ -164,14 +167,14 @@ export function useJobMenu(
   /**
    * Export the workflow JSON attached to the job.
    */
-  const exportJobWorkflow = async () => {
-    const item = currentMenuItem()
-    if (!item) return
-    const data = item.taskRef?.workflow
+  const exportJobWorkflow = async (item?: JobListItem | null) => {
+    const target = resolveItem(item)
+    if (!target) return
+    const data = target.taskRef?.workflow
     if (!data) return
 
     const settingStore = useSettingStore()
-    let filename = `Job ${item.id}.json`
+    let filename = `Job ${target.id}.json`
 
     if (settingStore.get('Comfy.PromptFilename')) {
       const input = await useDialogService().prompt({
@@ -188,10 +191,10 @@ export function useJobMenu(
     downloadBlob(filename, blob)
   }
 
-  const deleteJobAsset = async () => {
-    const item = currentMenuItem()
-    if (!item) return
-    const task = item.taskRef as TaskItemImpl | undefined
+  const deleteJobAsset = async (item?: JobListItem | null) => {
+    const target = resolveItem(item)
+    if (!target) return
+    const task = target.taskRef as TaskItemImpl | undefined
     const preview = task?.previewOutput
     if (!task || !preview) return
 
@@ -202,8 +205,8 @@ export function useJobMenu(
     }
   }
 
-  const removeFailedJob = async () => {
-    const task = currentMenuItem()?.taskRef as TaskItemImpl | undefined
+  const removeFailedJob = async (item?: JobListItem | null) => {
+    const task = resolveItem(item)?.taskRef as TaskItemImpl | undefined
     if (!task) return
     await queueStore.delete(task)
   }
@@ -234,8 +237,8 @@ export function useJobMenu(
           icon: 'icon-[lucide--zoom-in]',
           onClick: onInspectAsset
             ? () => {
-                const item = currentMenuItem()
-                if (item) onInspectAsset(item)
+                const current = resolveItem()
+                if (current) onInspectAsset(current)
               }
             : undefined
         },
@@ -246,33 +249,33 @@ export function useJobMenu(
             'Add to current workflow'
           ),
           icon: 'icon-[comfy--node]',
-          onClick: addOutputLoaderNode
+          onClick: () => addOutputLoaderNode(resolveItem())
         },
         {
           key: 'download',
           label: st('queue.jobMenu.download', 'Download'),
           icon: 'icon-[lucide--download]',
-          onClick: downloadPreviewAsset
+          onClick: () => downloadPreviewAsset(resolveItem())
         },
         { kind: 'divider', key: 'd1' },
         {
           key: 'open-workflow',
           label: jobMenuOpenWorkflowLabel.value,
           icon: 'icon-[comfy--workflow]',
-          onClick: openJobWorkflow
+          onClick: () => openJobWorkflow(resolveItem())
         },
         {
           key: 'export-workflow',
           label: st('queue.jobMenu.exportWorkflow', 'Export workflow'),
           icon: 'icon-[comfy--file-output]',
-          onClick: exportJobWorkflow
+          onClick: () => exportJobWorkflow(resolveItem())
         },
         { kind: 'divider', key: 'd2' },
         {
           key: 'copy-id',
           label: jobMenuCopyJobIdLabel.value,
           icon: 'icon-[lucide--copy]',
-          onClick: copyJobId
+          onClick: () => copyJobId(resolveItem())
         },
         { kind: 'divider', key: 'd3' },
         ...(hasDeletableAsset
@@ -281,7 +284,7 @@ export function useJobMenu(
                 key: 'delete',
                 label: st('queue.jobMenu.deleteAsset', 'Delete asset'),
                 icon: 'icon-[lucide--trash-2]',
-                onClick: deleteJobAsset
+                onClick: () => deleteJobAsset(resolveItem())
               }
             ]
           : [])
@@ -293,33 +296,33 @@ export function useJobMenu(
           key: 'open-workflow',
           label: jobMenuOpenWorkflowFailedLabel.value,
           icon: 'icon-[comfy--workflow]',
-          onClick: openJobWorkflow
+          onClick: () => openJobWorkflow(resolveItem())
         },
         { kind: 'divider', key: 'd1' },
         {
           key: 'copy-id',
           label: jobMenuCopyJobIdLabel.value,
           icon: 'icon-[lucide--copy]',
-          onClick: copyJobId
+          onClick: () => copyJobId(resolveItem())
         },
         {
           key: 'copy-error',
           label: st('queue.jobMenu.copyErrorMessage', 'Copy error message'),
           icon: 'icon-[lucide--copy]',
-          onClick: copyErrorMessage
+          onClick: () => copyErrorMessage(resolveItem())
         },
         {
           key: 'report-error',
           label: st('queue.jobMenu.reportError', 'Report error'),
           icon: 'icon-[lucide--message-circle-warning]',
-          onClick: reportError
+          onClick: () => reportError(resolveItem())
         },
         { kind: 'divider', key: 'd2' },
         {
           key: 'delete',
           label: st('queue.jobMenu.removeJob', 'Remove job'),
           icon: 'icon-[lucide--circle-minus]',
-          onClick: removeFailedJob
+          onClick: () => removeFailedJob(resolveItem())
         }
       ]
     }
@@ -328,21 +331,21 @@ export function useJobMenu(
         key: 'open-workflow',
         label: jobMenuOpenWorkflowLabel.value,
         icon: 'icon-[comfy--workflow]',
-        onClick: openJobWorkflow
+        onClick: () => openJobWorkflow(resolveItem())
       },
       { kind: 'divider', key: 'd1' },
       {
         key: 'copy-id',
         label: jobMenuCopyJobIdLabel.value,
         icon: 'icon-[lucide--copy]',
-        onClick: copyJobId
+        onClick: () => copyJobId(resolveItem())
       },
       { kind: 'divider', key: 'd2' },
       {
         key: 'cancel-job',
         label: jobMenuCancelLabel.value,
         icon: 'icon-[lucide--x]',
-        onClick: cancelJob
+        onClick: () => cancelJob(resolveItem())
       }
     ]
   })

src/composables/useProgressBarBackground.ts

@@ -0,0 +1,47 @@
+type ProgressPercent = number | undefined
+
+const progressBarContainerClass = 'absolute inset-0'
+const progressBarBaseClass =
+  'pointer-events-none absolute inset-y-0 left-0 h-full transition-[width]'
+const progressBarPrimaryClass = `${progressBarBaseClass} bg-interface-panel-job-progress-primary`
+const progressBarSecondaryClass = `${progressBarBaseClass} bg-interface-panel-job-progress-secondary`
+
+function clampPercent(value: number) {
+  return Math.min(100, Math.max(0, value))
+}
+
+function normalizeProgressPercent(value: ProgressPercent) {
+  if (value === undefined || !Number.isFinite(value)) return undefined
+
+  return clampPercent(value)
+}
+
+function hasProgressPercent(value: ProgressPercent) {
+  return normalizeProgressPercent(value) !== undefined
+}
+
+function hasAnyProgressPercent(
+  totalPercent: ProgressPercent,
+  currentPercent: ProgressPercent
+) {
+  return hasProgressPercent(totalPercent) || hasProgressPercent(currentPercent)
+}
+
+function progressPercentStyle(value: ProgressPercent) {
+  const normalized = normalizeProgressPercent(value)
+
+  if (normalized === undefined) return undefined
+
+  return { width: `${normalized}%` }
+}
+
+export function useProgressBarBackground() {
+  return {
+    progressBarContainerClass,
+    progressBarPrimaryClass,
+    progressBarSecondaryClass,
+    hasProgressPercent,
+    hasAnyProgressPercent,
+    progressPercentStyle
+  }
+}

src/locales/en/main.json

@@ -696,6 +696,7 @@
     "noFilesFound": "No files found",
     "noImportedFiles": "No imported files found",
     "noGeneratedFiles": "No generated files found",
+    "generatedAssetsHeader": "Generated assets",
     "noFilesFoundMessage": "Upload files or generate content to see them here",
     "browseTemplates": "Browse example templates",
     "openWorkflow": "Open workflow in local file system",

src/platform/assets/components/AssetsListItem.stories.ts

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import Button from '@/components/ui/button/Button.vue'
+import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
+
+const meta: Meta<typeof AssetsListItem> = {
+  title: 'Platform/Assets/AssetsListItem',
+  component: AssetsListItem,
+  parameters: {
+    layout: 'centered'
+  },
+  decorators: [
+    () => ({
+      template: '<div class="p-8 bg-base-background"><story /></div>'
+    })
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+type AssetsListItemProps = InstanceType<typeof AssetsListItem>['$props']
+
+function renderActiveJob(args: AssetsListItemProps) {
+  return {
+    components: { Button, AssetsListItem },
+    setup() {
+      return { args }
+    },
+    template: `
+      <AssetsListItem v-bind="args">
+        <template #primary>
+          <div class="flex items-center gap-1 text-text-primary">
+            <span>Total:</span>
+            <span class="font-medium">30%</span>
+          </div>
+        </template>
+        <template #secondary>
+          <div class="flex items-center gap-1 text-text-secondary">
+            <span>CLIP Text Encode:</span>
+            <span>70%</span>
+          </div>
+        </template>
+        <template #actions>
+          <Button variant="destructive" size="icon" aria-label="Cancel">
+            <i class="icon-[lucide--x] size-4" />
+          </Button>
+        </template>
+      </AssetsListItem>
+    `
+  }
+}
+
+function renderGeneratedAsset(args: AssetsListItemProps) {
+  return {
+    components: { AssetsListItem },
+    setup() {
+      return { args }
+    },
+    template: `
+      <AssetsListItem v-bind="args">
+        <template #secondary>
+          <div class="flex items-center gap-2 text-text-secondary">
+            <span>1m 56s</span>
+            <span>512x512</span>
+          </div>
+        </template>
+      </AssetsListItem>
+    `
+  }
+}
+
+export const ActiveJob: Story = {
+  args: {
+    previewUrl: '/assets/images/comfy-logo-single.svg',
+    previewAlt: 'Job preview',
+    progressTotalPercent: 30,
+    progressCurrentPercent: 70
+  },
+  render: renderActiveJob
+}
+
+export const FailedJob: Story = {
+  args: {
+    iconName: 'icon-[lucide--circle-alert]',
+    iconClass: 'text-destructive-background',
+    iconWrapperClass: 'bg-modal-card-placeholder-background',
+    primaryText: 'Failed',
+    secondaryText: '8:59:30pm'
+  }
+}
+
+export const GeneratedAsset: Story = {
+  args: {
+    previewUrl: '/assets/images/comfy-logo-single.svg',
+    previewAlt: 'image03.png',
+    primaryText: 'image03.png'
+  },
+  render: renderGeneratedAsset
+}

src/platform/assets/components/AssetsListItem.vue

@@ -0,0 +1,116 @@
+<template>
+  <div
+    class="relative flex items-center gap-2 overflow-hidden rounded-lg p-2 select-none"
+  >
+    <div
+      v-if="hasAnyProgressPercent(progressTotalPercent, progressCurrentPercent)"
+      :class="progressBarContainerClass"
+    >
+      <div
+        v-if="hasProgressPercent(progressTotalPercent)"
+        :class="progressBarPrimaryClass"
+        :style="progressPercentStyle(progressTotalPercent)"
+      />
+      <div
+        v-if="hasProgressPercent(progressCurrentPercent)"
+        :class="progressBarSecondaryClass"
+        :style="progressPercentStyle(progressCurrentPercent)"
+      />
+    </div>
+
+    <div
+      :class="
+        cn(
+          'relative z-1 flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-sm bg-secondary-background',
+          iconWrapperClass
+        )
+      "
+      :aria-label="iconAriaLabel || undefined"
+    >
+      <slot
+        name="icon"
+        :preview-url="previewUrl"
+        :preview-alt="previewAlt"
+        :icon-name="iconName"
+        :icon-class="iconClass"
+        :icon-aria-label="iconAriaLabel"
+      >
+        <img
+          v-if="previewUrl"
+          :src="previewUrl"
+          :alt="previewAlt"
+          class="size-full object-cover"
+        />
+        <div v-else class="flex size-full items-center justify-center">
+          <i
+            aria-hidden="true"
+            :class="
+              cn(
+                iconName ?? 'icon-[lucide--image]',
+                'size-4 text-text-secondary',
+                iconClass
+              )
+            "
+          />
+        </div>
+      </slot>
+    </div>
+
+    <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"
+      >
+        <slot name="primary">{{ primaryText }}</slot>
+      </div>
+      <div
+        v-if="$slots.secondary || secondaryText"
+        class="text-xs leading-none text-text-secondary"
+      >
+        <slot name="secondary">{{ secondaryText }}</slot>
+      </div>
+    </div>
+
+    <div v-if="$slots.actions" class="relative z-1 flex items-center gap-2">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useProgressBarBackground } from '@/composables/useProgressBarBackground'
+import { cn } from '@/utils/tailwindUtil'
+
+const {
+  previewUrl,
+  previewAlt = '',
+  iconName,
+  iconAriaLabel,
+  iconClass,
+  iconWrapperClass,
+  primaryText,
+  secondaryText,
+  progressTotalPercent,
+  progressCurrentPercent
+} = defineProps<{
+  previewUrl?: string
+  previewAlt?: string
+  iconName?: string
+  iconAriaLabel?: string
+  iconClass?: string
+  iconWrapperClass?: string
+  primaryText?: string
+  secondaryText?: string
+  progressTotalPercent?: number
+  progressCurrentPercent?: number
+}>()
+
+const {
+  progressBarContainerClass,
+  progressBarPrimaryClass,
+  progressBarSecondaryClass,
+  hasProgressPercent,
+  hasAnyProgressPercent,
+  progressPercentStyle
+} = useProgressBarBackground()
+</script>

src/platform/assets/utils/mediaIconUtil.ts

@@ -0,0 +1,14 @@
+import type { MediaKind } from '@/platform/assets/schemas/mediaAssetSchema'
+
+export function iconForMediaType(mediaType: MediaKind): string {
+  switch (mediaType) {
+    case 'video':
+      return 'icon-[lucide--video]'
+    case 'audio':
+      return 'icon-[lucide--music]'
+    case '3D':
+      return 'icon-[lucide--box]'
+    default:
+      return 'icon-[lucide--image]'
+  }
+}