From 2a14f120458e2a3ed86a52e20419e2f8a649d150 Mon Sep 17 00:00:00 2001
From: AustinMroz <austin@comfy.org>
Date: Thu, 21 May 2026 10:41:06 -0700
Subject: [PATCH] [backport core/1.44]  Fix reactivity of vue subgraph price
 badges (#12384)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Manually backport #12029 to `core/1.44`

Removes tests so it backports cleanly

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-12384-backport-core-1-44-Fix-reactivity-of-vue-subgraph-price-badges-3666d73d3650815cb0dddcace83b733b)
by [Unito](https://www.unito.io)
---
 src/components/node/CreditBadge.vue          |  2 +-
 src/composables/graph/useGraphNodeManager.ts | 10 +++++++++-
 src/composables/node/useNodePricing.test.ts  |  4 ++--
 src/composables/node/useNodePricing.ts       |  4 +---
 src/composables/node/usePriceBadge.ts        |  9 +++++++++
 5 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/node/CreditBadge.vue b/src/components/node/CreditBadge.vue
index dc109e354f..a306eebafc 100644
--- a/src/components/node/CreditBadge.vue
+++ b/src/components/node/CreditBadge.vue
@@ -12,7 +12,7 @@
   </span>
   <span
     v-if="rest"
-    class="-ml-2.5 max-w-max min-w-0 grow basis-0 truncate rounded-r-full bg-component-node-widget-background"
+    class="-ml-2.5 flex h-5 max-w-max min-w-0 grow basis-0 items-center truncate rounded-r-full bg-component-node-widget-background text-xs"
   >
     <span class="pr-2" v-text="rest" />
   </span>
diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts
index efcf059518..b4ce1b9cae 100644
--- a/src/composables/graph/useGraphNodeManager.ts
+++ b/src/composables/graph/useGraphNodeManager.ts
@@ -48,6 +48,8 @@ export interface WidgetSlotMetadata {
   type: string
 }
 
+type Badges = (LGraphBadge | (() => LGraphBadge))[]
+
 /**
  * Minimal render-specific widget data extracted from LiteGraph widgets.
  * Value and metadata (label, hidden, disabled, etc.) are accessed via widgetValueStore.
@@ -107,7 +109,7 @@ export interface VueNodeData {
   title: string
   type: string
   apiNode?: boolean
-  badges?: (LGraphBadge | (() => LGraphBadge))[]
+  badges?: Badges
   bgcolor?: string
   color?: string
   flags?: {
@@ -786,6 +788,12 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
                 showAdvanced: Boolean(propertyEvent.newValue)
               })
               break
+            case 'badges':
+              vueNodeData.set(nodeId, {
+                ...currentData,
+                badges: propertyEvent.newValue as Badges
+              })
+              break
           }
         }
       },
diff --git a/src/composables/node/useNodePricing.test.ts b/src/composables/node/useNodePricing.test.ts
index 950d2e44cb..7533b7b770 100644
--- a/src/composables/node/useNodePricing.test.ts
+++ b/src/composables/node/useNodePricing.test.ts
@@ -625,9 +625,9 @@ describe('useNodePricing', () => {
         getNodeDisplayPrice(node)
         await new Promise((r) => setTimeout(r, 50))
 
-        // VueNodes path bumps per-node ref instead of the global tick.
+        // VueNodes path bumps per-node ref and the global tick.
         expect(getNodeRevisionRef(node.id).value).toBeGreaterThan(revBefore)
-        expect(pricingRevision.value).toBe(tickBefore)
+        expect(pricingRevision.value).toBeGreaterThan(tickBefore)
       } finally {
         LiteGraph.vueNodesMode = false
       }
diff --git a/src/composables/node/useNodePricing.ts b/src/composables/node/useNodePricing.ts
index 634d94d0f6..5d5ed7668e 100644
--- a/src/composables/node/useNodePricing.ts
+++ b/src/composables/node/useNodePricing.ts
@@ -509,10 +509,8 @@ const scheduleEvaluation = (
       if (LiteGraph.vueNodesMode) {
         // VueNodes mode: bump per-node revision (only this node re-renders)
         getNodeRevisionRef(node.id).value++
-      } else {
-        // Nodes 1.0 mode: bump global tick to trigger setDirtyCanvas
-        pricingTick.value++
       }
+      pricingTick.value++
     })
 
   inflight.set(node, { sig, promise })
diff --git a/src/composables/node/usePriceBadge.ts b/src/composables/node/usePriceBadge.ts
index 489e412849..5febb21b16 100644
--- a/src/composables/node/usePriceBadge.ts
+++ b/src/composables/node/usePriceBadge.ts
@@ -18,6 +18,15 @@ export const usePriceBadge = () => {
     } else {
       node.badges.push(...newBadges)
     }
+    const graph = node.graph
+    if (!graph) return
+    graph.trigger('node:property:changed', {
+      type: 'node:property:changed',
+      nodeId: node.id,
+      property: 'badges',
+      oldValue: node.badges,
+      newValue: node.badges
+    })
   }
   function collectCreditsBadges(
     graph: LGraph,