From e42715086ef2175eb02ee3f9a9f60efd353a5211 Mon Sep 17 00:00:00 2001 From: Benjamin Lu Date: Tue, 18 Nov 2025 22:43:49 -0800 Subject: [PATCH] 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 Co-authored-by: github-actions Co-authored-by: Jin Yi Co-authored-by: Claude Co-authored-by: Alexander Brown Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com> Co-authored-by: Christian Byrne Co-authored-by: Comfy Org PR Bot Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com> --- apps/desktop-ui/src/views/ServerStartView.vue | 9 +- ...-error-unconnected-slot-chromium-linux.png | Bin 97242 -> 97666 bytes browser_tests/tests/nodeHelp.spec.ts | 2 + .../auto-linked-node-batch-chromium-linux.png | Bin 84005 -> 84181 bytes ...vue-groups-create-group-chromium-linux.png | Bin 127741 -> 128521 bytes ...-groups-fit-to-contents-chromium-linux.png | Bin 54655 -> 55432 bytes ...s-paned-with-touch-mobile-chrome-linux.png | Bin 35639 -> 35605 bytes .../zoomed-in-ctrl-shift-chromium-linux.png | Bin 34488 -> 35330 bytes .../vue-node-dragging-link-chromium-linux.png | Bin 64262 -> 65217 bytes ...ode-input-drag-ctrl-alt-chromium-linux.png | Bin 58340 -> 59158 bytes ...nput-drag-reuses-origin-chromium-linux.png | Bin 59003 -> 59780 bytes ...node-reroute-input-drag-chromium-linux.png | Bin 60936 -> 61792 bytes ...route-output-shift-drag-chromium-linux.png | Bin 61161 -> 61933 bytes ...shift-output-multi-link-chromium-linux.png | Bin 60263 -> 61066 bytes .../vue-node-snap-to-node-chromium-linux.png | Bin 57315 -> 58129 bytes .../vue-node-snap-to-slot-chromium-linux.png | Bin 56581 -> 57391 bytes .../vue-node-moved-node-chromium-linux.png | Bin 111955 -> 112678 bytes ...e-moved-node-touch-mobile-chrome-linux.png | Bin 37877 -> 37706 bytes ...vue-node-bypassed-state-chromium-linux.png | Bin 122397 -> 123170 bytes ...-node-custom-color-blue-chromium-linux.png | Bin 122209 -> 123039 bytes ...-colors-dark-all-colors-chromium-linux.png | Bin 154022 -> 154765 bytes ...colors-light-all-colors-chromium-linux.png | Bin 145812 -> 146647 bytes .../vue-node-muted-state-chromium-linux.png | Bin 122023 -> 122864 bytes ...ue-nodes-upload-widgets-chromium-linux.png | Bin 83457 -> 84207 bytes packages/design-system/src/css/style.css | 11 +- .../design-system/src/icons/file-output.svg | 3 + src/components/TopMenuSection.vue | 70 +- src/components/actionbar/ComfyActionbar.vue | 1 + .../queue/CompletionSummaryBanner.stories.ts | 73 ++ .../queue/CompletionSummaryBanner.test.ts | 91 +++ .../queue/CompletionSummaryBanner.vue | 99 +++ .../queue/QueueOverlayActive.test.ts | 125 +++ src/components/queue/QueueOverlayActive.vue | 119 +++ .../queue/QueueOverlayEmpty.test.ts | 69 ++ src/components/queue/QueueOverlayEmpty.vue | 27 + src/components/queue/QueueOverlayExpanded.vue | 144 ++++ .../queue/QueueOverlayHeader.test.ts | 98 +++ src/components/queue/QueueOverlayHeader.vue | 96 +++ src/components/queue/QueueProgressOverlay.vue | 290 +++++++ .../queue/dialogs/QueueClearHistoryDialog.vue | 88 +++ src/components/queue/job/JobContextMenu.vue | 72 ++ .../queue/job/JobDetailsPopover.stories.ts | 423 ++++++++++ .../queue/job/JobDetailsPopover.vue | 350 +++++++++ src/components/queue/job/JobFiltersBar.vue | 224 ++++++ src/components/queue/job/JobGroupsList.vue | 92 +++ .../queue/job/QueueAssetPreview.vue | 65 ++ .../queue/job/QueueJobItem.stories.ts | 134 ++++ src/components/queue/job/QueueJobItem.vue | 310 ++++++++ .../queue/job/useJobErrorReporting.ts | 83 ++ .../queue/job/useQueueEstimates.test.ts | 230 ++++++ src/components/queue/job/useQueueEstimates.ts | 149 ++++ .../sidebar/tabs/queue/ResultGallery.vue | 8 +- src/composables/queue/useCompletionSummary.ts | 116 +++ src/composables/queue/useJobList.ts | 352 +++++++++ src/composables/queue/useJobMenu.ts | 356 +++++++++ src/composables/queue/useQueueProgress.ts | 50 ++ src/composables/queue/useResultGallery.ts | 32 + src/composables/useTooltipConfig.ts | 18 + src/locales/en/main.json | 91 +++ src/schemas/apiSchema.ts | 6 + src/scripts/api.ts | 45 +- src/stores/executionStore.ts | 124 ++- src/stores/queueStore.ts | 14 + src/types/queue.ts | 9 + src/utils/dateTimeUtil.ts | 77 ++ src/utils/numberUtil.ts | 27 + src/utils/queueDisplay.ts | 150 ++++ src/utils/queueUtil.ts | 29 + .../tests/components/TopMenuSection.test.ts | 22 +- .../components/queue/JobGroupsList.test.ts | 93 +++ .../queue/useJobErrorReporting.test.ts | 190 +++++ .../composables/useCompletionSummary.test.ts | 289 +++++++ tests-ui/tests/composables/useJobList.test.ts | 520 +++++++++++++ tests-ui/tests/composables/useJobMenu.test.ts | 728 ++++++++++++++++++ .../composables/useQueueProgress.test.ts | 160 ++++ .../composables/useResultGallery.test.ts | 103 +++ 76 files changed, 7117 insertions(+), 39 deletions(-) create mode 100644 packages/design-system/src/icons/file-output.svg create mode 100644 src/components/queue/CompletionSummaryBanner.stories.ts create mode 100644 src/components/queue/CompletionSummaryBanner.test.ts create mode 100644 src/components/queue/CompletionSummaryBanner.vue create mode 100644 src/components/queue/QueueOverlayActive.test.ts create mode 100644 src/components/queue/QueueOverlayActive.vue create mode 100644 src/components/queue/QueueOverlayEmpty.test.ts create mode 100644 src/components/queue/QueueOverlayEmpty.vue create mode 100644 src/components/queue/QueueOverlayExpanded.vue create mode 100644 src/components/queue/QueueOverlayHeader.test.ts create mode 100644 src/components/queue/QueueOverlayHeader.vue create mode 100644 src/components/queue/QueueProgressOverlay.vue create mode 100644 src/components/queue/dialogs/QueueClearHistoryDialog.vue create mode 100644 src/components/queue/job/JobContextMenu.vue create mode 100644 src/components/queue/job/JobDetailsPopover.stories.ts create mode 100644 src/components/queue/job/JobDetailsPopover.vue create mode 100644 src/components/queue/job/JobFiltersBar.vue create mode 100644 src/components/queue/job/JobGroupsList.vue create mode 100644 src/components/queue/job/QueueAssetPreview.vue create mode 100644 src/components/queue/job/QueueJobItem.stories.ts create mode 100644 src/components/queue/job/QueueJobItem.vue create mode 100644 src/components/queue/job/useJobErrorReporting.ts create mode 100644 src/components/queue/job/useQueueEstimates.test.ts create mode 100644 src/components/queue/job/useQueueEstimates.ts create mode 100644 src/composables/queue/useCompletionSummary.ts create mode 100644 src/composables/queue/useJobList.ts create mode 100644 src/composables/queue/useJobMenu.ts create mode 100644 src/composables/queue/useQueueProgress.ts create mode 100644 src/composables/queue/useResultGallery.ts create mode 100644 src/composables/useTooltipConfig.ts create mode 100644 src/types/queue.ts create mode 100644 src/utils/dateTimeUtil.ts create mode 100644 src/utils/numberUtil.ts create mode 100644 src/utils/queueDisplay.ts create mode 100644 src/utils/queueUtil.ts create mode 100644 tests-ui/tests/components/queue/JobGroupsList.test.ts create mode 100644 tests-ui/tests/components/queue/useJobErrorReporting.test.ts create mode 100644 tests-ui/tests/composables/useCompletionSummary.test.ts create mode 100644 tests-ui/tests/composables/useJobList.test.ts create mode 100644 tests-ui/tests/composables/useJobMenu.test.ts create mode 100644 tests-ui/tests/composables/useQueueProgress.test.ts create mode 100644 tests-ui/tests/composables/useResultGallery.test.ts diff --git a/apps/desktop-ui/src/views/ServerStartView.vue b/apps/desktop-ui/src/views/ServerStartView.vue index 3dc6cceaa..f799b119b 100644 --- a/apps/desktop-ui/src/views/ServerStartView.vue +++ b/apps/desktop-ui/src/views/ServerStartView.vue @@ -85,11 +85,10 @@