Merge branch 'main' into feat/error-tab-node-installation

void discards the promise entirely; .catch() preserves the
fire-and-forget intent while preventing a silent unhandled rejection
if runFullConflictAnalysis throws asynchronously.

.github/workflows/ci-dist-telemetry-scan.yaml

@@ -34,10 +34,13 @@ jobs:
 
       - name: Build project
         run: pnpm build
+        env:
+          DISTRIBUTION: localhost
 
-      - name: Scan dist for telemetry references
+      - name: Scan dist for GTM telemetry references
         run: |
           set -euo pipefail
+          echo '🔍 Scanning for Google Tag Manager references...'
           if rg --no-ignore -n \
             -g '*.html' \
             -g '*.js' \
@@ -46,7 +49,33 @@ jobs:
             -e '(?i)googletagmanager\.com/gtm\.js\\?id=' \
             -e '(?i)googletagmanager\.com/ns\.html\\?id=' \
             dist; then
-            echo 'Telemetry references found in dist assets.'
+            echo '❌ ERROR: Google Tag Manager references found in dist assets!'
+            echo 'GTM must be properly tree-shaken from OSS builds.'
             exit 1
           fi
-          echo 'No telemetry references found in dist assets.'
+          echo '✅ No GTM references found'
+
+      - name: Scan dist for Mixpanel telemetry references
+        run: |
+          set -euo pipefail
+          echo '🔍 Scanning for Mixpanel references...'
+          if rg --no-ignore -n \
+            -g '*.html' \
+            -g '*.js' \
+            -e '(?i)mixpanel\.init' \
+            -e '(?i)mixpanel\.identify' \
+            -e 'MixpanelTelemetryProvider' \
+            -e 'mp\.comfy\.org' \
+            -e 'mixpanel-browser' \
+            -e '(?i)mixpanel\.track\(' \
+            dist; then
+            echo '❌ ERROR: Mixpanel references found in dist assets!'
+            echo 'Mixpanel must be properly tree-shaken from OSS builds.'
+            echo ''
+            echo 'To fix this:'
+            echo '1. Use the TelemetryProvider pattern (see src/platform/telemetry/)'
+            echo '2. Call telemetry via useTelemetry() hook'
+            echo '3. Use conditional dynamic imports behind isCloud checks'
+            exit 1
+          fi
+          echo '✅ No Mixpanel references found'

.github/workflows/ci-lint-format.yaml

@@ -21,11 +21,19 @@ jobs:
         uses: actions/checkout@v6
         with:
           ref: ${{ !github.event.pull_request.head.repo.fork && github.head_ref || github.ref }}
-          token: ${{ secrets.PR_GH_TOKEN }}
+          token: ${{ !github.event.pull_request.head.repo.fork && secrets.PR_GH_TOKEN || github.token }}
 
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
 
+      - name: Detect browser_tests changes
+        id: changed-paths
+        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+        with:
+          filters: |
+            browser_tests:
+              - 'browser_tests/**'
+
       - name: Run ESLint with auto-fix
         run: pnpm lint:fix
 
@@ -60,6 +68,10 @@ jobs:
           pnpm format:check
           pnpm knip
 
+      - name: Typecheck browser tests
+        if: steps.changed-paths.outputs.browser_tests == 'true'
+        run: pnpm typecheck:browser
+
       - name: Comment on PR about auto-fix
         if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name == github.repository
         continue-on-error: true

.github/workflows/ci-oss-assets-validation.yaml

@@ -0,0 +1,118 @@
+name: 'CI: OSS Assets Validation'
+
+on:
+  pull_request:
+    branches-ignore: [wip/*, draft/*, temp/*]
+  push:
+    branches: [main, dev*]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  validate-fonts:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@9fd676a19091d4595eefd76e4bd31c97133911f1 # v4.2.0
+        with:
+          version: 10
+
+      - name: Use Node.js
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        with:
+          node-version: 'lts/*'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project
+        run: pnpm build
+        env:
+          DISTRIBUTION: localhost
+
+      - name: Check for proprietary fonts in dist
+        run: |
+          set -euo pipefail
+          echo '🔍 Checking dist for proprietary ABCROM fonts...'
+
+          if [ ! -d "dist" ] || [ -z "$(ls -A dist)" ]; then
+            echo '❌ ERROR: dist/ directory missing or empty!'
+            exit 1
+          fi
+
+          # Check for ABCROM font files
+          if find dist/ -type f -iname '*abcrom*' \
+            \( -name '*.woff' -o -name '*.woff2' -o -name '*.ttf' -o -name '*.otf' \) \
+            -print -quit | grep -q .; then
+            echo ''
+            echo '❌ ERROR: Found proprietary ABCROM font files in dist!'
+            echo ''
+            find dist/ -type f -iname '*abcrom*' \
+              \( -name '*.woff' -o -name '*.woff2' -o -name '*.ttf' -o -name '*.otf' \)
+            echo ''
+            echo 'ABCROM fonts are proprietary and should not ship to OSS builds.'
+            echo ''
+            echo 'To fix this:'
+            echo '1. Use conditional font loading based on isCloud'
+            echo '2. Ensure fonts are dynamically imported, not bundled'
+            echo '3. Check vite config for font handling'
+            exit 1
+          fi
+
+          echo '✅ No proprietary fonts found in dist'
+
+  validate-licenses:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@9fd676a19091d4595eefd76e4bd31c97133911f1 # v4.2.0
+        with:
+          version: 10
+
+      - name: Use Node.js
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        with:
+          node-version: 'lts/*'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Validate production dependency licenses
+        run: |
+          set -euo pipefail
+          echo '🔍 Checking production dependency licenses...'
+
+          # Use license-checker-rseidelsohn (actively maintained fork, handles monorepos)
+          # Exclude internal @comfyorg packages from license check
+          # Run in if condition to capture exit code
+          if npx license-checker-rseidelsohn@4 \
+            --production \
+            --summary \
+            --excludePackages '@comfyorg/comfyui-frontend;@comfyorg/design-system;@comfyorg/registry-types;@comfyorg/shared-frontend-utils;@comfyorg/tailwind-utils;@comfyorg/comfyui-electron-types' \
+            --onlyAllow 'MIT;MIT*;Apache-2.0;BSD-2-Clause;BSD-3-Clause;ISC;0BSD;BlueOak-1.0.0;Python-2.0;CC0-1.0;Unlicense;(MIT OR Apache-2.0);(MIT OR GPL-3.0);(Apache-2.0 OR MIT);(MPL-2.0 OR Apache-2.0);CC-BY-4.0;CC-BY-3.0;GPL-3.0-only'; then
+            echo ''
+            echo '✅ All production dependency licenses are approved!'
+          else
+            echo ''
+            echo '❌ ERROR: Found dependencies with non-approved licenses!'
+            echo ''
+            echo 'To fix this:'
+            echo '1. Check the license of the problematic package'
+            echo '2. Find an alternative package with an approved license'
+            echo '3. If the license is safe and OSI-approved, add it to the --onlyAllow list'
+            echo ''
+            echo 'For more info on OSI-approved licenses:'
+            echo 'https://opensource.org/licenses'
+            exit 1
+          fi

.github/workflows/ci-tests-e2e-forks.yaml

@@ -6,9 +6,6 @@ on:
     workflows: ['CI: Tests E2E']
     types: [requested, completed]
 
-env:
-  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
-
 jobs:
   deploy-and-comment-forked-pr:
     runs-on: ubuntu-latest
@@ -63,8 +60,7 @@ jobs:
           ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ steps.pr.outputs.result }}" \
             "${{ github.event.workflow_run.head_branch }}" \
-            "starting" \
-            "$(date -u '${{ env.DATE_FORMAT }}')"
+            "starting"
 
       - name: Download and Deploy Reports
         if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'

.github/workflows/ci-tests-e2e.yaml

@@ -4,8 +4,10 @@ name: 'CI: Tests E2E'
 on:
   push:
     branches: [main, master, core/*, desktop/*]
+    paths-ignore: ['**/*.md']
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
+    paths-ignore: ['**/*.md']
   workflow_dispatch:
 
 concurrency:
@@ -182,10 +184,6 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v6
 
-      - name: Get start time
-        id: start-time
-        run: echo "time=$(date -u '+%m/%d/%Y, %I:%M:%S %p')" >> $GITHUB_OUTPUT
-
       - name: Post starting comment
         env:
           GITHUB_TOKEN: ${{ github.token }}
@@ -194,8 +192,7 @@ jobs:
           ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
             "${{ github.head_ref }}" \
-            "starting" \
-            "${{ steps.start-time.outputs.time }}"
+            "starting"
 
   # Deploy and comment for non-forked PRs only
   deploy-and-comment:

.github/workflows/ci-tests-storybook-forks.yaml

@@ -6,9 +6,6 @@ on:
     workflows: ['CI: Tests Storybook']
     types: [requested, completed]
 
-env:
-  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
-
 jobs:
   deploy-and-comment-forked-pr:
     runs-on: ubuntu-latest
@@ -63,8 +60,7 @@ jobs:
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ steps.pr.outputs.result }}" \
             "${{ github.event.workflow_run.head_branch }}" \
-            "starting" \
-            "$(date -u '${{ env.DATE_FORMAT }}')"
+            "starting"
 
       - name: Download and Deploy Storybook
         if: steps.pr.outputs.result != 'null' && github.event.action == 'completed' && github.event.workflow_run.conclusion == 'success'

.github/workflows/ci-tests-storybook.yaml

@@ -24,8 +24,7 @@ jobs:
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
             "${{ github.head_ref }}" \
-            "starting" \
-            "$(date -u '+%m/%d/%Y, %I:%M:%S %p')"
+            "starting"
 
   # Build Storybook for all PRs (free Cloudflare deployment)
   storybook-build:

.github/workflows/ci-tests-unit.yaml

@@ -4,8 +4,10 @@ name: 'CI: Tests Unit'
 on:
   push:
     branches: [main, master, dev*, core/*, desktop/*]
+    paths-ignore: ['**/*.md']
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
+    paths-ignore: ['**/*.md']
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.gitignore

@@ -64,6 +64,7 @@ browser_tests/local/
 dist.zip
 
 /temp/
+/tmp/
 
 # Generated JSON Schemas
 /schemas/

.storybook/preview.ts

@@ -90,7 +90,6 @@ const preview: Preview = {
           { value: 'light', icon: 'sun', title: 'Light' },
           { value: 'dark', icon: 'moon', title: 'Dark' }
         ],
-        showName: true,
         dynamicTitle: true
       }
     }

.stylelintrc.json

@@ -52,7 +52,8 @@
           "reference",
           "plugin",
           "custom-variant",
-          "utility"
+          "utility",
+          "source"
         ]
       }
     ],

AGENTS.md

