fix(queue): allow deleting failed jobs from queue progress UI

src/composables/queue/useJobActions.ts

@@ -5,6 +5,7 @@ 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 { TaskItemImpl } from '@/stores/queueStore'
 import type { JobState } from '@/types/queue'
 
 export type JobAction = {
@@ -18,14 +19,20 @@ export function useJobActions(
 ) {
   const { t } = useI18n()
   const { wrapWithErrorHandlingAsync } = useErrorHandling()
-  const { cancelJob } = useJobMenu()
+  const { cancelJob, removeFailedJob } = useJobMenu()
 
   const cancelAction: JobAction = {
     icon: 'icon-[lucide--x]',
     label: t('sideToolbar.queueProgressOverlay.cancelJobTooltip'),
     variant: 'destructive'
   }
 
+  const deleteAction: JobAction = {
+    icon: 'icon-[lucide--circle-minus]',
+    label: t('queue.jobMenu.removeJob'),
+    variant: 'destructive'
+  }
+
   const cancellableStates: JobState[] = ['pending', 'initialization', 'running']
 
   const jobRef = computed(() => toValue(job) ?? null)
@@ -42,6 +49,15 @@ export function useJobActions(
     )
   })
 
+  const canDeleteJob = computed(() => {
+    const currentJob = jobRef.value
+    if (!currentJob) {
+      return false
+    }
+
+    return currentJob.state === 'failed'
+  })
+
   const runCancelJob = wrapWithErrorHandlingAsync(async () => {
     const currentJob = jobRef.value
     if (!currentJob) {
@@ -51,9 +67,22 @@ export function useJobActions(
     await cancelJob(currentJob)
   })
 
+  const runDeleteJob = wrapWithErrorHandlingAsync(async () => {
+    const currentJob = jobRef.value
+    const task = currentJob?.taskRef as TaskItemImpl | undefined
+    if (!task) {
+      return
+    }
+
+    await removeFailedJob(task)
+  })
+
   return {
     cancelAction,
     canCancelJob,
-    runCancelJob
+    runCancelJob,
+    deleteAction,
+    canDeleteJob,
+    runDeleteJob
   }
 }

src/composables/queue/useJobMenu.ts

@@ -216,10 +216,11 @@ export function useJobMenu(
     }
   }
 
-  const removeFailedJob = async () => {
-    const task = currentMenuItem()?.taskRef as TaskItemImpl | undefined
-    if (!task) return
-    await queueStore.delete(task)
+  const removeFailedJob = async (task?: TaskItemImpl | null) => {
+    const target =
+      task ?? (currentMenuItem()?.taskRef as TaskItemImpl | undefined)
+    if (!target) return
+    await queueStore.delete(target)
   }
 
   const jobMenuOpenWorkflowLabel = computed(() =>
@@ -365,6 +366,7 @@ export function useJobMenu(
     jobMenuEntries,
     openJobWorkflow,
     copyJobId,
-    cancelJob
+    cancelJob,
+    removeFailedJob
   }
 }

src/platform/assets/components/ActiveMediaAssetCard.vue

@@ -39,16 +39,16 @@
           class="icon-[lucide--loader-circle] size-8 animate-spin text-muted-foreground"
         />
       </div>
-      <!-- Cancel button overlay -->
+      <!-- Cancel/Delete button overlay -->
       <Button
-        v-if="hovered && canCancelJob"
+        v-if="hovered && showActionButton"
         variant="destructive"
         size="icon"
-        :aria-label="cancelAction.label"
+        :aria-label="activeAction.label"
         class="absolute top-2 right-2"
-        @click.stop="runCancelJob()"
+        @click.stop="runActiveAction()"
       >
-        <i :class="cancelAction.icon" />
+        <i :class="activeAction.icon" />
       </Button>
     </div>
 
@@ -90,7 +90,28 @@ const { job } = defineProps<{ job: JobListItem }>()
 const { t } = useI18n()
 const hovered = ref(false)
 
-const { cancelAction, canCancelJob, runCancelJob } = useJobActions(() => job)
+const {
+  cancelAction,
+  canCancelJob,
+  runCancelJob,
+  deleteAction,
+  canDeleteJob,
+  runDeleteJob
+} = useJobActions(() => job)
+
+const showActionButton = computed(
+  () => canCancelJob.value || canDeleteJob.value
+)
+const activeAction = computed(() =>
+  canCancelJob.value ? cancelAction : deleteAction
+)
+const runActiveAction = () => {
+  if (canCancelJob.value) {
+    runCancelJob()
+  } else if (canDeleteJob.value) {
+    runDeleteJob()
+  }
+}
 
 const { progressBarPrimaryClass, hasProgressPercent, progressPercentStyle } =
   useProgressBarBackground()