Show node name and node id on flattened task outputs (#608)

* wip

* Show node name and node id

src/components/sidebar/tabs/queue/TaskItem.vue

@@ -4,7 +4,7 @@
       <template v-if="task.displayStatus === TaskItemDisplayStatus.Completed">
         <ResultItem
           v-if="flatOutputs.length"
-          :result="task.previewOutput || flatOutputs[0]"
+          :result="coverResult"
           @preview="handlePreview"
         />
       </template>
@@ -26,7 +26,10 @@
     </div>
 
     <div class="task-item-details">
-      <div class="tag-wrapper">
+      <div class="tag-wrapper status-tag-group">
+        <Tag v-if="isFlatTask && task.isHistory" class="node-name-tag">
+          {{ node?.type }} (#{{ node?.id }})
+        </Tag>
         <Tag :severity="taskTagSeverity(task.displayStatus)">
           <span v-html="taskStatusText(task.displayStatus)"></span>
           <span v-if="task.isHistory" class="task-time">
@@ -55,6 +58,7 @@ import Button from 'primevue/button'
 import Tag from 'primevue/tag'
 import ResultItem from './ResultItem.vue'
 import { TaskItemDisplayStatus, type TaskItemImpl } from '@/stores/queueStore'
+import { ComfyNode } from '@/types/comfyWorkflow'
 
 const props = defineProps<{
   task: TaskItemImpl
@@ -62,6 +66,15 @@ const props = defineProps<{
 }>()
 
 const flatOutputs = props.task.flatOutputs
+const coverResult = flatOutputs.length
+  ? props.task.previewOutput || flatOutputs[0]
+  : null
+// Using `==` instead of `===` because NodeId can be a string or a number
+const node: ComfyNode | null = flatOutputs.length
+  ? props.task.workflow.nodes.find(
+      (n: ComfyNode) => n.id == coverResult.nodeId
+    ) ?? null
+  : null
 
 const emit = defineEmits<{
   (e: 'contextmenu', value: { task: TaskItemImpl; event: MouseEvent }): void
@@ -149,6 +162,7 @@ const formatTime = (time?: number) => {
   padding: 0.6rem;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   width: 100%;
 }
 
@@ -159,4 +173,13 @@ are floating on top of images. */
   border-radius: 6px;
   display: inline-flex;
 }
+
+.node-name-tag {
+  word-break: break-all;
+}
+
+.status-tag-group {
+  display: flex;
+  flex-direction: column;
+}
 </style>