1.28.4 (#5875)

Patch version increment to 1.28.4

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5875-1-28-4-27f6d73d3650819f984ac83c971197b0)
by [Unito](https://www.unito.io)

Co-authored-by: AustinMroz <4284322+AustinMroz@users.noreply.github.com>

.npmrc

@@ -1 +1,2 @@
 ignore-workspace-root-check=true
+catalog-mode=prefer

browser_tests/README.md

@@ -16,7 +16,7 @@ Without this flag, parallel tests will conflict and fail randomly.
 
 ### ComfyUI devtools
 
-ComfyUI_devtools is now included in this repository under `tools/devtools/`. During CI/CD, these files are automatically copied to the `custom_nodes` directory.  
+ComfyUI_devtools is included in this repository under `tools/devtools/`. During CI/CD, these files are automatically copied to the `custom_nodes` directory.  
 _ComfyUI_devtools adds additional API endpoints and nodes to ComfyUI for browser testing._
 
 For local development, copy the devtools files to your ComfyUI installation:

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.28.3",
+  "version": "1.28.4",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",

pnpm-workspace.yaml

@@ -2,6 +2,114 @@ packages:
   - apps/**
   - packages/**
 
+catalog:
+  # Core frameworks
+  typescript: ^5.9.2
+  vue: ^3.5.13
+
+  # Build tools
+  '@nx/eslint': 21.4.1
+  '@nx/playwright': 21.4.1
+  '@nx/storybook': 21.4.1
+  '@nx/vite': 21.4.1
+  nx: 21.4.1
+  tsx: ^4.15.6
+  vite: ^5.4.19
+  '@vitejs/plugin-vue': ^5.1.4
+  'vite-plugin-dts': ^4.5.4
+  vue-tsc: ^3.0.7
+
+  # Testing
+  'happy-dom': ^15.11.0
+  jsdom: ^26.1.0
+  '@pinia/testing': ^0.1.5
+  '@playwright/test': ^1.52.0
+  '@vitest/coverage-v8': ^3.2.4
+  '@vitest/ui': ^3.0.0
+  vitest: ^3.2.4
+  '@vue/test-utils': ^2.4.6
+
+  # Linting & Formatting
+  '@eslint/js': ^9.35.0
+  eslint: ^9.34.0
+  'eslint-config-prettier': ^10.1.8
+  'eslint-plugin-prettier': ^5.5.4
+  'eslint-plugin-storybook': ^9.1.6
+  'eslint-plugin-unused-imports': ^4.2.0
+  'eslint-plugin-vue': ^10.4.0
+  globals: ^15.9.0
+  '@intlify/eslint-plugin-vue-i18n': ^4.1.0
+  prettier: ^3.3.2
+  'typescript-eslint': ^8.44.0
+  'vue-eslint-parser': ^10.2.0
+
+  # Vue ecosystem
+  '@sentry/vue': ^8.48.0
+  '@vueuse/core': ^11.0.0
+  '@vueuse/integrations': ^13.9.0
+  'vite-plugin-html': ^3.2.2
+  'vite-plugin-vue-devtools': ^7.7.6
+  pinia: ^2.1.7
+  'vue-i18n': ^9.14.3
+  'vue-router': ^4.4.3
+  vuefire: ^3.2.1
+
+  # PrimeVue UI framework
+  '@primeuix/forms': 0.0.2
+  '@primeuix/styled': 0.3.2
+  '@primeuix/utils': ^0.3.2
+  '@primevue/core': ^4.2.5
+  '@primevue/forms': ^4.2.5
+  '@primevue/icons': 4.2.5
+  '@primevue/themes': ^4.2.5
+  primeicons: ^7.0.0
+  primevue: ^4.2.5
+
+  # Tailwind CSS and design
+  '@iconify/json': ^2.2.380
+  '@iconify-json/lucide': ^1.1.178
+  '@iconify/tailwind': ^1.1.3
+  '@tailwindcss/vite': ^4.1.12
+  tailwindcss: ^4.1.12
+  'tailwindcss-primeui': ^0.6.1
+  'tw-animate-css': ^1.3.8
+  'unplugin-icons': ^0.22.0
+  'unplugin-vue-components': ^0.28.0
+
+  # Storybook
+  '@storybook/addon-docs': ^9.1.1
+  storybook: ^9.1.6
+  '@storybook/vue3': ^9.1.1
+  '@storybook/vue3-vite': ^9.1.1
+
+  # Data and validation
+  algoliasearch: ^5.21.0
+  firebase: ^11.6.0
+  yjs: ^13.6.27
+  zod: ^3.23.8
+  'zod-validation-error': ^3.3.0
+
+  # Dev tools
+  dotenv: ^16.4.5
+  husky: ^9.0.11
+  jiti: 2.4.2
+  knip: ^5.62.0
+  'lint-staged': ^15.2.7
+
+  # Type definitions
+  '@types/fs-extra': ^11.0.4
+  '@types/jsdom': ^21.1.7
+  '@types/node': ^20.14.8
+  '@types/semver': ^7.7.0
+  '@types/three': ^0.169.0
+  'vue-component-type-helpers': ^3.0.7
+  'zod-to-json-schema': ^3.24.1
+
+  # i18n
+  '@alloc/quick-lru': ^5.2.0
+  '@lobehub/i18n-cli': ^1.25.1
+  '@trivago/prettier-plugin-sort-imports': ^5.2.0
+
 ignoredBuiltDependencies:
   - '@firebase/util'
   - protobufjs

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

@@ -211,7 +211,8 @@ const isSelected = computed(() => {
 })
 
 // Use execution state composable
-const { executing, progress } = useNodeExecutionState(() => nodeData.id)
+const nodeLocatorId = computed(() => getLocatorIdFromNodeData(nodeData))
+const { executing, progress } = useNodeExecutionState(nodeLocatorId)
 
 // Direct access to execution store for error state
 const executionStore = useExecutionStore()

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

@@ -9,7 +9,7 @@
     :data-testid="`node-header-${nodeData?.id || ''}`"
     @dblclick="handleDoubleClick"
   >
-    <div class="flex items-center justify-between relative">
+    <div class="flex items-center justify-between gap-2.5 relative">
       <!-- Collapse/Expand Button -->
       <button
         v-show="!readonly"
@@ -43,24 +43,22 @@
           data-testid="node-pin-indicator"
         />
       </div>
+      <div v-if="!readonly" class="flex items-center lod-toggle shrink-0">
+        <IconButton
+          v-if="isSubgraphNode"
+          size="sm"
+          type="transparent"
+          class="text-stone-200 dark-theme:text-slate-300"
+          data-testid="subgraph-enter-button"
+          title="Enter Subgraph"
+          @click.stop="handleEnterSubgraph"
+          @dblclick.stop
+        >
+          <i class="pi pi-external-link"></i>
+        </IconButton>
+      </div>
       <LODFallback />
     </div>
-
-    <!-- Title Buttons -->
-    <div v-if="!readonly" class="flex items-center lod-toggle">
-      <IconButton
-        v-if="isSubgraphNode"
-        size="sm"
-        type="transparent"
-        class="text-stone-200 dark-theme:text-slate-300"
-        data-testid="subgraph-enter-button"
-        title="Enter Subgraph"
-        @click.stop="handleEnterSubgraph"
-        @dblclick.stop
-      >
-        <i class="pi pi-external-link"></i>
-      </IconButton>
-    </div>
   </div>
 </template>
 

src/renderer/extensions/vueNodes/execution/useNodeExecutionState.ts

@@ -9,27 +9,27 @@ import { useExecutionStore } from '@/stores/executionStore'
  * Provides reactive access to execution state and progress for a specific node
  * by injecting execution data from the parent GraphCanvas provider.
  *
- * @param nodeIdMaybe - The ID of the node to track execution state for
+ * @param nodeLocatorIdMaybe - Locator ID (root or subgraph scoped) of the node to track
  * @returns Object containing reactive execution state and progress
  */
 export const useNodeExecutionState = (
-  nodeIdMaybe: MaybeRefOrGetter<string>
+  nodeLocatorIdMaybe: MaybeRefOrGetter<string | undefined>
 ) => {
-  const nodeId = toValue(nodeIdMaybe)
-  const { uniqueExecutingNodeIdStrings, nodeProgressStates } =
-    storeToRefs(useExecutionStore())
+  const locatorId = computed(() => toValue(nodeLocatorIdMaybe) ?? '')
+  const { nodeLocationProgressStates } = storeToRefs(useExecutionStore())
 
-  const executing = computed(() => {
-    return uniqueExecutingNodeIdStrings.value.has(nodeId)
+  const progressState = computed(() => {
+    const id = locatorId.value
+    return id ? nodeLocationProgressStates.value[id] : undefined
   })
 
+  const executing = computed(() => progressState.value?.state === 'running')
+
   const progress = computed(() => {
-    const state = nodeProgressStates.value[nodeId]
-    return state?.max > 0 ? state.value / state.max : undefined
+    const state = progressState.value
+    return state && state.max > 0 ? state.value / state.max : undefined
   })
 
-  const progressState = computed(() => nodeProgressStates.value[nodeId])
-
   const progressPercentage = computed(() => {
     const prog = progress.value
     return prog !== undefined ? Math.round(prog * 100) : undefined