@@ -37,6 +37,10 @@ See @docs/guidance/\*.md for file-type-specific conventions (auto-loaded by glob
 
 The project uses **Nx** for build orchestration and task management
 
+## Package Manager
+
+This project uses **pnpm**. Always prefer scripts defined in `package.json` (e.g., `pnpm test:unit`, `pnpm lint`). To run arbitrary packages not in scripts, use `pnpx` or `pnpm dlx` — never `npx`.
+
 ## Build, Test, and Development Commands
 
 - `pnpm dev`: Start Vite dev server.

apps/desktop-ui/src/components/common/LanguageSelector.vue

@@ -7,7 +7,7 @@
     option-value="value"
     :disabled="isSwitching"
     :pt="dropdownPt"
-    :size="props.size"
+    :size="size"
     class="language-selector"
     @change="onLocaleChange"
   >
@@ -36,16 +36,10 @@ import { i18n, loadLocale, st } from '@/i18n'
 type VariantKey = 'dark' | 'light'
 type SizeKey = 'small' | 'large'
 
-const props = withDefaults(
-  defineProps<{
-    variant?: VariantKey
-    size?: SizeKey
-  }>(),
-  {
-    variant: 'dark',
-    size: 'small'
-  }
-)
+const { variant = 'dark', size = 'small' } = defineProps<{
+  variant?: VariantKey
+  size?: SizeKey
+}>()
 
 const dropdownId = `language-select-${Math.random().toString(36).slice(2)}`
 
@@ -104,10 +98,8 @@ const VARIANT_PRESETS = {
 const selectedLocale = ref<string>(i18n.global.locale.value)
 const isSwitching = ref(false)
 
-const sizePreset = computed(() => SIZE_PRESETS[props.size as SizeKey])
-const variantPreset = computed(
-  () => VARIANT_PRESETS[props.variant as VariantKey]
-)
+const sizePreset = computed(() => SIZE_PRESETS[size])
+const variantPreset = computed(() => VARIANT_PRESETS[variant])
 
 const dropdownPt = computed(() => ({
   root: {

apps/desktop-ui/src/views/MaintenanceView.stories.ts

@@ -77,7 +77,7 @@ const createMockElectronAPI = () => {
 }
 
 const ensureElectronAPI = () => {
-  const globalWindow = window as unknown as { electronAPI?: unknown }
+  const globalWindow = window as { electronAPI?: unknown }
   if (!globalWindow.electronAPI) {
     globalWindow.electronAPI = createMockElectronAPI()
   }

browser_tests/assets/missing/deprecated_nodes_complex.json

@@ -0,0 +1,205 @@
+{
+  "last_node_id": 7,
+  "last_link_id": 5,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "T2IAdapterLoader",
+      "pos": [100, 100],
+      "size": [300, 80],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "CONTROL_NET",
+          "type": "CONTROL_NET",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "T2IAdapterLoader"
+      },
+      "widgets_values": ["t2iadapter_model.safetensors"]
+    },
+    {
+      "id": 2,
+      "type": "CheckpointLoaderSimple",
+      "pos": [100, 300],
+      "size": [315, 98],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "links": [],
+          "slot_index": 0
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "links": [],
+          "slot_index": 1
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "links": [],
+          "slot_index": 2
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
+    },
+    {
+      "id": 3,
+      "type": "ResizeImagesByLongerEdge",
+      "pos": [500, 100],
+      "size": [300, 80],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [1],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ResizeImagesByLongerEdge"
+      },
+      "widgets_values": [1024]
+    },
+    {
+      "id": 4,
+      "type": "ImageScaleBy",
+      "pos": [500, 280],
+      "size": [300, 80],
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "link": 1
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [2, 3],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ImageScaleBy"
+      },
+      "widgets_values": ["lanczos", 1.5]
+    },
+    {
+      "id": 5,
+      "type": "ImageBatch",
+      "pos": [900, 100],
+      "size": [300, 80],
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image1",
+          "type": "IMAGE",
+          "link": 2
+        },
+        {
+          "name": "image2",
+          "type": "IMAGE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [4],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ImageBatch"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 6,
+      "type": "SaveImage",
+      "pos": [900, 300],
+      "size": [300, 80],
+      "flags": {},
+      "order": 5,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 3
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "SaveImage"
+      },
+      "widgets_values": ["ComfyUI"]
+    },
+    {
+      "id": 7,
+      "type": "PreviewImage",
+      "pos": [1250, 100],
+      "size": [300, 250],
+      "flags": {},
+      "order": 6,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 4
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "PreviewImage"
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [
+    [1, 3, 0, 4, 0, "IMAGE"],
+    [2, 4, 0, 5, 0, "IMAGE"],
+    [3, 4, 0, 6, 0, "IMAGE"],
+    [4, 5, 0, 7, 0, "IMAGE"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/missing/deprecated_nodes_simple.json

@@ -0,0 +1,186 @@
+{
+  "last_node_id": 5,
+  "last_link_id": 2,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "Load3DAnimation",
+      "pos": [100, 100],
+      "size": [300, 100],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "outputs": [
+        {
+          "name": "MESH",
+          "type": "MESH",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "Load3DAnimation"
+      },
+      "widgets_values": ["model.glb"]
+    },
+    {
+      "id": 2,
+      "type": "Preview3DAnimation",
+      "pos": [450, 100],
+      "size": [300, 100],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "mesh",
+          "type": "MESH",
+          "link": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "Preview3DAnimation"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 3,
+      "type": "ConditioningAverage ",
+      "pos": [100, 300],
+      "size": [300, 100],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "conditioning_to",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "conditioning_from",
+          "type": "CONDITIONING",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": [1],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ConditioningAverage "
+      },
+      "widgets_values": [1]
+    },
+    {
+      "id": 4,
+      "type": "SDV_img2vid_Conditioning",
+      "pos": [450, 300],
+      "size": [300, 150],
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "clip_vision",
+          "type": "CLIP_VISION",
+          "link": null
+        },
+        {
+          "name": "init_image",
+          "type": "IMAGE",
+          "link": null
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "links": [],
+          "slot_index": 0
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "links": [],
+          "slot_index": 1
+        },
+        {
+          "name": "latent",
+          "type": "LATENT",
+          "links": [2],
+          "slot_index": 2
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "SDV_img2vid_Conditioning"
+      },
+      "widgets_values": [1024, 576, 14, 127, 25, 0.02]
+    },
+    {
+      "id": 5,
+      "type": "KSampler",
+      "pos": [800, 300],
+      "size": [300, 262],
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": null
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": 1
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": 2
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [42, "fixed", 20, 8, "euler", "normal", 1]
+    }
+  ],
+  "links": [
+    [1, 3, 0, 5, 1, "CONDITIONING"],
+    [2, 4, 2, 5, 3, "LATENT"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/subgraphs/subgraph-duplicate-links.json

@@ -0,0 +1,183 @@
+{
+  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "e5fb1765-aaaa-bbbb-cccc-ddddeeee0001",
+      "pos": [600, 400],
+      "size": [200, 100],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": {},
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "e5fb1765-aaaa-bbbb-cccc-ddddeeee0001",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 2,
+          "lastLinkId": 5,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Subgraph With Duplicate Links",
+        "inputNode": {
+          "id": -10,
+          "bounding": [200, 400, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [900, 400, 120, 60]
+        },
+        "inputs": [],
+        "outputs": [
+          {
+            "id": "out-latent-1",
+            "name": "LATENT",
+            "type": "LATENT",
+            "linkIds": [2],
+            "pos": [920, 420]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "KSampler",
+            "pos": [400, 100],
+            "size": [270, 262],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "name": "model",
+                "type": "MODEL",
+                "link": null
+              },
+              {
+                "name": "positive",
+                "type": "CONDITIONING",
+                "link": null
+              },
+              {
+                "name": "negative",
+                "type": "CONDITIONING",
+                "link": null
+              },
+              {
+                "name": "latent_image",
+                "type": "LATENT",
+                "link": 1
+              }
+            ],
+            "outputs": [
+              {
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": [2]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "KSampler"
+            },
+            "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
+          },
+          {
+            "id": 2,
+            "type": "EmptyLatentImage",
+            "pos": [100, 200],
+            "size": [200, 106],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [
+              {
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": [1, 3, 4, 5]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "EmptyLatentImage"
+            },
+            "widgets_values": [512, 512, 1]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": 2,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 3,
+            "type": "LATENT"
+          },
+          {
+            "id": 2,
+            "origin_id": 1,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "LATENT"
+          },
+          {
+            "id": 3,
+            "origin_id": 2,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 3,
+            "type": "LATENT"
+          },
+          {
+            "id": 4,
+            "origin_id": 2,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 3,
+            "type": "LATENT"
+          },
+          {
+            "id": 5,
+            "origin_id": 2,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 3,
+            "type": "LATENT"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    },
+    "frontendVersion": "1.38.14"
+  },
+  "version": 0.4
+}

browser_tests/assets/subgraphs/subgraph-with-multiple-promoted-previews.json

@@ -0,0 +1,394 @@
+{
+  "id": "43e9499c-2512-43b5-a5a1-2485eb65da32",
+  "revision": 0,
+  "last_node_id": 8,
+  "last_link_id": 10,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "LoadImage",
+      "pos": [170.55728894250745, 515.6401487466619],
+      "size": [282.8166809082031, 363.8333435058594],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [7, 9]
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["example.png", "image"]
+    },
+    {
+      "id": 7,
+      "type": "21dea088-e1b4-47a4-a01f-3d1bf4504001",
+      "pos": [500.2639113468392, 519.9960755960157],
+      "size": [464.95001220703125, 615.8333129882812],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 7
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [10]
+        }
+      ],
+      "properties": {
+        "proxyWidgets": [
+          ["2", "$$canvas-image-preview"],
+          ["4", "$$canvas-image-preview"]
+        ]
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 8,
+      "type": "a7a0350a-af99-4d26-9391-450b4f726206",
+      "pos": [1000.5293620197185, 499.9253405678786],
+      "size": [225, 359.8333435058594],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image1",
+          "type": "IMAGE",
+          "link": 9
+        },
+        {
+          "name": "image2",
+          "type": "IMAGE",
+          "link": 10
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "proxyWidgets": [["6", "$$canvas-image-preview"]]
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [
+    [7, 1, 0, 7, 0, "IMAGE"],
+    [9, 1, 0, 8, 0, "IMAGE"],
+    [10, 7, 0, 8, 1, "IMAGE"]
+  ],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "21dea088-e1b4-47a4-a01f-3d1bf4504001",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 8,
+          "lastLinkId": 10,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "New Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [297.7833638107301, 502.6302057820892, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1052.8175480718996, 502.6302057820892, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "afc8dbc3-12e6-4b3c-9840-9b398d06e6bd",
+            "name": "images",
+            "type": "IMAGE",
+            "linkIds": [1, 2],
+            "localized_name": "images",
+            "pos": [397.7833638107301, 522.6302057820892]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "d0a84974-5f4d-4f4b-b23a-2e7288a9689d",
+            "name": "IMAGE",
+            "type": "IMAGE",
+            "linkIds": [5],
+            "localized_name": "IMAGE",
+            "pos": [1072.8175480718996, 522.6302057820892]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 4,
+            "type": "PreviewImage",
+            "pos": [767.8225773415076, 602.8695134060456],
+            "size": [225, 303.8333435058594],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "images",
+                "name": "images",
+                "type": "IMAGE",
+                "link": 3
+              }
+            ],
+            "outputs": [],
+            "properties": {
+              "Node name for S&R": "PreviewImage"
+            },
+            "widgets_values": []
+          },
+          {
+            "id": 2,
+            "type": "PreviewImage",
+            "pos": [754.9358989867657, 188.55375831225257],
+            "size": [225, 303.8333435058594],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "images",
+                "name": "images",
+                "type": "IMAGE",
+                "link": 1
+              }
+            ],
+            "outputs": [],
+            "properties": {
+              "Node name for S&R": "PreviewImage"
+            },
+            "widgets_values": []
+          },
+          {
+            "id": 3,
+            "type": "ImageInvert",
+            "pos": [477.783932416778, 542.2440719627998],
+            "size": [225, 71.83333587646484],
+            "flags": {
+              "collapsed": false
+            },
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "image",
+                "name": "image",
+                "type": "IMAGE",
+                "link": 2
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "IMAGE",
+                "name": "IMAGE",
+                "type": "IMAGE",
+                "links": [3, 5]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "ImageInvert"
+            },
+            "widgets_values": []
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 3,
+            "origin_id": 3,
+            "origin_slot": 0,
+            "target_id": 4,
+            "target_slot": 0,
+            "type": "IMAGE"
+          },
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 2,
+            "target_slot": 0,
+            "type": "IMAGE"
+          },
+          {
+            "id": 2,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 3,
+            "target_slot": 0,
+            "type": "IMAGE"
+          },
+          {
+            "id": 5,
+            "origin_id": 3,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "IMAGE"
+          }
+        ],
+        "extra": {}
+      },
+      {
+        "id": "a7a0350a-af99-4d26-9391-450b4f726206",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 8,
+          "lastLinkId": 10,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "New Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [973.7423316105073, 561.9744246746379, 120, 80]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1905.487372786412, 581.9744246746379, 120, 40]
+        },
+        "inputs": [
+          {
+            "id": "20ac4159-6814-4d40-a217-ea260152b689",
+            "name": "image1",
+            "type": "IMAGE",
+            "linkIds": [4],
+            "localized_name": "image1",
+            "pos": [1073.7423316105073, 581.9744246746379]
+          },
+          {
+            "id": "c3759a8c-914e-4450-bc41-ca683ffce96b",
+            "name": "image2",
+            "type": "IMAGE",
+            "linkIds": [8],
+            "localized_name": "image2",
+            "shape": 7,
+            "pos": [1073.7423316105073, 601.9744246746379]
+          }
+        ],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 5,
+            "type": "ImageStitch",
+            "pos": [1153.7423085222254, 396.2033931749105],
+            "size": [270, 225.1666717529297],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "image1",
+                "name": "image1",
+                "type": "IMAGE",
+                "link": 4
+              },
+              {
+                "localized_name": "image2",
+                "name": "image2",
+                "shape": 7,
+                "type": "IMAGE",
+                "link": 8
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "IMAGE",
+                "name": "IMAGE",
+                "type": "IMAGE",
+                "links": [6]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "ImageStitch"
+            },
+            "widgets_values": ["right", true, 0, "white"]
+          },
+          {
+            "id": 6,
+            "type": "PreviewImage",
+            "pos": [1620.4874189629757, 529.9122050216333],
+            "size": [225, 307.8333435058594],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "images",
+                "name": "images",
+                "type": "IMAGE",
+                "link": 6
+              }
+            ],
+            "outputs": [],
+            "properties": {
+              "Node name for S&R": "PreviewImage"
+            },
+            "widgets_values": []
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 6,
+            "origin_id": 5,
+            "origin_slot": 0,
+            "target_id": 6,
+            "target_slot": 0,
+            "type": "IMAGE"
+          },
+          {
+            "id": 4,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 5,
+            "target_slot": 0,
+            "type": "IMAGE"
+          },
+          {
+            "id": 8,
+            "origin_id": -10,
+            "origin_slot": 1,
+            "target_id": 5,
+            "target_slot": 1,
+            "type": "IMAGE"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 0.7269777827561446,
+      "offset": [-35.273237658266034, -55.17394203309256]
+    },
+    "frontendVersion": "1.40.8"
+  },
+  "version": 0.4
+}

browser_tests/assets/subgraphs/subgraph-with-preview-node.json

@@ -0,0 +1,170 @@
+{
+  "id": "preview-subgraph-test-001",
+  "revision": 0,
+  "last_node_id": 11,
+  "last_link_id": 2,
+  "nodes": [
+    {
+      "id": 5,
+      "type": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
+      "pos": [318.6320139868054, 212.9091015141833],
+      "size": [225, 368],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 2
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "proxyWidgets": [
+          ["10", "filename_prefix"],
+          ["10", "$$canvas-image-preview"]
+        ],
+        "cnr_id": "comfy-core",
+        "ver": "0.13.0",
+        "ue_properties": {
+          "widget_ue_connectable": {},
+          "version": "7.6.2",
+          "input_ue_unconnectable": {}
+        }
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 11,
+      "type": "LoadImage",
+      "pos": [-0.5080003681592018, 211.3051121416672],
+      "size": [282.8333435058594, 364],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [2]
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "ue_properties": {
+          "widget_ue_connectable": {},
+          "input_ue_unconnectable": {}
+        },
+        "cnr_id": "comfy-core",
+        "ver": "0.13.0",
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["example.png", "image"]
+    }
+  ],
+  "links": [[2, 11, 0, 5, 0, "IMAGE"]],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 11,
+          "lastLinkId": 2,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "New Subgraph",
+        "inputNode": {
+          "id": -10,
+          "bounding": [300, 350, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [900, 350, 120, 40]
+        },
+        "inputs": [
+          {
+            "id": "img-slot-001",
+            "name": "images",
+            "type": "IMAGE",
+            "linkIds": [1],
+            "pos": [400, 370]
+          }
+        ],
+        "outputs": [],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 10,
+            "type": "SaveImage",
+            "pos": [500.0046924937855, 300.0146992076527],
+            "size": [315, 340],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "images",
+                "name": "images",
+                "type": "IMAGE",
+                "link": 1
+              }
+            ],
+            "outputs": [],
+            "properties": {
+              "cnr_id": "comfy-core",
+              "ver": "0.13.0",
+              "Node name for S&R": "SaveImage",
+              "ue_properties": {
+                "widget_ue_connectable": {},
+                "version": "7.6.2",
+                "input_ue_unconnectable": {}
+              }
+            },
+            "widgets_values": ["ComfyUI"]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 10,
+            "target_slot": 0,
+            "type": "IMAGE"
+          }
+        ],
+        "extra": {
+          "ue_links": [],
+          "links_added_by_ue": []
+        }
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1.1819400303977265,
+      "offset": [81.66005130613983, -19.028558221588725]
+    },
+    "frontendVersion": "1.40.3",
+    "ue_links": [],
+    "links_added_by_ue": [],
+    "VHS_latentpreview": false,
+    "VHS_latentpreviewrate": 0,
+    "VHS_MetadataImage": true,
+    "VHS_KeepIntermediate": true
+  },
+  "version": 0.4
+}

browser_tests/assets/widgets/save_image_and_animated_webp.json

