fix: refactor: create rename-aware detach/attach helper in workflowStore to avoid duplicate mutation paths (#9407)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/App.vue

@@ -1,13 +1,13 @@
 <template>
   <router-view />
-  <div
-    v-if="isLoading"
-    class="absolute inset-0 flex items-center justify-center"
-  >
-    <Loader size="lg" class="text-white" />
-  </div>
   <GlobalDialog />
   <BlockUI full-screen :blocked="isLoading" />
+  <div
+    v-if="isLoading"
+    class="pointer-events-none fixed inset-0 z-1200 flex items-center justify-center"
+  >
+    <LogoComfyWaveLoader size="xl" color="yellow" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -15,7 +15,7 @@ import { captureException } from '@sentry/vue'
 import BlockUI from 'primevue/blockui'
 import { computed, onMounted } from 'vue'
 
-import Loader from '@/components/common/Loader.vue'
+import LogoComfyWaveLoader from '@/components/loader/LogoComfyWaveLoader.vue'
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'

src/components/loader/Loader.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Loader from './Loader.vue'
 
 const meta: Meta<typeof Loader> = {
-  title: 'Components/Common/Loader',
+  title: 'Components/Loader/Loader',
   component: Loader,
   tags: ['autodocs'],
   parameters: {

src/components/loader/LogoCFillLoader.stories.ts

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import LogoCFillLoader from './LogoCFillLoader.vue'
+
+const meta: Meta<typeof LogoCFillLoader> = {
+  title: 'Components/Loader/LogoCFillLoader',
+  component: LogoCFillLoader,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'dark' }
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl']
+    },
+    color: {
+      control: 'select',
+      options: ['yellow', 'blue', 'white', 'black']
+    },
+    bordered: {
+      control: 'boolean'
+    },
+    disableAnimation: {
+      control: 'boolean'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Small: Story = {
+  args: { size: 'sm' }
+}
+
+export const Large: Story = {
+  args: { size: 'lg' }
+}
+
+export const ExtraLarge: Story = {
+  args: { size: 'xl' }
+}
+
+export const NoBorder: Story = {
+  args: { bordered: false }
+}
+
+export const Static: Story = {
+  args: { disableAnimation: true }
+}
+
+export const BrandColors: Story = {
+  render: () => ({
+    components: { LogoCFillLoader },
+    template: `
+      <div class="flex items-end gap-12">
+        <div class="flex flex-col items-center gap-2">
+          <span class="text-xs text-neutral-400">Yellow</span>
+          <LogoCFillLoader size="lg" color="yellow" />
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <span class="text-xs text-neutral-400">Blue</span>
+          <LogoCFillLoader size="lg" color="blue" />
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <span class="text-xs text-neutral-400">White</span>
+          <LogoCFillLoader size="lg" color="white" />
+        </div>
+        <div class="p-4 bg-white rounded" style="background: white">
+          <div class="flex flex-col items-center gap-2">
+            <span class="text-xs text-neutral-600">Black</span>
+            <LogoCFillLoader size="lg" color="black" />
+          </div>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const AllSizes: Story = {
+  render: () => ({
+    components: { LogoCFillLoader },
+    template: `
+      <div class="flex items-end gap-8">
+        <LogoCFillLoader size="sm" color="yellow" />
+        <LogoCFillLoader size="md" color="yellow" />
+        <LogoCFillLoader size="lg" color="yellow" />
+        <LogoCFillLoader size="xl" color="yellow" />
+      </div>
+    `
+  })
+}

src/components/loader/LogoCFillLoader.vue

@@ -0,0 +1,100 @@
+<template>
+  <span role="status" :class="cn('inline-flex', colorClass)">
+    <svg
+      :width="Math.round(heightMap[size] * (VB_W / VB_H))"
+      :height="heightMap[size]"
+      :viewBox="`0 0 ${VB_W} ${VB_H}`"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <mask :id="maskId">
+          <path :d="C_PATH" fill="white" />
+        </mask>
+      </defs>
+      <path
+        v-if="bordered"
+        :d="C_PATH"
+        stroke="currentColor"
+        stroke-width="2"
+        fill="none"
+        opacity="0.4"
+      />
+      <g :mask="`url(#${maskId})`">
+        <rect
+          :class="disableAnimation ? undefined : 'c-fill-rect'"
+          :x="-BLEED"
+          :y="-BLEED"
+          :width="VB_W + BLEED * 2"
+          :height="VB_H + BLEED * 2"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+    <span class="sr-only">{{ t('g.loading') }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { useId, computed } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+import { useI18n } from 'vue-i18n'
+
+const {
+  size = 'md',
+  color = 'black',
+  bordered = true,
+  disableAnimation = false
+} = defineProps<{
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  color?: 'yellow' | 'blue' | 'white' | 'black'
+  bordered?: boolean
+  disableAnimation?: boolean
+}>()
+
+const { t } = useI18n()
+const maskId = `c-mask-${useId()}`
+
+const VB_W = 185
+const VB_H = 201
+const BLEED = 1
+
+// Larger than LogoComfyWaveLoader because the C logo is near-square (185×201)
+// while the COMFY wordmark is wide (879×284), so larger heights are needed
+// for visually comparable perceived size.
+const heightMap = { sm: 48, md: 80, lg: 120, xl: 200 } as const
+const colorMap = {
+  yellow: 'text-brand-yellow',
+  blue: 'text-brand-blue',
+  white: 'text-white',
+  black: 'text-black'
+} as const
+
+const colorClass = computed(() => colorMap[color])
+
+const C_PATH =
+  'M42.1217 200.812C37.367 200.812 33.5304 199.045 31.0285 195.703C28.4569 192.27 27.7864 187.477 29.1882 182.557L34.8172 162.791C35.2661 161.217 34.9537 159.523 33.9747 158.214C32.9958 156.908 31.464 156.139 29.8371 156.139L13.6525 156.139C8.89521 156.139 5.05862 154.374 2.55797 151.032C-0.0136533 147.597-0.684085 142.804 0.71869 137.883L20.0565 70.289L22.1916 62.8625C25.0617 52.7847 35.5288 44.5943 45.528 44.5943L64.8938 44.5943C67.2048 44.5943 69.2376 43.0535 69.8738 40.8175L76.2782 18.3344C79.1454 8.26681 89.6127 0.0763962 99.6117 0.0763945L141.029 0.00258328L171.349-2.99253e-05C176.104-3.0756e-05 179.941 1.765 182.442 5.10626C185.013 8.53932 185.684 13.3324 184.282 18.2528L175.612 48.6947C172.746 58.7597 162.279 66.9475 152.28 66.9475L110.771 67.0265L91.4113 67.0265C89.1029 67.0265 87.0727 68.5647 86.4326 70.7983L70.2909 127.179C69.8394 128.756 70.1518 130.454 71.1334 131.763C72.1123 133.07 73.6441 133.839 75.2697 133.839C75.2736 133.839 102.699 133.785 102.699 133.785L132.929 133.785C137.685 133.785 141.522 135.55 144.023 138.892C146.594 142.327 147.265 147.12 145.862 152.041L137.192 182.478C134.326 192.545 123.859 200.733 113.86 200.733L72.3517 200.812L42.1217 200.812Z'
+</script>
+
+<style scoped>
+.c-fill-rect {
+  animation: c-fill-up 2.5s cubic-bezier(0.25, 0, 0.3, 1) forwards;
+  will-change: transform;
+}
+
+@keyframes c-fill-up {
+  0% {
+    transform: translateY(calc(v-bind(VB_H) * 1px + v-bind(BLEED) * 1px));
+  }
+  100% {
+    transform: translateY(calc(v-bind(BLEED) * -1px));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .c-fill-rect {
+    animation: none;
+  }
+}
+</style>

src/components/loader/LogoComfyWaveLoader.stories.ts

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import LogoComfyWaveLoader from './LogoComfyWaveLoader.vue'
+
+const meta: Meta<typeof LogoComfyWaveLoader> = {
+  title: 'Components/Loader/LogoComfyWaveLoader',
+  component: LogoComfyWaveLoader,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'dark' }
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl']
+    },
+    color: {
+      control: 'select',
+      options: ['yellow', 'blue', 'white', 'black']
+    },
+    bordered: {
+      control: 'boolean'
+    },
+    disableAnimation: {
+      control: 'boolean'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Small: Story = {
+  args: { size: 'sm' }
+}
+
+export const Large: Story = {
+  args: { size: 'lg' }
+}
+
+export const ExtraLarge: Story = {
+  args: { size: 'xl' }
+}
+
+export const NoBorder: Story = {
+  args: { bordered: false }
+}
+
+export const Static: Story = {
+  args: { disableAnimation: true }
+}
+
+export const BrandColors: Story = {
+  render: () => ({
+    components: { LogoComfyWaveLoader },
+    template: `
+      <div class="flex flex-col items-center gap-12">
+        <div class="flex flex-col items-center gap-2">
+          <span class="text-xs text-neutral-400">#F0FF41 (Yellow)</span>
+          <LogoComfyWaveLoader size="lg" color="yellow" />
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <span class="text-xs text-neutral-400">#172DD7 (Blue)</span>
+          <LogoComfyWaveLoader size="lg" color="blue" />
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <span class="text-xs text-neutral-400">White</span>
+          <LogoComfyWaveLoader size="lg" color="white" />
+        </div>
+        <div class="p-4 bg-white rounded" style="background: white">
+          <div class="flex flex-col items-center gap-2">
+            <span class="text-xs text-neutral-600">Black</span>
+            <LogoComfyWaveLoader size="lg" color="black" />
+          </div>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const AllSizes: Story = {
+  render: () => ({
+    components: { LogoComfyWaveLoader },
+    template: `
+      <div class="flex flex-col items-center gap-8">
+        <LogoComfyWaveLoader size="sm" color="yellow" />
+        <LogoComfyWaveLoader size="md" color="yellow" />
+        <LogoComfyWaveLoader size="lg" color="yellow" />
+        <LogoComfyWaveLoader size="xl" color="yellow" />
+      </div>
+    `
+  })
+}

src/components/toast/ProgressToastItem.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Loader from '@/components/common/Loader.vue'
+import Loader from '@/components/loader/Loader.vue'
 import StatusBadge from '@/components/common/StatusBadge.vue'
 import type { AssetDownload } from '@/stores/assetDownloadStore'
 import { cn } from '@/utils/tailwindUtil'

src/locales/en/main.json

@@ -178,7 +178,7 @@
     "uploadAlreadyInProgress": "Upload already in progress",
     "capture": "capture",
     "nodes": "Nodes",
-    "nodesCount": "{count} nodes | {count} node | {count} nodes",
+    "nodesCount": "{count} node | {count} nodes",
     "addNode": "Add a node...",
     "filterBy": "Filter by:",
     "filterByType": "Filter by {type}...",
@@ -222,7 +222,7 @@
     "failed": "Failed",
     "cancelled": "Cancelled",
     "job": "Job",
-    "asset": "{count} assets | {count} asset | {count} assets",
+    "asset": "{count} asset | {count} assets",
     "untitled": "Untitled",
     "emDash": "—",
     "enabling": "Enabling {id}",
@@ -3347,7 +3347,7 @@
     }
   },
   "errorOverlay": {
-    "errorCount": "{count} ERRORS | {count} ERROR | {count} ERRORS",
+    "errorCount": "{count} ERROR | {count} ERRORS",
     "seeErrors": "See Errors"
   },
   "help": {
@@ -3357,7 +3357,7 @@
   "progressToast": {
     "importingModels": "Importing Models",
     "downloadingModel": "Downloading model...",
-    "downloadsFailed": "{count} downloads failed | {count} download failed | {count} downloads failed",
+    "downloadsFailed": "{count} download failed | {count} downloads failed",
     "allDownloadsCompleted": "All downloads completed",
     "noImportsInQueue": "No {filter} in queue",
     "failed": "Failed",
@@ -3374,7 +3374,7 @@
     "exportingAssets": "Exporting Assets",
     "preparingExport": "Preparing export...",
     "exportError": "Export failed",
-    "exportFailed": "{count} export failed | {count} export failed | {count} exports failed",
+    "exportFailed": "{count} export failed | {count} exports failed",
     "allExportsCompleted": "All exports completed",
     "noExportsInQueue": "No {filter} exports in queue",
     "exportStarted": "Preparing ZIP download...",

src/platform/assets/components/ActiveMediaAssetCard.vue

@@ -74,7 +74,7 @@
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Loader from '@/components/common/Loader.vue'
+import Loader from '@/components/loader/Loader.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useJobActions } from '@/composables/queue/useJobActions'
 import type { JobListItem } from '@/composables/queue/useJobList'

src/platform/assets/components/AssetExportProgressDialog.vue

@@ -2,7 +2,7 @@
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Loader from '@/components/common/Loader.vue'
+import Loader from '@/components/loader/Loader.vue'
 import HoneyToast from '@/components/honeyToast/HoneyToast.vue'
 import Button from '@/components/ui/button/Button.vue'
 import type { AssetExport } from '@/stores/assetExportStore'

src/platform/assets/components/ModelImportProgressDialog.vue

@@ -4,7 +4,7 @@ import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Loader from '@/components/common/Loader.vue'
+import Loader from '@/components/loader/Loader.vue'
 import HoneyToast from '@/components/honeyToast/HoneyToast.vue'
 import ProgressToastItem from '@/components/toast/ProgressToastItem.vue'
 import Button from '@/components/ui/button/Button.vue'

src/platform/assets/components/UploadModelFooter.vue

@@ -106,7 +106,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import Loader from '@/components/common/Loader.vue'
+import Loader from '@/components/loader/Loader.vue'
 import Button from '@/components/ui/button/Button.vue'
 import VideoHelpDialog from '@/platform/assets/components/VideoHelpDialog.vue'
 

src/platform/workflow/management/stores/workflowStore.ts

@@ -103,14 +103,16 @@ export const useWorkflowStore = defineStore('workflow', () => {
   /**
    * Detach the workflow from the store. lightweight helper function.
    * @param workflow The workflow to detach.
+   * @param oldPath Optional previous path to detach from (used during rename when workflow.path has already changed).
    * @returns The index of the workflow in the openWorkflowPaths array, or -1 if the workflow was not open.
    */
-  const detachWorkflow = (workflow: ComfyWorkflow) => {
-    delete workflowLookup.value[workflow.path]
-    const index = openWorkflowPaths.value.indexOf(workflow.path)
+  const detachWorkflow = (workflow: ComfyWorkflow, oldPath?: string) => {
+    const path = oldPath ?? workflow.path
+    delete workflowLookup.value[path]
+    const index = openWorkflowPaths.value.indexOf(path)
     if (index !== -1) {
       openWorkflowPaths.value = openWorkflowPaths.value.filter(
-        (path) => path !== workflow.path
+        (p) => p !== path
       )
     }
     return index
@@ -501,12 +503,8 @@ export const useWorkflowStore = defineStore('workflow', () => {
 
       // Synchronously swap old path for new path in lookup and open paths
       // to avoid a tab flicker caused by an async gap between detach/attach.
-      delete workflowLookup.value[oldPath]
-      workflowLookup.value[workflow.path] = workflow
-      const openIndex = openWorkflowPaths.value.indexOf(oldPath)
-      if (openIndex !== -1) {
-        openWorkflowPaths.value.splice(openIndex, 1, workflow.path)
-      }
+      const openIndex = detachWorkflow(workflow, oldPath)
+      attachWorkflow(workflow, openIndex)
 
       draftStore.moveDraft(oldPath, newPath, workflow.key)
 

src/platform/workspace/auth/WorkspaceAuthGate.vue

@@ -4,7 +4,7 @@
     v-else
     class="fixed inset-0 z-1100 flex items-center justify-center bg-(--p-mask-background)"
   >
-    <Loader size="lg" class="text-white" />
+    <LogoComfyWaveLoader size="xl" color="yellow" disable-animation />
   </div>
 </template>
 
@@ -22,7 +22,6 @@
  * instead of workspace tokens when the workspace feature is enabled.
  */
 import { promiseTimeout, until } from '@vueuse/core'
-import Loader from '@/components/common/Loader.vue'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref } from 'vue'
 
@@ -31,6 +30,7 @@ import { isCloud } from '@/platform/distribution/types'
 import { refreshRemoteConfig } from '@/platform/remoteConfig/refreshRemoteConfig'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import LogoComfyWaveLoader from '@/components/loader/LogoComfyWaveLoader.vue'
 
 const FIREBASE_INIT_TIMEOUT_MS = 16_000
 const CONFIG_REFRESH_TIMEOUT_MS = 10_000

src/renderer/extensions/linearMode/LinearControls.vue

@@ -5,7 +5,7 @@ import { storeToRefs } from 'pinia'
 import { computed, ref, shallowRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Loader from '@/components/common/Loader.vue'
+import Loader from '@/components/loader/Loader.vue'
 import ScrubableNumberInput from '@/components/common/ScrubableNumberInput.vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'

src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
-import Loader from '@/components/common/Loader.vue'
+import Loader from '@/components/loader/Loader.vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCommandStore } from '@/stores/commandStore'

src/renderer/extensions/vueNodes/components/NodeWidgets.vue

@@ -215,15 +215,13 @@ const processedWidgets = computed((): ProcessedWidget[] => {
     // Get value from store (falls back to undefined if not registered)
     const value = widgetState?.value as WidgetValue
 
-    // PromotedWidgetView is not a BaseWidget and never registers in the
-    // widgetValueStore, so read options from the widget directly.
-    const baseOptions = isPromotedView
-      ? (widget.options ?? {})
-      : (widgetState?.options ?? {})
+    // Build options from store state, with disabled override for
+    // slot-linked widgets or widgets with disabled state (e.g. display-only)
+    const storeOptions = widgetState?.options ?? {}
     const isDisabled = slotMetadata?.linked || widgetState?.disabled
     const widgetOptions = isDisabled
-      ? { ...baseOptions, disabled: true }
-      : baseOptions
+      ? { ...storeOptions, disabled: true }
+      : storeOptions
 
     const borderStyle =
       graphId &&

src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue

@@ -30,7 +30,7 @@
 import InputText from 'primevue/inputtext'
 import { computed } from 'vue'
 
-import Loader from '@/components/common/Loader.vue'
+import Loader from '@/components/loader/Loader.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { cn } from '@/utils/tailwindUtil'
 import {

src/scripts/ui.ts

@@ -245,6 +245,13 @@ class ComfyList {
     this._reverse = reverse || false
     this.element = $el('div.comfy-list') as HTMLDivElement
     this.element.style.display = 'none'
+
+    console.warn(
+      '[ComfyUI] The legacy queue/history menu is deprecated. ' +
+        'Core functionality in this menu may break at any time. ' +
+        'Issues and feature requests related to the legacy menu will not be addressed. ' +
+        'To switch to the new menu: Settings → search "Use new menu" → change from "Disabled" to "Top".'
+    )
   }
 
   get visible() {