Implement workflow progress panel (#6092)

Adds a workflow progress panel component underneath the
`actionbar-container`.

I suggest starting a review at the extraneous changes that were needed.
Including but not limited to:

- `get createTime()` in queueStore
- `promptIdToWorkflowId`, `initializingPromptIds`, and
`nodeProgressStatesByPrompt` in executionStore
- `create_time` handling in v2ToV1Adapter
- `pointer-events-auto` on ComfyActionbar.vue

The rest of the changes should be contained under
`QueueProgressOverlay.vue`, and has less of a blast radius in case
something goes wrong.

---------

Co-authored-by: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Jin Yi <jin12cc@gmail.com>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>
Co-authored-by: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com>
Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com>

src/utils/queueDisplay.ts

@@ -0,0 +1,150 @@
+import type { TaskItemImpl } from '@/stores/queueStore'
+import type { JobState } from '@/types/queue'
+import { clampPercentInt, formatPercent0 } from '@/utils/numberUtil'
+
+type BuildJobDisplayCtx = {
+  t: (k: string, v?: Record<string, any>) => string
+  locale: string
+  formatClockTimeFn: (ts: number, locale: string) => string
+  isActive: boolean
+  totalPercent?: number
+  currentNodePercent?: number
+  currentNodeName?: string
+  showAddedHint?: boolean
+}
+
+type JobDisplay = {
+  iconName: string
+  iconImageUrl?: string
+  primary: string
+  secondary: string
+  showClear: boolean
+}
+
+export const iconForJobState = (state: JobState): string => {
+  switch (state) {
+    case 'pending':
+      return 'icon-[lucide--clock]'
+    case 'initialization':
+      return 'icon-[lucide--server-crash]'
+    case 'running':
+      return 'icon-[lucide--zap]'
+    case 'completed':
+      return 'icon-[lucide--check-check]'
+    case 'failed':
+      return 'icon-[lucide--alert-circle]'
+    default:
+      return 'icon-[lucide--circle]'
+  }
+}
+
+const buildTitle = (task: TaskItemImpl, t: (k: string) => string): string => {
+  const prefix = t('g.job')
+  const shortId = String(task.promptId ?? '').split('-')[0]
+  const idx = task.queueIndex
+  if (typeof idx === 'number') return `${prefix} #${idx}`
+  if (shortId) return `${prefix} ${shortId}`
+  return prefix
+}
+
+const buildQueuedTime = (
+  task: TaskItemImpl,
+  locale: string,
+  formatClockTimeFn: (ts: number, locale: string) => string
+): string => {
+  const ts = task.createTime
+  return ts !== undefined ? formatClockTimeFn(ts, locale) : ''
+}
+
+export const buildJobDisplay = (
+  task: TaskItemImpl,
+  state: JobState,
+  ctx: BuildJobDisplayCtx
+): JobDisplay => {
+  if (state === 'pending') {
+    if (ctx.showAddedHint) {
+      return {
+        iconName: 'icon-[lucide--check]',
+        primary: ctx.t('queue.jobAddedToQueue'),
+        secondary: buildQueuedTime(task, ctx.locale, ctx.formatClockTimeFn),
+        showClear: true
+      }
+    }
+    return {
+      iconName: iconForJobState(state),
+      primary: ctx.t('queue.inQueue'),
+      secondary: buildQueuedTime(task, ctx.locale, ctx.formatClockTimeFn),
+      showClear: true
+    }
+  }
+  if (state === 'initialization') {
+    return {
+      iconName: iconForJobState(state),
+      primary: ctx.t('queue.initializingAlmostReady'),
+      secondary: buildQueuedTime(task, ctx.locale, ctx.formatClockTimeFn),
+      showClear: true
+    }
+  }
+  if (state === 'running') {
+    if (ctx.isActive) {
+      const total = formatPercent0(
+        ctx.locale,
+        clampPercentInt(ctx.totalPercent)
+      )
+      const curr = formatPercent0(
+        ctx.locale,
+        clampPercentInt(ctx.currentNodePercent)
+      )
+      const primary = ctx.t('sideToolbar.queueProgressOverlay.total', {
+        percent: total
+      })
+      const right = ctx.currentNodeName
+        ? `${ctx.currentNodeName} ${ctx.t(
+            'sideToolbar.queueProgressOverlay.colonPercent',
+            { percent: curr }
+          )}`
+        : ''
+      return {
+        iconName: iconForJobState(state),
+        primary,
+        secondary: right,
+        showClear: true
+      }
+    }
+    return {
+      iconName: iconForJobState(state),
+      primary: ctx.t('g.running'),
+      secondary: '',
+      showClear: true
+    }
+  }
+  if (state === 'completed') {
+    const time = task.executionTimeInSeconds
+    const preview = task.previewOutput
+    const iconImageUrl = preview && preview.isImage ? preview.url : undefined
+    return {
+      iconName: iconForJobState(state),
+      iconImageUrl,
+      primary:
+        preview?.filename && preview.filename.length
+          ? preview.filename
+          : buildTitle(task, ctx.t),
+      secondary: time !== undefined ? `${time.toFixed(2)}s` : '',
+      showClear: false
+    }
+  }
+  if (state === 'failed') {
+    return {
+      iconName: iconForJobState(state),
+      primary: ctx.t('g.failed'),
+      secondary: ctx.t('g.failed'),
+      showClear: true
+    }
+  }
+  return {
+    iconName: iconForJobState(state),
+    primary: buildTitle(task, ctx.t),
+    secondary: '',
+    showClear: true
+  }
+}