@@ -0,0 +1,86 @@
+{
+  "id": "save-image-and-webm-test",
+  "revision": 0,
+  "last_node_id": 12,
+  "last_link_id": 2,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "LoadImage",
+      "pos": [50, 100],
+      "size": [315, 314],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [1, 2]
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["example.png", "image"]
+    },
+    {
+      "id": 11,
+      "type": "SaveImage",
+      "pos": [450, 100],
+      "size": [210, 270],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 1
+        }
+      ],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": ["ComfyUI"]
+    },
+    {
+      "id": 12,
+      "type": "SaveWEBM",
+      "pos": [450, 450],
+      "size": [210, 368],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "images",
+          "type": "IMAGE",
+          "link": 2
+        }
+      ],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": ["ComfyUI", "vp9", 6, 32]
+    }
+  ],
+  "links": [
+    [1, 10, 0, 11, 0, "IMAGE"],
+    [2, 10, 0, 12, 0, "IMAGE"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "frontendVersion": "1.17.0",
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/fixtures/ComfyPage.ts

@@ -14,6 +14,7 @@ import { ComfyTemplates } from '../helpers/templates'
 import { ComfyMouse } from './ComfyMouse'
 import { VueNodeHelpers } from './VueNodeHelpers'
 import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
+import { ComfyNodeSearchBoxV2 } from './components/ComfyNodeSearchBoxV2'
 import { ContextMenu } from './components/ContextMenu'
 import { SettingDialog } from './components/SettingDialog'
 import { BottomPanel } from './components/BottomPanel'
@@ -25,7 +26,6 @@ import { Topbar } from './components/Topbar'
 import { CanvasHelper } from './helpers/CanvasHelper'
 import { ClipboardHelper } from './helpers/ClipboardHelper'
 import { CommandHelper } from './helpers/CommandHelper'
-import { DebugHelper } from './helpers/DebugHelper'
 import { DragDropHelper } from './helpers/DragDropHelper'
 import { KeyboardHelper } from './helpers/KeyboardHelper'
 import { NodeOperationsHelper } from './helpers/NodeOperationsHelper'
@@ -166,13 +166,13 @@ export class ComfyPage {
 
   // Components
   public readonly searchBox: ComfyNodeSearchBox
+  public readonly searchBoxV2: ComfyNodeSearchBoxV2
   public readonly menu: ComfyMenu
   public readonly actionbar: ComfyActionbar
   public readonly templates: ComfyTemplates
   public readonly settingDialog: SettingDialog
   public readonly confirmDialog: ConfirmDialog
   public readonly vueNodes: VueNodeHelpers
-  public readonly debug: DebugHelper
   public readonly subgraph: SubgraphHelper
   public readonly canvasOps: CanvasHelper
   public readonly nodeOps: NodeOperationsHelper
@@ -210,13 +210,13 @@ export class ComfyPage {
     this.workflowUploadInput = page.locator('#comfy-file-input')
 
     this.searchBox = new ComfyNodeSearchBox(page)
+    this.searchBoxV2 = new ComfyNodeSearchBoxV2(page)
     this.menu = new ComfyMenu(page)
     this.actionbar = new ComfyActionbar(page)
     this.templates = new ComfyTemplates(page)
     this.settingDialog = new SettingDialog(page, this)
     this.confirmDialog = new ConfirmDialog(page)
     this.vueNodes = new VueNodeHelpers(page)
-    this.debug = new DebugHelper(page, this.canvas)
     this.subgraph = new SubgraphHelper(this)
     this.canvasOps = new CanvasHelper(page, this.canvas, this.resetViewButton)
     this.nodeOps = new NodeOperationsHelper(this)

browser_tests/fixtures/components/ComfyNodeSearchBoxV2.ts

@@ -0,0 +1,29 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { ComfyPage } from '../ComfyPage'
+
+export class ComfyNodeSearchBoxV2 {
+  readonly dialog: Locator
+  readonly input: Locator
+  readonly results: Locator
+  readonly filterOptions: Locator
+
+  constructor(readonly page: Page) {
+    this.dialog = page.getByRole('search')
+    this.input = this.dialog.locator('input[type="text"]')
+    this.results = this.dialog.getByTestId('result-item')
+    this.filterOptions = this.dialog.getByTestId('filter-option')
+  }
+
+  categoryButton(categoryId: string): Locator {
+    return this.dialog.getByTestId(`category-${categoryId}`)
+  }
+
+  filterBarButton(name: string): Locator {
+    return this.dialog.getByRole('button', { name })
+  }
+
+  async reload(comfyPage: ComfyPage) {
+    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+  }
+}

browser_tests/fixtures/helpers/CommandHelper.ts

@@ -11,7 +11,10 @@ export class CommandHelper {
   ): Promise<void> {
     await this.page.evaluate(
       ({ commandId, metadata }) => {
-        return window['app'].extensionManager.command.execute(commandId, {
+        const app = window.app
+        if (!app) throw new Error('window.app is not available')
+
+        return app.extensionManager.command.execute(commandId, {
           metadata
         })
       },

browser_tests/fixtures/helpers/DebugHelper.ts

@@ -1,167 +0,0 @@
-import type { Locator, Page, TestInfo } from '@playwright/test'
-
-import type { Position } from '../types'
-
-export interface DebugScreenshotOptions {
-  fullPage?: boolean
-  element?: 'canvas' | 'page'
-  markers?: Array<{ position: Position; id?: string }>
-}
-
-export class DebugHelper {
-  constructor(
-    private page: Page,
-    private canvas: Locator
-  ) {}
-
-  async addMarker(
-    position: Position,
-    id: string = 'debug-marker'
-  ): Promise<void> {
-    await this.page.evaluate(
-      ([pos, markerId]) => {
-        const existing = document.getElementById(markerId)
-        if (existing) existing.remove()
-
-        const marker = document.createElement('div')
-        marker.id = markerId
-        marker.style.position = 'fixed'
-        marker.style.left = `${pos.x - 10}px`
-        marker.style.top = `${pos.y - 10}px`
-        marker.style.width = '20px'
-        marker.style.height = '20px'
-        marker.style.border = '2px solid red'
-        marker.style.borderRadius = '50%'
-        marker.style.backgroundColor = 'rgba(255, 0, 0, 0.3)'
-        marker.style.pointerEvents = 'none'
-        marker.style.zIndex = '10000'
-        document.body.appendChild(marker)
-      },
-      [position, id] as const
-    )
-  }
-
-  async removeMarkers(): Promise<void> {
-    await this.page.evaluate(() => {
-      document
-        .querySelectorAll('[id^="debug-marker"]')
-        .forEach((el) => el.remove())
-    })
-  }
-
-  async attachScreenshot(
-    testInfo: TestInfo,
-    name: string,
-    options?: DebugScreenshotOptions
-  ): Promise<void> {
-    if (options?.markers) {
-      for (const marker of options.markers) {
-        await this.addMarker(marker.position, marker.id)
-      }
-    }
-
-    let screenshot: Buffer
-    const targetElement = options?.element || 'page'
-
-    if (targetElement === 'canvas') {
-      screenshot = await this.canvas.screenshot()
-    } else if (options?.fullPage) {
-      screenshot = await this.page.screenshot({ fullPage: true })
-    } else {
-      screenshot = await this.page.screenshot()
-    }
-
-    await testInfo.attach(name, {
-      body: screenshot,
-      contentType: 'image/png'
-    })
-
-    if (options?.markers) {
-      await this.removeMarkers()
-    }
-  }
-
-  async saveCanvasScreenshot(filename: string): Promise<void> {
-    await this.page.evaluate(async (filename) => {
-      const canvas = document.getElementById(
-        'graph-canvas'
-      ) as HTMLCanvasElement
-      if (!canvas) {
-        throw new Error('Canvas not found')
-      }
-
-      return new Promise<void>((resolve) => {
-        canvas.toBlob(async (blob) => {
-          if (!blob) {
-            throw new Error('Failed to create blob from canvas')
-          }
-
-          const url = URL.createObjectURL(blob)
-          const a = document.createElement('a')
-          a.href = url
-          a.download = filename
-          document.body.appendChild(a)
-          a.click()
-          document.body.removeChild(a)
-          URL.revokeObjectURL(url)
-          resolve()
-        }, 'image/png')
-      })
-    }, filename)
-  }
-
-  async getCanvasDataURL(): Promise<string> {
-    return await this.page.evaluate(() => {
-      const canvas = document.getElementById(
-        'graph-canvas'
-      ) as HTMLCanvasElement
-      if (!canvas) {
-        throw new Error('Canvas not found')
-      }
-      return canvas.toDataURL('image/png')
-    })
-  }
-
-  async showCanvasOverlay(): Promise<void> {
-    await this.page.evaluate(() => {
-      const canvas = document.getElementById(
-        'graph-canvas'
-      ) as HTMLCanvasElement
-      if (!canvas) {
-        throw new Error('Canvas not found')
-      }
-
-      const existingOverlay = document.getElementById('debug-canvas-overlay')
-      if (existingOverlay) {
-        existingOverlay.remove()
-      }
-
-      const overlay = document.createElement('div')
-      overlay.id = 'debug-canvas-overlay'
-      overlay.style.position = 'fixed'
-      overlay.style.top = '0'
-      overlay.style.left = '0'
-      overlay.style.zIndex = '9999'
-      overlay.style.backgroundColor = 'white'
-      overlay.style.padding = '10px'
-      overlay.style.border = '2px solid red'
-
-      const img = document.createElement('img')
-      img.src = canvas.toDataURL('image/png')
-      img.style.maxWidth = '800px'
-      img.style.maxHeight = '600px'
-      overlay.appendChild(img)
-
-      document.body.appendChild(overlay)
-    })
-  }
-
-  async hideCanvasOverlay(): Promise<void> {
-    await this.page.evaluate(() => {
-      const overlay = document.getElementById('debug-canvas-overlay')
-      if (overlay) {
-        overlay.remove()
-      }
-    })
-  }
-}

browser_tests/fixtures/helpers/DragDropHelper.ts

@@ -115,6 +115,16 @@ export class DragDropHelper {
       const dragOverEvent = new DragEvent('dragover', eventOptions)
       const dropEvent = new DragEvent('drop', eventOptions)
 
+      const graphCanvasElement = document.querySelector('#graph-canvas')
+
+      // Keep Litegraph's drag-over node tracking in sync when the drop target is a
+      // Vue node DOM overlay outside of the graph canvas element.
+      if (graphCanvasElement && !graphCanvasElement.contains(targetElement)) {
+        graphCanvasElement.dispatchEvent(
+          new DragEvent('dragover', eventOptions)
+        )
+      }
+
       Object.defineProperty(dropEvent, 'preventDefault', {
         value: () => {},
         writable: false

browser_tests/fixtures/helpers/NodeOperationsHelper.ts

@@ -33,6 +33,10 @@ export class NodeOperationsHelper {
     })
   }
 
+  async getNodeCount(): Promise<number> {
+    return await this.page.evaluate(() => window.app!.graph.nodes.length)
+  }
+
   async getNodes(): Promise<LGraphNode[]> {
     return await this.page.evaluate(() => {
       return window.app!.graph.nodes

browser_tests/fixtures/helpers/SubgraphHelper.ts

@@ -36,7 +36,7 @@ export class SubgraphHelper {
         const currentGraph = app.canvas!.graph!
 
         // Check if we're in a subgraph
-        if (currentGraph.constructor.name !== 'Subgraph') {
+        if (!('inputNode' in currentGraph)) {
           throw new Error(
             'Not in a subgraph - this method only works inside subgraphs'
           )
@@ -88,7 +88,7 @@ export class SubgraphHelper {
 
             if (node.onPointerDown) {
               node.onPointerDown(
-                event as unknown as CanvasPointerEvent,
+                event as Partial<CanvasPointerEvent> as CanvasPointerEvent,
                 app.canvas.pointer,
                 app.canvas.linkConnector
               )
@@ -121,7 +121,7 @@ export class SubgraphHelper {
 
           if (node.onPointerDown) {
             node.onPointerDown(
-              event as unknown as CanvasPointerEvent,
+              event as Partial<CanvasPointerEvent> as CanvasPointerEvent,
               app.canvas.pointer,
               app.canvas.linkConnector
             )
@@ -129,7 +129,7 @@ export class SubgraphHelper {
             // Trigger double-click
             if (app.canvas.pointer.onDoubleClick) {
               app.canvas.pointer.onDoubleClick(
-                event as unknown as CanvasPointerEvent
+                event as Partial<CanvasPointerEvent> as CanvasPointerEvent
               )
             }
           }

browser_tests/fixtures/selectors.ts

@@ -27,6 +27,7 @@ export const TestIds = {
     settingsContainer: 'settings-container',
     settingsTabAbout: 'settings-tab-about',
     confirm: 'confirm-dialog',
+    missingNodes: 'missing-nodes-warning',
     about: 'about-panel',
     whatsNewSection: 'whats-new-section'
   },
@@ -46,8 +47,12 @@ export const TestIds = {
   widgets: {
     decrement: 'decrement',
     increment: 'increment',
+    domWidgetTextarea: 'dom-widget-textarea',
     subgraphEnterButton: 'subgraph-enter-button'
   },
+  breadcrumb: {
+    subgraph: 'subgraph-breadcrumb'
+  },
   templates: {
     content: 'template-workflows-content',
     workflowCard: (id: string) => `template-workflow-${id}`
@@ -70,6 +75,7 @@ export type TestIdValue =
   | (typeof TestIds.propertiesPanel)[keyof typeof TestIds.propertiesPanel]
   | (typeof TestIds.node)[keyof typeof TestIds.node]
   | (typeof TestIds.widgets)[keyof typeof TestIds.widgets]
+  | (typeof TestIds.breadcrumb)[keyof typeof TestIds.breadcrumb]
   | Exclude<
       (typeof TestIds.templates)[keyof typeof TestIds.templates],
       (id: string) => string

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -128,7 +128,8 @@ class NodeSlotReference {
             nodeSize: [node.size[0], node.size[1]],
             rawConnectionPos: [rawPos[0], rawPos[1]],
             convertedPos: [convertedPos[0], convertedPos[1]],
-            currentGraphType: window.app!.canvas.graph!.constructor.name
+            currentGraphType:
+              'inputNode' in window.app!.canvas.graph! ? 'Subgraph' : 'LGraph'
           }
         )
 
@@ -461,18 +462,44 @@ export class NodeReference {
     // Try multiple positions to avoid DOM widget interference
     const clickPositions = [
       { x: nodePos.x + nodeSize.width / 2, y: nodePos.y + titleHeight + 5 },
-      { x: nodePos.x + nodeSize.width / 2, y: nodePos.y + nodeSize.height / 2 },
+      {
+        x: nodePos.x + nodeSize.width / 2,
+        y: nodePos.y + nodeSize.height / 2
+      },
       { x: nodePos.x + 20, y: nodePos.y + titleHeight + 5 }
     ]
 
+    // Click the enter_subgraph title button (top-right of title bar).
+    // This is more reliable than dblclick on the node body because
+    // promoted DOM widgets can overlay the body and intercept events.
+    const subgraphButtonPos = {
+      x: nodePos.x + nodeSize.width - 15,
+      y: nodePos.y - titleHeight / 2
+    }
+
     const checkIsInSubgraph = async () => {
       return this.comfyPage.page.evaluate(() => {
         const graph = window.app!.canvas.graph
-        return graph?.constructor?.name === 'Subgraph'
+        return !!graph && 'inputNode' in graph
       })
     }
 
     await expect(async () => {
+      // Try just clicking the enter button first
+      await this.comfyPage.canvas.click({
+        position: { x: 250, y: 250 },
+        force: true
+      })
+      await this.comfyPage.nextFrame()
+
+      await this.comfyPage.canvas.click({
+        position: subgraphButtonPos,
+        force: true
+      })
+      await this.comfyPage.nextFrame()
+
+      if (await checkIsInSubgraph()) return
+
       for (const position of clickPositions) {
         // Clear any selection first
         await this.comfyPage.canvas.click({

browser_tests/fixtures/ws.ts

@@ -1,9 +1,5 @@
 import { test as base } from '@playwright/test'
 
-interface TestWindow extends Window {
-  __ws__?: Record<string, WebSocket>
-}
-
 export const webSocketFixture = base.extend<{
   ws: { trigger(data: unknown, url?: string): Promise<void> }
 }>({

browser_tests/helpers/promotedWidgets.ts

@@ -0,0 +1,64 @@
+import type { ComfyPage } from '../fixtures/ComfyPage'
+
+export type PromotedWidgetEntry = [string, string]
+
+export function isPromotedWidgetEntry(
+  entry: unknown
+): entry is PromotedWidgetEntry {
+  return (
+    Array.isArray(entry) &&
+    entry.length === 2 &&
+    typeof entry[0] === 'string' &&
+    typeof entry[1] === 'string'
+  )
+}
+
+export 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 raw = await comfyPage.page.evaluate((id) => {
+    const node = window.app!.canvas.graph!.getNodeById(id)
+    return node?.properties?.proxyWidgets ?? []
+  }, nodeId)
+
+  return normalizePromotedWidgets(raw)
+}
+
+export async function getPromotedWidgetNames(
+  comfyPage: ComfyPage,
+  nodeId: string
+): Promise<string[]> {
+  const promotedWidgets = await getPromotedWidgets(comfyPage, nodeId)
+  return promotedWidgets.map(([, widgetName]) => widgetName)
+}
+
+export async function getPromotedWidgetCount(
+  comfyPage: ComfyPage,
+  nodeId: string
+): Promise<number> {
+  const promotedWidgets = await getPromotedWidgets(comfyPage, nodeId)
+  return promotedWidgets.length
+}
+
+export async function getPromotedWidgetCountByName(
+  comfyPage: ComfyPage,
+  nodeId: string,
+  widgetName: string
+): Promise<number> {
+  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
+  )
+}

browser_tests/tests/browserTabTitle.spec.ts

@@ -14,7 +14,9 @@ test.describe('Browser tab title', { tag: '@smoke' }, () => {
         return (window.app!.extensionManager as WorkspaceStore).workflow
           .activeWorkflow?.filename
       })
-      expect(await comfyPage.page.title()).toBe(`*${workflowName} - ComfyUI`)
+      await expect
+        .poll(() => comfyPage.page.title())
+        .toBe(`*${workflowName} - ComfyUI`)
     })
 
     // Failing on CI
@@ -51,7 +53,7 @@ test.describe('Browser tab title', { tag: '@smoke' }, () => {
     })
 
     test('Can display default title', async ({ comfyPage }) => {
-      expect(await comfyPage.page.title()).toBe('ComfyUI')
+      await expect.poll(() => comfyPage.page.title()).toBe('ComfyUI')
     })
   })
 })

browser_tests/tests/changeTracker.spec.ts

@@ -160,12 +160,12 @@ test.describe('Change Tracker', { tag: '@workflow' }, () => {
     })
     // Click empty space to trigger a change detection.
     await comfyPage.canvasOps.clickEmptySpace()
-    expect(await comfyPage.workflow.getUndoQueueSize()).toBe(1)
+    await expect.poll(() => comfyPage.workflow.getUndoQueueSize()).toBe(1)
   })
 
   test('Ignores changes in workflow.ds', async ({ comfyPage }) => {
     expect(await comfyPage.workflow.getUndoQueueSize()).toBe(0)
     await comfyPage.canvasOps.pan({ x: 10, y: 10 })
-    expect(await comfyPage.workflow.getUndoQueueSize()).toBe(0)
+    await expect.poll(() => comfyPage.workflow.getUndoQueueSize()).toBe(0)
   })
 })

browser_tests/tests/colorPalette.spec.ts

@@ -244,24 +244,19 @@ test.describe(
       await comfyPage.settings.setSetting('Comfy.Node.Opacity', 0.5)
       await comfyPage.settings.setSetting('Comfy.ColorPalette', 'light')
       await comfyPage.nextFrame()
-      const parsed = await (
-        await comfyPage.page.waitForFunction(
-          () => {
-            const workflow = localStorage.getItem('workflow')
-            if (!workflow) return null
-            try {
-              const data = JSON.parse(workflow)
-              return Array.isArray(data?.nodes) ? data : null
-            } catch {
-              return null
-            }
-          },
-          { timeout: 3000 }
-        )
-      ).jsonValue()
+      const parsed = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.graph!
+        if (typeof graph.serialize !== 'function') {
+          throw new Error('app.graph.serialize is not available')
+        }
+        return graph.serialize() as {
+          nodes: Array<{ bgcolor?: string; color?: string }>
+        }
+      })
       expect(parsed.nodes).toBeDefined()
       expect(Array.isArray(parsed.nodes)).toBe(true)
-      for (const node of parsed.nodes) {
+      const nodes = parsed.nodes
+      for (const node of nodes) {
         if (node.bgcolor) expect(node.bgcolor).not.toMatch(/hsla/)
         if (node.color) expect(node.color).not.toMatch(/hsla/)
       }

browser_tests/tests/confirmDialogTextWrap.spec.ts

@@ -0,0 +1,32 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Confirm dialog text wrapping', { tag: ['@mobile'] }, () => {
+  test('@mobile confirm dialog buttons are visible with long unbreakable text', async ({
+    comfyPage
+  }) => {
+    const longFilename = 'workflow_checkpoint_' + 'a'.repeat(200) + '.json'
+
+    await comfyPage.page.evaluate((msg) => {
+      window
+        .app!.extensionManager.dialog.confirm({
+          title: 'Confirm',
+          type: 'default',
+          message: msg
+        })
+        .catch(() => {})
+    }, longFilename)
+
+    const dialog = comfyPage.page.getByRole('dialog')
+    await expect(dialog).toBeVisible()
+
+    const confirmButton = dialog.getByRole('button', { name: 'Confirm' })
+    await expect(confirmButton).toBeVisible()
+    await expect(confirmButton).toBeInViewport()
+
+    const cancelButton = dialog.getByRole('button', { name: 'Cancel' })
+    await expect(cancelButton).toBeVisible()
+    await expect(cancelButton).toBeInViewport()
+  })
+})

browser_tests/tests/dialog.spec.ts

@@ -4,6 +4,7 @@ import { expect } from '@playwright/test'
 import type { Keybinding } from '../../src/platform/keybindings/types'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import { DefaultGraphPositions } from '../fixtures/constants/defaultGraphPositions'
+import { TestIds } from '../fixtures/selectors'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -15,8 +16,9 @@ test.describe('Load workflow warning', { tag: '@ui' }, () => {
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
 
-    // Wait for the element with the .comfy-missing-nodes selector to be visible
-    const missingNodesWarning = comfyPage.page.locator('.comfy-missing-nodes')
+    const missingNodesWarning = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingNodes
+    )
     await expect(missingNodesWarning).toBeVisible()
   })
 
@@ -25,8 +27,9 @@ test.describe('Load workflow warning', { tag: '@ui' }, () => {
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_nodes_in_subgraph')
 
-    // Wait for the element with the .comfy-missing-nodes selector to be visible
-    const missingNodesWarning = comfyPage.page.locator('.comfy-missing-nodes')
+    const missingNodesWarning = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingNodes
+    )
     await expect(missingNodesWarning).toBeVisible()
 
     // Verify the missing node text includes subgraph context
@@ -37,14 +40,15 @@ test.describe('Load workflow warning', { tag: '@ui' }, () => {
 })
 
 test('Does not report warning on undo/redo', async ({ comfyPage }) => {
-  await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+  await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'v1 (legacy)')
+  const missingNodesWarning = comfyPage.page.getByTestId(
+    TestIds.dialogs.missingNodes
+  )
 
   await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
-  await comfyPage.page
-    .locator('.p-dialog')
-    .getByRole('button', { name: 'Close' })
-    .click({ force: true })
-  await comfyPage.page.locator('.p-dialog').waitFor({ state: 'hidden' })
+  await expect(missingNodesWarning).toBeVisible()
+  await comfyPage.page.keyboard.press('Escape')
+  await expect(missingNodesWarning).not.toBeVisible()
 
   // Wait for any async operations to complete after dialog closes
   await comfyPage.nextFrame()
@@ -55,22 +59,32 @@ test('Does not report warning on undo/redo', async ({ comfyPage }) => {
 
   // Undo and redo the change
   await comfyPage.keyboard.undo()
-  await expect(comfyPage.page.locator('.comfy-missing-nodes')).not.toBeVisible()
+  await expect(async () => {
+    await expect(missingNodesWarning).not.toBeVisible()
+  }).toPass({ timeout: 5000 })
+
   await comfyPage.keyboard.redo()
-  await expect(comfyPage.page.locator('.comfy-missing-nodes')).not.toBeVisible()
+  await expect(async () => {
+    await expect(missingNodesWarning).not.toBeVisible()
+  }).toPass({ timeout: 5000 })
 })
 
 test.describe('Execution error', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setup()
+  })
+
   test('Should display an error message when an execution error occurs', async ({
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('nodes/execution_error')
-    await comfyPage.queueButton.click()
+    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
     await comfyPage.nextFrame()
 
-    // Wait for the element with the .comfy-execution-error selector to be visible
-    const executionError = comfyPage.page.locator('.comfy-error-report')
-    await expect(executionError).toBeVisible()
+    // Wait for the error overlay to be visible
+    const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    await expect(errorOverlay).toBeVisible()
   })
 })
 
@@ -340,17 +354,23 @@ test.describe('Support', () => {
     comfyPage
   }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    const pagePromise = comfyPage.page.context().waitForEvent('page')
+
+    // Prevent loading the external page
+    await comfyPage.page
+      .context()
+      .route('https://support.comfy.org/**', (route) =>
+        route.fulfill({ body: '<html></html>', contentType: 'text/html' })
+      )
+
+    const popupPromise = comfyPage.page.waitForEvent('popup')
     await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Support'])
-    const newPage = await pagePromise
+    const popup = await popupPromise
 
-    await newPage.waitForLoadState('networkidle')
-    await expect(newPage).toHaveURL(/.*support\.comfy\.org.*/)
-
-    const url = new URL(newPage.url())
+    const url = new URL(popup.url())
+    expect(url.hostname).toBe('support.comfy.org')
     expect(url.searchParams.get('tf_42243568391700')).toBe('oss')
 
-    await newPage.close()
+    await popup.close()
   })
 })
 
@@ -390,7 +410,7 @@ test.describe('Signin dialog', () => {
   test('Paste content to signin dialog should not paste node on canvas', async ({
     comfyPage
   }) => {
-    const nodeNum = (await comfyPage.nodeOps.getNodes()).length
+    const nodeNum = await comfyPage.nodeOps.getNodeCount()
     await comfyPage.canvas.click({
       position: DefaultGraphPositions.emptyLatentWidgetClick
     })
@@ -413,6 +433,6 @@ test.describe('Signin dialog', () => {
     await input.press('Control+v')
     await expect(input).toHaveValue('test_password')
 
-    expect(await comfyPage.nodeOps.getNodes()).toHaveLength(nodeNum)
+    expect(await comfyPage.nodeOps.getNodeCount()).toBe(nodeNum)
   })
 })

browser_tests/tests/execution.spec.ts

@@ -7,22 +7,29 @@ test.beforeEach(async ({ comfyPage }) => {
 })
 
 test.describe('Execution', { tag: ['@smoke', '@workflow'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setup()
+  })
+
   test(
     'Report error on unconnected slot',
     { tag: '@screenshot' },
     async ({ comfyPage }) => {
       await comfyPage.canvasOps.disconnectEdge()
-      await comfyPage.canvasOps.clickEmptySpace()
+      await comfyPage.page.keyboard.press('Escape')
 
       await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-      await expect(comfyPage.page.locator('.comfy-error-report')).toBeVisible()
+      await expect(
+        comfyPage.page.locator('[data-testid="error-overlay"]')
+      ).toBeVisible()
       await comfyPage.page
-        .locator('.p-dialog')
-        .getByRole('button', { name: 'Close' })
+        .locator('[data-testid="error-overlay"]')
+        .getByRole('button', { name: 'Dismiss' })
         .click()
-      await comfyPage.page.locator('.comfy-error-report').waitFor({
-        state: 'hidden'
-      })
+      await comfyPage.page
+        .locator('[data-testid="error-overlay"]')
+        .waitFor({ state: 'hidden' })
       await expect(comfyPage.canvas).toHaveScreenshot(
         'execution-error-unconnected-slot.png'
       )

browser_tests/tests/featureFlags.spec.ts

@@ -37,12 +37,9 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
 
       // Monitor for server feature flags
       const checkInterval = setInterval(() => {
-        if (
-          window.app?.api?.serverFeatureFlags &&
-          Object.keys(window.app.api.serverFeatureFlags).length > 0
-        ) {
-          window.__capturedMessages!.serverFeatureFlags =
-            window.app.api.serverFeatureFlags
+        const flags = window.app?.api?.serverFeatureFlags?.value
+        if (flags && Object.keys(flags).length > 0) {
+          window.__capturedMessages!.serverFeatureFlags = flags
           clearInterval(checkInterval)
         }
       }, 100)
@@ -96,7 +93,7 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
   }) => {
     // Get the actual server feature flags from the backend
     const serverFlags = await comfyPage.page.evaluate(() => {
-      return window.app!.api.serverFeatureFlags
+      return window.app!.api.serverFeatureFlags.value
     })
 
     // Verify we received real feature flags from the backend
@@ -129,8 +126,8 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
     // Test that the method only returns true for boolean true values
     const testResults = await comfyPage.page.evaluate(() => {
       // Temporarily modify serverFeatureFlags to test behavior
-      const original = window.app!.api.serverFeatureFlags
-      window.app!.api.serverFeatureFlags = {
+      const original = window.app!.api.serverFeatureFlags.value
+      window.app!.api.serverFeatureFlags.value = {
         bool_true: true,
         bool_false: false,
         string_value: 'yes',
@@ -147,7 +144,7 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
       }
 
       // Restore original
-      window.app!.api.serverFeatureFlags = original
+      window.app!.api.serverFeatureFlags.value = original
       return results
     })
 
@@ -282,8 +279,8 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
       // Monitor when feature flags arrive by checking periodically
       const checkFeatureFlags = setInterval(() => {
         if (
-          window.app?.api?.serverFeatureFlags?.supports_preview_metadata !==
-          undefined
+          window.app?.api?.serverFeatureFlags?.value
+            ?.supports_preview_metadata !== undefined
         ) {
           window.__appReadiness!.featureFlagsReceived = true
           clearInterval(checkFeatureFlags)
@@ -320,8 +317,8 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
     // Wait for feature flags to be received
     await newPage.waitForFunction(
       () =>
-        window.app?.api?.serverFeatureFlags?.supports_preview_metadata !==
-        undefined,
+        window.app?.api?.serverFeatureFlags?.value
+          ?.supports_preview_metadata !== undefined,
       {
         timeout: 10000
       }
@@ -331,7 +328,7 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
     const readiness = await newPage.evaluate(() => {
       return {
         ...window.__appReadiness,
-        currentFlags: window.app!.api.serverFeatureFlags
+        currentFlags: window.app!.api.serverFeatureFlags.value
       }
     })
 

browser_tests/tests/groupNode.spec.ts

@@ -10,6 +10,8 @@ import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+  await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
+  await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'v1 (legacy)')
 })
 
 test.describe('Group Node', { tag: '@node' }, () => {

browser_tests/tests/interaction.spec.ts

@@ -13,6 +13,9 @@ import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+  // Wait for the legacy menu to appear and canvas to settle after layout shift.
+  await comfyPage.page.locator('.comfy-menu').waitFor({ state: 'visible' })
+  await comfyPage.nextFrame()
 })
 
 test.describe('Item Interaction', { tag: ['@screenshot', '@node'] }, () => {
@@ -733,6 +736,25 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
     await expect(comfyPage.canvas).toHaveScreenshot(
       'single_ksampler_modified.png'
     )
+    // Wait for V2 persistence debounce to save the modified workflow
+    const start = Date.now()
+    await comfyPage.page.waitForFunction((since) => {
+      for (let i = 0; i < window.localStorage.length; i++) {
+        const key = window.localStorage.key(i)
+        if (!key?.startsWith('Comfy.Workflow.DraftIndex.v2:')) continue
+        const json = window.localStorage.getItem(key)
+        if (!json) continue
+        try {
+          const index = JSON.parse(json)
+          if (typeof index.updatedAt === 'number' && index.updatedAt >= since) {
+            return true
+          }
+        } catch {
+          // ignore
+        }
+      }
+      return false
+    }, start)
     await comfyPage.setup({ clearStorage: false })
     await expect(comfyPage.canvas).toHaveScreenshot(
       'single_ksampler_modified.png'
@@ -755,10 +777,17 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
       await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
       await comfyPage.menu.topbar.saveWorkflow(workflowB)
 
-      // Wait for localStorage to persist the workflow paths before reloading
-      await comfyPage.page.waitForFunction(
-        () => !!window.localStorage.getItem('Comfy.OpenWorkflowsPaths')
-      )
+      // Wait for sessionStorage to persist the workflow paths before reloading
+      // V2 persistence uses sessionStorage with client-scoped keys
+      await comfyPage.page.waitForFunction(() => {
+        for (let i = 0; i < window.sessionStorage.length; i++) {
+          const key = window.sessionStorage.key(i)
+          if (key?.startsWith('Comfy.Workflow.OpenPaths:')) {
+            return true
+          }
+        }
+        return false
+      })
       await comfyPage.setup({ clearStorage: false })
     })
 

browser_tests/tests/menu.spec.ts

@@ -203,19 +203,19 @@ test.describe('Menu', { tag: '@ui' }, () => {
       await topbar.switchTheme('light')
 
       // Verify menu stays open and Light theme shows as active
-      await expect(menu).toBeVisible()
-      await expect(themeSubmenu).toBeVisible()
-
-      // Check that Light theme is active
-      expect(await topbar.isMenuItemActive(lightThemeItem)).toBe(true)
+      await expect(async () => {
+        await expect(menu).toBeVisible()
+        await expect(themeSubmenu).toBeVisible()
+        expect(await topbar.isMenuItemActive(lightThemeItem)).toBe(true)
+      }).toPass({ timeout: 5000 })
 
       // Screenshot with light theme active
       await comfyPage.attachScreenshot('theme-menu-light-active')
 
       // Verify ColorPalette setting is set to "light"
-      expect(await comfyPage.settings.getSetting('Comfy.ColorPalette')).toBe(
-        'light'
-      )
+      await expect
+        .poll(() => comfyPage.settings.getSetting('Comfy.ColorPalette'))
+        .toBe('light')
 
       // Close menu to see theme change
       await topbar.closeTopbarMenu()
@@ -228,20 +228,22 @@ test.describe('Menu', { tag: '@ui' }, () => {
       await topbar.switchTheme('dark')
 
       // Verify menu stays open and Dark theme shows as active
-      await expect(menu).toBeVisible()
-      await expect(themeItems2.submenu).toBeVisible()
-
-      // Check that Dark theme is active and Light theme is not
-      expect(await topbar.isMenuItemActive(themeItems2.darkTheme)).toBe(true)
-      expect(await topbar.isMenuItemActive(themeItems2.lightTheme)).toBe(false)
+      await expect(async () => {
+        await expect(menu).toBeVisible()
+        await expect(themeItems2.submenu).toBeVisible()
+        expect(await topbar.isMenuItemActive(themeItems2.darkTheme)).toBe(true)
+        expect(await topbar.isMenuItemActive(themeItems2.lightTheme)).toBe(
+          false
+        )
+      }).toPass({ timeout: 5000 })
 
       // Screenshot with dark theme active
       await comfyPage.attachScreenshot('theme-menu-dark-active')
 
       // Verify ColorPalette setting is set to "dark"
-      expect(await comfyPage.settings.getSetting('Comfy.ColorPalette')).toBe(
-        'dark'
-      )
+      await expect
+        .poll(() => comfyPage.settings.getSetting('Comfy.ColorPalette'))
+        .toBe('dark')
 
       // Close menu
       await topbar.closeTopbarMenu()

browser_tests/tests/nodeHelp.spec.ts

@@ -27,6 +27,7 @@ test.describe('Node Help', { tag: ['@slow', '@ui'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setup()
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
   })
 
   test.describe('Selection Toolbox', () => {

browser_tests/tests/nodeSearchBox.spec.ts

@@ -18,7 +18,10 @@ test.describe('Node search box', { tag: '@node' }, () => {
       'Comfy.LinkRelease.ActionShift',
       'search box'
     )
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
   })
 
   test(`Can trigger on empty canvas double click`, async ({ comfyPage }) => {
@@ -45,7 +48,10 @@ test.describe('Node search box', { tag: '@node' }, () => {
     await comfyPage.setup({ clearStorage: true })
     // Simulate new user with 1.24.1+ installed version
     await comfyPage.settings.setSetting('Comfy.InstalledVersion', '1.24.1')
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
     // Don't set LinkRelease settings explicitly to test versioned defaults
 
     await comfyPage.canvasOps.disconnectEdge()
@@ -215,6 +221,14 @@ test.describe('Node search box', { tag: '@node' }, () => {
       await expectFilterChips(comfyPage, ['MODEL', 'CLIP'])
     })
 
+    test('Does not add duplicate filter with same type and value', async ({
+      comfyPage
+    }) => {
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
+      await expectFilterChips(comfyPage, ['MODEL'])
+    })
+
     test('Can remove filter', async ({ comfyPage }) => {
       await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
       await comfyPage.searchBox.removeFilter(0)
@@ -277,7 +291,10 @@ test.describe('Release context menu', { tag: '@node' }, () => {
       'Comfy.LinkRelease.ActionShift',
       'search box'
     )
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
   })
 
   test(
@@ -321,7 +338,10 @@ test.describe('Release context menu', { tag: '@node' }, () => {
     await comfyPage.setup({ clearStorage: true })
     // Simulate existing user with pre-1.24.1 version
     await comfyPage.settings.setSetting('Comfy.InstalledVersion', '1.23.0')
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
     // Don't set LinkRelease settings explicitly to test versioned defaults
 
     await comfyPage.canvasOps.disconnectEdge()
@@ -342,7 +362,10 @@ test.describe('Release context menu', { tag: '@node' }, () => {
       'Comfy.LinkRelease.Action',
       'context menu'
     )
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
 
     await comfyPage.canvasOps.disconnectEdge()
     // Context menu should appear due to explicit setting, not search box

browser_tests/tests/nodeSearchBoxV2.spec.ts

@@ -0,0 +1,149 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../fixtures/ComfyPage'
+
+test.describe('Node search box V2', { tag: '@node' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+    await comfyPage.settings.setSetting(
+      'Comfy.LinkRelease.Action',
+      'search box'
+    )
+    await comfyPage.settings.setSetting(
+      'Comfy.LinkRelease.ActionShift',
+      'search box'
+    )
+    await comfyPage.searchBoxV2.reload(comfyPage)
+  })
+
+  test('Can open search and add node', async ({ comfyPage }) => {
+    const { searchBoxV2 } = comfyPage
+    const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+    await comfyPage.canvasOps.doubleClick()
+    await expect(searchBoxV2.input).toBeVisible()
+
+    await searchBoxV2.input.fill('KSampler')
+    await expect(searchBoxV2.results.first()).toBeVisible()
+
+    await comfyPage.page.keyboard.press('Enter')
+    await expect(searchBoxV2.input).not.toBeVisible()
+
+    const newCount = await comfyPage.nodeOps.getGraphNodesCount()
+    expect(newCount).toBe(initialCount + 1)
+  })
+
+  test('Can add first default result with Enter', async ({ comfyPage }) => {
+    const { searchBoxV2 } = comfyPage
+    const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+    await comfyPage.canvasOps.doubleClick()
+    await expect(searchBoxV2.input).toBeVisible()
+
+    // Default results should be visible without typing
+    await expect(searchBoxV2.results.first()).toBeVisible()
+
+    // Enter should add the first (selected) result
+    await comfyPage.page.keyboard.press('Enter')
+    await expect(searchBoxV2.input).not.toBeVisible()
+
+    const newCount = await comfyPage.nodeOps.getGraphNodesCount()
+    expect(newCount).toBe(initialCount + 1)
+  })
+
+  test.describe('Category navigation', () => {
+    test('Favorites shows only bookmarked nodes', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+      await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
+        'KSampler'
+      ])
+      await searchBoxV2.reload(comfyPage)
+
+      await comfyPage.canvasOps.doubleClick()
+      await expect(searchBoxV2.input).toBeVisible()
+
+      await searchBoxV2.categoryButton('favorites').click()
+
+      await expect(searchBoxV2.results).toHaveCount(1)
+      await expect(searchBoxV2.results.first()).toContainText('KSampler')
+    })
+
+    test('Category filters results to matching nodes', async ({
+      comfyPage
+    }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await comfyPage.canvasOps.doubleClick()
+      await expect(searchBoxV2.input).toBeVisible()
+
+      await searchBoxV2.categoryButton('sampling').click()
+
+      await expect(searchBoxV2.results.first()).toBeVisible()
+      const count = await searchBoxV2.results.count()
+      expect(count).toBeGreaterThan(0)
+    })
+  })
+
+  test.describe('Filter workflow', () => {
+    test('Can filter by input type via filter bar', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await comfyPage.canvasOps.doubleClick()
+      await expect(searchBoxV2.input).toBeVisible()
+
+      // Click "Input" filter chip in the filter bar
+      await searchBoxV2.filterBarButton('Input').click()
+
+      // Filter options should appear
+      await expect(searchBoxV2.filterOptions.first()).toBeVisible()
+
+      // Type to narrow and select MODEL
+      await searchBoxV2.input.fill('MODEL')
+      await searchBoxV2.filterOptions
+        .filter({ hasText: 'MODEL' })
+        .first()
+        .click()
+
+      // Filter chip should appear and results should be filtered
+      await expect(
+        searchBoxV2.dialog.getByText('Input:', { exact: false }).locator('..')
+      ).toContainText('MODEL')
+      await expect(searchBoxV2.results.first()).toBeVisible()
+    })
+  })
+
+  test.describe('Keyboard navigation', () => {
+    test('Can navigate and select with keyboard', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+      await comfyPage.canvasOps.doubleClick()
+      await expect(searchBoxV2.input).toBeVisible()
+
+      await searchBoxV2.input.fill('KSampler')
+      const results = searchBoxV2.results
+      await expect(results.first()).toBeVisible()
+
+      // First result selected by default
+      await expect(results.first()).toHaveAttribute('aria-selected', 'true')
+
+      // ArrowDown moves selection
+      await comfyPage.page.keyboard.press('ArrowDown')
+      await expect(results.nth(1)).toHaveAttribute('aria-selected', 'true')
+      await expect(results.first()).toHaveAttribute('aria-selected', 'false')
+
+      // ArrowUp moves back
+      await comfyPage.page.keyboard.press('ArrowUp')
+      await expect(results.first()).toHaveAttribute('aria-selected', 'true')
+
+      // Enter selects and adds node
+      await comfyPage.page.keyboard.press('Enter')
+      await expect(searchBoxV2.input).not.toBeVisible()
+
+      const newCount = await comfyPage.nodeOps.getGraphNodesCount()
+      expect(newCount).toBe(initialCount + 1)
+    })
+  })
+})

browser_tests/tests/propertiesPanel/propertiesPanelPosition.spec.ts

@@ -5,6 +5,7 @@ import { TestIds } from '../../fixtures/selectors'
 
 test.describe('Properties panel position', () => {
   test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
     // Open a sidebar tab to ensure sidebar is visible
     await comfyPage.menu.nodeLibraryTab.open()
     await comfyPage.actionbar.propertiesButton.click()

browser_tests/tests/recordAudio.spec.ts

@@ -4,6 +4,7 @@ import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+  await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'v1 (legacy)')
 })
 
 test.describe('Record Audio Node', { tag: '@screenshot' }, () => {

browser_tests/tests/remoteWidgets.spec.ts

@@ -53,6 +53,11 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
 
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
   })
 
   test.describe('Loading options', () => {

browser_tests/tests/saveImageAndWebp.spec.ts

@@ -0,0 +1,42 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe(
+  'Save Image and WEBM preview',
+  { tag: ['@screenshot', '@widget'] },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      await comfyPage.vueNodes.waitForNodes()
+    })
+
+    test('Can preview both SaveImage and SaveWEBM outputs', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'widgets/save_image_and_animated_webp'
+      )
+      await comfyPage.vueNodes.waitForNodes()
+
+      await comfyPage.runButton.click()
+
+      const saveImageNode = comfyPage.vueNodes.getNodeByTitle('Save Image')
+      const saveWebmNode = comfyPage.vueNodes.getNodeByTitle('SaveWEBM')
+
+      // Wait for SaveImage to render an img inside .image-preview
+      await expect(saveImageNode.locator('.image-preview img')).toBeVisible({
+        timeout: 30000
+      })
+
+      // Wait for SaveWEBM to render a video inside .video-preview
+      await expect(saveWebmNode.locator('.video-preview video')).toBeVisible({
+        timeout: 30000
+      })
+
+      await expect(comfyPage.page).toHaveScreenshot(
+        'save-image-and-webm-preview.png'
+      )
+    })
+  }
+)

browser_tests/tests/sidebar/nodeLibrary.spec.ts

@@ -5,6 +5,7 @@ import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
 test.describe('Node library sidebar', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
     await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [])
     await comfyPage.settings.setSetting(
       'Comfy.NodeLibrary.BookmarksCustomization',

browser_tests/tests/sidebar/workflows.spec.ts

@@ -83,17 +83,15 @@ test.describe('Workflows sidebar', () => {
     const tab = comfyPage.menu.workflowsTab
     await tab.open()
     await comfyPage.command.executeCommand('Comfy.LoadDefaultWorkflow')
-    const originalNodeCount = (await comfyPage.nodeOps.getNodes()).length
+    const originalNodeCount = await comfyPage.nodeOps.getNodeCount()
 
     await tab.insertWorkflow(tab.getPersistedItem('workflow1.json'))
     await expect
-      .poll(() => comfyPage.nodeOps.getNodes().then((n) => n.length))
+      .poll(() => comfyPage.nodeOps.getNodeCount())
       .toEqual(originalNodeCount + 1)
 
     await tab.getPersistedItem('workflow1.json').click()
-    await expect
-      .poll(() => comfyPage.nodeOps.getNodes().then((n) => n.length))
-      .toEqual(1)
+    await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toEqual(1)
   })
 
   test('Can rename nested workflow from opened workflow item', async ({

browser_tests/tests/subgraph.spec.ts

@@ -19,6 +19,10 @@ const SELECTORS = {
 test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
   })
 
   // Helper to get subgraph slot count
@@ -49,7 +53,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
   ): Promise<boolean> {
     return await comfyPage.page.evaluate(() => {
       const graph = window.app!.canvas.graph
-      return graph?.constructor?.name === 'Subgraph'
+      return !!graph && 'inputNode' in graph
     })
   }
 
@@ -371,6 +375,45 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
     })
   })
 
+  test.describe('Subgraph Unpacking', () => {
+    test('Unpacking subgraph with duplicate links does not create extra links', async ({
+      comfyPage
+    }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-duplicate-links'
+      )
+
+      const result = await comfyPage.page.evaluate(() => {
+        const graph = window.app!.graph!
+        const subgraphNode = graph.nodes.find((n) => n.isSubgraphNode())
+        if (!subgraphNode || !subgraphNode.isSubgraphNode()) {
+          return { error: 'No subgraph node found' }
+        }
+
+        graph.unpackSubgraph(subgraphNode)
+
+        const linkCount = graph.links.size
+        const nodes = graph.nodes
+        const ksampler = nodes.find((n) => n.type === 'KSampler')
+        if (!ksampler) return { error: 'No KSampler found after unpack' }
+
+        const linkedInputCount = ksampler.inputs.filter(
+          (i) => i.link != null
+        ).length
+
+        return { linkCount, linkedInputCount, nodeCount: nodes.length }
+      })
+
+      expect(result).not.toHaveProperty('error')
+      // Should have exactly 1 link (EmptyLatentImage→KSampler)
+      // not 4 (with 3 duplicates). The KSampler→output link is dropped
+      // because the subgraph output has no downstream connection.
+      expect(result.linkCount).toBe(1)
+      // KSampler should have exactly 1 linked input (latent_image)
+      expect(result.linkedInputCount).toBe(1)
+    })
+  })
+
   test.describe('Subgraph Creation and Deletion', () => {
     test('Can create subgraph from selected nodes', async ({ comfyPage }) => {
       await comfyPage.workflow.loadWorkflow('default')

browser_tests/tests/subgraphPromotion.spec.ts

@@ -0,0 +1,622 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+
+import type { ComfyPage } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
+import { fitToViewInstant } from '../helpers/fitToView'
+import {
+  getPromotedWidgetNames,
+  getPromotedWidgetCount,
+  getPromotedWidgets
+} from '../helpers/promotedWidgets'
+
+/**
+ * Check whether we're currently in a subgraph.
+ */
+async function isInSubgraph(comfyPage: ComfyPage): Promise<boolean> {
+  return comfyPage.page.evaluate(() => {
+    const graph = window.app!.canvas.graph
+    return !!graph && 'inputNode' in graph
+  })
+}
+
+async function exitSubgraphViaBreadcrumb(comfyPage: ComfyPage): Promise<void> {
+  const breadcrumb = comfyPage.page.getByTestId(TestIds.breadcrumb.subgraph)
+  await breadcrumb.waitFor({ state: 'visible', timeout: 5000 })
+
+  const parentLink = breadcrumb.getByRole('link').first()
+  await expect(parentLink).toBeVisible()
+  await parentLink.click()
+  await comfyPage.nextFrame()
+}
+
+test.describe(
+  'Subgraph Widget Promotion',
+  { tag: ['@subgraph', '@widget'] },
+  () => {
+    test.describe('Auto-promotion on Convert to Subgraph', () => {
+      test('Recommended widgets are auto-promoted when creating a subgraph', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow('default')
+
+        // Select just the KSampler node (id 3) which has a "seed" widget
+        const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
+        await ksampler.click('title')
+        const subgraphNode = await ksampler.convertToSubgraph()
+        await comfyPage.nextFrame()
+
+        // SubgraphNode should exist
+        expect(await subgraphNode.exists()).toBe(true)
+
+        // The KSampler has a "seed" widget which is in the recommended list.
+        // The promotion store should have at least the seed widget promoted.
+        const nodeId = String(subgraphNode.id)
+        const promotedNames = await getPromotedWidgetNames(comfyPage, nodeId)
+        expect(promotedNames).toContain('seed')
+
+        // SubgraphNode should have widgets (promoted views)
+        const widgetCount = await getPromotedWidgetCount(comfyPage, nodeId)
+        expect(widgetCount).toBeGreaterThan(0)
+      })
+
+      test('CLIPTextEncode text widget is auto-promoted', async ({
+        comfyPage
+      }) => {
+        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)
+        const promotedNames = await getPromotedWidgetNames(comfyPage, nodeId)
+        expect(promotedNames.length).toBeGreaterThan(0)
+
+        // CLIPTextEncode is in the recommendedNodes list, so its text widget
+        // should be promoted
+        expect(promotedNames).toContain('text')
+      })
+
+      test('SaveImage/PreviewImage nodes get pseudo-widget promoted', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow('default')
+        await fitToViewInstant(comfyPage)
+
+        // Select the SaveImage node (id 9 in default workflow)
+        const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
+        await saveNode.click('title')
+        const subgraphNode = await saveNode.convertToSubgraph()
+        await comfyPage.nextFrame()
+
+        const promotedNames = await getPromotedWidgetNames(
+          comfyPage,
+          String(subgraphNode.id)
+        )
+
+        // SaveImage is in the recommendedNodes list, so filename_prefix is promoted
+        expect(promotedNames).toContain('filename_prefix')
+      })
+    })
+
+    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'
+        )
+        await comfyPage.nextFrame()
+
+        // The subgraph node (id 11) should have a text widget promoted
+        const textarea = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await expect(textarea).toBeVisible()
+        await expect(textarea).toHaveCount(1)
+      })
+
+      test('Multiple promoted widgets all render on SubgraphNode', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-multiple-promoted-widgets'
+        )
+        await comfyPage.nextFrame()
+
+        const textareas = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await expect(textareas.first()).toBeVisible()
+        const count = await textareas.count()
+        expect(count).toBeGreaterThan(1)
+      })
+    })
+
+    test.describe('Promoted Widget Visibility in Vue Mode', () => {
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      })
+
+      test('Promoted text widget renders on SubgraphNode in Vue mode', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+        await comfyPage.vueNodes.waitForNodes()
+
+        // SubgraphNode (id 11) should render with its body
+        const subgraphVueNode = comfyPage.vueNodes.getNodeLocator('11')
+        await expect(subgraphVueNode).toBeVisible()
+
+        // It should have the Enter Subgraph button
+        const enterButton = subgraphVueNode.getByTestId('subgraph-enter-button')
+        await expect(enterButton).toBeVisible()
+
+        // The promoted text widget should render inside the node
+        const nodeBody = subgraphVueNode.locator('[data-testid="node-body-11"]')
+        await expect(nodeBody).toBeVisible()
+
+        // Widgets section should exist and have at least one widget
+        const widgets = nodeBody.locator('.lg-node-widgets > div')
+        await expect(widgets.first()).toBeVisible()
+      })
+
+      test('Enter Subgraph button navigates into subgraph in Vue mode', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+        await comfyPage.vueNodes.waitForNodes()
+
+        await comfyPage.vueNodes.enterSubgraph('11')
+        await comfyPage.nextFrame()
+
+        expect(await isInSubgraph(comfyPage)).toBe(true)
+      })
+
+      test('Multiple promoted widgets render on SubgraphNode in Vue mode', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-multiple-promoted-widgets'
+        )
+        await comfyPage.vueNodes.waitForNodes()
+
+        const subgraphVueNode = comfyPage.vueNodes.getNodeLocator('11')
+        await expect(subgraphVueNode).toBeVisible()
+
+        const nodeBody = subgraphVueNode.locator('[data-testid="node-body-11"]')
+        const widgets = nodeBody.locator('.lg-node-widgets > div')
+        const count = await widgets.count()
+        expect(count).toBeGreaterThan(1)
+      })
+    })
+
+    test.describe('Promoted Widget Reactivity', () => {
+      test('Value changes on promoted widget sync to interior widget', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+        await comfyPage.nextFrame()
+
+        const testContent = 'promoted-value-sync-test'
+
+        // Type into the promoted textarea on the SubgraphNode
+        const textarea = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await textarea.fill(testContent)
+        await comfyPage.nextFrame()
+
+        // Navigate into subgraph
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+        await subgraphNode.navigateIntoSubgraph()
+
+        // Interior CLIPTextEncode textarea should have the same value
+        const interiorTextarea = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await expect(interiorTextarea).toHaveValue(testContent)
+      })
+
+      test('Value changes on interior widget sync to promoted widget', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+        await comfyPage.nextFrame()
+
+        const testContent = 'interior-value-sync-test'
+
+        // Navigate into subgraph
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+        await subgraphNode.navigateIntoSubgraph()
+
+        // Type into the interior CLIPTextEncode textarea
+        const interiorTextarea = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await interiorTextarea.fill(testContent)
+        await comfyPage.nextFrame()
+
+        // Navigate back to parent graph
+        await exitSubgraphViaBreadcrumb(comfyPage)
+
+        // Promoted textarea on SubgraphNode should have the same value
+        const promotedTextarea = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await expect(promotedTextarea).toHaveValue(testContent)
+      })
+
+      test('Value persists through repeated navigation', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+        await comfyPage.nextFrame()
+
+        const testContent = 'persistence-through-navigation'
+
+        // Set value on promoted widget
+        const textarea = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await textarea.fill(testContent)
+
+        // Navigate in and out multiple times
+        for (let i = 0; i < 3; i++) {
+          const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+          await subgraphNode.navigateIntoSubgraph()
+          const interiorTextarea = comfyPage.page.getByTestId(
+            TestIds.widgets.domWidgetTextarea
+          )
+          await expect(interiorTextarea).toHaveValue(testContent)
+
+          await exitSubgraphViaBreadcrumb(comfyPage)
+
+          const promotedTextarea = comfyPage.page.getByTestId(
+            TestIds.widgets.domWidgetTextarea
+          )
+          await expect(promotedTextarea).toHaveValue(testContent)
+        }
+      })
+    })
+
+    test.describe('Manual Promote/Demote via Context Menu', () => {
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+      })
+
+      test('Can promote a widget from inside a subgraph', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+        await subgraphNode.navigateIntoSubgraph()
+
+        // Get the KSampler node (id 1) inside the subgraph
+        const ksampler = await comfyPage.nodeOps.getNodeRefById('1')
+
+        // Right-click on the KSampler's "steps" widget (index 2) to promote it
+        const stepsWidget = await ksampler.getWidget(2)
+        const widgetPos = await stepsWidget.getPosition()
+        await comfyPage.canvas.click({
+          position: widgetPos,
+          button: 'right',
+          force: true
+        })
+        await comfyPage.nextFrame()
+
+        // Look for the Promote Widget menu entry
+        const promoteEntry = comfyPage.page
+          .locator('.litemenu-entry')
+          .filter({ hasText: /Promote Widget/ })
+
+        await expect(promoteEntry).toBeVisible()
+        await promoteEntry.click()
+        await comfyPage.nextFrame()
+
+        // Navigate back to parent
+        await exitSubgraphViaBreadcrumb(comfyPage)
+
+        // SubgraphNode should now have the promoted widget
+        const widgetCount = await getPromotedWidgetCount(comfyPage, '2')
+        expect(widgetCount).toBeGreaterThan(0)
+      })
+
+      test('Can un-promote a widget from inside a subgraph', async ({
+        comfyPage
+      }) => {
+        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()
+
+        const ksampler = await comfyPage.nodeOps.getNodeRefById('1')
+        const stepsWidget = await ksampler.getWidget(2)
+        const widgetPos = await stepsWidget.getPosition()
+
+        await comfyPage.canvas.click({
+          position: widgetPos,
+          button: 'right',
+          force: true
+        })
+        await comfyPage.nextFrame()
+
+        const promoteEntry = comfyPage.page
+          .locator('.litemenu-entry')
+          .filter({ hasText: /Promote Widget/ })
+        await expect(promoteEntry).toBeVisible()
+        await promoteEntry.click()
+        await comfyPage.nextFrame()
+
+        // Navigate back and verify promotion took effect
+        await exitSubgraphViaBreadcrumb(comfyPage)
+        await fitToViewInstant(comfyPage)
+        await comfyPage.nextFrame()
+
+        const initialWidgetCount = await getPromotedWidgetCount(comfyPage, '2')
+        expect(initialWidgetCount).toBeGreaterThan(0)
+
+        // Navigate back in and un-promote
+        const subgraphNode2 = await comfyPage.nodeOps.getNodeRefById('2')
+        await subgraphNode2.navigateIntoSubgraph()
+        const stepsWidget2 = await (
+          await comfyPage.nodeOps.getNodeRefById('1')
+        ).getWidget(2)
+        const widgetPos2 = await stepsWidget2.getPosition()
+
+        await comfyPage.canvas.click({
+          position: widgetPos2,
+          button: 'right',
+          force: true
+        })
+        await comfyPage.nextFrame()
+
+        const unpromoteEntry = comfyPage.page
+          .locator('.litemenu-entry')
+          .filter({ hasText: /Un-Promote Widget/ })
+
+        await expect(unpromoteEntry).toBeVisible()
+        await unpromoteEntry.click()
+        await comfyPage.nextFrame()
+
+        // Navigate back to parent
+        await exitSubgraphViaBreadcrumb(comfyPage)
+
+        // SubgraphNode should have fewer widgets
+        const finalWidgetCount = await getPromotedWidgetCount(comfyPage, '2')
+        expect(finalWidgetCount).toBeLessThan(initialWidgetCount)
+      })
+    })
+
+    test.describe('Pseudo-Widget Promotion', () => {
+      test('Promotion store tracks pseudo-widget entries for subgraph with preview node', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-preview-node'
+        )
+        await comfyPage.nextFrame()
+
+        // The SaveImage node is in the recommendedNodes list, so its
+        // filename_prefix widget should be auto-promoted
+        const promotedNames = await getPromotedWidgetNames(comfyPage, '5')
+        expect(promotedNames.length).toBeGreaterThan(0)
+        expect(promotedNames).toContain('filename_prefix')
+      })
+
+      test('Converting SaveImage to subgraph promotes its widgets', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow('default')
+        await fitToViewInstant(comfyPage)
+
+        // Select SaveImage (id 9)
+        const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
+        await saveNode.click('title')
+        const subgraphNode = await saveNode.convertToSubgraph()
+        await comfyPage.nextFrame()
+
+        // SaveImage is a recommended node, so filename_prefix should be promoted
+        const nodeId = String(subgraphNode.id)
+        const promotedNames = await getPromotedWidgetNames(comfyPage, nodeId)
+        expect(promotedNames.length).toBeGreaterThan(0)
+
+        const widgetCount = await getPromotedWidgetCount(comfyPage, nodeId)
+        expect(widgetCount).toBeGreaterThan(0)
+      })
+    })
+
+    test.describe('Legacy And Round-Trip Coverage', () => {
+      test('Legacy -1 proxyWidgets entries are hydrated to concrete interior node IDs', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-compressed-target-slot'
+        )
+        await comfyPage.nextFrame()
+
+        const promotedWidgets = await getPromotedWidgets(comfyPage, '2')
+        expect(promotedWidgets.length).toBeGreaterThan(0)
+        expect(
+          promotedWidgets.some(([interiorNodeId]) => interiorNodeId === '-1')
+        ).toBe(false)
+        expect(
+          promotedWidgets.some(
+            ([interiorNodeId, widgetName]) =>
+              interiorNodeId !== '-1' && widgetName === 'batch_size'
+          )
+        ).toBe(true)
+      })
+
+      test('Promoted widgets survive serialize -> loadGraphData round-trip', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+        await comfyPage.nextFrame()
+
+        const beforePromoted = await getPromotedWidgetNames(comfyPage, '11')
+        expect(beforePromoted).toContain('text')
+
+        const serialized = await comfyPage.page.evaluate(() => {
+          return window.app!.graph!.serialize()
+        })
+
+        await comfyPage.page.evaluate((workflow: ComfyWorkflowJSON) => {
+          return window.app!.loadGraphData(workflow)
+        }, serialized as ComfyWorkflowJSON)
+        await comfyPage.nextFrame()
+
+        const afterPromoted = await getPromotedWidgetNames(comfyPage, '11')
+        expect(afterPromoted).toContain('text')
+
+        const widgetCount = await getPromotedWidgetCount(comfyPage, '11')
+        expect(widgetCount).toBeGreaterThan(0)
+      })
+
+      test('Cloning a subgraph node keeps promoted widget entries on original and clone', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+        await comfyPage.nextFrame()
+
+        const originalNode = await comfyPage.nodeOps.getNodeRefById('11')
+        const originalPos = await originalNode.getPosition()
+
+        await comfyPage.page.mouse.move(originalPos.x + 16, originalPos.y + 16)
+        await comfyPage.page.keyboard.down('Alt')
+        await comfyPage.page.mouse.down()
+        await comfyPage.nextFrame()
+        await comfyPage.page.mouse.move(originalPos.x + 72, originalPos.y + 72)
+        await comfyPage.page.mouse.up()
+        await comfyPage.page.keyboard.up('Alt')
+        await comfyPage.nextFrame()
+
+        const subgraphNodeIds = await comfyPage.page.evaluate(() => {
+          const graph = window.app!.canvas.graph!
+          return graph.nodes
+            .filter(
+              (n) =>
+                typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
+            )
+            .map((n) => String(n.id))
+        })
+
+        expect(subgraphNodeIds.length).toBeGreaterThan(1)
+        for (const nodeId of subgraphNodeIds) {
+          const promotedWidgets = await getPromotedWidgets(comfyPage, nodeId)
+          expect(promotedWidgets.length).toBeGreaterThan(0)
+          expect(
+            promotedWidgets.some(([, widgetName]) => widgetName === 'text')
+          ).toBe(true)
+        }
+      })
+    })
+
+    test.describe('Vue Mode - Promoted Preview Content', () => {
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+      })
+
+      test('SubgraphNode with preview node shows hasCustomContent area in Vue mode', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-preview-node'
+        )
+        await comfyPage.vueNodes.waitForNodes()
+
+        const subgraphVueNode = comfyPage.vueNodes.getNodeLocator('5')
+        await expect(subgraphVueNode).toBeVisible()
+
+        // The node body should exist
+        const nodeBody = subgraphVueNode.locator('[data-testid="node-body-5"]')
+        await expect(nodeBody).toBeVisible()
+      })
+    })
+
+    test.describe('Promotion Cleanup', () => {
+      test('Removing subgraph node clears promotion store entries', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+        await comfyPage.nextFrame()
+
+        // Verify promotions exist
+        const namesBefore = await getPromotedWidgetNames(comfyPage, '11')
+        expect(namesBefore.length).toBeGreaterThan(0)
+
+        // Delete the subgraph node
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+        await subgraphNode.click('title')
+        await comfyPage.page.keyboard.press('Delete')
+        await comfyPage.nextFrame()
+
+        // Node no longer exists, so promoted widgets should be gone
+        const nodeExists = await comfyPage.page.evaluate(() => {
+          return !!window.app!.canvas.graph!.getNodeById('11')
+        })
+        expect(nodeExists).toBe(false)
+      })
+
+      test('Removing I/O slot removes associated promoted widget', async ({
+        comfyPage
+      }) => {
+        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-with-promoted-text-widget'
+        )
+
+        const initialWidgetCount = await getPromotedWidgetCount(comfyPage, '11')
+        expect(initialWidgetCount).toBeGreaterThan(0)
+
+        // Navigate into subgraph
+        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
+        await subgraphNode.navigateIntoSubgraph()
+
+        // Remove the text input slot
+        await comfyPage.subgraph.rightClickInputSlot('text')
+        await comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
+        await comfyPage.nextFrame()
+
+        // Navigate back via breadcrumb
+        await comfyPage.page
+          .getByTestId(TestIds.breadcrumb.subgraph)
+          .waitFor({ state: 'visible', timeout: 5000 })
+        const homeBreadcrumb = comfyPage.page.getByRole('link', {
+          name: 'subgraph-with-promoted-text-widget'
+        })
+        await homeBreadcrumb.waitFor({ state: 'visible' })
+        await homeBreadcrumb.click()
+        await comfyPage.nextFrame()
+
+        // Widget count should be reduced
+        const finalWidgetCount = await getPromotedWidgetCount(comfyPage, '11')
+        expect(finalWidgetCount).toBeLessThan(initialWidgetCount)
+      })
+    })
+  }
+)

