fix: use system hour cycle for queue times

fix: stop trackpad pinch/swipe gestures from breaking the UI (#12052 )
## Summary On macOS trackpads, several browser default gestures were leaking through and breaking the workflow: - **Pinch-zoom on a focused textarea widget** triggered page-level zoom, pushing `position: fixed` UI (notably `ComfyActionbar`) off-screen until a reload. - **Horizontal swipe on a focused textarea widget** triggered browser back/forward, leaving the workflow. - **Pinch / horizontal swipe inside the image picker dropdown** had the same two issues, because PrimeVue `Popover` teleports content to `document.body` and the `LGraphNode` wheel handler never sees the events. Fixes FE-292. ## Why - **`overscroll-behavior: none` on `html, body`** — horizontal swipe to back/forward is decided by the browser at gesture start; JS preventDefault can't reliably beat it. `overscroll-behavior` is the standards-track signal for opting out, and ComfyUI is a full-screen editor that never benefits from native overscroll. - **`useCanvasInteractions` now treats pinch-zoom and horizontal-dominant wheel as canvas gestures** that override widget wheel consumption, so the gesture pans/zooms the canvas instead of falling through to destructive browser defaults. The check is exported as `isCanvasGestureWheel` for reuse. - **`FormDropdownMenu` has its own minimal `onWheel`** that only preventDefaults destructive gestures and deliberately does not forward to the canvas. The dropdown is its own scroll container and shouldn't leak interactions into the editor; vertical scrolling stays native. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-12052-fix-stop-trackpad-pinch-swipe-gestures-from-breaking-the-UI-3596d73d3650810aac3fcd8a71b29f9e) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <drjkl@comfy.org>
2026-05-21 13:03:18 +00:00 · 2026-05-15 20:05:17 -07:00 · 2026-05-15 14:35:54 +00:00 · 2026-05-15 02:07:09 +00:00 · 2026-05-15 02:05:46 +00:00 · 2026-05-15 01:48:35 +00:00
194 changed files with 6065 additions and 1551 deletions
--- a/.github/actions/cloud-nodes-pull/action.yaml
+++ b/.github/actions/cloud-nodes-pull/action.yaml
@@ -0,0 +1,19 @@
+name: Cloud Nodes Pull
+description: 'Refresh the apps/website cloud nodes snapshot from the Comfy Cloud /api/object_info endpoint'
+inputs:
+  api_key:
+    description: 'Comfy Cloud API key (WEBSITE_CLOUD_API_KEY).'
+    required: true
+runs:
+  using: 'composite'
+  steps:
+    # Note: this action assumes the frontend repo is checked out at the workspace root.
+
+    - name: Setup frontend
+      uses: ./.github/actions/setup-frontend
+
+    - name: Refresh cloud nodes snapshot
+      shell: bash
+      env:
+        WEBSITE_CLOUD_API_KEY: ${{ inputs.api_key }}
+      run: pnpm --filter @comfyorg/website cloud-nodes:refresh-snapshot
--- a/.github/workflows/ci-tests-e2e-coverage.yaml
+++ b/.github/workflows/ci-tests-e2e-coverage.yaml
@@ -106,17 +106,12 @@ jobs:
      - name: Generate HTML coverage report
        if: steps.coverage-shards.outputs.has-coverage == 'true'
        run: |
-          if [ ! -s coverage/playwright/coverage.lcov ]; then
-            echo "No coverage data; generating placeholder report."
-            mkdir -p coverage/html
-            echo '<html><body><h1>No E2E coverage data available for this run.</h1></body></html>' > coverage/html/index.html
-            exit 0
-          fi
          genhtml coverage/playwright/coverage.lcov \
            -o coverage/html \
            --title "ComfyUI E2E Coverage" \
            --no-function-coverage \
-            --precision 1
+            --precision 1 \
+            --ignore-errors source,unmapped

      - name: Upload HTML report artifact
        if: steps.coverage-shards.outputs.has-coverage == 'true'
@@ -130,7 +125,8 @@ jobs:
    needs: merge
    if: >
      github.event.workflow_run.head_branch == 'main' &&
-      needs.merge.outputs.has-coverage == 'true'
+      needs.merge.outputs.has-coverage == 'true' &&
+      github.event.workflow_run.event == 'push'
    runs-on: ubuntu-latest
    permissions:
      pages: write
--- a/.github/workflows/ci-vercel-website-preview.yaml
+++ b/.github/workflows/ci-vercel-website-preview.yaml
@@ -58,6 +58,7 @@ jobs:
        env:
          WEBSITE_ASHBY_API_KEY: ${{ secrets.WEBSITE_ASHBY_API_KEY }}
          WEBSITE_ASHBY_JOB_BOARD_NAME: ${{ secrets.WEBSITE_ASHBY_JOB_BOARD_NAME }}
+          WEBSITE_CLOUD_API_KEY: ${{ secrets.WEBSITE_CLOUD_API_KEY }}
        run: vercel build

      - name: Fetch head commit metadata
@@ -151,10 +152,20 @@ jobs:
      - name: Pull Vercel environment information
        run: vercel pull --yes --environment=production

+      - name: Verify WEBSITE_CLOUD_API_KEY is present for production build
+        env:
+          WEBSITE_CLOUD_API_KEY: ${{ secrets.WEBSITE_CLOUD_API_KEY }}
+        run: |
+          if [ -z "${WEBSITE_CLOUD_API_KEY:-}" ]; then
+            echo "::error title=Missing WEBSITE_CLOUD_API_KEY::Production builds require WEBSITE_CLOUD_API_KEY so /cloud/supported-nodes is generated from fresh Cloud API data. Add it as a GitHub Actions repo secret and to the Vercel project environment. See apps/website/README.md."
+            exit 1
+          fi
+
      - name: Build project artifacts
        env:
          WEBSITE_ASHBY_API_KEY: ${{ secrets.WEBSITE_ASHBY_API_KEY }}
          WEBSITE_ASHBY_JOB_BOARD_NAME: ${{ secrets.WEBSITE_ASHBY_JOB_BOARD_NAME }}
+          WEBSITE_CLOUD_API_KEY: ${{ secrets.WEBSITE_CLOUD_API_KEY }}
        run: vercel build --prod

      - name: Deploy project artifacts to Vercel
--- a/.github/workflows/release-website.yaml
+++ b/.github/workflows/release-website.yaml
@@ -1,6 +1,6 @@
-# Description: Manual workflow to refresh the apps/website Ashby roles snapshot
-# and open a PR. Merging the PR triggers the existing Vercel website production
-# deploy via ci-vercel-website-preview.yaml.
+# Description: Manual workflow to refresh the apps/website Ashby roles and
+# cloud nodes snapshots and open a PR. Merging the PR triggers the existing
+# Vercel website production deploy via ci-vercel-website-preview.yaml.
 name: 'Release: Website'

 on:
@@ -11,7 +11,7 @@ concurrency:
  cancel-in-progress: true

 jobs:
-  refresh-snapshot:
+  refresh-snapshots:
    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
    runs-on: ubuntu-latest
    permissions:
@@ -31,28 +31,39 @@ jobs:
          api_key: ${{ secrets.WEBSITE_ASHBY_API_KEY }}
          job_board_name: ${{ secrets.WEBSITE_ASHBY_JOB_BOARD_NAME }}

+      - name: Refresh cloud nodes snapshot
+        uses: ./.github/actions/cloud-nodes-pull
+        with:
+          api_key: ${{ secrets.WEBSITE_CLOUD_API_KEY }}
+
      - name: Create Pull Request
        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
        with:
          token: ${{ secrets.PR_GH_TOKEN }}
-          commit-message: 'chore(website): refresh Ashby roles snapshot'
-          title: 'chore(website): refresh Ashby roles snapshot'
+          commit-message: 'chore(website): refresh Ashby and cloud nodes snapshots'
+          title: 'chore(website): refresh Ashby and cloud nodes snapshots'
          body: |
-            Automated refresh of `apps/website/src/data/ashby-roles.snapshot.json`
-            from the Ashby job board API.
+            Automated refresh of remote-data snapshots used by the website
+            build:
+
+            - `apps/website/src/data/ashby-roles.snapshot.json` — Ashby job
+              board API
+            - `apps/website/src/data/cloud-nodes.snapshot.json` — Comfy Cloud
+              `/api/object_info`

            **Flow:**
            1. `Release: Website` workflow ran (manual trigger).
-            2. This PR opens with the regenerated snapshot.
+            2. This PR opens with the regenerated snapshots.
            3. `CI: Vercel Website Preview` deploys a preview for review.
            4. Merging to `main` triggers the production Vercel deploy.

-            The snapshot fallback in `apps/website/src/utils/ashby.ts` remains
-            intact: builds without `WEBSITE_ASHBY_API_KEY` continue to use the
-            committed snapshot.
+            The snapshot fallback in `apps/website/src/utils/ashby.ts` and
+            `apps/website/src/utils/cloudNodes.ts` remains intact: builds
+            without the respective API keys continue to use the committed
+            snapshot (with a warning annotation in CI).

            Triggered by workflow run `${{ github.run_id }}`.
-          branch: chore/refresh-ashby-snapshot-${{ github.run_id }}
+          branch: chore/refresh-website-snapshots-${{ github.run_id }}
          base: main
          labels: |
            Release:Website
--- a/apps/website/README.md
+++ b/apps/website/README.md
@@ -119,6 +119,44 @@ snapshots can't be accidentally committed.

 Build-time env var: `WEBSITE_CLOUD_API_KEY` (Cloud `/api/object_info` auth; the build falls back to the committed snapshot when unset). Must also be set in the Vercel project environment.

+### Production strictness
+
+`src/utils/cloudNodes.build.ts` throws when `fetchCloudNodesForBuild()` returns
+`{ status: 'stale' }` **and** `process.env.VERCEL_ENV === 'production'`. This
+prevents the production deploy from silently shipping an out-of-date snapshot
+when the Cloud API is unreachable or `WEBSITE_CLOUD_API_KEY` is missing. Preview
+and local builds continue to use the committed snapshot with a warning
+annotation.
+
+### Required GitHub Actions / Vercel secrets
+
+| Name                    | Where                                           | Purpose                                                                |
+| ----------------------- | ----------------------------------------------- | ---------------------------------------------------------------------- |
+| `WEBSITE_CLOUD_API_KEY` | GitHub Actions repo secret + Vercel project env | Auth for Cloud `/api/object_info`. Required for fresh production data. |
+
+The `Release: Website` workflow uses the GitHub Actions secret to regenerate
+`apps/website/src/data/cloud-nodes.snapshot.json` via
+`.github/actions/cloud-nodes-pull/action.yaml`. The Vercel environment value is
+read at build time by `vercel build` in `ci-vercel-website-preview.yaml`; the
+`deploy-production` job hard-fails before `vercel build --prod` if the secret
+is missing.
+
+### Refreshing the snapshot
+
+To update the committed snapshot manually (e.g. after onboarding new packs
+to Comfy Cloud):
+
+```bash
+WEBSITE_CLOUD_API_KEY=… \
+  pnpm --filter @comfyorg/website cloud-nodes:refresh-snapshot
+git commit apps/website/src/data/cloud-nodes.snapshot.json
+```
+
+The script exits non-zero on any non-fresh outcome so stale/empty snapshots
+can't be accidentally committed. Otherwise the `Release: Website` GitHub
+Actions workflow runs the same step on every manual dispatch and opens a PR
+with the refreshed snapshot.
+
 ## HubSpot contact form

 The contact page uses HubSpot's hosted form embed for the interest form:
--- a/apps/website/src/components/common/SiteFooter.vue
+++ b/apps/website/src/components/common/SiteFooter.vue
@@ -82,7 +82,7 @@ const companyColumn: { title: string; links: FooterLink[] } = {
  ]
 }

