using james approach of setting it on the indentify call

Closes MAR-172.

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

.github/workflows/detect-unreviewed-merge.yml

@@ -1,24 +0,0 @@
-name: Detect Unreviewed Merge
-
-# SOC 2 compliance — reusable workflow lives in Comfy-Org/github-workflows,
-# tracking issues are filed in Comfy-Org/unreviewed-merges.
-
-on:
-  push:
-    branches: [main, master]
-
-concurrency:
-  group: detect-unreviewed-merge-${{ github.sha }}
-  cancel-in-progress: false
-
-permissions:
-  contents: read
-  pull-requests: read
-
-jobs:
-  detect:
-    uses: Comfy-Org/github-workflows/.github/workflows/detect-unreviewed-merge.yml@4d9cb6b87f953bb7cd69954280e1465fb9bd2040 # v1
-    with:
-      approval-mode: latest-per-reviewer
-    secrets:
-      UNREVIEWED_MERGES_TOKEN: ${{ secrets.UNREVIEWED_MERGES_TOKEN }}

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/careers/RolesSection.vue

@@ -87,8 +87,8 @@ function scrollToDepartment(deptKey: string) {
 <template>
   <section class="px-6 py-20 md:px-20 md:py-32" data-testid="careers-roles">
     <div class="mx-auto max-w-6xl">
-      <div class="flex flex-col gap-12 lg:flex-row lg:gap-20">
-        <div class="shrink-0 lg:min-w-48">
+      <div class="flex flex-col gap-12 md:flex-row md:gap-20">
+        <div class="shrink-0 md:w-48">
           <div
             class="bg-primary-comfy-ink sticky top-20 z-10 py-4 md:top-28 md:py-0"
           >
@@ -133,41 +133,30 @@ function scrollToDepartment(deptKey: string) {
               :href="role.jobUrl"
               target="_blank"
               rel="noopener noreferrer"
-              class="border-primary-warm-gray/20 hover:border-primary-comfy-canvas group flex items-center gap-4 border-b py-5 transition-colors duration-200"
+              class="border-primary-warm-gray/20 group flex items-center justify-between border-b py-5"
               data-testid="careers-role-link"
             >
-              <div
-                class="flex min-w-0 flex-1 flex-col md:flex-row md:items-baseline md:gap-x-4"
-              >
+              <div class="min-w-0">
                 <span
                   class="text-primary-comfy-canvas text-base font-medium md:text-lg"
                 >
                   {{ role.title }}
                 </span>
-                <div
-                  class="text-primary-warm-gray mt-1 flex flex-wrap gap-x-4 gap-y-1 text-sm md:mt-0 md:contents"
-                >
-                  <span>{{ role.department }}</span>
-                  <span class="md:hidden">{{ role.location }}</span>
-                </div>
+                <span class="text-primary-warm-gray ml-3 text-sm">
+                  {{ role.department }}
+                </span>
               </div>
-              <span
-                class="text-primary-warm-gray hidden shrink-0 text-sm md:inline"
-              >
-                {{ role.location }}
-              </span>
-              <span
-                class="bg-primary-comfy-yellow/0 group-hover:bg-primary-comfy-yellow relative grid size-7 shrink-0 place-items-center rounded-sm transition-colors duration-300 ease-out"
-              >
-                <span
-                  class="bg-primary-comfy-yellow group-hover:bg-primary-comfy-ink size-5 transition-colors duration-300 ease-out"
-                  style="
-                    mask: url('/icons/arrow-up-right.svg') center / contain
-                      no-repeat;
-                  "
+              <div class="ml-4 flex shrink-0 items-center gap-3">
+                <span class="text-primary-warm-gray text-sm">
+                  {{ role.location }}
+                </span>
+                <img
+                  src="/icons/arrow-up-right.svg"
+                  alt=""
+                  class="size-5"
                   aria-hidden="true"
                 />
-              </span>
+              </div>
             </a>
           </div>
         </div>

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

@@ -18,7 +18,7 @@ const emit = defineEmits<{
 
 <template>
   <nav
-    class="flex w-full scrollbar-none items-center gap-3 overflow-x-auto lg:flex-col lg:overflow-x-hidden"
+    class="scrollbar-none flex items-center gap-3 overflow-x-auto lg:flex-col lg:overflow-x-hidden"
     aria-label="Category filter"
   >
     <button

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
 }

apps/website/src/utils/github.test.ts

@@ -1,16 +1,11 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
 
-import {
-  fetchGitHubStars,
-  formatStarCount,
-  resetGitHubStarsFetcherForTests
-} from './github'
+import { fetchGitHubStars, formatStarCount } from './github'
 
 describe('fetchGitHubStars', () => {
   const savedOverride = process.env.WEBSITE_GITHUB_STARS_OVERRIDE
 
   afterEach(() => {
-    resetGitHubStarsFetcherForTests()
     vi.restoreAllMocks()
     if (savedOverride === undefined)
       delete process.env.WEBSITE_GITHUB_STARS_OVERRIDE
@@ -32,67 +27,6 @@ describe('fetchGitHubStars', () => {
       'WEBSITE_GITHUB_STARS_OVERRIDE must be a non-negative integer'
     )
   })
-
-  it('memoizes concurrent fetches for the same repo to one network call', async () => {
-    const fetchImpl = vi.fn(
-      async () =>
-        new Response(JSON.stringify({ stargazers_count: 110000 }), {
-          status: 200,
-          headers: { 'content-type': 'application/json' }
-        })
-    )
-
-    const [a, b, c] = await Promise.all([
-      fetchGitHubStars('Comfy-Org', 'ComfyUI', fetchImpl as typeof fetch),
-      fetchGitHubStars('Comfy-Org', 'ComfyUI', fetchImpl as typeof fetch),
-      fetchGitHubStars('Comfy-Org', 'ComfyUI', fetchImpl as typeof fetch)
-    ])
-
-    expect(a).toBe(110000)
-    expect(b).toBe(110000)
-    expect(c).toBe(110000)
-    expect(fetchImpl).toHaveBeenCalledTimes(1)
-  })
-
-  it('keys the in-flight cache by owner/repo', async () => {
-    const fetchImpl = vi.fn(async (url: string | URL | Request) => {
-      const href = typeof url === 'string' ? url : url.toString()
-      const count = href.includes('other-repo') ? 42 : 110000
-      return new Response(JSON.stringify({ stargazers_count: count }), {
-        status: 200,
-        headers: { 'content-type': 'application/json' }
-      })
-    })
-
-    const [comfy, other] = await Promise.all([
-      fetchGitHubStars('Comfy-Org', 'ComfyUI', fetchImpl as typeof fetch),
-      fetchGitHubStars('Comfy-Org', 'other-repo', fetchImpl as typeof fetch)
-    ])
-
-    expect(comfy).toBe(110000)
-    expect(other).toBe(42)
-    expect(fetchImpl).toHaveBeenCalledTimes(2)
-  })
-
-  it('returns null when GitHub responds non-2xx', async () => {
-    const fetchImpl = vi.fn(
-      async () => new Response('rate limited', { status: 403 })
-    )
-
-    await expect(
-      fetchGitHubStars('Comfy-Org', 'ComfyUI', fetchImpl as typeof fetch)
-    ).resolves.toBeNull()
-  })
-
-  it('returns null when fetch throws', async () => {
-    const fetchImpl = vi.fn(async () => {
-      throw new Error('network down')
-    })
-
-    await expect(
-      fetchGitHubStars('Comfy-Org', 'ComfyUI', fetchImpl as typeof fetch)
-    ).resolves.toBeNull()
-  })
 })
 
 describe('formatStarCount', () => {

apps/website/src/utils/github.ts

@@ -1,51 +1,22 @@
-const inflight = new Map<string, Promise<number | null>>()
-
-export function resetGitHubStarsFetcherForTests(): void {
-  inflight.clear()
-}
-
 export async function fetchGitHubStars(
   owner: string,
-  repo: string,
-  fetchImpl: typeof fetch = fetch
+  repo: string
 ): Promise<number | null> {
   const override = readGitHubStarsOverride()
   if (override !== undefined) return override
 
-  const key = `${owner}/${repo}`
-  const cached = inflight.get(key)
-  if (cached) return cached
-
-  const request = doFetch(owner, repo, fetchImpl)
-  inflight.set(key, request)
-  return request
-}
-
-async function doFetch(
-  owner: string,
-  repo: string,
-  fetchImpl: typeof fetch
-): Promise<number | null> {
   try {
-    const res = await fetchImpl(
-      `https://api.github.com/repos/${owner}/${repo}`,
-      { headers: { Accept: 'application/vnd.github.v3+json' } }
-    )
+    const res = await fetch(`https://api.github.com/repos/${owner}/${repo}`, {
+      headers: { Accept: 'application/vnd.github.v3+json' }
+    })
     if (!res.ok) return null
-    const data: unknown = await res.json()
-    return readStargazerCount(data)
+    const data = await res.json()
+    return data.stargazers_count ?? null
   } catch {
     return null
   }
 }
 
-function readStargazerCount(data: unknown): number | null {
-  if (data === null || typeof data !== 'object') return null
-  if (!('stargazers_count' in data)) return null
-  const count = data.stargazers_count
-  return typeof count === 'number' ? count : null
-}
-
 export function formatStarCount(count: number): string {
   if (count >= 1_000_000) {
     const m = count / 1_000_000

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/ComfyMouse.ts

@@ -66,34 +66,6 @@ export class ComfyMouse implements Omit<Mouse, 'move'> {
     await this.drop(options)
   }
 
-  async middleDrag(
-    from: Position,
-    to: Position,
-    options: Omit<DragOptions, 'button'> = {}
-  ) {
-    await this.dragAndDrop(from, to, { ...options, button: 'middle' })
-  }
-
-  async middleDragFromCenter(
-    locator: Locator,
-    delta: { x: number; y: number },
-    options: Omit<DragOptions, 'button'> = {}
-  ) {
-    await locator.waitFor({ state: 'visible' })
-    const box = await locator.boundingBox()
-    if (!box) throw new Error('middleDragFromCenter: bounding box not found')
-
-    const start = {
-      x: box.x + box.width / 2,
-      y: box.y + box.height / 2
-    }
-    await this.middleDrag(
-      start,
-      { x: start.x + delta.x, y: start.y + delta.y },
-      options
-    )
-  }
-
   /** @see {@link Mouse.move} */
   async move(to: Position, options = ComfyMouse.defaultOptions) {
     await this.mouse.move(to.x, to.y, options)

browser_tests/fixtures/components/SidebarTab.ts

@@ -139,7 +139,6 @@ export class WorkflowsSidebarTab extends SidebarTab {
   public readonly root: Locator
   public readonly activeWorkflowLabel: Locator
   public readonly searchInput: Locator
-  public readonly refreshButton: Locator
 
   constructor(public override readonly page: Page) {
     super(page, 'workflows')
@@ -148,9 +147,6 @@ export class WorkflowsSidebarTab extends SidebarTab {
       '.comfyui-workflows-open .p-tree-node-selected .node-label'
     )
     this.searchInput = this.root.getByRole('combobox').first()
-    this.refreshButton = this.root.getByTestId(
-      TestIds.sidebar.workflowsRefreshButton
-    )
   }
 
   async getOpenedWorkflowNames() {

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/ExecutionHelper.ts

@@ -11,11 +11,6 @@ import { createMockJob } from '@e2e/fixtures/helpers/AssetsHelper'
 
 const PROMPT_ROUTE_PATTERN = /\/api\/prompt$/
 
-type RunOptions = {
-  nodeErrors?: Record<string, NodeError>
-  onPromptRequest?: (requestBody: unknown) => void | Promise<void>
-}
-
 /**
  * Build a `NodeError` describing a single failed input on a KSampler node.
  * Shared between specs that surface validation rings via 400 responses.
@@ -75,9 +70,8 @@ export class ExecutionHelper {
    * The app receives a valid PromptResponse so storeJob() fires
    * and registers the job against the active workflow path.
    */
-  async run(options: RunOptions = {}): Promise<string> {
+  async run(): Promise<string> {
     const jobId = `test-job-${++this.jobCounter}`
-    const { nodeErrors = {}, onPromptRequest } = options
 
     let fulfilled!: () => void
     const prompted = new Promise<void>((r) => {
@@ -87,13 +81,12 @@ export class ExecutionHelper {
     await this.page.route(
       PROMPT_ROUTE_PATTERN,
       async (route) => {
-        await onPromptRequest?.(route.request().postDataJSON())
         await route.fulfill({
           status: 200,
           contentType: 'application/json',
           body: JSON.stringify({
             prompt_id: jobId,
-            node_errors: nodeErrors
+            node_errors: {}
           })
         })
         fulfilled()

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

@@ -10,7 +10,6 @@ export const TestIds = {
     nodeLibrarySearch: 'node-library-search',
     nodePreviewCard: 'node-preview-card',
     workflows: 'workflows-sidebar',
-    workflowsRefreshButton: 'workflows-refresh-button',
     modeToggle: 'mode-toggle'
   },
   tree: {
@@ -129,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',

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -511,7 +511,8 @@ 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 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/execution.spec.ts

@@ -1,60 +1,7 @@
-import { mergeTests } from '@playwright/test'
+import { expect } from '@playwright/test'
 
-import type { NodeError } from '@/schemas/apiSchema'
-import {
-  comfyExpect as expect,
-  comfyPageFixture
-} from '@e2e/fixtures/ComfyPage'
-import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
-import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
-import { webSocketFixture } from '@e2e/fixtures/ws'
-
-const test = mergeTests(comfyPageFixture, webSocketFixture)
-
-const VALIDATION_ERROR_NODE_ID = '1'
-const VALIDATION_ERROR_MESSAGE = 'Required input is missing: source'
-const PARTIAL_EXECUTION_ROOT_NODE_IDS = ['1', '4']
-
-type PromptRequestNode = {
-  class_type?: string
-}
-
-type PromptRequestBody = {
-  prompt?: Record<string, PromptRequestNode>
-}
-
-function buildPreviewAnyValidationError(): NodeError {
-  return {
-    class_type: 'PreviewAny',
-    dependent_outputs: [VALIDATION_ERROR_NODE_ID],
-    errors: [
-      {
-        type: 'required_input_missing',
-        message: VALIDATION_ERROR_MESSAGE,
-        details: '',
-        extra_info: { input_name: 'source' }
-      }
-    ]
-  }
-}
-
-function expectPartialExecutionRootNodes(requestBody: unknown): void {
-  const prompt = (requestBody as PromptRequestBody).prompt ?? {}
-
-  for (const nodeId of PARTIAL_EXECUTION_ROOT_NODE_IDS) {
-    expect(prompt[nodeId]).toMatchObject({ class_type: 'PreviewAny' })
-  }
-}
-
-async function getValidationErrorMessage(comfyPage: ComfyPage) {
-  return await comfyPage.page.evaluate(
-    (nodeId) =>
-      window.app!.extensionManager.lastNodeErrors?.[nodeId]?.errors[0]
-        ?.message ?? null,
-    VALIDATION_ERROR_NODE_ID
-  )
-}
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -127,48 +74,3 @@ test.describe(
     })
   }
 )
-
-test.describe('Execution validation errors', { tag: '@workflow' }, () => {
-  test('preserves validation errors when another active root starts execution', async ({
-    comfyPage,
-    getWebSocket
-  }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.RightSidePanel.ShowErrorsTab',
-      true
-    )
-    await comfyPage.setup()
-    await comfyPage.workflow.loadWorkflow('execution/partial_execution')
-
-    const ws = await getWebSocket()
-    const exec = new ExecutionHelper(comfyPage, ws)
-    const nodeErrors = {
-      [VALIDATION_ERROR_NODE_ID]: buildPreviewAnyValidationError()
-    }
-    let promptRequestBody: unknown
-
-    const jobId = await exec.run({
-      nodeErrors,
-      onPromptRequest: (requestBody) => {
-        promptRequestBody = requestBody
-      }
-    })
-    expectPartialExecutionRootNodes(promptRequestBody)
-    await expect
-      .poll(() => getValidationErrorMessage(comfyPage))
-      .toBe(VALIDATION_ERROR_MESSAGE)
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
-    )
-    await expect(errorOverlay).toBeVisible()
-
-    await comfyPage.nextFrame()
-    exec.executionStart(jobId)
-
-    await expect
-      .poll(() => getValidationErrorMessage(comfyPage))
-      .toBe(VALIDATION_ERROR_MESSAGE)
-    await expect(errorOverlay).toBeVisible()
-  })
-})

browser_tests/tests/maskEditor.spec.ts

@@ -76,34 +76,6 @@ test.describe('Mask Editor', { tag: '@vue-nodes' }, () => {
     await maskEditor.drawStrokeAndExpectPixels(dialog)
   })
 
-  test(
-    'Middle-click drag should pan the mask editor canvas',
-    { tag: ['@canvas'] },
-    async ({ comfyPage, comfyMouse, maskEditor }) => {
-      const dialog = await maskEditor.openDialog()
-      const pointerZone = dialog.getByTestId('pointer-zone')
-      const getCanvasPosition = () =>
-        comfyPage.page.evaluate(() => {
-          const container = document.querySelector('#maskEditorCanvasContainer')
-          if (!(container instanceof HTMLElement)) return null
-
-          return {
-            left: container.style.left,
-            top: container.style.top
-          }
-        })
-      const canvasPositionBefore = await getCanvasPosition()
-
-      await comfyMouse.middleDragFromCenter(
-        pointerZone,
-        { x: 140, y: 90 },
-        { steps: 10 }
-      )
-
-      await expect.poll(getCanvasPosition).not.toEqual(canvasPositionBefore)
-    }
-  )
-
   test('undo reverts a brush stroke', async ({ maskEditor }) => {
     const dialog = await maskEditor.openDialog()
 

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: 300 })
+      await comfyPage.page.setViewportSize({ width: 1280, height: 420 })
       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/nodeSearchBox.spec.ts

@@ -233,21 +233,21 @@ test.describe('Node search box', { tag: '@node' }, () => {
       test.beforeEach(async ({ comfyPage }) => {
         await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
         await comfyPage.searchBox.addFilter('CLIP', 'Output Type')
-        await comfyPage.searchBox.addFilter('utilities', 'Category')
+        await comfyPage.searchBox.addFilter('utils', 'Category')
       })
 
       test('Can remove first filter', async ({ comfyPage }) => {
         await comfyPage.searchBox.removeFilter(0)
-        await expectFilterChips(comfyPage, ['CLIP', 'utilities'])
+        await expectFilterChips(comfyPage, ['CLIP', 'utils'])
         await comfyPage.searchBox.removeFilter(0)
-        await expectFilterChips(comfyPage, ['utilities'])
+        await expectFilterChips(comfyPage, ['utils'])
         await comfyPage.searchBox.removeFilter(0)
         await expectFilterChips(comfyPage, [])
       })
 
       test('Can remove middle filter', async ({ comfyPage }) => {
         await comfyPage.searchBox.removeFilter(1)
-        await expectFilterChips(comfyPage, ['MODEL', 'utilities'])
+        await expectFilterChips(comfyPage, ['MODEL', 'utils'])
       })
 
       test('Can remove last filter', async ({ comfyPage }) => {

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/selectionToolboxMoreActions.spec.ts

@@ -56,34 +56,6 @@ test.describe('Selection Toolbox - More Options', { tag: '@ui' }, () => {
       await expect(nodeRef).not.toBeCollapsed()
     })
 
-    test('More Options menu does not surface duplicate LiteGraph Resize / Collapse / Expand entries', async ({
-      comfyPage
-    }) => {
-      const nodeRef = (
-        await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')
-      )[0]
-      await comfyPage.nodeOps.selectNodeWithPan(nodeRef)
-
-      const menu = await openMoreOptions(comfyPage)
-
-      await expect(
-        menu.getByText('Minimize Node', { exact: true })
-      ).toBeVisible()
-      await expect(
-        menu.getByRole('menuitem', { name: 'Resize', exact: true })
-      ).toHaveCount(0)
-      await expect(
-        menu.getByRole('menuitem', { name: 'Collapse', exact: true })
-      ).toHaveCount(0)
-
-      await menu.getByText('Minimize Node', { exact: true }).click()
-      await openMoreOptions(comfyPage)
-
-      await expect(
-        menu.getByRole('menuitem', { name: 'Expand', exact: true })
-      ).toHaveCount(0)
-    })
-
     test('copy via More Options menu', async ({ comfyPage }) => {
       const nodeRef = (
         await comfyPage.nodeOps.getNodeRefsByTitle('KSampler')

browser_tests/tests/sidebar/workflows.spec.ts

@@ -1,10 +1,8 @@
 import { expect } from '@playwright/test'
-import type { Route } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 import { openErrorsTab } from '@e2e/fixtures/helpers/ErrorsTabHelper'
-import type { UserDataFullInfo } from '@/schemas/apiSchema'
 
 test.describe('Workflows sidebar', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -47,56 +45,6 @@ test.describe('Workflows sidebar', () => {
       .toEqual(expect.arrayContaining(['workflow1', 'workflow2']))
   })
 
-  test(
-    'Shows loading state while refreshing workflows',
-    { tag: '@smoke' },
-    async ({ comfyPage }) => {
-      const tab = comfyPage.menu.workflowsTab
-      const workflowsSyncRoute = /\/api\/userdata\?[^#]*\bdir=workflows\b/
-      const emptyWorkflowList: UserDataFullInfo[] = []
-
-      let releaseSync!: () => void
-      const syncBlocked = new Promise<void>((resolve) => {
-        releaseSync = resolve
-      })
-      const syncFulfillments: Promise<void>[] = []
-
-      const holdSyncResponse = async (route: Route) => {
-        if (route.request().method() !== 'GET') {
-          await route.fallback()
-          return
-        }
-
-        const syncFulfilled = syncBlocked.then(() =>
-          route.fulfill({ json: emptyWorkflowList })
-        )
-        syncFulfillments.push(syncFulfilled)
-        await syncFulfilled
-      }
-
-      await comfyPage.page.route(workflowsSyncRoute, holdSyncResponse)
-
-      try {
-        const syncRequest = comfyPage.page.waitForRequest((request) =>
-          workflowsSyncRoute.test(request.url())
-        )
-
-        await tab.refreshButton.click()
-        await syncRequest
-
-        await expect(tab.refreshButton).toBeDisabled()
-        await expect(tab.refreshButton).toHaveAttribute('aria-busy', 'true')
-      } finally {
-        releaseSync()
-        await Promise.all(syncFulfillments)
-        await comfyPage.page.unroute(workflowsSyncRoute, holdSyncResponse)
-      }
-
-      await expect(tab.refreshButton).toBeEnabled()
-      await expect(tab.refreshButton).toHaveAttribute('aria-busy', 'false')
-    }
-  )
-
   test('Can duplicate workflow', async ({ comfyPage }) => {
     const tab = comfyPage.menu.workflowsTab
     await comfyPage.menu.topbar.saveWorkflow('workflow1')

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/subgraph/subgraphSlots.spec.ts

@@ -1,7 +1,8 @@
-import { expect } from '@playwright/test'
 import { readFileSync } from 'fs'
 import { resolve } from 'path'
 
+import { expect } from '@playwright/test'
+
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
@@ -650,12 +651,6 @@ test(
       await expect.poll(isConnected).toBe(true)
     })
 
-    const rawClip = await comfyPage.subgraph.getInputBounds()
-    const absolutePos = await comfyPage.canvasOps.toAbsolute(rawClip)
-    const clip = { ...rawClip, ...absolutePos }
-    await comfyPage.canvas.hover({ position: await seedIOSlot.getPosition() })
-    const twoLinkScreenshot = await comfyPage.page.screenshot({ clip })
-
     const stepsSlot = ksampler.getSlot('steps')
 
     await test.step('Node -> I/O hover effect', async () => {
@@ -664,6 +659,9 @@ test(
       await comfyPage.page.mouse.down()
       await comfyPage.canvas.hover({ position: await seedIOSlot.getPosition() })
 
+      const rawClip = await comfyPage.subgraph.getInputBounds()
+      const absolutePos = await comfyPage.canvasOps.toAbsolute(rawClip)
+      const clip = { ...rawClip, ...absolutePos }
       await expect(comfyPage.page).toHaveScreenshot('vue-io-highlight.png', {
         clip
       })
@@ -701,18 +699,5 @@ test(
       'opacity',
       '0'
     )
-
-    await test.step('Can disconnect link by right click', async () => {
-      const stepsIOSlot = await comfyPage.subgraph.getInputSlot('steps')
-      const { x, y } = await stepsIOSlot.getPosition()
-      await comfyPage.page.mouse.click(x, y, { button: 'right' })
-      await comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
-
-      await expect(slotParent).toHaveCSS('opacity', '0')
-
-      await comfyPage.canvas.hover({ position: await seedIOSlot.getPosition() })
-      const postScreenshot = await comfyPage.page.screenshot({ clip })
-      expect(postScreenshot).toStrictEqual(twoLinkScreenshot)
-    })
   }
 )

browser_tests/tests/templates.spec.ts

@@ -2,7 +2,6 @@ import type { Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 
 import type { WorkflowTemplates } from '@/platform/workflow/templates/types/template'
-import { getWav } from '@e2e/fixtures/components/AudioPreview'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 
@@ -451,57 +450,4 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
       )
     }
   )
-
-  test('Can open associated tutorial', async ({ comfyPage }) => {
-    const tutorialUrl = 'https://comfyanonymous.github.io/ComfyUI_examples/'
-    await comfyPage.page.route('**/templates/index.json', async (route) => {
-      const response = [
-        {
-          moduleName: 'default',
-          title: 'Test Templates',
-          type: 'image',
-          templates: [
-            {
-              name: 'template-with-tutorial',
-              title: 'Template with a tutorial',
-              mediaType: 'audio',
-              mediaSubtype: 'wav',
-              description: 'This template has a tutorial',
-              tutorialUrl
-            }
-          ]
-        }
-      ]
-      await route.fulfill({
-        status: 200,
-        body: JSON.stringify(response),
-        headers: {
-          'Content-Type': 'application/json',
-          'Cache-Control': 'no-store'
-        }
-      })
-    })
-
-    await comfyPage.page.route('**/templates/**.wav', async (route) => {
-      await route.fulfill({
-        status: 200,
-        body: getWav(),
-        headers: {
-          'Content-Type': 'image/x-wav',
-          'Cache-Control': 'no-store'
-        }
-      })
-    })
-    await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
-    const card = comfyPage.page.getByTestId(
-      'template-workflow-template-with-tutorial'
-    )
-    await card.hover()
-    const tutorialButton = card.getByRole('button', { name: 'See a tutorial' })
-    await expect(tutorialButton).toBeVisible()
-    const popupPromise = comfyPage.page.waitForEvent('popup', { timeout: 0 })
-    await tutorialButton.click()
-    const popup = await popupPromise
-    expect(popup.url()).toEqual(tutorialUrl)
-  })
 })

browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts

@@ -4,29 +4,6 @@ import {
 } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Vue Nodes Canvas Pan', { tag: '@vue-nodes' }, () => {
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.canvasOps.resetView()
-  })
-
-  test(
-    'Middle-click drag on a Vue node pans canvas',
-    { tag: ['@canvas'] },
-    async ({ comfyPage, comfyMouse }) => {
-      const node = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
-      const offsetBefore = await comfyPage.canvasOps.getOffset()
-
-      await comfyMouse.middleDragFromCenter(
-        node,
-        { x: 140, y: 90 },
-        { steps: 10 }
-      )
-
-      await expect
-        .poll(() => comfyPage.canvasOps.getOffset())
-        .not.toEqual(offsetBefore)
-    }
-  )
-
   test(
     '@mobile Can pan with touch',
     { tag: '@screenshot' },

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/text/multilineStringWidget.spec.ts

@@ -5,10 +5,6 @@ import {
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 
 test.describe('Vue Multiline String Widget', { tag: '@vue-nodes' }, () => {
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.canvasOps.resetView()
-  })
-
   const getFirstClipNode = (comfyPage: ComfyPage) =>
     comfyPage.vueNodes.getNodeByTitle('CLIP Text Encode (Prompt)').first()
 
@@ -58,23 +54,4 @@ test.describe('Vue Multiline String Widget', { tag: '@vue-nodes' }, () => {
     await textarea.click({ button: 'right' })
     await expect(vueContextMenu).toBeVisible()
   })
-
-  test(
-    'Middle-click drag on textarea should pan canvas',
-    { tag: ['@canvas', '@widget'] },
-    async ({ comfyPage, comfyMouse }) => {
-      const textarea = getFirstMultilineStringWidget(comfyPage)
-      const offsetBefore = await comfyPage.canvasOps.getOffset()
-
-      await comfyMouse.middleDragFromCenter(
-        textarea,
-        { x: 140, y: 90 },
-        { steps: 10 }
-      )
-
-      await expect
-        .poll(() => comfyPage.canvasOps.getOffset())
-        .not.toEqual(offsetBefore)
-    }
-  )
 })

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)
   })

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
 

eslint.config.ts

@@ -145,7 +145,9 @@ export default defineConfig([
   eslintConfigPrettier,
   // @ts-expect-error Type incompatibility between storybook plugin and ESLint config types
   storybookConfigs['flat/recommended'],
+  // @ts-expect-error Type incompatibility between import-x plugin and ESLint config types
   importX.flatConfigs.recommended,
+  // @ts-expect-error Type incompatibility between import-x plugin and ESLint config types
   importX.flatConfigs.typescript,
   {
     plugins: {
@@ -371,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': [
@@ -400,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.5",
+  "version": "1.46.2",
   "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:",

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

@@ -1892,17 +1892,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;
-}

pnpm-workspace.yaml

@@ -13,13 +13,13 @@ catalog:
   '@astrojs/sitemap': ^3.7.1
   '@astrojs/vue': ^5.0.0
   '@comfyorg/comfyui-electron-types': 0.6.2
-  '@eslint/js': ^10.0.1
+  '@eslint/js': ^9.39.1
   '@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.5.0
+  '@intlify/eslint-plugin-vue-i18n': ^4.1.1
   '@lobehub/i18n-cli': ^1.26.1
   '@pinia/testing': ^1.0.3
   '@playwright/test': ^1.58.1
@@ -66,33 +66,33 @@ 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: ^10.4.0
+  eslint: ^9.39.1
   eslint-config-prettier: ^10.1.8
   eslint-import-resolver-typescript: ^4.4.4
   eslint-plugin-better-tailwindcss: ^4.3.1
-  eslint-plugin-import-x: ^4.16.2
+  eslint-plugin-import-x: ^4.16.1
   eslint-plugin-oxlint: 1.59.0
   eslint-plugin-playwright: ^2.10.1
   eslint-plugin-storybook: ^10.2.10
   eslint-plugin-testing-library: ^7.16.1
-  eslint-plugin-unused-imports: ^4.4.1
-  eslint-plugin-vue: ^10.9.1
+  eslint-plugin-unused-imports: ^4.3.0
+  eslint-plugin-vue: ^10.6.2
   fast-check: ^4.5.3
   firebase: ^11.6.0
   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,29 +108,28 @@ 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
   typescript: ^5.9.3
-  typescript-eslint: ^8.60.0
+  typescript-eslint: ^8.49.0
   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,12 +160,3 @@ overrides:
   vite: 'catalog:'
   '@tiptap/pm': 2.27.2
   '@types/eslint': '-'
-  #Security overrides
-  lodash: ^4.18.0
-  yaml: ^2.8.3
-  minimatch@^9.0.0: ^9.0.7
-  minimatch@^10.0.0: ^10.2.3
-  brace-expansion@^1.0.0: ^1.1.13
-  brace-expansion@^2.0.0: ^2.0.3
-  ajv@^8.0.0: ^8.18.0
-  ws@^8.0.0: ^8.20.1

src/base/pointerUtils.test.ts

@@ -1,75 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import {
-  isMiddleButtonEvent,
-  isMiddleButtonHeld,
-  isMiddlePointerInput
-} from '@/base/pointerUtils'
-
-describe('pointerUtils', () => {
-  describe('isMiddlePointerInput', () => {
-    it.for([
-      {
-        name: 'accepts a middle-button pointerdown',
-        event: new PointerEvent('pointerdown', { button: 1, buttons: 4 }),
-        expected: true
-      },
-      {
-        name: 'accepts strict middle-only held buttons',
-        event: new PointerEvent('pointermove', { buttons: 4 }),
-        expected: true
-      },
-      {
-        name: 'rejects chorded pointerdown when middle is only incidentally held',
-        event: new PointerEvent('pointerdown', { button: 0, buttons: 5 }),
-        expected: false
-      }
-    ])('$name', ({ event, expected }) => {
-      expect(isMiddlePointerInput(event)).toBe(expected)
-    })
-  })
-
-  describe('isMiddleButtonHeld', () => {
-    it.for([
-      {
-        name: 'accepts the middle-button bit alone',
-        event: new PointerEvent('pointermove', { buttons: 4 }),
-        expected: true
-      },
-      {
-        name: 'accepts chorded moves that include the middle-button bit',
-        event: new PointerEvent('pointermove', { buttons: 5 }),
-        expected: true
-      },
-      {
-        name: 'accepts pointercancel when the middle-button bit is still held',
-        event: new PointerEvent('pointercancel', { buttons: 4 }),
-        expected: true
-      },
-      {
-        name: 'rejects primary-button-only moves',
-        event: new PointerEvent('pointermove', { buttons: 1 }),
-        expected: false
-      }
-    ])('$name', ({ event, expected }) => {
-      expect(isMiddleButtonHeld(event)).toBe(expected)
-    })
-  })
-
-  describe('isMiddleButtonEvent', () => {
-    it.for([
-      {
-        name: 'accepts a middle-button pointerup',
-        event: new PointerEvent('pointerup', { button: 1 }),
-        expected: true
-      },
-      {
-        name: 'rejects a non-middle changed button even when middle is held',
-        event: new MouseEvent('auxclick', { button: 2, buttons: 4 }),
-        expected: false
-      }
-    ])('$name', ({ event, expected }) => {
-      expect(isMiddleButtonEvent(event)).toBe(expected)
-    })
-  })
-})

src/base/pointerUtils.ts

@@ -2,14 +2,21 @@
  * Utilities for pointer event handling
  */
 
-export function isMiddlePointerInput(event: MouseEvent): boolean {
-  return event.button === 1 || event.buttons === 4
-}
+/**
+ * Checks if a pointer or mouse event is a middle button input
+ * @param event - The pointer or mouse event to check
+ * @returns true if the event is from the middle button/wheel
+ */
+export function isMiddlePointerInput(
+  event: PointerEvent | MouseEvent
+): boolean {
+  if ('button' in event && event.button === 1) {
+    return true
+  }
 
-export function isMiddleButtonHeld(event: MouseEvent): boolean {
-  return (event.buttons & 4) === 4
-}
+  if ('buttons' in event && typeof event.buttons === 'number') {
+    return event.buttons === 4
+  }
 
-export function isMiddleButtonEvent(event: MouseEvent): boolean {
-  return event.button === 1
+  return false
 }

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/common/WaveAudioPlayer.vue

@@ -159,7 +159,7 @@
 
   <audio
     :ref="(el) => (audioRef = el as HTMLAudioElement)"
-    :src
+    :src="audioSrc"
     preload="metadata"
     class="hidden"
   />
@@ -192,6 +192,7 @@ const progressRef = ref<HTMLElement>()
 const {
   audioRef,
   waveformRef,
+  audioSrc,
   bars,
   loading,
   isPlaying,

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -190,7 +190,7 @@
             variant="ghost"
             rounded="lg"
             :data-testid="`template-workflow-${template.name}`"
-            class="group/card hover:bg-base-background"
+            class="hover:bg-base-background"
             @mouseenter="hoveredTemplate = template.name"
             @mouseleave="hoveredTemplate = null"
             @click="onLoadWorkflow(template)"
@@ -316,11 +316,11 @@
                       class="flex flex-col-reverse justify-center"
                     >
                       <Button
+                        v-if="hoveredTemplate === template.name"
                         v-tooltip.bottom="$t('g.seeTutorial')"
-                        :aria-label="$t('g.seeTutorial')"
+                        v-bind="$attrs"
                         variant="inverted"
                         size="icon"
-                        class="not-group-hover/card:opacity-0"
                         @click.stop="openTutorial(template)"
                       >
                         <i class="icon-[lucide--info] size-4" />

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/GraphCanvas.vue

@@ -63,9 +63,9 @@
     v-if="shouldRenderVueNodes && comfyApp.canvas && comfyAppReady"
     :canvas="comfyApp.canvas"
     @wheel.capture="canvasInteractions.forwardEventToCanvas"
-    @pointerdown.capture="forwardPointerDownPanEvent"
-    @pointerup.capture="forwardPointerUpPanEvent"
-    @pointermove.capture="forwardPointerMovePanEvent"
+    @pointerdown.capture="forwardPanEvent"
+    @pointerup.capture="forwardPanEvent"
+    @pointermove.capture="forwardPanEvent"
   >
     <!-- Vue nodes rendered based on graph nodes -->
     <LGraphNode
@@ -120,11 +120,7 @@ import {
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import {
-  isMiddleButtonEvent,
-  isMiddleButtonHeld,
-  isMiddlePointerInput
-} from '@/base/pointerUtils'
+import { isMiddlePointerInput } from '@/base/pointerUtils'
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
 import TopMenuSection from '@/components/TopMenuSection.vue'
 import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
@@ -597,23 +593,8 @@ onUnmounted(() => {
   cleanupErrorHooks = null
   vueNodeLifecycle.cleanup()
 })
-function forwardPointerDownPanEvent(e: PointerEvent) {
-  forwardPanEvent(e, isMiddlePointerInput)
-}
-
-function forwardPointerMovePanEvent(e: PointerEvent) {
-  forwardPanEvent(e, isMiddleButtonHeld)
-}
-
-function forwardPointerUpPanEvent(e: PointerEvent) {
-  forwardPanEvent(e, isMiddleButtonEvent)
-}
-
-function forwardPanEvent(
-  e: PointerEvent,
-  isMiddleInput: (event: PointerEvent) => boolean
-) {
-  if (!isMiddleInput(e)) return
+function forwardPanEvent(e: PointerEvent) {
+  if (!isMiddlePointerInput(e)) return
   if (shouldIgnoreCopyPaste(e.target) && document.activeElement === e.target)
     return
 

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/graph/SelectionToolbox.test.ts

@@ -472,9 +472,7 @@ describe('SelectionToolbox', () => {
       const forwardEventToCanvasSpy = vi.fn()
       mockCanvasInteractions.mockReturnValue({
         handleWheel: vi.fn(),
-        handlePointerDown: vi.fn(),
-        handlePointerMove: vi.fn(),
-        handlePointerUp: vi.fn(),
+        handlePointer: vi.fn(),
         forwardEventToCanvas: forwardEventToCanvasSpy,
         shouldHandleNodePointerEvents: { value: true } as ReturnType<
           typeof useCanvasInteractions

src/components/rightSidePanel/errors/TabErrors.test.ts

@@ -167,10 +167,7 @@ describe('TabErrors.vue', () => {
 
     expect(screen.getAllByText('KSampler').length).toBeGreaterThanOrEqual(1)
     expect(screen.getByText('#10')).toBeInTheDocument()
-    expect(screen.getByText('Execution failed')).toBeInTheDocument()
-    expect(
-      screen.getByText('Node threw an error during execution.')
-    ).toBeInTheDocument()
+    expect(screen.getByText('RuntimeError: Out of memory')).toBeInTheDocument()
     expect(screen.getByText(/Line 1/)).toBeInTheDocument()
   })
 
@@ -249,9 +246,9 @@ describe('TabErrors.vue', () => {
     })
 
     expect(screen.getAllByText('KSampler').length).toBeGreaterThanOrEqual(1)
-    expect(screen.getByText('Execution failed')).toBeInTheDocument()
+    expect(screen.getByText('RuntimeError: Out of memory')).toBeInTheDocument()
     expect(screen.getByTestId('runtime-error-panel')).toBeInTheDocument()
-    expect(screen.getAllByText('Execution failed')).toHaveLength(1)
+    expect(screen.getAllByText('RuntimeError: Out of memory')).toHaveLength(1)
   })
 
   it('shows missing model Refresh in the section header when no model is downloadable', async () => {

src/components/rightSidePanel/errors/useErrorGroups.test.ts

@@ -46,22 +46,7 @@ vi.mock('@/i18n', () => {
     'errorCatalog.promptErrors.prompt_no_outputs.title':
       'Prompt has no outputs',
     'errorCatalog.promptErrors.prompt_no_outputs.desc':
-      'The workflow does not contain any output nodes (e.g. Save Image, Preview Image) to produce a result.',
-    'errorCatalog.runtimeErrors.execution_failed.title': 'Execution failed',
-    'errorCatalog.runtimeErrors.execution_failed.message':
-      'Node threw an error during execution.',
-    'errorCatalog.runtimeErrors.execution_failed.itemLabel': '{nodeName}',
-    'errorCatalog.runtimeErrors.execution_failed.toastTitle':
-      '{nodeName} failed',
-    'errorCatalog.runtimeErrors.execution_failed.toastMessage':
-      'This node threw an error during execution. Check its inputs or try a different configuration.',
-    'errorCatalog.runtimeErrors.out_of_memory.title': 'Generation failed',
-    'errorCatalog.runtimeErrors.out_of_memory.message':
-      'Not enough GPU memory. Try reducing image resolution or batch size and run again.',
-    'errorCatalog.runtimeErrors.out_of_memory.itemLabel': '{nodeName}',
-    'errorCatalog.runtimeErrors.out_of_memory.toastTitle': 'Generation failed',
-    'errorCatalog.runtimeErrors.out_of_memory.toastMessage':
-      'Not enough GPU memory. Try reducing image resolution or batch size and run again.'
+      'The workflow does not contain any output nodes (e.g. Save Image, Preview Image) to produce a result.'
   }
 
   const interpolate = (
@@ -173,7 +158,6 @@ function createErrorGroups() {
 describe('useErrorGroups', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
-    mockIsCloud.value = false
   })
 
   describe('missingPackGroups', () => {
@@ -437,8 +421,7 @@ describe('useErrorGroups', () => {
       )
     })
 
-    it('uses general execution_failed display fields for unrecognized runtime execution errors', async () => {
-      mockIsCloud.value = true
+    it('includes execution error from runtime errors', async () => {
       const { store, groups } = createErrorGroups()
       store.lastExecutionError = {
         prompt_id: 'test-prompt',
@@ -447,7 +430,7 @@ describe('useErrorGroups', () => {
         node_type: 'KSampler',
         executed: [],
         exception_type: 'RuntimeError',
-        exception_message: 'mat1 and mat2 shapes cannot be multiplied',
+        exception_message: 'CUDA out of memory',
         traceback: ['line 1', 'line 2'],
         current_inputs: {},
         current_outputs: {}
@@ -460,52 +443,15 @@ describe('useErrorGroups', () => {
       expect(execGroups.length).toBeGreaterThan(0)
       if (execGroups[0].type !== 'execution') return
       expect(execGroups[0].cards[0].errors[0]).toMatchObject({
-        message: 'RuntimeError: mat1 and mat2 shapes cannot be multiplied',
+        message: 'RuntimeError: CUDA out of memory',
         details: 'line 1\nline 2',
         isRuntimeError: true,
-        exceptionType: 'RuntimeError',
-        catalogId: 'execution_failed',
-        displayTitle: 'Execution failed',
-        displayMessage: 'Node threw an error during execution.',
-        displayItemLabel: 'KSampler',
-        toastTitle: 'KSampler failed',
-        toastMessage:
-          'This node threw an error during execution. Check its inputs or try a different configuration.'
+        exceptionType: 'RuntimeError'
       })
-    })
-
-    it('adds display fields for targeted runtime execution errors', async () => {
-      mockIsCloud.value = true
-      const { store, groups } = createErrorGroups()
-      store.lastExecutionError = {
-        prompt_id: 'test-prompt',
-        timestamp: Date.now(),
-        node_id: 5,
-        node_type: 'KSampler',
-        executed: [],
-        exception_type: 'torch.OutOfMemoryError',
-        exception_message:
-          'Allocation on device 0 failed.\nThis error means you ran out of memory on your GPU.',
-        traceback: ['line 1', 'line 2'],
-        current_inputs: {},
-        current_outputs: {}
-      }
-      await nextTick()
-
-      const execGroup = groups.allErrorGroups.value.find(
-        (g) => g.type === 'execution'
-      )
-      expect(execGroup?.type).toBe('execution')
-      if (execGroup?.type !== 'execution') return
-
-      const error = execGroup.cards[0].errors[0]
-      expect(error.message).toContain('torch.OutOfMemoryError:')
-      expect(error.catalogId).toBe('out_of_memory')
-      expect(error.displayMessage).toBe(
-        'Not enough GPU memory. Try reducing image resolution or batch size and run again.'
-      )
-      expect(error.displayItemLabel).toBe('KSampler')
-      expect(error.toastTitle).toBe('Generation failed')
+      // TODO(FE-816 overlay-redesign): Runtime execution errors intentionally
+      // bypass catalog display fields until targeted runtime handling lands.
+      expect(execGroups[0].cards[0].errors[0].displayItemLabel).toBeUndefined()
+      expect(execGroups[0].cards[0].errors[0].toastTitle).toBeUndefined()
     })
 
     it('includes prompt error when present', async () => {

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -427,13 +427,7 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
           message: `${e.exception_type}: ${e.exception_message}`,
           details: e.traceback.join('\n'),
           isRuntimeError: true,
-          exceptionType: e.exception_type,
-          ...resolveRunErrorMessage({
-            kind: 'execution',
-            error: e,
-            nodeDisplayName:
-              resolveNodeInfo(String(e.node_id)).title || e.node_type
-          })
+          exceptionType: e.exception_type
         }
       ],
       filterBySelection

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/sidebar/tabs/BaseWorkflowsSidebarTab.test.ts

@@ -1,7 +1,6 @@
 import { createTestingPinia } from '@pinia/testing'
 import { fromPartial } from '@total-typescript/shoehorn'
-import { render, screen } from '@testing-library/vue'
-import userEvent from '@testing-library/user-event'
+import { render } from '@testing-library/vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 import { nextTick, reactive, ref, watchEffect } from 'vue'
@@ -35,7 +34,6 @@ const {
     bookmarkedWorkflows: [] as ComfyWorkflow[],
     openWorkflows: [] as ComfyWorkflow[],
     activeWorkflow: null as ComfyWorkflow | null,
-    isSyncLoading: false,
     syncWorkflows: vi.fn().mockResolvedValue(undefined)
   }
 
@@ -234,7 +232,6 @@ describe('BaseWorkflowsSidebarTab', () => {
     mockWorkflowStore.bookmarkedWorkflows = []
     mockWorkflowStore.openWorkflows = []
     mockWorkflowStore.activeWorkflow = null
-    mockWorkflowStore.isSyncLoading = false
   })
 
   const renderComponent = () =>
@@ -282,36 +279,6 @@ describe('BaseWorkflowsSidebarTab', () => {
     expect(getLeafPaths(getSearchRoot())).toEqual(['workflows/test-alpha.json'])
   })
 
-  it('refreshes when idle and exposes busy state while workflows are syncing', async () => {
-    const user = userEvent.setup()
-
-    renderComponent()
-
-    const refreshButton = screen.getByRole('button', { name: 'g.refresh' })
-    expect(refreshButton).toBeEnabled()
-    expect(refreshButton).toHaveAttribute('aria-busy', 'false')
-
-    await user.click(refreshButton)
-
-    expect(mockWorkflowStore.syncWorkflows).toHaveBeenCalledTimes(1)
-
-    mockWorkflowStore.isSyncLoading = true
-    await nextTick()
-
-    expect(refreshButton).toBeDisabled()
-    expect(refreshButton).toHaveAttribute('aria-busy', 'true')
-
-    mockWorkflowStore.isSyncLoading = false
-    await nextTick()
-
-    expect(refreshButton).toBeEnabled()
-    expect(refreshButton).toHaveAttribute('aria-busy', 'false')
-
-    await user.click(refreshButton)
-
-    expect(mockWorkflowStore.syncWorkflows).toHaveBeenCalledTimes(2)
-  })
-
   it('reactively updates filtered workflows when a workflow is removed', async () => {
     mockWorkflowStore.workflows = [
       createMockWorkflow('workflows/test-alpha.json'),

src/components/sidebar/tabs/BaseWorkflowsSidebarTab.vue

@@ -11,24 +11,12 @@
     <template #tool-buttons>
       <Button
         v-tooltip.bottom="$t('g.refresh')"
-        data-testid="workflows-refresh-button"
         variant="muted-textonly"
         size="icon"
         :aria-label="$t('g.refresh')"
-        :aria-busy="workflowStore.isSyncLoading"
-        :disabled="workflowStore.isSyncLoading"
         @click="workflowStore.syncWorkflows()"
       >
-        <i
-          aria-hidden="true"
-          data-testid="workflows-refresh-icon"
-          :class="
-            cn(
-              'icon-[lucide--refresh-cw] size-4',
-              workflowStore.isSyncLoading && 'animate-spin'
-            )
-          "
-        />
+        <i class="icon-[lucide--refresh-cw] size-4" />
       </Button>
     </template>
     <template #header>
@@ -182,7 +170,6 @@ import {
   getWorkflowSuffix
 } from '@/utils/formatUtil'
 import { buildTree, sortedTree } from '@/utils/treeUtil'
-import { cn } from '@comfyorg/tailwind-utils'
 
 const { title, filter, searchSubject, dataTestid, hideLeafIcon } = defineProps<{
   title: string

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.test.ts

@@ -1,7 +1,5 @@
 import { describe, it, expect } from 'vitest'
 
-import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
-
 import type { MenuOption } from './useMoreOptionsMenu'
 import {
   buildStructuredMenu,
@@ -177,28 +175,6 @@ describe('contextMenuConverter', () => {
       expect(result.find((opt) => opt.label === 'Properties')).toBeUndefined()
     })
 
-    it.for([
-      { label: 'Resize', callback: LGraphCanvas.onMenuResizeNode },
-      { label: 'Collapse', callback: LGraphCanvas.onMenuNodeCollapse },
-      { label: 'Expand', callback: LGraphCanvas.onMenuNodeCollapse }
-    ])(
-      'should skip built-in LiteGraph $label entry by callback identity',
-      ({ label, callback }) => {
-        const items = [{ content: label, callback }]
-        const result = convertContextMenuToOptions(items, undefined, false)
-        expect(result.find((opt) => opt.label === label)).toBeUndefined()
-      }
-    )
-
-    it.for(['Resize', 'Collapse', 'Expand'])(
-      'should keep extension-provided %s entries (different callback identity)',
-      (label) => {
-        const items = [{ content: label, callback: () => {} }]
-        const result = convertContextMenuToOptions(items, undefined, false)
-        expect(result.find((opt) => opt.label === label)).toBeDefined()
-      }
-    )
-
     it('should convert basic menu items with content', () => {
       const items = [{ content: 'Test Item', callback: () => {} }]
       const result = convertContextMenuToOptions(items, undefined, false)

src/composables/graph/contextMenuConverter.ts

@@ -1,6 +1,6 @@
 import { default as DOMPurify } from 'dompurify'
 
-import { LGraphCanvas, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type {
   IContextMenuValue,
   LGraphNode,
@@ -24,17 +24,6 @@ const HARD_BLACKLIST = new Set([
   'Copy (Clipspace)'
 ])
 
-/**
- * Callbacks of built-in LiteGraph node menu items that are superseded by
- * the Vue node menu (Minimize Node / Expand Node) or have no working
- * Vue-side equivalent. Matched by callback identity so that extensions
- * providing their own items with the same labels are not affected.
- */
-const SUPPRESSED_LITEGRAPH_CALLBACKS = new Set<unknown>([
-  LGraphCanvas.onMenuResizeNode,
-  LGraphCanvas.onMenuNodeCollapse
-])
-
 /**
  * Core menu items - items that should appear in the main menu, not under Extensions
  * Includes both LiteGraph base menu items and ComfyUI built-in functionality
@@ -57,9 +46,11 @@ const CORE_MENU_ITEMS = new Set([
   'Frame selection',
   'Frame Nodes',
   'Minimize Node',
-  'Expand Node',
+  'Expand',
+  'Collapse',
   // Info and adjustments
   'Node Info',
+  'Resize',
   'Title',
   'Properties Panel',
   'Adjust Size',
@@ -240,7 +231,9 @@ const MENU_ORDER: string[] = [
   'Frame selection',
   'Frame Nodes',
   'Minimize Node',
-  'Expand Node',
+  'Expand',
+  'Collapse',
+  'Resize',
   'Clone',
   // Section 4: Node properties
   'Node Info',
@@ -308,14 +301,14 @@ export function buildStructuredMenu(options: MenuOption[]): MenuOption[] {
   // Section boundaries based on MENU_ORDER indices
   // Section 1: 0-2 (Rename, Copy, Duplicate)
   // Section 2: 3-8 (Run Branch, Pin, Unpin, Bypass, Remove Bypass, Mute)
-  // Section 3: 9-14 (Convert to Subgraph, Frame selection, Frame Nodes, Minimize Node, Expand Node, Clone)
-  // Section 4: 15-16 (Node Info, Color)
-  // Section 5: 17+ (Image operations and fallback items)
+  // Section 3: 9-15 (Convert to Subgraph, Frame selection, Minimize Node, Expand, Collapse, Resize, Clone)
+  // Section 4: 16-17 (Node Info, Color)
+  // Section 5: 18+ (Image operations and fallback items)
   const getSectionNumber = (index: number): number => {
     if (index <= 2) return 1
     if (index <= 8) return 2
-    if (index <= 14) return 3
-    if (index <= 16) return 4
+    if (index <= 15) return 3
+    if (index <= 17) return 4
     return 5
   }
 
@@ -396,13 +389,6 @@ export function convertContextMenuToOptions(
       continue
     }
 
-    // Skip built-in LiteGraph items that the Vue menu replaces.
-    // Matched by callback identity, not label, to avoid suppressing
-    // extension-provided items that happen to share a label.
-    if (item.callback && SUPPRESSED_LITEGRAPH_CALLBACKS.has(item.callback)) {
-      continue
-    }
-
     // Skip if a similar item already exists in results
     if (isDuplicateItem(item.content, result)) {
       continue

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,
@@ -29,8 +27,6 @@ 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 +56,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
@@ -231,15 +228,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 +257,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 +307,8 @@ function safeWidgetMapper(
           ? resolveConcretePromotedWidget(
               node,
               promotedSource.sourceNodeId,
-              promotedSource.sourceWidgetName
+              promotedSource.sourceWidgetName,
+              promotedSource.disambiguatingSourceNodeId
             )
           : null
       const resolvedSource =
@@ -319,21 +321,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 +386,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
       }
     }