browser_tests/tests/subgraphSearchAliases.spec.ts

@@ -54,7 +54,10 @@ async function searchAndExpectResult(
 test.describe('Subgraph Search Aliases', { tag: ['@subgraph'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
   })
 
   test('Can set search aliases on subgraph and find via search', async ({

browser_tests/tests/templateFitView.spec.ts

@@ -0,0 +1,56 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+/**
+ * Tests that templates are automatically fitted to view when loaded.
+ *
+ * When openSource === 'template', fitView() is called to ensure
+ * templates with saved off-screen viewport positions (extra.ds)
+ * are always displayed correctly.
+ */
+test.describe('Template Fit View', { tag: ['@canvas', '@workflow'] }, () => {
+  test('should automatically fit view when loading a template with off-screen saved position', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting('Comfy.EnableWorkflowViewRestore', true)
+
+    // Serialize the current default graph, inject an extreme off-screen
+    // viewport position, then reload it as a template. Without the fix,
+    // the saved offset [-5000, -5000] would be restored and nodes would
+    // be invisible.
+    const viewportState = await comfyPage.page.evaluate(async () => {
+      const app = window.app!
+      const workflow = app.graph.serialize()
+
+      workflow.extra = {
+        ...workflow.extra,
+        ds: { scale: 1, offset: [-5000, -5000] }
+      }
+
+      await app.loadGraphData(workflow as ComfyWorkflowJSON, true, true, null, {
+        openSource: 'template'
+      })
+
+      return {
+        offsetX: app.canvas.ds.offset[0],
+        offsetY: app.canvas.ds.offset[1],
+        nodeCount: app.graph._nodes.length
+      }
+    })
+
+    expect(viewportState.nodeCount).toBeGreaterThan(0)
+
+    // fitView() should have overridden the saved [-5000, -5000] offset
+    expect(
+      viewportState.offsetX,
+      'Viewport X offset should not be the saved off-screen value'
+    ).not.toBe(-5000)
+    expect(
+      viewportState.offsetY,
+      'Viewport Y offset should not be the saved off-screen value'
+    ).not.toBe(-5000)
+  })
+})

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -102,6 +102,7 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
     // await comfyPage.setup()
     await comfyPage.workflow.loadWorkflow('vueNodes/simple-triple')
     await comfyPage.vueNodes.waitForNodes()
@@ -928,7 +929,10 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
         'Comfy.LinkRelease.ActionShift',
         'context menu'
       )
-      await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+      await comfyPage.settings.setSetting(
+        'Comfy.NodeSearchBoxImpl',
+        'v1 (legacy)'
+      )
 
       const samplerNode = (
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
@@ -994,6 +998,10 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
         'Comfy.LinkRelease.ActionShift',
         'search box'
       )
+      await comfyPage.settings.setSetting(
+        'Comfy.NodeSearchBoxImpl',
+        'v1 (legacy)'
+      )
 
       const samplerNode = (
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
@@ -1048,6 +1056,11 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
     comfyPage,
     comfyMouse
   }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'v1 (legacy)'
+    )
+
     // Setup workflow with a KSampler node
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
     await comfyPage.nodeOps.waitForGraphNodes(0)

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

@@ -0,0 +1,133 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '../../../../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../../../../fixtures/ComfyPage'
+import {
+  getPromotedWidgetNames,
+  getPromotedWidgetCountByName
+} from '../../../../helpers/promotedWidgets'
+
+test.describe('Vue Nodes Image Preview', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+  })
+
+  async function loadImageOnNode(comfyPage: ComfyPage) {
+    await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+    await comfyPage.vueNodes.waitForNodes()
+
+    const loadImageNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
+    )[0]
+    const { x, y } = await loadImageNode.getPosition()
+
+    await comfyPage.dragDrop.dragAndDropFile('image64x64.webp', {
+      dropPosition: { x, y }
+    })
+
+    const imagePreview = comfyPage.page.locator('.image-preview')
+    await expect(imagePreview).toBeVisible()
+    await expect(imagePreview.locator('img')).toBeVisible()
+    await expect(imagePreview).toContainText('x')
+
+    return {
+      imagePreview,
+      nodeId: String(loadImageNode.id)
+    }
+  }
+
+  // TODO(#8143): Re-enable after image preview sync is working in CI
+  test.fixme('opens mask editor from image preview button', async ({
+    comfyPage
+  }) => {
+    const { imagePreview } = await loadImageOnNode(comfyPage)
+
+    await imagePreview.locator('[role="img"]').focus()
+    await comfyPage.page.getByLabel('Edit or mask image').click()
+
+    await expect(comfyPage.page.locator('.mask-editor-dialog')).toBeVisible()
+  })
+
+  // TODO(#8143): Re-enable after image preview sync is working in CI
+  test.fixme('shows image context menu options', async ({ comfyPage }) => {
+    const { nodeId } = await loadImageOnNode(comfyPage)
+
+    const nodeHeader = comfyPage.vueNodes
+      .getNodeLocator(nodeId)
+      .locator('.lg-node-header')
+    await nodeHeader.click()
+    await nodeHeader.click({ button: 'right' })
+
+    const contextMenu = comfyPage.page.locator('.p-contextmenu')
+    await expect(contextMenu).toBeVisible()
+    await expect(contextMenu.getByText('Open Image')).toBeVisible()
+    await expect(contextMenu.getByText('Copy Image')).toBeVisible()
+    await expect(contextMenu.getByText('Save Image')).toBeVisible()
+    await expect(contextMenu.getByText('Open in Mask Editor')).toBeVisible()
+  })
+
+  test(
+    'renders promoted image previews for each subgraph node',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow(
+        'subgraphs/subgraph-with-multiple-promoted-previews'
+      )
+      await comfyPage.vueNodes.waitForNodes()
+
+      const firstSubgraphNode = comfyPage.vueNodes.getNodeLocator('7')
+      const secondSubgraphNode = comfyPage.vueNodes.getNodeLocator('8')
+
+      await expect(firstSubgraphNode).toBeVisible()
+      await expect(secondSubgraphNode).toBeVisible()
+
+      const firstPromotedWidgets = await getPromotedWidgetNames(comfyPage, '7')
+      const secondPromotedWidgets = await getPromotedWidgetNames(comfyPage, '8')
+      expect(firstPromotedWidgets).toEqual([
+        '$$canvas-image-preview',
+        '$$canvas-image-preview'
+      ])
+      expect(secondPromotedWidgets).toEqual(['$$canvas-image-preview'])
+
+      expect(
+        await getPromotedWidgetCountByName(
+          comfyPage,
+          '7',
+          '$$canvas-image-preview'
+        )
+      ).toBe(2)
+      expect(
+        await getPromotedWidgetCountByName(
+          comfyPage,
+          '8',
+          '$$canvas-image-preview'
+        )
+      ).toBe(1)
+
+      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')
+
+      const firstPreviewImages = firstSubgraphNode.locator('.image-preview img')
+      const secondPreviewImages =
+        secondSubgraphNode.locator('.image-preview img')
+
+      await expect(firstPreviewImages).toHaveCount(2, { timeout: 30_000 })
+      await expect(secondPreviewImages).toHaveCount(1, { timeout: 30_000 })
+
+      await expect(firstPreviewImages.first()).toBeVisible({ timeout: 30_000 })
+      await expect(firstPreviewImages.nth(1)).toBeVisible({ timeout: 30_000 })
+      await expect(secondPreviewImages.first()).toBeVisible({ timeout: 30_000 })
+
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-node-multiple-promoted-previews.png'
+      )
+    }
+  )
+})

browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts

@@ -9,17 +9,20 @@ test.describe('Vue Upload Widgets', () => {
     await comfyPage.vueNodes.waitForNodes()
   })
 
-  test(
-    'should hide canvas-only upload buttons',
-    { tag: '@screenshot' },
-    async ({ comfyPage }) => {
-      await comfyPage.setup()
-      await comfyPage.workflow.loadWorkflow('widgets/all_load_widgets')
-      await comfyPage.vueNodes.waitForNodes()
+  test('should hide canvas-only upload buttons', async ({ comfyPage }) => {
+    await comfyPage.setup()
+    await comfyPage.workflow.loadWorkflow('widgets/all_load_widgets')
+    await comfyPage.vueNodes.waitForNodes()
 
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        'vue-nodes-upload-widgets.png'
-      )
-    }
-  )
+    await expect(
+      comfyPage.page.getByText('choose file to upload', { exact: true })
+    ).not.toBeVisible()
+
+    await expect
+      .poll(() => comfyPage.page.getByText('Error loading image').count())
+      .toBeGreaterThan(0)
+    await expect
+      .poll(() => comfyPage.page.getByText('Error loading video').count())
+      .toBeGreaterThan(0)
+  })
 })

docs/WIDGET_SERIALIZATION.md

@@ -0,0 +1,58 @@
+# Widget Serialization: `widget.serialize` vs `widget.options.serialize`
+
+Two properties named `serialize` exist at different levels of a widget object. They control different serialization layers and are checked by completely different code paths.
+
+**`widget.serialize`** — Controls **workflow persistence**. Checked by `LGraphNode.serialize()` and `configure()` when reading/writing `widgets_values` in the workflow JSON. When `false`, the widget is skipped in both serialization and deserialization. Used for UI-only widgets (image previews, progress text, audio players). Typed as `IBaseWidget.serialize` in `src/lib/litegraph/src/types/widgets.ts`.
+
+**`widget.options.serialize`** — Controls **prompt/API serialization**. Checked by `executionUtil.ts` when building the API payload sent to the backend. When `false`, the widget is excluded from prompt inputs. Used for client-side-only controls (`control_after_generate`, combo filter lists) that the server doesn't need. Typed as `IWidgetOptions.serialize` in `src/lib/litegraph/src/types/widgets.ts`.
+
+These correspond to the two data formats in `ComfyMetadata` embedded in output files (PNG, GLTF, WebM, AVIF, etc.): `widget.serialize` → `ComfyMetadataTags.WORKFLOW`, `widget.options.serialize` → `ComfyMetadataTags.PROMPT`.
+
+## Permutation table
+
+| `widget.serialize` | `widget.options.serialize` | In workflow? | In prompt? | Examples                                                             |
+| ------------------ | -------------------------- | ------------ | ---------- | -------------------------------------------------------------------- |
+| ✅ default         | ✅ default                 | Yes          | Yes        | seed, cfg, sampler_name                                              |
+| ✅ default         | ❌ false                   | Yes          | No         | control_after_generate, combo filter list                            |
+| ❌ false           | ✅ default                 | No           | Yes        | No current usage (would be a transient value computed at queue time) |
+| ❌ false           | ❌ false                   | No           | No         | Image/video previews, audio players, progress text                   |
+
+## Gotchas
+
+- `addWidget('combo', name, value, cb, { serialize: false })` puts `serialize` into `widget.options`, **not** onto `widget` directly. These are different properties consumed by different systems.
+- `LGraphNode.serialize()` checks `widget.serialize === false` (line 967). It does **not** check `widget.options.serialize`. A widget with `options.serialize = false` is still included in `widgets_values`.
+- `LGraphNode.serialize()` only writes `widgets_values` if `this.widgets` is truthy. Nodes that create widgets dynamically (like `PrimitiveNode`) will have no `widgets_values` in serialized output if serialized before widget creation — even if `this.widgets_values` exists on the instance from a prior `configure()` call.
+- `widget.options.serialize` is typed as `IWidgetOptions.serialize` — both properties share the name `serialize` but live at different levels of the widget object.
+
+## PrimitiveNode and copy/paste
+
+`PrimitiveNode` creates widgets dynamically on connection — it starts as an empty polymorphic node and morphs to match its target widget in `_onFirstConnection()`. This interacts badly with the copy/paste pipeline.
+
+### The clone→serialize gap
+
+`LGraphCanvas._serializeItems()` copies nodes via `item.clone()?.serialize()` (line 3911). For PrimitiveNode this fails:
+
+1. `clone()` calls `this.serialize()` on the **original** node (which has widgets, so `widgets_values` is captured correctly).
+2. `clone()` creates a **fresh** PrimitiveNode via `LiteGraph.createNode()` and calls `configure(data)` on it — this stores `widgets_values` on the instance.
+3. But the fresh PrimitiveNode has no `this.widgets` (widgets are created only on connection), so when `serialize()` is called on the clone, `LGraphNode.serialize()` skips the `widgets_values` block entirely (line 964: `if (widgets && this.serialize_widgets)`).
+
+Result: `widgets_values` is silently dropped from the clipboard data.
+
+### Why seed survives but control_after_generate doesn't
+
+When the pasted PrimitiveNode reconnects to the pasted target node, `_createWidget()` copies `theirWidget.value` from the target (line 254). This restores the **primary** widget value (e.g., `seed`).
+
+But `control_after_generate` is a **secondary** widget created by `addValueControlWidgets()`, which reads its initial value from `this.widgets_values?.[1]` (line 263). That value was lost during clone→serialize, so it falls back to `'fixed'` (line 265).
+
+See [ADR-0006](adr/0006-primitive-node-copy-paste-lifecycle.md) for proposed fixes and design tradeoffs.
+
+## Code references
+
+- `widget.serialize` checked: `src/lib/litegraph/src/LGraphNode.ts` serialize() and configure()
+- `widget.options.serialize` checked: `src/utils/executionUtil.ts`
+- `widget.options.serialize` set: `src/scripts/widgets.ts` addValueControlWidgets()
+- `widget.serialize` set: `src/composables/node/useNodeImage.ts`, `src/extensions/core/previewAny.ts`, etc.
+- Metadata types: `src/types/metadataTypes.ts`
+- PrimitiveNode: `src/extensions/core/widgetInputs.ts`
+- Copy/paste serialization: `src/lib/litegraph/src/LGraphCanvas.ts` `_serializeItems()`
+- Clone: `src/lib/litegraph/src/LGraphNode.ts` `clone()`

