From 6396eb6fa3f8a67b756a85fe78b28a6e75df13e9 Mon Sep 17 00:00:00 2001
From: AustinMroz <austin@comfy.org>
Date: Wed, 17 Dec 2025 18:48:32 -0800
Subject: [PATCH] Fix promoted assets not being assets in vue (#7576)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fixes asset widgets which have been promoted failing to display as
asset widgets and having red names in vue mode.
- Fixes promoted subgraph widgets failing to resolve inputSpec for use
in vue mode.

| Before | After |
| ------ | ----- |
| <img width="360" alt="before"
src="https://github.com/user-attachments/assets/6c2d2763-6ac3-4769-82c5-b1ab1cc5e945"/>
| <img width="360" alt="after"
src="https://github.com/user-attachments/assets/742e218b-ec42-411a-b5a2-021820031e2a"
/>|

I'm not excited that this creates further bloat of SimplifiedWidget.

Known issue
- Similar to #7550, subgraph widgets will have an incorrect callback and
will fail to update value on a fresh reload. This can be "fixed" (made
worse) by entering and exiting the subgraph. Since this creates a
'leaked' widget callback which will then be called.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7576-Fix-promoted-assets-not-being-assets-in-vue-2cc6d73d3650814b8734f69b225b0228)
by [Unito](https://www.unito.io)
---
 src/composables/graph/useGraphNodeManager.ts  | 22 +++++++++++++------
 .../vueNodes/components/NodeWidgets.vue       | 11 +++++-----
 .../widgets/components/WidgetSelect.vue       | 10 ++++-----
 src/stores/nodeDefStore.ts                    | 18 ++++++++++++---
 src/types/simplifiedWidget.ts                 |  3 +++
 5 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts
index 76b5c0413..9bb1598ba 100644
--- a/src/composables/graph/useGraphNodeManager.ts
+++ b/src/composables/graph/useGraphNodeManager.ts
@@ -6,6 +6,7 @@ import { reactiveComputed } from '@vueuse/core'
 import { reactive, shallowReactive } from 'vue'
 
 import { useChainCallback } from '@/composables/functional/useChainCallback'
+import { isProxyWidget } from '@/core/graph/subgraph/proxyWidget'
 import type {
   INodeInputSlot,
   INodeOutputSlot
@@ -42,14 +43,15 @@ export interface SafeWidgetData {
   name: string
   type: string
   value: WidgetValue
-  label?: string
-  options?: IWidgetOptions<unknown>
+  borderStyle?: string
   callback?: ((value: unknown) => void) | undefined
+  controlWidget?: SafeControlWidget
+  isDOMWidget?: boolean
+  label?: string
+  nodeType?: string
+  options?: IWidgetOptions<unknown>
   spec?: InputSpec
   slotMetadata?: WidgetSlotMetadata
-  isDOMWidget?: boolean
-  controlWidget?: SafeControlWidget
-  borderStyle?: string
 }
 
 export interface VueNodeData {
@@ -96,6 +98,11 @@ function getControlWidget(widget: IBaseWidget): SafeControlWidget | undefined {
     update: (value) => (cagWidget.value = normalizeControlOption(value))
   }
 }
+function getNodeType(node: LGraphNode, widget: IBaseWidget) {
+  if (!node.isSubgraphNode() || !isProxyWidget(widget)) return undefined
+  const subNode = node.subgraph.getNodeById(widget._overlay.nodeId)
+  return subNode?.type
+}
 
 export function safeWidgetMapper(
   node: LGraphNode,
@@ -131,12 +138,13 @@ export function safeWidgetMapper(
         value: value,
         borderStyle,
         callback: widget.callback,
+        controlWidget: getControlWidget(widget),
         isDOMWidget: isDOMWidget(widget),
         label: widget.label,
+        nodeType: getNodeType(node, widget),
         options: widget.options,
         spec,
-        slotMetadata: slotInfo,
-        controlWidget: getControlWidget(widget)
+        slotMetadata: slotInfo
       }
     } catch (error) {
       return {
diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
index d9f2acc02..102f67945 100644
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -168,12 +168,13 @@ const processedWidgets = computed((): ProcessedWidget[] => {
       name: widget.name,
       type: widget.type,
       value: widget.value,
-      label: widget.label,
-      options: widgetOptions,
-      callback: widget.callback,
-      spec: widget.spec,
       borderStyle: widget.borderStyle,
-      controlWidget: widget.controlWidget
+      callback: widget.callback,
+      controlWidget: widget.controlWidget,
+      label: widget.label,
+      nodeType: widget.nodeType,
+      options: widgetOptions,
+      spec: widget.spec
     }
 
     function updateHandler(value: WidgetValue) {
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
index f17a268d7..092cc9cce 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue
@@ -1,8 +1,9 @@
 <template>
   <WidgetSelectDropdown
     v-if="isDropdownUIWidget"
-    v-bind="props"
     v-model="modelValue"
+    :widget
+    :node-type="widget.nodeType ?? nodeType"
     :asset-kind="assetKind"
     :allow-upload="allowUpload"
     :upload-folder="uploadFolder"
@@ -100,10 +101,9 @@ const isAssetMode = computed(() => {
   if (isCloud) {
     const settingStore = useSettingStore()
     const isUsingAssetAPI = settingStore.get('Comfy.Assets.UseAssetAPI')
-    const isEligible = assetService.isAssetBrowserEligible(
-      props.nodeType,
-      props.widget.name
-    )
+    const isEligible =
+      assetService.isAssetBrowserEligible(props.nodeType, props.widget.name) ||
+      props.widget.type === 'asset'
 
     return isUsingAssetAPI && isEligible
   }
diff --git a/src/stores/nodeDefStore.ts b/src/stores/nodeDefStore.ts
index 64ee100f3..849865941 100644
--- a/src/stores/nodeDefStore.ts
+++ b/src/stores/nodeDefStore.ts
@@ -3,6 +3,7 @@ import _ from 'es-toolkit/compat'
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
+import { isProxyWidget } from '@/core/graph/subgraph/proxyWidget'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { transformNodeDefV1ToV2 } from '@/schemas/nodeDef/migration'
 import type {
@@ -358,10 +359,21 @@ export const useNodeDefStore = defineStore('nodeDef', () => {
     node: LGraphNode,
     widgetName: string
   ): InputSpecV2 | undefined {
-    const nodeDef = fromLGraphNode(node)
-    if (!nodeDef) return undefined
+    if (!node.isSubgraphNode()) {
+      const nodeDef = fromLGraphNode(node)
+      if (!nodeDef) return undefined
 
-    return nodeDef.inputs[widgetName]
+      return nodeDef.inputs[widgetName]
+    }
+    const widget = node.widgets?.find((w) => w.name === widgetName)
+    //TODO: resolve spec for linked
+    if (!widget || !isProxyWidget(widget)) return undefined
+
+    const { nodeId, widgetName: subWidgetName } = widget._overlay
+    const subNode = node.subgraph.getNodeById(nodeId)
+    if (!subNode) return undefined
+
+    return getInputSpecForWidget(subNode, subWidgetName)
   }
 
   /**
diff --git a/src/types/simplifiedWidget.ts b/src/types/simplifiedWidget.ts
index 827b1dfc9..40b74f98b 100644
--- a/src/types/simplifiedWidget.ts
+++ b/src/types/simplifiedWidget.ts
@@ -64,6 +64,9 @@ export interface SimplifiedWidget<
   /** Widget options including filtered PrimeVue props */
   options?: O
 
+  /** Override for use with subgraph promoted asset widgets*/
+  nodeType?: string
+
   /** Optional serialization method for custom value handling */
   serializeValue?: () => any