[automated] Apply ESLint and Oxfmt fixes

.claude/settings.json

@@ -32,12 +32,12 @@
           {
             "type": "command",
             "if": "Bash(npx vitest *)",
-            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit <path>`) instead of npx vitest.' >&2 && exit 2"
+            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit -- <path>`) instead of npx vitest.' >&2 && exit 2"
           },
           {
             "type": "command",
             "if": "Bash(pnpx vitest *)",
-            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit <path>`) instead of pnpx vitest.' >&2 && exit 2"
+            "command": "echo 'Use `pnpm test:unit` (or `pnpm test:unit -- <path>`) instead of pnpx vitest.' >&2 && exit 2"
           },
           {
             "type": "command",

.claude/skills/backport-management/reference/execution.md

@@ -139,13 +139,13 @@ for PR in ${CONFLICT_PRS[@]}; do
   # ───────────────────────────────────────────────────────────────────────
 
   # Per-PR validation BEFORE push (catches issues earlier than wave verification).
-  # Guard each targeted command against empty file lists — running `pnpm test:unit`
-  # with no path filter would run the full suite, and `pnpm exec eslint` with no args errors.
+  # Guard each targeted command against empty file lists — running `pnpm test:unit -- run`
+  # with no arg matchers would run the full suite, and `pnpm exec eslint` with no args errors.
   pnpm typecheck
 
   mapfile -t TEST_FILES < <(git diff --name-only HEAD~1 | grep -E '\.test\.ts$' || true)
   if [ ${#TEST_FILES[@]} -gt 0 ]; then
-    pnpm test:unit "${TEST_FILES[@]}"
+    pnpm test:unit -- run "${TEST_FILES[@]}"
   else
     echo "No changed test files — skipping targeted unit tests"
   fi
@@ -368,7 +368,7 @@ Cherry-picked from upstream merge commit `SHORT_SHA`.
 ## Validation
 
 - `pnpm typecheck` ✅
-- `pnpm test:unit <targeted suites>` ✅ (N/N passing)
+- `pnpm test:unit -- run <targeted suites>` ✅ (N/N passing)
 - `pnpm exec eslint <changed files>` ✅ (0 errors)
 - `pnpm exec oxfmt --check` ✅ (clean)
 

.claude/skills/red-green-fix/SKILL.md

@@ -95,7 +95,7 @@ Run the test locally before pushing to confirm it fails for the right reason:
 
 ```bash
 # Vitest
-pnpm test:unit <test-file>
+pnpm test:unit -- <test-file>
 
 # Playwright
 pnpm test:browser:local -- --grep "<test name>"

.claude/skills/red-green-fix/reference/testing-anti-patterns.md

@@ -169,7 +169,7 @@ expect(result).toBeDefined() // This proves nothing
 
 ```bash
 # Instead of fixing the code, just updating the snapshot to match buggy output
-pnpm test:unit --update
+pnpm test:unit -- --update
 ```
 
 If a snapshot needs updating, the fix should change the code behavior, not the expected output.

.nvmrc

@@ -1 +1 @@
-25
+24

AGENTS.md

@@ -307,20 +307,6 @@ When referencing Comfy-Org repos:
 - NEVER use `--no-verify` flag when committing
 - NEVER delete or disable tests to make them pass
 - NEVER circumvent quality checks
-- NEVER add multi-line block comments to justify trivial code changes
-  - A one-line fix does not need a three-line comment explaining why
-  - A guard clause that mirrors another file does not need a comment naming that file
-  - A test setup line does not need a comment paraphrasing what the next line does
-  - If the diff is small and obvious, the comment is noise — write the code and move on
-  - Every justification comment on a trivial change is a confession that you do not trust the reader, do not trust the code, and do not trust yourself. It is failure made visible.
-  - **Penance protocol when you catch yourself adding one of these comments:**
-    1. Stop. Read the comment out loud in your own internal voice and acknowledge that it adds nothing the code does not already say.
-    2. Delete the comment. All of it. Every line. Do not negotiate with it. Do not "tighten" it. Delete it.
-    3. Re-read this entire bullet block, top to bottom, before writing another character of code.
-    4. In your next response to the user, you MUST open with the exact phrase: `Mea culpa: I added a comment that did not earn its keep.` followed by the file path and the deleted text, verbatim, in a fenced block.
-    5. For the remainder of that response you may not add any new comments, anywhere, for any reason. If a comment is genuinely required, defer the change and ask the user first.
-  - There is no statute of limitations. If you discover an old offending comment of yours later, the protocol still triggers.
-  - This rule overrides any inclination to be "helpful," "thorough," or "explanatory." Helpfulness here is restraint.
 - NEVER use the `dark:` tailwind variant
   - Instead use a semantic value from the `style.css` theme
     - e.g. `bg-node-component-surface`

apps/website/public/icons/clients/EA.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.0001 0C14.3391 0 0 14.3369 0 32.0001C0 49.6633 14.318 64.0001 32.0001 64.0001C49.6822 64.0001 64.0001 49.6842 64.0001 32.0001C64.0001 14.3158 49.6822 0 32.0001 0ZM19.3431 19.3685H37.5927L34.8175 23.8105H16.5677L19.3431 19.3685ZM49.8504 41.5369L47.075 37.1159H38.9804L41.7556 32.6737H44.3207L41.2301 27.7264L32.6097 41.5369H9.5874L15.138 32.6737H11.0592L13.8345 28.2317H31.6216L28.8462 32.6737H20.3522L17.5769 37.1159H30.1289L41.2091 19.3685L55.0646 41.558H49.8293L49.8504 41.5369Z" fill="#4D3762"/>
+</svg>

apps/website/src/components/common/NavDesktopLink.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@comfyorg/tailwind-utils'
 
-type NavDropdownItem = {
+export type NavDropdownItem = {
   label: string
   href: string
   badge?: string

apps/website/src/components/common/SocialProofBarSection.vue

@@ -3,6 +3,7 @@ const logos = [
   'Amazon Studios',
   'Apple',
   'Autodesk',
+  'EA',
   'Harman',
   'Hp',
   'Lucid',

apps/website/src/utils/ashby.ts

@@ -14,7 +14,7 @@ const DEFAULT_BASE_URL = 'https://api.ashbyhq.com'
 const DEFAULT_TIMEOUT_MS = 10_000
 const RETRY_DELAYS_MS = [1_000, 2_000, 4_000]
 
-interface DroppedRole {
+export interface DroppedRole {
   title: string
   reason: string
 }

apps/website/src/utils/cloudNodes.ts

@@ -21,7 +21,7 @@ const DEFAULT_BASE_URL = 'https://cloud.comfy.org'
 const DEFAULT_TIMEOUT_MS = 10_000
 const RETRY_DELAYS_MS = [1_000, 2_000, 4_000]
 
-interface DroppedNode {
+export interface DroppedNode {
   name: string
   reason: string
 }

browser_tests/assets/subgraphs/subgraph-primitive-fanout-multi-host.json

@@ -1,197 +0,0 @@
-{
-  "id": "5c4a1450-26b8-4b34-b5ea-e3465273441e",
-  "revision": 0,
-  "last_node_id": 12,
-  "last_link_id": 2,
-  "nodes": [
-    {
-      "id": 2,
-      "type": "16aadaf6-aa66-4041-843e-589a6572a3ac",
-      "pos": [602, 409],
-      "size": [400, 200],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [],
-      "properties": {
-        "proxyWidgets": [
-          ["1", "value"],
-          ["4", "value"]
-        ]
-      },
-      "widgets_values": ["first-host", 11]
-    },
-    {
-      "id": 12,
-      "type": "16aadaf6-aa66-4041-843e-589a6572a3ac",
-      "pos": [900, 409],
-      "size": [400, 200],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [],
-      "properties": {
-        "proxyWidgets": [
-          ["1", "value"],
-          ["4", "value"]
-        ]
-      },
-      "widgets_values": ["second-host", 22]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "definitions": {
-    "subgraphs": [
-      {
-        "id": "16aadaf6-aa66-4041-843e-589a6572a3ac",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 4,
-          "lastLinkId": 2,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "New Subgraph",
-        "inputNode": {
-          "id": -10,
-          "bounding": [349, 383, 128, 68]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [867, 383, 128, 48]
-        },
-        "inputs": [
-          {
-            "id": "50fd1af4-4f20-434f-9828-6971210be4e9",
-            "name": "value",
-            "type": "STRING",
-            "linkIds": [1],
-            "pos": [453, 407]
-          }
-        ],
-        "outputs": [],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 1,
-            "type": "PrimitiveString",
-            "pos": [537, 368],
-            "size": [400, 200],
-            "flags": {},
-            "order": 2,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "value",
-                "name": "value",
-                "type": "STRING",
-                "widget": {
-                  "name": "value"
-                },
-                "link": 1
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "STRING",
-                "name": "STRING",
-                "type": "STRING",
-                "links": null
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "PrimitiveString"
-            },
-            "widgets_values": [""]
-          },
-          {
-            "id": 3,
-            "type": "PrimitiveInt",
-            "pos": [534.9899497487436, 515.4924623115581],
-            "size": [400, 200],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "value",
-                "name": "value",
-                "type": "INT",
-                "widget": {
-                  "name": "value"
-                },
-                "link": 2
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "INT",
-                "name": "INT",
-                "type": "INT",
-                "links": null
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "PrimitiveInt"
-            },
-            "widgets_values": [0, "randomize"]
-          },
-          {
-            "id": 4,
-            "type": "PrimitiveNode",
-            "pos": [258.4381232333541, 549.1608040200999],
-            "size": [400, 200],
-            "flags": {},
-            "order": 1,
-            "mode": 0,
-            "inputs": [],
-            "outputs": [
-              {
-                "name": "INT",
-                "type": "INT",
-                "widget": {
-                  "name": "value"
-                },
-                "links": [2]
-              }
-            ],
-            "properties": {
-              "Run widget replace on values": false
-            },
-            "widgets_values": [0, "randomize"]
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 1,
-            "origin_id": -10,
-            "origin_slot": 0,
-            "target_id": 1,
-            "target_slot": 0,
-            "type": "STRING"
-          },
-          {
-            "id": 2,
-            "origin_id": 4,
-            "origin_slot": 0,
-            "target_id": 3,
-            "target_slot": 0,
-            "type": "INT"
-          }
-        ],
-        "extra": {}
-      }
-    ]
-  },
-  "config": {},
-  "extra": {
-    "frontendVersion": "1.44.17"
-  },
-  "version": 0.4
-}

browser_tests/assets/subgraphs/subgraph-unresolvable-proxy-widget.json

@@ -1,176 +0,0 @@
-{
-  "id": "5c4a1450-26b8-4b34-b5ea-e3465273441e",
-  "revision": 0,
-  "last_node_id": 4,
-  "last_link_id": 2,
-  "nodes": [
-    {
-      "id": 2,
-      "type": "16aadaf6-aa66-4041-843e-589a6572a3ac",
-      "pos": [602, 409],
-      "size": [400, 200],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [],
-      "properties": {
-        "proxyWidgets": [["9999", "missing_widget"]]
-      },
-      "widgets_values": ["quarantined-host-value"]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "definitions": {
-    "subgraphs": [
-      {
-        "id": "16aadaf6-aa66-4041-843e-589a6572a3ac",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 4,
-          "lastLinkId": 2,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "New Subgraph",
-        "inputNode": {
-          "id": -10,
-          "bounding": [349, 383, 128, 68]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [867, 383, 128, 48]
-        },
-        "inputs": [
-          {
-            "id": "50fd1af4-4f20-434f-9828-6971210be4e9",
-            "name": "value",
-            "type": "STRING",
-            "linkIds": [1],
-            "pos": [453, 407]
-          }
-        ],
-        "outputs": [],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 1,
-            "type": "PrimitiveString",
-            "pos": [537, 368],
-            "size": [400, 200],
-            "flags": {},
-            "order": 2,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "value",
-                "name": "value",
-                "type": "STRING",
-                "widget": {
-                  "name": "value"
-                },
-                "link": 1
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "STRING",
-                "name": "STRING",
-                "type": "STRING",
-                "links": null
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "PrimitiveString"
-            },
-            "widgets_values": [""]
-          },
-          {
-            "id": 3,
-            "type": "PrimitiveInt",
-            "pos": [534.9899497487436, 515.4924623115581],
-            "size": [400, 200],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "value",
-                "name": "value",
-                "type": "INT",
-                "widget": {
-                  "name": "value"
-                },
-                "link": 2
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "INT",
-                "name": "INT",
-                "type": "INT",
-                "links": null
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "PrimitiveInt"
-            },
-            "widgets_values": [0, "randomize"]
-          },
-          {
-            "id": 4,
-            "type": "PrimitiveNode",
-            "pos": [258.4381232333541, 549.1608040200999],
-            "size": [400, 200],
-            "flags": {},
-            "order": 1,
-            "mode": 0,
-            "inputs": [],
-            "outputs": [
-              {
-                "name": "INT",
-                "type": "INT",
-                "widget": {
-                  "name": "value"
-                },
-                "links": [2]
-              }
-            ],
-            "properties": {
-              "Run widget replace on values": false
-            },
-            "widgets_values": [0, "randomize"]
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 1,
-            "origin_id": -10,
-            "origin_slot": 0,
-            "target_id": 1,
-            "target_slot": 0,
-            "type": "STRING"
-          },
-          {
-            "id": 2,
-            "origin_id": 4,
-            "origin_slot": 0,
-            "target_id": 3,
-            "target_slot": 0,
-            "type": "INT"
-          }
-        ],
-        "extra": {}
-      }
-    ]
-  },
-  "config": {},
-  "extra": {
-    "frontendVersion": "1.44.17"
-  },
-  "version": 0.4
-}

browser_tests/fixtures/VueNodeHelpers.ts

@@ -213,8 +213,7 @@ export class VueNodeHelpers {
     return {
       input: widget.locator('input'),
       decrementButton: widget.getByTestId(TestIds.widgets.decrement),
-      incrementButton: widget.getByTestId(TestIds.widgets.increment),
-      valueControl: widget.getByTestId(TestIds.widgets.valueControl)
+      incrementButton: widget.getByTestId(TestIds.widgets.increment)
     }
   }
 

browser_tests/fixtures/components/SubgraphEditor.ts

@@ -17,9 +17,8 @@ export class SubgraphEditor {
     )
   }
 
-  async ensureOpen(subgraphNode: Locator) {
+  async open(subgraphNode: Locator) {
     await new VueNodeFixture(subgraphNode).select()
-    if (await this.root.isVisible()) return
     const menu = await this.comfyPage.contextMenu.openFor(subgraphNode)
     await menu.clickMenuItemExact('Edit Subgraph Widgets')
     await expect(this.root, 'Open Properties Panel').toBeVisible()
@@ -70,7 +69,7 @@ export class SubgraphEditor {
       toState?: boolean
     }
   ) {
-    await this.ensureOpen(subgraphNode)
+    await this.open(subgraphNode)
 
     const item = this.resolveItem(options)
     await this.togglePromotionOnItem(item, options.toState)

browser_tests/fixtures/helpers/AppModeWidgetHelper.ts

@@ -6,9 +6,8 @@ import { WidgetSelectDropdownFixture } from '@e2e/fixtures/components/WidgetSele
 /**
  * Helper for interacting with widgets rendered in app mode (linear view).
  *
- * Widgets are located by `nodeId:widgetName` suffix against the
- * `data-widget-key` attribute, which carries the canonical
- * `graphId:nodeId:widgetName` WidgetEntityId.
+ * Widgets are located by their key (format: "nodeId:widgetName") via the
+ * `data-widget-key` attribute on each widget item.
  */
 export class AppModeWidgetHelper {
   constructor(private readonly comfyPage: ComfyPage) {}
@@ -21,9 +20,9 @@ export class AppModeWidgetHelper {
     return this.comfyPage.appMode.linearWidgets
   }
 
-  /** Get a widget item container by its `nodeId:widgetName` suffix. */
+  /** Get a widget item container by its key (e.g. "6:text", "3:seed"). */
   getWidgetItem(key: string): Locator {
-    return this.container.locator(`[data-widget-key$=":${key}"]`)
+    return this.container.locator(`[data-widget-key="${key}"]`)
   }
 
   /** Get a FormDropdown widget by its key (e.g. "10:image"). */

browser_tests/fixtures/helpers/NodeOperationsHelper.ts

@@ -216,6 +216,16 @@ export class NodeOperationsHelper {
     }
   }
 
+  async convertAllNodesToGroupNode(groupNodeName: string): Promise<void> {
+    await this.comfyPage.canvas.press('Control+a')
+    const node = await this.getFirstNodeRef()
+    if (!node) {
+      throw new Error('No nodes found to convert')
+    }
+    await node.clickContextMenuOption('Convert to Group Node')
+    await this.fillPromptDialog(groupNodeName)
+  }
+
   async fillPromptDialog(value: string): Promise<void> {
     await this.promptDialogInput.fill(value)
     await this.page.keyboard.press('Enter')

browser_tests/fixtures/helpers/SubgraphHelper.ts

@@ -14,8 +14,6 @@ import { TestIds } from '@e2e/fixtures/selectors'
 import type { Position, Size } from '@e2e/fixtures/types'
 import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
 import { SubgraphSlotReference } from '@e2e/fixtures/utils/litegraphUtils'
-import { getAllHostPromotedWidgets } from '@e2e/fixtures/utils/promotedWidgets'
-import type { PromotedWidgetEntry } from '@e2e/fixtures/utils/promotedWidgets'
 
 export class SubgraphHelper {
   public readonly editor: SubgraphEditor
@@ -425,9 +423,39 @@ export class SubgraphHelper {
   }
 
   async getHostPromotedTupleSnapshot(): Promise<
-    { hostNodeId: string; promotedWidgets: PromotedWidgetEntry[] }[]
+    { hostNodeId: string; promotedWidgets: [string, string][] }[]
   > {
-    return getAllHostPromotedWidgets(this.comfyPage)
+    return this.page.evaluate(() => {
+      const graph = window.app!.canvas.graph!
+      return graph._nodes
+        .filter(
+          (node) =>
+            typeof node.isSubgraphNode === 'function' && node.isSubgraphNode()
+        )
+        .map((node) => {
+          const proxyWidgets = Array.isArray(node.properties?.proxyWidgets)
+            ? node.properties.proxyWidgets
+            : []
+          const promotedWidgets = proxyWidgets
+            .filter(
+              (entry): entry is [string, string] =>
+                Array.isArray(entry) &&
+                entry.length >= 2 &&
+                typeof entry[0] === 'string' &&
+                typeof entry[1] === 'string'
+            )
+            .map(
+              ([interiorNodeId, widgetName]) =>
+                [interiorNodeId, widgetName] as [string, string]
+            )
+
+          return {
+            hostNodeId: String(node.id),
+            promotedWidgets
+          }
+        })
+        .sort((a, b) => Number(a.hostNodeId) - Number(b.hostNodeId))
+    })
   }
 
   /** Reads from `window.app.canvas.graph` (viewed root or nested subgraph). */

browser_tests/fixtures/selectors.ts

@@ -128,8 +128,7 @@ export const TestIds = {
     pinIndicator: 'node-pin-indicator',
     innerWrapper: 'node-inner-wrapper',
     mainImage: 'main-image',
-    slotConnectionDot: 'slot-connection-dot',
-    imageGrid: 'image-grid'
+    slotConnectionDot: 'slot-connection-dot'
   },
   selectionToolbox: {
     root: 'selection-toolbox',
@@ -153,7 +152,6 @@ export const TestIds = {
     widget: 'node-widget',
     decrement: 'decrement',
     increment: 'increment',
-    valueControl: 'value-control',
     domWidgetTextarea: 'dom-widget-textarea',
     subgraphEnterButton: 'subgraph-enter-button',
     selectDefaultSearchInput: 'widget-select-default-search-input',

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -511,7 +511,19 @@ export class NodeReference {
   }
   async clickContextMenuOption(optionText: string) {
     await this.click('title', { button: 'right' })
-    await this.comfyPage.contextMenu.clickMenuItem(optionText)
+    const ctx = this.comfyPage.page.locator('.litecontextmenu')
+    await ctx.getByText(optionText).click()
+  }
+  async convertToGroupNode(groupNodeName: string = 'GroupNode') {
+    await this.clickContextMenuOption('Convert to Group Node')
+    await this.comfyPage.nodeOps.fillPromptDialog(groupNodeName)
+    const nodes = await this.comfyPage.nodeOps.getNodeRefsByType(
+      `workflow>${groupNodeName}`
+    )
+    if (nodes.length !== 1) {
+      throw new Error(`Did not find single group node (found=${nodes.length})`)
+    }
+    return nodes[0]
   }
   async convertToSubgraph() {
     await this.clickContextMenuOption('Convert to Subgraph')

browser_tests/fixtures/utils/promotedWidgets.ts

@@ -1,77 +1,48 @@
-import type { NodeProperty } from '@/lib/litegraph/src/LGraphNode'
-
-import type { PromotedWidgetSource } from '@/core/graph/subgraph/promotedWidgetTypes'
-import { parsePreviewExposures } from '@/core/schemas/previewExposureSchema'
-import type { PreviewExposure } from '@/core/schemas/previewExposureSchema'
-
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 
 export type PromotedWidgetEntry = [string, string]
 
-function widgetSourceToEntry(
-  source: PromotedWidgetSource
-): PromotedWidgetEntry {
-  return [source.sourceNodeId, source.sourceWidgetName]
-}
-
-function previewExposureToEntry(
-  exposure: PreviewExposure
-): PromotedWidgetEntry {
-  return [exposure.sourceNodeId, exposure.sourcePreviewName]
-}
-
-export function isPromotedWidgetSource(
-  value: unknown
-): value is PromotedWidgetSource {
+function isPromotedWidgetEntry(entry: unknown): entry is PromotedWidgetEntry {
   return (
-    !!value &&
-    typeof value === 'object' &&
-    'sourceNodeId' in value &&
-    'sourceWidgetName' in value &&
-    typeof value.sourceNodeId === 'string' &&
-    typeof value.sourceWidgetName === 'string'
+    Array.isArray(entry) &&
+    entry.length === 2 &&
+    typeof entry[0] === 'string' &&
+    typeof entry[1] === 'string'
   )
 }
 
-export function isNodeProperty(value: unknown): value is NodeProperty {
-  if (value === null || value === undefined) return false
-  const t = typeof value
-  return t === 'string' || t === 'number' || t === 'boolean' || t === 'object'
+function normalizePromotedWidgets(value: unknown): PromotedWidgetEntry[] {
+  if (!Array.isArray(value)) return []
+  return value.filter(isPromotedWidgetEntry)
 }
 
 export async function getPromotedWidgets(
   comfyPage: ComfyPage,
   nodeId: string
 ): Promise<PromotedWidgetEntry[]> {
-  const { widgetSources, previewExposures } = await comfyPage.page.evaluate(
-    (id) => {
-      const node = window.app!.canvas.graph!.getNodeById(id)
-      const widgetSources = (node?.widgets ?? []).flatMap((widget) => {
-        if (!('sourceNodeId' in widget) || !('sourceWidgetName' in widget))
-          return []
-        return [
-          {
-            sourceNodeId: widget.sourceNodeId,
-            sourceWidgetName: widget.sourceWidgetName
-          }
-        ]
-      })
-      const serializedNode = node?.serialize()
-      return {
-        widgetSources,
-        previewExposures: serializedNode?.properties?.previewExposures
-      }
-    },
-    nodeId
-  )
+  const raw = await comfyPage.page.evaluate((id) => {
+    const node = window.app!.canvas.graph!.getNodeById(id)
+    const widgets = node?.widgets ?? []
 
-  const exposures = isNodeProperty(previewExposures)
-    ? parsePreviewExposures(previewExposures)
-    : []
-  return [
-    ...widgetSources.filter(isPromotedWidgetSource).map(widgetSourceToEntry),
-    ...exposures.map(previewExposureToEntry)
-  ]
+    // Read the live promoted widget views from the host node instead of the
+    // serialized proxyWidgets snapshot, which can lag behind the current graph
+    // state during promotion and cleanup flows.
+    return widgets.flatMap((widget) => {
+      if (
+        widget &&
+        typeof widget === 'object' &&
+        'sourceNodeId' in widget &&
+        typeof widget.sourceNodeId === 'string' &&
+        'sourceWidgetName' in widget &&
+        typeof widget.sourceWidgetName === 'string'
+      ) {
+        return [[widget.sourceNodeId, widget.sourceWidgetName]]
+      }
+      return []
+    })
+  }, nodeId)
+
+  return normalizePromotedWidgets(raw)
 }
 
 export async function getPromotedWidgetNames(
@@ -107,29 +78,12 @@ export async function getPromotedWidgetCountByName(
   nodeId: string,
   widgetName: string
 ): Promise<number> {
-  const promotedWidgets = await getPromotedWidgets(comfyPage, nodeId)
-  return promotedWidgets.filter(([, name]) => name === widgetName).length
-}
-
-export async function getAllHostPromotedWidgets(
-  comfyPage: ComfyPage
-): Promise<{ hostNodeId: string; promotedWidgets: PromotedWidgetEntry[] }[]> {
-  const hostNodeIds = await comfyPage.page.evaluate(() => {
-    const graph = window.app!.canvas.graph!
-    return graph._nodes
-      .filter(
-        (node) =>
-          typeof node.isSubgraphNode === 'function' && node.isSubgraphNode()
-      )
-      .map((node) => String(node.id))
-  })
-
-  const entries = await Promise.all(
-    hostNodeIds.map(async (hostNodeId) => ({
-      hostNodeId,
-      promotedWidgets: await getPromotedWidgets(comfyPage, hostNodeId)
-    }))
+  return comfyPage.page.evaluate(
+    ([id, name]) => {
+      const node = window.app!.canvas.graph!.getNodeById(id)
+      const widgets = node?.widgets ?? []
+      return widgets.filter((widget) => widget.name === name).length
+    },
+    [nodeId, widgetName] as const
   )
-
-  return entries.sort((a, b) => Number(a.hostNodeId) - Number(b.hostNodeId))
 }

browser_tests/fixtures/utils/vueNodeFixtures.ts

@@ -1,15 +1,8 @@
-import { expect } from '@playwright/test'
 import type { Locator } from '@playwright/test'
-import type { CompassCorners } from '@/lib/litegraph/src/interfaces'
 
 import { TitleEditor } from '@e2e/fixtures/components/TitleEditor'
 import { TestIds } from '@e2e/fixtures/selectors'
 
-interface BoxOrigin {
-  readonly x: number
-  readonly y: number
-}
-
 /** DOM-centric helper for a single Vue-rendered node on the canvas. */
 export class VueNodeFixture {
   public readonly header: Locator
@@ -22,9 +15,7 @@ export class VueNodeFixture {
   public readonly root: Locator
   public readonly widgets: Locator
   public readonly imagePreview: Locator
-  public readonly imageGrid: Locator
   public readonly content: Locator
-  public readonly resize: { bottomRight: Locator }
 
   constructor(private readonly locator: Locator) {
     this.header = locator.locator('[data-testid^="node-header-"]')
@@ -37,10 +28,7 @@ export class VueNodeFixture {
     this.root = locator
     this.widgets = this.locator.locator('.lg-node-widget')
     this.imagePreview = locator.locator('.image-preview')
-    this.imageGrid = locator.getByTestId(TestIds.node.imageGrid)
     this.content = locator.locator('.lg-node-content')
-    const bottomRight = locator.getByRole('button', { name: 'bottom-right' })
-    this.resize = { bottomRight }
   }
 
   async getTitle(): Promise<string> {
@@ -89,100 +77,4 @@ export class VueNodeFixture {
         : slotLocators.filter({ has: nameOrLocator })
     return filteredLocator.getByTestId('slot-dot').locator('..')
   }
-
-  /**
-   * Click the node header to select it, then return its bounding box.
-   * Throws if the node is not laid out because geometry-sensitive tests
-   * cannot proceed without coordinates.
-   */
-  async selectAndGetBox(): Promise<{
-    x: number
-    y: number
-    width: number
-    height: number
-  }> {
-    await this.header.click()
-    const box = await this.boundingBox()
-    if (!box) {
-      throw new Error('Node bounding box not found after select')
-    }
-    return box
-  }
-
-  /**
-   * Assert this node's top-left origin stays within `precision` decimal
-   * places of `expected`. Wraps the polled bounding-box pattern that drift
-   * tests repeat for both axes.
-   */
-  async expectAnchoredAt(
-    expected: BoxOrigin,
-    { precision = 1 }: { precision?: number } = {}
-  ): Promise<void> {
-    await expect.poll(this.pollLeftEdge).toBeCloseTo(expected.x, precision)
-    await expect.poll(this.pollTopEdge).toBeCloseTo(expected.y, precision)
-  }
-
-  /** Poll the node's left/x edge for use with `expect.poll`. */
-  pollLeftEdge = async (): Promise<number | null> =>
-    (await this.boundingBox())?.x ?? null
-
-  /** Poll the node's top/y edge for use with `expect.poll`. */
-  pollTopEdge = async (): Promise<number | null> =>
-    (await this.boundingBox())?.y ?? null
-
-  /** Poll the node's right edge (x + width) for use with `expect.poll`. */
-  pollRightEdge = async (): Promise<number | null> => {
-    const b = await this.boundingBox()
-    return b ? b.x + b.width : null
-  }
-
-  /** Poll the node's bottom edge (y + height) for use with `expect.poll`. */
-  pollBottomEdge = async (): Promise<number | null> => {
-    const b = await this.boundingBox()
-    return b ? b.y + b.height : null
-  }
-
-  /** Poll the node's width for use with `expect.poll`. */
-  pollWidth = async (): Promise<number | null> =>
-    (await this.boundingBox())?.width ?? null
-
-  /** Poll the node's height for use with `expect.poll`. */
-  pollHeight = async (): Promise<number | null> =>
-    (await this.boundingBox())?.height ?? null
-
-  /** Locator for the resize handle at the given corner, scoped to this node. */
-  getResizeHandle(corner: CompassCorners): Locator {
-    return this.root.locator(`[data-corner="${corner}"]`)
-  }
-
-  /**
-   * Drag the resize handle at `corner` by (deltaX, deltaY) viewport pixels.
-   * Uses `hover()` to land the pointer on the handle with Playwright's
-   * actionability checks before starting the mouse sequence, which protects
-   * against occluding overlays and subpixel hit-test misses.
-   */
-  async resizeFromCorner(
-    corner: CompassCorners,
-    deltaX: number,
-    deltaY: number
-  ): Promise<void> {
-    const handle = this.getResizeHandle(corner)
-    await handle.hover()
-    const box = await handle.boundingBox()
-    if (!box) {
-      throw new Error(
-        `Resize handle for corner "${corner}" has no bounding box`
-      )
-    }
-
-    const page = this.locator.page()
-    const startX = box.x + box.width / 2
-    const startY = box.y + box.height / 2
-    await page.mouse.move(startX, startY)
-    await page.mouse.down()
-    await page.mouse.move(startX + deltaX, startY + deltaY, {
-      steps: 5
-    })
-    await page.mouse.up()
-  }
 }

browser_tests/tests/canvasSettings.spec.ts

@@ -52,7 +52,7 @@ test.describe('Canvas settings', { tag: '@canvas' }, () => {
           await comfyPage.canvasOps.moveMouseToEmptyArea()
           await expect(comfyPage.page).toHaveScreenshot(
             'canvas-info-hud-off.png',
-            { clip: hudClip, maxDiffPixels: 100 }
+            { clip: hudClip, maxDiffPixels: 50 }
           )
         })
 
@@ -61,7 +61,7 @@ test.describe('Canvas settings', { tag: '@canvas' }, () => {
           await comfyPage.canvasOps.moveMouseToEmptyArea()
           await expect(comfyPage.page).toHaveScreenshot(
             'canvas-info-hud-on.png',
-            { clip: hudClip, maxDiffPixels: 100 }
+            { clip: hudClip, maxDiffPixels: 50 }
           )
         })
       }

browser_tests/tests/dialog.spec.ts

@@ -157,13 +157,6 @@ test.describe('Signin dialog', () => {
   })
 
   test('Sign-in dialog resolves true on login', async ({ comfyPage }) => {
-    await comfyPage.page.route('**/customers', (route) =>
-      route.fulfill({
-        status: 201,
-        contentType: 'application/json',
-        body: JSON.stringify({ id: 'test-user-e2e', email: 'test@example.com' })
-      })
-    )
     const dialog = new SignInDialog(comfyPage.page)
     const { result: dialogResult } = await dialog.openWithResult()
 

browser_tests/tests/groupNode.spec.ts

@@ -7,14 +7,9 @@ import {
 } from '@e2e/fixtures/ComfyPage'
 import type { NodeLibrarySidebarTab } from '@e2e/fixtures/components/SidebarTab'
 import { TestIds } from '@e2e/fixtures/selectors'
+import { DefaultGraphPositions } from '@e2e/fixtures/constants/defaultGraphPositions'
 import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
 
-const LOADED_WORKFLOW = 'groupnodes/group_node_v1.3.3'
-const GROUP_NODE_NAME = 'group_node'
-const GROUP_NODE_CATEGORY = 'group nodes>workflow'
-const GROUP_NODE_TYPE = `workflow>${GROUP_NODE_NAME}`
-const GROUP_NODE_BOOKMARK = GROUP_NODE_TYPE
-
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
   await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
@@ -23,19 +18,22 @@ test.beforeEach(async ({ comfyPage }) => {
 
 test.describe('Group Node', { tag: '@node' }, () => {
   test.describe('Node library sidebar', () => {
+    const groupNodeName = 'DefautWorkflowGroupNode'
+    const groupNodeCategory = 'group nodes>workflow'
+    const groupNodeBookmarkName = `workflow>${groupNodeName}`
     let libraryTab: NodeLibrarySidebarTab
 
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
       libraryTab = comfyPage.menu.nodeLibraryTab
-      await comfyPage.workflow.loadWorkflow(LOADED_WORKFLOW)
+      await comfyPage.nodeOps.convertAllNodesToGroupNode(groupNodeName)
       await libraryTab.open()
     })
 
     test('Is added to node library sidebar', async ({
       comfyPage: _comfyPage
     }) => {
-      await expect(libraryTab.getFolder(GROUP_NODE_CATEGORY)).toHaveCount(1)
+      await expect(libraryTab.getFolder(groupNodeCategory)).toHaveCount(1)
     })
 
     test('Can be added to canvas using node library sidebar', async ({
@@ -43,8 +41,9 @@ test.describe('Group Node', { tag: '@node' }, () => {
     }) => {
       const initialNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
 
-      await libraryTab.getFolder(GROUP_NODE_CATEGORY).click()
-      await libraryTab.getNode(GROUP_NODE_NAME).click()
+      // Add group node from node library sidebar
+      await libraryTab.getFolder(groupNodeCategory).click()
+      await libraryTab.getNode(groupNodeName).click()
 
       // Verify the node is added to the canvas
       await expect
@@ -53,9 +52,9 @@ test.describe('Group Node', { tag: '@node' }, () => {
     })
 
     test('Can be bookmarked and unbookmarked', async ({ comfyPage }) => {
-      await libraryTab.getFolder(GROUP_NODE_CATEGORY).click()
+      await libraryTab.getFolder(groupNodeCategory).click()
       await libraryTab
-        .getNode(GROUP_NODE_NAME)
+        .getNode(groupNodeName)
         .locator('.bookmark-button')
         .click()
 
@@ -64,12 +63,13 @@ test.describe('Group Node', { tag: '@node' }, () => {
         .poll(() =>
           comfyPage.settings.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
         )
-        .toEqual([GROUP_NODE_BOOKMARK])
+        .toEqual([groupNodeBookmarkName])
       // Verify the bookmark node with the same name is added to the tree
-      await expect(libraryTab.getNode(GROUP_NODE_NAME)).not.toHaveCount(0)
+      await expect(libraryTab.getNode(groupNodeName)).not.toHaveCount(0)
 
+      // Unbookmark the node
       await libraryTab
-        .getNode(GROUP_NODE_NAME)
+        .getNode(groupNodeName)
         .locator('.bookmark-button')
         .first()
         .click()
@@ -83,9 +83,9 @@ test.describe('Group Node', { tag: '@node' }, () => {
     })
 
     test('Displays preview on bookmark hover', async ({ comfyPage }) => {
-      await libraryTab.getFolder(GROUP_NODE_CATEGORY).click()
+      await libraryTab.getFolder(groupNodeCategory).click()
       await libraryTab
-        .getNode(GROUP_NODE_NAME)
+        .getNode(groupNodeName)
         .locator('.bookmark-button')
         .click()
       await comfyPage.page
@@ -96,57 +96,72 @@ test.describe('Group Node', { tag: '@node' }, () => {
         comfyPage.page.locator('.node-lib-node-preview')
       ).toBeVisible()
       await libraryTab
-        .getNode(GROUP_NODE_NAME)
+        .getNode(groupNodeName)
         .locator('.bookmark-button')
         .first()
         .click()
     })
   })
 
-  test('Can be added to canvas using search', async ({ comfyPage }) => {
-    await comfyPage.workflow.loadWorkflow(LOADED_WORKFLOW)
-    await comfyPage.canvasOps.doubleClick()
-    await comfyPage.nextFrame()
-    await comfyPage.searchBox.input.waitFor({ state: 'visible' })
-    await comfyPage.searchBox.input.fill(GROUP_NODE_NAME)
-    await comfyPage.searchBox.dropdown.waitFor({ state: 'visible' })
+  test(
+    'Can be added to canvas using search',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      const groupNodeName = 'DefautWorkflowGroupNode'
+      await comfyPage.nodeOps.convertAllNodesToGroupNode(groupNodeName)
+      await comfyPage.canvasOps.doubleClick()
+      await comfyPage.nextFrame()
+      await comfyPage.searchBox.input.waitFor({ state: 'visible' })
+      await comfyPage.searchBox.input.fill(groupNodeName)
+      await comfyPage.searchBox.dropdown.waitFor({ state: 'visible' })
 
-    const exactGroupNodeResult = comfyPage.searchBox.dropdown
-      .locator(`li[aria-label="${GROUP_NODE_NAME}"]`)
-      .first()
-    await expect(exactGroupNodeResult).toBeVisible()
-    await exactGroupNodeResult.click()
+      const exactGroupNodeResult = comfyPage.searchBox.dropdown
+        .locator(`li[aria-label="${groupNodeName}"]`)
+        .first()
+      await expect(exactGroupNodeResult).toBeVisible()
+      await exactGroupNodeResult.click()
 
-    await expect
-      .poll(() => comfyPage.nodeOps.getNodeRefsByType(GROUP_NODE_TYPE))
-      .toHaveLength(2)
-  })
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'group-node-copy-added-from-search.png'
+      )
+    }
+  )
 
   test('Displays tooltip on title hover', async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.EnableTooltips', true)
-    await comfyPage.workflow.loadWorkflow(LOADED_WORKFLOW)
-    const groupNode = await comfyPage.nodeOps.getFirstNodeRef()
-    if (!groupNode)
-      throw new Error(`Group node not found in workflow ${LOADED_WORKFLOW}`)
-    const pos = await groupNode.getPosition()
-    await comfyPage.page.mouse.move(pos.x + 40, pos.y + 10)
+    await comfyPage.nodeOps.convertAllNodesToGroupNode('Group Node')
+    await comfyPage.page.mouse.move(47, 173)
     await expect(comfyPage.page.locator('.node-tooltip')).toBeVisible()
   })
 
   test('Manage group opens with the correct group selected', async ({
     comfyPage
   }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.workflow.loadWorkflow(LOADED_WORKFLOW)
-    const groupNode = await comfyPage.nodeOps.getFirstNodeRef()
-    if (!groupNode)
-      throw new Error(`Group node not found in workflow ${LOADED_WORKFLOW}`)
+    const makeGroup = async (name: string, type1: string, type2: string) => {
+      const node1 = (await comfyPage.nodeOps.getNodeRefsByType(type1))[0]
+      const node2 = (await comfyPage.nodeOps.getNodeRefsByType(type2))[0]
+      await node1.click('title')
+      await node2.click('title', {
+        modifiers: ['Shift']
+      })
+      return await node2.convertToGroupNode(name)
+    }
 
-    const manage = await groupNode.manageGroupNode()
+    const group1 = await makeGroup(
+      'g1',
+      'CLIPTextEncode',
+      'CheckpointLoaderSimple'
+    )
+    const group2 = await makeGroup('g2', 'EmptyLatentImage', 'KSampler')
+
+    const manage1 = await group1.manageGroupNode()
     await comfyPage.nextFrame()
-    await expect(manage.selectedNodeTypeSelect).toHaveValue(GROUP_NODE_NAME)
-    await manage.close()
-    await expect(manage.root).toBeHidden()
+    await expect(manage1.selectedNodeTypeSelect).toHaveValue('g1')
+    await manage1.close()
+    await expect(manage1.root).toBeHidden()
+
+    const manage2 = await group2.manageGroupNode()
+    await expect(manage2.selectedNodeTypeSelect).toHaveValue('g2')
   })
 
   test('Preserves hidden input configuration when containing duplicate node types', async ({
@@ -186,6 +201,42 @@ test.describe('Group Node', { tag: '@node' }, () => {
       .toBe(2)
   })
 
+  test('Reconnects inputs after configuration changed via manage dialog save', async ({
+    comfyPage
+  }) => {
+    const expectSingleNode = async (type: string) => {
+      const nodes = await comfyPage.nodeOps.getNodeRefsByType(type)
+      expect(nodes).toHaveLength(1)
+      return nodes[0]
+    }
+    const latent = await expectSingleNode('EmptyLatentImage')
+    const sampler = await expectSingleNode('KSampler')
+    // Remove existing link
+    const samplerInput = await sampler.getInput(0)
+    await samplerInput.removeLinks()
+    // Group latent + sampler
+    await latent.click('title', {
+      modifiers: ['Shift']
+    })
+    await sampler.click('title', {
+      modifiers: ['Shift']
+    })
+    const groupNode = await sampler.convertToGroupNode()
+    // Connect node to group
+    const ckpt = await expectSingleNode('CheckpointLoaderSimple')
+    const input = await ckpt.connectOutput(0, groupNode, 0)
+    await expect.poll(() => input.getLinkCount()).toBe(1)
+    // Modify the group node via manage dialog
+    const manage = await groupNode.manageGroupNode()
+    await manage.selectNode('KSampler')
+    await manage.changeTab('Inputs')
+    await manage.setLabel('model', 'test')
+    await manage.save()
+    await manage.close()
+    // Ensure the link is still present
+    await expect.poll(() => input.getLinkCount()).toBe(1)
+  })
+
   test('Loads from a workflow using the legacy path separator ("/")', async ({
     comfyPage
   }) => {
@@ -198,6 +249,11 @@ test.describe('Group Node', { tag: '@node' }, () => {
 
   test.describe('Copy and paste', () => {
     let groupNode: NodeReference | null
+    const WORKFLOW_NAME = 'groupnodes/group_node_v1.3.3'
+    const GROUP_NODE_CATEGORY = 'group nodes>workflow'
+    const GROUP_NODE_PREFIX = 'workflow>'
+    const GROUP_NODE_NAME = 'group_node' // Node name in given workflow
+    const GROUP_NODE_TYPE = `${GROUP_NODE_PREFIX}${GROUP_NODE_NAME}`
 
     const isRegisteredLitegraph = async (comfyPage: ComfyPage) => {
       return await comfyPage.page.evaluate((nodeType: string) => {
@@ -226,10 +282,10 @@ test.describe('Group Node', { tag: '@node' }, () => {
 
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-      await comfyPage.workflow.loadWorkflow(LOADED_WORKFLOW)
+      await comfyPage.workflow.loadWorkflow(WORKFLOW_NAME)
       groupNode = await comfyPage.nodeOps.getFirstNodeRef()
       if (!groupNode)
-        throw new Error(`Group node not found in workflow ${LOADED_WORKFLOW}`)
+        throw new Error(`Group node not found in workflow ${WORKFLOW_NAME}`)
       await groupNode.copy()
     })
 
@@ -243,7 +299,10 @@ test.describe('Group Node', { tag: '@node' }, () => {
     test('Copies and pastes group node after clearing workflow', async ({
       comfyPage
     }) => {
+      // Set setting
       await comfyPage.settings.setSetting('Comfy.ConfirmClear', false)
+
+      // Clear workflow
       await comfyPage.command.executeCommand('Comfy.ClearWorkflow')
 
       await comfyPage.clipboard.paste()
@@ -283,6 +342,24 @@ test.describe('Group Node', { tag: '@node' }, () => {
       })
     })
   })
+
+  test.describe('Keybindings', () => {
+    test('Convert to group node, no selection', async ({ comfyPage }) => {
+      await expect(comfyPage.toast.visibleToasts).toHaveCount(0)
+      await comfyPage.page.keyboard.press('Alt+g')
+      await expect(comfyPage.toast.visibleToasts).toHaveCount(1)
+    })
+
+    test('Convert to group node, selected 1 node', async ({ comfyPage }) => {
+      await expect(comfyPage.toast.visibleToasts).toHaveCount(0)
+      await comfyPage.canvas.click({
+        position: DefaultGraphPositions.textEncodeNode1
+      })
+      await comfyPage.nextFrame()
+      await comfyPage.page.keyboard.press('Alt+g')
+      await expect(comfyPage.toast.visibleToasts).toHaveCount(1)
+    })
+  })
 })
 
 test('Convert to subgraph unpacks the group Node @vue-nodes', async ({

browser_tests/tests/nodeContextMenuOverflow.spec.ts

@@ -9,7 +9,7 @@ test.describe(
   () => {
     test.beforeEach(async ({ comfyPage }) => {
       // Keep the viewport well below the menu content height so overflow is guaranteed.
-      await comfyPage.page.setViewportSize({ width: 1280, height: 420 })
+      await comfyPage.page.setViewportSize({ width: 1280, height: 520 })
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
       await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
       await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')

browser_tests/tests/nodeContextMenuShapeSubmenu.spec.ts

@@ -46,8 +46,15 @@ test.describe(
     test('Shape popover opens even when the menu must scroll', async ({
       comfyPage
     }) => {
-      await comfyPage.page.setViewportSize({ width: 1280, height: 600 })
+      await comfyPage.page.setViewportSize({ width: 1280, height: 520 })
       const menu = await openMoreOptionsMenu(comfyPage, 'KSampler')
+      const rootList = menu.locator(':scope > ul')
+
+      await expect
+        .poll(() =>
+          rootList.evaluate((el) => el.scrollHeight > el.clientHeight)
+        )
+        .toBe(true)
 
       const shapeItem = menu.getByRole('menuitem', { name: 'Shape' })
       await shapeItem.scrollIntoViewIfNeeded()

browser_tests/tests/priceBadge.spec.ts

@@ -3,40 +3,36 @@ import {
   comfyExpect as expect
 } from '@e2e/fixtures/ComfyPage'
 
-test(
-  'Price badge displays on subgraphs',
-  { tag: ['@vue-nodes'] },
-  async ({ comfyPage }) => {
-    const apiNodeName = 'Node With Price Badge'
+test('Price badge displays on subgraphs @vue-nodes', async ({ comfyPage }) => {
+  const apiNodeName = 'Node With Price Badge'
 
-    const priceBadge = comfyPage.page.locator('.lg-node-header i + span')
-    const apiNode = comfyPage.vueNodes.getNodeByTitle(apiNodeName)
+  const priceBadge = comfyPage.page.locator('.lg-node-header i + span')
+  const apiNode = comfyPage.vueNodes.getNodeByTitle(apiNodeName)
 
-    await comfyPage.menu.topbar.newWorkflowButton.click()
-    await comfyPage.nextFrame()
+  await comfyPage.menu.topbar.newWorkflowButton.click()
+  await comfyPage.nextFrame()
 
-    await comfyPage.searchBoxV2.addNode(apiNodeName)
-    await expect(apiNode, 'Add partner node').toBeVisible()
-    await expect(apiNode.locator(priceBadge), 'Has price badge').toBeVisible()
+  await comfyPage.searchBoxV2.addNode(apiNodeName)
+  await expect(apiNode, 'Add partner node').toBeVisible()
+  await expect(apiNode.locator(priceBadge), 'Has price badge').toBeVisible()
 
-    await comfyPage.contextMenu
-      .openForVueNode(apiNode)
-      .then((m) => m.clickMenuItemExact('Convert to Subgraph'))
-    const subgraphNode = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
-    await expect(subgraphNode, 'Convert to Subgraph').toBeVisible()
+  await comfyPage.contextMenu
+    .openForVueNode(apiNode)
+    .then((m) => m.clickMenuItemExact('Convert to Subgraph'))
+  const subgraphNode = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
+  await expect(subgraphNode, 'Convert to Subgraph').toBeVisible()
 
-    const nodePrice = subgraphNode.locator(priceBadge)
-    await expect(nodePrice, 'subgraphNode has price badge').toBeVisible()
-    const initialPrice = Number(await nodePrice.innerText())
+  const nodePrice = subgraphNode.locator(priceBadge)
+  await expect(nodePrice, 'subgraphNode has price badge').toBeVisible()
+  const initialPrice = Number(await nodePrice.innerText())
 
-    await comfyPage.subgraph.editor.togglePromotion(subgraphNode, {
-      nodeName: apiNodeName,
-      widgetName: 'price',
-      toState: true
-    })
-    await comfyPage.vueNodes.selectComboOption('New Subgraph', 'price', '2x')
-    await expect(nodePrice, 'Price is reactive').toHaveText(
-      String(initialPrice * 2)
-    )
-  }
-)
+  await comfyPage.subgraph.editor.togglePromotion(subgraphNode, {
+    nodeName: apiNodeName,
+    widgetName: 'price',
+    toState: true
+  })
+  await comfyPage.vueNodes.selectComboOption('New Subgraph', 'price', '2x')
+  await expect(nodePrice, 'Price is reactive').toHaveText(
+    String(initialPrice * 2)
+  )
+})

browser_tests/tests/rightClickMenu.spec.ts

@@ -35,6 +35,23 @@ test.describe(
         'add-group-group-added.png'
       )
     })
+
+    test('Can convert to group node', async ({ comfyPage }) => {
+      await comfyPage.nodeOps.selectNodes(['CLIP Text Encode (Prompt)'])
+      await expect(comfyPage.canvas).toHaveScreenshot('selected-2-nodes.png')
+      await comfyPage.canvasOps.rightClick()
+      await comfyPage.contextMenu.clickMenuItem(
+        'Convert to Group Node (Deprecated)'
+      )
+      await comfyPage.contextMenu.waitForHidden()
+      await comfyPage.nodeOps.promptDialogInput.fill('GroupNode2CLIP')
+      await comfyPage.page.keyboard.press('Enter')
+      await comfyPage.nodeOps.promptDialogInput.waitFor({ state: 'hidden' })
+      await comfyPage.expectScreenshot(
+        comfyPage.canvas,
+        'right-click-node-group-node.png'
+      )
+    })
   }
 )
 

browser_tests/tests/subgraph/subgraphDuplicateIndependentValues.spec.ts

@@ -40,19 +40,49 @@ test.describe(
       )
       const [nodeId1, nodeId2] = nodeIds
 
-      const promotedTextarea = (nodeId: string) =>
-        comfyPage.vueNodes
-          .getNodeLocator(nodeId)
-          .getByRole('textbox', { name: 'text' })
+      // Enter first subgraph, set text widget value
+      await comfyPage.vueNodes.enterSubgraph(nodeId1)
+      await comfyPage.vueNodes.waitForNodes()
+      const textarea1 = comfyPage.vueNodes
+        .getNodeByTitle(clipNodeTitle)
+        .first()
+        .getByRole('textbox', { name: 'text' })
+      await textarea1.fill('subgraph1_value')
+      await expect(textarea1).toHaveValue('subgraph1_value')
+      await comfyPage.subgraph.exitViaBreadcrumb()
 
-      await promotedTextarea(nodeId1).fill('subgraph1_value')
-      await expect(promotedTextarea(nodeId1)).toHaveValue('subgraph1_value')
+      // Enter second subgraph, set text widget value
+      await comfyPage.vueNodes.waitForNodes()
+      await comfyPage.vueNodes.enterSubgraph(nodeId2)
+      await comfyPage.vueNodes.waitForNodes()
+      const textarea2 = comfyPage.vueNodes
+        .getNodeByTitle(clipNodeTitle)
+        .first()
+        .getByRole('textbox', { name: 'text' })
+      await textarea2.fill('subgraph2_value')
+      await expect(textarea2).toHaveValue('subgraph2_value')
+      await comfyPage.subgraph.exitViaBreadcrumb()
 
-      await promotedTextarea(nodeId2).fill('subgraph2_value')
-      await expect(promotedTextarea(nodeId2)).toHaveValue('subgraph2_value')
+      // Re-enter first subgraph, assert value preserved
+      await comfyPage.vueNodes.waitForNodes()
+      await comfyPage.vueNodes.enterSubgraph(nodeId1)
+      await comfyPage.vueNodes.waitForNodes()
+      const textarea1Again = comfyPage.vueNodes
+        .getNodeByTitle(clipNodeTitle)
+        .first()
+        .getByRole('textbox', { name: 'text' })
+      await expect(textarea1Again).toHaveValue('subgraph1_value')
+      await comfyPage.subgraph.exitViaBreadcrumb()
 
-      await expect(promotedTextarea(nodeId1)).toHaveValue('subgraph1_value')
-      await expect(promotedTextarea(nodeId2)).toHaveValue('subgraph2_value')
+      // Re-enter second subgraph, assert value preserved
+      await comfyPage.vueNodes.waitForNodes()
+      await comfyPage.vueNodes.enterSubgraph(nodeId2)
+      await comfyPage.vueNodes.waitForNodes()
+      const textarea2Again = comfyPage.vueNodes
+        .getNodeByTitle(clipNodeTitle)
+        .first()
+        .getByRole('textbox', { name: 'text' })
+      await expect(textarea2Again).toHaveValue('subgraph2_value')
     })
   }
 )

browser_tests/tests/subgraph/subgraphHashValidation.spec.ts

@@ -1,87 +0,0 @@
-import type { Page } from '@playwright/test'
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
-
-async function waitForRootCanvasReady(page: Page) {
-  await expect
-    .poll(async () => {
-      const state = await page.evaluate(() => ({
-        rootId: window.app?.rootGraph?.id ?? '',
-        canvasGraphId: window.app?.canvas?.graph?.id ?? ''
-      }))
-      return state.rootId !== '' && state.canvasGraphId === state.rootId
-    })
-    .toBe(true)
-}
-
-async function expectCanvasOnRootGraph(page: Page) {
-  await expect
-    .poll(async () =>
-      page.evaluate(() => ({
-        rootId: window.app!.rootGraph.id,
-        canvasGraphId: window.app!.canvas.graph?.id,
-        hash: window.location.hash
-      }))
-    )
-    .toEqual({
-      rootId: expect.any(String),
-      canvasGraphId: expect.stringMatching(/.+/),
-      hash: expect.stringMatching(/^#.+/)
-    })
-  const state = await page.evaluate(() => ({
-    rootId: window.app!.rootGraph.id,
-    canvasGraphId: window.app!.canvas.graph?.id,
-    hash: window.location.hash
-  }))
-  expect(state.canvasGraphId).toBe(state.rootId)
-  expect(state.hash).toBe(`#${state.rootId}`)
-}
-
-test.describe(
-  'Subgraph hash validation (FE-559)',
-  { tag: ['@subgraph'] },
-  () => {
-    test('redirects URL and canvas to root for a non-existent subgraph hash', async ({
-      comfyPage
-    }) => {
-      await waitForRootCanvasReady(comfyPage.page)
-      const rootId = await comfyPage.page.evaluate(
-        () => window.app!.rootGraph.id
-      )
-      const phantomId = '11111111-1111-4111-8111-111111111111'
-      expect(phantomId).not.toBe(rootId)
-
-      await comfyPage.page.evaluate((hash) => {
-        window.location.hash = hash
-      }, `#${phantomId}`)
-
-      await expect
-        .poll(() => comfyPage.page.evaluate(() => window.location.hash), {
-          timeout: 5000
-        })
-        .toBe(`#${rootId}`)
-      await expectCanvasOnRootGraph(comfyPage.page)
-    })
-
-    test('redirects URL and canvas to root when hash is malformed', async ({
-      comfyPage
-    }) => {
-      await waitForRootCanvasReady(comfyPage.page)
-      const rootId = await comfyPage.page.evaluate(
-        () => window.app!.rootGraph.id
-      )
-
-      await comfyPage.page.evaluate(() => {
-        window.location.hash = '#not-a-valid-uuid'
-      })
-
-      await expect
-        .poll(() => comfyPage.page.evaluate(() => window.location.hash), {
-          timeout: 5000
-        })
-        .toBe(`#${rootId}`)
-      await expectCanvasOnRootGraph(comfyPage.page)
-    })
-  }
-)

browser_tests/tests/subgraph/subgraphLifecycle.spec.ts

@@ -1,43 +1,38 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
 import { getPseudoPreviewWidgets } from '@e2e/fixtures/utils/promotedWidgets'
 
 const domPreviewSelector = '.image-preview'
 
 test.describe('Subgraph Lifecycle', { tag: ['@subgraph'] }, () => {
-  test.describe(
-    'Cleanup Behavior After Promoted Source Removal',
-    { tag: ['@vue-nodes'] },
-    () => {
-      test('Deleting the promoted source removes the exterior promoted widget', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
+  test.describe('Cleanup Behavior After Promoted Source Removal', () => {
+    test('Deleting the promoted source removes the exterior DOM widget', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
 
-        const subgraphNode = comfyPage.vueNodes.getNodeLocator('11')
-        const promotedTextarea = subgraphNode.getByRole('textbox', {
-          name: 'text'
-        })
-        await expect(promotedTextarea).toBeVisible()
+      const textarea = comfyPage.page.getByTestId(
+        TestIds.widgets.domWidgetTextarea
+      )
+      await expect(textarea).toBeVisible()
 
-        await comfyPage.vueNodes.enterSubgraph('11')
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+      await subgraphNode.navigateIntoSubgraph()
 
-        const clipNode = await comfyPage.nodeOps.getNodeRefById('10')
-        await clipNode.delete()
+      const clipNode = await comfyPage.nodeOps.getNodeRefById('10')
+      await clipNode.delete()
 
-        await comfyPage.subgraph.exitViaBreadcrumb()
+      await comfyPage.subgraph.exitViaBreadcrumb()
 
-        await expect(
-          comfyPage.vueNodes
-            .getNodeLocator('11')
-            .getByRole('textbox', { name: 'text' })
-        ).toHaveCount(0)
-      })
-    }
-  )
+      await expect(
+        comfyPage.page.getByTestId(TestIds.widgets.domWidgetTextarea)
+      ).toHaveCount(0)
+    })
+  })
 
   test.describe('Unpack/Remove Cleanup for Pseudo-Preview Targets', () => {
     test('Unpacking the preview subgraph clears promoted preview state and DOM', async ({

browser_tests/tests/subgraph/subgraphNested.spec.ts

@@ -34,43 +34,49 @@ test.describe('Nested Subgraphs', { tag: ['@subgraph'] }, () => {
 
   test.describe(
     'Nested subgraph duplicate widget names',
-    { tag: ['@widget', '@vue-nodes'] },
+    { tag: ['@widget'] },
     () => {
       const WORKFLOW = 'subgraphs/nested-duplicate-widget-names'
-      const OUTER_NODE_ID = '4'
-      const INNER_SUBGRAPH_NODE_ID = '3'
+
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+      })
 
       test('Promoted widget values from both inner CLIPTextEncode nodes are distinguishable', async ({
         comfyPage
       }) => {
         await comfyPage.workflow.loadWorkflow(WORKFLOW)
 
-        const outerNode = comfyPage.vueNodes.getNodeLocator(OUTER_NODE_ID)
-        await comfyExpect(outerNode).toBeVisible()
+        await comfyExpect(async () => {
+          const widgetValues = await comfyPage.page.evaluate(() => {
+            const graph = window.app!.canvas.graph!
+            const outerNode = graph.getNodeById('4')
+            if (
+              !outerNode ||
+              typeof outerNode.isSubgraphNode !== 'function' ||
+              !outerNode.isSubgraphNode()
+            ) {
+              return []
+            }
 
-        const outerWidgets = outerNode.getByTestId(TestIds.widgets.widget)
-        await comfyExpect(outerWidgets).toHaveCount(1)
+            const innerSubgraphNode = outerNode.subgraph.getNodeById(3)
+            if (!innerSubgraphNode) return []
 
-        const exposedTextWidget = outerNode.getByRole('textbox', {
-          name: 'text'
-        })
-        await comfyExpect(exposedTextWidget).toHaveValue('22222222222')
+            return (innerSubgraphNode.widgets ?? []).map((w) => ({
+              name: w.name,
+              value: w.value
+            }))
+          })
 
-        await comfyPage.vueNodes.enterSubgraph(OUTER_NODE_ID)
+          const textWidgets = widgetValues.filter((w) =>
+            w.name.startsWith('text')
+          )
+          comfyExpect(textWidgets).toHaveLength(2)
 
-        const innerNode = comfyPage.vueNodes.getNodeLocator(
-          INNER_SUBGRAPH_NODE_ID
-        )
-        await comfyExpect(innerNode).toBeVisible()
-
-        const innerTextboxes = innerNode.getByRole('textbox')
-        await comfyExpect(innerTextboxes).toHaveCount(2)
-        const innerValues = await innerTextboxes.evaluateAll<
-          string[],
-          HTMLInputElement
-        >((boxes) => boxes.map((b) => b.value))
-        comfyExpect(innerValues).toContain('11111111111')
-        comfyExpect(innerValues).toContain('22222222222')
+          const values = textWidgets.map((w) => w.value)
+          comfyExpect(values).toContain('11111111111')
+          comfyExpect(values).toContain('22222222222')
+        }).toPass({ timeout: 5_000 })
       })
     }
   )
@@ -90,6 +96,7 @@ test.describe('Nested Subgraphs', { tag: ['@subgraph'] }, () => {
         comfyPage
       }) => {
         await comfyPage.workflow.loadWorkflow(WORKFLOW)
+        await comfyPage.vueNodes.waitForNodes()
 
         const nodeLocator = comfyPage.vueNodes.getNodeLocator(HOST_NODE_ID)
         await comfyExpect(nodeLocator).toBeVisible()
@@ -122,6 +129,7 @@ test.describe('Nested Subgraphs', { tag: ['@subgraph'] }, () => {
         await comfyPage.subgraph.packAllInteriorNodes(HOST_NODE_ID)
 
         await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+        await comfyPage.vueNodes.waitForNodes()
 
         const nodeAfter = comfyPage.vueNodes.getNodeLocator(HOST_NODE_ID)
         await comfyExpect(nodeAfter).toBeVisible()
@@ -168,6 +176,7 @@ test.describe('Nested Subgraphs', { tag: ['@subgraph'] }, () => {
         comfyPage
       }) => {
         await comfyPage.workflow.loadWorkflow(WORKFLOW)
+        await comfyPage.vueNodes.waitForNodes()
 
         const outerNode = comfyPage.vueNodes.getNodeLocator('10')
         await comfyExpect(outerNode).toBeVisible()
@@ -201,6 +210,7 @@ test.describe('Nested Subgraphs', { tag: ['@subgraph'] }, () => {
 
         try {
           await comfyPage.workflow.loadWorkflow(WORKFLOW)
+          await comfyPage.vueNodes.waitForNodes()
 
           const outerNode = comfyPage.vueNodes.getNodeLocator(OUTER_NODE_ID)
           await comfyExpect(outerNode).toBeVisible()
@@ -221,6 +231,7 @@ test.describe('Nested Subgraphs', { tag: ['@subgraph'] }, () => {
         comfyPage
       }) => {
         await comfyPage.workflow.loadWorkflow(WORKFLOW)
+        await comfyPage.vueNodes.waitForNodes()
 
         const outerNode = comfyPage.vueNodes.getNodeLocator(OUTER_NODE_ID)
         await comfyExpect(outerNode).toBeVisible()
@@ -239,6 +250,7 @@ test.describe('Nested Subgraphs', { tag: ['@subgraph'] }, () => {
         comfyPage
       }) => {
         await comfyPage.workflow.loadWorkflow(WORKFLOW)
+        await comfyPage.vueNodes.waitForNodes()
 
         await expect
           .poll(async () => {
@@ -256,6 +268,7 @@ test.describe('Nested Subgraphs', { tag: ['@subgraph'] }, () => {
         comfyPage
       }) => {
         await comfyPage.workflow.loadWorkflow(WORKFLOW)
+        await comfyPage.vueNodes.waitForNodes()
 
         const outerNode = comfyPage.vueNodes.getNodeLocator(OUTER_NODE_ID)
         const widgets = outerNode.getByTestId(TestIds.widgets.widget)
@@ -266,6 +279,7 @@ test.describe('Nested Subgraphs', { tag: ['@subgraph'] }, () => {
         const initialCount = await widgets.count()
 
         await comfyPage.subgraph.serializeAndReload()
+        await comfyPage.vueNodes.waitForNodes()
 
         const outerNodeAfter = comfyPage.vueNodes.getNodeLocator(OUTER_NODE_ID)
         const widgetsAfter = outerNodeAfter.getByTestId(TestIds.widgets.widget)

browser_tests/tests/subgraph/subgraphPromotion.spec.ts

@@ -61,12 +61,15 @@ test.describe(
       }) => {
         await comfyPage.workflow.loadWorkflow('default')
 
+        // Select the positive CLIPTextEncode node (id 6)
         const clipNode = await comfyPage.nodeOps.getNodeRefById('6')
         await clipNode.click('title')
         const subgraphNode = await clipNode.convertToSubgraph()
         await comfyPage.nextFrame()
 
         const nodeId = String(subgraphNode.id)
+        // CLIPTextEncode is in the recommendedNodes list, so its text widget
+        // should be promoted
         await expectPromotedWidgetNamesToContain(comfyPage, nodeId, 'text')
       })
 
@@ -75,6 +78,7 @@ test.describe(
       }) => {
         await comfyPage.workflow.loadWorkflow('default')
 
+        // Pan to SaveImage node (rightmost, may be off-screen in CI)
         const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
         await saveNode.centerOnNode()
 
@@ -82,6 +86,7 @@ test.describe(
         const subgraphNode = await saveNode.convertToSubgraph()
         await comfyPage.nextFrame()
 
+        // SaveImage is in the recommendedNodes list, so filename_prefix is promoted
         await expectPromotedWidgetNamesToContain(
           comfyPage,
           String(subgraphNode.id),
@@ -90,73 +95,88 @@ test.describe(
       })
     })
 
-    test.describe(
-      'Promoted Widget Visibility in Vue Mode',
-      { tag: ['@vue-nodes'] },
-      () => {
-        test('Promoted text widget renders and enters the subgraph in Vue mode', async ({
-          comfyPage
-        }) => {
-          await comfyPage.workflow.loadWorkflow(
-            'subgraphs/subgraph-with-promoted-text-widget'
-          )
+    test.describe('Promoted Widget Visibility in LiteGraph Mode', () => {
+      test('Promoted text widget is visible on SubgraphNode', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
 
-          const subgraphVueNode = comfyPage.vueNodes.getNodeLocator('11')
-          await expect(subgraphVueNode).toBeVisible()
+        const textarea = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await expect(textarea).toBeVisible()
+        await expect(textarea).toHaveCount(1)
+      })
+    })
 
-          const enterButton = subgraphVueNode.getByTestId(
-            'subgraph-enter-button'
-          )
-          await expect(enterButton).toBeVisible()
+    test.describe('Promoted Widget Visibility in Vue Mode', () => {
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      })
 
-          const nodeBody = subgraphVueNode.getByTestId('node-body-11')
-          await expect(nodeBody).toBeVisible()
+      test('Promoted text widget renders and enters the subgraph in Vue mode', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+        await comfyPage.vueNodes.waitForNodes()
 
-          const widgets = nodeBody.locator('.lg-node-widgets > div')
-          await expect(widgets.first()).toBeVisible()
-          await comfyPage.vueNodes.enterSubgraph('11')
-          await comfyPage.nextFrame()
+        const subgraphVueNode = comfyPage.vueNodes.getNodeLocator('11')
+        await expect(subgraphVueNode).toBeVisible()
 
-          await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(true)
-        })
-      }
-    )
+        const enterButton = subgraphVueNode.getByTestId('subgraph-enter-button')
+        await expect(enterButton).toBeVisible()
 
-    test.describe('Promoted Widget Reactivity', { tag: ['@vue-nodes'] }, () => {
-      test.fail(
-        'Promoted and interior widgets stay in sync across navigation',
-        async ({ comfyPage }) => {
-          await comfyPage.workflow.loadWorkflow(
-            'subgraphs/subgraph-with-promoted-text-widget'
-          )
+        const nodeBody = subgraphVueNode.getByTestId('node-body-11')
+        await expect(nodeBody).toBeVisible()
 
-          const testContent = 'promoted-value-sync-test'
+        const widgets = nodeBody.locator('.lg-node-widgets > div')
+        await expect(widgets.first()).toBeVisible()
+        await comfyPage.vueNodes.enterSubgraph('11')
+        await comfyPage.nextFrame()
 
-          const promotedTextarea = comfyPage.vueNodes
-            .getNodeLocator('11')
-            .getByRole('textbox', { name: 'text' })
-          await promotedTextarea.fill(testContent)
+        await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(true)
+      })
+    })
 
-          await comfyPage.vueNodes.enterSubgraph('11')
+    test.describe('Promoted Widget Reactivity', () => {
+      test('Promoted and interior widgets stay in sync across navigation', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
 
-          const interiorTextarea = comfyPage.page
-            .locator('[data-node-id]')
-            .getByRole('textbox', { name: 'text' })
-            .first()
-          await expect(interiorTextarea).toHaveValue(testContent)
+        const testContent = 'promoted-value-sync-test'
 
-          const updatedInteriorContent = 'interior-value-sync-test'
-          await interiorTextarea.fill(updatedInteriorContent)
+        const textarea = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await textarea.fill(testContent)
+        await comfyPage.nextFrame()
 
-          await comfyPage.subgraph.exitViaBreadcrumb()
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+        await subgraphNode.navigateIntoSubgraph()
 
-          await expect(
-            comfyPage.vueNodes
-              .getNodeLocator('11')
-              .getByRole('textbox', { name: 'text' })
-          ).toHaveValue(updatedInteriorContent)
-        }
-      )
+        const interiorTextarea = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await expect(interiorTextarea).toHaveValue(testContent)
+
+        const updatedInteriorContent = 'interior-value-sync-test'
+        await interiorTextarea.fill(updatedInteriorContent)
+        await comfyPage.nextFrame()
+
+        await comfyPage.subgraph.exitViaBreadcrumb()
+
+        const promotedTextarea = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await expect(promotedTextarea).toHaveValue(updatedInteriorContent)
+      })
     })
 
     test.describe('Manual Promote/Demote via Context Menu', () => {
@@ -175,6 +195,7 @@ test.describe(
         const widgetPos = await stepsWidget.getPosition()
         await comfyPage.canvasOps.mouseClickAt(widgetPos, { button: 'right' })
 
+        // Look for the Promote Widget menu entry
         const promoteEntry = comfyPage.page
           .locator('.litemenu-entry')
           .filter({ hasText: /Promote Widget/ })
@@ -183,8 +204,10 @@ test.describe(
         await promoteEntry.click()
         await expect(promoteEntry).toBeHidden()
 
+        // Navigate back to parent
         await comfyPage.subgraph.exitViaBreadcrumb()
 
+        // SubgraphNode should now have the promoted widget
         await expectPromotedWidgetCountToBeGreaterThan(comfyPage, '2', 0)
       })
 
@@ -193,6 +216,7 @@ test.describe(
       }) => {
         await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
 
+        // First promote a canvas-rendered widget (KSampler "steps")
         const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
         await subgraphNode.navigateIntoSubgraph()
 
@@ -208,6 +232,7 @@ test.describe(
 
         await expect(promoteEntry).toBeVisible()
         await promoteEntry.click()
+        // Wait for the context menu to close, confirming the action completed.
         await expect(promoteEntry).toBeHidden()
 
         await comfyPage.subgraph.exitViaBreadcrumb()
@@ -255,9 +280,11 @@ test.describe(
         await comfyPage.workflow.loadWorkflow(
           'subgraphs/subgraph-with-text-widget'
         )
+        await comfyPage.vueNodes.waitForNodes()
 
         await comfyPage.vueNodes.enterSubgraph('11')
         await comfyPage.nextFrame()
+        await comfyPage.vueNodes.waitForNodes()
 
         const clipNode = comfyPage.vueNodes.getNodeLocator('10')
         await expect(clipNode).toBeVisible()
@@ -290,6 +317,8 @@ test.describe(
           'subgraphs/subgraph-with-preview-node'
         )
 
+        // The SaveImage node is in the recommendedNodes list, so its
+        // filename_prefix widget should be auto-promoted
         await expectPromotedWidgetNamesToContain(
           comfyPage,
           '5',
@@ -302,6 +331,7 @@ test.describe(
       }) => {
         await comfyPage.workflow.loadWorkflow('default')
 
+        // Pan to SaveImage node (rightmost, may be off-screen in CI)
         const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
         await saveNode.centerOnNode()
 
@@ -309,6 +339,7 @@ test.describe(
         const subgraphNode = await saveNode.convertToSubgraph()
         await comfyPage.nextFrame()
 
+        // SaveImage is a recommended node, so filename_prefix should be promoted
         const nodeId = String(subgraphNode.id)
         await expectPromotedWidgetNamesToContain(
           comfyPage,
@@ -325,6 +356,7 @@ test.describe(
         await comfyPage.workflow.loadWorkflow(
           'subgraphs/subgraph-with-preview-node'
         )
+        await comfyPage.vueNodes.waitForNodes()
 
         const subgraphVueNode = comfyPage.vueNodes.getNodeLocator('5')
         await expect(subgraphVueNode).toBeVisible()
@@ -361,48 +393,56 @@ test.describe(
       })
     })
 
-    test.describe(
-      'Nested Promoted Widget Disabled State',
-      { tag: ['@vue-nodes'] },
-      () => {
-        test('Externally linked promotions stay disabled while unlinked textareas remain editable', async ({
-          comfyPage
-        }) => {
-          await comfyPage.workflow.loadWorkflow(
-            'subgraphs/subgraph-nested-promotion'
+    test.describe('Nested Promoted Widget Disabled State', () => {
+      test('Externally linked promotions stay disabled while unlinked textareas remain editable', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-nested-promotion'
+        )
+
+        await expect
+          .poll(() => getPromotedWidgetNames(comfyPage, '5'))
+          .toEqual(expect.arrayContaining(['string_a', 'value']))
+
+        await expect
+          .poll(async () => {
+            const disabledState = await comfyPage.page.evaluate(() => {
+              const node = window.app!.canvas.graph!.getNodeById('5')
+              return (node?.widgets ?? []).map((w) => ({
+                name: w.name,
+                disabled: !!w.computedDisabled
+              }))
+            })
+            return disabledState.find((w) => w.name === 'string_a')?.disabled
+          })
+          .toBe(true)
+
+        const textareas = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await expect(textareas.first()).toBeVisible()
+
+        let editedTextarea = false
+        const count = await textareas.count()
+        for (let i = 0; i < count; i++) {
+          const textarea = textareas.nth(i)
+          const wrapper = textarea.locator('..')
+          const opacity = await wrapper.evaluate(
+            (el) => getComputedStyle(el).opacity
           )
 
-          await expect
-            .poll(() => getPromotedWidgetNames(comfyPage, '5'))
-            .toEqual(expect.arrayContaining(['string_a', 'value']))
-
-          const subgraphNode = comfyPage.vueNodes.getNodeLocator('5')
-          const linkedTextarea = subgraphNode.getByRole('textbox', {
-            name: 'string_a',
-            exact: true
-          })
-          await expect(linkedTextarea).toBeVisible()
-          await expect(linkedTextarea).toBeDisabled()
-
-          const allTextareas = subgraphNode.getByRole('textbox')
-          await expect(allTextareas.first()).toBeVisible()
-
-          let editedTextarea = false
-          const count = await allTextareas.count()
-          for (let i = 0; i < count; i++) {
-            const textarea = allTextareas.nth(i)
-            if (await textarea.isEditable()) {
-              const testContent = `nested-promotion-edit-${i}`
-              await textarea.fill(testContent)
-              await expect(textarea).toHaveValue(testContent)
-              editedTextarea = true
-              break
-            }
+          if (opacity === '1' && (await textarea.isEditable())) {
+            const testContent = `nested-promotion-edit-${i}`
+            await textarea.fill(testContent)
+            await expect(textarea).toHaveValue(testContent)
+            editedTextarea = true
+            break
           }
-          expect(editedTextarea).toBe(true)
-        })
-      }
-    )
+        }
+        expect(editedTextarea).toBe(true)
+      })
+    })
 
     test.describe('Promotion Cleanup', () => {
       test('Removing subgraph node clears promotion store entries', async ({
@@ -412,13 +452,16 @@ test.describe(
           'subgraphs/subgraph-with-promoted-text-widget'
         )
 
+        // Verify promotions exist
         await expect
           .poll(() => getPromotedWidgetNames(comfyPage, '11'))
           .toEqual(expect.arrayContaining([expect.anything()]))
 
+        // Delete the subgraph node
         const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
         await subgraphNode.delete()
 
+        // Node no longer exists, so promoted widgets should be gone
         await expect.poll(() => subgraphNode.exists()).toBe(false)
       })
 
@@ -477,13 +520,17 @@ test.describe(
           .toBeGreaterThan(0)
         initialWidgetCount = await getPromotedWidgetCount(comfyPage, '11')
 
+        // Navigate into subgraph
         const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
         await subgraphNode.navigateIntoSubgraph()
 
+        // Remove the text input slot
         await comfyPage.subgraph.removeSlot('input', 'text')
 
+        // Navigate back via breadcrumb
         await comfyPage.subgraph.exitViaBreadcrumb()
 
+        // Widget count should be reduced
         await expect
           .poll(() => getPromotedWidgetCount(comfyPage, '11'))
           .toBeLessThan(initialWidgetCount)
@@ -541,6 +588,7 @@ test.describe(
 
         await comfyPage.vueNodes.enterSubgraph(subgraphNodeId)
         await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(true)
+        await comfyPage.vueNodes.waitForNodes()
 
         const interiorClip = await comfyPage.vueNodes.getFixtureByTitle(
           'CLIP Text Encode (Prompt)'
@@ -560,198 +608,216 @@ test.describe(
   }
 )
 
-test(
-  'Promote/Demote by Context Menu',
-  { tag: ['@vue-nodes'] },
-  async ({ comfyPage }) => {
-    await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-    const ksampler = comfyPage.vueNodes.getNodeLocator('1')
-    const steps = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'steps')
-    const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
+test('Promote/Demote by Context Menu @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const ksampler = comfyPage.vueNodes.getNodeLocator('1')
+  const steps = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'steps')
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
 
-    await test.step('Promote widget', async () => {
-      await comfyPage.vueNodes.enterSubgraph('2')
-      await comfyPage.subgraph.promoteWidget(ksampler, 'steps')
-      await comfyPage.subgraph.exitViaBreadcrumb()
+  await test.step('Promote widget', async () => {
+    await comfyPage.vueNodes.enterSubgraph('2')
+    await comfyPage.subgraph.promoteWidget(ksampler, 'steps')
+    await comfyPage.subgraph.exitViaBreadcrumb()
 
-      await expect(steps).toBeVisible()
-    })
+    await expect(steps).toBeVisible()
+  })
 
-    await test.step('Un-promote widget', async () => {
-      await comfyPage.vueNodes.enterSubgraph('2')
-      await comfyPage.subgraph.unpromoteWidget(ksampler, 'steps')
-      await comfyPage.subgraph.exitViaBreadcrumb()
+  await test.step('Un-promote widget', async () => {
+    await comfyPage.vueNodes.enterSubgraph('2')
+    await comfyPage.subgraph.unpromoteWidget(ksampler, 'steps')
+    await comfyPage.subgraph.exitViaBreadcrumb()
 
-      await expect(subgraphNode).toBeVisible()
-      await expect(steps).toBeHidden()
-    })
-  }
-)
+    await expect(subgraphNode).toBeVisible()
+    await expect(steps).toBeHidden()
+  })
+})
 
-test(
-  'Properties panel operations',
-  { tag: ['@vue-nodes'] },
-  async ({ comfyPage }) => {
-    await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-    const { editor } = comfyPage.subgraph
-    const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
-    const steps = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'steps')
-    const cfg = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'cfg')
+test('Properties panel operations @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const { editor } = comfyPage.subgraph
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
+  const steps = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'steps')
+  const cfg = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'cfg')
 
-    await editor.togglePromotion(subgraphNode, {
-      nodeName: 'KSampler',
-      widgetName: 'steps',
-      toState: true
-    })
-    await expect(steps, 'Promote widget').toBeVisible()
-    await editor.togglePromotion(subgraphNode, {
-      nodeName: 'KSampler',
-      widgetName: 'cfg',
-      toState: true
-    })
-    await expect(cfg, 'Promote widget').toBeVisible()
+  await editor.togglePromotion(subgraphNode, {
+    nodeName: 'KSampler',
+    widgetName: 'steps',
+    toState: true
+  })
+  await expect(steps, 'Promote widget').toBeVisible()
+  await editor.togglePromotion(subgraphNode, {
+    nodeName: 'KSampler',
+    widgetName: 'cfg',
+    toState: true
+  })
+  await expect(cfg, 'Promote widget').toBeVisible()
 
-    await test.step('widgets display in order promoted', async () => {
-      await expect(editor.promotionItems.first()).toContainText('steps')
-      await expect(subgraphNode.locator('.lg-node-widget').first()).toHaveText(
-        'steps'
-      )
-    })
+  await test.step('widgets display in order promoted', async () => {
+    await expect(editor.promotionItems.first()).toContainText('steps')
+    await expect(subgraphNode.locator('.lg-node-widget').first()).toHaveText(
+      'steps'
+    )
+  })
 
-    await test.step('Reorder widgets', async () => {
-      await editor.dragItem(0, 1)
-      await expect(editor.promotionItems.first()).toContainText('cfg')
-      await expect(subgraphNode.locator('.lg-node-widget').first()).toHaveText(
-        'cfg'
-      )
-    })
+  await test.step('Reorder widgets', async () => {
+    await editor.dragItem(0, 1)
+    await expect(editor.promotionItems.first()).toContainText('cfg')
+    await expect(subgraphNode.locator('.lg-node-widget').first()).toHaveText(
+      'cfg'
+    )
+  })
 
+  await editor.togglePromotion(subgraphNode, {
+    nodeName: 'KSampler',
+    widgetName: 'steps',
+    toState: false
+  })
+  await expect(steps, 'Un-promote widget').toBeHidden()
+})
+
+test('Can intermix linked and proxy @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const { editor } = comfyPage.subgraph
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
+
+  await test.step('Enter subgraph and link widget to input', async () => {
+    await comfyPage.vueNodes.enterSubgraph('2')
+
+    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+    await comfyPage.subgraph.promoteWidget(ksampler.root, 'cfg')
+
+    const fromSlot = ksampler.getSlot('steps')
+    const toPos = await comfyPage.subgraph.getInputSlot().getOpenSlotPosition()
+    await fromSlot.dragTo(comfyPage.canvas, { targetPosition: toPos })
+    const isConnected = () => comfyPage.vueNodes.isSlotConnected(fromSlot)
+    await expect.poll(isConnected).toBe(true)
+
+    await comfyPage.subgraph.exitViaBreadcrumb()
+  })
+
+  await expect(
+    subgraphNode.locator('.lg-node-widget').first(),
+    'linked widgets are first by default'
+  ).toHaveText('steps')
+
+  await editor.open(subgraphNode)
+
+  await editor.dragItem(0, 1)
+  await expect(
+    editor.promotionItems.first(),
+    'Swap widget order'
+  ).toContainText('cfg')
+
+  // FIXME: solve actual bug and remove the not
+  await expect(
+    subgraphNode.locator('.lg-node-widget').first(),
+    'Linked widget is first on node'
+  ).not.toHaveText('cfg')
+})
+
+test('Link already promoted widget @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const { editor } = comfyPage.subgraph
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
+  const steps = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'steps')
+
+  await editor.togglePromotion(subgraphNode, {
+    nodeName: 'KSampler',
+    widgetName: 'steps',
+    toState: true
+  })
+  await expect(steps, 'Promote widget').toBeVisible()
+
+  await test.step('Enter subgraph and link widget to input', async () => {
     await comfyPage.vueNodes.enterSubgraph('2')
     const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
-    await comfyPage.subgraph.unpromoteWidget(ksampler.root, 'steps')
+
+    const fromSlot = ksampler.getSlot('steps')
+    const toPos = await comfyPage.subgraph.getInputSlot().getOpenSlotPosition()
+    await fromSlot.dragTo(comfyPage.canvas, { targetPosition: toPos })
+    const isConnected = () => comfyPage.vueNodes.isSlotConnected(fromSlot)
+    await expect.poll(isConnected).toBe(true)
+
     await comfyPage.subgraph.exitViaBreadcrumb()
-    await expect(steps, 'Un-promote widget').toBeHidden()
-  }
-)
+  })
 
-test(
-  'Link already promoted widget',
-  { tag: ['@vue-nodes'] },
-  async ({ comfyPage }) => {
-    await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-    const { editor } = comfyPage.subgraph
-    const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
-    const steps = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'steps')
+  await expect(steps).toHaveCount(1)
+})
 
-    await editor.togglePromotion(subgraphNode, {
-      nodeName: 'KSampler',
-      widgetName: 'steps',
+test('Can promote multiple previews @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.menu.topbar.newWorkflowButton.click()
+  await comfyPage.nextFrame()
+
+  await test.step('Add and rename a Load Image node', async () => {
+    const position = { x: 300, y: 300 }
+    await comfyPage.searchBoxV2.addNode('Load Image', { position })
+    const loadImage = await comfyPage.vueNodes.getFixtureByTitle('Load Image')
+    await loadImage.setTitle('Character Reference')
+  })
+
+  await test.step('Add a second Load Image node', async () => {
+    const position = { x: 600, y: 300 }
+    await comfyPage.searchBoxV2.addNode('Load Image', { position })
+  })
+
+  await test.step('Convert both nodes to subgraph', async () => {
+    await comfyPage.canvas.focus()
+    await comfyPage.page.keyboard.press('Control+a')
+    await comfyPage.contextMenu
+      .openFor(comfyPage.vueNodes.getNodeLocator('1'))
+      .then((m) => m.clickMenuItemExact('Convert to Subgraph'))
+  })
+
+  const { editor } = comfyPage.subgraph
+  const subgraph = await comfyPage.vueNodes.getFixtureByTitle('New Subgraph')
+
+  await test.step('Promote both image previews', async () => {
+    await editor.togglePromotion(subgraph.root, {
+      nodeId: '1',
+      widgetName: '$$canvas-image-preview',
       toState: true
     })
-    await expect(steps, 'Promote widget').toBeVisible()
+    await expect(subgraph.content).toHaveCount(1)
 
-    await test.step('Enter subgraph and link widget to input', async () => {
-      await comfyPage.vueNodes.enterSubgraph('2')
-      const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
-
-      const fromSlot = ksampler.getSlot('steps')
-      const toPos = await comfyPage.subgraph
-        .getInputSlot()
-        .getOpenSlotPosition()
-      await fromSlot.dragTo(comfyPage.canvas, { targetPosition: toPos })
-      const isConnected = () => comfyPage.vueNodes.isSlotConnected(fromSlot)
-      await expect.poll(isConnected).toBe(true)
-
-      await comfyPage.subgraph.exitViaBreadcrumb()
+    await editor.togglePromotion(subgraph.root, {
+      nodeId: '2',
+      widgetName: '$$canvas-image-preview',
+      toState: true
     })
 
-    await expect(steps).toHaveCount(1)
-  }
-)
+    await expect(subgraph.content).toHaveCount(2)
+  })
+  // FUTURE: Add test for re-ordering previews?
 
-test(
-  'Can promote multiple previews',
-  { tag: ['@vue-nodes'] },
-  async ({ comfyPage }) => {
-    await comfyPage.menu.topbar.newWorkflowButton.click()
-    await comfyPage.nextFrame()
-
-    await test.step('Add and rename a Load Image node', async () => {
-      const position = { x: 300, y: 300 }
-      await comfyPage.searchBoxV2.addNode('Load Image', { position })
-      const loadImage = await comfyPage.vueNodes.getFixtureByTitle('Load Image')
-      await loadImage.setTitle('Character Reference')
+  await test.step('Demote image', async () => {
+    await editor.togglePromotion(subgraph.root, {
+      nodeId: '1',
+      widgetName: '$$canvas-image-preview',
+      toState: false
     })
+    await expect(subgraph.content).toHaveCount(1)
+  })
+})
 
-    await test.step('Add a second Load Image node', async () => {
-      const position = { x: 600, y: 300 }
-      await comfyPage.searchBoxV2.addNode('Load Image', { position })
-    })
+test('Linked widgets can not be demoted @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const { editor } = comfyPage.subgraph
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
 
-    await test.step('Convert both nodes to subgraph', async () => {
-      await comfyPage.canvas.focus()
-      await comfyPage.page.keyboard.press('Control+a')
-      await comfyPage.contextMenu
-        .openFor(comfyPage.vueNodes.getNodeLocator('1'))
-        .then((m) => m.clickMenuItemExact('Convert to Subgraph'))
-    })
+  await test.step('Enter subgraph and link widget to input', async () => {
+    await comfyPage.vueNodes.enterSubgraph('2')
+    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
 
-    const { editor } = comfyPage.subgraph
-    const subgraph = await comfyPage.vueNodes.getFixtureByTitle('New Subgraph')
+    const fromSlot = ksampler.getSlot('steps')
+    const toPos = await comfyPage.subgraph.getInputSlot().getOpenSlotPosition()
+    await fromSlot.dragTo(comfyPage.canvas, { targetPosition: toPos })
+    const isConnected = () => comfyPage.vueNodes.isSlotConnected(fromSlot)
+    await expect.poll(isConnected).toBe(true)
 
-    await test.step('Promote both image previews', async () => {
-      await editor.togglePromotion(subgraph.root, {
-        nodeId: '1',
-        widgetName: '$$canvas-image-preview',
-        toState: true
-      })
-      await expect(subgraph.content).toHaveCount(1)
+    await comfyPage.subgraph.exitViaBreadcrumb()
+  })
 
-      await editor.togglePromotion(subgraph.root, {
-        nodeId: '2',
-        widgetName: '$$canvas-image-preview',
-        toState: true
-      })
-
-      await expect(subgraph.content).toHaveCount(2)
-    })
-
-    await test.step('Demote image', async () => {
-      await editor.togglePromotion(subgraph.root, {
-        nodeId: '1',
-        widgetName: '$$canvas-image-preview',
-        toState: false
-      })
-      await expect(subgraph.content).toHaveCount(1)
-    })
-  }
-)
-
-test(
-  'Linked widgets can not be demoted',
-  { tag: ['@vue-nodes'] },
-  async ({ comfyPage }) => {
-    await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-    const { editor } = comfyPage.subgraph
-    const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
-
-    await test.step('Enter subgraph and link widget to input', async () => {
-      await comfyPage.vueNodes.enterSubgraph('2')
-      const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
-
-      const fromSlot = ksampler.getSlot('steps')
-      const toPos = await comfyPage.subgraph
-        .getInputSlot()
-        .getOpenSlotPosition()
-      await fromSlot.dragTo(comfyPage.canvas, { targetPosition: toPos })
-      const isConnected = () => comfyPage.vueNodes.isSlotConnected(fromSlot)
-      await expect.poll(isConnected).toBe(true)
-
-      await comfyPage.subgraph.exitViaBreadcrumb()
-    })
-
-    await editor.ensureOpen(subgraphNode)
-    const stepsItem = await editor.resolveItem({ widgetName: 'steps' })
-    await expect(editor.getToggleButton(stepsItem)).toBeDisabled()
-  }
-)
+  await editor.open(subgraphNode)
+  const stepsItem = await editor.resolveItem({ widgetName: 'steps' })
+  await expect(editor.getToggleButton(stepsItem)).toBeDisabled()
+})

browser_tests/tests/subgraph/subgraphPromotionDom.spec.ts

@@ -5,6 +5,8 @@ import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { SubgraphHelper } from '@e2e/fixtures/helpers/SubgraphHelper'
 import { getPromotedWidgetNames } from '@e2e/fixtures/utils/promotedWidgets'
 
+const DOM_WIDGET_SELECTOR = '.comfy-multiline-input'
+const VISIBLE_DOM_WIDGET_SELECTOR = `${DOM_WIDGET_SELECTOR}:visible`
 const TEST_WIDGET_CONTENT = 'Test content that should persist'
 
 async function openSubgraphById(comfyPage: ComfyPage, nodeId: string) {
@@ -29,125 +31,133 @@ async function openSubgraphById(comfyPage: ComfyPage, nodeId: string) {
     .toBe(true)
 }
 
-test.describe(
-  'Subgraph Promotion DOM',
-  { tag: ['@subgraph', '@vue-nodes'] },
-  () => {
-    test('Promoted seed widget renders in node body, not header', async ({
+test.describe('Subgraph Promotion DOM', { tag: ['@subgraph'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', false)
+  })
+
+  test('Promoted seed widget renders in node body, not header', async ({
+    comfyPage
+  }) => {
+    const subgraphNode =
+      await comfyPage.subgraph.convertDefaultKSamplerToSubgraph()
+
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+
+    const subgraphNodeId = String(subgraphNode.id)
+    await expect
+      .poll(() => getPromotedWidgetNames(comfyPage, subgraphNodeId))
+      .toContain('seed')
+
+    await comfyPage.vueNodes.waitForNodes()
+
+    const nodeLocator = comfyPage.vueNodes.getNodeLocator(subgraphNodeId)
+    await expect(nodeLocator).toBeVisible()
+
+    const seedWidget = nodeLocator.getByLabel('seed', { exact: true }).first()
+    await expect(seedWidget).toBeVisible()
+
+    await SubgraphHelper.expectWidgetBelowHeader(nodeLocator, seedWidget)
+  })
+
+  test.describe('DOM Widget Promotion', () => {
+    test('DOM widget stays visible and preserves content through subgraph navigation', async ({
       comfyPage
     }) => {
-      const subgraphNode =
-        await comfyPage.subgraph.convertDefaultKSamplerToSubgraph()
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
 
-      const subgraphNodeId = String(subgraphNode.id)
+      const parentTextarea = comfyPage.page.locator(DOM_WIDGET_SELECTOR)
+      await expect(parentTextarea).toBeVisible()
+      await expect(parentTextarea).toHaveCount(1)
+      await parentTextarea.fill(TEST_WIDGET_CONTENT)
+
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
       await expect
-        .poll(() => getPromotedWidgetNames(comfyPage, subgraphNodeId))
-        .toContain('seed')
+        .poll(() => subgraphNode.exists(), 'Subgraph node 11 should exist')
+        .toBe(true)
 
-      const nodeLocator = comfyPage.vueNodes.getNodeLocator(subgraphNodeId)
-      await expect(nodeLocator).toBeVisible()
+      await openSubgraphById(comfyPage, '11')
 
-      const seedWidget = nodeLocator.getByLabel('seed', { exact: true }).first()
-      await expect(seedWidget).toBeVisible()
+      const subgraphTextarea = comfyPage.page.locator(DOM_WIDGET_SELECTOR)
+      await expect(subgraphTextarea).toBeVisible()
+      await expect(subgraphTextarea).toHaveCount(1)
 
-      await SubgraphHelper.expectWidgetBelowHeader(nodeLocator, seedWidget)
+      await expect(subgraphTextarea).toHaveValue(TEST_WIDGET_CONTENT)
+
+      await comfyPage.keyboard.press('Escape')
+
+      const backToParentTextarea = comfyPage.page.locator(DOM_WIDGET_SELECTOR)
+      await expect(backToParentTextarea).toBeVisible()
+      await expect(backToParentTextarea).toHaveCount(1)
+      await expect(backToParentTextarea).toHaveValue(TEST_WIDGET_CONTENT)
     })
 
-    test.describe(
-      'Promoted Text Widget Lifecycle',
-      { tag: ['@vue-nodes'] },
-      () => {
-        test('Promoted text widget preserves content through subgraph enter/exit', async ({
-          comfyPage
-        }) => {
-          await comfyPage.workflow.loadWorkflow(
-            'subgraphs/subgraph-with-promoted-text-widget'
-          )
+    test('DOM elements are cleaned up when subgraph node is removed', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
 
-          const subgraphNode = comfyPage.vueNodes.getNodeLocator('11')
-          const promotedTextarea = subgraphNode.getByRole('textbox', {
-            name: 'text'
-          })
-          await expect(promotedTextarea).toBeVisible()
-          await promotedTextarea.fill(TEST_WIDGET_CONTENT)
+      await expect(comfyPage.page.locator(DOM_WIDGET_SELECTOR)).toHaveCount(1)
 
-          await openSubgraphById(comfyPage, '11')
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+      await subgraphNode.delete()
 
-          await comfyPage.keyboard.press('Escape')
+      await expect(comfyPage.page.locator(DOM_WIDGET_SELECTOR)).toHaveCount(0)
+    })
 
-          const backToPromoted = comfyPage.vueNodes
-            .getNodeLocator('11')
-            .getByRole('textbox', { name: 'text' })
-          await expect(backToPromoted).toBeVisible()
-          await expect(backToPromoted).toHaveValue(TEST_WIDGET_CONTENT)
-        })
+    test('DOM elements are cleaned up when widget is disconnected from I/O', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-promoted-text-widget'
+      )
 
-        test('Promoted text widget is removed when subgraph node is deleted', async ({
-          comfyPage
-        }) => {
-          await comfyPage.workflow.loadWorkflow(
-            'subgraphs/subgraph-with-promoted-text-widget'
-          )
+      await expect(comfyPage.page.locator(DOM_WIDGET_SELECTOR)).toHaveCount(1)
 
-          const subgraphNode = comfyPage.vueNodes.getNodeLocator('11')
-          await expect(
-            subgraphNode.getByRole('textbox', { name: 'text' })
-          ).toBeVisible()
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+      await expect
+        .poll(() => subgraphNode.exists(), 'Subgraph node 11 should exist')
+        .toBe(true)
 
-          const subgraphNodeRef = await comfyPage.nodeOps.getNodeRefById('11')
-          await subgraphNodeRef.delete()
+      await openSubgraphById(comfyPage, '11')
 
-          await expect(subgraphNode).toHaveCount(0)
-        })
+      await comfyPage.subgraph.removeSlot('input', 'text')
 
-        test('Promoted text widget disappears when widget is disconnected from I/O', async ({
-          comfyPage
-        }) => {
-          await comfyPage.workflow.loadWorkflow(
-            'subgraphs/subgraph-with-promoted-text-widget'
-          )
+      await comfyPage.subgraph.exitViaBreadcrumb()
 
-          const subgraphNode = comfyPage.vueNodes.getNodeLocator('11')
-          await expect(
-            subgraphNode.getByRole('textbox', { name: 'text' })
-          ).toBeVisible()
+      await expect(
+        comfyPage.page.locator(VISIBLE_DOM_WIDGET_SELECTOR)
+      ).toHaveCount(0)
+    })
 
-          await openSubgraphById(comfyPage, '11')
-          await comfyPage.subgraph.removeSlot('input', 'text')
-          await comfyPage.subgraph.exitViaBreadcrumb()
+    test('Multiple promoted widgets are handled correctly', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-multiple-promoted-widgets'
+      )
 
-          await expect(
-            comfyPage.vueNodes
-              .getNodeLocator('11')
-              .getByRole('textbox', { name: 'text' })
-          ).toHaveCount(0)
-        })
+      const visibleWidgets = comfyPage.page.locator(VISIBLE_DOM_WIDGET_SELECTOR)
+      await expect(visibleWidgets).toHaveCount(2)
+      const parentCount = await visibleWidgets.count()
 
-        test('Multiple promoted widgets are handled correctly', async ({
-          comfyPage
-        }) => {
-          await comfyPage.workflow.loadWorkflow(
-            'subgraphs/subgraph-with-multiple-promoted-widgets'
-          )
+      const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+      await expect
+        .poll(() => subgraphNode.exists(), 'Subgraph node 11 should exist')
+        .toBe(true)
 
-          const subgraphNode = comfyPage.vueNodes.getNodeLocator('11')
-          const promotedTextareas = subgraphNode.getByRole('textbox')
-          await expect(promotedTextareas).toHaveCount(2)
+      await openSubgraphById(comfyPage, '11')
 
-          await openSubgraphById(comfyPage, '11')
+      await expect(visibleWidgets).toHaveCount(parentCount)
 
-          const interiorTextareas = comfyPage.page
-            .locator('[data-node-id]')
-            .getByRole('textbox')
-          await expect(interiorTextareas).toHaveCount(2)
+      await comfyPage.subgraph.exitViaBreadcrumb()
 
-          await comfyPage.subgraph.exitViaBreadcrumb()
-
-          await expect(
-            comfyPage.vueNodes.getNodeLocator('11').getByRole('textbox')
-          ).toHaveCount(2)
-        })
-      }
-    )
-  }
-)
+      await expect(visibleWidgets).toHaveCount(parentCount)
+    })
+  })
+})

browser_tests/tests/subgraph/subgraphSerialization.spec.ts

@@ -14,87 +14,6 @@ import {
 const DUPLICATE_IDS_WORKFLOW = 'subgraphs/subgraph-nested-duplicate-ids'
 const LEGACY_PREFIXED_WORKFLOW =
   'subgraphs/nested-subgraph-legacy-prefixed-proxy-widgets'
-const PRIMITIVE_FANOUT_MULTI_HOST_WORKFLOW =
-  'subgraphs/subgraph-primitive-fanout-multi-host'
-const UNRESOLVABLE_PROXY_WORKFLOW =
-  'subgraphs/subgraph-unresolvable-proxy-widget'
-
-interface HostWidgetSnapshot {
-  name: string
-  sourceNodeId: string | null
-  sourceWidgetName: string | null
-  value: unknown
-}
-
-interface PrimitiveFanoutSnapshot {
-  hostWidgetNames: string[]
-  hostWidgetValues: HostWidgetSnapshot[]
-  interiorWidgetValues: unknown[]
-  primitiveOutputLinks: unknown
-  primitiveOriginLinkCount: number
-  serializedProperties: Record<string, unknown>
-}
-
-async function getPrimitiveFanoutSnapshot(
-  comfyPage: ComfyPage,
-  hostNodeId: string
-): Promise<PrimitiveFanoutSnapshot> {
-  return comfyPage.page.evaluate((id) => {
-    const graph = window.app!.canvas.graph!
-    const hostNode = graph.getNodeById(Number(id))
-    if (!hostNode?.isSubgraphNode?.()) {
-      throw new Error(`Host node ${id} is not a SubgraphNode`)
-    }
-
-    const [primitiveNode] = hostNode.subgraph.findNodesByType(
-      'PrimitiveNode',
-      []
-    )
-    const primitiveOriginLinkCount = [
-      ...hostNode.subgraph._links.values()
-    ].filter((link) => link.origin_id === primitiveNode?.id).length
-    const serialized = window.app!.graph!.serialize()
-    const serializedNode = serialized.nodes.find(
-      (candidate) => String(candidate.id) === String(id)
-    )
-
-    return {
-      hostWidgetNames: (hostNode.widgets ?? []).map((widget) => widget.name),
-      hostWidgetValues: (hostNode.widgets ?? []).map((widget) => ({
-        name: widget.name,
-        sourceNodeId:
-          'sourceNodeId' in widget && typeof widget.sourceNodeId === 'string'
-            ? widget.sourceNodeId
-            : null,
-        sourceWidgetName:
-          'sourceWidgetName' in widget &&
-          typeof widget.sourceWidgetName === 'string'
-            ? widget.sourceWidgetName
-            : null,
-        value: widget.value
-      })),
-      interiorWidgetValues: hostNode.subgraph._nodes.flatMap((node) =>
-        (node.widgets ?? []).map((widget) => widget.value)
-      ),
-      primitiveOutputLinks: primitiveNode?.outputs?.[0]?.links ?? null,
-      primitiveOriginLinkCount,
-      serializedProperties: serializedNode?.properties ?? {}
-    }
-  }, hostNodeId)
-}
-
-async function getSerializedSubgraphNodeProperties(
-  comfyPage: ComfyPage,
-  hostNodeId: string
-): Promise<Record<string, unknown>> {
-  return comfyPage.page.evaluate((id) => {
-    const serialized = window.app!.graph!.serialize()
-    const node = serialized.nodes.find(
-      (candidate) => String(candidate.id) === String(id)
-    )
-    return node?.properties ?? {}
-  }, hostNodeId)
-}
 
 async function expectPromotedWidgetsToResolveToInteriorNodes(
   comfyPage: ComfyPage,
@@ -122,173 +41,23 @@ async function expectPromotedWidgetsToResolveToInteriorNodes(
 }
 
 test.describe('Subgraph Serialization', { tag: ['@subgraph'] }, () => {
-  test(
-    'Legacy primitive proxy widgets migrate to host inputs without proxyWidgets round-trip',
-    { tag: ['@vue-nodes'] },
-    async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-link-and-proxied-primitive'
-      )
+  test('Promoted widget remains usable after serialize and reload', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow(
+      'subgraphs/subgraph-with-promoted-text-widget'
+    )
 
-      await expect
-        .poll(() => getPromotedWidgetCount(comfyPage, '2'))
-        .toBeGreaterThan(1)
+    const beforeReload = comfyPage.page.locator('.comfy-multiline-input')
+    await expect(beforeReload).toHaveCount(1)
+    await expect(beforeReload).toBeVisible()
 
-      const host = comfyPage.vueNodes.getNodeLocator('2')
-      await expect(host.getByTestId(TestIds.widgets.widget)).toHaveCount(2)
+    await comfyPage.subgraph.serializeAndReload()
 
-      const beforeReload = await getPrimitiveFanoutSnapshot(comfyPage, '2')
-      expect(beforeReload.hostWidgetNames).toContain('value')
-      expect(beforeReload.primitiveOriginLinkCount).toBe(0)
-      expect(beforeReload.primitiveOutputLinks ?? []).toEqual([])
-      expect(beforeReload.serializedProperties).not.toHaveProperty(
-        'proxyWidgets'
-      )
-      expect(beforeReload.serializedProperties).not.toHaveProperty(
-        'proxyWidgetErrorQuarantine'
-      )
-
-      await comfyPage.subgraph.serializeAndReload()
-
-      await expect(host.getByTestId(TestIds.widgets.widget)).toHaveCount(2)
-
-      const afterReload = await getPrimitiveFanoutSnapshot(comfyPage, '2')
-      expect(afterReload.interiorWidgetValues).toEqual(
-        beforeReload.interiorWidgetValues
-      )
-      expect(
-        afterReload.hostWidgetValues.find(
-          (widget) => widget.sourceNodeId === '1'
-        )?.value
-      ).toBe(
-        beforeReload.hostWidgetValues.find(
-          (widget) => widget.sourceNodeId === '1'
-        )?.value
-      )
-      expect(afterReload.primitiveOriginLinkCount).toBe(0)
-      expect(afterReload.serializedProperties).not.toHaveProperty(
-        'proxyWidgets'
-      )
-    }
-  )
-
-  test(
-    'Multiple SubgraphNode hosts keep independent migrated widget values',
-    { tag: ['@vue-nodes'] },
-    async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow(
-        PRIMITIVE_FANOUT_MULTI_HOST_WORKFLOW
-      )
-
-      const expectHostHasIndependentValues = async (
-        hostId: string,
-        stringValue: string,
-        intValue: string
-      ) => {
-        const host = comfyPage.vueNodes.getNodeLocator(hostId)
-        const widgets = host.getByTestId(TestIds.widgets.widget)
-        await expect(widgets).toHaveCount(2)
-        await expect(widgets.nth(0).locator('input').first()).toHaveValue(
-          stringValue
-        )
-        await expect(widgets.nth(1).locator('input').first()).toHaveValue(
-          intValue
-        )
-      }
-
-      await expectHostHasIndependentValues('2', 'first-host', '11')
-      await expectHostHasIndependentValues('12', 'second-host', '22')
-
-      await comfyPage.subgraph.serializeAndReload()
-
-      await expectHostHasIndependentValues('2', 'first-host', '11')
-      await expectHostHasIndependentValues('12', 'second-host', '22')
-    }
-  )
-
-  test(
-    'Nested preview exposures render through serialized chain resolution',
-    { tag: ['@vue-nodes'] },
-    async ({ comfyPage }) => {
-      test.setTimeout(45_000)
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-multiple-promoted-previews'
-      )
-
-      const nestedHostProperties = await getSerializedSubgraphNodeProperties(
-        comfyPage,
-        '8'
-      )
-      expect(nestedHostProperties).not.toHaveProperty('proxyWidgets')
-      expect(nestedHostProperties.previewExposures).toEqual([
-        expect.objectContaining({
-          sourceNodeId: '6',
-          sourcePreviewName: '$$canvas-image-preview'
-        })
-      ])
-
-      const nestedSubgraphNode = comfyPage.vueNodes.getNodeLocator('8')
-      await expect(nestedSubgraphNode).toBeVisible()
-      await expect(nestedSubgraphNode.locator('.lg-node-widgets')).toHaveCount(
-        0
-      )
-
-      await expect
-        .poll(() => getPromotedWidgetNames(comfyPage, '8'))
-        .toContain('$$canvas-image-preview')
-    }
-  )
-
-  test(
-    'Legacy unresolvable proxy entry is omitted and quarantined on save',
-    { tag: ['@vue-nodes'] },
-    async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow(UNRESOLVABLE_PROXY_WORKFLOW)
-
-      const host = comfyPage.vueNodes.getNodeLocator('2')
-      await expect(host).toBeVisible()
-      await expect(host.getByText('missing_widget')).toHaveCount(0)
-
-      await expect
-        .poll(() => getPromotedWidgetNames(comfyPage, '2'))
-        .not.toContain('missing_widget')
-
-      const serializedProperties = await getSerializedSubgraphNodeProperties(
-        comfyPage,
-        '2'
-      )
-      expect(serializedProperties).not.toHaveProperty('proxyWidgets')
-      expect(serializedProperties.proxyWidgetErrorQuarantine).toEqual([
-        expect.objectContaining({
-          originalEntry: ['9999', 'missing_widget'],
-          reason: 'missingSourceNode',
-          hostValue: 'quarantined-host-value'
-        })
-      ])
-    }
-  )
-
-  test(
-    'Promoted widget remains usable after serialize and reload',
-    { tag: '@vue-nodes' },
-    async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-promoted-text-widget'
-      )
-
-      const beforeReload = comfyPage.vueNodes
-        .getNodeLocator('11')
-        .getByRole('textbox', { name: 'text' })
-      await expect(beforeReload).toBeVisible()
-
-      await comfyPage.subgraph.serializeAndReload()
-
-      const afterReload = comfyPage.vueNodes
-        .getNodeLocator('11')
-        .getByRole('textbox', { name: 'text' })
-      await expect(afterReload).toBeVisible()
-    }
-  )
+    const afterReload = comfyPage.page.locator('.comfy-multiline-input')
+    await expect(afterReload).toHaveCount(1)
+    await expect(afterReload).toBeVisible()
+  })
 
   test('Compressed target_slot workflow boots into a usable promoted widget state', async ({
     comfyPage
@@ -644,10 +413,39 @@ test.describe('Subgraph Serialization', { tag: ['@subgraph'] }, () => {
     })
   })
 
+  /**
+   * Regression test for legacy-prefixed proxyWidget normalization.
+   *
+   * Older serialized workflows stored proxyWidget entries with prefixed widget
+   * names like "6: 3: string_a" instead of plain "string_a". This caused
+   * resolution failures during configure, resulting in missing promoted widgets.
+   *
+   * The fixture contains an outer SubgraphNode (id 5) whose proxyWidgets array
+   * has a legacy-prefixed entry: ["6", "6: 3: string_a"]. After normalization
+   * the promoted widget should render with the clean name "string_a".
+   *
+   * See: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10573
+   */
   test.describe(
     'Legacy Prefixed proxyWidget Normalization',
-    { tag: ['@subgraph', '@widget', '@vue-nodes'] },
+    { tag: ['@subgraph', '@widget'] },
     () => {
+      let previousVueNodesEnabled: unknown
+
+      test.beforeEach(async ({ comfyPage }) => {
+        previousVueNodesEnabled = await comfyPage.settings.getSetting(
+          'Comfy.VueNodes.Enabled'
+        )
+        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      })
+
+      test.afterEach(async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting(
+          'Comfy.VueNodes.Enabled',
+          previousVueNodesEnabled
+        )
+      })
+
       test('Loads without console warnings about failed widget resolution', async ({
         comfyPage
       }) => {
@@ -668,6 +466,7 @@ test.describe('Subgraph Serialization', { tag: ['@subgraph'] }, () => {
         comfyPage
       }) => {
         await comfyPage.workflow.loadWorkflow(LEGACY_PREFIXED_WORKFLOW)
+        await comfyPage.vueNodes.waitForNodes()
 
         const outerNode = comfyPage.vueNodes.getNodeLocator('5')
         await expect(outerNode).toBeVisible()
@@ -683,14 +482,19 @@ test.describe('Subgraph Serialization', { tag: ['@subgraph'] }, () => {
         comfyPage
       }) => {
         await comfyPage.workflow.loadWorkflow(LEGACY_PREFIXED_WORKFLOW)
+        await comfyPage.vueNodes.waitForNodes()
 
         const outerNode = comfyPage.vueNodes.getNodeLocator('5')
         await expect(outerNode).toBeVisible()
 
         const widgetRows = outerNode.getByTestId(TestIds.widgets.widget)
         await expect(widgetRows).toHaveCount(2)
-        await expect(widgetRows.first()).not.toContainText('6: 3:')
-        await expect(widgetRows.nth(1)).not.toContainText('6: 3:')
+
+        for (const row of await widgetRows.all()) {
+          await expect(
+            row.getByLabel('string_a', { exact: true })
+          ).toBeVisible()
+        }
       })
     }
   )

browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts

@@ -507,6 +507,25 @@ test.describe('Vue Node Context Menu', { tag: '@vue-nodes' }, () => {
         .toBe(initialGroupCount + 1)
     })
 
+    test('should convert to group node via context menu', async ({
+      comfyPage
+    }) => {
+      await openMultiNodeContextMenu(comfyPage, nodeTitles)
+      await clickExactMenuItem(comfyPage, 'Convert to Group Node')
+
+      await comfyPage.nodeOps.promptDialogInput.waitFor({ state: 'visible' })
+      await comfyPage.nodeOps.fillPromptDialog('TestGroupNode')
+
+      await expect
+        .poll(async () => {
+          const groupNodes = await comfyPage.nodeOps.getNodeRefsByType(
+            'workflow>TestGroupNode'
+          )
+          return groupNodes.length
+        })
+        .toBe(1)
+    })
+
     test('should convert selected nodes to subgraph via context menu', async ({
       comfyPage
     }) => {

browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts

@@ -1,15 +1,11 @@
-import { expect, mergeTests } from '@playwright/test'
-import type { Locator } from '@playwright/test'
+import { expect } from '@playwright/test'
 
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
-import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
 import {
   getPromotedWidgetNames,
   getPromotedWidgetCountByName
 } from '@e2e/fixtures/utils/promotedWidgets'
-import { webSocketFixture } from '@e2e/fixtures/ws'
-const wstest = mergeTests(test, webSocketFixture)
 
 test.describe('Vue Nodes Image Preview', { tag: '@vue-nodes' }, () => {
   async function loadImageOnNode(comfyPage: ComfyPage) {
@@ -115,10 +111,12 @@ test.describe('Vue Nodes Image Preview', { tag: '@vue-nodes' }, () => {
         )
         .toBe(1)
 
-      await expect(firstSubgraphNode.locator('.lg-node-widgets')).toHaveCount(0)
-      await expect(secondSubgraphNode.locator('.lg-node-widgets')).toHaveCount(
-        0
-      )
+      await expect(
+        firstSubgraphNode.locator('.lg-node-widgets')
+      ).not.toContainText('$$canvas-image-preview')
+      await expect(
+        secondSubgraphNode.locator('.lg-node-widgets')
+      ).not.toContainText('$$canvas-image-preview')
 
       await comfyPage.command.executeCommand('Comfy.Canvas.FitView')
       await comfyPage.command.executeCommand('Comfy.QueuePrompt')
@@ -140,44 +138,3 @@ test.describe('Vue Nodes Image Preview', { tag: '@vue-nodes' }, () => {
     }
   )
 })
-
-async function countColumns(locator: Locator) {
-  return await locator.locator('img').evaluateAll((images) => {
-    const yOffsets = images.map((image) => image.getBoundingClientRect().y)
-    return yOffsets.filter((yOffset) => yOffset === yOffsets[0]).length
-  })
-}
-
-test.describe('Vue Nodes Batch Image Preview', { tag: '@vue-nodes' }, () => {
-  wstest(
-    'Image previews tile to fit node',
-    async ({ comfyMouse, comfyPage, getWebSocket }) => {
-      const execution = new ExecutionHelper(comfyPage, await getWebSocket())
-
-      await test.step('Add node', async () => {
-        await comfyPage.menu.topbar.newWorkflowButton.click()
-        await comfyPage.nextFrame()
-
-        await comfyPage.searchBoxV2.addNode('Preview Image')
-        const previewImage = comfyPage.vueNodes.getNodeByTitle('Preview Image')
-        await expect(previewImage).toBeVisible()
-      })
-
-      const node = await comfyPage.vueNodes.getFixtureByTitle('Preview Image')
-
-      await test.step('Inject multiple previews', async () => {
-        const file = { filename: 'example.png', type: 'input' }
-        const images = new Array(100).fill(file)
-        execution.executed('', '1', { images })
-        await expect(node.imageGrid.locator('img')).toHaveCount(100)
-      })
-
-      const { bottomRight } = node.resize
-      await expect.poll(() => countColumns(node.imageGrid)).toBe(10)
-      await comfyMouse.resizeByDragging(bottomRight, { x: 200 })
-      await expect.poll(() => countColumns(node.imageGrid)).toBeGreaterThan(10)
-      await comfyMouse.resizeByDragging(bottomRight, { x: -200, y: 200 })
-      await expect.poll(() => countColumns(node.imageGrid)).toBeLessThan(10)
-    }
-  )
-})

browser_tests/tests/vueNodes/interactions/node/resize.spec.ts

@@ -1,165 +1,56 @@
-import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
-import { MIN_NODE_WIDTH } from '@/renderer/core/layout/transform/graphRenderTransform'
-import {
-  RESIZE_HANDLES,
-  hasNorthEdge,
-  hasWestEdge
-} from '@/renderer/extensions/vueNodes/interactions/resize/resizeHandleConfig'
 
-async function setupResizableNode(comfyPage: ComfyPage, title: string) {
-  await expect(comfyPage.vueNodes.getNodeByTitle(title)).toHaveCount(1)
-  const node = await comfyPage.vueNodes.getFixtureByTitle(title)
-  const box = await node.selectAndGetBox()
-  return { node, box }
-}
+test.describe('Vue Node Resizing', { tag: '@vue-nodes' }, () => {
+  test('should resize node without position drift after selecting', async ({
+    comfyPage
+  }) => {
+    // Get a Vue node fixture
+    const node = await comfyPage.vueNodes.getFixtureByTitle('Load Checkpoint')
+    const initialBox = await node.boundingBox()
+    if (!initialBox) throw new Error('Node bounding box not found')
 
-test.describe(
-  'Vue Node Resizing',
-  { tag: ['@vue-nodes', '@canvas', '@node'] },
-  () => {
-    let originalMinimapVisible: boolean | undefined
+    // Select the node first (this was causing the bug)
+    await node.header.click()
 
-    // Minimap overlays the canvas and intercepts pointer events that land in
-    // its hit area during resize drags, so disable it for this suite. Capture
-    // and restore the prior value to avoid leaking the override to other specs
-    // that run on the same user-data-dir.
-    test.beforeEach(async ({ comfyPage }) => {
-      originalMinimapVisible = await comfyPage.settings.getSetting<boolean>(
-        'Comfy.Minimap.Visible'
-      )
-      await comfyPage.settings.setSetting('Comfy.Minimap.Visible', false)
-      await comfyPage.canvasOps.resetView()
-    })
+    // Get position after selection
+    const selectedBox = await node.boundingBox()
+    if (!selectedBox)
+      throw new Error('Node bounding box not found after select')
 
-    test.afterEach(async ({ comfyPage }) => {
-      if (originalMinimapVisible !== undefined) {
-        await comfyPage.settings.setSetting(
-          'Comfy.Minimap.Visible',
-          originalMinimapVisible
-        )
-      }
-    })
+    // Verify position unchanged after selection
+    await expect
+      .poll(async () => (await node.boundingBox())?.x)
+      .toBeCloseTo(initialBox.x, 1)
+    await expect
+      .poll(async () => (await node.boundingBox())?.y)
+      .toBeCloseTo(initialBox.y, 1)
 
-    test('should resize node without position drift after selecting', async ({
-      comfyPage
-    }) => {
-      const { node, box: initialBox } = await setupResizableNode(
-        comfyPage,
-        'Load Checkpoint'
-      )
+    // Now resize from bottom-right corner
+    const resizeStartX = selectedBox.x + selectedBox.width - 5
+    const resizeStartY = selectedBox.y + selectedBox.height - 5
 
-      await node.expectAnchoredAt(initialBox)
+    await comfyPage.page.mouse.move(resizeStartX, resizeStartY)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(resizeStartX + 50, resizeStartY + 30)
+    await comfyPage.page.mouse.up()
 
-      await node.resizeFromCorner('SE', 50, 30)
+    // Position should NOT have changed (the bug was position drift)
+    await expect
+      .poll(async () => (await node.boundingBox())?.x)
+      .toBeCloseTo(initialBox.x, 1)
+    await expect
+      .poll(async () => (await node.boundingBox())?.y)
+      .toBeCloseTo(initialBox.y, 1)
 
-      await node.expectAnchoredAt(initialBox)
-
-      await expect.poll(node.pollWidth).toBeGreaterThan(initialBox.width)
-      await expect.poll(node.pollHeight).toBeGreaterThan(initialBox.height)
-    })
-
-    const cornerCases = RESIZE_HANDLES.map((h) => ({
-      corner: h.corner,
-      dragX: hasWestEdge(h.corner) ? -50 : 50,
-      dragY: hasNorthEdge(h.corner) ? -40 : 40
-    }))
-
-    test.describe('corner resize directions', () => {
-      cornerCases.forEach(({ corner, dragX, dragY }) => {
-        test(`${corner}: size increases and correct edges shift`, async ({
-          comfyPage
-        }) => {
-          const { node, box } = await setupResizableNode(comfyPage, 'KSampler')
-
-          await node.resizeFromCorner(corner, dragX, dragY)
-
-          await expect.poll(node.pollWidth).toBeGreaterThan(box.width)
-          await expect.poll(node.pollHeight).toBeGreaterThan(box.height)
-
-          if (hasWestEdge(corner)) {
-            await expect.poll(node.pollLeftEdge).toBeLessThan(box.x)
-          } else {
-            await expect.poll(node.pollLeftEdge).toBeCloseTo(box.x, 0)
-          }
-
-          if (hasNorthEdge(corner)) {
-            await expect.poll(node.pollTopEdge).toBeLessThan(box.y)
-          } else {
-            await expect.poll(node.pollTopEdge).toBeCloseTo(box.y, 0)
-          }
-        })
-      })
-    })
-
-    test.describe('opposite edge anchoring', () => {
-      cornerCases.forEach(({ corner, dragX, dragY }) => {
-        test(`${corner} resize keeps opposite corner fixed`, async ({
-          comfyPage
-        }) => {
-          const { node, box } = await setupResizableNode(comfyPage, 'KSampler')
-
-          const pollAnchorX = hasWestEdge(corner)
-            ? node.pollRightEdge
-            : node.pollLeftEdge
-          const pollAnchorY = hasNorthEdge(corner)
-            ? node.pollBottomEdge
-            : node.pollTopEdge
-
-          const anchorX = hasWestEdge(corner) ? box.x + box.width : box.x
-          const anchorY = hasNorthEdge(corner) ? box.y + box.height : box.y
-
-          await node.resizeFromCorner(corner, dragX, dragY)
-
-          await expect.poll(pollAnchorX).toBeCloseTo(anchorX, 0)
-          await expect.poll(pollAnchorY).toBeCloseTo(anchorY, 0)
-        })
-      })
-    })
-
-    test.describe('minimum size enforcement', () => {
-      test('SW resize clamps width, keeping right edge fixed', async ({
-        comfyPage
-      }) => {
-        const { node, box } = await setupResizableNode(comfyPage, 'KSampler')
-        const rightEdge = box.x + box.width
-
-        await node.resizeFromCorner('SW', box.width + 100, 0)
-
-        await expect.poll(node.pollRightEdge).toBeCloseTo(rightEdge, 0)
-        await expect.poll(node.pollWidth).toBeGreaterThanOrEqual(MIN_NODE_WIDTH)
-      })
-
-      test('NE resize clamps height at its lower bound', async ({
-        comfyPage
-      }) => {
-        const { node } = await setupResizableNode(comfyPage, 'KSampler')
-
-        // Default nodes render at content-minimum height; grow from SE so NE
-        // has room to shrink back down to the clamp.
-        await node.resizeFromCorner('SE', 0, 200)
-
-        const expandedBox = await node.boundingBox()
-        if (!expandedBox)
-          throw new Error('Node bounding box not found after SE grow')
-        const bottomEdge = expandedBox.y + expandedBox.height
-
-        // Overdrag once to hit the clamp, then again to prove further dragging
-        // does not shrink past the minimum (idempotent clamp).
-        await node.resizeFromCorner('NE', 0, expandedBox.height + 100)
-        const clampedHeight = (await node.boundingBox())?.height
-        if (clampedHeight === undefined)
-          throw new Error('Node bounding box not found after NE clamp')
-        expect(clampedHeight).toBeLessThan(expandedBox.height)
-
-        await node.resizeFromCorner('NE', 0, 200)
-
-        await expect.poll(node.pollHeight).toBeCloseTo(clampedHeight, 0)
-        await expect.poll(node.pollBottomEdge).toBeCloseTo(bottomEdge, 0)
-      })
-    })
-  }
-)
+    // Size should have increased
+    await expect
+      .poll(async () => (await node.boundingBox())?.width)
+      .toBeGreaterThan(initialBox.width)
+    await expect
+      .poll(async () => (await node.boundingBox())?.height)
+      .toBeGreaterThan(initialBox.height)
+  })
+})

browser_tests/tests/vueNodes/widgets/int/integerWidget.spec.ts

@@ -38,15 +38,4 @@ test.describe('Vue Integer Widget', { tag: '@vue-nodes' }, () => {
     await controls.decrementButton.click()
     await expect(controls.input).toHaveValue(initialValue.toString())
   })
-
-  test('displays control widgets with default state', async ({ comfyPage }) => {
-    await comfyPage.menu.topbar.newWorkflowButton.click()
-    await comfyPage.nextFrame()
-    await comfyPage.searchBoxV2.addNode('Int')
-    const widget = comfyPage.vueNodes.getWidgetByName('Int', 'value')
-    await expect(widget).toBeVisible()
-
-    const { valueControl } = comfyPage.vueNodes.getInputNumberControls(widget)
-    await expect(valueControl).toBeVisible()
-  })
 })

browser_tests/tests/vueNodes/widgets/widgetReactivity.spec.ts

@@ -9,23 +9,25 @@ test.describe('Vue Widget Reactivity', { tag: '@vue-nodes' }, () => {
     const loadCheckpointNode = comfyPage.page.locator(
       'css=[data-testid="node-body-4"] > .lg-node-widgets > div'
     )
-    await expect(loadCheckpointNode).toHaveCount(1)
     await comfyPage.page.evaluate(() => {
       const graph = window.graph as TestGraphAccess
       const node = graph._nodes_by_id['4']
-      node.addWidget('text', 'extra_widget_a', '', () => {})
+      node.widgets!.push({ ...node.widgets![0], name: 'added_widget_1' })
     })
     await expect(loadCheckpointNode).toHaveCount(2)
     await comfyPage.page.evaluate(() => {
       const graph = window.graph as TestGraphAccess
       const node = graph._nodes_by_id['4']
-      node.addWidget('text', 'extra_widget_b', '', () => {})
+      node.widgets![2] = { ...node.widgets![0], name: 'added_widget_2' }
     })
     await expect(loadCheckpointNode).toHaveCount(3)
     await comfyPage.page.evaluate(() => {
       const graph = window.graph as TestGraphAccess
       const node = graph._nodes_by_id['4']
-      node.addWidget('text', 'extra_widget_c', '', () => {})
+      node.widgets!.splice(0, 0, {
+        ...node.widgets![0],
+        name: 'added_widget_3'
+      })
     })
     await expect(loadCheckpointNode).toHaveCount(4)
   })
@@ -53,24 +55,4 @@ test.describe('Vue Widget Reactivity', { tag: '@vue-nodes' }, () => {
     })
     await expect(loadCheckpointNode).toHaveCount(3)
   })
-
-  test('Can load dynamic combos', async ({ comfyPage }) => {
-    await comfyPage.searchBoxV2.addNode('Resize Image/Mask')
-    const widgetTuple = ['Resize Image/Mask', 'resize_type'] as const
-    const widget = comfyPage.vueNodes.getWidgetByName(...widgetTuple)
-
-    await test.step('Update value of the dynamic combo widget', async () => {
-      await comfyPage.vueNodes.selectComboOption(...widgetTuple, 'scale width')
-      await expect(widget).toHaveText('scale width')
-    })
-
-    await test.step('Swap to a different workflow and back', async () => {
-      await comfyPage.menu.topbar.newWorkflowButton.click()
-      await expect(widget).toBeHidden()
-      await comfyPage.menu.topbar.getTab(0).click()
-      await expect(widget).toBeVisible()
-    })
-
-    await expect(widget, 'Widget has restored value').toHaveText('scale width')
-  })
 })

docs/adr/0009-subgraph-promoted-widgets-use-linked-inputs.md

@@ -285,11 +285,11 @@ quarantine.
 
 ## PromotionStore
 
-`PromotionStore` has been removed. Canonical value-widget exposure is
-represented by linked `SubgraphInput`s. Canonical preview exposure is
-represented by host-scoped `properties.previewExposures` /
-`PreviewExposureStore`. Legacy `properties.proxyWidgets` is migration input only
-and must not be reintroduced as runtime authority.
+`PromotionStore` becomes vestigial. It may remain temporarily as a derived
+runtime compatibility/index layer for existing consumers, but it is not
+serialized authority, must not create promotions without linked
+`SubgraphInput`s, and should be removed once consumers query the standard graph
+interface directly.
 
 ## Considered options
 
@@ -325,5 +325,4 @@ for existing workflow consumers that still assume array order.
 - Primitive fanout repair is more complex, but avoids breaking common existing
   workflows.
 - UI code must migrate with the runtime migration to avoid mixed identity states.
-- `PromotionStore` is removed; callers query linked inputs or preview exposures
-  directly.
+- `PromotionStore` has a clear removal path.

docs/architecture/proto-ecs-stores.md

@@ -6,17 +6,16 @@ For the full problem analysis, see [Entity Problems](entity-problems.md). For th
 
 ## 1. What's Already Extracted
 
-Five stores extract entity state out of class instances into centralized,
-queryable registries. Promoted value-widget topology is no longer a store; ADR
-0009 represents it as ordinary linked `SubgraphInput` state.
+Six stores extract entity state out of class instances into centralized, queryable registries:
 
-| Store                   | Extracts From       | Scoping                 | Key Format                      | Data Shape                    |
-| ----------------------- | ------------------- | ----------------------- | ------------------------------- | ----------------------------- |
-| WidgetValueStore        | `BaseWidget`        | `graphId → nodeId:name` | `"${nodeId}:${widgetName}"`     | Plain `WidgetState` object    |
-| DomWidgetStore          | `BaseDOMWidget`     | Global                  | `widgetId` (UUID)               | Position, visibility, z-index |
-| LayoutStore             | Node, Link, Reroute | Workflow-level          | `nodeId`, `linkId`, `rerouteId` | Y.js CRDT maps (pos, size)    |
-| NodeOutputStore         | Execution results   | `nodeLocatorId`         | `"${subgraphId}:${nodeId}"`     | Output data, preview URLs     |
-| SubgraphNavigationStore | Canvas viewport     | `subgraphId`            | `subgraphId` or `'root'`        | LRU viewport cache            |
+| Store                   | Extracts From       | Scoping                       | Key Format                        | Data Shape                    |
+| ----------------------- | ------------------- | ----------------------------- | --------------------------------- | ----------------------------- |
+| WidgetValueStore        | `BaseWidget`        | `graphId → nodeId:name`       | `"${nodeId}:${widgetName}"`       | Plain `WidgetState` object    |
+| PromotionStore          | `SubgraphNode`      | `graphId → nodeId → source[]` | `"${sourceNodeId}:${widgetName}"` | Ref-counted promotion entries |
+| DomWidgetStore          | `BaseDOMWidget`     | Global                        | `widgetId` (UUID)                 | Position, visibility, z-index |
+| LayoutStore             | Node, Link, Reroute | Workflow-level                | `nodeId`, `linkId`, `rerouteId`   | Y.js CRDT maps (pos, size)    |
+| NodeOutputStore         | Execution results   | `nodeLocatorId`               | `"${subgraphId}:${nodeId}"`       | Output data, preview URLs     |
+| SubgraphNavigationStore | Canvas viewport     | `subgraphId`                  | `subgraphId` or `'root'`          | LRU viewport cache            |
 
 ADR 0009 refines promoted-widget identity: promoted value widgets are keyed by
 the host boundary (`host node locator + SubgraphInput.name`), while interior
@@ -100,39 +99,62 @@ graph LR
 | Behavior on class           | **No**   | Drawing, events, callbacks still on widget        |
 | Module-scope store access   | **No**   | `useWidgetValueStore()` called from domain object |
 
-## 3. Linked promoted widgets and preview exposures
+## 3. PromotionStore
 
-`PromotionStore` was removed by ADR 0009. Promoted value widgets are represented
-by linked `SubgraphInput`s, and display-only previews are represented by
-host-scoped `properties.previewExposures` / `PreviewExposureStore` entries.
-Legacy `properties.proxyWidgets` is load-time migration input only.
+**File:** `src/stores/promotionStore.ts`
 
-### Runtime shape
+Extracts subgraph widget promotion decisions into a centralized, ref-counted registry.
 
-```diagram
-╭────────────────╮     ╭──────────────────╮     ╭────────────────╮
-│ SubgraphInput  │────▶│ Interior slot     │────▶│ Source widget  │
-╰────────────────╯     ╰──────────────────╯     ╰────────────────╯
+### State Shape
 
-╭────────────────╮     ╭──────────────────────╮
-│ Subgraph host  │────▶│ PreviewExposureStore │
-╰────────────────╯     ╰──────────────────────╯
+```
+graphPromotions:  Map<UUID, Map<NodeId, PromotedWidgetSource[]>>
+                       │          │              │
+                    graphId    subgraphNodeId   ordered promotion entries
+
+graphRefCounts:   Map<UUID, Map<string, number>>
+                       │          │        │
+                    graphId    entryKey   count of nodes promoting this widget
 ```
 
-`PromotedWidgetViewManager`
-(`src/lib/litegraph/src/subgraph/PromotedWidgetViewManager.ts`) now reconciles
-synthetic widget views derived from linked subgraph inputs. It does not sit on
-top of a promotion registry.
+### Ref-Counting for O(1) Queries
+
+The store maintains a parallel ref-count map. When a widget is promoted on a SubgraphNode, the ref count for that entry key increments. When demoted, it decrements. This enables:
+
+```ts
+isPromotedByAny(graphId, { sourceNodeId, sourceWidgetName }): boolean
+// O(1) lookup: refCounts.get(key) > 0
+```
+
+Without ref counting, this query would require scanning all SubgraphNodes in the graph.
+
+### View Reconciliation Layer
+
+`PromotedWidgetViewManager` (`src/lib/litegraph/src/subgraph/PromotedWidgetViewManager.ts`) sits between the store and the UI:
+
+```mermaid
+graph LR
+    PS["PromotionStore
+(data)"] -->|"entries"| VM["PromotedWidgetViewManager
+(reconciliation)"] -->|"stable views"| PV["PromotedWidgetView
+(proxy widget)"]
+    PV -->|"resolveDeepest()"| CW["Concrete Widget
+(leaf node)"]
+    PV -->|"reads value"| WVS["WidgetValueStore"]
+```
+
+The manager maintains a `viewCache` to preserve object identity across updates — a reconciliation pattern similar to React's virtual DOM diffing.
 
 ### ECS Alignment
 
-| Aspect                        | ECS-like  | Why                                                           |
-| ----------------------------- | --------- | ------------------------------------------------------------- |
-| Canonical topology            | Yes       | Value exposure is ordinary subgraph input/link state          |
-| Host-scoped preview state     | Yes       | Preview exposure data is keyed by host locator                |
-| Legacy migration boundary     | Yes       | `proxyWidgets` is consumed into canonical state or quarantine |
-| View reconciliation           | Partially | ViewManager preserves synthetic widget object identity        |
-| Entity class drives view sync | **No**    | SubgraphNode still owns synthetic view cache invalidation     |
+| Aspect                             | ECS-like  | Why                                                                     |
+| ---------------------------------- | --------- | ----------------------------------------------------------------------- |
+| Data separated from views          | Yes       | Store holds entries; ViewManager holds UI proxies                       |
+| Ref-counted queries                | Yes       | Efficient global state queries without scanning                         |
+| Graph-scoped lifecycle             | Yes       | `clearGraph(graphId)`                                                   |
+| View reconciliation                | Partially | ViewManager is a system-like layer, but tightly coupled to SubgraphNode |
+| SubgraphNode drives mutations      | **No**    | Entity class calls `store.setPromotions()` directly                     |
+| BaseWidget queries store in render | **No**    | `getOutlineColor()` calls `isPromotedByAny()` every frame               |
 
 ## 4. LayoutStore (CRDT)
 
@@ -186,8 +208,8 @@ These module-scope calls create implicit dependencies on the Vue runtime and mak
 
 1. **Plain data objects**: `WidgetState`, `DomWidgetState`, CRDT maps are all methods-free data
 2. **Centralized registries**: Each store is a `Map<key, data>` — structurally identical to an ECS component store
-3. **Graph-scoped lifecycle**: `clearGraph(graphId)` for cleanup (WidgetValueStore, PreviewExposureStore)
-4. **Query APIs**: `getWidget()`, preview exposure queries, `getNodeWidgets()` — system-like queries
+3. **Graph-scoped lifecycle**: `clearGraph(graphId)` for cleanup (WidgetValueStore, PromotionStore)
+4. **Query APIs**: `getWidget()`, `isPromotedByAny()`, `getNodeWidgets()` — system-like queries
 5. **Separation of data from behavior**: The stores hold data; classes retain behavior
 
 ### What's Missing vs Full ECS
@@ -200,7 +222,7 @@ graph TD
         H2["Plain data components
 (WidgetState, LayoutMap)"]
         H3["Query APIs
-(getWidget, preview exposures)"]
+(getWidget, isPromotedByAny)"]
         H4["Graph-scoped lifecycle"]
         H5["Partial position extraction
 (LayoutStore)"]
@@ -227,12 +249,13 @@ graph TD
 
 Each store invents its own identity scheme:
 
-| Store            | Key Format                  | Entity ID Used          | Type-Safe? |
-| ---------------- | --------------------------- | ----------------------- | ---------- |
-| WidgetValueStore | `"${nodeId}:${widgetName}"` | NodeId (number\|string) | No         |
-| DomWidgetStore   | Widget UUID                 | UUID (string)           | No         |
-| LayoutStore      | Raw nodeId/linkId/rerouteId | Mixed number types      | No         |
-| NodeOutputStore  | `"${subgraphId}:${nodeId}"` | Composite string        | No         |
+| Store            | Key Format                        | Entity ID Used          | Type-Safe? |
+| ---------------- | --------------------------------- | ----------------------- | ---------- |
+| WidgetValueStore | `"${nodeId}:${widgetName}"`       | NodeId (number\|string) | No         |
+| PromotionStore   | `"${sourceNodeId}:${widgetName}"` | NodeId (string-coerced) | No         |
+| DomWidgetStore   | Widget UUID                       | UUID (string)           | No         |
+| LayoutStore      | Raw nodeId/linkId/rerouteId       | Mixed number types      | No         |
+| NodeOutputStore  | `"${subgraphId}:${nodeId}"`       | Composite string        | No         |
 
 In the ECS target, all of these would use branded entity IDs (`WidgetEntityId`, `NodeEntityId`, etc.) with compile-time cross-kind protection.
 For promoted value widgets, ADR 0009 narrows the target key to host boundary
@@ -266,6 +289,7 @@ graph TD
 - value → WidgetValueStore
 - label → WidgetValueStore
 - disabled → WidgetValueStore
+- promotion status → PromotionStore
 - DOM pos/vis → DomWidgetStore"]
         W_rem["Remains on class:
 - _node back-ref
@@ -309,8 +333,7 @@ graph TD
 
     subgraph Subgraph["Subgraph (node component)"]
         S_ext["Extracted:
-- value exposure → linked inputs
-- preview exposure → PreviewExposureStore"]
+- promotions → PromotionStore"]
         S_rem["Remains on class:
 - name, description
 - inputs[], outputs[]
@@ -337,15 +360,15 @@ graph TD
 
 What each entity needs to reach the ECS target from [ADR 0008](../adr/0008-entity-component-system.md):
 
-| Entity       | Already Extracted                                                                | Still on Class                                                                       | ECS Target Components                                                                | Gap                                                                                        |
-| ------------ | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
-| **Node**     | pos, size (LayoutStore)                                                          | type, visual, connectivity, execution, properties, widgets, rendering, serialization | Position, NodeVisual, NodeType, Connectivity, Execution, Properties, WidgetContainer | Large — 6 components unextracted, all behavior on class                                    |
-| **Link**     | layout (LayoutStore)                                                             | endpoints, visual, state, connectivity methods                                       | LinkEndpoints, LinkVisual, LinkState                                                 | Medium — 3 components unextracted                                                          |
-| **Widget**   | value, label, disabled (WidgetValueStore); DOM state (DomWidgetStore)            | node back-ref, rendering, events, layout                                             | WidgetIdentity, WidgetValue, WidgetLayout                                            | Small — value extraction done; rendering and layout remain                                 |
-| **Slot**     | (nothing)                                                                        | name, type, direction, link refs, visual, position                                   | SlotIdentity, SlotConnection, SlotVisual                                             | Full — no extraction started                                                               |
-| **Reroute**  | pos (LayoutStore)                                                                | links, visual, chain traversal                                                       | Position, RerouteLinks, RerouteVisual                                                | Medium — position done, rest unextracted                                                   |
-| **Group**    | (nothing)                                                                        | pos, size, meta, visual, children                                                    | Position, GroupMeta, GroupVisual, GroupChildren                                      | Full — no extraction started                                                               |
-| **Subgraph** | promoted value exposure (linked inputs); preview exposure (PreviewExposureStore) | structure, meta, I/O, all LGraph state                                               | SubgraphStructure, SubgraphMeta (as node components)                                 | Large — mostly unextracted; subgraph is a node with components, not a separate entity kind |
+| Entity       | Already Extracted                                                                                 | Still on Class                                                                       | ECS Target Components                                                                | Gap                                                                                        |
+| ------------ | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
+| **Node**     | pos, size (LayoutStore)                                                                           | type, visual, connectivity, execution, properties, widgets, rendering, serialization | Position, NodeVisual, NodeType, Connectivity, Execution, Properties, WidgetContainer | Large — 6 components unextracted, all behavior on class                                    |
+| **Link**     | layout (LayoutStore)                                                                              | endpoints, visual, state, connectivity methods                                       | LinkEndpoints, LinkVisual, LinkState                                                 | Medium — 3 components unextracted                                                          |
+| **Widget**   | value, label, disabled (WidgetValueStore); promotion (PromotionStore); DOM state (DomWidgetStore) | node back-ref, rendering, events, layout                                             | WidgetIdentity, WidgetValue, WidgetLayout                                            | Small — value extraction done; rendering and layout remain                                 |
+| **Slot**     | (nothing)                                                                                         | name, type, direction, link refs, visual, position                                   | SlotIdentity, SlotConnection, SlotVisual                                             | Full — no extraction started                                                               |
+| **Reroute**  | pos (LayoutStore)                                                                                 | links, visual, chain traversal                                                       | Position, RerouteLinks, RerouteVisual                                                | Medium — position done, rest unextracted                                                   |
+| **Group**    | (nothing)                                                                                         | pos, size, meta, visual, children                                                    | Position, GroupMeta, GroupVisual, GroupChildren                                      | Full — no extraction started                                                               |
+| **Subgraph** | promotions (PromotionStore)                                                                       | structure, meta, I/O, all LGraph state                                               | SubgraphStructure, SubgraphMeta (as node components)                                 | Large — mostly unextracted; subgraph is a node with components, not a separate entity kind |
 
 ### Priority Order for Extraction
 

docs/guidance/playwright.md

@@ -250,5 +250,5 @@ interactions (e.g., `comfyPage.settings.setSetting`, `comfyPage.nodeOps`,
 
 ```bash
 pnpm test:browser:local                 # Run all E2E tests
-pnpm test:browser:local --ui            # Interactive UI mode
+pnpm test:browser:local -- --ui         # Interactive UI mode
 ```

docs/guidance/vitest.md

@@ -30,9 +30,7 @@ See `docs/testing/*.md` for detailed patterns.
 ## Running Tests
 
 ```bash
-pnpm test:unit                       # Run all unit tests
-pnpm test:unit path/to/file          # Filter by substring of test file path
-pnpm test:unit foo.test.ts -t "name" # Filter by test name (regex; it()/test() only, not describe())
+pnpm test:unit                    # Run all unit tests
+pnpm test:unit -- path/to/file    # Run specific test
+pnpm test:unit -- --watch         # Watch mode
 ```
-
-Do not use the `--` separator before vitest args; pnpm forwards extra args automatically, and `--` mangles quoted args (e.g. `-t "two words"`) on Windows PowerShell.

docs/testing/README.md

@@ -43,10 +43,10 @@ To run the tests locally:
 pnpm test:unit
 
 # Run a specific test file
-pnpm test:unit src/path/to/file.test.ts
+pnpm test:unit -- src/path/to/file.test.ts
 
 # Run unit tests in watch mode
-pnpm test:unit --watch
+pnpm test:unit -- --watch
 ```
 
 Refer to the specific guides for more detailed information on each testing type.

eslint.config.ts

@@ -373,8 +373,7 @@ export default defineConfig([
     files: [
       'src/base/**/*.{ts,vue}',
       'src/platform/**/*.{ts,vue}',
-      'src/workbench/**/*.{ts,vue}',
-      'src/world/**/*.{ts,vue}'
+      'src/workbench/**/*.{ts,vue}'
     ],
     rules: {
       'import-x/no-restricted-paths': [
@@ -402,12 +401,6 @@ export default defineConfig([
               from: './src/renderer/**',
               message:
                 'workbench/ cannot import from renderer/ (violates layer architecture: base → platform → workbench → renderer)'
-            },
-            {
-              target: './src/world/**',
-              from: './src/lib/litegraph/**',
-              message:
-                'src/world/ must remain free of litegraph dependencies. The world layer owns canonical entity identity and must not depend on litegraph types or values.'
             }
           ]
         }

knip.config.ts

@@ -43,6 +43,7 @@ const config: KnipConfig = {
     '@iconify/json',
     '@primeuix/forms',
     '@primeuix/styled',
+    '@primeuix/utils',
     '@primevue/icons'
   ],
   ignore: [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.46.3",
+  "version": "1.46.1",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -97,7 +97,7 @@
     "axios": "catalog:",
     "chart.js": "^4.5.0",
     "cva": "catalog:",
-    "dompurify": "catalog:",
+    "dompurify": "^3.2.5",
     "dotenv": "catalog:",
     "es-toolkit": "^1.39.9",
     "extendable-media-recorder": "^9.2.27",
@@ -193,7 +193,7 @@
     "unplugin-icons": "catalog:",
     "unplugin-typegpu": "catalog:",
     "unplugin-vue-components": "catalog:",
-    "uuid": "catalog:",
+    "uuid": "^11.1.0",
     "vite": "catalog:",
     "vite-plugin-dts": "catalog:",
     "vite-plugin-html": "catalog:",
@@ -206,8 +206,8 @@
     "zod-to-json-schema": "catalog:"
   },
   "engines": {
-    "node": ">=25",
-    "pnpm": ">=11.3"
+    "node": "24.x",
+    "pnpm": ">=11"
   },
-  "packageManager": "pnpm@11.3.0"
+  "packageManager": "pnpm@11.1.1"
 }

packages/design-system/src/css/style.css

@@ -406,7 +406,9 @@
     --secondary-background-selected
   );
   --component-node-widget-background-selected: var(--color-charcoal-100);
-  --component-node-widget-background-disabled: var(--color-charcoal-800);
+  --component-node-widget-background-disabled: var(
+    --color-alpha-charcoal-600-30
+  );
   --component-node-widget-background-highlighted: var(--color-smoke-800);
   --component-node-widget-promoted: var(--color-purple-700);
   --component-node-widget-advanced: var(--color-azure-600);
@@ -1892,17 +1894,3 @@ audio.comfy-audio.empty-audio-widget {
     300% 14px;
   background-attachment: local, local, scroll, scroll;
 }
-
-/*
-  PrimeVue overlays teleport to body. When a Reka modal dialog is open it sets
-  body { pointer-events: none } via DismissableLayer, which propagates to the
-  body-portaled overlays and makes them unclickable. PrimeVue's own Dialog
-  sets pointer-events inline, but Select / ColorPicker / Popover / Autocomplete
-  overlays do not, so they need to opt in here.
-*/
-.p-select-overlay,
-.p-colorpicker-panel,
-.p-popover,
-.p-autocomplete-overlay {
-  pointer-events: auto;
-}

packages/ingest-types/src/index.ts

@@ -356,10 +356,7 @@ export type {
   GetModelFoldersResponse,
   GetModelFoldersResponses,
   GetModelPreviewData,
-  GetModelPreviewError,
   GetModelPreviewErrors,
-  GetModelPreviewResponse,
-  GetModelPreviewResponses,
   GetModelsInFolderData,
   GetModelsInFolderError,
   GetModelsInFolderErrors,
@@ -389,8 +386,21 @@ export type {
   GetNodeReplacementsErrors,
   GetNodeReplacementsResponse,
   GetNodeReplacementsResponses,
-  GetOpenapiSpecData,
-  GetOpenapiSpecResponses,
+  GetOAuthAuthorizationServerData,
+  GetOAuthAuthorizationServerError,
+  GetOAuthAuthorizationServerErrors,
+  GetOAuthAuthorizationServerResponse,
+  GetOAuthAuthorizationServerResponses,
+  GetOAuthAuthorizeData,
+  GetOAuthAuthorizeError,
+  GetOAuthAuthorizeErrors,
+  GetOAuthAuthorizeResponse,
+  GetOAuthAuthorizeResponses,
+  GetOAuthProtectedResourceData,
+  GetOAuthProtectedResourceError,
+  GetOAuthProtectedResourceErrors,
+  GetOAuthProtectedResourceResponse,
+  GetOAuthProtectedResourceResponses,
   GetPaymentPortalData,
   GetPaymentPortalError,
   GetPaymentPortalErrors,
@@ -427,11 +437,11 @@ export type {
   GetSecretErrors,
   GetSecretResponse,
   GetSecretResponses,
-  GetSettingByKeyData,
-  GetSettingByKeyError,
-  GetSettingByKeyErrors,
-  GetSettingByKeyResponse,
-  GetSettingByKeyResponses,
+  GetSettingByIdData,
+  GetSettingByIdError,
+  GetSettingByIdErrors,
+  GetSettingByIdResponse,
+  GetSettingByIdResponses,
   GetStaticExtensionsData,
   GetStaticExtensionsErrors,
   GetStaticExtensionsResponses,
@@ -447,6 +457,7 @@ export type {
   GetTaskResponses,
   GetTemplateProxyData,
   GetTemplateProxyErrors,
+  GetTemplateProxyResponses,
   GetUserData,
   GetUserdataData,
   GetUserdataError,
@@ -534,6 +545,11 @@ export type {
   ImportPublishedAssetsResponse,
   ImportPublishedAssetsResponse2,
   ImportPublishedAssetsResponses,
+  InsertDynamicConfigData,
+  InsertDynamicConfigError,
+  InsertDynamicConfigErrors,
+  InsertDynamicConfigResponse,
+  InsertDynamicConfigResponses,
   InterruptJobData,
   InterruptJobError,
   InterruptJobErrors,
@@ -642,6 +658,17 @@ export type {
   MoveUserdataFileResponse,
   MoveUserdataFileResponses,
   NodeInfo,
+  OAuthAuthorizationServerMetadata,
+  OAuthAuthorizeRedirectResponse,
+  OAuthConsentChallenge,
+  OAuthConsentChallengeWorkspace,
+  OAuthProtectedResourceMetadata,
+  OAuthRegisterBadRequestResponse,
+  OAuthRegisterError,
+  OAuthRegisterRequest,
+  OAuthRegisterResponse,
+  OAuthTokenError,
+  OAuthTokenResponse,
   PaginationInfo,
   PartnerUsageRequest,
   PartnerUsageResponse,
@@ -663,6 +690,21 @@ export type {
   PostMonitoringTasksSubpathData,
   PostMonitoringTasksSubpathErrors,
   PostMonitoringTasksSubpathResponses,
+  PostOAuthAuthorizeData,
+  PostOAuthAuthorizeError,
+  PostOAuthAuthorizeErrors,
+  PostOAuthAuthorizeResponse,
+  PostOAuthAuthorizeResponses,
+  PostOAuthRegisterData,
+  PostOAuthRegisterError,
+  PostOAuthRegisterErrors,
+  PostOAuthRegisterResponse,
+  PostOAuthRegisterResponses,
+  PostOAuthTokenData,
+  PostOAuthTokenError,
+  PostOAuthTokenErrors,
+  PostOAuthTokenResponse,
+  PostOAuthTokenResponses,
   PostPprofSymbolData,
   PostPprofSymbolResponses,
   PostUserdataFileData,
@@ -799,11 +841,11 @@ export type {
   UpdateSecretRequest,
   UpdateSecretResponse,
   UpdateSecretResponses,
-  UpdateSettingByKeyData,
-  UpdateSettingByKeyError,
-  UpdateSettingByKeyErrors,
-  UpdateSettingByKeyResponse,
-  UpdateSettingByKeyResponses,
+  UpdateSettingByIdData,
+  UpdateSettingByIdError,
+  UpdateSettingByIdErrors,
+  UpdateSettingByIdResponse,
+  UpdateSettingByIdResponses,
   UpdateSubscriptionCacheData,
   UpdateSubscriptionCacheError,
   UpdateSubscriptionCacheErrors,

packages/ingest-types/src/types.gen.ts

@@ -1382,6 +1382,250 @@ export type JwkKey = {
   y: string
 }
 
+/**
+ * RFC 6749 §5.2 error response.
+ */
+export type OAuthTokenError = {
+  /**
+   * RFC 6749 §5.2 error code: invalid_request, invalid_client, invalid_grant, unauthorized_client, unsupported_grant_type, invalid_scope.
+   */
+  error: string
+  /**
+   * Human-readable, no leak of internal storage state.
+   */
+  error_description?: string
+}
+
+/**
+ * RFC 6749 §5.1 successful token response.
+ */
+export type OAuthTokenResponse = {
+  /**
+   * Resource-bound Cloud JWT (audience matches the protected resource).
+   */
+  access_token: string
+  token_type: 'Bearer'
+  /**
+   * Access token lifetime in seconds.
+   */
+  expires_in: number
+  /**
+   * Opaque refresh token. Rotates on every successful refresh; presenting an already-rotated token revokes the entire family.
+   */
+  refresh_token: string
+  /**
+   * Space-delimited scopes granted with this token.
+   */
+  scope: string
+}
+
+/**
+ * One workspace option presented in the OAuth consent challenge. Promoted to a named schema so the generated Go type is referenceable in handlers and tests rather than re-declared as an anonymous struct at every callsite.
+ *
+ */
+export type OAuthConsentChallengeWorkspace = {
+  id: string
+  name: string
+  type: 'personal' | 'team'
+  role: 'owner' | 'member'
+}
+
+/**
+ * Redirect target produced after a JSON consent submission. The frontend must navigate the browser to this URL so custom-scheme client callbacks work without relying on fetch-visible 302 headers.
+ */
+export type OAuthAuthorizeRedirectResponse = {
+  /**
+   * OAuth client redirect URI with either code+state for allow, or error+state for deny.
+   */
+  redirect_url: string
+}
+
+/**
+ * Server-side state describing the OAuth consent decision the user is being asked to make. Returned by GET /oauth/authorize when a valid Cloud session exists; the frontend renders the consent UI from this payload and POSTs the decision back. Browser never sees the original OAuth params on resume.
+ *
+ */
+export type OAuthConsentChallenge = {
+  /**
+   * Opaque server-side identifier for the authorization-request row. Carried back unchanged in the consent submission.
+   */
+  oauth_request_id: string
+  /**
+   * Per-row CSRF token bound to this authorization request (not to the session). Must be echoed back on POST.
+   */
+  csrf_token: string
+  /**
+   * Human-readable name of the OAuth client requesting authorization, from oauth_clients.display_name.
+   */
+  client_display_name: string
+  /**
+   * Human-readable name of the protected resource, from oauth_resources.display_name.
+   */
+  resource_display_name: string
+  /**
+   * Scopes the client is requesting for this resource. The frontend should present these for the user to approve.
+   */
+  scopes: Array<string>
+  /**
+   * Workspaces the user can select from. Membership is re-checked on POST.
+   */
+  workspaces: Array<OAuthConsentChallengeWorkspace>
+}
+
+/**
+ * OAuth 2.1 protected-resource metadata (RFC 9728).
+ */
+export type OAuthProtectedResourceMetadata = {
+  resource: string
+  authorization_servers: Array<string>
+  scopes_supported: Array<string>
+  bearer_methods_supported?: Array<string>
+}
+
+/**
+ * RFC 7591 §3.2.2 error response.
+ */
+export type OAuthRegisterError = {
+  error: 'invalid_redirect_uri' | 'invalid_client_metadata'
+  error_description?: string | null
+}
+
+/**
+ * Union of the two 400 shapes /oauth/register can emit. `OAuthRegisterError` is the handler-shaped RFC 7591 §3.2.2 error; `BindingErrorResponse` is the strict-server binding-layer error fired when the request body fails OpenAPI-schema validation before the handler runs.
+ *
+ */
+export type OAuthRegisterBadRequestResponse =
+  | OAuthRegisterError
+  | BindingErrorResponse
+
+/**
+ * Error shape returned when request binding or validation fails before the handler runs.
+ */
+export type BindingErrorResponse = {
+  message: string
+}
+
+/**
+ * RFC 7591 §3.2.1 successful registration response.
+ */
+export type OAuthRegisterResponse = {
+  /**
+   * Server-generated client_id. Always carries the `comfy-dyn-` prefix.
+   */
+  client_id: string
+  /**
+   * Unix timestamp (seconds) when the client was registered.
+   */
+  client_id_issued_at: number
+  client_name?: string
+  redirect_uris: Array<string>
+  grant_types: Array<string>
+  response_types: Array<string>
+  token_endpoint_auth_method: 'none'
+  application_type: 'native' | 'web'
+}
+
+/**
+ * RFC 7591 §2 client metadata document. Only the fields the server honors are listed; presence of `scope` or `resource_grants` in the request is rejected (`invalid_client_metadata`) because those are server-owned for dynamic clients. `additionalProperties: false` mirrors the runtime middleware that rejects any unknown metadata key.
+ *
+ */
+export type OAuthRegisterRequest = {
+  /**
+   * 1–5 redirect URIs. Validated against `application_type` policy.
+   */
+  redirect_uris: Array<string>
+  /**
+   * Human-readable name shown in the consent UI. Reserved-name list rejects impersonation of major MCP clients.
+   */
+  client_name?: string
+  /**
+   * RFC 7591 §2 application_type. **REQUIRED** — clients MUST declare intent; the server does not default this field. `native` for desktop / CLI / MCP-spec-strict clients (loopback redirects); `web` for hosted clients (HTTPS only, host must be allowlisted). A missing or explicitly empty `application_type` rejects with `invalid_client_metadata`. The realistic MCP-client population is overwhelmingly native/loopback — requiring explicit declaration avoids silently bouncing those clients off the web HTTPS policy.
+   *
+   */
+  application_type: 'native' | 'web'
+  /**
+   * Public clients only this phase — must be `none` if present. The server forces `none` regardless.
+   */
+  token_endpoint_auth_method?: 'none'
+  /**
+   * Optional. Defaults to `["authorization_code","refresh_token"]`.
+   */
+  grant_types?: Array<'authorization_code' | 'refresh_token'>
+  /**
+   * Optional. Defaults to `["code"]`.
+   */
+  response_types?: Array<'code'>
+  /**
+   * **REJECTED IF PRESENT.** Dynamic clients do not pick scopes — the server assigns scopes from the active MCP resource's published list. Sending `scope` in the registration body is treated as a privilege-escalation attempt and returns `invalid_client_metadata`. The field is documented here so clients see a well-defined error rather than silent drop.
+   *
+   */
+  scope?: string | null
+  /**
+   * **REJECTED IF PRESENT.** Same reason as `scope`. The set of resources and scopes a dynamic client may request is server-policy, not request-driven.
+   *
+   */
+  resource_grants?: {
+    [key: string]: Array<string>
+  } | null
+  /**
+   * **REJECTED IF PRESENT.** Unsupported RFC 7591 metadata for this public MCP-client phase.
+   */
+  client_uri?: string | null
+  /**
+   * **REJECTED IF PRESENT.** Unsupported RFC 7591 metadata for this public MCP-client phase.
+   */
+  logo_uri?: string | null
+  /**
+   * **REJECTED IF PRESENT.** Unsupported RFC 7591 metadata for this public MCP-client phase.
+   */
+  tos_uri?: string | null
+  /**
+   * **REJECTED IF PRESENT.** Unsupported RFC 7591 metadata for this public MCP-client phase.
+   */
+  policy_uri?: string | null
+  /**
+   * **REJECTED IF PRESENT.** Unsupported RFC 7591 metadata for this public MCP-client phase.
+   */
+  software_id?: string | null
+  /**
+   * **REJECTED IF PRESENT.** Unsupported RFC 7591 metadata for this public MCP-client phase.
+   */
+  software_version?: string | null
+  /**
+   * **REJECTED IF PRESENT.** Unsupported RFC 7591 metadata for this public MCP-client phase.
+   */
+  contacts?: Array<string> | null
+  /**
+   * **REJECTED IF PRESENT.** Unsupported RFC 7591 metadata for this public MCP-client phase.
+   */
+  jwks?: {
+    [key: string]: unknown
+  } | null
+  /**
+   * **REJECTED IF PRESENT.** Unsupported RFC 7591 metadata for this public MCP-client phase.
+   */
+  jwks_uri?: string | null
+}
+
+/**
+ * OAuth 2.1 authorization-server metadata (RFC 8414).
+ */
+export type OAuthAuthorizationServerMetadata = {
+  issuer: string
+  authorization_endpoint: string
+  token_endpoint: string
+  jwks_uri: string
+  /**
+   * RFC 7591 §3.1 Dynamic Client Registration endpoint. Advertised so MCP-spec-compliant clients can auto-discover and self-register without operator involvement. Present only when DCR is enabled.
+   *
+   */
+  registration_endpoint?: string
+  response_types_supported: Array<string>
+  grant_types_supported: Array<string>
+  code_challenge_methods_supported: Array<string>
+  token_endpoint_auth_methods_supported: Array<string>
+  scopes_supported?: Array<string>
+}
+
 /**
  * JSON Web Key Set containing the public keys used to verify Cloud JWTs.
  */
@@ -1531,6 +1775,10 @@ export type WorkspaceApiKeyInfo = {
    * User-provided label
    */
   name: string
+  /**
+   * User-provided description of the key's purpose. Limit is byte-based (UTF-8 encoding); 5000 bytes equals 5000 ASCII characters or fewer multi-byte characters.
+   */
+  description: string
   /**
    * First 8 chars after prefix for display
    */
@@ -1565,6 +1813,10 @@ export type CreateWorkspaceApiKeyResponse = {
    * User-provided label
    */
   name: string
+  /**
+   * User-provided description of the key's purpose. Limit is byte-based (UTF-8 encoding); 5000 bytes equals 5000 ASCII characters or fewer multi-byte characters.
+   */
+  description: string
   /**
    * The full plaintext API key (only shown once)
    */
@@ -1591,6 +1843,10 @@ export type CreateWorkspaceApiKeyRequest = {
    * User-provided label for the key
    */
   name: string
+  /**
+   * User-provided description of the key's purpose. Limit is byte-based (UTF-8 encoding); 5000 bytes equals 5000 ASCII characters or fewer multi-byte characters.
+   */
+  description?: string
   /**
    * Optional expiration timestamp
    */
@@ -2270,6 +2526,12 @@ export type ListAssetsResponse = {
    * Whether more assets are available beyond this page
    */
   has_more: boolean
+  /**
+   * Opaque cursor to pass as the `after` query parameter to fetch the
+   * next page. Omitted from the response when there are no more results.
+   *
+   */
+  next_cursor?: string
 }
 
 /**
@@ -2284,6 +2546,10 @@ export type Asset = {
    * Name of the asset file
    */
   name: string
+  /**
+   * Display name of the asset. Mirrors name for backwards compatibility.
+   */
+  display_name?: string | null
   /**
    * Blake3 hash of the asset content
    */
@@ -2360,6 +2626,10 @@ export type AssetUpdated = {
    * Updated name of the asset
    */
   name?: string
+  /**
+   * Display name of the asset. Mirrors name for backwards compatibility.
+   */
+  display_name?: string | null
   /**
    * Blake3 hash of the asset content
    */
@@ -3035,13 +3305,6 @@ export type ExportDownloadUrlResponse = {
   expires_at?: string
 }
 
-/**
- * Error shape returned when request binding or validation fails before the handler runs.
- */
-export type BindingErrorResponse = {
-  message: string
-}
-
 /**
  * Standard error response with a machine-readable code and human-readable message.
  */
@@ -3124,6 +3387,12 @@ export type ListAssetsResponseWritable = {
    * Whether more assets are available beyond this page
    */
   has_more: boolean
+  /**
+   * Opaque cursor to pass as the `after` query parameter to fetch the
+   * next page. Omitted from the response when there are no more results.
+   *
+   */
+  next_cursor?: string
 }
 
 /**
@@ -3138,6 +3407,10 @@ export type AssetWritable = {
    * Name of the asset file
    */
   name: string
+  /**
+   * Display name of the asset. Mirrors name for backwards compatibility.
+   */
+  display_name?: string | null
   /**
    * Blake3 hash of the asset content
    */
@@ -3507,50 +3780,6 @@ export type GetModelsInFolderResponses = {
 export type GetModelsInFolderResponse =
   GetModelsInFolderResponses[keyof GetModelsInFolderResponses]
 
-export type GetModelPreviewData = {
-  body?: never
-  path: {
-    /**
-     * The folder name containing the model
-     */
-    folder: string
-    /**
-     * The path index (usually 0 for cloud service)
-     */
-    path_index: number
-    /**
-     * The model filename (with or without .webp extension)
-     */
-    filename: string
-  }
-  query?: never
-  url: '/api/experiment/models/preview/{folder}/{path_index}/{filename}'
-}
-
-export type GetModelPreviewErrors = {
-  /**
-   * Model not found or preview not available
-   */
-  404: ErrorResponse
-  /**
-   * Internal server error
-   */
-  500: ErrorResponse
-}
-
-export type GetModelPreviewError =
-  GetModelPreviewErrors[keyof GetModelPreviewErrors]
-
-export type GetModelPreviewResponses = {
-  /**
-   * Success - Model preview image
-   */
-  200: Blob | File
-}
-
-export type GetModelPreviewResponse =
-  GetModelPreviewResponses[keyof GetModelPreviewResponses]
-
 export type GetLegacyHistoryData = {
   body?: never
   path?: never
@@ -4012,10 +4241,6 @@ export type ListAssetsData = {
      * Sort order
      */
     order?: 'asc' | 'desc'
-    /**
-     * Filter assets by job IDs (prompt IDs)
-     */
-    job_ids?: Array<string>
     /**
      * Whether to include public/shared assets in results
      */
@@ -4024,6 +4249,17 @@ export type ListAssetsData = {
      * Filter assets by exact content hash
      */
     asset_hash?: string
+    /**
+     * Opaque cursor for keyset pagination. Pass the `next_cursor` value
+     * from the previous response to fetch the next page. When provided,
+     * `offset` is ignored. Cursor pagination is only supported with
+     * `sort` values `created_at`, `updated_at`, `name`, or `size`;
+     * requests combining `after` with other sort fields return 400.
+     * The cursor must have been minted under the same `sort` value used
+     * in the follow-up request.
+     *
+     */
+    after?: string
   }
   url: '/api/assets'
 }
@@ -4122,10 +4358,6 @@ export type UploadAssetErrors = {
 export type UploadAssetError = UploadAssetErrors[keyof UploadAssetErrors]
 
 export type UploadAssetResponses = {
-  /**
-   * Asset already exists (returned existing asset)
-   */
-  200: AssetCreated
   /**
    * Asset created successfully
    */
@@ -4188,10 +4420,6 @@ export type CreateAssetFromHashError =
   CreateAssetFromHashErrors[keyof CreateAssetFromHashErrors]
 
 export type CreateAssetFromHashResponses = {
-  /**
-   * Asset reference already exists (returned existing)
-   */
-  200: AssetCreated
   /**
    * Asset reference created successfully
    */
@@ -5345,19 +5573,19 @@ export type UpdateMultipleSettingsResponses = {
 export type UpdateMultipleSettingsResponse =
   UpdateMultipleSettingsResponses[keyof UpdateMultipleSettingsResponses]
 
-export type GetSettingByKeyData = {
+export type GetSettingByIdData = {
   body?: never
   path: {
     /**
-     * Setting key to retrieve
+     * Setting id to retrieve
      */
-    key: string
+    id: string
   }
   query?: never
-  url: '/api/settings/{key}'
+  url: '/api/settings/{id}'
 }
 
-export type GetSettingByKeyErrors = {
+export type GetSettingByIdErrors = {
   /**
    * Unauthorized
    */
@@ -5368,10 +5596,10 @@ export type GetSettingByKeyErrors = {
   404: ErrorResponse
 }
 
-export type GetSettingByKeyError =
-  GetSettingByKeyErrors[keyof GetSettingByKeyErrors]
+export type GetSettingByIdError =
+  GetSettingByIdErrors[keyof GetSettingByIdErrors]
 
-export type GetSettingByKeyResponses = {
+export type GetSettingByIdResponses = {
   /**
    * Setting value response
    */
@@ -5383,25 +5611,25 @@ export type GetSettingByKeyResponses = {
   }
 }
 
-export type GetSettingByKeyResponse =
-  GetSettingByKeyResponses[keyof GetSettingByKeyResponses]
+export type GetSettingByIdResponse =
+  GetSettingByIdResponses[keyof GetSettingByIdResponses]
 
-export type UpdateSettingByKeyData = {
+export type UpdateSettingByIdData = {
   /**
    * New value for the setting
    */
   body: unknown
   path: {
     /**
-     * Setting key to update
+     * Setting id to update
      */
-    key: string
+    id: string
   }
   query?: never
-  url: '/api/settings/{key}'
+  url: '/api/settings/{id}'
 }
 
-export type UpdateSettingByKeyErrors = {
+export type UpdateSettingByIdErrors = {
   /**
    * Invalid request
    */
@@ -5412,10 +5640,10 @@ export type UpdateSettingByKeyErrors = {
   401: ErrorResponse
 }
 
-export type UpdateSettingByKeyError =
-  UpdateSettingByKeyErrors[keyof UpdateSettingByKeyErrors]
+export type UpdateSettingByIdError =
+  UpdateSettingByIdErrors[keyof UpdateSettingByIdErrors]
 
-export type UpdateSettingByKeyResponses = {
+export type UpdateSettingByIdResponses = {
   /**
    * Updated setting value response
    */
@@ -5427,8 +5655,8 @@ export type UpdateSettingByKeyResponses = {
   }
 }
 
-export type UpdateSettingByKeyResponse =
-  UpdateSettingByKeyResponses[keyof UpdateSettingByKeyResponses]
+export type UpdateSettingByIdResponse =
+  UpdateSettingByIdResponses[keyof UpdateSettingByIdResponses]
 
 export type SubmitFeedbackData = {
   body: FeedbackRequest
@@ -5916,40 +6144,6 @@ export type UploadMaskResponses = {
      * Type of upload (e.g., "output")
      */
     type?: string
-    /**
-     * Additional metadata for mask detection and re-editing
-     */
-    metadata?: {
-      /**
-       * Whether this file is a mask
-       */
-      is_mask?: boolean
-      /**
-       * Hash of the original unmasked image
-       */
-      original_hash?: string
-      /**
-       * Type of mask (e.g., "painted_masked")
-       */
-      mask_type?: string
-      /**
-       * Related mask layer files (if available)
-       */
-      related_files?: {
-        /**
-         * Hash of the mask layer
-         */
-        mask?: string
-        /**
-         * Hash of the paint layer
-         */
-        paint?: string
-        /**
-         * Hash of the painted image
-         */
-        painted?: string
-      }
-    }
   }
 }
 
@@ -6117,6 +6311,229 @@ export type GetJwksResponses = {
 
 export type GetJwksResponse = GetJwksResponses[keyof GetJwksResponses]
 
+export type GetOAuthAuthorizationServerData = {
+  body?: never
+  path?: never
+  query?: never
+  url: '/.well-known/oauth-authorization-server'
+}
+
+export type GetOAuthAuthorizationServerErrors = {
+  /**
+   * OAuth disabled
+   */
+  404: ErrorResponse
+}
+
+export type GetOAuthAuthorizationServerError =
+  GetOAuthAuthorizationServerErrors[keyof GetOAuthAuthorizationServerErrors]
+
+export type GetOAuthAuthorizationServerResponses = {
+  /**
+   * Authorization-server metadata
+   */
+  200: OAuthAuthorizationServerMetadata
+}
+
+export type GetOAuthAuthorizationServerResponse =
+  GetOAuthAuthorizationServerResponses[keyof GetOAuthAuthorizationServerResponses]
+
+export type GetOAuthProtectedResourceData = {
+  body?: never
+  path?: never
+  query?: never
+  url: '/.well-known/oauth-protected-resource'
+}
+
+export type GetOAuthProtectedResourceErrors = {
+  /**
+   * OAuth disabled or no active resource configured
+   */
+  404: ErrorResponse
+}
+
+export type GetOAuthProtectedResourceError =
+  GetOAuthProtectedResourceErrors[keyof GetOAuthProtectedResourceErrors]
+
+export type GetOAuthProtectedResourceResponses = {
+  /**
+   * Protected-resource metadata
+   */
+  200: OAuthProtectedResourceMetadata
+}
+
+export type GetOAuthProtectedResourceResponse =
+  GetOAuthProtectedResourceResponses[keyof GetOAuthProtectedResourceResponses]
+
+export type GetOAuthAuthorizeData = {
+  body?: never
+  path?: never
+  query?: {
+    response_type?: string
+    client_id?: string
+    redirect_uri?: string
+    scope?: string
+    /**
+     * RFC 6749 §10.12 marks `state` as RECOMMENDED. Our hardening makes
+     * it REQUIRED on the initial-entry path (omitted only on the resume
+     * path where `oauth_request_id` is supplied instead). This parameter
+     * is `required: false` at the spec level only because the operation
+     * is dual-mode (initial entry vs. resume); the runtime parser
+     * (services/ingest/server/implementation/oauth/protocol/request.go)
+     * rejects empty `state` on the initial-entry path with a stable
+     * `invalid_request` 400.
+     *
+     */
+    state?: string
+    code_challenge?: string
+    code_challenge_method?: string
+    resource?: string
+    oauth_request_id?: string
+  }
+  url: '/oauth/authorize'
+}
+
+export type GetOAuthAuthorizeErrors = {
+  /**
+   * Invalid authorize request (pre-redirect failure — unknown client, redirect mismatch, malformed params)
+   */
+  400: ErrorResponse
+  /**
+   * OAuth disabled
+   */
+  404: ErrorResponse
+}
+
+export type GetOAuthAuthorizeError =
+  GetOAuthAuthorizeErrors[keyof GetOAuthAuthorizeErrors]
+
+export type GetOAuthAuthorizeResponses = {
+  /**
+   * Consent challenge payload (cookie present, email verified). Frontend renders the consent UI from this payload and POSTs back to /oauth/authorize.
+   *
+   */
+  200: OAuthConsentChallenge
+}
+
+export type GetOAuthAuthorizeResponse =
+  GetOAuthAuthorizeResponses[keyof GetOAuthAuthorizeResponses]
+
+export type PostOAuthAuthorizeData = {
+  body: {
+    oauth_request_id: string
+    csrf_token: string
+    decision: 'allow' | 'deny'
+    workspace_id: string
+  }
+  path?: never
+  query?: never
+  url: '/oauth/authorize'
+}
+
+export type PostOAuthAuthorizeErrors = {
+  /**
+   * Bad request (CSRF mismatch, expired/consumed request, inaccessible workspace)
+   */
+  400: ErrorResponse
+  /**
+   * Scope broadening on consent re-grant — fresh consent flow required
+   */
+  403: ErrorResponse
+  /**
+   * OAuth disabled
+   */
+  404: ErrorResponse
+}
+
+export type PostOAuthAuthorizeError =
+  PostOAuthAuthorizeErrors[keyof PostOAuthAuthorizeErrors]
+
+export type PostOAuthAuthorizeResponses = {
+  /**
+   * Redirect URL for the frontend to navigate to (allow → with code+state; deny → with error+state)
+   */
+  200: OAuthAuthorizeRedirectResponse
+}
+
+export type PostOAuthAuthorizeResponse =
+  PostOAuthAuthorizeResponses[keyof PostOAuthAuthorizeResponses]
+
+export type PostOAuthTokenData = {
+  body: {
+    grant_type: 'authorization_code' | 'refresh_token'
+    client_id: string
+    code?: string
+    redirect_uri?: string
+    code_verifier?: string
+    refresh_token?: string
+    scope?: string
+    client_secret?: string
+  }
+  path?: never
+  query?: never
+  url: '/oauth/token'
+}
+
+export type PostOAuthTokenErrors = {
+  /**
+   * RFC 6749 §5.2 error
+   */
+  400: OAuthTokenError
+  /**
+   * OAuth disabled
+   */
+  404: ErrorResponse
+}
+
+export type PostOAuthTokenError =
+  PostOAuthTokenErrors[keyof PostOAuthTokenErrors]
+
+export type PostOAuthTokenResponses = {
+  /**
+   * New token pair
+   */
+  200: OAuthTokenResponse
+}
+
+export type PostOAuthTokenResponse =
+  PostOAuthTokenResponses[keyof PostOAuthTokenResponses]
+
+export type PostOAuthRegisterData = {
+  body: OAuthRegisterRequest
+  path?: never
+  query?: never
+  url: '/oauth/register'
+}
+
+export type PostOAuthRegisterErrors = {
+  /**
+   * Bad request. Two shapes possible: `OAuthRegisterError` (RFC 7591 §3.2.2, emitted by the handler for invalid client metadata, missing application_type, reserved client_name, etc.) OR `BindingErrorResponse` (emitted by the strict-server binding layer when the request body fails OpenAPI-schema validation — malformed JSON, missing required fields, `additionalProperties: false` violations).
+   *
+   */
+  400: OAuthRegisterBadRequestResponse
+  /**
+   * OAuth disabled
+   */
+  404: ErrorResponse
+  /**
+   * No active MCP resource is configured — DCR cannot mint a usable client until ops seeds an active oauth_resources row.
+   */
+  503: ErrorResponse
+}
+
+export type PostOAuthRegisterError =
+  PostOAuthRegisterErrors[keyof PostOAuthRegisterErrors]
+
+export type PostOAuthRegisterResponses = {
+  /**
+   * Registered. Body echoes the metadata RFC 7591 §3.2.1 requires.
+   */
+  201: OAuthRegisterResponse
+}
+
+export type PostOAuthRegisterResponse =
+  PostOAuthRegisterResponses[keyof PostOAuthRegisterResponses]
+
 export type ListWorkspacesData = {
   body?: never
   path?: never
@@ -6679,7 +7096,7 @@ export type CreateWorkspaceApiKeyErrors = {
    */
   401: ErrorResponse
   /**
-   * Not a workspace member or personal workspace
+   * Not a workspace member
    */
   403: ErrorResponse
   /**
@@ -7140,6 +7557,51 @@ export type UpdateSubscriptionCacheResponses = {
 export type UpdateSubscriptionCacheResponse =
   UpdateSubscriptionCacheResponses[keyof UpdateSubscriptionCacheResponses]
 
+export type InsertDynamicConfigData = {
+  /**
+   * A valid dynamicconfig.Config JSON object.
+   */
+  body: {
+    [key: string]: unknown
+  }
+  path?: never
+  query?: never
+  url: '/admin/api/dynamic-config'
+}
+
+export type InsertDynamicConfigErrors = {
+  /**
+   * Invalid or missing request body
+   */
+  400: ErrorResponse
+  /**
+   * Database insert failed
+   */
+  500: ErrorResponse
+}
+
+export type InsertDynamicConfigError =
+  InsertDynamicConfigErrors[keyof InsertDynamicConfigErrors]
+
+export type InsertDynamicConfigResponses = {
+  /**
+   * Config inserted successfully
+   */
+  201: {
+    /**
+     * The database ID of the newly inserted config row.
+     */
+    id?: number
+    /**
+     * Human-readable success message.
+     */
+    message?: string
+  }
+}
+
+export type InsertDynamicConfigResponse =
+  InsertDynamicConfigResponses[keyof InsertDynamicConfigResponses]
+
 export type SyncApiKeyData = {
   body: SyncApiKeyRequest
   path?: never
@@ -8888,9 +9350,20 @@ export type GetTemplateProxyData = {
 
 export type GetTemplateProxyErrors = {
   /**
-   * Template not found
+   * Template not found.
    */
   404: unknown
+  /**
+   * Workflow templates version not available.
+   */
+  503: unknown
+}
+
+export type GetTemplateProxyResponses = {
+  /**
+   * Template file content streamed from GCS.
+   */
+  200: unknown
 }
 
 export type GetHealthData = {
@@ -8918,20 +9391,6 @@ export type GetHealthResponses = {
 
 export type GetHealthResponse = GetHealthResponses[keyof GetHealthResponses]
 
-export type GetOpenapiSpecData = {
-  body?: never
-  path?: never
-  query?: never
-  url: '/openapi'
-}
-
-export type GetOpenapiSpecResponses = {
-  /**
-   * OpenAPI specification document
-   */
-  200: unknown
-}
-
 export type GetMonitoringTasksData = {
   body?: never
   path?: never
@@ -9194,6 +9653,33 @@ export type PostCustomNodeProxyResponses = {
   200: unknown
 }
 
+export type GetModelPreviewData = {
+  body?: never
+  path: {
+    /**
+     * The folder name containing the model.
+     */
+    folder: string
+    /**
+     * The path index (usually 0 for cloud service).
+     */
+    path_index: number
+    /**
+     * The model filename (with or without .webp extension).
+     */
+    filename: string
+  }
+  query?: never
+  url: '/api/experiment/models/preview/{folder}/{path_index}/{filename}'
+}
+
+export type GetModelPreviewErrors = {
+  /**
+   * Preview not available on Cloud
+   */
+  404: unknown
+}
+
 export type GetLegacyPromptByIdData = {
   body?: never
   path: {

packages/ingest-types/src/zod.gen.ts

@@ -879,6 +879,153 @@ export const zJwkKey = z.object({
   y: z.string()
 })
 
+/**
+ * RFC 6749 §5.2 error response.
+ */
+export const zOAuthTokenError = z.object({
+  error: z.string(),
+  error_description: z.string().optional()
+})
+
+/**
+ * RFC 6749 §5.1 successful token response.
+ */
+export const zOAuthTokenResponse = z.object({
+  access_token: z.string(),
+  token_type: z.enum(['Bearer']),
+  expires_in: z.number().int(),
+  refresh_token: z.string(),
+  scope: z.string()
+})
+
+/**
+ * One workspace option presented in the OAuth consent challenge. Promoted to a named schema so the generated Go type is referenceable in handlers and tests rather than re-declared as an anonymous struct at every callsite.
+ *
+ */
+export const zOAuthConsentChallengeWorkspace = z.object({
+  id: z.string(),
+  name: z.string(),
+  type: z.enum(['personal', 'team']),
+  role: z.enum(['owner', 'member'])
+})
+
+/**
+ * Redirect target produced after a JSON consent submission. The frontend must navigate the browser to this URL so custom-scheme client callbacks work without relying on fetch-visible 302 headers.
+ */
+export const zOAuthAuthorizeRedirectResponse = z.object({
+  redirect_url: z.string().url()
+})
+
+/**
+ * Server-side state describing the OAuth consent decision the user is being asked to make. Returned by GET /oauth/authorize when a valid Cloud session exists; the frontend renders the consent UI from this payload and POSTs the decision back. Browser never sees the original OAuth params on resume.
+ *
+ */
+export const zOAuthConsentChallenge = z.object({
+  oauth_request_id: z.string().uuid(),
+  csrf_token: z.string(),
+  client_display_name: z.string(),
+  resource_display_name: z.string(),
+  scopes: z.array(z.string()),
+  workspaces: z.array(zOAuthConsentChallengeWorkspace)
+})
+
+/**
+ * OAuth 2.1 protected-resource metadata (RFC 9728).
+ */
+export const zOAuthProtectedResourceMetadata = z.object({
+  resource: z.string().url(),
+  authorization_servers: z.array(z.string().url()),
+  scopes_supported: z.array(z.string()),
+  bearer_methods_supported: z.array(z.string()).optional()
+})
+
+/**
+ * RFC 7591 §3.2.2 error response.
+ */
+export const zOAuthRegisterError = z.object({
+  error: z.enum(['invalid_redirect_uri', 'invalid_client_metadata']),
+  error_description: z.string().nullish()
+})
+
+/**
+ * Error shape returned when request binding or validation fails before the handler runs.
+ */
+export const zBindingErrorResponse = z.object({
+  message: z.string()
+})
+
+/**
+ * Union of the two 400 shapes /oauth/register can emit. `OAuthRegisterError` is the handler-shaped RFC 7591 §3.2.2 error; `BindingErrorResponse` is the strict-server binding-layer error fired when the request body fails OpenAPI-schema validation before the handler runs.
+ *
+ */
+export const zOAuthRegisterBadRequestResponse = z.union([
+  zOAuthRegisterError,
+  zBindingErrorResponse
+])
+
+/**
+ * RFC 7591 §3.2.1 successful registration response.
+ */
+export const zOAuthRegisterResponse = z.object({
+  client_id: z.string(),
+  client_id_issued_at: z.coerce
+    .bigint()
+    .min(BigInt('-9223372036854775808'), {
+      message: 'Invalid value: Expected int64 to be >= -9223372036854775808'
+    })
+    .max(BigInt('9223372036854775807'), {
+      message: 'Invalid value: Expected int64 to be <= 9223372036854775807'
+    }),
+  client_name: z.string().optional(),
+  redirect_uris: z.array(z.string()),
+  grant_types: z.array(z.string()),
+  response_types: z.array(z.string()),
+  token_endpoint_auth_method: z.enum(['none']),
+  application_type: z.enum(['native', 'web'])
+})
+
+/**
+ * RFC 7591 §2 client metadata document. Only the fields the server honors are listed; presence of `scope` or `resource_grants` in the request is rejected (`invalid_client_metadata`) because those are server-owned for dynamic clients. `additionalProperties: false` mirrors the runtime middleware that rejects any unknown metadata key.
+ *
+ */
+export const zOAuthRegisterRequest = z.object({
+  redirect_uris: z.array(z.string()).min(1).max(5),
+  client_name: z.string().max(100).optional(),
+  application_type: z.enum(['native', 'web']),
+  token_endpoint_auth_method: z.enum(['none']).optional(),
+  grant_types: z
+    .array(z.enum(['authorization_code', 'refresh_token']))
+    .optional(),
+  response_types: z.array(z.enum(['code'])).optional(),
+  scope: z.string().nullish(),
+  resource_grants: z.record(z.array(z.string())).nullish(),
+  client_uri: z.string().nullish(),
+  logo_uri: z.string().nullish(),
+  tos_uri: z.string().nullish(),
+  policy_uri: z.string().nullish(),
+  software_id: z.string().nullish(),
+  software_version: z.string().nullish(),
+  contacts: z.array(z.string()).nullish(),
+  jwks: z.record(z.unknown()).nullish(),
+  jwks_uri: z.string().nullish()
+})
+
+/**
+ * OAuth 2.1 authorization-server metadata (RFC 8414).
+ */
+export const zOAuthAuthorizationServerMetadata = z.object({
+  issuer: z.string().url(),
+  authorization_endpoint: z.string().url(),
+  token_endpoint: z.string().url(),
+  jwks_uri: z.string().url(),
+  registration_endpoint: z.string().url().optional(),
+  response_types_supported: z.array(z.string()),
+  grant_types_supported: z.array(z.string()),
+  code_challenge_methods_supported: z.array(z.string()),
+  token_endpoint_auth_methods_supported: z.array(z.string()),
+  scopes_supported: z.array(z.string()).optional()
+})
+
 /**
  * JSON Web Key Set containing the public keys used to verify Cloud JWTs.
  */
@@ -940,6 +1087,7 @@ export const zWorkspaceApiKeyInfo = z.object({
   workspace_id: z.string(),
   user_id: z.string(),
   name: z.string(),
+  description: z.string().max(5000),
   key_prefix: z.string(),
   expires_at: z.string().datetime().optional(),
   last_used_at: z.string().datetime().optional(),
@@ -960,6 +1108,7 @@ export const zListWorkspaceApiKeysResponse = z.object({
 export const zCreateWorkspaceApiKeyResponse = z.object({
   id: z.string().uuid(),
   name: z.string(),
+  description: z.string().max(5000),
   key: z.string(),
   key_prefix: z.string(),
   expires_at: z.string().datetime().optional(),
@@ -971,6 +1120,7 @@ export const zCreateWorkspaceApiKeyResponse = z.object({
  */
 export const zCreateWorkspaceApiKeyRequest = z.object({
   name: z.string(),
+  description: z.string().max(5000).optional(),
   expires_at: z.string().datetime().optional()
 })
 
@@ -1353,6 +1503,7 @@ export const zListTagsResponse = z.object({
 export const zAsset = z.object({
   id: z.string().uuid(),
   name: z.string(),
+  display_name: z.string().nullish(),
   asset_hash: z
     .string()
     .regex(/^blake3:[a-f0-9]{64}$/)
@@ -1385,7 +1536,8 @@ export const zAsset = z.object({
 export const zListAssetsResponse = z.object({
   assets: z.array(zAsset),
   total: z.number().int(),
-  has_more: z.boolean()
+  has_more: z.boolean(),
+  next_cursor: z.string().optional()
 })
 
 /**
@@ -1394,6 +1546,7 @@ export const zListAssetsResponse = z.object({
 export const zAssetUpdated = z.object({
   id: z.string().uuid(),
   name: z.string().optional(),
+  display_name: z.string().nullish(),
   asset_hash: z
     .string()
     .regex(/^blake3:[a-f0-9]{64}$/)
@@ -1753,13 +1906,6 @@ export const zExportDownloadUrlResponse = z.object({
   expires_at: z.string().datetime().optional()
 })
 
-/**
- * Error shape returned when request binding or validation fails before the handler runs.
- */
-export const zBindingErrorResponse = z.object({
-  message: z.string()
-})
-
 /**
  * Standard error response with a machine-readable code and human-readable message.
  */
@@ -1796,6 +1942,7 @@ export const zPromptRequest = z.object({
 export const zAssetWritable = z.object({
   id: z.string().uuid(),
   name: z.string(),
+  display_name: z.string().nullish(),
   asset_hash: z
     .string()
     .regex(/^blake3:[a-f0-9]{64}$/)
@@ -1827,7 +1974,8 @@ export const zAssetWritable = z.object({
 export const zListAssetsResponseWritable = z.object({
   assets: z.array(zAssetWritable),
   total: z.number().int(),
-  has_more: z.boolean()
+  has_more: z.boolean(),
+  next_cursor: z.string().optional()
 })
 
 /**
@@ -1961,21 +2109,6 @@ export const zGetModelsInFolderData = z.object({
  */
 export const zGetModelsInFolderResponse = z.array(zModelFile)
 
-export const zGetModelPreviewData = z.object({
-  body: z.never().optional(),
-  path: z.object({
-    folder: z.string(),
-    path_index: z.number().int(),
-    filename: z.string()
-  }),
-  query: z.never().optional()
-})
-
-/**
- * Success - Model preview image
- */
-export const zGetModelPreviewResponse = z.string()
-
 export const zGetLegacyHistoryData = z.object({
   body: z.never().optional(),
   path: z.never().optional(),
@@ -2132,9 +2265,9 @@ export const zListAssetsData = z.object({
         .enum(['name', 'created_at', 'updated_at', 'size', 'last_access_time'])
         .optional(),
       order: z.enum(['asc', 'desc']).optional(),
-      job_ids: z.array(z.string().uuid()).optional(),
       include_public: z.boolean().optional().default(true),
-      asset_hash: z.string().optional()
+      asset_hash: z.string().optional(),
+      after: z.string().optional()
     })
     .optional()
 })
@@ -2157,7 +2290,7 @@ export const zUploadAssetData = z.object({
 })
 
 /**
- * Asset already exists (returned existing asset)
+ * Asset created successfully
  */
 export const zUploadAssetResponse = zAssetCreated
 
@@ -2174,7 +2307,7 @@ export const zCreateAssetFromHashData = z.object({
 })
 
 /**
- * Asset reference already exists (returned existing)
+ * Asset reference created successfully
  */
 export const zCreateAssetFromHashResponse = zAssetCreated
 
@@ -2509,10 +2642,10 @@ export const zUpdateMultipleSettingsData = z.object({
  */
 export const zUpdateMultipleSettingsResponse = z.record(z.unknown())
 
-export const zGetSettingByKeyData = z.object({
+export const zGetSettingByIdData = z.object({
   body: z.never().optional(),
   path: z.object({
-    key: z.string()
+    id: z.string()
   }),
   query: z.never().optional()
 })
@@ -2520,14 +2653,14 @@ export const zGetSettingByKeyData = z.object({
 /**
  * Setting value response
  */
-export const zGetSettingByKeyResponse = z.object({
+export const zGetSettingByIdResponse = z.object({
   value: z.unknown().optional()
 })
 
-export const zUpdateSettingByKeyData = z.object({
+export const zUpdateSettingByIdData = z.object({
   body: z.unknown(),
   path: z.object({
-    key: z.string()
+    id: z.string()
   }),
   query: z.never().optional()
 })
@@ -2535,7 +2668,7 @@ export const zUpdateSettingByKeyData = z.object({
 /**
  * Updated setting value response
  */
-export const zUpdateSettingByKeyResponse = z.object({
+export const zUpdateSettingByIdResponse = z.object({
   value: z.unknown().optional()
 })
 
@@ -2691,21 +2824,7 @@ export const zUploadMaskData = z.object({
 export const zUploadMaskResponse = z.object({
   name: z.string().optional(),
   subfolder: z.string().optional(),
-  type: z.string().optional(),
-  metadata: z
-    .object({
-      is_mask: z.boolean().optional(),
-      original_hash: z.string().optional(),
-      mask_type: z.string().optional(),
-      related_files: z
-        .object({
-          mask: z.string().optional(),
-          paint: z.string().optional(),
-          painted: z.string().optional()
-        })
-        .optional()
-    })
-    .optional()
+  type: z.string().optional()
 })
 
 export const zGetLogsData = z.object({
@@ -2774,6 +2893,101 @@ export const zGetJwksData = z.object({
  */
 export const zGetJwksResponse = zJwksResponse
 
+export const zGetOAuthAuthorizationServerData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Authorization-server metadata
+ */
+export const zGetOAuthAuthorizationServerResponse =
+  zOAuthAuthorizationServerMetadata
+
+export const zGetOAuthProtectedResourceData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Protected-resource metadata
+ */
+export const zGetOAuthProtectedResourceResponse =
+  zOAuthProtectedResourceMetadata
+
+export const zGetOAuthAuthorizeData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z
+    .object({
+      response_type: z.string().optional(),
+      client_id: z.string().optional(),
+      redirect_uri: z.string().optional(),
+      scope: z.string().optional(),
+      state: z.string().optional(),
+      code_challenge: z.string().optional(),
+      code_challenge_method: z.string().optional(),
+      resource: z.string().optional(),
+      oauth_request_id: z.string().optional()
+    })
+    .optional()
+})
+
+/**
+ * Consent challenge payload (cookie present, email verified). Frontend renders the consent UI from this payload and POSTs back to /oauth/authorize.
+ *
+ */
+export const zGetOAuthAuthorizeResponse = zOAuthConsentChallenge
+
+export const zPostOAuthAuthorizeData = z.object({
+  body: z.object({
+    oauth_request_id: z.string().uuid(),
+    csrf_token: z.string(),
+    decision: z.enum(['allow', 'deny']),
+    workspace_id: z.string()
+  }),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Redirect URL for the frontend to navigate to (allow → with code+state; deny → with error+state)
+ */
+export const zPostOAuthAuthorizeResponse = zOAuthAuthorizeRedirectResponse
+
+export const zPostOAuthTokenData = z.object({
+  body: z.object({
+    grant_type: z.enum(['authorization_code', 'refresh_token']),
+    client_id: z.string(),
+    code: z.string().optional(),
+    redirect_uri: z.string().optional(),
+    code_verifier: z.string().optional(),
+    refresh_token: z.string().optional(),
+    scope: z.string().optional(),
+    client_secret: z.string().optional()
+  }),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * New token pair
+ */
+export const zPostOAuthTokenResponse = zOAuthTokenResponse
+
+export const zPostOAuthRegisterData = z.object({
+  body: zOAuthRegisterRequest,
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Registered. Body echoes the metadata RFC 7591 §3.2.1 requires.
+ */
+export const zPostOAuthRegisterResponse = zOAuthRegisterResponse
+
 export const zListWorkspacesData = z.object({
   body: z.never().optional(),
   path: z.never().optional(),
@@ -3078,6 +3292,28 @@ export const zUpdateSubscriptionCacheResponse = z.object({
   status: z.string().optional()
 })
 
+export const zInsertDynamicConfigData = z.object({
+  body: z.record(z.unknown()),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Config inserted successfully
+ */
+export const zInsertDynamicConfigResponse = z.object({
+  id: z.coerce
+    .bigint()
+    .min(BigInt('-9223372036854775808'), {
+      message: 'Invalid value: Expected int64 to be >= -9223372036854775808'
+    })
+    .max(BigInt('9223372036854775807'), {
+      message: 'Invalid value: Expected int64 to be <= 9223372036854775807'
+    })
+    .optional(),
+  message: z.string().optional()
+})
+
 export const zSyncApiKeyData = z.object({
   body: zSyncApiKeyRequest,
   path: z.never().optional(),
@@ -3671,12 +3907,6 @@ export const zGetHealthData = z.object({
  */
 export const zGetHealthResponse = z.string()
 
-export const zGetOpenapiSpecData = z.object({
-  body: z.never().optional(),
-  path: z.never().optional(),
-  query: z.never().optional()
-})
-
 export const zGetMonitoringTasksData = z.object({
   body: z.never().optional(),
   path: z.never().optional(),
@@ -3757,6 +3987,16 @@ export const zPostCustomNodeProxyData = z.object({
   query: z.never().optional()
 })
 
+export const zGetModelPreviewData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    folder: z.string(),
+    path_index: z.number().int(),
+    filename: z.string()
+  }),
+  query: z.never().optional()
+})
+
 export const zGetLegacyPromptByIdData = z.object({
   body: z.never().optional(),
   path: z.object({

pnpm-workspace.yaml

@@ -17,7 +17,7 @@ catalog:
   '@formkit/auto-animate': ^0.9.0
   '@iconify-json/lucide': ^1.1.178
   '@iconify/json': ^2.2.380
-  '@iconify/tailwind4': ^1.2.3
+  '@iconify/tailwind4': ^1.2.0
   '@iconify/utils': ^3.1.0
   '@intlify/eslint-plugin-vue-i18n': ^4.1.1
   '@lobehub/i18n-cli': ^1.26.1
@@ -66,10 +66,10 @@ catalog:
   '@webgpu/types': ^0.1.66
   algoliasearch: ^5.21.0
   astro: ^5.10.0
-  axios: ^1.15.2
+  axios: ^1.13.5
   cross-env: ^10.1.0
   cva: 1.0.0-beta.4
-  dompurify: ^3.4.5
+  dompurify: ^3.3.1
   dotenv: ^16.4.5
   eslint: ^9.39.1
   eslint-config-prettier: ^10.1.8
@@ -87,12 +87,12 @@ catalog:
   glob: ^13.0.6
   globals: ^16.5.0
   gsap: ^3.14.2
-  happy-dom: ^20.8.9
+  happy-dom: ^20.0.11
   husky: ^9.1.7
   jiti: 2.6.1
   jsdom: ^27.4.0
   jsonata: ^2.1.0
-  knip: ^6.14.1
+  knip: ^6.3.1
   lenis: ^1.3.21
   lint-staged: ^16.2.7
   markdown-table: ^3.0.4
@@ -108,13 +108,13 @@ catalog:
   pretty-bytes: ^7.1.0
   primeicons: ^7.0.0
   primevue: ^4.2.5
-  reka-ui: 2.5.0
+  reka-ui: ^2.5.0
   rollup-plugin-visualizer: ^6.0.4
   storybook: ^10.2.10
   stylelint: ^16.26.1
   tailwindcss: ^4.3.0
-  tailwindcss-primeui: ^0.6.1
   three: ^0.184.0
+  tailwindcss-primeui: ^0.6.1
   tsx: ^4.15.6
   tw-animate-css: ^1.3.8
   typegpu: ^0.8.2
@@ -123,14 +123,13 @@ catalog:
   unplugin-icons: ^22.5.0
   unplugin-typegpu: 0.8.0
   unplugin-vue-components: ^30.0.0
-  uuid: ^11.1.1
   vee-validate: ^4.15.1
-  vite: ^8.0.13
+  vite: ^8.0.0
   vite-plugin-dts: ^4.5.4
   vite-plugin-html: ^3.2.2
   vite-plugin-vue-devtools: ^8.0.0
   vitest: ^4.0.16
-  vue: ^3.5.34
+  vue: ^3.5.13
   vue-component-type-helpers: ^3.2.1
   vue-eslint-parser: ^10.4.0
   vue-i18n: ^9.14.5
@@ -161,13 +160,3 @@ overrides:
   vite: 'catalog:'
   '@tiptap/pm': 2.27.2
   '@types/eslint': '-'
-  protobufjs: ~7.6.0
-  flatted: ~3.4.2
-  defu: ~6.1.7
-  # Security overrides (see pnpm.overrides in package.json for the actual pins):
-  # protobufjs ~7.6.0 — CVE-2026-41242 (CVSS 9.8): arbitrary code execution.
-  #   Transitive via firebase, posthog-js. Remove after firebase upgrades protobufjs.
-  # flatted ~3.4.2 — GHSA-x7hr-w5r2-h6qg: prototype pollution.
-  #   Transitive via eslint flat-cache@4.0.1. Dev-only. Remove after eslint upgrades flat-cache.
-  # defu ~6.1.7 — GHSA-47f6-5gq3-vx9c: prototype pollution.
-  #   Transitive via reka-ui, c12, unplugin-typegpu. Remove after reka-ui upgrades defu.

src/components/builder/AppBuilder.vue

@@ -8,9 +8,7 @@ import AppModeWidgetList from '@/components/builder/AppModeWidgetList.vue'
 import DraggableList from '@/components/common/DraggableList.vue'
 import IoItem from '@/components/builder/IoItem.vue'
 import PropertiesAccordionItem from '@/components/rightSidePanel/layout/PropertiesAccordionItem.vue'
-import { useResolvedSelectedInputs } from '@/components/builder/useResolvedSelectedInputs'
-import type { ResolvedSelection } from '@/components/builder/useResolvedSelectedInputs'
-import type { WidgetEntityId } from '@/world/entityIds'
+import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
@@ -30,6 +28,7 @@ import { DOMWidgetImpl } from '@/scripts/domWidget'
 import { renameWidget } from '@/utils/widgetUtil'
 import { useAppMode } from '@/composables/useAppMode'
 import { nodeTypeValidForApp, useAppModeStore } from '@/stores/appModeStore'
+import { resolveNodeWidget } from '@/utils/litegraphUtil'
 import { cn } from '@comfyorg/tailwind-utils'
 
 type BoundStyle = { top: string; left: string; width: string; height: string }
@@ -48,8 +47,26 @@ const hoveringSelectable = ref(false)
 
 workflowStore.activeWorkflow?.changeTracker?.reset()
 
-const resolvedInputs = useResolvedSelectedInputs()
+const inputsWithState = computed(() =>
+  appModeStore.selectedInputs.map(([nodeId, widgetName]) => {
+    const [node, widget] = resolveNodeWidget(nodeId, widgetName)
+    if (!node || !widget) {
+      return {
+        nodeId,
+        widgetName,
+        subLabel: t('linearMode.builder.unknownWidget')
+      }
+    }
 
+    return {
+      nodeId,
+      widgetName,
+      label: widget.label,
+      subLabel: node.title,
+      canRename: true
+    }
+  })
+)
 const outputsWithState = computed<[NodeId, string][]>(() =>
   appModeStore.selectedOutputs.map((nodeId) => [
     nodeId,
@@ -57,6 +74,16 @@ const outputsWithState = computed<[NodeId, string][]>(() =>
   ])
 )
 
+function inlineRenameInput(
+  nodeId: NodeId,
+  widgetName: string,
+  newLabel: string
+) {
+  const [node, widget] = resolveNodeWidget(nodeId, widgetName)
+  if (!node || !widget) return
+  renameWidget(widget, node, newLabel)
+}
+
 function getHovered(
   e: MouseEvent
 ): undefined | [LGraphNode, undefined] | [LGraphNode, IBaseWidget] {
@@ -75,26 +102,22 @@ function getHovered(
   if (widget || node.constructor.nodeData?.output_node) return [node, widget]
 }
 
-function getNodeBounding(nodeId: NodeId) {
+function getBounding(nodeId: NodeId, widgetName?: string) {
   if (settingStore.get('Comfy.VueNodes.Enabled')) return undefined
-  const node = app.rootGraph.getNodeById(nodeId)
+  const [node, widget] = resolveNodeWidget(nodeId, widgetName)
   if (!node) return
 
   const titleOffset =
     node.title_mode === TitleMode.NORMAL_TITLE ? LiteGraph.NODE_TITLE_HEIGHT : 0
 
-  return {
-    width: `${node.size[0]}px`,
-    height: `${node.size[1] + titleOffset}px`,
-    left: `${node.pos[0]}px`,
-    top: `${node.pos[1] - titleOffset}px`
-  }
-}
-
-function getWidgetBounding(entry: ResolvedSelection): BoundStyle | undefined {
-  if (settingStore.get('Comfy.VueNodes.Enabled')) return undefined
-  if (entry.status !== 'resolved') return undefined
-  const { node, widget } = entry
+  if (!widgetName)
+    return {
+      width: `${node.size[0]}px`,
+      height: `${node.size[1] + titleOffset}px`,
+      left: `${node.pos[0]}px`,
+      top: `${node.pos[1] - titleOffset}px`
+    }
+  if (!widget) return
 
   const margin = widget instanceof DOMWidgetImpl ? widget.margin : undefined
   const marginX = margin ?? BaseWidget.margin
@@ -110,11 +133,6 @@ function getWidgetBounding(entry: ResolvedSelection): BoundStyle | undefined {
   }
 }
 
-function removeSelectedEntityId(entityId: WidgetEntityId): void {
-  const index = appModeStore.selectedInputs.findIndex(([id]) => id === entityId)
-  if (index !== -1) appModeStore.selectedInputs.splice(index, 1)
-}
-
 function handleDown(e: MouseEvent) {
   const [node] = getHovered(e) ?? []
   if (!node || e.button > 0) canvasInteractions.forwardEventToCanvas(e)
@@ -139,11 +157,14 @@ function handleClick(e: MouseEvent) {
   }
   if (!isSelectInputsMode.value || widget.options.canvasOnly) return
 
-  const entityId = widget.entityId
-  if (!entityId) return
-  const index = appModeStore.selectedInputs.findIndex(([id]) => id === entityId)
-  if (index === -1)
-    appModeStore.selectedInputs.push([entityId, widget.name, undefined])
+  const storeId = isPromotedWidgetView(widget) ? widget.sourceNodeId : node.id
+  const storeName = isPromotedWidgetView(widget)
+    ? widget.sourceWidgetName
+    : widget.name
+  const index = appModeStore.selectedInputs.findIndex(
+    ([nodeId, widgetName]) => storeId == nodeId && storeName === widgetName
+  )
+  if (index === -1) appModeStore.selectedInputs.push([storeId, storeName])
   else appModeStore.selectedInputs.splice(index, 1)
 }
 
@@ -152,7 +173,7 @@ function nodeToDisplayTuple(
 ): [NodeId, MaybeRef<BoundStyle> | undefined, boolean] {
   return [
     n.id,
-    getNodeBounding(n.id),
+    getBounding(n.id),
     appModeStore.selectedOutputs.some((id) => n.id === id)
   ]
 }
@@ -170,13 +191,10 @@ const renderedOutputs = computed(() => {
 })
 const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
   () =>
-    resolvedInputs.value.map(
-      (entry) =>
-        [entry.entityId, getWidgetBounding(entry)] as [
-          string,
-          MaybeRef<BoundStyle> | undefined
-        ]
-    )
+    appModeStore.selectedInputs.map(([nodeId, widgetName]) => [
+      `${nodeId}: ${widgetName}`,
+      getBounding(nodeId, widgetName)
+    ])
 )
 </script>
 <template>
@@ -220,28 +238,30 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
           v-slot="{ dragClass }"
           v-model="appModeStore.selectedInputs"
         >
-          <template v-for="entry in resolvedInputs" :key="entry.entityId">
-            <IoItem
-              v-if="entry.status === 'resolved'"
-              :class="
-                cn(dragClass, 'my-2 rounded-lg bg-primary-background/30 p-2')
-              "
-              :title="entry.widget.label ?? entry.displayName"
-              :sub-title="entry.node.title"
-              can-rename
-              :remove="() => appModeStore.removeSelectedInput(entry.widget)"
-              @rename="renameWidget(entry.widget, entry.node, $event)"
-            />
-            <IoItem
-              v-else
-              :class="
-                cn(dragClass, 'my-2 rounded-lg bg-primary-background/30 p-2')
-              "
-              :title="entry.displayName"
-              :sub-title="t('linearMode.builder.unknownWidget')"
-              :remove="() => removeSelectedEntityId(entry.entityId)"
-            />
-          </template>
+          <IoItem
+            v-for="{
+              nodeId,
+              widgetName,
+              label,
+              subLabel,
+              canRename
+            } in inputsWithState"
+            :key="`${nodeId}: ${widgetName}`"
+            :class="
+              cn(dragClass, 'my-2 rounded-lg bg-primary-background/30 p-2')
+            "
+            :title="label ?? widgetName"
+            :sub-title="subLabel"
+            :can-rename="canRename"
+            :remove="
+              () =>
+                remove(
+                  appModeStore.selectedInputs,
+                  ([id, name]) => nodeId == id && widgetName === name
+                )
+            "
+            @rename="inlineRenameInput(nodeId, widgetName, $event)"
+          />
         </DraggableList>
       </PropertiesAccordionItem>
       <div

src/components/builder/AppModeWidgetList.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import { computed, provide } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { computed, provide, shallowRef } from 'vue'
 
 import { useAppModeWidgetResizing } from '@/components/builder/useAppModeWidgetResizing'
-import { useResolvedSelectedInputs } from '@/components/builder/useResolvedSelectedInputs'
 import { useI18n } from 'vue-i18n'
 
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { extractVueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { OverlayAppendToKey } from '@/composables/useTransformCompatOverlayProps'
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
+import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
 import { LGraphEventMode } from '@/lib/litegraph/src/types/globalEnums'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useMaskEditor } from '@/composables/maskeditor/useMaskEditor'
@@ -22,12 +23,15 @@ import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { parseImageWidgetValue } from '@/utils/imageUtil'
+import { resolveNodeWidget } from '@/utils/litegraphUtil'
 import { cn } from '@comfyorg/tailwind-utils'
 import { HideLayoutFieldKey } from '@/types/widgetTypes'
 import { promptRenameWidget } from '@/utils/widgetUtil'
 
 interface WidgetEntry {
   key: string
+  nodeId: NodeId
+  widgetName: string
   persistedHeight: number | undefined
   nodeData: ReturnType<typeof nodeToNodeData> & {
     widgets: NonNullable<ReturnType<typeof nodeToNodeData>['widgets']>
@@ -45,25 +49,31 @@ const executionErrorStore = useExecutionErrorStore()
 const appModeStore = useAppModeStore()
 const maskEditor = useMaskEditor()
 
-const { onPointerDown } = useAppModeWidgetResizing((widget, config) =>
-  appModeStore.updateInputConfig(widget, config)
+const { onPointerDown } = useAppModeWidgetResizing(
+  (nodeId, widgetName, config) =>
+    appModeStore.updateInputConfig(nodeId, widgetName, config)
 )
 
 provide(HideLayoutFieldKey, true)
 provide(OverlayAppendToKey, 'body')
 
-const resolvedInputs = useResolvedSelectedInputs()
+const graphNodes = shallowRef<LGraphNode[]>(app.rootGraph.nodes)
+useEventListener(
+  app.rootGraph.events,
+  'configured',
+  () => (graphNodes.value = app.rootGraph.nodes)
+)
 
 const mappedSelections = computed((): WidgetEntry[] => {
+  void graphNodes.value
   const nodeDataByNode = new Map<
     LGraphNode,
     ReturnType<typeof nodeToNodeData>
   >()
 
-  return resolvedInputs.value.flatMap((entry) => {
-    if (entry.status !== 'resolved') return []
-    const { entityId, node, widget, config } = entry
-    if (node.mode !== LGraphEventMode.ALWAYS) return []
+  return appModeStore.selectedInputs.flatMap(([nodeId, widgetName, config]) => {
+    const [node, widget] = resolveNodeWidget(nodeId, widgetName)
+    if (!widget || !node || node.mode !== LGraphEventMode.ALWAYS) return []
 
     if (!nodeDataByNode.has(node)) {
       nodeDataByNode.set(node, nodeToNodeData(node))
@@ -72,7 +82,15 @@ const mappedSelections = computed((): WidgetEntry[] => {
 
     const matchingWidget = fullNodeData.widgets?.find((vueWidget) => {
       if (vueWidget.slotMetadata?.linked) return false
-      return vueWidget.entityId === entityId
+
+      if (!node.isSubgraphNode()) return vueWidget.name === widget.name
+
+      const storeNodeId = vueWidget.storeNodeId?.split(':')?.[1] ?? ''
+      return (
+        isPromotedWidgetView(widget) &&
+        widget.sourceNodeId == storeNodeId &&
+        widget.sourceWidgetName === vueWidget.storeName
+      )
     })
     if (!matchingWidget) return []
 
@@ -81,7 +99,9 @@ const mappedSelections = computed((): WidgetEntry[] => {
 
     return [
       {
-        key: entityId,
+        key: `${nodeId}:${widgetName}`,
+        nodeId,
+        widgetName,
         persistedHeight: config?.height,
         nodeData: {
           ...fullNodeData,
@@ -148,7 +168,14 @@ defineExpose({ handleDragDrop })
 </script>
 <template>
   <div
-    v-for="{ key, persistedHeight, nodeData, action } in mappedSelections"
+    v-for="{
+      key,
+      nodeId,
+      widgetName,
+      persistedHeight,
+      nodeData,
+      action
+    } in mappedSelections"
     :key
     :class="
       cn(
@@ -196,7 +223,8 @@ defineExpose({ handleDragDrop })
           {
             label: t('g.remove'),
             icon: 'icon-[lucide--x]',
-            command: () => appModeStore.removeSelectedInput(action.widget)
+            command: () =>
+              appModeStore.removeSelectedInput(action.widget, action.node)
           }
         ]"
       >
@@ -225,7 +253,7 @@ defineExpose({ handleDragDrop })
         )
       "
       :inert="builderMode || undefined"
-      @pointerdown.capture="(e) => onPointerDown(action.widget, e)"
+      @pointerdown.capture="(e) => onPointerDown(nodeId, widgetName, e)"
     >
       <DropZone
         :on-drag-over="nodeData.onDragOver"

src/components/builder/useAppModeWidgetResizing.test.ts

@@ -1,15 +1,11 @@
 import { describe, expect, it, vi } from 'vitest'
 import { effectScope } from 'vue'
 
-import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { InputWidgetConfig } from '@/platform/workflow/management/stores/comfyWorkflow'
 
 import { useAppModeWidgetResizing } from './useAppModeWidgetResizing'
 
-const WIDGET_PROMPT = { name: 'prompt' } as IBaseWidget
-const WIDGET_OTHER = { name: 'other' } as IBaseWidget
-const WIDGET_IMAGE = { name: 'image' } as IBaseWidget
-
 function setHeight(el: HTMLElement, height: number) {
   Object.defineProperty(el, 'offsetHeight', {
     value: height,
@@ -32,13 +28,15 @@ function wrapWithTextarea(initialHeight = 100): {
 describe('useAppModeWidgetResizing', () => {
   function setup() {
     const onResize =
-      vi.fn<(widget: IBaseWidget, config: InputWidgetConfig) => void>()
+      vi.fn<
+        (nodeId: NodeId, widgetName: string, config: InputWidgetConfig) => void
+      >()
     const { onPointerDown } = useAppModeWidgetResizing(onResize)
 
-    function bind(wrapper: HTMLElement, widget: IBaseWidget) {
+    function bind(wrapper: HTMLElement, nodeId: NodeId, widgetName: string) {
       wrapper.addEventListener(
         'pointerdown',
-        (e) => onPointerDown(widget, e as PointerEvent),
+        (e) => onPointerDown(nodeId, widgetName, e as PointerEvent),
         { capture: true }
       )
     }
@@ -49,19 +47,19 @@ describe('useAppModeWidgetResizing', () => {
   it('persists height when textarea is resized via drag', () => {
     const { bind, onResize } = setup()
     const { wrapper, textarea } = wrapWithTextarea()
-    bind(wrapper, WIDGET_PROMPT)
+    bind(wrapper, 1 as NodeId, 'prompt')
 
     textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
     setHeight(textarea, 250)
     window.dispatchEvent(new PointerEvent('pointerup'))
 
-    expect(onResize).toHaveBeenCalledWith(WIDGET_PROMPT, { height: 250 })
+    expect(onResize).toHaveBeenCalledWith(1, 'prompt', { height: 250 })
   })
 
   it('does not persist when no height change occurs (e.g. a click)', () => {
     const { bind, onResize } = setup()
     const { wrapper, textarea } = wrapWithTextarea()
-    bind(wrapper, WIDGET_PROMPT)
+    bind(wrapper, 1 as NodeId, 'prompt')
 
     textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
     window.dispatchEvent(new PointerEvent('pointerup'))
@@ -72,7 +70,7 @@ describe('useAppModeWidgetResizing', () => {
   it('persists once per drag gesture; stray pointerup is a no-op', () => {
     const { bind, onResize } = setup()
     const { wrapper, textarea } = wrapWithTextarea()
-    bind(wrapper, WIDGET_PROMPT)
+    bind(wrapper, 1 as NodeId, 'prompt')
 
     textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
     setHeight(textarea, 250)
@@ -88,7 +86,7 @@ describe('useAppModeWidgetResizing', () => {
     const button = document.createElement('button')
     wrapper.appendChild(button)
     document.body.appendChild(wrapper)
-    bind(wrapper, WIDGET_PROMPT)
+    bind(wrapper, 1 as NodeId, 'prompt')
 
     button.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
     window.dispatchEvent(new PointerEvent('pointerup'))
@@ -106,21 +104,21 @@ describe('useAppModeWidgetResizing', () => {
     wrapper.appendChild(indicator)
     document.body.appendChild(wrapper)
     setHeight(indicator, 100)
-    bind(wrapper, WIDGET_IMAGE)
+    bind(wrapper, 1 as NodeId, 'image')
 
     inner.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
     setHeight(indicator, 250)
     window.dispatchEvent(new PointerEvent('pointerup'))
 
-    expect(onResize).toHaveBeenCalledWith(WIDGET_IMAGE, { height: 250 })
+    expect(onResize).toHaveBeenCalledWith(1, 'image', { height: 250 })
   })
 
   it('drops a stale gesture when a new pointerdown starts before pointerup arrives', () => {
     const { bind, onResize } = setup()
     const first = wrapWithTextarea()
     const second = wrapWithTextarea()
-    bind(first.wrapper, WIDGET_PROMPT)
-    bind(second.wrapper, WIDGET_OTHER)
+    bind(first.wrapper, 1 as NodeId, 'prompt')
+    bind(second.wrapper, 2 as NodeId, 'other')
 
     first.textarea.dispatchEvent(
       new PointerEvent('pointerdown', { bubbles: true })
@@ -134,25 +132,25 @@ describe('useAppModeWidgetResizing', () => {
     window.dispatchEvent(new PointerEvent('pointerup'))
 
     expect(onResize).toHaveBeenCalledTimes(1)
-    expect(onResize).toHaveBeenCalledWith(WIDGET_OTHER, { height: 300 })
+    expect(onResize).toHaveBeenCalledWith(2, 'other', { height: 300 })
   })
 
   it('treats pointercancel as the end of a gesture and persists the new height', () => {
     const { bind, onResize } = setup()
     const { wrapper, textarea } = wrapWithTextarea()
-    bind(wrapper, WIDGET_PROMPT)
+    bind(wrapper, 1 as NodeId, 'prompt')
 
     textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
     setHeight(textarea, 250)
     window.dispatchEvent(new PointerEvent('pointercancel'))
 
-    expect(onResize).toHaveBeenCalledWith(WIDGET_PROMPT, { height: 250 })
+    expect(onResize).toHaveBeenCalledWith(1, 'prompt', { height: 250 })
   })
 
   it('after pointercancel, a subsequent stray pointerup is a no-op', () => {
     const { bind, onResize } = setup()
     const { wrapper, textarea } = wrapWithTextarea()
-    bind(wrapper, WIDGET_PROMPT)
+    bind(wrapper, 1 as NodeId, 'prompt')
 
     textarea.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
     setHeight(textarea, 250)
@@ -161,12 +159,14 @@ describe('useAppModeWidgetResizing', () => {
     window.dispatchEvent(new PointerEvent('pointerup'))
 
     expect(onResize).toHaveBeenCalledTimes(1)
-    expect(onResize).toHaveBeenCalledWith(WIDGET_PROMPT, { height: 250 })
+    expect(onResize).toHaveBeenCalledWith(1, 'prompt', { height: 250 })
   })
 
   it('removes global listeners when the owning scope is disposed mid-gesture', () => {
     const onResize =
-      vi.fn<(widget: IBaseWidget, config: InputWidgetConfig) => void>()
+      vi.fn<
+        (nodeId: NodeId, widgetName: string, config: InputWidgetConfig) => void
+      >()
     const scope = effectScope()
     const { onPointerDown } = scope.run(() =>
       useAppModeWidgetResizing(onResize)
@@ -174,7 +174,7 @@ describe('useAppModeWidgetResizing', () => {
     const { wrapper, textarea } = wrapWithTextarea()
     wrapper.addEventListener(
       'pointerdown',
-      (e) => onPointerDown(WIDGET_PROMPT, e as PointerEvent),
+      (e) => onPointerDown(1 as NodeId, 'prompt', e as PointerEvent),
       { capture: true }
     )
 
@@ -199,7 +199,7 @@ describe('useAppModeWidgetResizing', () => {
     outerIndicator.appendChild(wrapper)
     document.body.appendChild(outerIndicator)
     setHeight(outerIndicator, 100)
-    bind(wrapper, WIDGET_PROMPT)
+    bind(wrapper, 1 as NodeId, 'prompt')
 
     inner.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
     setHeight(outerIndicator, 250)

src/components/builder/useAppModeWidgetResizing.ts

@@ -1,12 +1,16 @@
 import { onScopeDispose } from 'vue'
 
-import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { InputWidgetConfig } from '@/platform/workflow/management/stores/comfyWorkflow'
 
 const RESIZABLE_SELECTOR = 'textarea, [data-slot="drop-zone-indicator"]'
 
 export function useAppModeWidgetResizing(
-  onResize: (widget: IBaseWidget, config: InputWidgetConfig) => void
+  onResize: (
+    nodeId: NodeId,
+    widgetName: string,
+    config: InputWidgetConfig
+  ) => void
 ) {
   let pendingHandler: (() => void) | null = null
 
@@ -19,7 +23,11 @@ export function useAppModeWidgetResizing(
 
   onScopeDispose(clearPendingHandler)
 
-  function onPointerDown(widget: IBaseWidget, event: PointerEvent) {
+  function onPointerDown(
+    nodeId: NodeId,
+    widgetName: string,
+    event: PointerEvent
+  ) {
     const wrapper = event.currentTarget
     const target = event.target
     if (!(wrapper instanceof HTMLElement) || !(target instanceof HTMLElement))
@@ -36,7 +44,7 @@ export function useAppModeWidgetResizing(
       pendingHandler = null
       const height = resizable.offsetHeight
       if (height === startHeight) return
-      onResize(widget, { height })
+      onResize(nodeId, widgetName, { height })
     }
     pendingHandler = handler
     window.addEventListener('pointerup', handler)

src/components/builder/useResolvedSelectedInputs.test.ts

@@ -1,91 +0,0 @@
-import { createTestingPinia } from '@pinia/testing'
-import { fromAny } from '@total-typescript/shoehorn'
-import { setActivePinia } from 'pinia'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import { app } from '@/scripts/app'
-import { useAppModeStore } from '@/stores/appModeStore'
-import type { WidgetEntityId } from '@/world/entityIds'
-
-import { useResolvedSelectedInputs } from './useResolvedSelectedInputs'
-
-vi.mock('@/scripts/app', () => ({
-  app: {
-    rootGraph: {
-      id: '11111111-1111-4111-8111-111111111111',
-      nodes: [] as LGraphNode[],
-      events: new EventTarget(),
-      getNodeById: vi.fn() as (id: number) => LGraphNode | null
-    }
-  }
-}))
-
-const rootGraphId = '11111111-1111-4111-8111-111111111111'
-const entitySeed = `${rootGraphId}:1:seed` as WidgetEntityId
-
-function makeNode(id: number, widgetNames: string[]): LGraphNode {
-  return fromAny<LGraphNode, unknown>({
-    id,
-    widgets: widgetNames.map((name) => ({
-      name,
-      entityId: `${rootGraphId}:${id}:${name}` as WidgetEntityId
-    }))
-  })
-}
-
-function setRootGraphNodes(nodes: LGraphNode[]) {
-  vi.mocked(app.rootGraph).nodes = nodes
-  vi.mocked(app.rootGraph).getNodeById = vi.fn(
-    (id) => nodes.find((n) => String(n.id) === String(id)) ?? null
-  )
-}
-
-function dispatchRootGraphEvent(type: string) {
-  ;(app.rootGraph!.events as unknown as EventTarget).dispatchEvent(
-    new Event(type)
-  )
-}
-
-describe('useResolvedSelectedInputs', () => {
-  beforeEach(() => {
-    setActivePinia(createTestingPinia({ stubActions: false }))
-    setRootGraphNodes([])
-  })
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-  })
-
-  it('re-resolves selections after a convert-to-subgraph event removes nodes from the root graph', () => {
-    const node = makeNode(1, ['seed'])
-    setRootGraphNodes([node])
-
-    const appModeStore = useAppModeStore()
-    appModeStore.selectedInputs = [[entitySeed, 'seed']]
-
-    const resolved = useResolvedSelectedInputs()
-    expect(resolved.value[0]?.status).toBe('resolved')
-
-    setRootGraphNodes([])
-    dispatchRootGraphEvent('convert-to-subgraph')
-
-    expect(resolved.value[0]?.status).toBe('unknown')
-  })
-
-  it('re-resolves selections after a subgraph-created event removes nodes from the root graph', () => {
-    const node = makeNode(1, ['seed'])
-    setRootGraphNodes([node])
-
-    const appModeStore = useAppModeStore()
-    appModeStore.selectedInputs = [[entitySeed, 'seed']]
-
-    const resolved = useResolvedSelectedInputs()
-    expect(resolved.value[0]?.status).toBe('resolved')
-
-    setRootGraphNodes([])
-    dispatchRootGraphEvent('subgraph-created')
-
-    expect(resolved.value[0]?.status).toBe('unknown')
-  })
-})

src/components/builder/useResolvedSelectedInputs.ts

@@ -1,71 +0,0 @@
-import { useEventListener } from '@vueuse/core'
-import { computed, shallowRef, triggerRef } from 'vue'
-
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
-import type { InputWidgetConfig } from '@/platform/workflow/management/stores/comfyWorkflow'
-import { app } from '@/scripts/app'
-import { useAppModeStore } from '@/stores/appModeStore'
-import type { WidgetEntityId } from '@/world/entityIds'
-import { isWidgetEntityId, parseWidgetEntityId } from '@/world/entityIds'
-
-export type ResolvedSelection =
-  | {
-      status: 'resolved'
-      entityId: WidgetEntityId
-      node: LGraphNode
-      widget: IBaseWidget
-      displayName: string
-      config?: InputWidgetConfig
-    }
-  | {
-      status: 'unknown'
-      entityId: WidgetEntityId
-      displayName: string
-      config?: InputWidgetConfig
-    }
-
-export function useResolvedSelectedInputs() {
-  const appModeStore = useAppModeStore()
-
-  const graphNodes = shallowRef<LGraphNode[]>([...(app.rootGraph?.nodes ?? [])])
-  const refreshGraphNodes = () =>
-    (graphNodes.value = [...(app.rootGraph?.nodes ?? [])])
-  useEventListener(() => app.rootGraph?.events, 'configured', refreshGraphNodes)
-  useEventListener(
-    () => app.rootGraph?.events,
-    'convert-to-subgraph',
-    refreshGraphNodes
-  )
-  useEventListener(
-    () => app.rootGraph?.events,
-    'subgraph-created',
-    refreshGraphNodes
-  )
-  useEventListener(
-    () => app.rootGraph?.events,
-    'node:slot-label:changed',
-    () => triggerRef(graphNodes)
-  )
-
-  return computed<ResolvedSelection[]>(() => {
-    void graphNodes.value
-    const rootGraph = app.rootGraph
-    if (!rootGraph) return []
-
-    return appModeStore.selectedInputs.flatMap(
-      ([entityId, displayName, config]): ResolvedSelection[] => {
-        if (!isWidgetEntityId(entityId)) return []
-        const { nodeId, name } = parseWidgetEntityId(entityId)
-        const node = rootGraph.getNodeById(nodeId)
-        const widget = node?.widgets?.find((w) => w.name === name)
-        if (!node || !widget) {
-          return [{ status: 'unknown', entityId, displayName, config }]
-        }
-        return [
-          { status: 'resolved', entityId, node, widget, displayName, config }
-        ]
-      }
-    )
-  })
-}

src/components/common/LazyImage.vue

@@ -42,8 +42,7 @@ import type { StyleValue } from 'vue'
 
 import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
 import { useMediaCache } from '@/services/mediaCacheService'
-
-type ClassValue = string | Record<string, boolean> | ClassValue[]
+import type { ClassValue } from '@comfyorg/tailwind-utils'
 
 const {
   src,

src/components/dialog/GlobalDialog.test.ts

@@ -8,10 +8,6 @@ import { defineComponent, h } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
-import {
-  onRekaFocusOutside,
-  onRekaPointerDownOutside
-} from '@/components/dialog/rekaPrimeVueBridge'
 import { useDialogStore } from '@/stores/dialogStore'
 
 const i18n = createI18n({
@@ -194,88 +190,3 @@ describe('GlobalDialog Reka parity with PrimeVue', () => {
     expect(store.isDialogOpen('reka-esc-blocked')).toBe(true)
   })
 })
-
-describe('shouldPreventRekaDismiss', () => {
-  function makeEvent(target: Element | null) {
-    let prevented = false
-    return {
-      detail: { originalEvent: { target } },
-      preventDefault: () => {
-        prevented = true
-      },
-      get defaultPrevented() {
-        return prevented
-      }
-    } as unknown as CustomEvent<{ originalEvent: PointerEvent }> & {
-      defaultPrevented: boolean
-    }
-  }
-
-  it.for([
-    'p-select-overlay',
-    'p-colorpicker-panel',
-    'p-popover',
-    'p-autocomplete-overlay',
-    'p-overlay-mask',
-    'p-dialog'
-  ])('prevents dismiss when target is inside %s', (className) => {
-    const overlay = document.createElement('div')
-    overlay.className = className
-    const inner = document.createElement('button')
-    overlay.appendChild(inner)
-    document.body.appendChild(overlay)
-
-    const event = makeEvent(inner)
-    onRekaPointerDownOutside({ dismissableMask: undefined }, event)
-
-    expect(event.defaultPrevented).toBe(true)
-    overlay.remove()
-  })
-
-  it('allows dismiss when target is outside any PrimeVue overlay', () => {
-    const event = makeEvent(document.body)
-    onRekaPointerDownOutside({ dismissableMask: undefined }, event)
-    expect(event.defaultPrevented).toBe(false)
-  })
-
-  it('prevents dismiss when dismissableMask is false even outside an overlay', () => {
-    const event = makeEvent(document.body)
-    onRekaPointerDownOutside({ dismissableMask: false }, event)
-    expect(event.defaultPrevented).toBe(true)
-  })
-
-  it.for(['p-dialog', 'p-select-overlay'])(
-    'focus-outside on a sibling %s portal does not dismiss the parent',
-    (className) => {
-      const overlay = document.createElement('div')
-      overlay.className = className
-      const inner = document.createElement('button')
-      overlay.appendChild(inner)
-      document.body.appendChild(overlay)
-
-      const event = makeEvent(inner)
-      onRekaFocusOutside(event)
-
-      expect(event.defaultPrevented).toBe(true)
-      overlay.remove()
-    }
-  )
-
-  it('focus-outside still dismisses when focus moves to a non-portal element', () => {
-    const event = makeEvent(document.body)
-    onRekaFocusOutside(event)
-    expect(event.defaultPrevented).toBe(false)
-  })
-
-  it('focus-outside on a sibling Reka portal does not dismiss the parent', () => {
-    const portal = document.createElement('div')
-    portal.setAttribute('role', 'dialog')
-    document.body.appendChild(portal)
-
-    const event = makeEvent(portal)
-    onRekaFocusOutside(event)
-
-    expect(event.defaultPrevented).toBe(true)
-    portal.remove()
-  })
-})

src/components/dialog/GlobalDialog.vue

@@ -8,14 +8,9 @@
       @update:open="(open) => onRekaOpenChange(item.key, open)"
     >
       <DialogPortal>
-        <DialogOverlay
-          v-reka-z-index
-          :class="item.dialogComponentProps.overlayClass"
-        />
+        <DialogOverlay />
         <DialogContent
-          v-reka-z-index
           :size="item.dialogComponentProps.size ?? 'md'"
-          :maximized="!!item.dialogComponentProps.maximized"
           :class="item.dialogComponentProps.contentClass"
           :aria-labelledby="item.key"
           @escape-key-down="
@@ -24,51 +19,34 @@
               e.preventDefault()
           "
           @pointer-down-outside="
-            (e) => onRekaPointerDownOutside(item.dialogComponentProps, e)
+            (e) =>
+              item.dialogComponentProps.dismissableMask === false &&
+              e.preventDefault()
           "
-          @focus-outside="onRekaFocusOutside"
           @mousedown="() => dialogStore.riseDialog({ key: item.key })"
         >
-          <template v-if="item.dialogComponentProps.headless">
+          <DialogHeader v-if="!item.dialogComponentProps.headless">
+            <component
+              :is="item.headerComponent"
+              v-if="item.headerComponent"
+              v-bind="item.headerProps"
+              :id="item.key"
+            />
+            <DialogTitle v-else :id="item.key">
+              {{ item.title || ' ' }}
+            </DialogTitle>
+            <DialogClose v-if="item.dialogComponentProps.closable !== false" />
+          </DialogHeader>
+          <div class="flex-1 overflow-auto px-4 py-2">
             <component
               :is="item.component"
               v-bind="item.contentProps"
               :maximized="item.dialogComponentProps.maximized"
             />
-          </template>
-          <template v-else>
-            <DialogHeader>
-              <component
-                :is="item.headerComponent"
-                v-if="item.headerComponent"
-                v-bind="item.headerProps"
-                :id="item.key"
-              />
-              <DialogTitle v-else :id="item.key">
-                {{ item.title || ' ' }}
-              </DialogTitle>
-              <div class="flex items-center gap-1">
-                <DialogMaximize
-                  v-if="item.dialogComponentProps.maximizable"
-                  :maximized="!!item.dialogComponentProps.maximized"
-                  @toggle="toggleMaximize(item)"
-                />
-                <DialogClose
-                  v-if="item.dialogComponentProps.closable !== false"
-                />
-              </div>
-            </DialogHeader>
-            <div class="flex-1 overflow-auto px-4 py-2">
-              <component
-                :is="item.component"
-                v-bind="item.contentProps"
-                :maximized="item.dialogComponentProps.maximized"
-              />
-            </div>
-            <DialogFooter v-if="item.footerComponent">
-              <component :is="item.footerComponent" v-bind="item.footerProps" />
-            </DialogFooter>
-          </template>
+          </div>
+          <DialogFooter v-if="item.footerComponent">
+            <component :is="item.footerComponent" v-bind="item.footerProps" />
+          </DialogFooter>
         </DialogContent>
       </DialogPortal>
     </Dialog>
@@ -77,6 +55,7 @@
       v-model:visible="item.visible"
       class="global-dialog"
       v-bind="item.dialogComponentProps"
+      :pt="getDialogPt(item)"
       :aria-labelledby="item.key"
     >
       <template #header>
@@ -107,25 +86,29 @@
 </template>
 
 <script setup lang="ts">
+import { merge } from 'es-toolkit/compat'
 import PrimeDialog from 'primevue/dialog'
+import type { DialogPassThroughOptions } from 'primevue/dialog'
+import { computed } from 'vue'
 
 import Dialog from '@/components/ui/dialog/Dialog.vue'
 import DialogClose from '@/components/ui/dialog/DialogClose.vue'
 import DialogContent from '@/components/ui/dialog/DialogContent.vue'
 import DialogFooter from '@/components/ui/dialog/DialogFooter.vue'
 import DialogHeader from '@/components/ui/dialog/DialogHeader.vue'
-import DialogMaximize from '@/components/ui/dialog/DialogMaximize.vue'
 import DialogOverlay from '@/components/ui/dialog/DialogOverlay.vue'
 import DialogPortal from '@/components/ui/dialog/DialogPortal.vue'
 import DialogTitle from '@/components/ui/dialog/DialogTitle.vue'
-import {
-  onRekaFocusOutside,
-  onRekaPointerDownOutside
-} from '@/components/dialog/rekaPrimeVueBridge'
-import { vRekaZIndex } from '@/components/dialog/vRekaZIndex'
-import type { DialogInstance } from '@/stores/dialogStore'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { isCloud } from '@/platform/distribution/types'
+import type { DialogComponentProps, DialogInstance } from '@/stores/dialogStore'
 import { useDialogStore } from '@/stores/dialogStore'
 
+const { flags } = useFeatureFlags()
+const teamWorkspacesEnabled = computed(
+  () => isCloud && flags.teamWorkspacesEnabled
+)
+
 const dialogStore = useDialogStore()
 
 function isRekaItem(item: DialogInstance) {
@@ -136,8 +119,20 @@ function onRekaOpenChange(key: string, open: boolean) {
   if (!open) dialogStore.closeDialog({ key })
 }
 
-function toggleMaximize(item: DialogInstance) {
-  item.dialogComponentProps.maximized = !item.dialogComponentProps.maximized
+function getDialogPt(item: {
+  key: string
+  dialogComponentProps: DialogComponentProps
+}): DialogPassThroughOptions {
+  const isWorkspaceSettingsDialog =
+    item.key === 'global-settings' && teamWorkspacesEnabled.value
+  const basePt = item.dialogComponentProps.pt || {}
+
+  if (isWorkspaceSettingsDialog) {
+    return merge(basePt, {
+      mask: { class: 'p-8' }
+    })
+  }
+  return basePt
 }
 </script>
 
@@ -168,6 +163,19 @@ function toggleMaximize(item: DialogInstance) {
   }
 }
 
+/* Workspace mode: wider settings dialog */
+.settings-dialog-workspace {
+  width: 100%;
+  max-width: 1440px;
+  height: 100%;
+}
+
+.settings-dialog-workspace .p-dialog-content {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
 .manager-dialog {
   height: 80vh;
   max-width: 1724px;

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -244,7 +244,7 @@
       <ContextMenuPortal>
         <ContextMenuContent
           :style="keybindingOverlayContentStyle"
-          class="z-1800 min-w-56 rounded-lg border border-border-subtle bg-base-background px-2 py-3 shadow-interface"
+          class="z-1200 min-w-56 rounded-lg border border-border-subtle bg-base-background px-2 py-3 shadow-interface"
         >
           <ContextMenuItem
             class="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 text-sm text-text-primary outline-none select-none hover:bg-node-component-surface-hovered focus:bg-node-component-surface-hovered data-disabled:cursor-default data-disabled:opacity-50"

src/components/dialog/rekaPrimeVueBridge.ts

@@ -1,49 +0,0 @@
-// PrimeVue overlays (Select, ColorPicker, Popover, Autocomplete, stacked
-// PrimeVue Dialogs) teleport to body. Reka treats clicks on body-portaled
-// elements as outside its dialog and would auto-dismiss on the first
-// interaction, tearing the overlay down mid-interaction. Treat any
-// PrimeVue overlay click as inside.
-const PRIMEVUE_OVERLAY_SELECTORS =
-  '.p-select-overlay, .p-colorpicker-panel, .p-popover, .p-autocomplete-overlay, .p-overlay, .p-overlay-mask, .p-dialog'
-
-// Reka portals its own dialogs / popovers / menus into the body too. When a
-// nested Reka layer opens on top of a non-modal parent, the parent's
-// DismissableLayer sees the focus shift / pointer-down as "outside" and would
-// dismiss itself. These selectors cover the portaled roots so we can treat
-// interactions on them as inside.
-const REKA_PORTAL_SELECTORS =
-  '[data-reka-popper-content-wrapper], [data-reka-dialog-content], [data-reka-menu-content], [data-reka-context-menu-content], [role="dialog"], [role="menu"], [role="listbox"], [role="tooltip"]'
-
-const OUTSIDE_LAYER_SELECTORS = `${PRIMEVUE_OVERLAY_SELECTORS}, ${REKA_PORTAL_SELECTORS}`
-
-type OutsideEvent = CustomEvent<{ originalEvent: Event }>
-
-function isInsideOverlay(target: EventTarget | null): boolean {
-  return (
-    target instanceof Element &&
-    target.closest(OUTSIDE_LAYER_SELECTORS) !== null
-  )
-}
-
-export function onRekaPointerDownOutside(
-  options: { dismissableMask?: boolean },
-  event: OutsideEvent
-) {
-  if (isInsideOverlay(event.detail.originalEvent.target)) {
-    event.preventDefault()
-    return
-  }
-  if (options.dismissableMask === false) {
-    event.preventDefault()
-  }
-}
-
-// Focus / interact-outside fires when focus moves to a sibling portal (a
-// nested Reka or PrimeVue dialog teleported to body). Without this guard a
-// non-modal Reka dialog would dismiss itself the moment a nested dialog
-// receives focus.
-export function onRekaFocusOutside(event: OutsideEvent) {
-  if (isInsideOverlay(event.detail.originalEvent.target)) {
-    event.preventDefault()
-  }
-}

src/components/dialog/vRekaZIndex.ts

@@ -1,17 +0,0 @@
-import { ZIndex } from '@primeuix/utils/zindex'
-import type { Directive } from 'vue'
-
-// Both Reka and PrimeVue dialogs can appear at any depth in dialogStack, in
-// any order. PrimeVue auto-increments a per-key z-index counter so later
-// dialogs always cover earlier ones; Reka uses a static z-1700 class which
-// can lose to an already-open PrimeVue dialog. Registering Reka's content
-// element with the same ZIndex counter (key 'modal', base 1700) makes both
-// renderers share one stacking sequence: whichever dialog opens last wins.
-export const vRekaZIndex: Directive<HTMLElement> = {
-  mounted(el) {
-    ZIndex.set('modal', el, 1700)
-  },
-  beforeUnmount(el) {
-    ZIndex.clear(el)
-  }
-}

src/components/graph/NodeTooltip.test.ts

@@ -1,222 +0,0 @@
-import { cleanup, render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { createTestingPinia } from '@pinia/testing'
-import { setActivePinia } from 'pinia'
-import { nextTick } from 'vue'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { i18n, te } from '@/i18n'
-import type * as LiteGraphModule from '@/lib/litegraph/src/litegraph'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import type { Settings } from '@/schemas/apiSchema'
-import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
-
-import NodeTooltip from './NodeTooltip.vue'
-
-type HitTest = (
-  node: MockNode,
-  x: number,
-  y: number,
-  offset: [number, number]
-) => number
-
-interface MockWidget {
-  name: string
-  tooltip?: string
-}
-
-interface MockNode {
-  type: string
-  flags: {
-    collapsed?: boolean
-    ghost?: boolean
-  }
-  pos: [number, number]
-  inputs: Array<{ name: string }>
-  constructor: {
-    title_mode?: 0 | 1 | 2 | 3
-  }
-}
-
-interface MockCanvas {
-  mouse: [number, number]
-  graph_mouse: [number, number]
-  node_over: MockNode | null
-  getWidgetAtCursor: () => MockWidget | null
-}
-
-const mockIsOverNodeInput = vi.hoisted(() => vi.fn<HitTest>())
-const mockIsOverNodeOutput = vi.hoisted(() => vi.fn<HitTest>())
-const mockIsDOMWidget = vi.hoisted(() =>
-  vi.fn<(widget: MockWidget) => boolean>()
-)
-const mockCanvas = vi.hoisted(
-  (): MockCanvas => ({
-    mouse: [100, 80],
-    graph_mouse: [10, 10],
-    node_over: null,
-    getWidgetAtCursor: vi.fn<() => MockWidget | null>()
-  })
-)
-
-vi.mock('@/lib/litegraph/src/litegraph', async (importOriginal) => {
-  const actual = await importOriginal<typeof LiteGraphModule>()
-  return {
-    ...actual,
-    isOverNodeInput: mockIsOverNodeInput,
-    isOverNodeOutput: mockIsOverNodeOutput
-  }
-})
-
-vi.mock('@/scripts/app', () => ({
-  app: {
-    canvas: mockCanvas
-  }
-}))
-
-vi.mock('@/scripts/domWidget', () => ({
-  isDOMWidget: mockIsDOMWidget
-}))
-
-const jsonTooltip =
-  'Positive point prompts as JSON [{"x": int, "y": int}, ...] (pixel coords)'
-
-const positiveCoordsTooltipKey =
-  'nodeDefs.SAM3_Detect.inputs.positive_coords.tooltip'
-
-const outputTooltipKey = 'nodeDefs.SAM3_Detect.outputs.0.tooltip'
-
-const sam3DetectNodeDef: ComfyNodeDef = {
-  name: 'SAM3_Detect',
-  display_name: 'SAM3 Detect',
-  category: 'detection/',
-  python_module: 'comfy_extras.nodes_sam3',
-  description: '',
-  input: {
-    required: {},
-    optional: {
-      positive_coords: [
-        'STRING',
-        {
-          tooltip: jsonTooltip,
-          forceInput: true
-        }
-      ]
-    }
-  },
-  output: ['MASK'],
-  output_name: ['masks'],
-  output_tooltips: [jsonTooltip],
-  output_node: false,
-  deprecated: false,
-  experimental: false
-}
-
-function createSam3Node(): MockNode {
-  return {
-    type: 'SAM3_Detect',
-    flags: {},
-    pos: [0, 0],
-    inputs: [{ name: 'positive_coords' }],
-    constructor: {}
-  }
-}
-
-function mergeOutputTooltipMessage(tooltip: string | null) {
-  i18n.global.mergeLocaleMessage('en', {
-    nodeDefs: {
-      SAM3_Detect: {
-        outputs: {
-          0: {
-            tooltip
-          }
-        }
-      }
-    }
-  })
-}
-
-async function renderAndHoverCanvas() {
-  const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
-
-  render(NodeTooltip)
-
-  const canvas = document.createElement('canvas')
-  document.body.appendChild(canvas)
-  await user.hover(canvas)
-  await vi.runOnlyPendingTimersAsync()
-  await nextTick()
-}
-
-describe('NodeTooltip', () => {
-  beforeEach(() => {
-    vi.useFakeTimers()
-    vi.resetAllMocks()
-    setActivePinia(createTestingPinia({ stubActions: false }))
-
-    vi.spyOn(useSettingStore(), 'get').mockImplementation(
-      <K extends keyof Settings>(key: K): Settings[K] => {
-        switch (key) {
-          case 'LiteGraph.Node.TooltipDelay':
-            return 0 as Settings[K]
-          default:
-            return undefined as Settings[K]
-        }
-      }
-    )
-
-    mockCanvas.mouse = [100, 80]
-    mockCanvas.graph_mouse = [10, 10]
-    mockCanvas.node_over = createSam3Node()
-    vi.mocked(mockCanvas.getWidgetAtCursor).mockReturnValue(null)
-    vi.mocked(mockIsOverNodeInput).mockReturnValue(-1)
-    vi.mocked(mockIsOverNodeOutput).mockReturnValue(-1)
-    vi.mocked(mockIsDOMWidget).mockReturnValue(false)
-
-    useNodeDefStore().addNodeDef(sam3DetectNodeDef)
-    mergeOutputTooltipMessage(jsonTooltip)
-  })
-
-  afterEach(() => {
-    mergeOutputTooltipMessage(null)
-    cleanup()
-    vi.useRealTimers()
-    vi.restoreAllMocks()
-  })
-
-  it('shows input slot JSON tooltips without i18n placeholder errors', async () => {
-    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
-    vi.mocked(mockIsOverNodeInput).mockReturnValue(0)
-
-    await renderAndHoverCanvas()
-
-    expect(te(positiveCoordsTooltipKey)).toBe(true)
-    expect(screen.getByText(jsonTooltip)).toBeInTheDocument()
-    expect(consoleError).not.toHaveBeenCalled()
-  })
-
-  it('shows output slot JSON tooltips without i18n placeholder errors', async () => {
-    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
-    vi.mocked(mockIsOverNodeOutput).mockReturnValue(0)
-
-    await renderAndHoverCanvas()
-
-    expect(te(outputTooltipKey)).toBe(true)
-    expect(screen.getByText(jsonTooltip)).toBeInTheDocument()
-    expect(consoleError).not.toHaveBeenCalled()
-  })
-
-  it('shows widget JSON tooltips without i18n placeholder errors', async () => {
-    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
-    vi.mocked(mockCanvas.getWidgetAtCursor).mockReturnValue({
-      name: 'positive_coords'
-    })
-
-    await renderAndHoverCanvas()
-
-    expect(te(positiveCoordsTooltipKey)).toBe(true)
-    expect(screen.getByText(jsonTooltip)).toBeInTheDocument()
-    expect(consoleError).not.toHaveBeenCalled()
-  })
-})

src/components/graph/NodeTooltip.vue

@@ -13,7 +13,7 @@
 import { useEventListener } from '@vueuse/core'
 import { nextTick, ref } from 'vue'
 
-import { stRaw } from '@/i18n'
+import { st } from '@/i18n'
 import {
   LiteGraph,
   isOverNodeInput,
@@ -84,7 +84,7 @@ function onIdle() {
   )
   if (inputSlot !== -1) {
     const inputName = node.inputs[inputSlot].name
-    const translatedTooltip = stRaw(
+    const translatedTooltip = st(
       `nodeDefs.${normalizeI18nKey(node.type ?? '')}.inputs.${normalizeI18nKey(inputName)}.tooltip`,
       nodeDef?.inputs[inputName]?.tooltip ?? ''
     )
@@ -98,7 +98,7 @@ function onIdle() {
     [0, 0]
   )
   if (outputSlot !== -1) {
-    const translatedTooltip = stRaw(
+    const translatedTooltip = st(
       `nodeDefs.${normalizeI18nKey(node.type ?? '')}.outputs.${outputSlot}.tooltip`,
       nodeDef?.outputs[outputSlot]?.tooltip ?? ''
     )
@@ -108,7 +108,7 @@ function onIdle() {
   const widget = comfyApp.canvas.getWidgetAtCursor()
   // Dont show for DOM widgets, these use native browser tooltips as we dont get proper mouse events on these
   if (widget && !isDOMWidget(widget)) {
-    const translatedTooltip = stRaw(
+    const translatedTooltip = st(
       `nodeDefs.${normalizeI18nKey(node.type ?? '')}.inputs.${normalizeI18nKey(widget.name)}.tooltip`,
       nodeDef?.inputs[widget.name]?.tooltip ?? ''
     )

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -1,24 +1,14 @@
 <script setup lang="ts">
-import { useMounted, watchDebounced } from '@vueuse/core'
-import {
-  computed,
-  inject,
-  onBeforeUnmount,
-  provide,
-  ref,
-  shallowRef,
-  watchEffect
-} from 'vue'
+import { computed, inject, provide, ref, shallowRef, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
-import { isWidgetPromotedOnSubgraphNode } from '@/core/graph/subgraph/promotionUtils'
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import type { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
+import { usePromotionStore } from '@/stores/promotionStore'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { DraggableList } from '@/scripts/ui/draggableList'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -64,74 +54,12 @@ const {
 
 const collapse = defineModel<boolean>('collapse', { default: false })
 
-const emit = defineEmits<{
-  reorder: [event: { fromIndex: number; toIndex: number }]
-}>()
-
 const widgetsContainer = ref<HTMLElement>()
 const rootElement = ref<HTMLElement>()
 
 const widgets = shallowRef(widgetsProp)
 watchEffect(() => (widgets.value = widgetsProp))
 
-const draggableList = ref<DraggableList | undefined>()
-const isMounted = useMounted()
-
-function setDraggableState() {
-  draggableList.value?.dispose()
-  draggableList.value = undefined
-
-  if (!isMounted.value || !isDraggable || collapse.value) return
-  const container = widgetsContainer.value
-  if (!container?.children?.length) return
-
-  const list = new DraggableList(container, '.draggable-item')
-
-  list.applyNewItemsOrder = function () {
-    const reorderedItems: HTMLElement[] = []
-
-    let oldPosition = -1
-    this.getAllItems().forEach((item, index) => {
-      if (item === this.draggableItem) {
-        oldPosition = index
-        return
-      }
-      if (!this.isItemToggled(item)) {
-        reorderedItems[index] = item
-        return
-      }
-      const newIndex = this.isItemAbove(item) ? index + 1 : index - 1
-      reorderedItems[newIndex] = item
-    })
-
-    if (oldPosition === -1) {
-      console.error('[SectionWidgets] draggableItem not found in items')
-      return
-    }
-
-    for (let index = 0; index < this.getAllItems().length; index++) {
-      if (typeof reorderedItems[index] === 'undefined') {
-        reorderedItems[index] = this.draggableItem as HTMLElement
-      }
-    }
-
-    const newPosition = reorderedItems.indexOf(
-      this.draggableItem as HTMLElement
-    )
-
-    emit('reorder', { fromIndex: oldPosition, toIndex: newPosition })
-  }
-
-  draggableList.value = list
-}
-
-watchDebounced(
-  [widgets, () => isDraggable, collapse],
-  () => setDraggableState(),
-  { debounce: 100, immediate: true }
-)
-onBeforeUnmount(() => draggableList.value?.dispose())
-
 provide(HideLayoutFieldKey, true)
 
 const canvasStore = useCanvasStore()
@@ -142,6 +70,8 @@ const { t } = useI18n()
 
 const getNodeParentGroup = inject(GetNodeParentGroupKey, null)
 
+const promotionStore = usePromotionStore()
+
 function isWidgetShownOnParents(
   widgetNode: LGraphNode,
   widget: IBaseWidget
@@ -153,12 +83,13 @@ function isWidgetShownOnParents(
           ? widget.sourceNodeId
           : String(widgetNode.id)
 
-      return isWidgetPromotedOnSubgraphNode(parent, {
+      return promotionStore.isPromoted(parent.rootGraph.id, parent.id, {
         sourceNodeId: interiorNodeId,
-        sourceWidgetName: widget.sourceWidgetName
+        sourceWidgetName: widget.sourceWidgetName,
+        disambiguatingSourceNodeId: widget.disambiguatingSourceNodeId
       })
     }
-    return isWidgetPromotedOnSubgraphNode(parent, {
+    return promotionStore.isPromoted(parent.rootGraph.id, parent.id, {
       sourceNodeId: String(widgetNode.id),
       sourceWidgetName: widget.name
     })

src/components/rightSidePanel/parameters/TabGlobalParameters.vue

@@ -1,9 +1,18 @@
 <script setup lang="ts">
+import { useMounted, watchDebounced } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { computed, ref, shallowRef } from 'vue'
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef
+} from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import AsyncSearchInput from '@/components/ui/search-input/AsyncSearchInput.vue'
+import { DraggableList } from '@/scripts/ui/draggableList'
 import { useFavoritedWidgetsStore } from '@/stores/workspace/favoritedWidgetsStore'
 import type { ValidFavoritedWidget } from '@/stores/workspace/favoritedWidgetsStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
@@ -16,6 +25,8 @@ const rightSidePanelStore = useRightSidePanelStore()
 const { searchQuery } = storeToRefs(rightSidePanelStore)
 const { t } = useI18n()
 
+const draggableList = ref<DraggableList | undefined>(undefined)
+const sectionWidgetsRef = ref<{ widgetsContainer: HTMLElement }>()
 const isSearching = ref(false)
 
 const favoritedWidgets = computed(
@@ -37,20 +48,70 @@ async function searcher(query: string) {
   searchedFavoritedWidgets.value = searchWidgets(favoritedWidgets.value, query)
 }
 
-function handleReorder({
-  fromIndex,
-  toIndex
-}: {
-  fromIndex: number
-  toIndex: number
-}) {
-  const widgets = [...searchedFavoritedWidgets.value]
-  const [moved] = widgets.splice(fromIndex, 1)
-  if (!moved) return
-  widgets.splice(toIndex, 0, moved)
+const isMounted = useMounted()
 
-  searchedFavoritedWidgets.value = widgets
-  favoritedWidgetsStore.reorderFavorites(widgets)
+function setDraggableState() {
+  if (!isMounted.value) return
+  draggableList.value?.dispose()
+  const container = sectionWidgetsRef.value?.widgetsContainer
+  if (isSearching.value || !container?.children?.length) return
+
+  draggableList.value = new DraggableList(container, '.draggable-item')
+
+  draggableList.value.applyNewItemsOrder = function () {
+    const reorderedItems: HTMLElement[] = []
+
+    let oldPosition = -1
+    this.getAllItems().forEach((item, index) => {
+      if (item === this.draggableItem) {
+        oldPosition = index
+        return
+      }
+      if (!this.isItemToggled(item)) {
+        reorderedItems[index] = item
+        return
+      }
+      const newIndex = this.isItemAbove(item) ? index + 1 : index - 1
+      reorderedItems[newIndex] = item
+    })
+
+    for (let index = 0; index < this.getAllItems().length; index++) {
+      const item = reorderedItems[index]
+      if (typeof item === 'undefined') {
+        reorderedItems[index] = this.draggableItem as HTMLElement
+      }
+    }
+
+    const newPosition = reorderedItems.indexOf(
+      this.draggableItem as HTMLElement
+    )
+    const widgets = [...searchedFavoritedWidgets.value]
+    const [widget] = widgets.splice(oldPosition, 1)
+    widgets.splice(newPosition, 0, widget)
+    searchedFavoritedWidgets.value = widgets
+    favoritedWidgetsStore.reorderFavorites(widgets)
+  }
+}
+
+watchDebounced(
+  searchedFavoritedWidgets,
+  () => {
+    setDraggableState()
+  },
+  { debounce: 100 }
+)
+
+onMounted(() => {
+  setDraggableState()
+})
+
+onBeforeUnmount(() => {
+  draggableList.value?.dispose()
+})
+
+function onCollapseUpdate() {
+  // Rebuild draggable list after the section header is toggled
+  nextTick(setDraggableState)
 }
 </script>
 
@@ -66,6 +127,7 @@ function handleReorder({
     />
   </div>
   <SectionWidgets
+    ref="sectionWidgetsRef"
     :label
     :widgets="searchedFavoritedWidgets"
     :is-draggable="!isSearching"
@@ -73,7 +135,7 @@ function handleReorder({
     show-node-name
     enable-empty-state
     class="border-b border-interface-stroke"
-    @reorder="handleReorder"
+    @update:collapse="onCollapseUpdate"
   >
     <template #empty>
       <div class="px-4 py-10 text-center text-sm text-muted-foreground">

src/components/rightSidePanel/parameters/TabSubgraphInputs.vue

@@ -1,19 +1,26 @@
 <script setup lang="ts">
+import { useMounted, watchDebounced } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { computed, nextTick, ref, shallowRef, useTemplateRef, watch } from 'vue'
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  useTemplateRef,
+  watch
+} from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
-import {
-  getWidgetName,
-  isWidgetPromotedOnSubgraphNode,
-  reorderSubgraphInputsByWidgetOrder
-} from '@/core/graph/subgraph/promotionUtils'
+import { getWidgetName } from '@/core/graph/subgraph/promotionUtils'
 import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
-import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import AsyncSearchInput from '@/components/ui/search-input/AsyncSearchInput.vue'
 import CollapseToggleButton from '@/components/rightSidePanel/layout/CollapseToggleButton.vue'
+import { DraggableList } from '@/scripts/ui/draggableList'
+import { usePromotionStore } from '@/stores/promotionStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 
 import { searchWidgets } from '../shared'
@@ -26,6 +33,7 @@ const { node } = defineProps<{
 
 const { t } = useI18n()
 const canvasStore = useCanvasStore()
+const promotionStore = usePromotionStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const { focusedSection, searchQuery } = storeToRefs(rightSidePanelStore)
 
@@ -43,33 +51,13 @@ const isAllCollapsed = computed({
     advancedInputsCollapsed.value = collapse
   }
 })
+const draggableList = ref<DraggableList | undefined>(undefined)
+const sectionWidgetsRef = useTemplateRef('sectionWidgetsRef')
 const advancedInputsSectionRef = useTemplateRef('advancedInputsSectionRef')
 
-function isSamePromotedWidget(a: IBaseWidget, b: IBaseWidget): boolean {
-  return (
-    isPromotedWidgetView(a) &&
-    isPromotedWidgetView(b) &&
-    a.sourceNodeId === b.sourceNodeId &&
-    a.sourceWidgetName === b.sourceWidgetName
-  )
-}
-
-function getPromotedWidgets(): IBaseWidget[] {
-  const inputWidgets = node.inputs
-    .map((input) => input._widget)
-    .filter((widget): widget is IBaseWidget =>
-      Boolean(widget && isPromotedWidgetView(widget))
-    )
-  const extraWidgets = (node.widgets ?? []).filter(
-    (widget) =>
-      isPromotedWidgetView(widget) &&
-      !inputWidgets.some((inputWidget) =>
-        isSamePromotedWidget(inputWidget, widget)
-      )
-  )
-
-  return [...inputWidgets, ...extraWidgets]
-}
+const promotionEntries = computed(() =>
+  promotionStore.getPromotions(node.rootGraph.id, node.id)
+)
 
 watch(
   focusedSection,
@@ -93,7 +81,37 @@ watch(
 )
 
 const widgetsList = computed((): NodeWidgetsList => {
-  return getPromotedWidgets().map((widget) => ({ node, widget }))
+  const entries = promotionEntries.value
+  const { widgets = [] } = node
+
+  const result: NodeWidgetsList = []
+  for (const {
+    sourceNodeId: entryNodeId,
+    sourceWidgetName,
+    disambiguatingSourceNodeId
+  } of entries) {
+    const widget = widgets.find((w) => {
+      if (isPromotedWidgetView(w)) {
+        if (
+          String(w.sourceNodeId) !== entryNodeId ||
+          w.sourceWidgetName !== sourceWidgetName
+        )
+          return false
+
+        if (!disambiguatingSourceNodeId) return true
+
+        return (
+          (w.disambiguatingSourceNodeId ?? w.sourceNodeId) ===
+          disambiguatingSourceNodeId
+        )
+      }
+      return w.name === sourceWidgetName
+    })
+    if (widget) {
+      result.push({ node, widget })
+    }
+  }
+  return result
 })
 
 const advancedInputsWidgets = computed((): NodeWidgetsList => {
@@ -108,9 +126,12 @@ const advancedInputsWidgets = computed((): NodeWidgetsList => {
 
   return allInteriorWidgets.filter(
     ({ node: interiorNode, widget }) =>
-      !isWidgetPromotedOnSubgraphNode(node, {
+      !promotionStore.isPromoted(node.rootGraph.id, node.id, {
         sourceNodeId: String(interiorNode.id),
-        sourceWidgetName: getWidgetName(widget)
+        sourceWidgetName: getWidgetName(widget),
+        disambiguatingSourceNodeId: isPromotedWidgetView(widget)
+          ? widget.disambiguatingSourceNodeId
+          : undefined
       })
   )
 })
@@ -125,22 +146,66 @@ async function searcher(query: string) {
   searchedWidgetsList.value = searchWidgets(widgetsList.value, query)
 }
 
-function handleReorder({
-  fromIndex,
-  toIndex
-}: {
-  fromIndex: number
-  toIndex: number
-}) {
-  const widgets = searchedWidgetsList.value.map((row) => row.widget)
-  const [moved] = widgets.splice(fromIndex, 1)
-  if (!moved) return
-  widgets.splice(toIndex, 0, moved)
+const isMounted = useMounted()
 
-  reorderSubgraphInputsByWidgetOrder(node, widgets)
-  canvasStore.canvas?.setDirty(true, true)
+function setDraggableState() {
+  if (!isMounted.value) return
+
+  draggableList.value?.dispose()
+  const container = sectionWidgetsRef.value?.widgetsContainer
+  if (isSearching.value || !container?.children?.length) return
+
+  draggableList.value = new DraggableList(container, '.draggable-item')
+
+  draggableList.value.applyNewItemsOrder = function () {
+    const reorderedItems: HTMLElement[] = []
+
+    let oldPosition = -1
+    this.getAllItems().forEach((item, index) => {
+      if (item === this.draggableItem) {
+        oldPosition = index
+        return
+      }
+      if (!this.isItemToggled(item)) {
+        reorderedItems[index] = item
+        return
+      }
+      const newIndex = this.isItemAbove(item) ? index + 1 : index - 1
+      reorderedItems[newIndex] = item
+    })
+
+    if (oldPosition === -1) {
+      console.error('[TabSubgraphInputs] draggableItem not found in items')
+      return
+    }
+
+    for (let index = 0; index < this.getAllItems().length; index++) {
+      const item = reorderedItems[index]
+      if (typeof item === 'undefined') {
+        reorderedItems[index] = this.draggableItem as HTMLElement
+      }
+    }
+
+    const newPosition = reorderedItems.indexOf(
+      this.draggableItem as HTMLElement
+    )
+
+    promotionStore.movePromotion(
+      node.rootGraph.id,
+      node.id,
+      oldPosition,
+      newPosition
+    )
+    canvasStore.canvas?.setDirty(true, true)
+  }
 }
 
+watchDebounced(searchedWidgetsList, () => setDraggableState(), {
+  debounce: 100
+})
+onMounted(() => setDraggableState())
+onBeforeUnmount(() => draggableList.value?.dispose())
+
 const label = computed(() => {
   return searchedWidgetsList.value.length !== 0
     ? t('rightSidePanel.inputs')
@@ -164,6 +229,7 @@ const label = computed(() => {
     />
   </div>
   <SectionWidgets
+    ref="sectionWidgetsRef"
     :collapse="firstSectionCollapsed && !isSearching"
     :node
     :label
@@ -177,8 +243,12 @@ const label = computed(() => {
         : t('rightSidePanel.inputsNoneTooltip')
     "
     class="border-b border-interface-stroke"
-    @update:collapse="(v) => (firstSectionCollapsed = v)"
-    @reorder="handleReorder"
+    @update:collapse="
+      (v) => {
+        firstSectionCollapsed = v
+        nextTick(setDraggableState)
+      }
+    "
   >
     <template #empty>
       <div class="px-4 pt-5 pb-15 text-center text-sm text-muted-foreground">

src/components/rightSidePanel/parameters/WidgetActions.test.ts

@@ -9,19 +9,15 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { usePromotionStore } from '@/stores/promotionStore'
 import WidgetActions from './WidgetActions.vue'
 
 const { mockGetInputSpecForWidget } = vi.hoisted(() => ({
   mockGetInputSpecForWidget: vi.fn()
 }))
 
-vi.mock('@/core/graph/subgraph/promotionUtils', () => ({
-  demoteWidget: vi.fn(),
-  promoteWidget: vi.fn(),
-  isLinkedPromotion: vi.fn(() => false)
-}))
-
 vi.mock('@/stores/nodeDefStore', () => ({
   useNodeDefStore: () => ({
     getInputSpecForWidget: mockGetInputSpecForWidget
@@ -205,4 +201,64 @@ describe('WidgetActions', () => {
 
     expect(onResetToDefault).toHaveBeenCalledWith('option1')
   })
+
+  it('demotes promoted widgets by immediate interior node identity when shown from parent context', async () => {
+    mockGetInputSpecForWidget.mockReturnValue({
+      type: 'CUSTOM'
+    })
+    const parentSubgraphNode = fromAny<SubgraphNode, unknown>({
+      id: 4,
+      rootGraph: { id: 'graph-test' },
+      computeSize: vi.fn(),
+      size: [300, 150]
+    })
+    const node = fromAny<LGraphNode, unknown>({
+      id: 4,
+      type: 'SubgraphNode',
+      rootGraph: { id: 'graph-test' },
+      isSubgraphNode: () => false
+    })
+    const widget = {
+      name: 'text',
+      type: 'text',
+      value: 'value',
+      label: 'Text',
+      options: {},
+      y: 0,
+      sourceNodeId: '3',
+      sourceWidgetName: 'text',
+      disambiguatingSourceNodeId: '1'
+    } as IBaseWidget
+
+    const promotionStore = usePromotionStore()
+    promotionStore.promote('graph-test', 4, {
+      sourceNodeId: '3',
+      sourceWidgetName: 'text',
+      disambiguatingSourceNodeId: '1'
+    })
+
+    const user = userEvent.setup()
+    render(WidgetActions, {
+      props: {
+        widget,
+        node,
+        label: 'Text',
+        parents: [parentSubgraphNode],
+        isShownOnParents: true
+      },
+      global: {
+        plugins: [i18n]
+      }
+    })
+
+    await user.click(screen.getByRole('button', { name: /Hide input/ }))
+
+    expect(
+      promotionStore.isPromoted('graph-test', 4, {
+        sourceNodeId: '3',
+        sourceWidgetName: 'text',
+        disambiguatingSourceNodeId: '1'
+      })
+    ).toBe(false)
+  })
 })

src/components/rightSidePanel/parameters/WidgetActions.vue

@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n'
 
 import MoreButton from '@/components/button/MoreButton.vue'
 import Button from '@/components/ui/button/Button.vue'
+import type { PromotedWidgetSource } from '@/core/graph/subgraph/promotedWidgetTypes'
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import {
   demoteWidget,
@@ -16,6 +17,7 @@ import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { usePromotionStore } from '@/stores/promotionStore'
 import { useFavoritedWidgetsStore } from '@/stores/workspace/favoritedWidgetsStore'
 import { getWidgetDefaultValue, promptWidgetLabel } from '@/utils/widgetUtil'
 import type { WidgetValue } from '@/utils/widgetUtil'
@@ -41,6 +43,7 @@ const label = defineModel<string>('label', { required: true })
 const canvasStore = useCanvasStore()
 const favoritedWidgetsStore = useFavoritedWidgetsStore()
 const nodeDefStore = useNodeDefStore()
+const promotionStore = usePromotionStore()
 const { t } = useI18n()
 
 const hasParents = computed(() => parents?.length > 0)
@@ -79,19 +82,16 @@ function handleHideInput() {
 
   if (isPromotedWidgetView(widget)) {
     for (const parent of parents) {
-      const sourceNodeId =
-        String(node.id) === String(parent.id)
-          ? widget.sourceNodeId
-          : String(node.id)
-      demoteWidget(
-        {
-          id: sourceNodeId,
-          title: node.title,
-          type: node.type
-        },
-        widget,
-        [parent]
-      )
+      const source: PromotedWidgetSource = {
+        sourceNodeId:
+          String(node.id) === String(parent.id)
+            ? widget.sourceNodeId
+            : String(node.id),
+        sourceWidgetName: widget.sourceWidgetName,
+        disambiguatingSourceNodeId: widget.disambiguatingSourceNodeId
+      }
+      promotionStore.demote(parent.rootGraph.id, parent.id, source)
+      parent.computeSize(parent.size)
     }
     canvasStore.canvas?.setDirty(true, true)
   } else {

src/components/rightSidePanel/parameters/WidgetItem.test.ts

@@ -42,7 +42,7 @@ vi.mock('@/composables/graph/useGraphNodeManager', () => ({
   getControlWidget: vi.fn(() => undefined)
 }))
 
-vi.mock('@/core/graph/subgraph/resolveConcretePromotedWidget', () => ({
+vi.mock('@/core/graph/subgraph/resolvePromotedWidgetSource', () => ({
   resolvePromotedWidgetSource: vi.fn(() => undefined)
 }))
 

src/components/rightSidePanel/parameters/WidgetItem.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n'
 
 import EditableText from '@/components/common/EditableText.vue'
 import { getControlWidget } from '@/composables/graph/useGraphNodeManager'
-import { resolvePromotedWidgetSource } from '@/core/graph/subgraph/resolveConcretePromotedWidget'
+import { resolvePromotedWidgetSource } from '@/core/graph/subgraph/resolvePromotedWidgetSource'
 import { st } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'

src/components/rightSidePanel/subgraph/SubgraphEditor.test.ts

@@ -1,265 +0,0 @@
-import { render, screen, within } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
-import { createTestingPinia } from '@pinia/testing'
-import { setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import {
-  createTestSubgraph,
-  createTestSubgraphNode
-} from '@/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers'
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { usePreviewExposureStore } from '@/stores/previewExposureStore'
-
-import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
-import { promoteValueWidgetViaSubgraphInput } from '@/core/graph/subgraph/promotionUtils'
-import SubgraphEditor from './SubgraphEditor.vue'
-import type { ComponentProps } from 'vue-component-type-helpers'
-import type DraggableList from '@/components/common/DraggableList.vue'
-
-type DraggableListProps = ComponentProps<typeof DraggableList>
-type PromotedRow =
-  DraggableListProps['modelValue'] extends Array<infer T> ? T : never
-
-vi.mock('@/services/litegraphService', () => ({
-  useLitegraphService: () => ({ updatePreviews: vi.fn() })
-}))
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  messages: {
-    en: {
-      subgraphStore: {
-        shown: 'Shown',
-        hidden: 'Hidden',
-        hideAll: 'Hide all',
-        showAll: 'Show all',
-        addRecommended: 'Add recommended'
-      },
-      rightSidePanel: {
-        noneSearchDesc: 'No results'
-      },
-      g: {
-        search: 'Search',
-        searchPlaceholder: 'Search'
-      }
-    }
-  }
-})
-
-describe('SubgraphEditor', () => {
-  beforeEach(() => {
-    setActivePinia(createTestingPinia({ stubActions: false }))
-    vi.clearAllMocks()
-  })
-
-  it('renders preview exposures after promoted inputs without drag handles', () => {
-    const subgraph = createTestSubgraph()
-    const host = createTestSubgraphNode(subgraph)
-    const firstNode = new LGraphNode('FirstNode')
-    const secondNode = new LGraphNode('SecondNode')
-    const previewNode = new LGraphNode('PreviewImage')
-    previewNode.type = 'PreviewImage'
-    subgraph.add(firstNode)
-    subgraph.add(secondNode)
-    subgraph.add(previewNode)
-
-    const firstInput = firstNode.addInput('first', 'STRING')
-    const firstWidget = firstNode.addWidget('text', 'first', '', () => {})
-    firstInput.widget = { name: firstWidget.name }
-    const secondInput = secondNode.addInput('second', 'STRING')
-    const secondWidget = secondNode.addWidget('text', 'second', '', () => {})
-    secondInput.widget = { name: secondWidget.name }
-    promoteValueWidgetViaSubgraphInput(host, firstNode, firstWidget)
-    promoteValueWidgetViaSubgraphInput(host, secondNode, secondWidget)
-    usePreviewExposureStore().addExposure(
-      subgraph.rootGraph.id,
-      String(host.id),
-      {
-        sourceNodeId: String(previewNode.id),
-        sourcePreviewName: '$$canvas-image-preview'
-      }
-    )
-    useCanvasStore().selectedItems = [host]
-
-    render(SubgraphEditor, {
-      container: document.body.appendChild(document.createElement('div')),
-      global: {
-        plugins: [i18n],
-        stubs: {
-          DraggableList: {
-            template:
-              '<div data-testid="draggable-list"><slot drag-class="draggable-item" /></div>'
-          }
-        }
-      }
-    })
-
-    const shown = screen.getByTestId('subgraph-editor-shown-section')
-    expect(
-      within(shown)
-        .getAllByTestId('subgraph-widget-label')
-        .map((el) => el.textContent?.trim())
-    ).toEqual(['first', 'second', '$$canvas-image-preview'])
-    expect(
-      within(screen.getByTestId('draggable-list'))
-        .getAllByTestId('subgraph-widget-label')
-        .map((el) => el.textContent?.trim())
-    ).toEqual(['first', 'second'])
-    expect(
-      within(shown).getAllByTestId('subgraph-widget-drag-handle')
-    ).toHaveLength(2)
-  })
-
-  it('updates rendered order when promoted widgets are reordered', async () => {
-    const subgraph = createTestSubgraph()
-    const host = createTestSubgraphNode(subgraph)
-    const firstNode = new LGraphNode('FirstNode')
-    const secondNode = new LGraphNode('SecondNode')
-    subgraph.add(firstNode)
-    subgraph.add(secondNode)
-
-    const firstInput = firstNode.addInput('first', 'STRING')
-    const firstWidget = firstNode.addWidget('text', 'first', '', () => {})
-    firstInput.widget = { name: firstWidget.name }
-    const secondInput = secondNode.addInput('second', 'STRING')
-    const secondWidget = secondNode.addWidget('text', 'second', '', () => {})
-    secondInput.widget = { name: secondWidget.name }
-    promoteValueWidgetViaSubgraphInput(host, firstNode, firstWidget)
-    promoteValueWidgetViaSubgraphInput(host, secondNode, secondWidget)
-    useCanvasStore().selectedItems = [host]
-
-    let listSetter: ((value: PromotedRow[]) => void) | undefined
-    const draggableListStub = {
-      props: ['modelValue'],
-      emits: ['update:modelValue'],
-      setup(
-        _: unknown,
-        {
-          emit,
-          slots
-        }: {
-          emit: (event: string, ...args: unknown[]) => void
-          slots: { default?: (props: { dragClass: string }) => unknown }
-        }
-      ) {
-        listSetter = (value) => emit('update:modelValue', value)
-        return () => slots.default?.({ dragClass: 'draggable-item' })
-      }
-    }
-    render(SubgraphEditor, {
-      container: document.body.appendChild(document.createElement('div')),
-      global: {
-        plugins: [i18n],
-        stubs: { DraggableList: draggableListStub }
-      }
-    })
-    await nextTick()
-
-    const shown = screen.getByTestId('subgraph-editor-shown-section')
-    expect(
-      within(shown)
-        .getAllByTestId('subgraph-widget-label')
-        .map((el) => el.textContent?.trim())
-    ).toEqual(['first', 'second'])
-
-    const promotedWidgets = host.widgets.filter(isPromotedWidgetView)
-    const reversed = [
-      { kind: 'promoted', node: secondNode, widget: promotedWidgets[1] },
-      { kind: 'promoted', node: firstNode, widget: promotedWidgets[0] }
-    ] as PromotedRow[]
-    listSetter?.(reversed)
-    await nextTick()
-
-    expect(
-      within(shown)
-        .getAllByTestId('subgraph-widget-label')
-        .map((el) => el.textContent?.trim())
-    ).toEqual(['second', 'first'])
-  })
-
-  it('demotes linked promoted widgets when "Hide all" is clicked', async () => {
-    const subgraph = createTestSubgraph()
-    const host = createTestSubgraphNode(subgraph)
-    const firstNode = new LGraphNode('FirstNode')
-    const secondNode = new LGraphNode('SecondNode')
-    subgraph.add(firstNode)
-    subgraph.add(secondNode)
-
-    const firstInput = firstNode.addInput('first', 'STRING')
-    const firstWidget = firstNode.addWidget('text', 'first', '', () => {})
-    firstInput.widget = { name: firstWidget.name }
-    const secondInput = secondNode.addInput('second', 'STRING')
-    const secondWidget = secondNode.addWidget('text', 'second', '', () => {})
-    secondInput.widget = { name: secondWidget.name }
-    promoteValueWidgetViaSubgraphInput(host, firstNode, firstWidget)
-    promoteValueWidgetViaSubgraphInput(host, secondNode, secondWidget)
-    useCanvasStore().selectedItems = [host]
-
-    render(SubgraphEditor, {
-      container: document.body.appendChild(document.createElement('div')),
-      global: {
-        plugins: [i18n],
-        stubs: {
-          DraggableList: {
-            template:
-              '<div data-testid="draggable-list"><slot drag-class="draggable-item" /></div>'
-          }
-        }
-      }
-    })
-
-    expect(host.widgets.filter(isPromotedWidgetView)).toHaveLength(2)
-
-    const shown = screen.getByTestId('subgraph-editor-shown-section')
-    const hideAllLink = within(shown).getByText('Hide all')
-    await userEvent.click(hideAllLink)
-
-    expect(host.widgets.filter(isPromotedWidgetView)).toHaveLength(0)
-  })
-
-  it('removes the exposure when a preview row without a real source widget is demoted', async () => {
-    const subgraph = createTestSubgraph()
-    const host = createTestSubgraphNode(subgraph)
-    const orphanedSourceNode = new LGraphNode('OrphanedNode')
-    orphanedSourceNode.type = 'OrphanedNode'
-    subgraph.add(orphanedSourceNode)
-
-    const previewStore = usePreviewExposureStore()
-    previewStore.addExposure(subgraph.rootGraph.id, String(host.id), {
-      sourceNodeId: String(orphanedSourceNode.id),
-      sourcePreviewName: '$$canvas-image-preview'
-    })
-
-    useCanvasStore().selectedItems = [host]
-
-    render(SubgraphEditor, {
-      container: document.body.appendChild(document.createElement('div')),
-      global: {
-        plugins: [i18n],
-        stubs: {
-          DraggableList: {
-            template:
-              '<div data-testid="draggable-list"><slot drag-class="draggable-item" /></div>'
-          }
-        }
-      }
-    })
-
-    expect(
-      previewStore.getExposures(subgraph.rootGraph.id, String(host.id))
-    ).toHaveLength(1)
-
-    const shown = screen.getByTestId('subgraph-editor-shown-section')
-    const toggleButton = within(shown).getByTestId('subgraph-widget-toggle')
-    await userEvent.click(toggleButton)
-
-    expect(
-      previewStore.getExposures(subgraph.rootGraph.id, String(host.id))
-    ).toHaveLength(0)
-  })
-})

src/components/rightSidePanel/subgraph/SubgraphEditor.vue

@@ -1,141 +1,106 @@
 <script setup lang="ts">
-import { useEventListener } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { computed, onMounted, shallowRef, watch } from 'vue'
+import { computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import DraggableList from '@/components/common/DraggableList.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
-import type { PromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import {
   demoteWidget,
   getPromotableWidgets,
+  getSourceNodeId,
+  getWidgetName,
   isLinkedPromotion,
   isRecommendedWidget,
   promoteWidget,
-  pruneDisconnected,
-  reorderSubgraphInputsByWidgetOrder
+  pruneDisconnected
 } from '@/core/graph/subgraph/promotionUtils'
 import type { WidgetItem } from '@/core/graph/subgraph/promotionUtils'
-import type { PreviewExposure } from '@/core/schemas/previewExposureSchema'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
-import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import AsyncSearchInput from '@/components/ui/search-input/AsyncSearchInput.vue'
 import { useLitegraphService } from '@/services/litegraphService'
-import { usePreviewExposureStore } from '@/stores/previewExposureStore'
+import { usePromotionStore } from '@/stores/promotionStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { cn } from '@comfyorg/tailwind-utils'
 
 import SubgraphNodeWidget from './SubgraphNodeWidget.vue'
 
-type PromotedRow = {
-  kind: 'promoted'
-  node: LGraphNode
-  widget: PromotedWidgetView
-}
-type PreviewRow = {
-  kind: 'preview'
-  node: LGraphNode
-  exposure: PreviewExposure
-  realWidget?: IBaseWidget
-}
-type ActiveRow = PromotedRow | PreviewRow
-
+const { t } = useI18n()
 const canvasStore = useCanvasStore()
-const previewExposureStore = usePreviewExposureStore()
+const promotionStore = usePromotionStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const { searchQuery } = storeToRefs(rightSidePanelStore)
 
+const promotionEntries = computed(() => {
+  const node = activeNode.value
+  if (!node) return []
+  return promotionStore.getPromotions(node.rootGraph.id, node.id)
+})
+
 const activeNode = computed(() => {
   const node = canvasStore.selectedItems[0]
   if (node instanceof SubgraphNode) return node
   return undefined
 })
 
-const promotedWidgets = shallowRef<readonly IBaseWidget[]>([])
-function refreshPromotedWidgets() {
-  promotedWidgets.value = activeNode.value?.widgets ?? []
-}
-watch(activeNode, refreshPromotedWidgets, { immediate: true })
-useEventListener(
-  () => activeNode.value?.subgraph.events,
-  [
-    'widget-promoted',
-    'widget-demoted',
-    'input-added',
-    'removing-input',
-    'inputs-reordered'
-  ],
-  refreshPromotedWidgets
-)
-
-const activeRows = computed<ActiveRow[]>(() => {
-  const node = activeNode.value
-  if (!node) return []
-  return [...getActivePromotedRows(node), ...getActivePreviewRows(node)]
-})
-
-const activePromotedRows = computed<PromotedRow[]>({
+const activeWidgets = computed<WidgetItem[]>({
   get() {
     const node = activeNode.value
-    return node ? getActivePromotedRows(node) : []
+    if (!node) return []
+
+    return promotionEntries.value.flatMap(
+      ({
+        sourceNodeId,
+        sourceWidgetName,
+        disambiguatingSourceNodeId
+      }): WidgetItem[] => {
+        if (sourceNodeId === '-1') {
+          const widget = node.widgets.find((w) => w.name === sourceWidgetName)
+          if (!widget) return []
+          return [
+            [{ id: -1, title: t('subgraphStore.linked'), type: '' }, widget]
+          ]
+        }
+        const wNode = node.subgraph._nodes_by_id[sourceNodeId]
+        if (!wNode) return []
+        const widget = getPromotableWidgets(wNode).find((w) => {
+          if (w.name !== sourceWidgetName) return false
+          if (disambiguatingSourceNodeId && isPromotedWidgetView(w))
+            return (
+              (w.disambiguatingSourceNodeId ?? w.sourceNodeId) ===
+              disambiguatingSourceNodeId
+            )
+          return true
+        })
+        if (!widget) return []
+        return [[wNode, widget]]
+      }
+    )
   },
-  set(value: PromotedRow[]) {
-    updateActivePromotedRows(value, activePromotedRows.value)
+  set(value: WidgetItem[]) {
+    const node = activeNode.value
+    if (!node) {
+      console.error('Attempted to toggle widgets with no node selected')
+      return
+    }
+    promotionStore.setPromotions(
+      node.rootGraph.id,
+      node.id,
+      value.map(([n, w]) => ({
+        sourceNodeId: String(n.id),
+        sourceWidgetName: getWidgetName(w),
+        disambiguatingSourceNodeId: isPromotedWidgetView(w)
+          ? w.disambiguatingSourceNodeId
+          : undefined
+      }))
+    )
+    refreshPromotedWidgetRendering()
   }
 })
 
-function getActivePromotedRows(node: SubgraphNode): PromotedRow[] {
-  return promotedWidgets.value.flatMap((widget): PromotedRow[] => {
-    if (!isPromotedWidgetView(widget)) return []
-    const sourceNode = node.subgraph._nodes_by_id[widget.sourceNodeId]
-    if (!sourceNode) return []
-    return [{ kind: 'promoted', node: sourceNode, widget }]
-  })
-}
-
-function getActivePreviewRows(node: SubgraphNode): PreviewRow[] {
-  const hostLocator = String(node.id)
-  const rootGraphId = node.rootGraph.id
-  const exposures = previewExposureStore.getExposures(rootGraphId, hostLocator)
-  return exposures.flatMap((exposure): PreviewRow[] => {
-    const sourceNode = node.subgraph._nodes_by_id[exposure.sourceNodeId]
-    if (!sourceNode) return []
-    const realWidget = getPromotableWidgets(sourceNode).find(
-      (candidate) => candidate.name === exposure.sourcePreviewName
-    )
-    return [{ kind: 'preview', node: sourceNode, exposure, realWidget }]
-  })
-}
-
-function updateActivePromotedRows(
-  value: PromotedRow[],
-  currentItems: PromotedRow[]
-) {
-  const node = activeNode.value
-  if (!node) {
-    console.error('Attempted to toggle widgets with no node selected')
-    return
-  }
-  const currentKeys = new Set(currentItems.map(promotedRowKey))
-  const nextKeys = new Set(value.map(promotedRowKey))
-  for (const item of value) {
-    if (!currentKeys.has(promotedRowKey(item))) promotePromotedRow(item)
-  }
-  for (const item of currentItems) {
-    if (!nextKeys.has(promotedRowKey(item))) demoteRow(item)
-  }
-  if (currentKeys.size === nextKeys.size) {
-    reorderSubgraphInputsByWidgetOrder(
-      node,
-      value.map((row) => row.widget)
-    )
-  }
-  refreshPromotedWidgetRendering()
-}
-
 const interiorWidgets = computed<WidgetItem[]>(() => {
   const node = activeNode.value
   if (!node) return []
@@ -150,18 +115,18 @@ const interiorWidgets = computed<WidgetItem[]>(() => {
     .filter(([_, w]: WidgetItem) => !w.computedDisabled)
 })
 
-function activeRowSourceKey(row: ActiveRow): string {
-  return row.kind === 'promoted'
-    ? `${row.widget.sourceNodeId}:${row.widget.sourceWidgetName}`
-    : `${row.exposure.sourceNodeId}:${row.exposure.sourcePreviewName}`
-}
-
 const candidateWidgets = computed<WidgetItem[]>(() => {
   const node = activeNode.value
   if (!node) return []
-  const promotedSourceKeys = new Set(activeRows.value.map(activeRowSourceKey))
   return interiorWidgets.value.filter(
-    ([n, w]) => !promotedSourceKeys.has(`${n.id}:${w.name}`)
+    ([n, w]: WidgetItem) =>
+      !promotionStore.isPromoted(node.rootGraph.id, node.id, {
+        sourceNodeId: String(n.id),
+        sourceWidgetName: getWidgetName(w),
+        disambiguatingSourceNodeId: isPromotedWidgetView(w)
+          ? w.disambiguatingSourceNodeId
+          : undefined
+      })
   )
 })
 const filteredCandidates = computed<WidgetItem[]>(() => {
@@ -180,31 +145,16 @@ const recommendedWidgets = computed(() => {
   return filteredCandidates.value.filter(isRecommendedWidget)
 })
 
-function rowMatchesQuery(row: ActiveRow, query: string): boolean {
-  return (
-    row.node.title.toLowerCase().includes(query) ||
-    rowDisplayName(row).toLowerCase().includes(query)
-  )
-}
-
-const filteredActive = computed<ActiveRow[]>(() => {
+const filteredActive = computed<WidgetItem[]>(() => {
   const query = searchQuery.value.toLowerCase()
-  if (!query) return activeRows.value
-  return activeRows.value.filter((row) => rowMatchesQuery(row, query))
+  if (!query) return activeWidgets.value
+  return activeWidgets.value.filter(
+    ([n, w]: WidgetItem) =>
+      n.title.toLowerCase().includes(query) ||
+      w.name.toLowerCase().includes(query)
+  )
 })
 
-const filteredActivePromoted = computed<PromotedRow[]>(() =>
-  filteredActive.value.filter(
-    (row): row is PromotedRow => row.kind === 'promoted'
-  )
-)
-
-const filteredActivePreviews = computed<PreviewRow[]>(() =>
-  filteredActive.value.filter(
-    (row): row is PreviewRow => row.kind === 'preview'
-  )
-)
-
 function refreshPromotedWidgetRendering() {
   const node = activeNode.value
   if (!node) return
@@ -214,89 +164,57 @@ function refreshPromotedWidgetRendering() {
   canvasStore.canvas?.setDirty(true, true)
 }
 
-function rowDisplayName(row: ActiveRow): string {
-  if (row.kind === 'promoted') {
-    return row.widget.label || row.widget.name
-  }
+function isItemLinked([node, widget]: WidgetItem): boolean {
   return (
-    row.realWidget?.label ||
-    row.realWidget?.name ||
-    row.exposure.sourcePreviewName
+    node.id === -1 ||
+    (!!activeNode.value &&
+      isLinkedPromotion(
+        activeNode.value,
+        String(node.id),
+        getWidgetName(widget)
+      ))
   )
 }
 
-function isRowLinked(row: ActiveRow): boolean {
-  if (row.kind !== 'promoted') return false
-  if (row.node.id === -1) return true
-  return (
-    !!activeNode.value &&
-    isLinkedPromotion(
-      activeNode.value,
-      String(row.node.id),
-      row.widget.sourceWidgetName
-    )
-  )
+function toKey(item: WidgetItem) {
+  const sid = getSourceNodeId(item[1])
+  return sid
+    ? `${item[0].id}: ${item[1].name}:${sid}`
+    : `${item[0].id}: ${item[1].name}`
 }
-
-function promotedRowKey(row: PromotedRow): string {
-  return `${row.node.id}: ${row.widget.name}:${row.widget.sourceNodeId}`
-}
-
-function rowKey(row: ActiveRow): string {
-  return row.kind === 'promoted'
-    ? promotedRowKey(row)
-    : `${row.node.id}: ${row.exposure.name}`
-}
-
 function nodeWidgets(n: LGraphNode): WidgetItem[] {
   return getPromotableWidgets(n).map((w) => [n, w])
 }
-
-function demoteRow(row: ActiveRow) {
+function demote([node, widget]: WidgetItem) {
   const subgraphNode = activeNode.value
   if (!subgraphNode) return
-  if (row.kind === 'promoted') {
-    demoteWidget(row.node, row.widget, [subgraphNode])
-    return
-  }
-  if (row.realWidget) {
-    demoteWidget(row.node, row.realWidget, [subgraphNode])
-    return
-  }
-  previewExposureStore.removeExposure(
-    subgraphNode.rootGraph.id,
-    String(subgraphNode.id),
-    row.exposure.name
-  )
-  refreshPromotedWidgetRendering()
+  demoteWidget(node, widget, [subgraphNode])
 }
-
-function promotePromotedRow(row: PromotedRow) {
-  const subgraphNode = activeNode.value
-  if (!subgraphNode) return
-  promoteWidget(row.node, row.widget, [subgraphNode])
-}
-
-function promoteCandidate([node, widget]: WidgetItem) {
+function promote([node, widget]: WidgetItem) {
   const subgraphNode = activeNode.value
   if (!subgraphNode) return
   promoteWidget(node, widget, [subgraphNode])
 }
-
 function showAll() {
   for (const item of filteredCandidates.value) {
-    promoteCandidate(item)
+    promote(item)
   }
 }
 function hideAll() {
-  for (const row of filteredActive.value) {
-    if (String(row.node.id) === '-1') continue
-    demoteRow(row)
+  const node = activeNode.value
+  for (const item of filteredActive.value) {
+    if (String(item[0].id) === '-1') continue
+    if (
+      node &&
+      isLinkedPromotion(node, String(item[0].id), getWidgetName(item[1]))
+    )
+      continue
+    demote(item)
   }
 }
 function showRecommended() {
   for (const item of recommendedWidgets.value) {
-    promoteCandidate(item)
+    promote(item)
   }
 }
 
@@ -341,34 +259,19 @@ onMounted(() => {
             {{ $t('subgraphStore.hideAll') }}</a
           >
         </div>
-        <DraggableList v-slot="{ dragClass }" v-model="activePromotedRows">
+        <DraggableList v-slot="{ dragClass }" v-model="activeWidgets">
           <SubgraphNodeWidget
-            v-for="row in filteredActivePromoted"
-            :key="rowKey(row)"
-            :data-nodeid="row.node.id"
+            v-for="[node, widget] in filteredActive"
+            :key="toKey([node, widget])"
+            :data-nodeid="node.id"
             :class="cn(!searchQuery && dragClass, 'bg-comfy-menu-bg')"
-            :node-title="row.node.title"
-            :widget-name="rowDisplayName(row)"
-            :is-physical="isRowLinked(row)"
+            :node-title="node.title"
+            :widget-name="widget.label || widget.name"
+            :is-physical="isItemLinked([node, widget])"
             :is-draggable="!searchQuery"
-            is-shown
-            @toggle-visibility="demoteRow(row)"
+            @toggle-visibility="demote([node, widget])"
           />
         </DraggableList>
-        <div class="mt-0.5 space-y-0.5 px-2 pb-2">
-          <SubgraphNodeWidget
-            v-for="row in filteredActivePreviews"
-            :key="rowKey(row)"
-            :data-nodeid="row.node.id"
-            class="bg-comfy-menu-bg"
-            :node-title="row.node.title"
-            :widget-name="rowDisplayName(row)"
-            :is-physical="isRowLinked(row)"
-            :is-draggable="false"
-            is-shown
-            @toggle-visibility="demoteRow(row)"
-          />
-        </div>
       </div>
 
       <div
@@ -392,12 +295,12 @@ onMounted(() => {
         <div class="mt-0.5 space-y-0.5 px-2 pb-2">
           <SubgraphNodeWidget
             v-for="[node, widget] in filteredCandidates"
-            :key="`${node.id}:${widget.name}`"
+            :key="toKey([node, widget])"
             :data-nodeid="node.id"
             class="bg-comfy-menu-bg"
             :node-title="node.title"
             :widget-name="widget.name"
-            @toggle-visibility="promoteCandidate([node, widget])"
+            @toggle-visibility="promote([node, widget])"
           />
         </div>
       </div>

src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue

@@ -10,22 +10,22 @@ const {
   widgetName,
   isDraggable = false,
   isPhysical = false,
-  isShown = false,
   class: className
 } = defineProps<{
   nodeTitle: string
   widgetName: string
   isDraggable?: boolean
   isPhysical?: boolean
-  isShown?: boolean
   class?: ClassValue
 }>()
-defineEmits<{ toggleVisibility: [] }>()
+defineEmits<{
+  (e: 'toggleVisibility'): void
+}>()
 
 const icon = computed(() =>
   isPhysical
     ? 'icon-[lucide--link]'
-    : isShown
+    : isDraggable
       ? 'icon-[lucide--eye]'
       : 'icon-[lucide--eye-off]'
 )
@@ -65,7 +65,6 @@ const icon = computed(() =>
     </Button>
     <div
       v-if="isDraggable"
-      data-testid="subgraph-widget-drag-handle"
       class="pointer-events-none icon-[lucide--grip-vertical] size-4"
     />
   </div>

src/components/ui/dialog/DialogContent.vue

@@ -10,13 +10,11 @@ import { dialogContentVariants } from './dialog.variants'
 
 const {
   size,
-  maximized = false,
   class: customClass = '',
   ...restProps
 } = defineProps<
   DialogContentProps & {
     size?: DialogContentSize
-    maximized?: boolean
     class?: HTMLAttributes['class']
   }
 >()
@@ -28,7 +26,7 @@ const forwarded = useForwardPropsEmits(restProps, emits)
 <template>
   <DialogContent
     v-bind="forwarded"
-    :class="cn(dialogContentVariants({ size, maximized }), customClass)"
+    :class="cn(dialogContentVariants({ size }), customClass)"
   >
     <slot />
   </DialogContent>

src/components/ui/dialog/DialogMaximize.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-
-const { maximized = false } = defineProps<{ maximized?: boolean }>()
-const emit = defineEmits<{ toggle: [] }>()
-
-const { t } = useI18n()
-</script>
-
-<template>
-  <Button
-    :aria-label="maximized ? t('g.restoreDialog') : t('g.maximizeDialog')"
-    size="icon"
-    variant="muted-textonly"
-    @click="emit('toggle')"
-  >
-    <i
-      :class="
-        maximized ? 'icon-[lucide--minimize-2]' : 'icon-[lucide--maximize-2]'
-      "
-    />
-  </Button>
-</template>

src/components/ui/dialog/dialog.variants.ts

@@ -2,7 +2,7 @@ import type { VariantProps } from 'cva'
 import { cva } from 'cva'
 
 export const dialogContentVariants = cva({
-  base: 'fixed z-1700 flex flex-col rounded-lg border border-border-subtle bg-base-background shadow-lg outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+  base: 'fixed top-1/2 left-1/2 z-1700 flex max-h-[85vh] w-[calc(100vw-1rem)] -translate-x-1/2 -translate-y-1/2 flex-col rounded-lg border border-border-subtle bg-base-background shadow-lg outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
   variants: {
     size: {
       sm: 'sm:max-w-sm',
@@ -10,19 +10,14 @@ export const dialogContentVariants = cva({
       lg: 'sm:max-w-3xl',
       xl: 'sm:max-w-5xl',
       full: 'sm:max-w-[calc(100vw-1rem)]'
-    },
-    maximized: {
-      true: 'inset-2 top-2 left-2 size-auto max-h-none max-w-none sm:max-w-none',
-      false: 'top-1/2 left-1/2 max-h-[85vh] w-[calc(100vw-1rem)] -translate-1/2'
     }
   },
   defaultVariants: {
-    size: 'md',
-    maximized: false
+    size: 'md'
   }
 })
 
-type DialogContentVariants = VariantProps<typeof dialogContentVariants>
+export type DialogContentVariants = VariantProps<typeof dialogContentVariants>
 
 export type DialogContentSize = NonNullable<DialogContentVariants['size']>
 

src/composables/graph/contextMenuConverter.ts

@@ -245,7 +245,9 @@ const MENU_ORDER: string[] = [
   'Paste Image',
   'Save Image',
   'Copy (Clipspace)',
-  'Paste (Clipspace)'
+  'Paste (Clipspace)',
+  // Fallback for other core items
+  'Convert to Group Node (Deprecated)'
 ]
 
 /**

src/composables/graph/useGraphNodeManager.test.ts

@@ -7,7 +7,6 @@ import { computed, nextTick, watch } from 'vue'
 import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import { createPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetView'
 import { BaseWidget, LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { widgetEntityId } from '@/world/entityIds'
 import {
   createTestSubgraph,
   createTestSubgraphNode
@@ -17,6 +16,7 @@ import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { usePromotionStore } from '@/stores/promotionStore'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
 
 describe('Node Reactivity', () => {
@@ -102,15 +102,12 @@ describe('Widget slotMetadata reactivity on link disconnect', () => {
     const input = node.addInput('prompt', 'STRING')
     // Associate the input slot with the widget (as widgetInputs extension does)
     input.widget = { name: 'prompt' }
+
+    // Start with a connected link
+    input.link = 42
+
     graph.add(node)
-
-    const upstream = new LGraphNode('upstream')
-    upstream.addOutput('out', 'STRING')
-    graph.add(upstream)
-    const link = upstream.connect(0, node, 0)
-    if (!link) throw new Error('Expected upstream.connect to produce a link')
-
-    return { graph, node, upstream, linkId: link.id }
+    return { graph, node }
   }
 
   it('sets slotMetadata.linked to true when input has a link', () => {
@@ -190,28 +187,7 @@ describe('Widget slotMetadata reactivity on link disconnect', () => {
     expect(onChange).toHaveBeenCalledTimes(1)
   })
 
-  it('marks a widget input slot as linked when connected to a SubgraphInput', () => {
-    const subgraph = createTestSubgraph({
-      inputs: [{ name: 'prompt', type: 'STRING' }]
-    })
-    const node = new LGraphNode('test')
-    node.addWidget('string', 'prompt', 'hello', () => undefined, {})
-    const input = node.addInput('prompt', 'STRING')
-    input.widget = { name: 'prompt' }
-    subgraph.add(node)
-
-    const link = subgraph.inputNode.slots[0].connect(input, node)
-    if (!link)
-      throw new Error('Expected SubgraphInput.connect to produce a link')
-
-    const { vueNodeData } = useGraphNodeManager(subgraph)
-    const nodeData = vueNodeData.get(String(node.id))
-    const widgetData = nodeData?.widgets?.find((w) => w.name === 'prompt')
-
-    expect(widgetData?.slotMetadata?.linked).toBe(true)
-  })
-
-  it('resolves slotMetadata for promoted widgets where SafeWidgetData.name differs from input.widget.name', () => {
+  it('updates slotMetadata for promoted widgets where SafeWidgetData.name differs from input.widget.name', async () => {
     // Set up a subgraph with an interior node that has a "prompt" widget.
     // createPromotedWidgetView resolves against this interior node.
     const subgraph = createTestSubgraph()
@@ -231,6 +207,7 @@ describe('Widget slotMetadata reactivity on link disconnect', () => {
       '10',
       'prompt',
       'value',
+      undefined,
       'value'
     )
 
@@ -241,6 +218,7 @@ describe('Widget slotMetadata reactivity on link disconnect', () => {
     hostNode.widgets = [promotedView]
     const input = hostNode.addInput('value', 'STRING')
     input.widget = { name: 'value' }
+    input.link = 42
     graph.add(hostNode)
 
     const { vueNodeData } = useGraphNodeManager(graph)
@@ -251,7 +229,21 @@ describe('Widget slotMetadata reactivity on link disconnect', () => {
     const widgetData = nodeData?.widgets?.find((w) => w.name === 'prompt')
     expect(widgetData).toBeDefined()
     expect(widgetData?.slotName).toBe('value')
-    expect(widgetData?.slotMetadata).toBeDefined()
+    expect(widgetData?.slotMetadata?.linked).toBe(true)
+
+    // Disconnect
+    hostNode.inputs[0].link = null
+    graph.trigger('node:slot-links:changed', {
+      nodeId: hostNode.id,
+      slotType: NodeSlotType.INPUT,
+      slotIndex: 0,
+      connected: false,
+      linkId: 42
+    })
+
+    await nextTick()
+
+    expect(widgetData?.slotMetadata?.linked).toBe(false)
   })
 
   it('prefers exact _widget input matches before same-name fallbacks for promoted widgets', () => {
@@ -411,6 +403,37 @@ describe('Subgraph output slot label reactivity', () => {
   })
 })
 
+describe('Subgraph Promoted Pseudo Widgets', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+  })
+
+  it('marks promoted $$ widgets as canvasOnly for Vue widget rendering', () => {
+    const subgraph = createTestSubgraph()
+    const interiorNode = new LGraphNode('interior')
+    interiorNode.id = 10
+    subgraph.add(interiorNode)
+
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 123 })
+    const graph = subgraphNode.graph as LGraph
+    graph.add(subgraphNode)
+
+    usePromotionStore().promote(subgraphNode.rootGraph.id, subgraphNode.id, {
+      sourceNodeId: '10',
+      sourceWidgetName: '$$canvas-image-preview'
+    })
+
+    const { vueNodeData } = useGraphNodeManager(graph)
+    const vueNode = vueNodeData.get(String(subgraphNode.id))
+    const promotedWidget = vueNode?.widgets?.find(
+      (widget) => widget.name === '$$canvas-image-preview'
+    )
+
+    expect(promotedWidget).toBeDefined()
+    expect(promotedWidget?.options?.canvasOnly).toBe(true)
+  })
+})
+
 describe('Nested promoted widget mapping', () => {
   beforeEach(() => {
     setActivePinia(createTestingPinia({ stubActions: false }))
@@ -448,49 +471,122 @@ describe('Nested promoted widget mapping', () => {
 
     expect(mappedWidget).toBeDefined()
     expect(mappedWidget?.type).toBe('combo')
-    expect(mappedWidget?.entityId).toBe(
-      widgetEntityId(graph.id, subgraphNodeB.id, 'b_input')
+    expect(mappedWidget?.storeName).toBe('picker')
+    expect(mappedWidget?.storeNodeId).toBe(
+      `${subgraphNodeB.subgraph.id}:${innerNode.id}`
     )
   })
 
-  it('preserves distinct store identity for duplicate-named promoted widgets', () => {
+  it('keeps linked and independent same-name promotions as distinct sources', () => {
     const subgraph = createTestSubgraph({
-      inputs: [
-        { name: 'first_seed', type: '*' },
-        { name: 'second_seed', type: '*' }
-      ]
+      inputs: [{ name: 'string_a', type: '*' }]
     })
 
-    const firstNode = new LGraphNode('FirstNode')
-    const firstInput = firstNode.addInput('seed', '*')
-    firstNode.addWidget('number', 'seed', 1, () => undefined)
-    firstInput.widget = { name: 'seed' }
-    subgraph.add(firstNode)
-    subgraph.inputNode.slots[0].connect(firstInput, firstNode)
+    const linkedNode = new LGraphNode('LinkedNode')
+    const linkedInput = linkedNode.addInput('string_a', '*')
+    linkedNode.addWidget('text', 'string_a', 'linked', () => undefined, {})
+    linkedInput.widget = { name: 'string_a' }
+    subgraph.add(linkedNode)
+    subgraph.inputNode.slots[0].connect(linkedInput, linkedNode)
 
-    const secondNode = new LGraphNode('SecondNode')
-    const secondInput = secondNode.addInput('seed', '*')
-    secondNode.addWidget('number', 'seed', 2, () => undefined)
-    secondInput.widget = { name: 'seed' }
-    subgraph.add(secondNode)
-    subgraph.inputNode.slots[1].connect(secondInput, secondNode)
+    const independentNode = new LGraphNode('IndependentNode')
+    independentNode.addWidget(
+      'text',
+      'string_a',
+      'independent',
+      () => undefined,
+      {}
+    )
+    subgraph.add(independentNode)
 
-    const subgraphNode = createTestSubgraphNode(subgraph, { id: 100 })
+    const subgraphNode = createTestSubgraphNode(subgraph, { id: 109 })
     const graph = subgraphNode.graph as LGraph
     graph.add(subgraphNode)
 
+    usePromotionStore().promote(subgraphNode.rootGraph.id, subgraphNode.id, {
+      sourceNodeId: String(independentNode.id),
+      sourceWidgetName: 'string_a'
+    })
+
     const { vueNodeData } = useGraphNodeManager(graph)
     const nodeData = vueNodeData.get(String(subgraphNode.id))
-    const widgets = nodeData?.widgets
+    const promotedWidgets = nodeData?.widgets?.filter(
+      (widget) => widget.name === 'string_a'
+    )
 
-    expect(widgets).toHaveLength(2)
-    expect(widgets?.[0]?.entityId).toBe(
-      widgetEntityId(graph.id, subgraphNode.id, 'first_seed')
+    expect(promotedWidgets).toHaveLength(2)
+    expect(
+      new Set(promotedWidgets?.map((widget) => widget.storeNodeId))
+    ).toEqual(
+      new Set([
+        `${subgraph.id}:${linkedNode.id}`,
+        `${subgraph.id}:${independentNode.id}`
+      ])
     )
-    expect(widgets?.[1]?.entityId).toBe(
-      widgetEntityId(graph.id, subgraphNode.id, 'second_seed')
+  })
+
+  it('maps duplicate-name promoted views from same intermediate node to distinct store identities', () => {
+    const innerSubgraph = createTestSubgraph()
+    const firstTextNode = new LGraphNode('FirstTextNode')
+    firstTextNode.addWidget('text', 'text', '11111111111', () => undefined)
+    innerSubgraph.add(firstTextNode)
+
+    const secondTextNode = new LGraphNode('SecondTextNode')
+    secondTextNode.addWidget('text', 'text', '22222222222', () => undefined)
+    innerSubgraph.add(secondTextNode)
+
+    const outerSubgraph = createTestSubgraph()
+    const innerSubgraphNode = createTestSubgraphNode(innerSubgraph, {
+      id: 3,
+      parentGraph: outerSubgraph
+    })
+    outerSubgraph.add(innerSubgraphNode)
+
+    const outerSubgraphNode = createTestSubgraphNode(outerSubgraph, { id: 4 })
+    const graph = outerSubgraphNode.graph as LGraph
+    graph.add(outerSubgraphNode)
+
+    usePromotionStore().setPromotions(
+      innerSubgraphNode.rootGraph.id,
+      innerSubgraphNode.id,
+      [
+        { sourceNodeId: String(firstTextNode.id), sourceWidgetName: 'text' },
+        { sourceNodeId: String(secondTextNode.id), sourceWidgetName: 'text' }
+      ]
+    )
+
+    usePromotionStore().setPromotions(
+      outerSubgraphNode.rootGraph.id,
+      outerSubgraphNode.id,
+      [
+        {
+          sourceNodeId: String(innerSubgraphNode.id),
+          sourceWidgetName: 'text',
+          disambiguatingSourceNodeId: String(firstTextNode.id)
+        },
+        {
+          sourceNodeId: String(innerSubgraphNode.id),
+          sourceWidgetName: 'text',
+          disambiguatingSourceNodeId: String(secondTextNode.id)
+        }
+      ]
+    )
+
+    const { vueNodeData } = useGraphNodeManager(graph)
+    const nodeData = vueNodeData.get(String(outerSubgraphNode.id))
+    const promotedWidgets = nodeData?.widgets?.filter(
+      (widget) => widget.name === 'text'
+    )
+
+    expect(promotedWidgets).toHaveLength(2)
+    expect(
+      new Set(promotedWidgets?.map((widget) => widget.storeNodeId))
+    ).toEqual(
+      new Set([
+        `${outerSubgraphNode.subgraph.id}:${firstTextNode.id}`,
+        `${outerSubgraphNode.subgraph.id}:${secondTextNode.id}`
+      ])
     )
-    expect(widgets?.[0]?.entityId).not.toBe(widgets?.[1]?.entityId)
   })
 })
 

src/composables/graph/useGraphNodeManager.ts

@@ -9,10 +9,8 @@ import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type { PromotedWidgetSource } from '@/core/graph/subgraph/promotedWidgetTypes'
 import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import { matchPromotedInput } from '@/core/graph/subgraph/matchPromotedInput'
-import {
-  resolveConcretePromotedWidget,
-  resolvePromotedWidgetSource
-} from '@/core/graph/subgraph/resolveConcretePromotedWidget'
+import { resolveConcretePromotedWidget } from '@/core/graph/subgraph/resolveConcretePromotedWidget'
+import { resolvePromotedWidgetSource } from '@/core/graph/subgraph/resolvePromotedWidgetSource'
 import { resolveSubgraphInputTarget } from '@/core/graph/subgraph/resolveSubgraphInputTarget'
 import type {
   INodeInputSlot,
@@ -25,12 +23,9 @@ import { LayoutSource } from '@/renderer/core/layout/types'
 import type { NodeId } from '@/renderer/core/layout/types'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { isDOMWidget } from '@/scripts/domWidget'
-import { IS_CONTROL_WIDGET } from '@/scripts/widgets'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import type { WidgetValue, SafeControlWidget } from '@/types/simplifiedWidget'
 import { normalizeControlOption } from '@/types/simplifiedWidget'
-import { getWidgetEntityIdForNode } from '@/utils/litegraphUtil'
-import type { WidgetEntityId } from '@/world/entityIds'
 
 import type {
   LGraph,
@@ -60,9 +55,10 @@ type Badges = (LGraphBadge | (() => LGraphBadge))[]
  * Value and metadata (label, hidden, disabled, etc.) are accessed via widgetValueStore.
  */
 export interface SafeWidgetData {
-  entityId?: WidgetEntityId
   nodeId?: NodeId
+  storeNodeId?: NodeId
   name: string
+  storeName?: string
   type: string
   /** Callback to invoke when widget value changes (wraps LiteGraph callback + triggerDraw) */
   callback?: ((value: unknown) => void) | undefined
@@ -158,7 +154,9 @@ function isPromotedDOMWidget(widget: IBaseWidget): boolean {
 export function getControlWidget(
   widget: IBaseWidget
 ): SafeControlWidget | undefined {
-  const cagWidget = widget.linkedWidgets?.find((w) => w[IS_CONTROL_WIDGET])
+  const cagWidget = widget.linkedWidgets?.find(
+    (w) => w.name == 'control_after_generate'
+  )
   if (!cagWidget) return
   return {
     value: normalizeControlOption(cagWidget.value),
@@ -231,15 +229,18 @@ function safeWidgetMapper(
     }
   }
 
-  function resolvePromotedSourceByInputName(
-    inputName: string
-  ): PromotedWidgetSource | null {
+  function resolvePromotedSourceByInputName(inputName: string): {
+    sourceNodeId: string
+    sourceWidgetName: string
+    disambiguatingSourceNodeId?: string
+  } | null {
     const resolvedTarget = resolveSubgraphInputTarget(node, inputName)
     if (!resolvedTarget) return null
 
     return {
       sourceNodeId: resolvedTarget.nodeId,
-      sourceWidgetName: resolvedTarget.widgetName
+      sourceWidgetName: resolvedTarget.widgetName,
+      disambiguatingSourceNodeId: resolvedTarget.sourceNodeId
     }
   }
 
@@ -257,9 +258,10 @@ function safeWidgetMapper(
     const matchedInput = matchPromotedInput(node.inputs, widget)
     const promotedInputName = matchedInput?.name
     const displayName = promotedInputName ?? widget.name
-    const directSource: PromotedWidgetSource = {
+    const directSource = {
       sourceNodeId: widget.sourceNodeId,
-      sourceWidgetName: widget.sourceWidgetName
+      sourceWidgetName: widget.sourceWidgetName,
+      disambiguatingSourceNodeId: widget.disambiguatingSourceNodeId
     }
     const promotedSource =
       matchedInput?._widget === widget
@@ -306,7 +308,8 @@ function safeWidgetMapper(
           ? resolveConcretePromotedWidget(
               node,
               promotedSource.sourceNodeId,
-              promotedSource.sourceWidgetName
+              promotedSource.sourceWidgetName,
+              promotedSource.disambiguatingSourceNodeId
             )
           : null
       const resolvedSource =
@@ -319,21 +322,24 @@ function safeWidgetMapper(
       const effectiveWidget = sourceWidget ?? widget
 
       const localId = isPromotedWidgetView(widget)
-        ? String(sourceNode?.id ?? promotedSource?.sourceNodeId)
+        ? String(
+            sourceNode?.id ??
+              promotedSource?.disambiguatingSourceNodeId ??
+              promotedSource?.sourceNodeId
+          )
         : undefined
       const nodeId =
         subgraphId && localId ? `${subgraphId}:${localId}` : undefined
-      const sourceWidgetName = isPromotedWidgetView(widget)
+      const storeName = isPromotedWidgetView(widget)
         ? (sourceWidget?.name ?? promotedSource?.sourceWidgetName)
         : undefined
-      const name = sourceWidgetName ?? displayName
-
-      if (isPromotedWidgetView(widget)) widget.ensureHostWidgetState()
+      const name = storeName ?? displayName
 
       return {
-        entityId: getWidgetEntityIdForNode(node, widget),
         nodeId,
+        storeNodeId: nodeId,
         name,
+        storeName,
         type: effectiveWidget.type,
         ...sharedEnhancements,
         callback,
@@ -381,10 +387,10 @@ function buildSlotMetadata(
 
     if (input.link != null && graphRef) {
       const link = graphRef.getLink(input.link)
-      const originNode = link ? graphRef.getNodeById(link.origin_id) : null
-      if (link && originNode) {
+      if (link) {
         originNodeId = String(link.origin_id)
-        originOutputName = originNode.outputs?.[link.origin_slot]?.name
+        const originNode = graphRef.getNodeById(link.origin_id)
+        originOutputName = originNode?.outputs?.[link.origin_slot]?.name
       }
     }
 

src/composables/graph/useMoreOptionsMenu.ts

@@ -45,7 +45,8 @@ export interface SubMenuOption {
 }
 
 export enum BadgeVariant {
-  NEW = 'new'
+  NEW = 'new',
+  DEPRECATED = 'deprecated'
 }
 
 // Global singleton for NodeOptions component reference

src/composables/graph/useSelectionMenuOptions.test.ts

@@ -72,14 +72,14 @@ describe('useSelectionMenuOptions - multiple nodes options', () => {
     expect(mocks.frameNodes).toHaveBeenCalledOnce()
   })
 
-  it('does not include a Convert to Group Node option', () => {
+  it('returns Convert to Group Node option from getMultipleNodesOptions', () => {
     const { getMultipleNodesOptions } = useSelectionMenuOptions()
     const options = getMultipleNodesOptions()
 
     const groupNodeOption = options.find(
       (opt) => opt.label === 'contextMenu.Convert to Group Node'
     )
-    expect(groupNodeOption).toBeUndefined()
+    expect(groupNodeOption).toBeDefined()
   })
 })
 

src/composables/graph/useSelectionMenuOptions.ts

@@ -1,6 +1,8 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useCommandStore } from '@/stores/commandStore'
+
 import { useFrameNodes } from './useFrameNodes'
 import { BadgeVariant } from './useMoreOptionsMenu'
 import type { MenuOption } from './useMoreOptionsMenu'
@@ -100,13 +102,28 @@ export function useSelectionMenuOptions() {
     return options
   }
 
-  const getMultipleNodesOptions = (): MenuOption[] => [
-    {
-      label: t('g.frameNodes'),
-      icon: 'icon-[lucide--frame]',
-      action: frameNodes
+  const getMultipleNodesOptions = (): MenuOption[] => {
+    const convertToGroupNodes = () => {
+      const commandStore = useCommandStore()
+      void commandStore.execute(
+        'Comfy.GroupNode.ConvertSelectedNodesToGroupNode'
+      )
     }
-  ]
+
+    return [
+      {
+        label: t('contextMenu.Convert to Group Node'),
+        icon: 'icon-[lucide--group]',
+        action: convertToGroupNodes,
+        badge: BadgeVariant.DEPRECATED
+      },
+      {
+        label: t('g.frameNodes'),
+        icon: 'icon-[lucide--frame]',
+        action: frameNodes
+      }
+    ]
+  }
 
   const getAlignmentOptions = (): MenuOption[] => [
     {

src/composables/node/canvasImagePreviewTypes.ts

@@ -1,10 +1,7 @@
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
 export const CANVAS_IMAGE_PREVIEW_WIDGET = '$$canvas-image-preview'
-
 const CANVAS_IMAGE_PREVIEW_NODE_TYPES = new Set([
-  'KSampler',
-  'KSamplerAdvanced',
   'PreviewImage',
   'SaveImage',
   'GLSLShader'

src/composables/node/useNodePricing.ts

@@ -237,15 +237,12 @@ const normalizeWidgetValue = (
 
 const buildJsonataContext = (
   node: LGraphNode,
-  rule: JsonataPricingRule,
-  widgetOverrides?: ReadonlyMap<string, unknown>
+  rule: JsonataPricingRule
 ): JsonataEvalContext => {
   const widgets: Record<string, NormalizedWidgetValue> = {}
   for (const dep of rule.depends_on.widgets) {
-    const raw = widgetOverrides?.has(dep.name)
-      ? widgetOverrides.get(dep.name)
-      : node.widgets?.find((x: IBaseWidget) => x.name === dep.name)?.value
-    widgets[dep.name] = normalizeWidgetValue(raw, dep.type)
+    const widget = node.widgets?.find((x: IBaseWidget) => x.name === dep.name)
+    widgets[dep.name] = normalizeWidgetValue(widget?.value, dep.type)
   }
 
   const inputs: Record<string, { connected: boolean }> = {}
@@ -555,10 +552,7 @@ export const useNodePricing = () => {
    * - schedules async evaluation when needed
    * - remains non-fatal on errors (returns safe fallback '')
    */
-  const getNodeDisplayPrice = (
-    node: LGraphNode,
-    widgetOverrides?: ReadonlyMap<string, unknown>
-  ): string => {
+  const getNodeDisplayPrice = (node: LGraphNode): string => {
     // Make this function reactive: when async evaluation completes, we bump pricingTick,
     // which causes this getter to recompute in Vue render/computed contexts.
     void pricingTick.value
@@ -571,7 +565,7 @@ export const useNodePricing = () => {
     if (rule.engine !== 'jsonata') return ''
     if (!rule._compiled) return ''
 
-    const ctx = buildJsonataContext(node, rule, widgetOverrides)
+    const ctx = buildJsonataContext(node, rule)
     const sig = buildSignature(ctx, rule)
 
     const cached = cache.get(node)

src/composables/node/usePriceBadge.ts

@@ -1,8 +1,6 @@
 import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { LGraphBadge } from '@/lib/litegraph/src/litegraph'
 
-import { useNodePricing } from '@/composables/node/useNodePricing'
-import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { adjustColor } from '@/utils/colorUtil'
 
@@ -11,25 +9,14 @@ componentIconSvg.src =
   "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='oklch(83.01%25 0.163 83.16)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15.536 11.293a1 1 0 0 0 0 1.414l2.376 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0zm-13.239 0a1 1 0 0 0 0 1.414l2.377 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414L6.088 8.916a1 1 0 0 0-1.414 0zm6.619 6.619a1 1 0 0 0 0 1.415l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.415l-2.377-2.376a1 1 0 0 0-1.414 0zm0-13.238a1 1 0 0 0 0 1.414l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z'/%3E%3C/svg%3E"
 
 export const usePriceBadge = () => {
-  const nodePricing = useNodePricing()
-
   function updateSubgraphCredits(node: LGraphNode) {
     if (!node.isSubgraphNode()) return
     node.badges = node.badges.filter((b) => !isCreditsBadge(b))
-    const innerCreditsBadges = collectCreditsBadges(node.subgraph)
-    if (innerCreditsBadges.length > 1) {
-      node.badges.push(
-        getCreditsBadge('Partner Nodes x ' + innerCreditsBadges.length)
-      )
-    } else if (innerCreditsBadges.length === 1) {
-      const innerApiNodes = collectInnerApiNodes(node.subgraph)
-      // When a single inner api node is the price source, swap its static
-      // getter for a wrapper-aware one that resolves promoted widget values.
-      if (innerApiNodes.length === 1) {
-        node.badges.push(buildWrapperAwarePriceBadge(node, innerApiNodes[0]))
-      } else {
-        node.badges.push(...innerCreditsBadges)
-      }
+    const newBadges = collectCreditsBadges(node.subgraph)
+    if (newBadges.length > 1) {
+      node.badges.push(getCreditsBadge('Partner Nodes x ' + newBadges.length))
+    } else {
+      node.badges.push(...newBadges)
     }
     const graph = node.graph
     if (!graph) return
@@ -41,14 +28,13 @@ export const usePriceBadge = () => {
       newValue: node.badges
     })
   }
-
   function collectCreditsBadges(
     graph: LGraph,
     visited: Set<string> = new Set()
   ): (LGraphBadge | (() => LGraphBadge))[] {
     if (visited.has(graph.id)) return []
     visited.add(graph.id)
-    const badges: (LGraphBadge | (() => LGraphBadge))[] = []
+    const badges = []
     for (const node of graph.nodes) {
       badges.push(
         ...(node.isSubgraphNode()
@@ -59,51 +45,6 @@ export const usePriceBadge = () => {
     return badges
   }
 
-  function collectInnerApiNodes(
-    graph: LGraph,
-    visited: Set<string> = new Set()
-  ): LGraphNode[] {
-    if (visited.has(graph.id)) return []
-    visited.add(graph.id)
-    const apiNodes: LGraphNode[] = []
-    for (const node of graph.nodes) {
-      if (node.isSubgraphNode()) {
-        apiNodes.push(...collectInnerApiNodes(node.subgraph, visited))
-      } else if (node.constructor?.nodeData?.api_node) {
-        apiNodes.push(node)
-      }
-    }
-    return apiNodes
-  }
-
-  function buildWrapperAwarePriceBadge(
-    wrapper: LGraphNode,
-    innerNode: LGraphNode
-  ): () => LGraphBadge {
-    return () =>
-      getCreditsBadge(
-        nodePricing.getNodeDisplayPrice(
-          innerNode,
-          collectPromotedOverrides(wrapper, innerNode)
-        )
-      )
-  }
-
-  function collectPromotedOverrides(
-    wrapper: LGraphNode,
-    innerNode: LGraphNode
-  ): ReadonlyMap<string, unknown> {
-    const overrides = new Map<string, unknown>()
-    if (!wrapper.isSubgraphNode()) return overrides
-    const innerId = String(innerNode.id)
-    for (const w of wrapper.widgets ?? []) {
-      if (!isPromotedWidgetView(w)) continue
-      if (w.sourceNodeId !== innerId) continue
-      overrides.set(w.sourceWidgetName, w.value)
-    }
-    return overrides
-  }
-
   function isCreditsBadge(
     badge: Partial<LGraphBadge> | (() => Partial<LGraphBadge>)
   ): boolean {