docs/adr/0006-primitive-node-copy-paste-lifecycle.md

@@ -0,0 +1,45 @@
+# 6. PrimitiveNode Copy/Paste Lifecycle
+
+Date: 2026-02-22
+
+## Status
+
+Proposed
+
+## Context
+
+PrimitiveNode creates widgets dynamically on connection. When copied, the clone has no `this.widgets`, so `LGraphNode.serialize()` drops `widgets_values` from the clipboard data. This causes secondary widget values (e.g., `control_after_generate`) to be lost on paste. See [WIDGET_SERIALIZATION.md](../WIDGET_SERIALIZATION.md#primitiveno-and-copypaste) for the full mechanism.
+
+Related: [#1757](https://github.com/Comfy-Org/ComfyUI_frontend/issues/1757), [#8938](https://github.com/Comfy-Org/ComfyUI_frontend/pull/8938)
+
+## Options
+
+### A. Minimal fix: override `serialize()` on PrimitiveNode
+
+Override `serialize()` to fall back to `this.widgets_values` (set during `configure()`) when the base implementation omits it due to missing `this.widgets`.
+
+- **Pro**: No change to connection lifecycle semantics. Lowest risk.
+- **Pro**: Doesn't affect workflow save/load (which already works via `onAfterGraphConfigured`).
+- **Con**: Doesn't address the deeper design issue — primitives are still empty on copy.
+
+### B. Clone-configured-instance lifecycle
+
+On copy, the primitive is a clone of the configured instance (with widgets intact). On disconnect or paste without connections, it returns to empty state.
+
+- **Pro**: Copy→serialize captures `widgets_values` correctly. Matches OOP expectations.
+- **Pro**: Secondary widget state survives round-trips without special-casing.
+- **Con**: `input.widget[CONFIG]` allows extensions to make PrimitiveNode create a _different_ widget than the target. Widget config is derived at connection time, not stored, so cloning the configured state may not be faithful.
+- **Con**: Deserialization ordering — `configure()` runs before links are restored. PrimitiveNode needs links to know what widgets to create. `onAfterGraphConfigured()` handles this for workflow load, but copy/paste uses a different code path.
+- **Con**: Higher risk of regressions in extension compatibility.
+
+### C. Projection model (like Subgraph widgets)
+
+Primitives act as a synchronization mechanism — no own state, just a projection of the target widget's resolved value.
+
+- **Pro**: Cleanest conceptual model. Eliminates state duplication.
+- **Con**: Primitives can connect to multiple targets. Projection with multiple targets is ambiguous.
+- **Con**: Major architectural change with broad impact.
+
+## Decision
+
+Pending. Option A is the most pragmatic first step. Option B can be revisited after Option A ships and stabilizes.

docs/guidance/playwright.md

@@ -57,7 +57,7 @@ settings: testData as any
 // Don't add test settings to src/schemas/apiSchema.ts
 
 // ❌ Don't chain through unknown to bypass types
-data as unknown as SomeType // Avoid; prefer explicit typings or helpers
+data as unknown as SomeType // Avoid; prefer `as Partial<SomeType> as SomeType` or explicit typings
 ```
 
 ### Accessing Internal State

docs/guidance/typescript.md

@@ -36,6 +36,25 @@ When you must handle uncertain types, prefer these approaches in order:
 - Don't expose internal implementation types (e.g., Pinia store internals)
 - Reactive refs (`ComputedRef<T>`) should be unwrapped before exposing
 
+## Avoiding Circular Dependencies
+
+Extract type guards and their associated interfaces into **leaf modules** — files with only `import type` statements. This keeps them safe to import from anywhere without pulling in heavy transitive dependencies.
+
+```typescript
+// ✅ myTypes.ts — leaf module (only type imports)
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+
+export interface MyView extends IBaseWidget {
+  /* ... */
+}
+export function isMyView(w: IBaseWidget): w is MyView {
+  return 'myProp' in w
+}
+
+// ❌ myView.ts — heavy module (runtime imports from stores, utils, etc.)
+//    Importing the type guard from here drags in the entire dependency tree.
+```
+
 ## Utility Libraries
 
 - Use `es-toolkit` for utility functions (not lodash)

global.d.ts

@@ -10,9 +10,28 @@ interface ImpactQueueFunction {
   a?: unknown[][]
 }
 
+type GtagGetFieldName = 'client_id' | 'session_id' | 'session_number'
+
+interface GtagGetFieldValueMap {
+  client_id: string | number | undefined
+  session_id: string | number | undefined
+  session_number: string | number | undefined
+}
+
+interface GtagFunction {
+  <TField extends GtagGetFieldName>(
+    command: 'get',
+    targetId: string,
+    fieldName: TField,
+    callback: (value: GtagGetFieldValueMap[TField]) => void
+  ): void
+  (...args: unknown[]): void
+}
+
 interface Window {
   __CONFIG__: {
     gtm_container_id?: string
+    ga_measurement_id?: string
     mixpanel_token?: string
     require_whitelist?: boolean
     subscription_required?: boolean
@@ -36,12 +55,8 @@ interface Window {
       badge?: string
     }
   }
-  __ga_identity__?: {
-    client_id?: string
-    session_id?: string
-    session_number?: string
-  }
   dataLayer?: Array<Record<string, unknown>>
+  gtag?: GtagFunction
   ire_o?: string
   ire?: ImpactQueueFunction
 }

knip.config.ts

@@ -39,7 +39,9 @@ const config: KnipConfig = {
     'src/workbench/extensions/manager/types/generatedManagerTypes.ts',
     'packages/registry-types/src/comfyRegistryTypes.ts',
     // Used by a custom node (that should move off of this)
-    'src/scripts/ui/components/splitButton.ts'
+    'src/scripts/ui/components/splitButton.ts',
+    // Workflow files contain license names that knip misinterprets as binaries
+    '.github/workflows/ci-oss-assets-validation.yaml'
   ],
   compilers: {
     // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199
@@ -64,7 +66,8 @@ const config: KnipConfig = {
   },
   tags: [
     '-knipIgnoreUnusedButUsedByCustomNodes',
-    '-knipIgnoreUnusedButUsedByVueNodesBranch'
+    '-knipIgnoreUnusedButUsedByVueNodesBranch',
+    '-knipIgnoreUsedByStackedPR'
   ]
 }
 

lint-staged.config.ts

@@ -6,10 +6,19 @@ export default {
 
   './**/*.js': (stagedFiles: string[]) => formatAndEslint(stagedFiles),
 
-  './**/*.{ts,tsx,vue,mts}': (stagedFiles: string[]) => [
-    ...formatAndEslint(stagedFiles),
-    'pnpm typecheck'
-  ]
+  './**/*.{ts,tsx,vue,mts}': (stagedFiles: string[]) => {
+    const commands = [...formatAndEslint(stagedFiles), 'pnpm typecheck']
+
+    const hasBrowserTestsChanges = stagedFiles
+      .map((f) => path.relative(process.cwd(), f).replace(/\\/g, '/'))
+      .some((f) => f.startsWith('browser_tests/'))
+
+    if (hasBrowserTestsChanges) {
+      commands.push('pnpm typecheck:browser')
+    }
+
+    return commands
+  }
 }
 
 function formatAndEslint(fileNames: string[]) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.40.5",
+  "version": "1.41.3",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -70,13 +70,14 @@
     "@primevue/themes": "catalog:",
     "@sentry/vue": "catalog:",
     "@sparkjsdev/spark": "catalog:",
-    "@tiptap/core": "^2.10.4",
-    "@tiptap/extension-link": "^2.10.4",
-    "@tiptap/extension-table": "^2.10.4",
-    "@tiptap/extension-table-cell": "^2.10.4",
-    "@tiptap/extension-table-header": "^2.10.4",
-    "@tiptap/extension-table-row": "^2.10.4",
-    "@tiptap/starter-kit": "^2.10.4",
+    "@tiptap/core": "catalog:",
+    "@tiptap/extension-link": "catalog:",
+    "@tiptap/extension-table": "catalog:",
+    "@tiptap/extension-table-cell": "catalog:",
+    "@tiptap/extension-table-header": "catalog:",
+    "@tiptap/extension-table-row": "catalog:",
+    "@tiptap/pm": "catalog:",
+    "@tiptap/starter-kit": "catalog:",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "@xterm/addon-fit": "^0.10.0",
@@ -93,9 +94,9 @@
     "extendable-media-recorder-wav-encoder": "^7.0.129",
     "firebase": "catalog:",
     "fuse.js": "^7.0.0",
-    "glob": "^11.0.3",
+    "glob": "catalog:",
     "jsonata": "catalog:",
-    "jsondiffpatch": "^0.6.0",
+    "jsondiffpatch": "catalog:",
     "loglevel": "^1.9.2",
     "marked": "^15.0.11",
     "pinia": "catalog:",

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

@@ -12,6 +12,12 @@
   icon-sets: from-folder(comfy, './packages/design-system/src/icons');
 }
 
+/* Safelist dynamic comfy icons for node library folders */
+@source inline("icon-[comfy--{ai-model,bfl,bria,bytedance,credits,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow}]");
+
+/* Safelist dynamic comfy icons for essential nodes (kebab-case of node names) */
+@source inline("icon-[comfy--{load-image,save-image,load-video,save-video,load-3-d,save-glb,image-batch,image-crop,image-scale,image-rotate,image-blur,image-invert,canny,recraft-remove-background-node,kling-lip-sync-audio-to-video-node,load-audio,save-audio,stability-text-to-audio,lora-loader,clip-text-encode,get-video-components,tencent-text-to-model-node,tencent-image-to-model-node,open-ai-chat-node,subgraph-blueprint-canny-to-video-ltx-2-0,subgraph-blueprint-pose-to-video-ltx-2-0}]");
+
 @custom-variant touch (@media (hover: none));
 
 @theme {
@@ -93,6 +99,10 @@
   --color-magenta-300: #ceaac9;
   --color-magenta-700: #6a246a;
 
+  --color-ocean-300: #badde8;
+  --color-ocean-600: #2f687a;
+  --color-ocean-900: #253236;
+
   --color-danger-100: #c02323;
   --color-danger-200: #d62952;
 
@@ -107,6 +117,7 @@
   --color-interface-panel-job-progress-secondary: var(
     --color-alpha-azure-600-30
   );
+  --color-interface-panel-job-progress-border: var(--base-foreground);
 
   --color-blue-selection: rgb(from var(--color-azure-600) r g b / 0.3);
   --color-node-hover-100: rgb(from var(--color-charcoal-800) r g b/ 0.15);
@@ -148,6 +159,7 @@
   --comfy-menu-bg: #353535;
   --comfy-menu-secondary-bg: #292929;
   --comfy-topbar-height: 2.5rem;
+  --workflow-tabs-height: 2.375rem;
   --comfy-input-bg: #222;
   --input-text: #ddd;
   --descrip-text: #999;
@@ -212,6 +224,10 @@
   --interface-panel-surface: var(--color-white);
   --interface-stroke: var(--color-smoke-300);
 
+  --interface-builder-mode-background: var(--color-ocean-300);
+  --interface-builder-mode-button-background: var(--color-ocean-600);
+  --interface-builder-mode-button-foreground: var(--color-white);
+
   --nav-background: var(--color-white);
 
   --node-border: var(--color-smoke-300);
@@ -371,6 +387,10 @@
   --interface-panel-surface: var(--color-charcoal-800);
   --interface-stroke: var(--color-charcoal-400);
 
+  --interface-builder-mode-background: var(--color-ocean-900);
+  --interface-builder-mode-button-background: var(--color-ocean-600);
+  --interface-builder-mode-button-foreground: var(--color-white);
+
   --nav-background: var(--color-charcoal-800);
 
   --node-border: var(--color-charcoal-500);
@@ -406,6 +426,7 @@
   --color-interface-panel-job-progress-secondary: var(
     --color-alpha-azure-600-30
   );
+  --color-interface-panel-job-progress-border: var(--base-foreground);
 
   --text-secondary: var(--color-slate-100);
   --text-primary: var(--color-white);
@@ -504,6 +525,15 @@
   --color-comfy-menu-bg: var(--comfy-menu-bg);
   --color-comfy-menu-secondary: var(--comfy-menu-secondary-bg);
 
+  --color-interface-builder-mode-background: var(
+    --interface-builder-mode-background
+  );
+  --color-interface-builder-mode-button-background: var(
+    --interface-builder-mode-button-background
+  );
+  --color-interface-builder-mode-button-foreground: var(
+    --interface-builder-mode-button-foreground
+  );
   --color-interface-stroke: var(--interface-stroke);
   --color-nav-background: var(--nav-background);
   --color-node-border: var(--node-border);
@@ -1186,7 +1216,7 @@ button.comfy-queue-btn {
 .graphdialog {
   min-height: 1em;
   background-color: var(--comfy-menu-bg);
-  z-index: 41; /* z-index is set to 41 here in order to appear over selection-overlay-container which should have a z-index of 40 */
+  z-index: 1500;
 }
 
 .graphdialog .name {
@@ -1871,3 +1901,22 @@ audio.comfy-audio.empty-audio-widget {
   margin-left: 15px;
 }
 /* ===================== End of Mask Editor Styles ===================== */
+
+/* ===================== Skeleton Shimmer ===================== */
+.skeleton-shimmer {
+  background:
+    linear-gradient(135deg, rgb(188 188 188 / 0.5) 0%, rgb(0 0 0 / 0.5) 100%) 0
+      0 / 200% 200%,
+    #000;
+  animation: skeleton-shimmer 2s ease-in-out infinite;
+}
+
+@keyframes skeleton-shimmer {
+  0%,
+  100% {
+    background-position: 100% 100%;
+  }
+  50% {
+    background-position: 0 0;
+  }
+}

packages/design-system/src/icons/bfl.svg

@@ -0,0 +1,10 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1471_12672)">
+<path d="M365.047 229.802H310.584L256.118 153.072L86.2157 392.168H140.796L256.115 229.807H310.581L195.261 392.168H249.994L365.047 229.802L512 436.698H470.893V436.7H426.019V392.343L365.047 306.532L304.415 392.178V436.698H163.632L163.629 436.703H109.164L109.167 436.698H-0.105347L256.118 76L365.047 229.802Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1471_12672">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/design-system/src/icons/bria.svg

@@ -0,0 +1,18 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1471_12667)">
+<g clip-path="url(#clip1_1471_12667)">
+<path d="M0.307203 236.902C1.1008 227.43 4.48 211.021 6.5792 201.139C23.5008 121.805 83.0208 46.1824 160.691 20.3776V389.734H411.443C419.84 389.734 446.259 381.158 455.168 377.446C468.685 371.814 480.691 363.648 491.597 354.074C465.357 424.038 401.024 480.896 329.242 501.094C314.01 505.37 290.611 510.694 275.226 512H239.59C223.667 508.16 207.155 507.136 191.206 503.117C103.936 481.152 29.7984 406.63 8.704 318.925C5.0176 303.59 4.0704 287.744 0.307203 272.538C1.024 260.89 -0.665597 248.397 0.307203 236.877V236.902Z" fill="#8E4CFF"/>
+<path d="M265.062 211.43H375.808C378.394 211.43 392.55 217.498 395.75 219.494C427.213 238.925 420.122 291.226 384.794 301.952C382.771 302.566 366.669 305.69 365.619 305.69H268.877L265.062 301.875V211.456V211.43Z" fill="#8E4CFF"/>
+<path d="M265.062 137.549V48.4096H373.248C374.861 48.4096 384.205 53.8624 386.611 55.424C406.528 68.3776 414.49 96.5376 401.152 117.069C398.106 121.754 380.339 137.574 375.808 137.574H265.062V137.549Z" fill="#8E4CFF"/>
+<path d="M489.062 147.738C496.128 167.706 505.523 187.264 506.906 208.845L491.674 192.282C477.773 180.736 460.928 174.003 443.29 170.624L489.062 147.738Z" fill="#8E4CFF"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1471_12667">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1471_12667">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>