-const contactColumn = {
+const contactColumn: { title: string; links: FooterLink[] } = {
  title: t('footer.contact', locale),
  links: [
    { label: t('footer.sales', locale), href: routes.contact },
@@ -91,6 +91,11 @@ const contactColumn = {
      href: externalLinks.support,
      external: true
    },
+    {
+      label: t('footer.cloudStatus', locale),
+      href: externalLinks.cloudStatus,
+      external: true
+    },
    { label: t('footer.press', locale), href: 'mailto:press@comfy.org' }
  ]
 }
--- a/apps/website/src/config/routes.ts
+++ b/apps/website/src/config/routes.ts
@@ -32,6 +32,7 @@ export const externalLinks = {
  apiKeys: 'https://platform.comfy.org/profile/api-keys',
  blog: 'https://blog.comfy.org/',
  cloud: 'https://cloud.comfy.org',
+  cloudStatus: 'https://status.comfy.org',
  discord: 'https://discord.com/invite/comfyorg',
  docs: 'https://docs.comfy.org/',
  docsApi: 'https://docs.comfy.org/api-reference/cloud',
--- a/apps/website/src/i18n/translations.ts
+++ b/apps/website/src/i18n/translations.ts
@@ -1773,6 +1773,7 @@ const translations = {
  'footer.support': { en: 'Support', 'zh-CN': '支持' },
  'footer.sales': { en: 'Sales', 'zh-CN': '销售' },
  'footer.press': { en: 'Press', 'zh-CN': '媒体' },
+  'footer.cloudStatus': { en: 'Cloud Status', 'zh-CN': '云端状态' },
  'footer.blog': { en: 'Blog', 'zh-CN': '博客' },
  'footer.location': {
    en: 'San Francisco, USA',
--- a/apps/website/src/utils/cloudNodes.build.test.ts
+++ b/apps/website/src/utils/cloudNodes.build.test.ts
@@ -0,0 +1,128 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { FetchOutcome } from './cloudNodes'
+import type { NodesSnapshot } from '../data/cloudNodes'
+
+const fetchCloudNodesMock = vi.hoisted(() =>
+  vi.fn<() => Promise<FetchOutcome>>()
+)
+const reportCloudNodesOutcomeMock = vi.hoisted(() => vi.fn())
+
+vi.mock('./cloudNodes', () => ({
+  fetchCloudNodesForBuild: fetchCloudNodesMock
+}))
+
+vi.mock('./cloudNodes.ci', () => ({
+  reportCloudNodesOutcome: reportCloudNodesOutcomeMock
+}))
+
+import { loadPacksForBuild } from './cloudNodes.build'
+
+const SNAPSHOT: NodesSnapshot = {
+  fetchedAt: '2026-04-01T00:00:00.000Z',
+  packs: [
+    {
+      id: 'snapshot-pack',
+      displayName: 'Snapshot Pack',
+      nodes: [
+        { name: 'SnapshotNode', displayName: 'Snapshot Node', category: 'x' }
+      ]
+    }
+  ]
+}
+
+describe('loadPacksForBuild', () => {
+  const savedVercelEnv = process.env.VERCEL_ENV
+
+  beforeEach(() => {
+    fetchCloudNodesMock.mockReset()
+    reportCloudNodesOutcomeMock.mockReset()
+    delete process.env.VERCEL_ENV
+  })
+
+  afterEach(() => {
+    if (savedVercelEnv === undefined) {
+      delete process.env.VERCEL_ENV
+      return
+    }
+    process.env.VERCEL_ENV = savedVercelEnv
+  })
+
+  it('returns packs when fetch is fresh', async () => {
+    fetchCloudNodesMock.mockResolvedValue({
+      status: 'fresh',
+      snapshot: SNAPSHOT,
+      droppedCount: 0,
+      droppedNodes: []
+    })
+
+    const packs = await loadPacksForBuild()
+    expect(packs).toBe(SNAPSHOT.packs)
+    expect(reportCloudNodesOutcomeMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('returns snapshot packs when outcome is stale outside production', async () => {
+    fetchCloudNodesMock.mockResolvedValue({
+      status: 'stale',
+      snapshot: SNAPSHOT,
+      reason: 'missing WEBSITE_CLOUD_API_KEY'
+    })
+
+    const packs = await loadPacksForBuild()
+    expect(packs).toBe(SNAPSHOT.packs)
+    expect(reportCloudNodesOutcomeMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('returns snapshot packs when outcome is stale on Vercel preview', async () => {
+    process.env.VERCEL_ENV = 'preview'
+    fetchCloudNodesMock.mockResolvedValue({
+      status: 'stale',
+      snapshot: SNAPSHOT,
+      reason: 'HTTP 503'
+    })
+
+    const packs = await loadPacksForBuild()
+    expect(packs).toBe(SNAPSHOT.packs)
+    expect(reportCloudNodesOutcomeMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('throws when outcome is stale on Vercel production', async () => {
+    process.env.VERCEL_ENV = 'production'
+    fetchCloudNodesMock.mockResolvedValue({
+      status: 'stale',
+      snapshot: SNAPSHOT,
+      reason: 'missing WEBSITE_CLOUD_API_KEY'
+    })
+
+    await expect(loadPacksForBuild()).rejects.toThrow(
+      /stale data in a production build/
+    )
+    await expect(loadPacksForBuild()).rejects.toThrow(
+      /missing WEBSITE_CLOUD_API_KEY/
+    )
+  })
+
+  it('throws when outcome is failed regardless of environment', async () => {
+    fetchCloudNodesMock.mockResolvedValue({
+      status: 'failed',
+      reason: 'network error: ECONNREFUSED'
+    })
+
+    await expect(loadPacksForBuild()).rejects.toThrow(
+      /Cloud nodes fetch failed and no snapshot is available/
+    )
+    await expect(loadPacksForBuild()).rejects.toThrow(/ECONNREFUSED/)
+  })
+
+  it('still reports outcome before throwing on stale-in-production', async () => {
+    process.env.VERCEL_ENV = 'production'
+    fetchCloudNodesMock.mockResolvedValue({
+      status: 'stale',
+      snapshot: SNAPSHOT,
+      reason: 'HTTP 503'
+    })
+
+    await expect(loadPacksForBuild()).rejects.toThrow()
+    expect(reportCloudNodesOutcomeMock).toHaveBeenCalledTimes(1)
+  })
+})
--- a/apps/website/src/utils/cloudNodes.build.ts
+++ b/apps/website/src/utils/cloudNodes.build.ts
@@ -3,6 +3,14 @@ import type { Pack } from '../data/cloudNodes'
 import { fetchCloudNodesForBuild } from './cloudNodes'
 import { reportCloudNodesOutcome } from './cloudNodes.ci'

+const REFRESH_HINT =
+  'Run `pnpm --filter @comfyorg/website cloud-nodes:refresh-snapshot` locally and commit the snapshot, ' +
+  'or re-run the `Release: Website` workflow with a valid WEBSITE_CLOUD_API_KEY.'
+
+function isProductionBuild(): boolean {
+  return process.env.VERCEL_ENV === 'production'
+}
+
 /**
 * Resolve the list of packs to render at build time.
 *
@@ -11,6 +19,10 @@ import { reportCloudNodesOutcome } from './cloudNodes.ci'
 * same source. `fetchCloudNodesForBuild` is memoized on a module-level
 * `inflight` promise, so repeated calls in the same build process share a
 * single network round-trip and the same outcome.
+ *
+ * Production builds (VERCEL_ENV=production) fail hard on a stale outcome
+ * to prevent silently shipping out-of-date snapshot data. Preview and
+ * local builds continue to use the committed snapshot.
 */
 export async function loadPacksForBuild(): Promise<Pack[]> {
  const outcome = await fetchCloudNodesForBuild()
@@ -18,8 +30,14 @@ export async function loadPacksForBuild(): Promise<Pack[]> {

  if (outcome.status === 'failed') {
    throw new Error(
-      `Cloud nodes fetch failed and no snapshot is available. Reason: ${outcome.reason}. ` +
-        'Run `pnpm --filter @comfyorg/website cloud-nodes:refresh-snapshot` locally and commit the snapshot.'
+      `Cloud nodes fetch failed and no snapshot is available. Reason: ${outcome.reason}. ${REFRESH_HINT}`
+    )
+  }
+
+  if (outcome.status === 'stale' && isProductionBuild()) {
+    throw new Error(
+      `Cloud nodes fetch returned stale data in a production build (VERCEL_ENV=production). ` +
+        `Reason: ${outcome.reason}. ${REFRESH_HINT}`
    )
  }

--- a/browser_tests/assets/missing/missing_media_cloud_output_annotation.json
+++ b/browser_tests/assets/missing/missing_media_cloud_output_annotation.json
@@ -0,0 +1,45 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "LoadImage",
+      "pos": [50, 120],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": [
+        "147257c95a3e957e0deee73a077cfec89da2d906dd086ca70a2b0c897a9591d6e.png[output]",
+        "image"
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}
--- a/browser_tests/assets/missing/missing_media_output_annotations.json
+++ b/browser_tests/assets/missing/missing_media_output_annotations.json
@@ -0,0 +1,84 @@
+{
+  "last_node_id": 3,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "LoadImage",
+      "pos": [50, 120],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["ComfyUI_00001_.png [output]", "image"]
+    },
+    {
+      "id": 2,
+      "type": "LoadVideo",
+      "pos": [430, 120],
+      "size": [400, 200],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "VIDEO",
+          "type": "VIDEO",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadVideo"
+      },
+      "widgets_values": ["clip.mp4 [output]", "image"]
+    },
+    {
+      "id": 3,
+      "type": "LoadAudio",
+      "pos": [810, 120],
+      "size": [400, 200],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "AUDIO",
+          "type": "AUDIO",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadAudio"
+      },
+      "widgets_values": ["sound.wav [output]", null, ""]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}
--- a/browser_tests/assets/plain_video.mp4
+++ b/browser_tests/assets/plain_video.mp4
--- a/browser_tests/assets/vueNodes/ksampler-denoise-widget-link.json
+++ b/browser_tests/assets/vueNodes/ksampler-denoise-widget-link.json
@@ -0,0 +1,90 @@
+{
+  "id": "06e5b524-5a40-40b9-b561-199dfab18cf0",
+  "revision": 0,
+  "last_node_id": 12,
+  "last_link_id": 10,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "KSampler",
+      "pos": [230, 110],
+      "size": [270, 317.5666809082031],
+      "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": null
+        },
+        {
+          "name": "denoise",
+          "type": "FLOAT",
+          "widget": {
+            "name": "denoise"
+          },
+          "link": 10
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
+    },
+    {
+      "id": 11,
+      "type": "PrimitiveFloat",
+      "pos": [-80.55032348632812, 375.2260443115233],
+      "size": [270, 80.23332977294922],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "FLOAT",
+          "type": "FLOAT",
+          "links": [10]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "PrimitiveFloat"
+      },
+      "widgets_values": [0]
+    }
+  ],
+  "links": [[10, 11, 0, 10, 4, "FLOAT"]],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 0.8264462809917354,
+      "offset": [1335.8909766107738, 692.7345403667316]
+    },
+    "frontendVersion": "1.45.4"
+  },
+  "version": 0.4
+}
--- a/browser_tests/fixtures/VueNodeHelpers.ts
+++ b/browser_tests/fixtures/VueNodeHelpers.ts
@@ -246,4 +246,18 @@ export class VueNodeHelpers {
      position: { x: box.width / 2, y: box.height * 0.75 }
    })
  }
+  async isSlotConnected(slot: Locator) {
+    const key = await slot.getByTestId('slot-dot').getAttribute('data-slot-key')
+    if (!key) return false
+
+    return await this.page.evaluate((key) => {
+      const [nodeId, type, slotId] = key.split('-')
+      const node = app?.canvas?.graph?.getNodeById(nodeId)
+      if (!node) return false
+
+      return type === 'in'
+        ? node.inputs[Number(slotId)]?.link !== null
+        : !!node.outputs[Number(slotId)].links?.length
+    }, key)
+  }
 }
--- a/browser_tests/fixtures/components/ContextMenu.ts
+++ b/browser_tests/fixtures/components/ContextMenu.ts
@@ -6,12 +6,16 @@ export class ContextMenu {
  public readonly litegraphMenu: Locator
  public readonly litegraphContextMenu: Locator
  public readonly menuItems: Locator
+  protected readonly anyMenu: Locator

  constructor(public readonly page: Page) {
    this.primeVueMenu = page.locator('.p-contextmenu, .p-menu')
    this.litegraphMenu = page.locator('.litemenu')
    this.litegraphContextMenu = page.locator('.litecontextmenu')
    this.menuItems = page.locator('.p-menuitem, .litemenu-entry')
+    this.anyMenu = this.primeVueMenu
+      .or(this.litegraphMenu)
+      .or(this.litegraphContextMenu)
  }

  async clickMenuItem(name: string): Promise<void> {
@@ -36,16 +40,7 @@ export class ContextMenu {
  }

  async isVisible(): Promise<boolean> {
-    const primeVueVisible = await this.primeVueMenu
-      .isVisible()
-      .catch(() => false)
-    const litegraphVisible = await this.litegraphMenu
-      .isVisible()
-      .catch(() => false)
-    const litegraphContextVisible = await this.litegraphContextMenu
-      .isVisible()
-      .catch(() => false)
-    return primeVueVisible || litegraphVisible || litegraphContextVisible
+    return await this.anyMenu.isVisible()
  }

  async assertHasItems(items: string[]): Promise<void> {
@@ -58,7 +53,7 @@ export class ContextMenu {

  async openFor(locator: Locator): Promise<this> {
    await locator.click({ button: 'right' })
-    await expect.poll(() => this.isVisible()).toBe(true)
+    await expect(this.anyMenu).toBeVisible()
    return this
  }

--- a/browser_tests/fixtures/components/SidebarTab.ts
+++ b/browser_tests/fixtures/components/SidebarTab.ts
@@ -95,6 +95,7 @@ export class NodeLibrarySidebarTabV2 extends SidebarTab {
  public readonly allTab: Locator
  public readonly blueprintsTab: Locator
  public readonly sortButton: Locator
+  public readonly nodePreview: Locator

  constructor(public override readonly page: Page) {
    super(page, 'node-library')
@@ -103,6 +104,7 @@ export class NodeLibrarySidebarTabV2 extends SidebarTab {
    this.allTab = this.getTab('All')
    this.blueprintsTab = this.getTab('Blueprints')
    this.sortButton = this.sidebarContent.getByRole('button', { name: 'Sort' })
+    this.nodePreview = page.getByTestId(TestIds.sidebar.nodePreviewCard)
  }

  getTab(name: string) {
--- a/browser_tests/fixtures/components/SubgraphEditor.ts
+++ b/browser_tests/fixtures/components/SubgraphEditor.ts
@@ -0,0 +1,81 @@
+import type { Locator } from '@playwright/test'
+
+import { comfyExpect as expect } from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { dragByIndex } from '@e2e/fixtures/utils/dragAndDrop'
+import { VueNodeFixture } from '@e2e/fixtures/utils/vueNodeFixtures'
+
+export class SubgraphEditor {
+  public readonly root: Locator
+  public readonly promotionItems: Locator
+
+  constructor(protected readonly comfyPage: ComfyPage) {
+    this.root = this.comfyPage.menu.propertiesPanel.root
+    this.promotionItems = this.root.getByTestId(
+      TestIds.subgraphEditor.widgetItem
+    )
+  }
+
+  async open(subgraphNode: Locator) {
+    await new VueNodeFixture(subgraphNode).select()
+    const menu = await this.comfyPage.contextMenu.openFor(subgraphNode)
+    await menu.clickMenuItemExact('Edit Subgraph Widgets')
+    await expect(this.root, 'Open Properties Panel').toBeVisible()
+  }
+
+  resolveItem(options: {
+    nodeName?: string
+    nodeId?: string
+    widgetName: string
+  }): Locator {
+    const nodeItems =
+      options.nodeId !== undefined
+        ? this.comfyPage.page.locator(`[data-nodeid="${options.nodeId}"]`)
+        : options.nodeName !== undefined
+          ? this.promotionItems.filter({
+              has: this.comfyPage.page
+                .getByTestId(TestIds.subgraphEditor.nodeName)
+                .filter({ hasText: options.nodeName })
+            })
+          : this.promotionItems
+
+    return nodeItems.filter({
+      has: this.comfyPage.page
+        .getByTestId(TestIds.subgraphEditor.widgetLabel)
+        .filter({ hasText: options.widgetName })
+    })
+  }
+
+  getToggleButton(item: Locator) {
+    return item.getByTestId(TestIds.subgraphEditor.widgetToggle)
+  }
+
+  async togglePromotionOnItem(item: Locator, toState?: boolean) {
+    const toggleIcon = item.getByTestId(TestIds.subgraphEditor.iconEye)
+    if (toState !== undefined) {
+      const expectedIcon = `icon-[lucide--eye${toState ? '-off' : ''}]`
+      await expect(toggleIcon).toContainClass(expectedIcon)
+    }
+    await toggleIcon.click()
+  }
+
+  async togglePromotion(
+    subgraphNode: Locator,
+    options: {
+      nodeName?: string
+      nodeId?: string
+      widgetName: string
+      toState?: boolean
+    }
+  ) {
+    await this.open(subgraphNode)
+
+    const item = this.resolveItem(options)
+    await this.togglePromotionOnItem(item, options.toState)
+  }
+  async dragItem(fromIndex: number, toIndex: number) {
+    await dragByIndex(this.promotionItems, fromIndex, toIndex)
+    await this.comfyPage.nextFrame()
+  }
+}
--- a/browser_tests/fixtures/data/templateFixtures.ts
+++ b/browser_tests/fixtures/data/templateFixtures.ts
@@ -2,6 +2,11 @@ import type {
  TemplateInfo,
  WorkflowTemplates
 } from '@/platform/workflow/templates/types/template'
+import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
+
+const Cloud = TemplateIncludeOnDistributionEnum.Cloud
+const Desktop = TemplateIncludeOnDistributionEnum.Desktop
+const Local = TemplateIncludeOnDistributionEnum.Local

 export function makeTemplate(
  overrides: Partial<TemplateInfo> & Pick<TemplateInfo, 'name'>
@@ -26,3 +31,33 @@ export function mockTemplateIndex(
    }
  ]
 }
+
+export const STABLE_CLOUD_TEMPLATE: TemplateInfo = makeTemplate({
+  name: 'cloud-stable',
+  title: 'Cloud Stable',
+  includeOnDistributions: [Cloud]
+})
+
+export const STABLE_DESKTOP_TEMPLATE: TemplateInfo = makeTemplate({
+  name: 'desktop-stable',
+  title: 'Desktop Stable',
+  includeOnDistributions: [Desktop]
+})
+
+export const STABLE_LOCAL_TEMPLATE: TemplateInfo = makeTemplate({
+  name: 'local-stable',
+  title: 'Local Stable',
+  includeOnDistributions: [Local]
+})
+
+export const STABLE_UNRESTRICTED_TEMPLATE: TemplateInfo = makeTemplate({
+  name: 'unrestricted-stable',
+  title: 'Unrestricted Stable'
+})
+
+export const ALL_DISTRIBUTION_TEMPLATES: TemplateInfo[] = [
+  STABLE_CLOUD_TEMPLATE,
+  STABLE_DESKTOP_TEMPLATE,
+  STABLE_LOCAL_TEMPLATE,
+  STABLE_UNRESTRICTED_TEMPLATE
+]
--- a/browser_tests/fixtures/helpers/BuilderSelectHelper.ts
+++ b/browser_tests/fixtures/helpers/BuilderSelectHelper.ts
@@ -2,34 +2,7 @@ import type { Locator, Page } from '@playwright/test'

 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
-
-/**
- * Drag an element from one index to another within a list of locators.
- * Uses mousedown/mousemove/mouseup to trigger the DraggableList library.
- *
- * DraggableList toggles position when the dragged item's center crosses
- * past an idle item's center. To reliably land at the target position,
- * we overshoot slightly past the target's far edge.
- */
-async function dragByIndex(items: Locator, fromIndex: number, toIndex: number) {
-  const fromBox = await items.nth(fromIndex).boundingBox()
-  const toBox = await items.nth(toIndex).boundingBox()
-  if (!fromBox || !toBox) throw new Error('Item not visible for drag')
-
-  const draggingDown = toIndex > fromIndex
-  const targetY = draggingDown
-    ? toBox.y + toBox.height * 0.9
-    : toBox.y + toBox.height * 0.1
-
-  const page = items.page()
-  await page.mouse.move(
-    fromBox.x + fromBox.width / 2,
-    fromBox.y + fromBox.height / 2
-  )
-  await page.mouse.down()
-  await page.mouse.move(toBox.x + toBox.width / 2, targetY, { steps: 10 })
-  await page.mouse.up()
-}
+import { dragByIndex } from '@e2e/fixtures/utils/dragAndDrop'

 export class BuilderSelectHelper {
  /** All IoItem locators in the current step sidebar. */
--- a/browser_tests/fixtures/helpers/ClipboardHelper.ts
+++ b/browser_tests/fixtures/helpers/ClipboardHelper.ts
@@ -6,6 +6,71 @@ import type { Locator, Page } from '@playwright/test'
 import type { KeyboardHelper } from '@e2e/fixtures/helpers/KeyboardHelper'
 import { getMimeType } from '@e2e/fixtures/utils/mimeTypeUtil'

+function readFilePayload(filePath: string) {
+  const buffer = readFileSync(filePath)
+  const bufferArray = [...new Uint8Array(buffer)]
+  const fileName = basename(filePath)
+  const fileType = getMimeType(fileName)
+
+  return { bufferArray, fileName, fileType }
+}
+
+async function dispatchFilePaste(
+  page: Page,
+  payload: ReturnType<typeof readFilePayload>
+): Promise<void> {
+  await page.evaluate(({ bufferArray, fileName, fileType }) => {
+    const file = new File([new Uint8Array(bufferArray)], fileName, {
+      type: fileType
+    })
+    const dataTransfer = new DataTransfer()
+    dataTransfer.items.add(file)
+
+    const target = document.activeElement ?? document
+    target.dispatchEvent(
+      new ClipboardEvent('paste', {
+        clipboardData: dataTransfer,
+        bubbles: true,
+        cancelable: true
+      })
+    )
+  }, payload)
+}
+
+async function interceptNextFilePaste(
+  page: Page,
+  payload: ReturnType<typeof readFilePayload>
+): Promise<void> {
+  await page.evaluate(({ bufferArray, fileName, fileType }) => {
+    document.addEventListener(
+      'paste',
+      (e: ClipboardEvent) => {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+
+        const file = new File([new Uint8Array(bufferArray)], fileName, {
+          type: fileType
+        })
+        const dataTransfer = new DataTransfer()
+        dataTransfer.items.add(file)
+
+        document.dispatchEvent(
+          new ClipboardEvent('paste', {
+            clipboardData: dataTransfer,
+            bubbles: true,
+            cancelable: true
+          })
+        )
+      },
+      { capture: true, once: true }
+    )
+  }, payload)
+}
+
+type PasteFileOptions = {
+  mode?: 'keyboard' | 'direct'
+}
+
 export class ClipboardHelper {
  constructor(
    private readonly keyboard: KeyboardHelper,
@@ -20,43 +85,20 @@ export class ClipboardHelper {
    await this.keyboard.ctrlSend('KeyV', locator ?? null)
  }

-  async pasteFile(filePath: string): Promise<void> {
-    const buffer = readFileSync(filePath)
-    const bufferArray = [...new Uint8Array(buffer)]
-    const fileName = basename(filePath)
-    const fileType = getMimeType(fileName)
+  async pasteFile(
+    filePath: string,
+    { mode = 'keyboard' }: PasteFileOptions = {}
+  ): Promise<void> {
+    const payload = readFilePayload(filePath)

-    // Register a one-time capturing-phase listener that intercepts the next
-    // paste event and injects file data onto clipboardData.
-    await this.page.evaluate(
-      ({ bufferArray, fileName, fileType }) => {
-        document.addEventListener(
-          'paste',
-          (e: ClipboardEvent) => {
-            e.preventDefault()
-            e.stopImmediatePropagation()
+    if (mode === 'keyboard') {
+      await interceptNextFilePaste(this.page, payload)
+      await this.paste()
+      return
+    }

-            const file = new File([new Uint8Array(bufferArray)], fileName, {
-              type: fileType
-            })
-            const dataTransfer = new DataTransfer()
-            dataTransfer.items.add(file)
-
-            const syntheticEvent = new ClipboardEvent('paste', {
-              clipboardData: dataTransfer,
-              bubbles: true,
-              cancelable: true
-            })
-            document.dispatchEvent(syntheticEvent)
-          },
-          { capture: true, once: true }
-        )
-      },
-      { bufferArray, fileName, fileType }
-    )
-
-    // Trigger a real Ctrl+V keystroke — the capturing listener above will
-    // intercept it and re-dispatch with file data attached.
-    await this.paste()
+    // Browser clipboard APIs cannot reliably seed arbitrary files in tests.
+    // Dispatch the app-level paste event with file clipboardData directly.
+    await dispatchFilePaste(this.page, payload)
  }
 }
--- a/browser_tests/fixtures/helpers/JobsApiMock.ts
+++ b/browser_tests/fixtures/helpers/JobsApiMock.ts
@@ -1,176 +0,0 @@
-import type { Page, Route } from '@playwright/test'
-import type {
-  JobDetailResponse,
-  JobEntry,
-  JobsListResponse
-} from '@comfyorg/ingest-types'
-
-const jobsListRoutePattern = /\/api\/jobs(?:\?.*)?$/
-const jobDetailRoutePattern = /\/api\/jobs\/[^/?#]+(?:\?.*)?$/
-const historyRoutePattern = /\/api\/history(?:\?.*)?$/
-const defaultJobsListLimit = 100
-
-export type MockJobRecord = {
-  listItem: JobEntry
-  detail: JobDetailResponse
-}
-
-function parsePositiveIntegerParam(url: URL, name: string): number | undefined {
-  const value = Number(url.searchParams.get(name))
-
-  return Number.isInteger(value) && value > 0 ? value : undefined
-}
-
-function getJobIdFromRequest(route: Route): string | null {
-  const url = new URL(route.request().url())
-  const jobId = url.pathname.split('/').at(-1)
-
-  return jobId ? decodeURIComponent(jobId) : null
-}
-
-export class JobsApiMock {
-  private listRouteHandler: ((route: Route) => Promise<void>) | null = null
-  private detailRouteHandler: ((route: Route) => Promise<void>) | null = null
-  private historyRouteHandler: ((route: Route) => Promise<void>) | null = null
-  private jobsById = new Map<string, MockJobRecord>()
-
-  constructor(private readonly page: Page) {}
-
-  async mockJobs(jobs: MockJobRecord[]): Promise<void> {
-    this.jobsById = new Map(
-      jobs.map(
-        (job) => [job.listItem.id, job] satisfies [string, MockJobRecord]
-      )
-    )
-    await this.ensureRoutesRegistered()
-  }
-
-  async clear(): Promise<void> {
-    this.jobsById.clear()
-
-    if (this.listRouteHandler) {
-      await this.page.unroute(jobsListRoutePattern, this.listRouteHandler)
-      this.listRouteHandler = null
-    }
-
-    if (this.detailRouteHandler) {
-      await this.page.unroute(jobDetailRoutePattern, this.detailRouteHandler)
-      this.detailRouteHandler = null
-    }
-
-    if (this.historyRouteHandler) {
-      await this.page.unroute(historyRoutePattern, this.historyRouteHandler)
-      this.historyRouteHandler = null
-    }
-  }
-
-  private async ensureRoutesRegistered(): Promise<void> {
-    if (!this.listRouteHandler) {
-      this.listRouteHandler = async (route: Route) => {
-        const url = new URL(route.request().url())
-        const statuses = url.searchParams
-          .get('status')
-          ?.split(',')
-          .map((status) => status.trim())
-          .filter(Boolean)
-
-        let filteredJobs = Array.from(
-          this.jobsById.values(),
-          ({ listItem }) => listItem
-        )
-
-        if (statuses?.length) {
-          filteredJobs = filteredJobs.filter((job) =>
-            statuses.includes(job.status)
-          )
-        }
-
-        const offset = parsePositiveIntegerParam(url, 'offset') ?? 0
-        const limit =
-          parsePositiveIntegerParam(url, 'limit') ?? defaultJobsListLimit
-        const total = filteredJobs.length
-        const visibleJobs = filteredJobs.slice(offset, offset + limit)
-
-        const response = {
-          jobs: visibleJobs,
-          pagination: {
-            offset,
-            limit,
-            total,
-            has_more: offset + visibleJobs.length < total
-          }
-        } satisfies JobsListResponse
-
-        await route.fulfill({
-          status: 200,
-          contentType: 'application/json',
-          body: JSON.stringify(response)
-        })
-      }
-
-      await this.page.route(jobsListRoutePattern, this.listRouteHandler)
-    }
-
-    if (!this.detailRouteHandler) {
-      this.detailRouteHandler = async (route: Route) => {
-        const jobId = getJobIdFromRequest(route)
-        const job = jobId ? this.jobsById.get(jobId) : undefined
-
-        if (!job) {
-          await route.fulfill({
-            status: 404,
-            contentType: 'application/json',
-            body: JSON.stringify({ error: 'Job not found' })
-          })
-          return
-        }
-
-        await route.fulfill({
-          status: 200,
-          contentType: 'application/json',
-          body: JSON.stringify(job.detail)
-        })
-      }
-
-      await this.page.route(jobDetailRoutePattern, this.detailRouteHandler)
-    }
-
-    if (!this.historyRouteHandler) {
-      this.historyRouteHandler = async (route: Route) => {
-        const request = route.request()
-        if (request.method() !== 'POST') {
-          await route.continue()
-          return
-        }
-
-        const requestBody = request.postDataJSON() as
-          | { delete?: string[]; clear?: boolean }
-          | undefined
-
-        if (requestBody?.clear) {
-          this.jobsById = new Map(
-            Array.from(this.jobsById).filter(([, job]) => {
-              const status = job.listItem.status
-
-              return status === 'pending' || status === 'in_progress'
-            })
-          )
-        }
-
-        if (requestBody?.delete?.length) {
-          for (const jobId of requestBody.delete) {
-            this.jobsById.delete(jobId)
-          }
-        }
-
-        await route.fulfill({
-          status: 200,
-          contentType: 'application/json',
-          body: JSON.stringify({})
-        })
-      }
-
-      await this.page.route(historyRoutePattern, this.historyRouteHandler)
-    }
-  }
-}
--- a/browser_tests/fixtures/helpers/SubgraphHelper.ts
+++ b/browser_tests/fixtures/helpers/SubgraphHelper.ts
@@ -9,12 +9,17 @@ import type { ComfyWorkflow } from '@/platform/workflow/management/stores/comfyW
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'

 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { SubgraphEditor } from '@e2e/fixtures/components/SubgraphEditor'
 import { TestIds } from '@e2e/fixtures/selectors'
 import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
 import { SubgraphSlotReference } from '@e2e/fixtures/utils/litegraphUtils'

 export class SubgraphHelper {
-  constructor(private readonly comfyPage: ComfyPage) {}
+  public readonly editor: SubgraphEditor
+
+  constructor(private readonly comfyPage: ComfyPage) {
+    this.editor = new SubgraphEditor(comfyPage)
+  }

  private get page(): Page {
    return this.comfyPage.page
@@ -327,6 +332,23 @@ export class SubgraphHelper {
    await this.comfyPage.nextFrame()
  }

+  async promoteWidget(nodeLocator: Locator, widgetName: string): Promise<void> {
+    const widget = nodeLocator.getByLabel(widgetName, { exact: true })
+    await this.comfyPage.contextMenu
+      .openFor(widget)
+      .then((m) => m.clickMenuItemExact(`Promote Widget: ${widgetName}`))
+  }
+
+  async unpromoteWidget(
+    nodeLocator: Locator,
+    widgetName: string
+  ): Promise<void> {
+    const widget = nodeLocator.getByLabel(widgetName, { exact: true })
+    await this.comfyPage.contextMenu
+      .openFor(widget)
+      .then((m) => m.clickMenuItemExact(`Un-Promote Widget: ${widgetName}`))
+  }
+
  async isInSubgraph(): Promise<boolean> {
    return this.page.evaluate(() => {
      const graph = window.app!.canvas.graph
--- a/browser_tests/fixtures/helpers/TemplateHelper.ts
+++ b/browser_tests/fixtures/helpers/TemplateHelper.ts
@@ -0,0 +1,198 @@
+import type { Page, Route } from '@playwright/test'
+
+import type {
+  TemplateInfo,
+  WorkflowTemplates
+} from '@/platform/workflow/templates/types/template'
+import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
+import {
+  makeTemplate,
+  mockTemplateIndex
+} from '@e2e/fixtures/data/templateFixtures'
+
+/**
+ * Generate N deterministic templates, optionally restricted to a distribution.
+ *
+ * Lives here (not in `fixtures/data/`) because `fixtures/data/` is reserved
+ * for static test data with no executable fixture logic.
+ */
+function generateTemplates(
+  count: number,
+  distribution?: TemplateIncludeOnDistributionEnum
+): TemplateInfo[] {
+  const slug = distribution ?? 'unrestricted'
+  return Array.from({ length: count }, (_, i) =>
+    makeTemplate({
+      name: `gen-${slug}-${String(i + 1).padStart(3, '0')}`,
+      title: `Generated ${slug} ${i + 1}`,
+      ...(distribution ? { includeOnDistributions: [distribution] } : {})
+    })
+  )
+}
+
+export interface TemplateConfig {
+  readonly templates: readonly TemplateInfo[]
+  readonly index: readonly WorkflowTemplates[] | null
+}
+
+function emptyConfig(): TemplateConfig {
+  return { templates: [], index: null }
+}
+
+export type TemplateOperator = (config: TemplateConfig) => TemplateConfig
+
+function cloneTemplates(templates: readonly TemplateInfo[]): TemplateInfo[] {
+  return templates.map((t) => structuredClone(t))
+}
+
+function cloneIndex(
+  index: readonly WorkflowTemplates[] | null
+): WorkflowTemplates[] | null {
+  return index ? index.map((m) => structuredClone(m)) : null
+}
+
+function addTemplates(
+  config: TemplateConfig,
+  templates: TemplateInfo[]
+): TemplateConfig {
+  return { ...config, templates: [...config.templates, ...templates] }
+}
+
+export function withTemplates(templates: TemplateInfo[]): TemplateOperator {
+  return (config) => addTemplates(config, templates)
+}
+
+export function withTemplate(template: TemplateInfo): TemplateOperator {
+  return (config) => addTemplates(config, [template])
+}
+
+export function withCloudTemplates(count: number): TemplateOperator {
+  return (config) =>
+    addTemplates(
+      config,
+      generateTemplates(count, TemplateIncludeOnDistributionEnum.Cloud)
+    )
+}
+
+export function withDesktopTemplates(count: number): TemplateOperator {
+  return (config) =>
+    addTemplates(
+      config,
+      generateTemplates(count, TemplateIncludeOnDistributionEnum.Desktop)
+    )
+}
+
+export function withLocalTemplates(count: number): TemplateOperator {
+  return (config) =>
+    addTemplates(
+      config,
+      generateTemplates(count, TemplateIncludeOnDistributionEnum.Local)
+    )
+}
+
+export function withUnrestrictedTemplates(count: number): TemplateOperator {
+  return (config) => addTemplates(config, generateTemplates(count))
+}
+
+/**
+ * Override the index payload entirely. Useful when a test needs a custom
+ * `WorkflowTemplates[]` shape (e.g. multiple modules).
+ */
+export function withRawIndex(index: WorkflowTemplates[]): TemplateOperator {
+  return (config) => ({ ...config, index })
+}
+
+export class TemplateHelper {
+  private templates: TemplateInfo[]
+  private index: WorkflowTemplates[] | null
+  private routeHandlers: Array<{
+    pattern: string
+    handler: (route: Route) => Promise<void>
+  }> = []
+
+  constructor(
+    private readonly page: Page,
+    config: TemplateConfig = emptyConfig()
+  ) {
+    this.templates = cloneTemplates(config.templates)
+    this.index = cloneIndex(config.index)
+  }
+
+  configure(...operators: TemplateOperator[]): void {
+    const config = operators.reduce<TemplateConfig>(
+      (cfg, op) => op(cfg),
+      emptyConfig()
+    )
+    this.templates = cloneTemplates(config.templates)
+    this.index = cloneIndex(config.index)
+  }
+
+  async mock(): Promise<void> {
+    await this.mockIndex()
+    await this.mockThumbnails()
+  }
+
+  async mockIndex(): Promise<void> {
+    const indexHandler = async (route: Route) => {
+      const payload = this.index ?? mockTemplateIndex(this.templates)
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify(payload),
+        headers: {
+          'Content-Type': 'application/json',
+          'Cache-Control': 'no-store'
+        }
+      })
+    }
+    const indexPattern = '**/templates/index.json'
+    this.routeHandlers.push({ pattern: indexPattern, handler: indexHandler })
+    await this.page.route(indexPattern, indexHandler)
+  }
+
+  async mockThumbnails(): Promise<void> {
+    const thumbnailHandler = async (route: Route) => {
+      await route.fulfill({
+        status: 200,
+        path: 'browser_tests/assets/example.webp',
+        headers: {
+          'Content-Type': 'image/webp',
+          'Cache-Control': 'no-store'
+        }
+      })
+    }
+    const thumbnailPattern = '**/templates/**.webp'
+    this.routeHandlers.push({
+      pattern: thumbnailPattern,
+      handler: thumbnailHandler
+    })
+    await this.page.route(thumbnailPattern, thumbnailHandler)
+  }
+
+  getTemplates(): TemplateInfo[] {
+    return cloneTemplates(this.templates)
+  }
+
+  get templateCount(): number {
+    return this.templates.length
+  }
+
+  async clearMocks(): Promise<void> {
+    for (const { pattern, handler } of this.routeHandlers) {
+      await this.page.unroute(pattern, handler)
+    }
+    this.routeHandlers = []
+    this.templates = []
+    this.index = null
+  }
+}
+
+export function createTemplateHelper(
+  page: Page,
+  ...operators: TemplateOperator[]
+): TemplateHelper {
+  const config = operators.reduce<TemplateConfig>(
+    (cfg, op) => op(cfg),
+    emptyConfig()
+  )
+  return new TemplateHelper(page, config)
+}
--- a/browser_tests/fixtures/jobsApiMockFixture.ts
+++ b/browser_tests/fixtures/jobsApiMockFixture.ts
@@ -1,15 +0,0 @@
-import { test as base } from '@playwright/test'
-
-import { JobsApiMock } from '@e2e/fixtures/helpers/JobsApiMock'
-
-export const jobsApiMockFixture = base.extend<{
-  jobsApi: JobsApiMock
-}>({
-  jobsApi: async ({ page }, use) => {
-    const jobsApi = new JobsApiMock(page)
-
-    await use(jobsApi)
-
-    await jobsApi.clear()
-  }
-})
--- a/browser_tests/fixtures/jobsRouteFixture.ts
+++ b/browser_tests/fixtures/jobsRouteFixture.ts
@@ -0,0 +1,169 @@
+import { test as base } from '@playwright/test'
+import type { Page } from '@playwright/test'
+import type { z } from 'zod'
+
+import type {
+  JobStatus,
+  RawJobListItem,
+  zJobsListResponse
+} from '@/platform/remote/comfyui/jobs/jobTypes'
+
+type JobsListResponse = z.infer<typeof zJobsListResponse>
+
+const terminalJobStatuses = [
+  'completed',
+  'failed',
+  'cancelled'
+] as const satisfies readonly JobStatus[]
+const activeJobStatuses = [
+  'in_progress',
+  'pending'
+] as const satisfies readonly JobStatus[]
+const defaultJobsListLimit = 200
+const defaultScenarioHistoryLimit = 64
+const defaultJobsListOffset = 0
+const defaultRouteMockJobTimestamp = Date.UTC(2026, 0, 1, 12)
+
+interface JobsListRoute {
+  statuses: readonly JobStatus[]
+  jobs: readonly RawJobListItem[]
+  limit?: number
+  offset?: number
+}
+
+interface JobsScenario {
+  history?: readonly RawJobListItem[]
+  queue?: readonly RawJobListItem[]
+}
+
+function hasExactStatuses(url: URL, statuses: readonly JobStatus[]): boolean {
+  const requestedStatuses = new Set(
+    url.searchParams.get('status')?.split(',') ?? []
+  )
+
+  return (
+    requestedStatuses.size === statuses.length &&
+    statuses.every((status) => requestedStatuses.has(status))
+  )
+}
+
+function searchParamNumber(url: URL, name: string, fallback: number): number {
+  const value = url.searchParams.get(name)
+  return value === null ? fallback : Number(value)
+}
+
+function hasJobsListPageParams(
+  url: URL,
+  { limit, offset }: Pick<JobsListRoute, 'limit' | 'offset'>
+): boolean {
+  return (
+    searchParamNumber(url, 'limit', defaultJobsListLimit) ===
+      (limit ?? defaultJobsListLimit) &&
+    searchParamNumber(url, 'offset', defaultJobsListOffset) ===
+      (offset ?? defaultJobsListOffset)
+  )
+}
+
+function isJobsListRequest(url: URL, route: JobsListRoute): boolean {
+  return (
+    url.pathname.endsWith('/api/jobs') &&
+    hasExactStatuses(url, route.statuses) &&
+    hasJobsListPageParams(url, route)
+  )
+}
+
+function createJobsListResponse({
+  jobs,
+  limit = defaultJobsListLimit,
+  offset = defaultJobsListOffset
+}: Omit<JobsListRoute, 'statuses'>): JobsListResponse {
+  const pageJobs = jobs.slice(offset, offset + limit)
+
+  return {
+    jobs: pageJobs,
+    pagination: {
+      offset,
+      limit,
+      total: jobs.length,
+      has_more: offset + pageJobs.length < jobs.length
+    }
+  }
+}
+
+export function createRouteMockJob({
+  id,
+  ...overrides
+}: { id: string } & Partial<Omit<RawJobListItem, 'id'>>): RawJobListItem {
+  return {
+    id,
+    status: 'completed',
+    create_time: defaultRouteMockJobTimestamp,
+    execution_start_time: defaultRouteMockJobTimestamp,
+    execution_end_time: defaultRouteMockJobTimestamp + 5_000,
+    preview_output: {
+      filename: `output_${id}.png`,
+      subfolder: '',
+      type: 'output',
+      nodeId: '1',
+      mediaType: 'images'
+    },
+    outputs_count: 1,
+    ...overrides
+  }
+}
+
+export class JobsRouteMocker {
+  constructor(private readonly page: Page) {}
+
+  async mockJobsHistory(
+    jobs: readonly RawJobListItem[],
+    limit = defaultJobsListLimit
+  ): Promise<void> {
+    await this.mockJobsList({
+      statuses: terminalJobStatuses,
+      jobs,
+      limit
+    })
+  }
+
+  async mockJobsQueue(jobs: readonly RawJobListItem[]): Promise<void> {
+    await this.mockJobsList({
+      statuses: activeJobStatuses,
+      jobs
+    })
+  }
+
+  async mockJobsScenario({ history, queue }: JobsScenario): Promise<void> {
+    if (history) {
+      await this.mockJobsHistory(history, defaultScenarioHistoryLimit)
+    }
+    if (queue) {
+      await this.mockJobsQueue(queue)
+    }
+  }
+
+  async mockJobsList(route: JobsListRoute): Promise<void> {
+    const response = createJobsListResponse(route)
+
+    await this.page.route(
+      (url) => isJobsListRequest(url, route),
+      async (requestRoute) => {
+        if (requestRoute.request().method().toUpperCase() !== 'GET') {
+          await requestRoute.fallback()
+          return
+        }
+
+        await requestRoute.fulfill({ json: response })
+      }
+    )
+  }
+}
+
+export const jobsRouteFixture = base.extend<{
+  jobsRoutes: JobsRouteMocker
+}>({
+  jobsRoutes: async ({ page }, use) => {
+    await use(new JobsRouteMocker(page))
+    await page.unrouteAll({ behavior: 'wait' })
+  }
+})
--- a/browser_tests/fixtures/selectors.ts
+++ b/browser_tests/fixtures/selectors.ts
@@ -8,6 +8,7 @@ export const TestIds = {
    toolbar: 'side-toolbar',
    nodeLibrary: 'node-library-tree',
    nodeLibrarySearch: 'node-library-search',
+    nodePreviewCard: 'node-preview-card',
    workflows: 'workflows-sidebar',
    modeToggle: 'mode-toggle'
  },
@@ -103,14 +104,16 @@ export const TestIds = {
    errorsTab: 'panel-tab-errors'
  },
  subgraphEditor: {
-    toggle: 'subgraph-editor-toggle',
-    shownSection: 'subgraph-editor-shown-section',
    hiddenSection: 'subgraph-editor-hidden-section',
-    widgetToggle: 'subgraph-widget-toggle',
-    widgetLabel: 'subgraph-widget-label',
-    iconLink: 'icon-link',
    iconEye: 'icon-eye',
-    widgetActionsMenuButton: 'widget-actions-menu-button'
+    iconLink: 'icon-link',
+    nodeName: 'subgraph-widget-node-name',
+    shownSection: 'subgraph-editor-shown-section',
+    toggle: 'subgraph-editor-toggle',
+    widgetActionsMenuButton: 'widget-actions-menu-button',
+    widgetItem: 'subgraph-widget-item',
+    widgetLabel: 'subgraph-widget-label',
+    widgetToggle: 'subgraph-widget-toggle'
  },
  node: {
    titleInput: 'node-title-input',
--- a/browser_tests/fixtures/templateApiFixture.ts
+++ b/browser_tests/fixtures/templateApiFixture.ts
@@ -0,0 +1,16 @@
+import { test as base } from '@playwright/test'
+
+import type { TemplateHelper } from '@e2e/fixtures/helpers/TemplateHelper'
+import { createTemplateHelper } from '@e2e/fixtures/helpers/TemplateHelper'
+
+export const templateApiFixture = base.extend<{
+  templateApi: TemplateHelper
+}>({
+  templateApi: async ({ page }, use) => {
+    const templateApi = createTemplateHelper(page)
+
+    await use(templateApi)
+
+    await templateApi.clearMocks()
+  }
+})
--- a/browser_tests/fixtures/utils/builderTestUtils.ts
+++ b/browser_tests/fixtures/utils/builderTestUtils.ts
@@ -122,3 +122,19 @@ export async function saveAndReopenInAppMode(

  await comfyPage.appMode.toggleAppMode()
 }
+
+export async function saveCloseAndReopenInBuilder(
+  comfyPage: ComfyPage,
+  appMode: AppModeHelper,
+  workflowName: string
+) {
+  await appMode.steps.goToPreview()
+  await builderSaveAs(appMode, workflowName)
+  await appMode.saveAs.closeButton.click()
+  await expect(appMode.saveAs.successDialog).toBeHidden()
+
+  await appMode.footer.exitBuilder()
+  await openWorkflowFromSidebar(comfyPage, workflowName)
+  await appMode.enterBuilder()
+  await appMode.steps.goToInputs()
+}
--- a/browser_tests/fixtures/utils/dragAndDrop.ts
+++ b/browser_tests/fixtures/utils/dragAndDrop.ts
@@ -0,0 +1,33 @@
+import type { Locator } from '@playwright/test'
+
+/**
+ * Drag an element from one index to another within a list of locators.
+ * Uses mousedown/mousemove/mouseup to trigger the DraggableList library.
+ *
+ * DraggableList toggles position when the dragged item's center crosses
+ * past an idle item's center. To reliably land at the target position,
+ * we overshoot slightly past the target's far edge.
+ */
+export async function dragByIndex(
+  items: Locator,
+  fromIndex: number,
+  toIndex: number
+) {
+  const fromBox = await items.nth(fromIndex).boundingBox()
+  const toBox = await items.nth(toIndex).boundingBox()
+  if (!fromBox || !toBox) throw new Error('Item not visible for drag')
+
+  const draggingDown = toIndex > fromIndex
+  const targetY = draggingDown
+    ? toBox.y + toBox.height * 0.9
+    : toBox.y + toBox.height * 0.1
+
+  const page = items.page()
+  await page.mouse.move(
+    fromBox.x + fromBox.width / 2,
+    fromBox.y + fromBox.height / 2
+  )
+  await page.mouse.down()
+  await page.mouse.move(toBox.x + toBox.width / 2, targetY, { steps: 10 })
+  await page.mouse.up()
+}
--- a/browser_tests/fixtures/utils/jobFixtures.ts
+++ b/browser_tests/fixtures/utils/jobFixtures.ts
@@ -1,52 +0,0 @@
-import type { JobDetailResponse, JobEntry } from '@comfyorg/ingest-types'
-
-import type { MockJobRecord } from '@e2e/fixtures/helpers/JobsApiMock'
-
-export function createMockJob(
-  overrides: Partial<JobEntry> & { id: string }
-): JobEntry {
-  const now = Date.now()
-
-  return {
-    status: 'completed',
-    create_time: now,
-    execution_start_time: now,
-    execution_end_time: now + 5_000,
-    preview_output: {
-      filename: `output_${overrides.id}.png`,
-      subfolder: '',
-      type: 'output',
-      nodeId: '1',
-      mediaType: 'images'
-    },
-    outputs_count: 1,
-    ...overrides
-  }
-}
-
-function isTerminalStatus(status: JobEntry['status']) {
-  return status === 'completed' || status === 'failed' || status === 'cancelled'
-}
-
-function createMockJobRecord(listItem: JobEntry): MockJobRecord {
-  const updateTime =
-    listItem.execution_end_time ??
-    listItem.execution_start_time ??
-    listItem.create_time
-  const detail: JobDetailResponse = {
-    ...listItem,
-    update_time: updateTime,
-    ...(isTerminalStatus(listItem.status) ? { outputs: {} } : {})
-  }
-
-  return {
-    listItem,
-    detail
-  }
-}
-
-export function createMockJobRecords(
-  listItems: readonly JobEntry[]
-): MockJobRecord[] {
-  return listItems.map(createMockJobRecord)
-}
--- a/browser_tests/fixtures/utils/vueNodeFixtures.ts
+++ b/browser_tests/fixtures/utils/vueNodeFixtures.ts
@@ -15,6 +15,7 @@ export class VueNodeFixture {
  public readonly root: Locator
  public readonly widgets: Locator
  public readonly imagePreview: Locator
+  public readonly content: Locator

  constructor(private readonly locator: Locator) {
    this.header = locator.locator('[data-testid^="node-header-"]')
@@ -27,6 +28,7 @@ export class VueNodeFixture {
    this.root = locator
    this.widgets = this.locator.locator('.lg-node-widget')
    this.imagePreview = locator.locator('.image-preview')
+    this.content = locator.locator('.lg-node-content')
  }

  async getTitle(): Promise<string> {
@@ -39,6 +41,10 @@ export class VueNodeFixture {
    await this.titleEditor.setTitle(value)
  }

+  async select() {
+    await this.header.click()
+  }
+
  async toggleCollapse(): Promise<void> {
    await this.collapseButton.click()
  }
@@ -60,4 +66,15 @@ export class VueNodeFixture {
  boundingBox(): ReturnType<Locator['boundingBox']> {
    return this.locator.boundingBox()
  }
+
+  getSlot(nameOrLocator: string | Locator) {
+    const slotLocators = this.root
+      .getByTestId('node-widget')
+      .or(this.root.locator('.lg-slot'))
+    const filteredLocator =
+      typeof nameOrLocator === 'string'
+        ? slotLocators.filter({ hasText: nameOrLocator })
+        : slotLocators.filter({ has: nameOrLocator })
+    return filteredLocator.getByTestId('slot-dot').locator('..')
+  }
 }
--- a/browser_tests/tests/appModeInputPersistence.spec.ts
+++ b/browser_tests/tests/appModeInputPersistence.spec.ts
@@ -0,0 +1,44 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+import {
+  saveCloseAndReopenInBuilder,
+  setupBuilder
+} from '@e2e/fixtures/utils/builderTestUtils'
+
+const WIDGETS = ['seed', 'steps', 'cfg']
+
+test.describe(
+  'App builder input persistence after reload',
+  { tag: '@ui' },
+  () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.appMode.enableLinearMode()
+      await comfyPage.settings.setSetting(
+        'Comfy.AppBuilder.VueNodeSwitchDismissed',
+        true
+      )
+    })
+
+    test('persists selected inputs after save and reopen without visibility errors', async ({
+      comfyPage
+    }) => {
+      const { appMode } = comfyPage
+      await setupBuilder(comfyPage, undefined, WIDGETS)
+
+      await appMode.steps.goToInputs()
+      await expect(appMode.select.inputItemTitles).toHaveText(WIDGETS)
+
+      const workflowName = `${Date.now()} input-persistence`
+      await saveCloseAndReopenInBuilder(comfyPage, appMode, workflowName)
+
+      await expect(appMode.select.inputItemTitles).toHaveText(WIDGETS)
+      for (const widget of WIDGETS) {
+        await expect(
+          appMode.select.getInputItemSubtitle(widget)
+        ).not.toContainText('Widget not visible')
+      }
+    })
+  }
+)
--- a/browser_tests/tests/builderReorder.spec.ts
+++ b/browser_tests/tests/builderReorder.spec.ts
@@ -5,26 +5,18 @@ import {
 import type { AppModeHelper } from '@e2e/fixtures/helpers/AppModeHelper'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import {
-  builderSaveAs,
-  openWorkflowFromSidebar,
+  saveCloseAndReopenInBuilder,
  setupBuilder
 } from '@e2e/fixtures/utils/builderTestUtils'

 const WIDGETS = ['seed', 'steps', 'cfg']

-/** Save as app, close it by loading default, reopen from sidebar, enter app mode. */
 async function saveCloseAndReopenAsApp(
  comfyPage: ComfyPage,
  appMode: AppModeHelper,
  workflowName: string
 ) {
-  await appMode.steps.goToPreview()
-  await builderSaveAs(appMode, workflowName)
-  await appMode.saveAs.closeButton.click()
-  await expect(appMode.saveAs.successDialog).toBeHidden()
-
-  await appMode.footer.exitBuilder()
-  await openWorkflowFromSidebar(comfyPage, workflowName)
+  await saveCloseAndReopenInBuilder(comfyPage, appMode, workflowName)
  await appMode.toggleAppMode()
 }

--- a/browser_tests/tests/dialog.spec.ts
+++ b/browser_tests/tests/dialog.spec.ts
@@ -247,6 +247,14 @@ test.describe('Cloud notification dialog', () => {
    await dialog.back.click()
    await expect(dialog.root).toBeHidden()
  })
+
+  test('Should not advertise free monthly credits', async ({ comfyPage }) => {
+    const dialog = new CloudNotification(comfyPage.page)
+    await dialog.open()
+
+    await expect(dialog.root.getByText(/Free Credits/i)).toHaveCount(0)
+    await expect(dialog.root.getByText(/400/)).toHaveCount(0)
+  })
 })

 test('Blueprint overwrite', { tag: ['@subgraph'] }, async ({ comfyPage }) => {
--- a/browser_tests/tests/interaction.spec.ts-snapshots/dragged-node1-chromium-linux.png
+++ b/browser_tests/tests/interaction.spec.ts-snapshots/dragged-node1-chromium-linux.png
--- a/browser_tests/tests/metadataWorkflowImport.spec.ts
+++ b/browser_tests/tests/metadataWorkflowImport.spec.ts
@@ -25,6 +25,21 @@ const FIXTURES: readonly MetadataFixture[] = [
  { fileName: 'with_metadata.webm', parser: 'ebml (webm)' }
 ] as const

+// NaN-variant fixtures embed only an API-format prompt containing bare
+// `NaN`/`Infinity` tokens (Python's `json.dumps` default). The loader must
+// tolerate Python generated JSON for these to import successfully.
+const NAN_FIXTURES: readonly MetadataFixture[] = [
+  { fileName: 'with_nan_metadata.json', parser: 'json' },
+  { fileName: 'with_nan_metadata.png', parser: 'png' },
+  { fileName: 'with_nan_metadata.avif', parser: 'avif' },
+  { fileName: 'with_nan_metadata.webp', parser: 'webp' },
+  { fileName: 'with_nan_metadata.flac', parser: 'flac' },
+  { fileName: 'with_nan_metadata.mp3', parser: 'mp3' },
+  { fileName: 'with_nan_metadata.opus', parser: 'ogg' },
+  { fileName: 'with_nan_metadata.mp4', parser: 'isobmff' },
+  { fileName: 'with_nan_metadata.webm', parser: 'ebml (webm)' }
+] as const
+
 test.describe(
  'Metadata drop-to-load workflow import',
  { tag: ['@workflow'] },
@@ -58,5 +73,42 @@ test.describe(
        })
      })
    }
+
+    for (const { fileName, parser } of NAN_FIXTURES) {
+      test(`loads Python JSON prompt with NaN/Infinity from ${fileName} (${parser})`, async ({
+        comfyPage
+      }) => {
+        await test.step(`drop ${fileName} on canvas`, async () => {
+          await comfyPage.dragDrop.dragAndDropFilePath(
+            metadataFixturePath(fileName)
+          )
+        })
+
+        await test.step('graph contains only the embedded KSampler', async () => {
+          await expect
+            .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+            .toBe(1)
+
+          const ksamplers =
+            await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+          expect(
+            ksamplers,
+            'exactly one KSampler should have been loaded from the NaN-laden prompt'
+          ).toHaveLength(1)
+        })
+
+        await test.step('NaN-coerced widget values are 0', async () => {
+          const [ksampler] =
+            await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+          for (const widgetName of ['cfg', 'denoise']) {
+            const widget = await ksampler.getWidgetByName(widgetName)
+            expect(
+              await widget.getValue(),
+              `${widgetName} should be 0 after NaN coercion to null`
+            ).toBe(0)
+          }
+        })
+      })
+    }
  }
 )
--- a/browser_tests/tests/propertiesPanel/errorsTabMissingMediaRuntime.spec.ts
+++ b/browser_tests/tests/propertiesPanel/errorsTabMissingMediaRuntime.spec.ts
@@ -0,0 +1,358 @@
+import { expect, mergeTests } from '@playwright/test'
+import type { Page, Route } from '@playwright/test'
+import type { Asset, ListAssetsResponse } from '@comfyorg/ingest-types'
+
+import {
+  assetRequestIncludesTag,
+  createCloudAssetsFixture
+} from '@e2e/fixtures/assetApiFixture'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import {
+  createRouteMockJob,
+  jobsRouteFixture
+} from '@e2e/fixtures/jobsRouteFixture'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
+import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
+
+const ossTest = mergeTests(comfyPageFixture, jobsRouteFixture)
+const outputHash =
+  '147257c95a3e957e0deee73a077cfec89da2d906dd086ca70a2b0c897a9591d6e.png'
+const plainVideoFileName = 'plain_video.mp4'
+const graphDropPosition = { x: 500, y: 300 }
+const missingMediaUploadObservationMs = 1_000
+const missingMediaUploadPollMs = 100
+
+const cloudOutputAsset: Asset = {
+  id: 'test-output-hash-001',
+  name: 'ComfyUI_00001_.png',
+  asset_hash: outputHash,
+  size: 4_194_304,
+  mime_type: 'image/png',
+  tags: ['output'],
+  created_at: '2026-05-01T00:00:00Z',
+  updated_at: '2026-05-01T00:00:00Z',
+  last_access_time: '2026-05-01T00:00:00Z'
+}
+
+const cloudUploadedVideoAsset: Asset = {
+  id: 'test-uploaded-video-001',
+  name: plainVideoFileName,
+  asset_hash: plainVideoFileName,
+  size: 1_024,
+  mime_type: 'video/mp4',
+  tags: ['input'],
+  created_at: '2026-05-01T00:00:00Z',
+  updated_at: '2026-05-01T00:00:00Z',
+  last_access_time: '2026-05-01T00:00:00Z'
+}
+
+// The Cloud test app starts with a default LoadImage node. Keep that baseline
+// input resolvable so this spec only observes the media it creates.
+const cloudDefaultGraphInputAsset: Asset = {
+  id: 'test-default-input-001',
+  name: '00000000000000000000000Aexample.png',
+  asset_hash: '00000000000000000000000Aexample.png',
+  size: 1_024,
+  mime_type: 'image/png',
+  tags: ['input'],
+  created_at: '2026-05-01T00:00:00Z',
+  updated_at: '2026-05-01T00:00:00Z',
+  last_access_time: '2026-05-01T00:00:00Z'
+}
+
+interface CloudUploadAssetState {
+  isUploadedAssetAvailable: boolean
+}
+
+const cloudOutputTest = createCloudAssetsFixture([cloudOutputAsset])
+const cloudUploadAssetStateByPage = new WeakMap<Page, CloudUploadAssetState>()
+const cloudUploadRaceTest = comfyPageFixture.extend<{
+  markUploadedCloudAssetAvailable: () => void
+}>({
+  page: async ({ page }, use) => {
+    const state: CloudUploadAssetState = {
+      isUploadedAssetAvailable: false
+    }
+    cloudUploadAssetStateByPage.set(page, state)
+
+    const assetsRouteHandler = async (route: Route) => {
+      const allAssets = [
+        cloudDefaultGraphInputAsset,
+        ...(state.isUploadedAssetAvailable ? [cloudUploadedVideoAsset] : [])
+      ]
+      const includeTags =
+        new URL(route.request().url()).searchParams
+          .get('include_tags')
+          ?.split(',')
+          .filter(Boolean) ?? []
+      const assets = includeTags.length
+        ? allAssets.filter((asset) =>
+            asset.tags?.some((tag) => includeTags.includes(tag))
+          )
+        : allAssets
+      const response: ListAssetsResponse = {
+        assets,
+        total: assets.length,
+        has_more: false
+      }
+
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(response)
+      })
+    }
+
+    await page.route(/\/api\/assets(?:\?.*)?$/, assetsRouteHandler)
+    await use(page)
+    await page.unroute(/\/api\/assets(?:\?.*)?$/, assetsRouteHandler)
+    cloudUploadAssetStateByPage.delete(page)
+  },
+  markUploadedCloudAssetAvailable: async ({ page }, use) => {
+    await use(() => {
+      const state = cloudUploadAssetStateByPage.get(page)
+      if (state) state.isUploadedAssetAvailable = true
+    })
+  }
+})
+
+async function enableErrorsTab(comfyPage: ComfyPage) {
+  await comfyPage.settings.setSetting(
+    'Comfy.RightSidePanel.ShowErrorsTab',
+    true
+  )
+}
+
+function getErrorOverlay(comfyPage: ComfyPage) {
+  return comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+}
+
+async function expectNoErrorsTab(comfyPage: ComfyPage) {
+  await expect(getErrorOverlay(comfyPage)).toBeHidden()
+
+  const panel = new PropertiesPanelHelper(comfyPage.page)
+  await panel.open(comfyPage.actionbar.propertiesButton)
+  await expect(
+    panel.root.getByTestId(TestIds.propertiesPanel.errorsTab)
+  ).toBeHidden()
+}
+
+async function delayNextUpload(comfyPage: ComfyPage) {
+  let releaseUpload!: () => void
+  let resolveUploadStarted!: () => void
+  const uploadStarted = new Promise<void>((resolve) => {
+    resolveUploadStarted = resolve
+  })
+  const release = new Promise<void>((resolve) => {
+    releaseUpload = resolve
+  })
+
+  const uploadRouteHandler = async (route: Route) => {
+    resolveUploadStarted()
+    await release
+    await route.continue()
+  }
+
+  await comfyPage.page.route('**/upload/image', uploadRouteHandler)
+
+  return {
+    waitForUploadStarted: () => uploadStarted,
+    finishUpload: async () => {
+      const uploadResponse = comfyPage.page.waitForResponse(
+        (response) =>
+          response.url().includes('/upload/image') && response.status() === 200,
+        { timeout: 10_000 }
+      )
+      releaseUpload()
+      try {
+        await uploadResponse
+      } finally {
+        await comfyPage.page.unroute('**/upload/image', uploadRouteHandler)
+      }
+    }
+  }
+}
+
+async function expectLoadVideoUploading(comfyPage: ComfyPage) {
+  await expect
+    .poll(
+      () =>
+        comfyPage.page.evaluate(() =>
+          window.app!.graph.nodes.some(
+            (node) => node.type === 'LoadVideo' && node.isUploading
+          )
+        ),
+      { timeout: 5_000 }
+    )
+    .toBe(true)
+}
+
+async function expectNoMissingMediaDuringUpload(comfyPage: ComfyPage) {
+  await comfyPage.nextFrame()
+  await comfyPage.nextFrame()
+
+  let sawErrorOverlay = false
+  const startedAt = Date.now()
+  await expect
+    .poll(
+      async () => {
+        sawErrorOverlay =
+          sawErrorOverlay || (await getErrorOverlay(comfyPage).isVisible())
+        return (
+          !sawErrorOverlay &&
+          Date.now() - startedAt >= missingMediaUploadObservationMs
+        )
+      },
+      {
+        timeout: missingMediaUploadObservationMs + missingMediaUploadPollMs * 5,
+        intervals: [missingMediaUploadPollMs]
+      }
+    )
+    .toBe(true)
+}
+
+function outputHistoryJobs(): RawJobListItem[] {
+  return [
+    createRouteMockJob({
+      id: 'history-output-image',
+      preview_output: {
+        filename: 'ComfyUI_00001_.png',
+        subfolder: '',
+        type: 'output',
+        nodeId: '1',
+        mediaType: 'images'
+      }
+    }),
+    createRouteMockJob({
+      id: 'history-output-video',
+      preview_output: {
+        filename: 'clip.mp4',
+        subfolder: '',
+        type: 'output',
+        nodeId: '2',
+        mediaType: 'video'
+      }
+    }),
+    createRouteMockJob({
+      id: 'history-output-audio',
+      preview_output: {
+        filename: 'sound.wav',
+        subfolder: '',
+        type: 'output',
+        nodeId: '3',
+        mediaType: 'audio'
+      }
+    })
+  ]
+}
+
+ossTest.describe(
+  'Errors tab - OSS missing media runtime sources',
+  { tag: '@ui' },
+  () => {
+    ossTest.beforeEach(async ({ comfyPage }) => {
+      await enableErrorsTab(comfyPage)
+    })
+
+    ossTest(
+      'resolves annotated output media from job history',
+      async ({ comfyPage, jobsRoutes }) => {
+        await jobsRoutes.mockJobsHistory(outputHistoryJobs())
+        await jobsRoutes.mockJobsQueue([])
+
+        await comfyPage.workflow.loadWorkflow(
+          'missing/missing_media_output_annotations'
+        )
+
+        await expectNoErrorsTab(comfyPage)
+      }
+    )
+
+    ossTest(
+      'does not surface missing media while dropped video upload is in progress',
+      async ({ comfyFiles, comfyPage }) => {
+        await comfyPage.nodeOps.clearGraph()
+        const delayedUpload = await delayNextUpload(comfyPage)
+
+        await comfyPage.dragDrop.dragAndDropFile(plainVideoFileName, {
+          dropPosition: graphDropPosition
+        })
+        await delayedUpload.waitForUploadStarted()
+        comfyFiles.deleteAfterTest({
+          filename: plainVideoFileName,
+          type: 'input'
+        })
+
+        await expectLoadVideoUploading(comfyPage)
+        await expectNoMissingMediaDuringUpload(comfyPage)
+
+        await delayedUpload.finishUpload()
+        await expect(getErrorOverlay(comfyPage)).toBeHidden()
+      }
+    )
+  }
+)
+
+cloudOutputTest.describe(
+  'Errors tab - Cloud missing media runtime sources',
+  { tag: '@cloud' },
+  () => {
+    cloudOutputTest.beforeEach(async ({ comfyPage }) => {
+      await enableErrorsTab(comfyPage)
+    })
+
+    cloudOutputTest(
+      'resolves compact annotated output media from output assets',
+      async ({ cloudAssetRequests, comfyPage }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'missing/missing_media_cloud_output_annotation'
+        )
+
+        await expect
+          .poll(() =>
+            cloudAssetRequests.some((url) =>
+              assetRequestIncludesTag(url, 'output')
+            )
+          )
+          .toBe(true)
+        await expectNoErrorsTab(comfyPage)
+      }
+    )
+  }
+)
+
+cloudUploadRaceTest.describe(
+  'Errors tab - Cloud missing media upload race',
+  { tag: '@cloud' },
+  () => {
+    cloudUploadRaceTest.beforeEach(async ({ comfyPage }) => {
+      await enableErrorsTab(comfyPage)
+    })
+
+    cloudUploadRaceTest(
+      'does not surface missing media while dropped video upload is in progress',
+      async ({ comfyFiles, comfyPage, markUploadedCloudAssetAvailable }) => {
+        await comfyPage.nodeOps.clearGraph()
+        const delayedUpload = await delayNextUpload(comfyPage)
+
+        await comfyPage.dragDrop.dragAndDropFile(plainVideoFileName, {
+          dropPosition: graphDropPosition
+        })
+        await delayedUpload.waitForUploadStarted()
+        comfyFiles.deleteAfterTest({
+          filename: plainVideoFileName,
+          type: 'input'
+        })
+
+        await expectLoadVideoUploading(comfyPage)
+        await expectNoMissingMediaDuringUpload(comfyPage)
+
+        markUploadedCloudAssetAvailable()
+        await delayedUpload.finishUpload()
+        await expect(getErrorOverlay(comfyPage)).toBeHidden()
+      }
+    )
+  }
+)
--- a/browser_tests/tests/queue/queueOverlay.spec.ts
+++ b/browser_tests/tests/queue/queueOverlay.spec.ts
@@ -1,56 +1,54 @@
 import { expect, mergeTests } from '@playwright/test'
-import type { JobEntry } from '@comfyorg/ingest-types'

 import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
-import { jobsApiMockFixture } from '@e2e/fixtures/jobsApiMockFixture'
 import {
-  createMockJob,
-  createMockJobRecords
-} from '@e2e/fixtures/utils/jobFixtures'
+  createRouteMockJob,
+  jobsRouteFixture
+} from '@e2e/fixtures/jobsRouteFixture'
 import { TestIds } from '@e2e/fixtures/selectors'
+import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'

-const test = mergeTests(comfyPageFixture, jobsApiMockFixture)
+const test = mergeTests(comfyPageFixture, jobsRouteFixture)
+const mockJobTimestamp = Date.UTC(2026, 0, 1, 12)

-const now = Date.now()
-
-const MOCK_JOBS: JobEntry[] = [
-  createMockJob({
+const MOCK_JOBS: RawJobListItem[] = [
+  createRouteMockJob({
    id: 'job-completed-1',
    status: 'completed',
-    create_time: now - 60_000,
-    execution_start_time: now - 60_000,
-    execution_end_time: now - 50_000,
+    create_time: mockJobTimestamp - 60_000,
+    execution_start_time: mockJobTimestamp - 60_000,
+    execution_end_time: mockJobTimestamp - 50_000,
    outputs_count: 2
  }),
-  createMockJob({
+  createRouteMockJob({
    id: 'job-completed-2',
    status: 'completed',
-    create_time: now - 120_000,
-    execution_start_time: now - 120_000,
-    execution_end_time: now - 115_000,
+    create_time: mockJobTimestamp - 120_000,
+    execution_start_time: mockJobTimestamp - 120_000,
+    execution_end_time: mockJobTimestamp - 115_000,
    outputs_count: 1
  }),
-  createMockJob({
+  createRouteMockJob({
    id: 'job-failed-1',
    status: 'failed',
-    create_time: now - 30_000,
-    execution_start_time: now - 30_000,
-    execution_end_time: now - 28_000,
+    create_time: mockJobTimestamp - 30_000,
+    execution_start_time: mockJobTimestamp - 30_000,
+    execution_end_time: mockJobTimestamp - 28_000,
    outputs_count: 0
  }),
-  createMockJob({
+  createRouteMockJob({
    id: 'job-failed-bottom',
    status: 'failed',
-    create_time: now - 180_000,
-    execution_start_time: now - 180_000,
-    execution_end_time: now - 178_000,
+    create_time: mockJobTimestamp - 180_000,
+    execution_start_time: mockJobTimestamp - 180_000,
+    execution_end_time: mockJobTimestamp - 178_000,
    outputs_count: 0
  })
 ]

 test.describe('Queue overlay', () => {
-  test.beforeEach(async ({ comfyPage, jobsApi }) => {
-    await jobsApi.mockJobs(createMockJobRecords(MOCK_JOBS))
+  test.beforeEach(async ({ comfyPage, jobsRoutes }) => {
+    await jobsRoutes.mockJobsScenario({ history: MOCK_JOBS, queue: [] })
    await comfyPage.settings.setSetting('Comfy.Minimap.Visible', false)
    await comfyPage.settings.setSetting('Comfy.Queue.QPOV2', false)
    await comfyPage.setup()
--- a/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png
+++ b/browser_tests/tests/selectionToolbox.spec.ts-snapshots/selection-toolbox-single-node-no-border-chromium-linux.png
--- a/browser_tests/tests/selectionToolboxActions.spec.ts
+++ b/browser_tests/tests/selectionToolboxActions.spec.ts
@@ -54,14 +54,44 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
      .toBe(initialCount - 1)
  })

-  test('info button opens properties panel', async ({ comfyPage }) => {
+  test('info button opens the right-side info tab in new menu mode', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', true)
+    await comfyPage.settings.setSetting('Comfy.RightSidePanel.IsOpen', false)
+
    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
    await selectNodeWithPan(comfyPage, nodeRef)
+    await expect(comfyPage.menu.propertiesPanel.root).toBeHidden()

    const infoButton = comfyPage.page.getByTestId('info-button')
    await expect(infoButton).toBeVisible()
    await infoButton.click()
-    await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
+
+    const panel = comfyPage.menu.propertiesPanel.root
+    await expect(panel).toBeVisible()
+    await expect(panel.getByTestId('panel-tab-info')).toHaveAttribute(
+      'aria-selected',
+      'true'
+    )
+    await expect(panel).toContainText('KSampler')
+    await expect(comfyPage.menu.nodeLibraryTab.selectedTabButton).toBeHidden()
+  })
+
+  test('info button is hidden when the new menu is disabled', async ({
+    comfyPage
+  }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
+
+    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
+    await selectNodeWithPan(comfyPage, nodeRef)
+
+    await expect(comfyPage.selectionToolbox).toBeVisible()
+    await expect(
+      comfyPage.selectionToolbox.getByTestId('info-button')
+    ).toBeHidden()
  })

  test('convert-to-subgraph button visible with multi-select', async ({
--- a/browser_tests/tests/selectionToolboxSubmenus.spec.ts
+++ b/browser_tests/tests/selectionToolboxSubmenus.spec.ts
@@ -74,14 +74,16 @@ test.describe(
      throw new Error('Could not open More Options menu - popover not showing')
    }

-    test('opens Node Info from More Options menu', async ({ comfyPage }) => {
+    test('hides Node Info from More Options menu when the new menu is disabled', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
+
      await openMoreOptions(comfyPage)
-      const nodeInfoButton = comfyPage.page.getByText('Node Info', {
-        exact: true
+      const nodeInfoButton = comfyPage.page.getByRole('menuitem', {
+        name: 'Node Info'
      })
-      await expect(nodeInfoButton).toBeVisible()
-      await nodeInfoButton.click()
-      await comfyPage.nextFrame()
+      await expect(nodeInfoButton).toBeHidden()
    })

    test('changes node shape via Shape submenu', async ({ comfyPage }) => {
--- a/browser_tests/tests/sidebar/nodeLibraryV2.spec.ts
+++ b/browser_tests/tests/sidebar/nodeLibraryV2.spec.ts
@@ -120,4 +120,13 @@ test.describe('Node library sidebar V2', () => {
    await expect(options.first()).toBeVisible()
    await expect.poll(() => options.count()).toBeGreaterThanOrEqual(2)
  })
+
+  test('Blueprint previews include description', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.nodeLibraryTabV2
+    await tab.blueprintsTab.click()
+
+    await tab.getNode('test blueprint').hover()
+    await expect(tab.nodePreview, 'Preview displays on hover').toBeVisible()
+    await expect(tab.nodePreview).toContainText('Inverts the image')
+  })
 })
--- a/browser_tests/tests/subgraph/subgraphPromotion.spec.ts
+++ b/browser_tests/tests/subgraph/subgraphPromotion.spec.ts
@@ -607,3 +607,218 @@ test.describe(
    )
  }
 )
+
+test('Promote/Demote by Context Menu @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const ksampler = comfyPage.vueNodes.getNodeLocator('1')
+  const steps = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'steps')
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
+
+  await test.step('Promote widget', async () => {
+    await comfyPage.vueNodes.enterSubgraph('2')
+    await comfyPage.subgraph.promoteWidget(ksampler, 'steps')
+    await comfyPage.subgraph.exitViaBreadcrumb()
+
+    await expect(steps).toBeVisible()
+  })
+
+  await test.step('Un-promote widget', async () => {
+    await comfyPage.vueNodes.enterSubgraph('2')
+    await comfyPage.subgraph.unpromoteWidget(ksampler, 'steps')
+    await comfyPage.subgraph.exitViaBreadcrumb()
+
+    await expect(subgraphNode).toBeVisible()
+    await expect(steps).toBeHidden()
+  })
+})
+
+test('Properties panel operations @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const { editor } = comfyPage.subgraph
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
+  const steps = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'steps')
+  const cfg = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'cfg')
+
+  await editor.togglePromotion(subgraphNode, {
+    nodeName: 'KSampler',
+    widgetName: 'steps',
+    toState: true
+  })
+  await expect(steps, 'Promote widget').toBeVisible()
+  await editor.togglePromotion(subgraphNode, {
+    nodeName: 'KSampler',
+    widgetName: 'cfg',
+    toState: true
+  })
+  await expect(cfg, 'Promote widget').toBeVisible()
+
+  await test.step('widgets display in order promoted', async () => {
+    await expect(editor.promotionItems.first()).toContainText('steps')
+    await expect(subgraphNode.locator('.lg-node-widget').first()).toHaveText(
+      'steps'
+    )
+  })
+
+  await test.step('Reorder widgets', async () => {
+    await editor.dragItem(0, 1)
+    await expect(editor.promotionItems.first()).toContainText('cfg')
+    await expect(subgraphNode.locator('.lg-node-widget').first()).toHaveText(
+      'cfg'
+    )
+  })
+
+  await editor.togglePromotion(subgraphNode, {
+    nodeName: 'KSampler',
+    widgetName: 'steps',
+    toState: false
+  })
+  await expect(steps, 'Un-promote widget').toBeHidden()
+})
+
+test('Can intermix linked and proxy @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const { editor } = comfyPage.subgraph
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
+
+  await test.step('Enter subgraph and link widget to input', async () => {
+    await comfyPage.vueNodes.enterSubgraph('2')
+
+    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+    await comfyPage.subgraph.promoteWidget(ksampler.root, 'cfg')
+
+    const fromSlot = ksampler.getSlot('steps')
+    const toPos = await comfyPage.subgraph.getInputSlot().getOpenSlotPosition()
+    await fromSlot.dragTo(comfyPage.canvas, { targetPosition: toPos })
+    const isConnected = () => comfyPage.vueNodes.isSlotConnected(fromSlot)
+    await expect.poll(isConnected).toBe(true)
+
+    await comfyPage.subgraph.exitViaBreadcrumb()
+  })
+
+  await expect(
+    subgraphNode.locator('.lg-node-widget').first(),
+    'linked widgets are first by default'
+  ).toHaveText('steps')
+
+  await editor.open(subgraphNode)
+
+  await editor.dragItem(0, 1)
+  await expect(
+    editor.promotionItems.first(),
+    'Swap widget order'
+  ).toContainText('cfg')
+
+  // FIXME: solve actual bug and remove the not
+  await expect(
+    subgraphNode.locator('.lg-node-widget').first(),
+    'Linked widget is first on node'
+  ).not.toHaveText('cfg')
+})
+
+test('Link already promoted widget @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const { editor } = comfyPage.subgraph
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
+  const steps = comfyPage.vueNodes.getWidgetByName('New Subgraph', 'steps')
+
+  await editor.togglePromotion(subgraphNode, {
+    nodeName: 'KSampler',
+    widgetName: 'steps',
+    toState: true
+  })
+  await expect(steps, 'Promote widget').toBeVisible()
+
+  await test.step('Enter subgraph and link widget to input', async () => {
+    await comfyPage.vueNodes.enterSubgraph('2')
+    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+
+    const fromSlot = ksampler.getSlot('steps')
+    const toPos = await comfyPage.subgraph.getInputSlot().getOpenSlotPosition()
+    await fromSlot.dragTo(comfyPage.canvas, { targetPosition: toPos })
+    const isConnected = () => comfyPage.vueNodes.isSlotConnected(fromSlot)
+    await expect.poll(isConnected).toBe(true)
+
+    await comfyPage.subgraph.exitViaBreadcrumb()
+  })
+
+  await expect(steps).toHaveCount(1)
+})
+
+test('Can promote multiple previews @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'v1 (legacy)')
+  await comfyPage.menu.topbar.newWorkflowButton.click()
+  await comfyPage.nextFrame()
+
+  await test.step('Add and rename a Load Image node', async () => {
+    await comfyPage.page.mouse.dblclick(300, 300, { delay: 5 })
+    await comfyPage.searchBox.fillAndSelectFirstNode('Load Image')
+    const loadImage = await comfyPage.vueNodes.getFixtureByTitle('Load Image')
+    await loadImage.setTitle('Character Reference')
+  })
+
+  await test.step('Add a second Load Image node', async () => {
+    await comfyPage.page.mouse.dblclick(600, 300, { delay: 5 })
+    await comfyPage.searchBox.fillAndSelectFirstNode('Load Image')
+  })
+
+  await test.step('Convert both nodes to subgraph', async () => {
+    await comfyPage.canvas.focus()
+    await comfyPage.page.keyboard.press('Control+a')
+    await comfyPage.contextMenu
+      .openFor(comfyPage.vueNodes.getNodeLocator('1'))
+      .then((m) => m.clickMenuItemExact('Convert to Subgraph'))
+  })
+
+  const { editor } = comfyPage.subgraph
+  const subgraph = await comfyPage.vueNodes.getFixtureByTitle('New Subgraph')
+
+  await test.step('Promote both image previews', async () => {
+    await editor.togglePromotion(subgraph.root, {
+      nodeId: '1',
+      widgetName: '$$canvas-image-preview',
+      toState: true
+    })
+    await expect(subgraph.content).toHaveCount(1)
+
+    await editor.togglePromotion(subgraph.root, {
+      nodeId: '2',
+      widgetName: '$$canvas-image-preview',
+      toState: true
+    })
+
+    await expect(subgraph.content).toHaveCount(2)
+  })
+  // FUTURE: Add test for re-ordering previews?
+
+  await test.step('Demote image', async () => {
+    await editor.togglePromotion(subgraph.root, {
+      nodeId: '1',
+      widgetName: '$$canvas-image-preview',
+      toState: false
+    })
+    await expect(subgraph.content).toHaveCount(1)
+  })
+})
+
+test('Linked widgets can not be demoted @vue-nodes', async ({ comfyPage }) => {
+  await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+  const { editor } = comfyPage.subgraph
+  const subgraphNode = comfyPage.vueNodes.getNodeLocator('2')
+
+  await test.step('Enter subgraph and link widget to input', async () => {
+    await comfyPage.vueNodes.enterSubgraph('2')
+    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
+
+    const fromSlot = ksampler.getSlot('steps')
+    const toPos = await comfyPage.subgraph.getInputSlot().getOpenSlotPosition()
+    await fromSlot.dragTo(comfyPage.canvas, { targetPosition: toPos })
+    const isConnected = () => comfyPage.vueNodes.isSlotConnected(fromSlot)
+    await expect.poll(isConnected).toBe(true)
+
+    await comfyPage.subgraph.exitViaBreadcrumb()
+  })
+
+  await editor.open(subgraphNode)
+  const stepsItem = await editor.resolveItem({ widgetName: 'steps' })
+  await expect(editor.getToggleButton(stepsItem)).toBeDisabled()
+})
--- a/browser_tests/tests/templateFilteringCount.spec.ts
+++ b/browser_tests/tests/templateFilteringCount.spec.ts
@@ -1,13 +1,13 @@
-import { expect } from '@playwright/test'
+import { expect, mergeTests } from '@playwright/test'

-import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
 import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
-import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
-import {
-  makeTemplate,
-  mockTemplateIndex
-} from '@e2e/fixtures/data/templateFixtures'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { makeTemplate } from '@e2e/fixtures/data/templateFixtures'
+import { withTemplates } from '@e2e/fixtures/helpers/TemplateHelper'
 import { TestIds } from '@e2e/fixtures/selectors'
+import { templateApiFixture } from '@e2e/fixtures/templateApiFixture'
+
+const test = mergeTests(comfyPageFixture, templateApiFixture)

 const Cloud = TemplateIncludeOnDistributionEnum.Cloud
 const Desktop = TemplateIncludeOnDistributionEnum.Desktop
@@ -17,7 +17,7 @@ test.describe(
  'Template distribution filtering count',
  { tag: '@cloud' },
  () => {
-    test.beforeEach(async ({ comfyPage }) => {
+    test.beforeEach(async ({ comfyPage, templateApi }) => {
      await comfyPage.settings.setSetting('Comfy.Templates.SelectedModels', [])
      await comfyPage.settings.setSetting(
        'Comfy.Templates.SelectedUseCases',
@@ -26,53 +26,37 @@ test.describe(
      await comfyPage.settings.setSetting('Comfy.Templates.SelectedRunsOn', [])
      await comfyPage.settings.setSetting('Comfy.Templates.SortBy', 'default')

-      await comfyPage.page.route('**/templates/**.webp', async (route) => {
-        await route.fulfill({
-          status: 200,
-          path: 'browser_tests/assets/example.webp',
-          headers: {
-            'Content-Type': 'image/webp',
-            'Cache-Control': 'no-store'
-          }
-        })
-      })
+      await templateApi.mockThumbnails()
    })

    test('displayed count matches visible cards when distribution filter excludes templates', async ({
-      comfyPage
+      comfyPage,
+      templateApi
    }) => {
-      const templates: TemplateInfo[] = [
-        makeTemplate({
-          name: 'cloud-1',
-          title: 'Cloud One',
-          includeOnDistributions: [Cloud]
-        }),
-        makeTemplate({
-          name: 'cloud-2',
-          title: 'Cloud Two',
-          includeOnDistributions: [Cloud]
-        }),
-        makeTemplate({
-          name: 'desktop-hidden',
-          title: 'Desktop Hidden',
-          includeOnDistributions: [Desktop]
-        }),
-        makeTemplate({
-          name: 'universal',
-          title: 'Universal'
-        })
-      ]
-
-      await comfyPage.page.route('**/templates/index.json', async (route) => {
-        await route.fulfill({
-          status: 200,
-          body: JSON.stringify(mockTemplateIndex(templates)),
-          headers: {
-            'Content-Type': 'application/json',
-            'Cache-Control': 'no-store'
-          }
-        })
-      })
+      templateApi.configure(
+        withTemplates([
+          makeTemplate({
+            name: 'cloud-1',
+            title: 'Cloud One',
+            includeOnDistributions: [Cloud]
+          }),
+          makeTemplate({
+            name: 'cloud-2',
+            title: 'Cloud Two',
+            includeOnDistributions: [Cloud]
+          }),
+          makeTemplate({
+            name: 'desktop-hidden',
+            title: 'Desktop Hidden',
+            includeOnDistributions: [Desktop]
+          }),
+          makeTemplate({
+            name: 'universal',
+            title: 'Universal'
+          })
+        ])
+      )
+      await templateApi.mockIndex()

      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
      await expect(comfyPage.templates.content).toBeVisible()
@@ -86,45 +70,38 @@ test.describe(
    })

    test('filtered count reflects distribution + model filter together', async ({
-      comfyPage
+      comfyPage,
+      templateApi
    }) => {
-      const templates: TemplateInfo[] = [
-        makeTemplate({
-          name: 'wan-cloud-1',
-          title: 'Wan Cloud 1',
-          models: ['Wan 2.2'],
-          includeOnDistributions: [Cloud]
-        }),
-        makeTemplate({
-          name: 'wan-cloud-2',
-          title: 'Wan Cloud 2',
-          models: ['Wan 2.2'],
-          includeOnDistributions: [Cloud]
-        }),
-        makeTemplate({
-          name: 'wan-desktop',
-          title: 'Wan Desktop',
-          models: ['Wan 2.2'],
-          includeOnDistributions: [Desktop]
-        }),
-        makeTemplate({
-          name: 'flux-cloud',
-          title: 'Flux Cloud',
-          models: ['Flux'],
-          includeOnDistributions: [Cloud]
-        })
-      ]
-
-      await comfyPage.page.route('**/templates/index.json', async (route) => {
-        await route.fulfill({
-          status: 200,
-          body: JSON.stringify(mockTemplateIndex(templates)),
-          headers: {
-            'Content-Type': 'application/json',
-            'Cache-Control': 'no-store'
-          }
-        })
-      })
+      templateApi.configure(
+        withTemplates([
+          makeTemplate({
+            name: 'wan-cloud-1',
+            title: 'Wan Cloud 1',
+            models: ['Wan 2.2'],
+            includeOnDistributions: [Cloud]
+          }),
+          makeTemplate({
+            name: 'wan-cloud-2',
+            title: 'Wan Cloud 2',
+            models: ['Wan 2.2'],
+            includeOnDistributions: [Cloud]
+          }),
+          makeTemplate({
+            name: 'wan-desktop',
+            title: 'Wan Desktop',
+            models: ['Wan 2.2'],
+            includeOnDistributions: [Desktop]
+          }),
+          makeTemplate({
+            name: 'flux-cloud',
+            title: 'Flux Cloud',
+            models: ['Flux'],
+            includeOnDistributions: [Cloud]
+          })
+        ])
+      )
+      await templateApi.mockIndex()

      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
      await expect(comfyPage.templates.content).toBeVisible()
@@ -144,36 +121,29 @@ test.describe(
    })

    test('desktop-only templates never leak into DOM on cloud distribution', async ({
-      comfyPage
+      comfyPage,
+      templateApi
    }) => {
-      const templates: TemplateInfo[] = [
-        makeTemplate({
-          name: 'cloud-visible',
-          title: 'Cloud Visible',
-          includeOnDistributions: [Cloud]
-        }),
-        makeTemplate({
-          name: 'desktop-leak-check',
-          title: 'Desktop Leak Check',
-          includeOnDistributions: [Desktop]
-        }),
-        makeTemplate({
-          name: 'local-leak-check',
-          title: 'Local Leak Check',
-          includeOnDistributions: [Local]
-        })
-      ]
-
-      await comfyPage.page.route('**/templates/index.json', async (route) => {
-        await route.fulfill({
-          status: 200,
-          body: JSON.stringify(mockTemplateIndex(templates)),
-          headers: {
-            'Content-Type': 'application/json',
-            'Cache-Control': 'no-store'
-          }
-        })
-      })
+      templateApi.configure(
+        withTemplates([
+          makeTemplate({
+            name: 'cloud-visible',
+            title: 'Cloud Visible',
+            includeOnDistributions: [Cloud]
+          }),
+          makeTemplate({
+            name: 'desktop-leak-check',
+            title: 'Desktop Leak Check',
+            includeOnDistributions: [Desktop]
+          }),
+          makeTemplate({
+            name: 'local-leak-check',
+            title: 'Local Leak Check',
+            includeOnDistributions: [Local]
+          })
+        ])
+      )
+      await templateApi.mockIndex()

      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
      await expect(comfyPage.templates.content).toBeVisible()
@@ -200,28 +170,21 @@ test.describe(
    })

    test('templates without includeOnDistributions are visible on cloud', async ({
-      comfyPage
+      comfyPage,
+      templateApi
    }) => {
-      const templates: TemplateInfo[] = [
-        makeTemplate({ name: 'unrestricted-1', title: 'Unrestricted 1' }),
-        makeTemplate({ name: 'unrestricted-2', title: 'Unrestricted 2' }),
-        makeTemplate({
-          name: 'cloud-only',
-          title: 'Cloud Only',
-          includeOnDistributions: [Cloud]
-        })
-      ]
-
-      await comfyPage.page.route('**/templates/index.json', async (route) => {
-        await route.fulfill({
-          status: 200,
-          body: JSON.stringify(mockTemplateIndex(templates)),
-          headers: {
-            'Content-Type': 'application/json',
-            'Cache-Control': 'no-store'
-          }
-        })
-      })
+      templateApi.configure(
+        withTemplates([
+          makeTemplate({ name: 'unrestricted-1', title: 'Unrestricted 1' }),
+          makeTemplate({ name: 'unrestricted-2', title: 'Unrestricted 2' }),
+          makeTemplate({
+            name: 'cloud-only',
+            title: 'Cloud Only',
+            includeOnDistributions: [Cloud]
+          })
+        ])
+      )
+      await templateApi.mockIndex()

      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
      await expect(comfyPage.templates.content).toBeVisible()
@@ -234,39 +197,32 @@ test.describe(
    })

    test('clear filters button resets to correct distribution-filtered total', async ({
-      comfyPage
+      comfyPage,
+      templateApi
    }) => {
-      const templates: TemplateInfo[] = [
-        makeTemplate({
-          name: 'wan-cloud',
-          title: 'Wan Cloud',
-          models: ['Wan 2.2'],
-          includeOnDistributions: [Cloud]
-        }),
-        makeTemplate({
-          name: 'flux-cloud',
-          title: 'Flux Cloud',
-          models: ['Flux'],
-          includeOnDistributions: [Cloud]
-        }),
-        makeTemplate({
-          name: 'wan-desktop',
-          title: 'Wan Desktop',
-          models: ['Wan 2.2'],
-          includeOnDistributions: [Desktop]
-        })
-      ]
-
-      await comfyPage.page.route('**/templates/index.json', async (route) => {
-        await route.fulfill({
-          status: 200,
-          body: JSON.stringify(mockTemplateIndex(templates)),
-          headers: {
-            'Content-Type': 'application/json',
-            'Cache-Control': 'no-store'
-          }
-        })
-      })
+      templateApi.configure(
+        withTemplates([
+          makeTemplate({
+            name: 'wan-cloud',
+            title: 'Wan Cloud',
+            models: ['Wan 2.2'],
+            includeOnDistributions: [Cloud]
+          }),
+          makeTemplate({
+            name: 'flux-cloud',
+            title: 'Flux Cloud',
+            models: ['Flux'],
+            includeOnDistributions: [Cloud]
+          }),
+          makeTemplate({
+            name: 'wan-desktop',
+            title: 'Wan Desktop',
+            models: ['Wan 2.2'],
+            includeOnDistributions: [Desktop]
+          })
+        ])
+      )
+      await templateApi.mockIndex()

      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
      await expect(comfyPage.templates.content).toBeVisible()
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
@@ -1133,3 +1133,108 @@ test.describe(
    })
  }
 )
+
+test.describe('Vue Node Widget Link Position', { tag: '@vue-nodes' }, () => {
+  test('should keep widget-input link aligned after persisted-workflow reload', async ({
+    comfyPage
+  }) => {
+    test.setTimeout(30000)
+
+    await comfyPage.workflow.loadWorkflow(
+      'vueNodes/ksampler-denoise-widget-link'
+    )
+    await comfyPage.vueNodes.waitForNodes(2)
+    await comfyPage.workflow.waitForDraftPersisted()
+    await comfyPage.workflow.reloadAndWaitForApp()
+    await comfyPage.vueNodes.waitForNodes(2)
+
+    const ksampler = await comfyPage.page.evaluate(() => {
+      const node = window.app!.graph.nodes.find((n) => n.type === 'KSampler')
+      if (!node) return null
+      const findIndex = (name: string) =>
+        node.inputs.findIndex(
+          (input) => input.name === name || input.widget?.name === name
+        )
+      return {
+        id: node.id,
+        denoiseIndex: findIndex('denoise'),
+        schedulerIndex: findIndex('scheduler')
+      }
+    })
+    if (!ksampler) {
+      throw new Error('KSampler should be present in fixture')
+    }
+    expect(
+      ksampler.denoiseIndex,
+      'denoise input slot not found'
+    ).toBeGreaterThanOrEqual(0)
+    expect(
+      ksampler.schedulerIndex,
+      'scheduler input slot not found'
+    ).toBeGreaterThanOrEqual(0)
+
+    const denoiseSlot = slotLocator(
+      comfyPage.page,
+      ksampler.id,
+      ksampler.denoiseIndex,
+      true
+    )
+    const schedulerSlot = slotLocator(
+      comfyPage.page,
+      ksampler.id,
+      ksampler.schedulerIndex,
+      true
+    )
+    await expectVisibleAll(denoiseSlot, schedulerSlot)
+
+    await expect
+      .poll(() =>
+        getInputLinkDetails(comfyPage.page, ksampler.id, ksampler.denoiseIndex)
+      )
+      .toMatchObject({
+        targetId: ksampler.id,
+        targetSlot: ksampler.denoiseIndex
+      })
+
+    // If the regression returns, getInputPos stays stale relative to the
+    // grown slot DOM and the endpoint drifts toward scheduler. Re-read
+    // positions each retry so layout settle doesn't cause flakes.
+    await expect(async () => {
+      const linkEnd = await comfyPage.page.evaluate(
+        ([nodeId, targetSlotIndex]) => {
+          const node = window.app!.graph.getNodeById(nodeId)
+          if (!node) return null
+          const slotPos = node.getInputPos(targetSlotIndex)
+          const [cx, cy] = window.app!.canvas.ds.convertOffsetToCanvas([
+            slotPos[0],
+            slotPos[1]
+          ])
+          const rect = window.app!.canvas.canvas.getBoundingClientRect()
+          return { x: cx + rect.left, y: cy + rect.top }
+        },
+        [ksampler.id, ksampler.denoiseIndex] as const
+      )
+      expect(linkEnd, 'link endpoint should resolve').not.toBeNull()
+
+      const denoiseCenter = await getCenter(denoiseSlot)
+      const schedulerCenter = await getCenter(schedulerSlot)
+      const distToDenoise = Math.hypot(
+        linkEnd!.x - denoiseCenter.x,
+        linkEnd!.y - denoiseCenter.y
+      )
+      const rowGap = Math.hypot(
+        denoiseCenter.x - schedulerCenter.x,
+        denoiseCenter.y - schedulerCenter.y
+      )
+
+      // Bound at rowGap / 4 - half the inter-slot midpoint, so any drift
+      // toward scheduler fails well before reaching it.
+      expect(
+        distToDenoise,
+        `Link endpoint (${linkEnd!.x.toFixed(1)}, ${linkEnd!.y.toFixed(1)}) is ` +
+          `${distToDenoise.toFixed(1)}px from denoise — should be within ` +
+          `${(rowGap / 4).toFixed(1)}px (quarter of inter-slot gap ${rowGap.toFixed(1)}px)`
+      ).toBeLessThan(rowGap / 4)
+    }).toPass({ timeout: 5000 })
+  })
+})
--- a/browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts
@@ -75,6 +75,24 @@ test.describe('Vue Node Context Menu', { tag: '@vue-nodes' }, () => {
      await expect(renamedNode).toBeVisible()
    })

+    test('should open node info in the right side panel via context menu', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.RightSidePanel.IsOpen', false)
+      await expect(comfyPage.menu.propertiesPanel.root).toBeHidden()
+
+      await openContextMenu(comfyPage, 'KSampler')
+      await clickExactMenuItem(comfyPage, 'Node Info')
+
+      const panel = comfyPage.menu.propertiesPanel.root
+      await expect(panel).toBeVisible()
+      await expect(panel.getByTestId('panel-tab-info')).toHaveAttribute(
+        'aria-selected',
+        'true'
+      )
+      await expect(comfyPage.menu.nodeLibraryTab.selectedTabButton).toBeHidden()
+    })
+
    test('should copy and paste node via context menu', async ({
      comfyPage
    }) => {
--- a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/error.spec.ts
+++ b/browser_tests/tests/vueNodes/nodeStates/error.spec.ts
@@ -4,6 +4,7 @@ import {
  comfyExpect as expect,
  comfyPageFixture
 } from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import {
  cleanupFakeModel,
  dismissErrorOverlay,
@@ -13,7 +14,9 @@ import {
  ExecutionHelper,
  buildKSamplerError
 } from '@e2e/fixtures/helpers/ExecutionHelper'
+import type { NodeError } from '@/schemas/apiSchema'
 import { fitToViewInstant } from '@e2e/fixtures/utils/fitToView'
+import { assetPath } from '@e2e/fixtures/utils/paths'
 import { webSocketFixture } from '@e2e/fixtures/ws'

 const test = mergeTests(comfyPageFixture, webSocketFixture)
@@ -22,6 +25,61 @@ const ERROR_CLASS = /ring-destructive-background/
 const UNKNOWN_NODE_ID = '1'
 const INNER_EXECUTION_ID = '2:1'
 const KSAMPLER_MODEL_INPUT_NAME = 'model'
+const LOAD_IMAGE_INPUT_NAME = 'image'
+const LOAD_IMAGE_UPLOAD_FILE = 'test_upload_image.png'
+
+function buildLoadImageRequiredInputError(): NodeError {
+  return {
+    class_type: 'LoadImage',
+    dependent_outputs: [],
+    errors: [
+      {
+        type: 'required_input_missing',
+        message: `Required input is missing: ${LOAD_IMAGE_INPUT_NAME}`,
+        details: '',
+        extra_info: { input_name: LOAD_IMAGE_INPUT_NAME }
+      }
+    ]
+  }
+}
+
+async function surfaceLoadImageMissingInputError(
+  comfyPage: ComfyPage,
+  loadImageId: string
+): Promise<void> {
+  const exec = new ExecutionHelper(comfyPage)
+  await exec.mockValidationFailure({
+    [loadImageId]: buildLoadImageRequiredInputError()
+  })
+  await comfyPage.runButton.click()
+  await dismissErrorOverlay(comfyPage)
+}
+
+async function selectLoadImageNodeForPaste(
+  comfyPage: ComfyPage,
+  loadImageId: string
+): Promise<void> {
+  await comfyPage.page.evaluate((nodeId) => {
+    const node = window.app!.graph.getNodeById(Number(nodeId))
+    if (!node) throw new Error(`Load Image node ${nodeId} not found`)
+    window.app!.canvas.selectNode(node)
+    window.app!.canvas.current_node = node
+  }, loadImageId)
+}
+
+async function setupLoadImageErrorScenario(comfyPage: ComfyPage) {
+  await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+  const loadImageNode = (
+    await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
+  )[0]
+  const loadImageId = String(loadImageNode.id)
+
+  return {
+    loadImageId,
+    innerWrapper: comfyPage.vueNodes.getNodeInnerWrapper(loadImageId),
+    imageWidget: await loadImageNode.getWidgetByName(LOAD_IMAGE_INPUT_NAME)
+  }
+}

 test.describe('Vue Node Error', { tag: '@vue-nodes' }, () => {
  test('should display error state when node is missing (node from workflow is not installed)', async ({
@@ -191,6 +249,74 @@ test.describe('Vue Node Error', { tag: '@vue-nodes' }, () => {

      await expect(innerWrapper).not.toHaveClass(ERROR_CLASS)
    })
+
+    test('clears error ring when user drops an image file onto Load Image', async ({
+      comfyPage
+    }) => {
+      const { loadImageId, innerWrapper, imageWidget } =
+        await setupLoadImageErrorScenario(comfyPage)
+
+      await test.step('queue with missing image input to surface the error', async () => {
+        await surfaceLoadImageMissingInputError(comfyPage, loadImageId)
+        await expect(innerWrapper).toHaveClass(ERROR_CLASS)
+      })
+
+      await test.step('drop an image onto the Load Image node', async () => {
+        const dropPosition =
+          await comfyPage.canvasOps.getNodeCenterByTitle('Load Image')
+        if (!dropPosition) {
+          throw new Error('Load Image node center must be available for drop')
+        }
+
+        await comfyPage.dragDrop.dragAndDropFile(LOAD_IMAGE_UPLOAD_FILE, {
+          dropPosition,
+          waitForUpload: true
+        })
+        await expect
+          .poll(() => imageWidget.getValue())
+          .toContain(LOAD_IMAGE_UPLOAD_FILE)
+      })
+
+      await expect(innerWrapper).not.toHaveClass(ERROR_CLASS)
+    })
+
+    test('clears error ring when user pastes an image file onto Load Image', async ({
+      comfyPage
+    }) => {
+      const { loadImageId, innerWrapper, imageWidget } =
+        await setupLoadImageErrorScenario(comfyPage)
+
+      await test.step('queue with missing image input to surface the error', async () => {
+        await surfaceLoadImageMissingInputError(comfyPage, loadImageId)
+        await expect(innerWrapper).toHaveClass(ERROR_CLASS)
+      })
+
+      await test.step('paste an image while Load Image is selected', async () => {
+        await comfyPage.canvas.focus()
+        await selectLoadImageNodeForPaste(comfyPage, loadImageId)
+        await expect
+          .poll(() =>
+            comfyPage.page.evaluate(() => window.app!.canvas.current_node?.type)
+          )
+          .toBe('LoadImage')
+
+        const uploadResponse = comfyPage.page.waitForResponse(
+          (resp) => resp.url().includes('/upload/') && resp.status() === 200,
+          { timeout: 10_000 }
+        )
+        // File clipboard contents cannot be seeded reliably in Playwright;
+        // use the direct document paste mode to exercise usePaste.
+        await comfyPage.clipboard.pasteFile(assetPath(LOAD_IMAGE_UPLOAD_FILE), {
+          mode: 'direct'
+        })
+        await uploadResponse
+        await expect
+          .poll(() => imageWidget.getValue())
+          .toContain(LOAD_IMAGE_UPLOAD_FILE)
+      })
+
+      await expect(innerWrapper).not.toHaveClass(ERROR_CLASS)
+    })
  })

  test.describe('subgraph propagation', { tag: '@subgraph' }, () => {
--- a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png
--- a/index.html
+++ b/index.html
@@ -26,6 +26,10 @@
        width: 100%;
        height: 100%;
        margin: 0;
+        /* Disable trackpad two-finger horizontal swipe back/forward navigation
+           and other overscroll gestures. ComfyUI is a full-screen editor; the
+           browser's overscroll behaviors only ever leave or break the workflow. */
+        overscroll-behavior: none;
      }
      body {
        display: grid;
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@comfyorg/comfyui-frontend",
-  "version": "1.45.6",
+  "version": "1.45.8",
  "private": true,
  "description": "Official front-end implementation of ComfyUI",
  "homepage": "https://comfy.org",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -36,7 +36,7 @@ catalog:
  '@storybook/addon-mcp': 0.1.6
  '@storybook/vue3': ^10.2.10
  '@storybook/vue3-vite': ^10.2.10
-  '@tailwindcss/vite': ^4.2.0
+  '@tailwindcss/vite': ^4.3.0
  '@tanstack/vue-virtual': ^3.13.12
  '@testing-library/jest-dom': ^6.9.1
  '@testing-library/user-event': ^14.6.1
@@ -112,7 +112,7 @@ catalog:
  rollup-plugin-visualizer: ^6.0.4
  storybook: ^10.2.10
  stylelint: ^16.26.1
-  tailwindcss: ^4.2.0
+  tailwindcss: ^4.3.0
  three: ^0.170.0
  tailwindcss-primeui: ^0.6.1
  tsx: ^4.15.6
--- a/scripts/generate-embedded-metadata-test-files.py
+++ b/scripts/generate-embedded-metadata-test-files.py
@@ -36,8 +36,19 @@ WORKFLOW = {
 }
 PROMPT = {'1': {'class_type': 'KSampler', 'inputs': {}}}

+# API-format prompt with bare NaN/Infinity tokens (as Python's json.dumps emits
+# by default). The NaN variant fixtures omit the workflow field so the loader
+# must route through prompt-parsing, which trips JSON.parse on bare NaN.
+PROMPT_NAN = {
+    '1': {
+        'class_type': 'KSampler',
+        'inputs': {'cfg': float('nan'), 'denoise': float('inf')},
+    }
+}
+
 WORKFLOW_JSON = json.dumps(WORKFLOW, separators=(',', ':'))
 PROMPT_JSON = json.dumps(PROMPT, separators=(',', ':'))
+PROMPT_NAN_JSON = json.dumps(PROMPT_NAN, separators=(',', ':'))


 def out(name: str) -> str:
@@ -53,15 +64,21 @@ def make_1x1_image() -> Image.Image:
    return Image.new('RGB', (1, 1), (255, 0, 0))


-def build_exif_bytes() -> bytes:
+def build_exif_bytes(
+    workflow_str: str | None = WORKFLOW_JSON,
+    prompt_str: str | None = PROMPT_JSON,
+) -> bytes:
    """Build EXIF bytes matching the backend's tag assignments.

    Backend: 0x010F (Make) = "workflow:<json>", 0x0110 (Model) = "prompt:<json>"
+    Pass ``None`` to omit a tag.
    """
    img = make_1x1_image()
    exif = img.getexif()
-    exif[0x010F] = f'workflow:{WORKFLOW_JSON}'
-    exif[0x0110] = f'prompt:{PROMPT_JSON}'
+    if workflow_str is not None:
+        exif[0x010F] = f'workflow:{workflow_str}'
+    if prompt_str is not None:
+        exif[0x0110] = f'prompt:{prompt_str}'
    return exif.tobytes()


@@ -93,6 +110,9 @@ def generate_av_fixture(
    codec: str,
    rate: int = 44100,
    options: dict | None = None,
+    *,
+    prompt_json: str | None = PROMPT_JSON,
+    workflow_json: str | None = WORKFLOW_JSON,
 ):
    """Generate an audio fixture via PyAV container.metadata[], matching the backend."""
    path = out(name)
@@ -100,8 +120,10 @@ def generate_av_fixture(
    stream = container.add_stream(codec, rate=rate)
    stream.layout = 'mono'

-    container.metadata['prompt'] = PROMPT_JSON
-    container.metadata['workflow'] = WORKFLOW_JSON
+    if prompt_json is not None:
+        container.metadata['prompt'] = prompt_json
+    if workflow_json is not None:
+        container.metadata['workflow'] = workflow_json

    sample_fmt = stream.codec_context.codec.audio_formats[0].name
    samples = stream.codec_context.frame_size or 1024
@@ -175,6 +197,63 @@ def generate_webm():
    generate_av_fixture('with_metadata.webm', 'webm', 'libvorbis')


+def generate_nan_variants():
+    """Per-format fixtures carrying ONLY a NaN/Infinity-laden API prompt.
+
+    These force the loader through the prompt-parsing path, where Python's
+    bare NaN/Infinity tokens trip JSON.parse.
+    """
+    img = make_1x1_image()
+    info = PngInfo()
+    info.add_text('prompt', PROMPT_NAN_JSON)
+    img.save(out('with_nan_metadata.png'), 'PNG', pnginfo=info)
+    report('with_nan_metadata.png')
+
+    exif_nan = build_exif_bytes(workflow_str=None, prompt_str=PROMPT_NAN_JSON)
+
+    img = make_1x1_image()
+    img.save(out('with_nan_metadata.webp'), 'WEBP', exif=exif_nan)
+    report('with_nan_metadata.webp')
+
+    img = make_1x1_image()
+    img.save(out('with_nan_metadata.avif'), 'AVIF', exif=exif_nan)
+    report('with_nan_metadata.avif')
+
+    generate_av_fixture(
+        'with_nan_metadata.flac', 'flac', 'flac',
+        prompt_json=PROMPT_NAN_JSON, workflow_json=None,
+    )
+    generate_av_fixture(
+        'with_nan_metadata.opus', 'opus', 'libopus', rate=48000,
+        prompt_json=PROMPT_NAN_JSON, workflow_json=None,
+    )
+    generate_av_fixture(
+        'with_nan_metadata.mp3', 'mp3', 'libmp3lame',
+        prompt_json=PROMPT_NAN_JSON, workflow_json=None,
+    )
+    generate_av_fixture(
+        'with_nan_metadata.webm', 'webm', 'libvorbis',
+        prompt_json=PROMPT_NAN_JSON, workflow_json=None,
+    )
+
+    path = out('with_nan_metadata.mp4')
+    subprocess.run([
+        'ffmpeg', '-y', '-loglevel', 'error',
+        '-f', 'lavfi', '-i', 'anullsrc=r=44100:cl=mono',
+        '-t', '0.01', '-c:a', 'aac', '-b:a', '32k',
+        '-movflags', 'use_metadata_tags',
+        '-metadata', f'prompt={PROMPT_NAN_JSON}',
+        path,
+    ], check=True)
+    report('with_nan_metadata.mp4')
+
+    # Direct JSON file containing API-format prompt with bare NaN/Infinity.
+    json_path = out('with_nan_metadata.json')
+    with open(json_path, 'w', encoding='utf-8') as f:
+        f.write(PROMPT_NAN_JSON)
+    report('with_nan_metadata.json')
+
+
 if __name__ == '__main__':
    print('Generating fixtures...')
    generate_png()
@@ -185,4 +264,5 @@ if __name__ == '__main__':
    generate_mp3()
    generate_mp4()
    generate_webm()
+    generate_nan_variants()
    print('Done.')
--- a/src/base/assert.test.ts
+++ b/src/base/assert.test.ts
@@ -0,0 +1,91 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { assert, setAssertReporter } from '@/base/assert'
+
+describe('assert', () => {
+  let consoleErrorSpy: ReturnType<typeof vi.spyOn>
+
+  beforeEach(() => {
+    consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    vi.unstubAllEnvs()
+    setAssertReporter(null)
+  })
+
+  it('does nothing when condition is true', () => {
+    expect(() => assert(true, 'should not throw')).not.toThrow()
+    expect(consoleErrorSpy).not.toHaveBeenCalled()
+  })
+
+  it('logs console.error when condition is false', () => {
+    vi.stubEnv('DEV', false)
+    assert(false, 'test message')
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      '[Assertion failed]: test message'
+    )
+  })
+
+  it('throws in DEV mode when condition is false', () => {
+    vi.stubEnv('DEV', true)
+    const reporter = vi.fn()
+    setAssertReporter(reporter)
+    expect(() => assert(false, 'dev error')).toThrow(
+      '[Assertion failed]: dev error'
+    )
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      '[Assertion failed]: dev error'
+    )
+    expect(reporter).not.toHaveBeenCalled()
+  })
+
+  it('does not throw in non-DEV mode when condition is false', () => {
+    vi.stubEnv('DEV', false)
+    expect(() => assert(false, 'non-dev error')).not.toThrow()
+  })
+
+  it('calls registered reporter in non-DEV mode with formatted message', () => {
+    vi.stubEnv('DEV', false)
+    const reporter = vi.fn()
+    setAssertReporter(reporter)
+    assert(false, 'reporter message')
+    expect(reporter).toHaveBeenCalledWith(
+      '[Assertion failed]: reporter message'
+    )
+  })
+
+  it('does not call reporter when condition is true', () => {
+    vi.stubEnv('DEV', false)
+    const reporter = vi.fn()
+    setAssertReporter(reporter)
+    assert(true, 'no call')
+    expect(reporter).not.toHaveBeenCalled()
+  })
+
+  it('handles null reporter gracefully in non-DEV mode', () => {
+    vi.stubEnv('DEV', false)
+    setAssertReporter(null)
+    expect(() => assert(false, 'null reporter')).not.toThrow()
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      '[Assertion failed]: null reporter'
+    )
+  })
+
+  it('swallows reporter exceptions in non-DEV mode', () => {
+    vi.stubEnv('DEV', false)
+    const reporter = vi.fn(() => {
+      throw new Error('reporter blew up')
+    })
+    setAssertReporter(reporter)
+    expect(() => assert(false, 'safe under reporter failure')).not.toThrow()
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      '[Assertion failed]: safe under reporter failure'
+    )
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      '[Assertion reporter failed]',
+      expect.any(Error)
+    )
+  })
+})
--- a/src/base/assert.ts
+++ b/src/base/assert.ts
@@ -0,0 +1,36 @@
+type AssertReporter = (message: string) => void
+
+let reporter: AssertReporter | null = null
+
+/**
+ * Register a reporter for assertion failures in non-DEV environments.
+ * Called once at app startup by platform/ or higher layers to wire in
+ * Sentry, toast notifications, etc.
+ */
+export function setAssertReporter(fn: AssertReporter | null): void {
+  reporter = fn
+}
+
+/**
+ * Centralized invariant assertion.
+ *
+ * - Always: console.error
+ * - DEV: throws (surfaces bugs immediately)
+ * - Otherwise: delegates to registered reporter (Sentry, toast, etc.)
+ */
+export function assert(condition: unknown, message: string): asserts condition {
+  if (condition) return
+
+  const formatted = `[Assertion failed]: ${message}`
+  console.error(formatted)
+
+  if (import.meta.env.DEV) {
+    throw new Error(formatted)
+  }
+
+  try {
+    reporter?.(formatted)
+  } catch (error) {
+    console.error('[Assertion reporter failed]', error)
+  }
+}
--- a/src/base/wheelGestures.ts
+++ b/src/base/wheelGestures.ts
@@ -0,0 +1,20 @@
+/**
+ * Wheel events whose browser default would break the editing experience.
+ * On macOS trackpads:
+ *   - `ctrl/meta + wheel` (pinch-zoom) triggers page-level zoom, which
+ *     pushes fixed-position UI (e.g. ComfyActionbar) off-screen with no
+ *     recovery short of a page reload.
+ *   - Horizontal-dominant wheel (two-finger horizontal swipe) triggers
+ *     back/forward navigation, which leaves the workflow.
+ *
+ * Equal `|deltaX| == |deltaY|` (including idle 0/0 frames between meaningful
+ * trackpad samples) intentionally falls on the false branch so native
+ * vertical scroll wins on a tie.
+ *
+ * Components that intercept wheel events should suppress the default for
+ * these gestures even when they otherwise let the browser scroll natively.
+ */
+export const isCanvasGestureWheel = (event: WheelEvent): boolean =>
+  event.ctrlKey ||
+  event.metaKey ||
+  Math.abs(event.deltaX) > Math.abs(event.deltaY)
--- a/src/components/common/CustomizationDialog.test.ts
+++ b/src/components/common/CustomizationDialog.test.ts
@@ -16,14 +16,6 @@ vi.mock('@/stores/nodeBookmarkStore', () => ({
  })
 }))

-vi.mock('primevue/dialog', () => ({
-  default: {
-    name: 'Dialog',
-    template: '<div v-if="visible"><slot /><slot name="footer" /></div>',
-    props: ['visible']
-  }
-}))
-
 vi.mock('primevue/selectbutton', () => ({
  default: {
    name: 'SelectButton',
@@ -32,8 +24,29 @@ vi.mock('primevue/selectbutton', () => ({
  }
 }))

-vi.mock('primevue/divider', () => ({
-  default: { name: 'Divider', template: '<hr />' }
+vi.mock('@/components/ui/dialog/Dialog.vue', () => ({
+  default: { name: 'Dialog', template: '<div><slot /></div>' }
+}))
+vi.mock('@/components/ui/dialog/DialogPortal.vue', () => ({
+  default: { name: 'DialogPortal', template: '<div><slot /></div>' }
+}))
+vi.mock('@/components/ui/dialog/DialogOverlay.vue', () => ({
+  default: { name: 'DialogOverlay', template: '<div />' }
+}))
+vi.mock('@/components/ui/dialog/DialogContent.vue', () => ({
+  default: { name: 'DialogContent', template: '<div><slot /></div>' }
+}))
+vi.mock('@/components/ui/dialog/DialogHeader.vue', () => ({
+  default: { name: 'DialogHeader', template: '<div><slot /></div>' }
+}))
+vi.mock('@/components/ui/dialog/DialogFooter.vue', () => ({
+  default: { name: 'DialogFooter', template: '<div><slot /></div>' }
+}))
+vi.mock('@/components/ui/dialog/DialogTitle.vue', () => ({
+  default: { name: 'DialogTitle', template: '<div><slot /></div>' }
+}))
+vi.mock('@/components/ui/dialog/DialogClose.vue', () => ({
+  default: { name: 'DialogClose', template: '<button />' }
 }))

 vi.mock('@/components/common/ColorCustomizationSelector.vue', () => ({
--- a/src/components/common/CustomizationDialog.vue
+++ b/src/components/common/CustomizationDialog.vue
@@ -1,72 +1,111 @@
 <template>
-  <Dialog v-model:visible="visible" :header="$t('g.customizeFolder')">
-    <div class="p-fluid">
-      <div class="field icon-field">
-        <label for="icon">{{ $t('g.icon') }}</label>
-        <SelectButton
-          v-model="selectedIcon"
-          :options="iconOptions"
-          option-label="name"
-          data-key="value"
-        >
-          <template #option="slotProps">
-            <i
-              :class="['pi', slotProps.option.value, 'mr-2']"
-              :style="{ color: finalColor }"
+  <Dialog v-model:open="visible" :modal="false">
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogContent
+        size="md"
+        :aria-labelledby="titleId"
+        @pointer-down-outside="onPointerDownOutside"
+      >
+        <DialogHeader>
+          <DialogTitle :id="titleId">
+            {{ $t('g.customizeFolder') }}
+          </DialogTitle>
+          <DialogClose />
+        </DialogHeader>
+        <div class="flex flex-col gap-4 px-4 py-2">
+          <div class="flex flex-col gap-2">
+            <label for="customization-icon" class="text-sm font-medium">
+              {{ $t('g.icon') }}
+            </label>
+            <SelectButton
+              id="customization-icon"
+              v-model="selectedIcon"
+              :options="iconOptions"
+              option-label="name"
+              data-key="value"
+            >
+              <template #option="slotProps">
+                <i
+                  :class="['pi', slotProps.option.value, 'mr-2']"
+                  :style="{ color: finalColor }"
+                />
+              </template>
+            </SelectButton>
+          </div>
+          <hr class="border-t border-border-subtle" />
+          <div class="flex flex-col gap-2">
+            <label for="customization-color" class="text-sm font-medium">
+              {{ $t('g.color') }}
+            </label>
+            <ColorCustomizationSelector
+              id="customization-color"
+              v-model="finalColor"
+              :color-options="colorOptions"
            />
-          </template>
-        </SelectButton>
-      </div>
-      <Divider />
-      <div class="field color-field">
-        <label for="color">{{ $t('g.color') }}</label>
-        <ColorCustomizationSelector
-          v-model="finalColor"
-          :color-options="colorOptions"
-        />
-      </div>
-    </div>
-    <template #footer>
-      <Button variant="textonly" @click="resetCustomization">
-        <i class="pi pi-refresh" />
-        {{ $t('g.reset') }}
-      </Button>
-      <Button autofocus @click="confirmCustomization">
-        <i class="pi pi-check" />
-        {{ $t('g.confirm') }}
-      </Button>
-    </template>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="textonly" @click="resetCustomization">
+            <i class="pi pi-refresh" />
+            {{ $t('g.reset') }}
+          </Button>
+          <Button autofocus @click="confirmCustomization">
+            <i class="pi pi-check" />
+            {{ $t('g.confirm') }}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </DialogPortal>
  </Dialog>
 </template>

 <script setup lang="ts">
-import Dialog from 'primevue/dialog'
-import Divider from 'primevue/divider'
 import SelectButton from 'primevue/selectbutton'
-import { computed, ref, watch } from 'vue'
+import { ref, useId, watch } from 'vue'
 import { useI18n } from 'vue-i18n'

 import ColorCustomizationSelector from '@/components/common/ColorCustomizationSelector.vue'
 import Button from '@/components/ui/button/Button.vue'
+import Dialog from '@/components/ui/dialog/Dialog.vue'
+import DialogClose from '@/components/ui/dialog/DialogClose.vue'
+import DialogContent from '@/components/ui/dialog/DialogContent.vue'
+import DialogFooter from '@/components/ui/dialog/DialogFooter.vue'
+import DialogHeader from '@/components/ui/dialog/DialogHeader.vue'
+import DialogOverlay from '@/components/ui/dialog/DialogOverlay.vue'
+import DialogPortal from '@/components/ui/dialog/DialogPortal.vue'
+import DialogTitle from '@/components/ui/dialog/DialogTitle.vue'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'

 const { t } = useI18n()

-const props = defineProps<{
-  modelValue: boolean
+const { initialIcon, initialColor } = defineProps<{
  initialIcon?: string
  initialColor?: string
 }>()

+const visible = defineModel<boolean>({ default: false })
+
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
  (e: 'confirm', icon: string, color: string): void
 }>()

-const visible = computed({
-  get: () => props.modelValue,
-  set: (value) => emit('update:modelValue', value)
-})
+const titleId = useId()
+
+// PrimeVue ColorPicker overlay teleports to body. Reka treats clicks on it as
+// outside and would dismiss the dialog mid-color-pick. Treat any PrimeVue
+// overlay click as inside.
+const PRIMEVUE_OVERLAY_SELECTORS =
+  '.p-colorpicker-panel, .p-overlay, .p-overlay-mask'
+
+function onPointerDownOutside(
+  event: CustomEvent<{ originalEvent: PointerEvent }>
+) {
+  const target = event.detail.originalEvent.target
+  if (target instanceof Element && target.closest(PRIMEVUE_OVERLAY_SELECTORS)) {
+    event.preventDefault()
+  }
+}

 const nodeBookmarkStore = useNodeBookmarkStore()

@@ -95,30 +134,22 @@ const defaultIcon = iconOptions.find(
 )

 const selectedIcon = ref(defaultIcon ?? iconOptions[0])
-const finalColor = ref(
-  props.initialColor || nodeBookmarkStore.defaultBookmarkColor
-)
+const finalColor = ref(initialColor || nodeBookmarkStore.defaultBookmarkColor)

 const resetCustomization = () => {
  selectedIcon.value =
-    iconOptions.find((option) => option.value === props.initialIcon) ??
-    iconOptions[0]
-  finalColor.value =
-    props.initialColor || nodeBookmarkStore.defaultBookmarkColor
+    iconOptions.find((option) => option.value === initialIcon) ?? iconOptions[0]
+  finalColor.value = initialColor || nodeBookmarkStore.defaultBookmarkColor
 }

 const confirmCustomization = () => {
  emit('confirm', selectedIcon.value.value, finalColor.value)
-  closeDialog()
-}
-
-const closeDialog = () => {
  visible.value = false
 }

 watch(
-  () => props.modelValue,
-  (newValue: boolean) => {
+  visible,
+  (newValue) => {
    if (newValue) {
      resetCustomization()
    }
@@ -135,10 +166,4 @@ watch(
 .p-selectbutton .p-button .pi {
  font-size: 1.5rem;
 }
-
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
 </style>
--- a/src/components/common/Dialogue.vue
+++ b/src/components/common/Dialogue.vue
@@ -27,7 +27,7 @@ const { t } = useI18n()
      />
      <DialogContent
        v-bind="$attrs"
-        class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] z-1700 max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-2xl border border-border-subtle bg-base-background p-2 shadow-sm"
+        class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] z-1700 max-h-[85vh] w-[90vw] max-w-[450px] -translate-1/2 rounded-2xl border border-border-subtle bg-base-background p-2 shadow-sm"
      >
        <div
          v-if="title"
--- a/src/components/common/VirtualGrid.vue
+++ b/src/components/common/VirtualGrid.vue
@@ -1,7 +1,7 @@
 <template>
  <div
    ref="container"
-    class="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-(--dialog-surface) h-full overflow-y-auto [overflow-anchor:none] [scrollbar-gutter:stable]"
+    class="h-full scrollbar-thin scrollbar-thumb-(--dialog-surface) scrollbar-track-transparent scrollbar-gutter-stable overflow-y-auto [overflow-anchor:none]"
  >
    <div :style="topSpacerStyle" />
    <div :style="mergedGridStyle">
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -14,7 +14,7 @@
    </template>

    <template #header>
-      <FormSearchInput
+      <AsyncSearchInput
        v-model="searchInput"
        :searcher="applySearchQuery"
        :debounce-ms="400"
@@ -412,7 +412,7 @@ import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'
 import CardTop from '@/components/card/CardTop.vue'
 import Tag from '@/components/chip/Tag.vue'
-import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
+import AsyncSearchInput from '@/components/ui/search-input/AsyncSearchInput.vue'
 import MultiSelect from '@/components/ui/multi-select/MultiSelect.vue'
 import SingleSelect from '@/components/ui/single-select/SingleSelect.vue'
 import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue'
--- a/src/components/dialog/content/ErrorDialogContent.vue
+++ b/src/components/dialog/content/ErrorDialogContent.vue
@@ -35,13 +35,13 @@
      </Button>
    </div>
    <template v-if="reportOpen">
-      <Divider />
-      <ScrollPanel class="h-[400px] w-full max-w-[80vw]">
+      <hr class="border-t border-border-subtle" />
+      <div class="h-[400px] w-full max-w-[80vw] overflow-auto">
        <pre class="wrap-break-word whitespace-pre-wrap">{{
          reportContent
        }}</pre>
-      </ScrollPanel>
-      <Divider />
+      </div>
+      <hr class="border-t border-border-subtle" />
    </template>
    <div class="flex justify-end gap-4">
      <FindIssueButton
@@ -62,8 +62,6 @@
 </template>

 <script setup lang="ts">
-import Divider from 'primevue/divider'
-import ScrollPanel from 'primevue/scrollpanel'
 import { useToast } from 'primevue/usetoast'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
--- a/src/components/graph/SelectionToolbox.test.ts
+++ b/src/components/graph/SelectionToolbox.test.ts
@@ -1,6 +1,7 @@
 /* eslint-disable testing-library/no-container, testing-library/no-node-access */
+import { createTestingPinia } from '@pinia/testing'
 import { fireEvent, render } from '@testing-library/vue'
-import { createPinia, setActivePinia } from 'pinia'
+import { setActivePinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
@@ -29,6 +30,26 @@ function createMockExtensionService(): ReturnType<typeof useExtensionService> {
  >
 }

+const { settingGetMock } = vi.hoisted(() => ({
+  settingGetMock: vi.fn()
+}))
+
+const defaultSettingValues: Record<string, unknown> = {
+  'Comfy.UseNewMenu': 'Top',
+  'Comfy.NodeLibrary.NewDesign': true,
+  'Comfy.Load3D.3DViewerEnable': true
+}
+
+function mockSettingValues(overrides: Record<string, unknown> = {}) {
+  const settingValues = {
+    ...defaultSettingValues,
+    ...overrides
+  }
+  settingGetMock.mockImplementation(
+    (key: string): unknown => settingValues[key] ?? null
+  )
+}
+
 // Mock the composables and services
 vi.mock('@/renderer/core/canvas/useCanvasInteractions', () => ({
  useCanvasInteractions: vi.fn(() => ({
@@ -79,10 +100,7 @@ vi.mock('@/utils/nodeFilterUtil', () => ({

 vi.mock('@/platform/settings/settingStore', () => ({
  useSettingStore: () => ({
-    get: vi.fn((key: string) => {
-      if (key === 'Comfy.Load3D.3DViewerEnable') return true
-      return null
-    })
+    get: settingGetMock
  })
 }))

@@ -128,7 +146,7 @@ describe('SelectionToolbox', () => {
  }

  beforeEach(() => {
-    setActivePinia(createPinia())
+    setActivePinia(createTestingPinia({ createSpy: vi.fn, stubActions: false }))
    canvasStore = useCanvasStore()
    nodeDefMock = {
      type: 'TestNode',
@@ -139,6 +157,7 @@ describe('SelectionToolbox', () => {
    canvasStore.canvas = createMockCanvas()

    vi.resetAllMocks()
+    mockSettingValues()
  })

  function renderComponent(props = {}): { container: Element } {
@@ -231,6 +250,42 @@ describe('SelectionToolbox', () => {
      expect(container.querySelector('.info-button')).toBeFalsy()
    })

+    it('should not show info button when legacy menu uses the new node library', () => {
+      mockSettingValues({
+        'Comfy.UseNewMenu': 'Disabled',
+        'Comfy.NodeLibrary.NewDesign': true
+      })
+      canvasStore.selectedItems = [createMockPositionable()]
+
+      const { container } = renderComponent()
+
+      expect(container.querySelector('.info-button')).toBeFalsy()
+    })
+
+    it('should not show info button when legacy menu uses the legacy node library', () => {
+      mockSettingValues({
+        'Comfy.UseNewMenu': 'Disabled',
+        'Comfy.NodeLibrary.NewDesign': false
+      })
+      canvasStore.selectedItems = [createMockPositionable()]
+
+      const { container } = renderComponent()
+
+      expect(container.querySelector('.info-button')).toBeFalsy()
+    })
+
+    it('should show info button when new menu uses the legacy node library', () => {
+      mockSettingValues({
+        'Comfy.UseNewMenu': 'Top',
+        'Comfy.NodeLibrary.NewDesign': false
+      })
+      canvasStore.selectedItems = [createMockPositionable()]
+
+      const { container } = renderComponent()
+
+      expect(container.querySelector('.info-button')).toBeTruthy()
+    })
+
    it('should show color picker for all selections', () => {
      // Single node selection
      canvasStore.selectedItems = [createMockPositionable()]
--- a/src/components/graph/SelectionToolbox.vue
+++ b/src/components/graph/SelectionToolbox.vue
@@ -16,8 +16,8 @@
        @wheel="canvasInteractions.forwardEventToCanvas"
      >
        <DeleteButton v-if="showDelete" />
-        <VerticalDivider v-if="showInfoButton && showAnyPrimaryActions" />
-        <InfoButton v-if="showInfoButton" />
+        <VerticalDivider v-if="canOpenNodeInfo && showAnyPrimaryActions" />
+        <InfoButton v-if="canOpenNodeInfo" />

        <ColorPickerButton v-if="showColorPicker" />
        <FrameNodes v-if="showFrameNodes" />
@@ -105,9 +105,8 @@ const {
  isSingleImageNode,
  hasAny3DNodeSelected,
  hasOutputNodesSelected,
-  nodeDef
+  canOpenNodeInfo
 } = useSelectionState()
-const showInfoButton = computed(() => !!nodeDef.value)

 const showColorPicker = computed(() => hasAnySelection.value)
 const showConvertToSubgraph = computed(() => hasAnySelection.value)
--- a/src/components/graph/selectionToolbox/InfoButton.test.ts
+++ b/src/components/graph/selectionToolbox/InfoButton.test.ts
@@ -1,6 +1,5 @@
 import { render, screen } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
-import { createPinia, setActivePinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import Tooltip from 'primevue/tooltip'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -9,19 +8,20 @@ import { createI18n } from 'vue-i18n'
 import InfoButton from '@/components/graph/selectionToolbox/InfoButton.vue'
 import Button from '@/components/ui/button/Button.vue'

-const { openPanelMock } = vi.hoisted(() => ({
-  openPanelMock: vi.fn()
+const { openNodeInfoMock, trackUiButtonClickedMock } = vi.hoisted(() => ({
+  openNodeInfoMock: vi.fn(),
+  trackUiButtonClickedMock: vi.fn()
 }))

-vi.mock('@/stores/workspace/rightSidePanelStore', () => ({
-  useRightSidePanelStore: () => ({
-    openPanel: openPanelMock
+vi.mock('@/composables/graph/useSelectionState', () => ({
+  useSelectionState: () => ({
+    openNodeInfo: openNodeInfoMock
  })
 }))

 vi.mock('@/platform/telemetry', () => ({
  useTelemetry: () => ({
-    trackUiButtonClicked: vi.fn()
+    trackUiButtonClicked: trackUiButtonClickedMock
  })
 }))

@@ -39,8 +39,8 @@ describe('InfoButton', () => {
  })

  beforeEach(() => {
-    setActivePinia(createPinia())
    vi.clearAllMocks()
+    openNodeInfoMock.mockReturnValue(true)
  })

  const renderComponent = () => {
@@ -53,12 +53,29 @@ describe('InfoButton', () => {
    })
  }

-  it('should open the info panel on click', async () => {
+  const clickNodeInfoButton = async () => {
    const user = userEvent.setup()
+    await user.click(screen.getByRole('button', { name: 'Node Info' }))
+  }
+
+  it('should open the node info panel on click', async () => {
    renderComponent()

-    await user.click(screen.getByRole('button', { name: 'Node Info' }))
+    await clickNodeInfoButton()

-    expect(openPanelMock).toHaveBeenCalledWith('info')
+    expect(openNodeInfoMock).toHaveBeenCalled()
+    expect(trackUiButtonClickedMock).toHaveBeenCalledWith({
+      button_id: 'selection_toolbox_node_info_opened'
+    })
+  })
+
+  it('should not track the click when the node info panel is unavailable', async () => {
+    openNodeInfoMock.mockReturnValue(false)
+    renderComponent()
+
+    await clickNodeInfoButton()
+
+    expect(openNodeInfoMock).toHaveBeenCalled()
+    expect(trackUiButtonClickedMock).not.toHaveBeenCalled()
  })
 })
--- a/src/components/graph/selectionToolbox/InfoButton.vue
+++ b/src/components/graph/selectionToolbox/InfoButton.vue
@@ -15,18 +15,16 @@

 <script setup lang="ts">
 import Button from '@/components/ui/button/Button.vue'
+import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { useTelemetry } from '@/platform/telemetry'
-import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'

-const rightSidePanelStore = useRightSidePanelStore()
+const { openNodeInfo } = useSelectionState()

-/**
- * Track node info button click and toggle node help.
- */
 const onInfoClick = () => {
+  if (!openNodeInfo()) return
+
  useTelemetry()?.trackUiButtonClicked({
    button_id: 'selection_toolbox_node_info_opened'
  })
-  rightSidePanelStore.openPanel('info')
 }
 </script>
--- a/src/components/maskeditor/PointerZone.test.ts
+++ b/src/components/maskeditor/PointerZone.test.ts
@@ -141,6 +141,21 @@ describe('PointerZone', () => {
        y: 45
      })
    })
+
+    it('should preventDefault on wheel to block browser zoom on ctrl+wheel', () => {
+      renderZone()
+      const zone = getZone()
+
+      const event = new WheelEvent('wheel', {
+        bubbles: true,
+        cancelable: true,
+        deltaY: -1,
+        ctrlKey: true
+      })
+      zone.dispatchEvent(event)
+
+      expect(event.defaultPrevented).toBe(true)
+    })
  })

  describe('isPanning watcher', () => {
--- a/src/components/maskeditor/PointerZone.vue
+++ b/src/components/maskeditor/PointerZone.vue
@@ -11,7 +11,7 @@
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
-    @wheel="handleWheel"
+    @wheel.prevent="handleWheel"
    @contextmenu.prevent
  />
 </template>
--- a/src/components/maskeditor/dialog/TopBarHeader.vue
+++ b/src/components/maskeditor/dialog/TopBarHeader.vue
@@ -11,7 +11,7 @@
        >
          <svg
            viewBox="0 0 15 15"
-            class="pointer-events-none h-6.25 w-6.25 fill-current"
+            class="pointer-events-none size-6.25 fill-current"
          >
            <path
              d="M8.77,12.18c-.25,0-.46-.2-.46-.46s.2-.46.46-.46c1.47,0,2.67-1.2,2.67-2.67,0-1.57-1.34-2.67-3.26-2.67h-3.98l1.43,1.43c.18.18.18.47,0,.64-.18.18-.47.18-.64,0l-2.21-2.21c-.18-.18-.18-.47,0-.64l2.21-2.21c.18-.18.47-.18.64,0,.18.18.18.47,0,.64l-1.43,1.43h3.98c2.45,0,4.17,1.47,4.17,3.58,0,1.97-1.61,3.58-3.58,3.58Z"
@@ -26,7 +26,7 @@
        >
          <svg
            viewBox="0 0 15 15"
-            class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
+            class="pointer-events-none size-6.25 fill-(--input-text)"
          >
            <path
              class="cls-1"
@@ -44,7 +44,7 @@
        >
          <svg
            viewBox="-6 -7 15 15"
-            class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
+            class="pointer-events-none size-6.25 fill-(--input-text)"
          >
            <path
              d="m2.25-2.625c.3452 0 .625.2798.625.625v5c0 .3452-.2798.625-.625.625h-5c-.3452 0-.625-.2798-.625-.625v-5c0-.3452.2798-.625.625-.625h5zm1.25.625v5c0 .6904-.5596 1.25-1.25 1.25h-5c-.6904 0-1.25-.5596-1.25-1.25v-5c0-.6904.5596-1.25 1.25-1.25h5c.6904 0 1.25.5596 1.25 1.25zm-.1673-2.3757-.4419.4419-1.5246-1.5246 1.5416-1.5417.442.4419-.7871.7872h.9373c1.3807 0 2.5 1.1193 2.5 2.5h-.625c0-1.0355-.8395-1.875-1.875-1.875h-.9375l.7702.7702z"
@@ -59,7 +59,7 @@
        >
          <svg
            viewBox="-9 -7 15 15"
-            class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
+            class="pointer-events-none size-6.25 fill-(--input-text)"
          >
            <g transform="scale(-1, 1)">
              <path
@@ -76,7 +76,7 @@
        >
          <svg
            viewBox="0 0 15 15"
-            class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
+            class="pointer-events-none size-6.25 fill-(--input-text)"
          >
            <path
              d="M7.5,1.5c-.28,0-.5.22-.5.5v11c0,.28.22.5.5.5s.5-.22.5-.5v-11c0-.28-.22-.5-.5-.5Z"
@@ -92,7 +92,7 @@
        >
          <svg
            viewBox="0 0 15 15"
-            class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
+            class="pointer-events-none size-6.25 fill-(--input-text)"
          >
            <path
              d="M2,7.5c0-.28.22-.5.5-.5h11c.28,0,.5.22.5.5s-.22.5-.5.5h-11c-.28,0-.5-.22-.5-.5Z"
--- a/src/components/node/NodePreviewCard.vue
+++ b/src/components/node/NodePreviewCard.vue
@@ -2,6 +2,7 @@
  <div
    class="flex flex-col overflow-hidden rounded-lg border border-border-default bg-base-background"
    :style="{ width: `${BASE_WIDTH_PX * (scaleFactor / BASE_SCALE)}px` }"
+    data-testid="node-preview-card"
  >
    <div ref="previewContainerRef" class="overflow-hidden p-3">
      <div
--- a/src/components/rightSidePanel/RightSidePanel.vue
+++ b/src/components/rightSidePanel/RightSidePanel.vue
@@ -370,7 +370,7 @@ function handleTitleCancel() {
    </section>

    <!-- Panel Content -->
-    <div class="scrollbar-thin flex-1 overflow-y-auto">
+    <div class="flex-1 scrollbar-thin overflow-y-auto">
      <TabErrors v-if="activeTab === 'errors'" />
      <template v-else-if="!hasSelection">
        <TabGlobalParameters v-if="activeTab === 'parameters'" />
--- a/src/components/rightSidePanel/errors/TabErrors.test.ts
+++ b/src/components/rightSidePanel/errors/TabErrors.test.ts
@@ -82,7 +82,7 @@ describe('TabErrors.vue', () => {
          })
        ],
        stubs: {
-          FormSearchInput: {
+          AsyncSearchInput: {
            template:
              '<input @input="$emit(\'update:modelValue\', $event.target.value)" />'
          },
--- a/src/components/rightSidePanel/errors/TabErrors.vue
+++ b/src/components/rightSidePanel/errors/TabErrors.vue
@@ -4,7 +4,7 @@
    <div
      class="flex min-w-0 shrink-0 items-center border-b border-interface-stroke px-4 pt-1 pb-4"
    >
-      <FormSearchInput v-model="searchQuery" class="flex-1" />
+      <AsyncSearchInput v-model="searchQuery" class="flex-1" />
      <CollapseToggleButton
        v-model="isAllCollapsed"
        :show="!isSearching && tabErrorGroups.length > 1"
@@ -260,7 +260,7 @@ import { NodeBadgeMode } from '@/types/nodeSource'

 import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
 import CollapseToggleButton from '../layout/CollapseToggleButton.vue'
-import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
+import AsyncSearchInput from '@/components/ui/search-input/AsyncSearchInput.vue'
 import ErrorNodeCard from './ErrorNodeCard.vue'
 import MissingNodeCard from './MissingNodeCard.vue'
 import SwapNodesCard from '@/platform/nodeReplacement/components/SwapNodesCard.vue'
--- a/src/components/rightSidePanel/parameters/TabGlobalParameters.vue
+++ b/src/components/rightSidePanel/parameters/TabGlobalParameters.vue
@@ -11,7 +11,7 @@ import {
 } from 'vue'
 import { useI18n } from 'vue-i18n'

-import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
+import AsyncSearchInput from '@/components/ui/search-input/AsyncSearchInput.vue'
 import { DraggableList } from '@/scripts/ui/draggableList'
 import { useFavoritedWidgetsStore } from '@/stores/workspace/favoritedWidgetsStore'
 import type { ValidFavoritedWidget } from '@/stores/workspace/favoritedWidgetsStore'
@@ -119,7 +119,7 @@ function onCollapseUpdate() {
  <div
    class="flex items-center border-b border-interface-stroke px-4 pt-1 pb-4"
  >
-    <FormSearchInput
+    <AsyncSearchInput
      v-model="searchQuery"
      :searcher
      :update-key="favoritedWidgets"
--- a/src/components/rightSidePanel/parameters/TabNodes.vue
+++ b/src/components/rightSidePanel/parameters/TabNodes.vue
@@ -7,7 +7,7 @@ import CollapseToggleButton from '@/components/rightSidePanel/layout/CollapseTog
 import type { LGraphNode, NodeId } from '@/lib/litegraph/src/litegraph'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
+import AsyncSearchInput from '@/components/ui/search-input/AsyncSearchInput.vue'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'

 import { computedSectionDataList, searchWidgetsAndNodes } from '../shared'
@@ -78,7 +78,7 @@ async function searcher(query: string) {
  <div
    class="flex items-center border-b border-interface-stroke px-4 pt-1 pb-4"
  >
-    <FormSearchInput
+    <AsyncSearchInput
      v-model="searchQuery"
      :searcher
      :update-key="widgetsSectionDataList"
--- a/src/components/rightSidePanel/parameters/TabNormalInputs.vue
+++ b/src/components/rightSidePanel/parameters/TabNormalInputs.vue
@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n'

 import type { LGraphNode, NodeId } from '@/lib/litegraph/src/litegraph'
 import CollapseToggleButton from '@/components/rightSidePanel/layout/CollapseToggleButton.vue'
-import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
+import AsyncSearchInput from '@/components/ui/search-input/AsyncSearchInput.vue'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'

@@ -122,7 +122,7 @@ const advancedLabel = computed(() => {
  <div
    class="flex items-center border-b border-interface-stroke px-4 pt-1 pb-4"
  >
-    <FormSearchInput
+    <AsyncSearchInput
      v-model="searchQuery"
      :searcher
      :update-key="widgetsSectionDataList"
--- a/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
+++ b/src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
@@ -17,7 +17,7 @@ import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
 import { getWidgetName } from '@/core/graph/subgraph/promotionUtils'
 import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
+import AsyncSearchInput from '@/components/ui/search-input/AsyncSearchInput.vue'
 import CollapseToggleButton from '@/components/rightSidePanel/layout/CollapseToggleButton.vue'
 import { DraggableList } from '@/scripts/ui/draggableList'
 import { usePromotionStore } from '@/stores/promotionStore'
@@ -217,7 +217,7 @@ const label = computed(() => {
  <div
    class="flex items-center border-b border-interface-stroke px-4 pt-1 pb-4"
  >
-    <FormSearchInput
+    <AsyncSearchInput
      v-model="searchQuery"
      :searcher
      :update-key="widgetsList"
--- a/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
+++ b/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
@@ -20,7 +20,7 @@ import type { WidgetItem } from '@/core/graph/subgraph/promotionUtils'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
+import AsyncSearchInput from '@/components/ui/search-input/AsyncSearchInput.vue'
 import { useLitegraphService } from '@/services/litegraphService'
 import { usePromotionStore } from '@/stores/promotionStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
@@ -226,7 +226,7 @@ onMounted(() => {
 <template>
  <div v-if="activeNode" class="subgraph-edit-section flex h-full flex-col">
    <div class="flex gap-2 border-b border-interface-stroke px-4 pt-1 pb-4">
-      <FormSearchInput v-model="searchQuery" />
+      <AsyncSearchInput v-model="searchQuery" />
    </div>

    <div class="flex-1">
@@ -263,6 +263,7 @@ onMounted(() => {
          <SubgraphNodeWidget
            v-for="[node, widget] in filteredActive"
            :key="toKey([node, widget])"
+            :data-nodeid="node.id"
            :class="cn(!searchQuery && dragClass, 'bg-comfy-menu-bg')"
            :node-title="node.title"
            :widget-name="widget.label || widget.name"
@@ -295,6 +296,7 @@ onMounted(() => {
          <SubgraphNodeWidget
            v-for="[node, widget] in filteredCandidates"
            :key="toKey([node, widget])"
+            :data-nodeid="node.id"
            class="bg-comfy-menu-bg"
            :node-title="node.title"
            :widget-name="widget.name"
--- a/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
+++ b/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
@@ -41,9 +41,13 @@ const icon = computed(() =>
        className
      )
    "
+    data-testid="subgraph-widget-item"
  >
    <div class="pointer-events-none flex-1">
-      <div class="line-clamp-1 text-xs text-text-secondary">
+      <div
+        class="line-clamp-1 text-xs text-text-secondary"
+        data-testid="subgraph-widget-node-name"
+      >
        {{ nodeTitle }}
      </div>
      <div class="line-clamp-1 text-sm/8" data-testid="subgraph-widget-label">
--- a/src/components/searchbox/v2/NodeSearchFilterBar.vue
+++ b/src/components/searchbox/v2/NodeSearchFilterBar.vue
@@ -52,7 +52,7 @@
            <span
              v-for="val in tf.values.slice(0, MAX_VISIBLE_DOTS)"
              :key="val"
-              class="-mx-[2px] text-lg leading-none"
+              class="mx-[-2px] text-lg leading-none"
              :style="{ color: getLinkTypeColor(val) }"
              >&bull;</span
            >
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.test.ts
@@ -5,7 +5,7 @@ import { defineComponent, ref } from 'vue'
 import type { ComponentProps } from 'vue-component-type-helpers'
 import { createI18n } from 'vue-i18n'

-import FormSearchInput from './FormSearchInput.vue'
+import AsyncSearchInput from './AsyncSearchInput.vue'

 const i18n = createI18n({
  legacy: false,
@@ -20,7 +20,7 @@ const i18n = createI18n({
  }
 })

-type Searcher = NonNullable<ComponentProps<typeof FormSearchInput>['searcher']>
+type Searcher = NonNullable<ComponentProps<typeof AsyncSearchInput>['searcher']>

 function renderSearch(
  initialQuery: string = '',
@@ -30,9 +30,9 @@ function renderSearch(
  const query = ref(initialQuery)
  const key = updateKey
  const Harness = defineComponent({
-    components: { FormSearchInput },
+    components: { AsyncSearchInput },
    setup: () => ({ query, searcher, key }),
-    template: `<FormSearchInput
+    template: `<AsyncSearchInput
      v-model="query"
      :searcher="searcher"
      :update-key="key"
@@ -42,7 +42,7 @@ function renderSearch(
  return { ...utils, query, key }
 }

-describe('FormSearchInput', () => {
+describe('AsyncSearchInput', () => {
  beforeEach(() => {
    vi.useFakeTimers()
  })
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue
@@ -47,7 +47,7 @@ watch(

    searcher(debouncedSearchQuery.value, (cb) => (cleanupFn = cb))
      .catch((error) => {
-        console.error('[SidePanelSearch] searcher failed', error)
+        console.error('[AsyncSearchInput] searcher failed', error)
      })
      .finally(() => {
        if (!isCleanup) isQuerying.value = false
--- a/src/components/ui/textarea/Textarea.vue
+++ b/src/components/ui/textarea/Textarea.vue
@@ -23,7 +23,7 @@ defineExpose({
    v-model="modelValue"
    :class="
      cn(
-        'flex min-h-16 w-full rounded-lg border-none bg-secondary-background px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-border-default focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
+        'flex min-h-16 w-full scrollbar-gutter-stable rounded-lg border-none bg-secondary-background px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-border-default focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
        className
      )
    "
--- a/src/composables/graph/useErrorClearingHooks.test.ts
+++ b/src/composables/graph/useErrorClearingHooks.test.ts
@@ -21,6 +21,7 @@ import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNod
 import { app } from '@/scripts/app'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { seedRequiredInputMissingNodeError } from '@/utils/__tests__/executionErrorTestUtils'
+import type { MissingMediaCandidate } from '@/platform/missingMedia/types'
 import type { MissingModelCandidate } from '@/platform/missingModel/types'

 beforeEach(() => {
@@ -210,6 +211,47 @@ describe('Widget change error clearing via onWidgetChanged', () => {
    expect(store.lastNodeErrors).not.toBeNull()
  })

+  it('clears missing media when an upload emits onWidgetChanged', () => {
+    const graph = new LGraph()
+    const node = new LGraphNode('LoadImage')
+    node.type = 'LoadImage'
+    const widget = node.addWidget(
+      'combo',
+      'image',
+      'missing.png',
+      () => undefined,
+      { values: [] }
+    )
+    graph.add(node)
+    installErrorClearingHooks(graph)
+
+    const store = useExecutionErrorStore()
+    const mediaStore = useMissingMediaStore()
+    vi.spyOn(app, 'rootGraph', 'get').mockReturnValue(graph)
+    seedRequiredInputMissingNodeError(store, String(node.id), 'image')
+    mediaStore.setMissingMedia([
+      {
+        nodeId: String(node.id),
+        nodeType: 'LoadImage',
+        widgetName: 'image',
+        mediaType: 'image',
+        name: 'missing.png',
+        isMissing: true
+      } satisfies MissingMediaCandidate
+    ])
+
+    node.onWidgetChanged!.call(
+      node,
+      'image',
+      'uploaded.png',
+      'missing.png',
+      widget
+    )
+
+    expect(store.lastNodeErrors).toBeNull()
+    expect(mediaStore.missingMediaCandidates).toBeNull()
+  })
+
  it('uses interior node execution ID for promoted widget error clearing', () => {
    const subgraph = createTestSubgraph({
      inputs: [{ name: 'ckpt_input', type: '*' }]
--- a/src/composables/graph/useMoreOptionsMenu.ts
+++ b/src/composables/graph/useMoreOptionsMenu.ts
@@ -124,8 +124,8 @@ export function useMoreOptionsMenu() {
  const {
    selectedItems,
    selectedNodes,
-    nodeDef,
-    showNodeHelp,
+    canOpenNodeInfo,
+    openNodeInfo,
    hasSubgraphs: hasSubgraphsComputed,
    hasImageNode,
    hasOutputNodesSelected,
@@ -243,8 +243,8 @@ export function useMoreOptionsMenu() {
    options.push({ type: 'divider' })

    // Section 4: Node properties (Node Info, Shape, Color)
-    if (nodeDef.value) {
-      options.push(getNodeInfoOption(showNodeHelp))
+    if (canOpenNodeInfo.value) {
+      options.push(getNodeInfoOption(openNodeInfo))
    }
    if (groupContext) {
      options.push(getGroupColorOptions(groupContext, bump))
--- a/src/composables/graph/useNodeMenuOptions.ts
+++ b/src/composables/graph/useNodeMenuOptions.ts
@@ -111,10 +111,10 @@ export function useNodeMenuOptions() {
    action: runBranch
  })

-  const getNodeInfoOption = (showNodeHelp: () => void): MenuOption => ({
+  const getNodeInfoOption = (openNodeInfo: () => boolean): MenuOption => ({
    label: t('contextMenu.Node Info'),
    icon: 'icon-[lucide--info]',
-    action: showNodeHelp
+    action: openNodeInfo
  })

  return {
--- a/src/composables/graph/useSelectionState.test.ts
+++ b/src/composables/graph/useSelectionState.test.ts
@@ -3,9 +3,11 @@ import { setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, test, vi } from 'vitest'

 import { useSelectionState } from '@/composables/graph/useSelectionState'
-import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
 import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { isImageNode, isLGraphNode } from '@/utils/litegraphUtil'
 import { filterOutputNodes } from '@/utils/nodeFilterUtil'
 import {
@@ -13,11 +15,6 @@ import {
  createMockPositionable
 } from '@/utils/__tests__/litegraphTestUtils'

-// Mock composables
-vi.mock('@/composables/sidebarTabs/useNodeLibrarySidebarTab', () => ({
-  useNodeLibrarySidebarTab: vi.fn()
-}))
-
 vi.mock('@/utils/litegraphUtil', () => ({
  isLGraphNode: vi.fn(),
  isImageNode: vi.fn()
@@ -39,6 +36,45 @@ const mockConnection = {
  isNode: false
 }

+function createMockNodeDef() {
+  return new ComfyNodeDefImpl({
+    name: 'TestNode',
+    display_name: 'Test Node',
+    category: 'test',
+    input: {},
+    output: [],
+    output_name: [],
+    output_is_list: [],
+    output_node: false,
+    python_module: 'nodes',
+    description: ''
+  })
+}
+
+function selectSingleNodeWithNodeDef(id: number) {
+  const canvasStore = useCanvasStore()
+  const nodeDefStore = useNodeDefStore()
+
+  canvasStore.$state.selectedItems = [
+    createMockLGraphNode({ id, type: 'TestNode' })
+  ]
+  vi.mocked(nodeDefStore.fromLGraphNode).mockReturnValue(createMockNodeDef())
+}
+
+function mockSettingValues(overrides: Record<string, unknown> = {}) {
+  const settingStore = useSettingStore()
+  const settingValues: Record<string, unknown> = {
+    'Comfy.UseNewMenu': 'Top',
+    'Comfy.NodeLibrary.NewDesign': true,
+    'Comfy.Load3D.3DViewerEnable': false,
+    ...overrides
+  }
+
+  vi.mocked(settingStore.get).mockImplementation(
+    (key: string): unknown => settingValues[key]
+  )
+}
+
 describe('useSelectionState', () => {
  beforeEach(() => {
    vi.clearAllMocks()
@@ -49,14 +85,7 @@ describe('useSelectionState', () => {
        createSpy: vi.fn
      })
    )
-
-    // Setup mock composables
-    vi.mocked(useNodeLibrarySidebarTab).mockReturnValue({
-      id: 'node-library-tab',
-      title: 'Node Library',
-      type: 'custom',
-      render: () => null
-    } as ReturnType<typeof useNodeLibrarySidebarTab>)
+    mockSettingValues()

    // Setup mock utility functions
    vi.mocked(isLGraphNode).mockImplementation((item: unknown) => {
@@ -187,4 +216,83 @@ describe('useSelectionState', () => {
      expect(newIsPinned).toBe(false)
    })
  })
+
+  describe('Node Info', () => {
+    test('should open the right side info panel for a selected node', () => {
+      const rightSidePanelStore = useRightSidePanelStore()
+      selectSingleNodeWithNodeDef(8)
+
+      const { canOpenNodeInfo, openNodeInfo } = useSelectionState()
+      expect(canOpenNodeInfo.value).toBe(true)
+      openNodeInfo()
+
+      expect(rightSidePanelStore.openPanel).toHaveBeenCalledWith('info')
+    })
+
+    test('should not open the right side panel for multiple selected nodes', () => {
+      const canvasStore = useCanvasStore()
+      const rightSidePanelStore = useRightSidePanelStore()
+      canvasStore.$state.selectedItems = [
+        createMockLGraphNode({ id: 9, type: 'TestNode' }),
+        createMockLGraphNode({ id: 10, type: 'TestNode' })
+      ]
+
+      const { canOpenNodeInfo, openNodeInfo } = useSelectionState()
+      expect(canOpenNodeInfo.value).toBe(false)
+      openNodeInfo()
+
+      expect(rightSidePanelStore.openPanel).not.toHaveBeenCalled()
+    })
+
+    test('should open the right side info panel when new menu uses the legacy node library', () => {
+      const rightSidePanelStore = useRightSidePanelStore()
+      mockSettingValues({
+        'Comfy.UseNewMenu': 'Top',
+        'Comfy.NodeLibrary.NewDesign': false
+      })
+      selectSingleNodeWithNodeDef(11)
+
+      const { canOpenNodeInfo, openNodeInfo } = useSelectionState()
+      expect(canOpenNodeInfo.value).toBe(true)
+
+      const didOpen = openNodeInfo()
+
+      expect(didOpen).toBe(true)
+      expect(rightSidePanelStore.openPanel).toHaveBeenCalledWith('info')
+    })
+
+    test('should not open node info when legacy menu uses the new node library', () => {
+      const rightSidePanelStore = useRightSidePanelStore()
+      mockSettingValues({
+        'Comfy.UseNewMenu': 'Disabled',
+        'Comfy.NodeLibrary.NewDesign': true
+      })
+      selectSingleNodeWithNodeDef(12)
+
+      const { canOpenNodeInfo, openNodeInfo } = useSelectionState()
+      expect(canOpenNodeInfo.value).toBe(false)
+
+      const didOpen = openNodeInfo()
+
+      expect(didOpen).toBe(false)
+      expect(rightSidePanelStore.openPanel).not.toHaveBeenCalled()
+    })
+
+    test('should not open node info when legacy menu uses the legacy node library', () => {
+      const rightSidePanelStore = useRightSidePanelStore()
+      mockSettingValues({
+        'Comfy.UseNewMenu': 'Disabled',
+        'Comfy.NodeLibrary.NewDesign': false
+      })
+      selectSingleNodeWithNodeDef(13)
+
+      const { canOpenNodeInfo, openNodeInfo } = useSelectionState()
+      expect(canOpenNodeInfo.value).toBe(false)
+
+      const didOpen = openNodeInfo()
+
+      expect(didOpen).toBe(false)
+      expect(rightSidePanelStore.openPanel).not.toHaveBeenCalled()
+    })
+  })
 })
--- a/src/composables/graph/useSelectionState.ts
+++ b/src/composables/graph/useSelectionState.ts
@@ -1,14 +1,12 @@
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'

-import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { LGraphEventMode, SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
-import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { isImageNode, isLGraphNode, isLoad3dNode } from '@/utils/litegraphUtil'
 import { filterOutputNodes } from '@/utils/nodeFilterUtil'

@@ -25,9 +23,8 @@ export interface NodeSelectionState {
 export function useSelectionState() {
  const canvasStore = useCanvasStore()
  const nodeDefStore = useNodeDefStore()
-  const sidebarTabStore = useSidebarTabStore()
-  const nodeHelpStore = useNodeHelpStore()
-  const { id: nodeLibraryTabId } = useNodeLibrarySidebarTab()
+  const settingStore = useSettingStore()
+  const rightSidePanelStore = useRightSidePanelStore()

  const { selectedItems } = storeToRefs(canvasStore)

@@ -64,7 +61,7 @@ export function useSelectionState() {
  )

  const hasAny3DNodeSelected = computed(() => {
-    const enable3DViewer = useSettingStore().get('Comfy.Load3D.3DViewerEnable')
+    const enable3DViewer = settingStore.get('Comfy.Load3D.3DViewerEnable')
    return (
      selectedNodes.value.length === 1 &&
      selectedNodes.value.some(isLoad3dNode) &&
@@ -98,34 +95,24 @@ export function useSelectionState() {
  const computeSelectionFlags = (): NodeSelectionState =>
    computeSelectionStatesFromNodes(selectedNodes.value)

-  /** Toggle node help sidebar/panel for the single selected node (if any). */
-  const showNodeHelp = () => {
-    const def = nodeDef.value
-    if (!def) return
+  const canOpenNodeInfo = computed(
+    () =>
+      Boolean(nodeDef.value) &&
+      settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
+  )

-    const isSidebarActive =
-      sidebarTabStore.activeSidebarTabId === nodeLibraryTabId
-    const currentHelpNode = nodeHelpStore.currentHelpNode
-    const isSameNodeHelpOpen =
-      isSidebarActive &&
-      nodeHelpStore.isHelpOpen &&
-      currentHelpNode?.nodePath === def.nodePath
-
-    if (isSameNodeHelpOpen) {
-      nodeHelpStore.closeHelp()
-      sidebarTabStore.toggleSidebarTab(nodeLibraryTabId)
-      return
-    }
-
-    if (!isSidebarActive) sidebarTabStore.toggleSidebarTab(nodeLibraryTabId)
-    nodeHelpStore.openHelp(def)
+  const openNodeInfo = () => {
+    if (!canOpenNodeInfo.value) return false
+    rightSidePanelStore.openPanel('info')
+    return true
  }

  return {
    selectedItems,
    selectedNodes,
    nodeDef,
-    showNodeHelp,
+    canOpenNodeInfo,
+    openNodeInfo,
    hasAny3DNodeSelected,
    hasAnySelection,
    hasSingleSelection,
--- a/src/composables/queue/useJobMenu.test.ts
+++ b/src/composables/queue/useJobMenu.test.ts
@@ -246,6 +246,24 @@ describe('useJobMenu', () => {
    expect(workflowServiceMock.openWorkflow).not.toHaveBeenCalled()
  })

+  it('surfaces an error dialog when workflow open fails', async () => {
+    const { openJobWorkflow } = mountJobMenu()
+    const workflow = { nodes: [{ type: 'rgthree.DisplayAny' }] }
+    getJobWorkflowMock.mockResolvedValue(workflow)
+    const loadError = new Error('configure() failed: malformed widget')
+    workflowServiceMock.openWorkflow.mockRejectedValueOnce(loadError)
+    setCurrentItem(createJobItem({ id: '77' }))
+
+    await expect(openJobWorkflow()).resolves.toBeUndefined()
+
+    expect(dialogServiceMock.showErrorDialog).toHaveBeenCalledWith(
+      loadError,
+      expect.objectContaining({
+        reportType: 'queueOpenWorkflowError'
+      })
+    )
+  })
+
  it('copies job id to clipboard', async () => {
    const { copyJobId } = mountJobMenu()
    setCurrentItem(createJobItem({ id: 'job-99' }))
--- a/src/composables/queue/useJobMenu.ts
+++ b/src/composables/queue/useJobMenu.ts
@@ -63,7 +63,14 @@ export function useJobMenu(
    if (!data) return
    const filename = `Job ${target.id}.json`
    const temp = workflowStore.createTemporary(filename, data)
-    await workflowService.openWorkflow(temp)
+    try {
+      await workflowService.openWorkflow(temp)
+    } catch (error) {
+      useDialogService().showErrorDialog(error, {
+        title: t('errorDialog.queueOpenWorkflowFailedTitle'),
+        reportType: 'queueOpenWorkflowError'
+      })
+    }
  }

  const copyJobId = async (item?: JobListItem | null) => {
--- a/src/extensions/core/uploadAudio.test.ts
+++ b/src/extensions/core/uploadAudio.test.ts
@@ -130,7 +130,8 @@ function createAudioNode() {
    widgets: [audioWidget, audioUIWidget],
    isUploading: false,
    graph: { setDirtyCanvas: vi.fn() },
-    addWidget: vi.fn(() => uploadWidget)
+    addWidget: vi.fn(() => uploadWidget),
+    onWidgetChanged: vi.fn()
  })

  return { audioUIWidget, audioWidget, node, uploadWidget }
@@ -180,6 +181,12 @@ describe('Comfy.UploadAudio AUDIOUPLOAD widget', () => {
    expect(node.isUploading).toBe(false)
    expect(audioWidget.value).toBe('pasted/uploaded.mp3')
    expect(audioWidget.options.values).toContain('pasted/uploaded.mp3')
+    expect(node.onWidgetChanged).toHaveBeenCalledWith(
+      'audio',
+      'pasted/uploaded.mp3',
+      'clip.mp3',
+      audioWidget
+    )
    expect(node.graph?.setDirtyCanvas).toHaveBeenCalledWith(true)
  })

--- a/src/extensions/core/uploadAudio.ts
+++ b/src/extensions/core/uploadAudio.ts
@@ -38,6 +38,7 @@ function updateUIWidget(
 }

 async function uploadFile(
+  node: LGraphNode,
  audioWidget: IStringWidget,
  audioUIWidget: DOMWidget<HTMLAudioElement, string>,
  file: File,
@@ -67,6 +68,7 @@ async function uploadFile(
      }

      if (updateNode) {
+        const oldValue = audioWidget.value
        updateUIWidget(
          audioUIWidget,
          api.apiURL(getResourceURL(...splitFilePath(path)))
@@ -75,6 +77,7 @@ async function uploadFile(
        audioWidget.value = path
        // Manually trigger the callback to update VueNodes
        audioWidget.callback?.(path)
+        node.onWidgetChanged?.(audioWidget.name, path, oldValue, audioWidget)
      }
      return true
    } else {
@@ -102,7 +105,8 @@ app.registerExtension({
        'SaveAudio',
        'PreviewAudio',
        'SaveAudioMP3',
-        'SaveAudioOpus'
+        'SaveAudioOpus',
+        'SaveAudioAdvanced'
      ].includes(
        // @ts-expect-error fixme ts strict error
        nodeType.prototype.comfyClass
@@ -246,6 +250,7 @@ app.registerExtension({
          audioWidget.value = files[0].name
          try {
            const success = await uploadFile(
+              node,
              audioWidget,
              audioUIWidget,
              files[0],
--- a/src/lib/litegraph/src/CanvasPointer.ts
+++ b/src/lib/litegraph/src/CanvasPointer.ts
@@ -23,8 +23,19 @@ import type { CanvasPointerEvent } from './types/events'
 * - {@link LGraphCanvas.processMouseUp}
 */
 export class CanvasPointer {
-  /** Maximum time in milliseconds to ignore click drift */
-  static bufferTime = 150
+  /**
+   * Maximum time in milliseconds to ignore click drift.
+   *
+   * This is the upper bound on how long after pointerdown the system will wait
+   * before deciding "this is a drag, not a click" when the pointer hasn't moved
+   * past {@link maxClickDrift}. Keep this short — drags should feel instant.
+   * Disambiguation between click and drag is primarily handled by distance
+   * ({@link maxClickDrift}); this time threshold only matters when the user
+   * holds the pointer still then releases. ~2 frames at 60fps is plenty.
+   *
+   * Overridden at runtime by the `Comfy.Pointer.ClickBufferTime` user setting.
+   */
+  static bufferTime = 32

  /** Maximum gap between pointerup and pointerdown events to be considered as a double click */
  static doubleClickTime = 300
--- a/src/lib/litegraph/src/LGraph.ts
+++ b/src/lib/litegraph/src/LGraph.ts
@@ -329,12 +329,6 @@ export class LGraph
    this.state.lastLinkId = value
  }

-  onAfterStep?(): void
-  onBeforeStep?(): void
-  onPlayEvent?(): void
-  onStopEvent?(): void
-  onAfterExecute?(): void
-  onExecuteStep?(): void
  onNodeAdded?(node: LGraphNode): void
  onNodeRemoved?(node: LGraphNode): void
  onTrigger?: LGraphTriggerHandler
@@ -506,8 +500,6 @@ export class LGraph
  start(interval?: number): void {
    if (this.status == LGraph.STATUS_RUNNING) return
    this.status = LGraph.STATUS_RUNNING
-
-    this.onPlayEvent?.()
    this.sendEventToAllNodes('onStart')

    // launch
@@ -525,9 +517,7 @@ export class LGraph
        if (this.execution_timer_id != -1) return

        window.requestAnimationFrame(on_frame)
-        this.onBeforeStep?.()
        this.runStep(1, !this.catch_errors)
-        this.onAfterStep?.()
      }
      this.execution_timer_id = -1
      on_frame()
@@ -536,9 +526,7 @@ export class LGraph
      // @ts-expect-error - Timer ID type mismatch needs fixing
      this.execution_timer_id = setInterval(() => {
        // execute
-        this.onBeforeStep?.()
        this.runStep(1, !this.catch_errors)
-        this.onAfterStep?.()
      }, interval)
    }
  }
@@ -551,9 +539,6 @@ export class LGraph
    if (this.status == LGraph.STATUS_STOPPED) return

    this.status = LGraph.STATUS_STOPPED
-
-    this.onStopEvent?.()
-
    if (this.execution_timer_id != null) {
      if (this.execution_timer_id != -1) {
        clearInterval(this.execution_timer_id)
@@ -594,10 +579,7 @@ export class LGraph
        }

        this.fixedtime += this.fixedtime_lapse
-        this.onExecuteStep?.()
      }
-
-      this.onAfterExecute?.()
    } else {
      try {
        // iterations
@@ -610,10 +592,7 @@ export class LGraph
          }

          this.fixedtime += this.fixedtime_lapse
-          this.onExecuteStep?.()
        }
-
-        this.onAfterExecute?.()
        this.errors_in_execution = false
      } catch (error) {
        this.errors_in_execution = true
--- a/src/lib/litegraph/src/LGraphCanvas.ts
+++ b/src/lib/litegraph/src/LGraphCanvas.ts
@@ -1837,6 +1837,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
    // this.offset = [0,0];
    this.dragging_rectangle = null

+    for (const item of this.selectedItems.keys()) item.selected = undefined
    this.selected_nodes = {}
    this.selected_group = null
    this.selectedItems.clear()
--- a/Show More
+++ b/Show More