Fix legacy history (#8687)

Restores functionality of the history and queue sections in the legacy
"floating menu" which were broken in #7650

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8687-Fix-legacy-history-2ff6d73d3650810a8a05f2ee18cbfa1d)
by [Unito](https://www.unito.io)

src/scripts/ui.ts

@@ -3,6 +3,8 @@ import { WORKFLOW_ACCEPT_STRING } from '@/platform/workflow/core/types/formats'
 import { type StatusWsMessageStatus } from '@/schemas/apiSchema'
 import { useDialogService } from '@/services/dialogService'
 import { isCloud } from '@/platform/distribution/types'
+import { extractWorkflow } from '@/platform/remote/comfyui/jobs/fetchJobs'
+import type { JobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
 import { useTelemetry } from '@/platform/telemetry'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useCommandStore } from '@/stores/commandStore'
@@ -33,17 +35,6 @@ type Props = {
 
 type Children = Element[] | Element | string | string[]
 
-/**
- * @deprecated Legacy queue item structure from old history API.
- * Will be removed when ComfyList is migrated to Jobs API.
- */
-interface LegacyQueueItem {
-  prompt: [unknown, string, unknown, { extra_pnginfo: { workflow: unknown } }]
-  outputs?: Record<string, unknown>
-  meta?: Record<string, { display_node?: string }>
-  remove?: { name: string; cb: () => Promise<void> | void }
-}
-
 type ElementType<K extends string> = K extends keyof HTMLElementTagNameMap
   ? HTMLElementTagNameMap[K]
   : HTMLElement
@@ -261,7 +252,10 @@ class ComfyList {
   }
 
   async load() {
-    const items = await api.getItems(this._type)
+    const items =
+      this._type === 'history'
+        ? { history: await api.getHistory() }
+        : await api.getQueue()
     this.element.replaceChildren(
       ...Object.keys(items).flatMap((section) => [
         $el('h4', {
@@ -270,29 +264,30 @@ class ComfyList {
         $el('div.comfy-list-items', [
           // @ts-expect-error fixme ts strict error
           ...(this._reverse ? items[section].reverse() : items[section]).map(
-            (item: LegacyQueueItem) => {
+            (item: JobListItem) => {
               // Allow items to specify a custom remove action (e.g. for interrupt current prompt)
-              const removeAction = item.remove ?? {
-                name: 'Delete',
-                cb: () => api.deleteItem(this._type, item.prompt[1])
-              }
-              return $el('div', { textContent: item.prompt[0] + ': ' }, [
+              const removeAction =
+                section === 'Running'
+                  ? {
+                      name: 'Cancel',
+                      cb: () => api.interrupt(item.id)
+                    }
+                  : {
+                      name: 'Delete',
+                      cb: () => api.deleteItem(this._type, item.id)
+                    }
+              return $el('div', { textContent: item.priority + ': ' }, [
                 $el('button', {
                   textContent: 'Load',
                   onclick: async () => {
-                    await app.loadGraphData(
-                      item.prompt[3].extra_pnginfo.workflow as Parameters<
-                        typeof app.loadGraphData
-                      >[0],
-                      true,
-                      false
-                    )
-                    if ('outputs' in item && item.outputs) {
+                    const job = await api.getJobDetail(item.id)
+                    if (!job) return
+                    const workflow = await extractWorkflow(job)
+                    await app.loadGraphData(workflow, true, false)
+                    if ('outputs' in job && job.outputs) {
                       app.nodeOutputs = {}
-                      for (const [key, value] of Object.entries(item.outputs)) {
-                        const realKey = item['meta']?.[key]?.display_node ?? key
-                        // @ts-expect-error fixme ts strict error
-                        app.nodeOutputs[realKey] = value
+                      for (const [key, value] of Object.entries(job.outputs)) {
+                        app.nodeOutputs[key] = value
                       }
                     }
                   }