fix: forward LGraphNode to LiteGraph context-menu callbacks

The wrapper that adapts LiteGraph IContextMenuValue callbacks for
the Vue ContextMenu invoked them with the menu item itself as the
5th positional argument. LGraphCanvas.onMenuNode* handlers declare
the signature (value, options, e, menu, node) and dereference
node.graph, so passing item caused NullGraphError to be thrown and
swallowed by the surrounding try/catch — every LiteGraph-source
menu action that needed the node silently no-op'd (Collapse,
Expand, Resize, Mode, Colors, Shapes, Clone, etc).

Pass the LGraphNode that was already accepted as the second
parameter of convertContextMenuToOptions instead.

Adds property tests in contextMenuConverter.property.test.ts using
fast-check to lock the wrapper's argument forwarding contract for
arbitrary content / values, plus a targeted unit test pinning the
LGraphCanvas.onMenuNode* contract.

.github/workflows/ci-perf-report.yaml

@@ -54,14 +54,10 @@ jobs:
       - name: Start ComfyUI server
         uses: ./.github/actions/start-comfyui-server
 
-      # PRs run each test once to keep wall time bounded; main runs 3× so the
-      # baseline saved to perf-data has enough samples to median over noise.
       - name: Run performance tests
         id: perf
         continue-on-error: true
-        env:
-          PERF_REPEAT: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' && '3' || '2' }}
-        run: pnpm exec playwright test --project=performance --workers=1 --repeat-each=$PERF_REPEAT
+        run: pnpm exec playwright test --project=performance --workers=1 --repeat-each=3
 
       - name: Upload perf metrics
         if: always()

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

@@ -20,8 +20,6 @@ jobs:
       github.event.workflow_run.conclusion == 'success'
     runs-on: ubuntu-latest
     timeout-minutes: 10
-    outputs:
-      has-coverage: ${{ steps.coverage-shards.outputs.has-coverage }}
 
     steps:
       - name: Checkout repository
@@ -39,33 +37,31 @@ jobs:
           path: temp/coverage-shards
           if_no_artifact_found: warn
 
-      - name: Detect shard coverage data
-        id: coverage-shards
-        run: |
-          if [ -d temp/coverage-shards ] && find temp/coverage-shards -name 'coverage.lcov' -type f | grep -q .; then
-            echo "has-coverage=true" >> "$GITHUB_OUTPUT"
-          else
-            echo "has-coverage=false" >> "$GITHUB_OUTPUT"
-            echo "No E2E coverage shard artifacts found; treating this run as skipped." >> "$GITHUB_STEP_SUMMARY"
-          fi
-
       - name: Install lcov
-        if: steps.coverage-shards.outputs.has-coverage == 'true'
         run: sudo apt-get install -y -qq lcov
 
       - name: Merge shard coverage into single LCOV
-        if: steps.coverage-shards.outputs.has-coverage == 'true'
         run: |
           mkdir -p coverage/playwright
           LCOV_FILES=$(find temp/coverage-shards -name 'coverage.lcov' -type f)
+          if [ -z "$LCOV_FILES" ]; then
+            echo "No coverage.lcov files found"
+            touch coverage/playwright/coverage.lcov
+            exit 0
+          fi
           ADD_ARGS=""
           for f in $LCOV_FILES; do ADD_ARGS="$ADD_ARGS -a $f"; done
           lcov $ADD_ARGS -o coverage/playwright/coverage.lcov
           wc -l coverage/playwright/coverage.lcov
 
       - name: Validate merged coverage
-        if: steps.coverage-shards.outputs.has-coverage == 'true'
         run: |
+          SHARD_COUNT=$(find temp/coverage-shards -name 'coverage.lcov' -type f | wc -l | tr -d ' ')
+          if [ "$SHARD_COUNT" -eq 0 ]; then
+            echo "::notice::No shard coverage files; upstream E2E was likely skipped."
+            exit 0
+          fi
+
           MERGED_SF=$(grep -c '^SF:' coverage/playwright/coverage.lcov || echo 0)
           MERGED_LH=$(awk -F: '/^LH:/{s+=$2}END{print s+0}' coverage/playwright/coverage.lcov)
           MERGED_LF=$(awk -F: '/^LF:/{s+=$2}END{print s+0}' coverage/playwright/coverage.lcov)
@@ -86,7 +82,7 @@ jobs:
           done
 
       - name: Upload merged coverage data
-        if: steps.coverage-shards.outputs.has-coverage == 'true'
+        if: always()
         uses: actions/upload-artifact@v6
         with:
           name: e2e-coverage
@@ -95,7 +91,7 @@ jobs:
           if-no-files-found: warn
 
       - name: Upload E2E coverage to Codecov
-        if: steps.coverage-shards.outputs.has-coverage == 'true'
+        if: always()
         uses: codecov/codecov-action@1af58845a975a7985b0beb0cbe6fbbb71a41dbad # v5.5.3
         with:
           files: coverage/playwright/coverage.lcov
@@ -104,7 +100,6 @@ jobs:
           fail_ci_if_error: false
 
       - 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."
@@ -119,7 +114,6 @@ jobs:
             --precision 1
 
       - name: Upload HTML report artifact
-        if: steps.coverage-shards.outputs.has-coverage == 'true'
         uses: actions/upload-artifact@v6
         with:
           name: e2e-coverage-html
@@ -128,9 +122,7 @@ jobs:
 
   deploy:
     needs: merge
-    if: >
-      github.event.workflow_run.head_branch == 'main' &&
-      needs.merge.outputs.has-coverage == 'true'
+    if: github.event.workflow_run.head_branch == 'main'
     runs-on: ubuntu-latest
     permissions:
       pages: write

.github/workflows/ci-tests-extension-api.yaml

@@ -1,88 +0,0 @@
-# Description: Extension API test suite (I-TF) + compat-floor gate (I-TF.7)
-#
-# Runs on any PR touching extension-api declaration files, extension-api-v2
-# implementation/tests, or the touch-point DB/rollup (blast-radius changes).
-#
-# Two jobs:
-#   test          — vitest run against src/extension-api-v2/__tests__/
-#   compat-floor  — python scripts/check-compat-floor.py (exits 1 if any
-#                   blast_radius ≥ 2.0 category is missing a stub triple)
-#
-# The compat-floor job is the CI enforcement of PLAN.md §Compat-floor:
-#   "Every blast_radius ≥ 2.0 pattern MUST pass v1 + v2 + migration before v2 ships."
-name: 'CI: Tests Extension API'
-
-on:
-  push:
-    branches: [main, master, dev*, core/*, extension-v2*]
-    paths:
-      - 'src/extension-api/**'
-      - 'src/extension-api-v2/**'
-      - 'packages/extension-api/**'
-      - 'vitest.extension-api.config.mts'
-      - 'research/touch-points/rollup.yaml'
-      - 'research/touch-points/behavior-categories.yaml'
-      - 'scripts/check-compat-floor.py'
-      - 'pnpm-lock.yaml'
-  pull_request:
-    branches-ignore: [wip/*, draft/*, temp/*]
-    paths:
-      - 'src/extension-api/**'
-      - 'src/extension-api-v2/**'
-      - 'packages/extension-api/**'
-      - 'vitest.extension-api.config.mts'
-      - 'research/touch-points/rollup.yaml'
-      - 'research/touch-points/behavior-categories.yaml'
-      - 'scripts/check-compat-floor.py'
-      - 'pnpm-lock.yaml'
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  test:
-    name: Extension API tests (vitest)
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-
-      - name: Run extension-api test suite
-        run: pnpm test:extension-api
-
-      - name: Run with coverage (push only)
-        if: github.event_name == 'push'
-        run: pnpm test:extension-api:coverage
-
-      - name: Upload coverage to Codecov
-        if: github.event_name == 'push'
-        uses: codecov/codecov-action@1af58845a975a7985b0beb0cbe6fbbb71a41dbad # v5.5.3
-        with:
-          files: coverage/lcov.info
-          flags: extension-api
-          token: ${{ secrets.CODECOV_TOKEN }}
-          fail_ci_if_error: false
-
-  compat-floor:
-    name: Compat-floor gate (blast_radius ≥ 2.0)
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Set up Python
-        uses: actions/setup-python@a26af69be951a213d495a4c3e4e4022e16d87065 # v5.6.0
-        with:
-          python-version: '3.11'
-
-      - name: Install PyYAML
-        run: pip install pyyaml
-
-      - name: Check compat floor
-        run: python3 scripts/check-compat-floor.py
-        # Exits 1 if any blast_radius ≥ 2.0 behavior category is missing
-        # any of its three stub files (v1/v2/migration). Enforces PLAN.md §Compat-floor.

.github/workflows/extension-api-publish.yml

@@ -1,97 +0,0 @@
-# Description: Publish @comfyorg/extension-api to npm with provenance attestation.
-#
-# Triggered by a tag push matching 'extension-api-v*' (e.g. extension-api-v0.1.0).
-# Also supports workflow_dispatch for a manual dry-run (set dry_run: true).
-#
-# Prerequisites (one-time human setup):
-#   - NPM_TOKEN secret must be set in the repo/org settings with publish
-#     access to the @comfyorg scope on npmjs.com.
-#   - The @comfyorg npm scope already exists (used by @comfyorg/comfyui-frontend).
-#
-# PKG4.D4 (MIG1 / Phase A — surface-only shim)
-name: 'Extension API: Publish'
-
-on:
-  push:
-    tags:
-      - 'extension-api-v*'
-  workflow_dispatch:
-    inputs:
-      dry_run:
-        description: 'Dry run — build and verify without publishing'
-        required: false
-        default: true
-        type: boolean
-
-permissions:
-  contents: write # needed to create GitHub Release
-  id-token: write # needed for npm provenance via OIDC
-
-jobs:
-  publish:
-    name: Publish @comfyorg/extension-api
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v6
-        with:
-          fetch-depth: 0 # full history for release notes
-
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-
-      - name: Setup npm registry
-        uses: actions/setup-node@v6
-        with:
-          registry-url: 'https://registry.npmjs.org/'
-
-      - name: Build package
-        run: pnpm --filter @comfyorg/extension-api build
-
-      - name: Typecheck package
-        run: pnpm --filter @comfyorg/extension-api typecheck
-
-      - name: Verify package version matches tag
-        if: github.event_name == 'push'
-        run: |
-          TAG="${GITHUB_REF_NAME}"                           # e.g. extension-api-v0.1.0
-          PKG_VERSION=$(node -p "require('./packages/extension-api/package.json').version")
-          TAG_VERSION="${TAG#extension-api-v}"               # strip prefix → 0.1.0
-          if [ "$PKG_VERSION" != "$TAG_VERSION" ]; then
-            echo "::error::Tag '$TAG' implies version '$TAG_VERSION' but packages/extension-api/package.json has '$PKG_VERSION'. Update the package.json before tagging."
-            exit 1
-          fi
-          echo "Version check passed: $PKG_VERSION"
-
-      - name: Publish to npm (with provenance)
-        if: github.event_name == 'push' || !inputs.dry_run
-        run: |
-          cd packages/extension-api
-          npm publish --provenance --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Dry-run report
-        if: inputs.dry_run
-        run: |
-          echo "=== DRY RUN — would publish ==="
-          cd packages/extension-api
-          npm pack --dry-run
-          echo "=== End dry run ==="
-
-      - name: Create GitHub Release
-        if: github.event_name == 'push'
-        uses: actions/github-script@v8
-        with:
-          script: |
-            const tag = context.ref.replace('refs/tags/', '')
-            const { data: release } = await github.rest.repos.createRelease({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              tag_name: tag,
-              name: tag,
-              generate_release_notes: true,
-              draft: false,
-              prerelease: context.ref.includes('-alpha') || context.ref.includes('-beta') || context.ref.includes('-rc')
-            })
-            console.log(`Release created: ${release.html_url}`)

.github/workflows/extension-api-typecheck.yml

@@ -1,65 +0,0 @@
-# Description: Typecheck and build the @comfyorg/extension-api package.
-# Runs on PRs and pushes touching the public type surface, the core .v2.ts
-# implementations, or the package scaffold — so regressions in the published
-# contract are caught before merge.
-#
-# PKG4.D3 (MIG1 / Phase A — surface-only shim)
-name: 'Extension API: Typecheck'
-
-on:
-  push:
-    branches: [main, master, dev*, core/*, extension-v2*]
-    paths:
-      - 'src/extension-api/**'
-      - 'src/extensions/core/*.v2.ts'
-      - 'src/services/extension-api-service.ts'
-      - 'packages/extension-api/**'
-      - '.github/workflows/extension-api-*.yml'
-      - 'pnpm-lock.yaml'
-      - 'pnpm-workspace.yaml'
-  pull_request:
-    branches-ignore: [wip/*, draft/*, temp/*]
-    paths:
-      - 'src/extension-api/**'
-      - 'src/extensions/core/*.v2.ts'
-      - 'src/services/extension-api-service.ts'
-      - 'packages/extension-api/**'
-      - '.github/workflows/extension-api-*.yml'
-      - 'pnpm-lock.yaml'
-      - 'pnpm-workspace.yaml'
-  merge_group:
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  typecheck:
-    name: Build + typecheck @comfyorg/extension-api
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-
-      - name: Build package (emit declarations)
-        run: pnpm --filter @comfyorg/extension-api build
-
-      - name: Typecheck package
-        run: pnpm --filter @comfyorg/extension-api typecheck
-
-      - name: Smoke-test consumer (tsc --noEmit on minimal extension)
-        # Verifies the published types are consumable from an external module
-        # that imports from '@comfyorg/extension-api'. Uses a minimal fixture
-        # checked in to packages/extension-api/test/smoke/.
-        run: |
-          cd packages/extension-api
-          if [ -d test/smoke ]; then
-            pnpm exec tsc --noEmit --project test/smoke/tsconfig.json
-          else
-            echo "No smoke test found — skipping (add packages/extension-api/test/smoke/ to enable)"
-          fi

.oxfmtrc.json

@@ -6,7 +6,6 @@
   "trailingComma": "none",
   "printWidth": 80,
   "ignorePatterns": [
-    "packages/extension-api/build/**",
     "packages/registry-types/src/comfyRegistryTypes.ts",
     "public/materialdesignicons.min.css",
     "src/types/generatedManagerTypes.ts",

apps/website/e2e/careers.spec.ts

@@ -32,34 +32,16 @@ test.describe('Careers page @smoke', () => {
     }
   })
 
-  test('clicking a department button scrolls to and activates that section', async ({
+  test('ENGINEERING category filter narrows the role list', async ({
     page
   }) => {
-    const rolesSection = page.getByTestId('careers-roles')
-    await rolesSection.scrollIntoViewIfNeeded()
-    await expect(rolesSection).toBeVisible()
-
     const allCount = await page.getByTestId('careers-role-link').count()
-
-    const engineeringButton = page.getByRole('button', {
-      name: 'ENGINEERING',
-      exact: true
-    })
-
-    // RolesSection is hydrated via `client:visible`. Once the button responds
-    // to a click by flipping aria-pressed, Vue is hydrated and the rest of
-    // the locator logic is in effect.
-    await expect(async () => {
-      await engineeringButton.click()
-      await expect(engineeringButton).toHaveAttribute('aria-pressed', 'true', {
-        timeout: 1_000
-      })
-    }).toPass({ timeout: 10_000 })
-
-    const engineeringSection = page.locator('#careers-dept-engineering')
-    await expect(engineeringSection).toBeInViewport()
-
-    expect(await page.getByTestId('careers-role-link').count()).toBe(allCount)
+    await page.getByRole('button', { name: 'ENGINEERING', exact: true }).click()
+    const engineeringLocator = page.getByTestId('careers-role-link')
+    await expect(engineeringLocator.first()).toBeVisible()
+    const engineeringCount = await engineeringLocator.count()
+    expect(engineeringCount).toBeLessThanOrEqual(allCount)
+    expect(engineeringCount).toBeGreaterThan(0)
   })
 })
 

apps/website/e2e/content-section.spec.ts

@@ -1,61 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { test } from './fixtures/blockExternalMedia'
-
-const M4_PRO_14_INCH_VIEWPORT = { width: 2016, height: 1310 }
-const LAST_SECTION_HASH = '#contact'
-
-test.describe(
-  'ContentSection scroll-spy @smoke',
-  {
-    annotation: [
-      {
-        type: 'issue',
-        description:
-          'https://linear.app/comfyorg/issue/FE-604/bug-bottom-badge-not-activating-on-scroll-at-high-resolution-3024x1964'
-      },
-      {
-        type: 'environment',
-        description:
-          '14" MacBook M4 Pro logical viewport reported in FE-604; /privacy-policy reproduces because of its short trailing sections'
-      }
-    ]
-  },
-  () => {
-    test.use({ viewport: M4_PRO_14_INCH_VIEWPORT })
-
-    test('activates the last badge when user scrolls to the bottom', async ({
-      page
-    }) => {
-      await page.goto('/privacy-policy')
-
-      const sidebarNav = page.getByRole('navigation', {
-        name: 'Category filter'
-      })
-      const badges = sidebarNav.getByRole('button')
-      const lastBadge = badges.last()
-
-      await expect(badges.first()).toHaveAttribute('aria-pressed', 'true')
-      await expect(lastBadge).toHaveAttribute('aria-pressed', 'false')
-
-      await page.evaluate(() =>
-        window.scrollTo(0, document.documentElement.scrollHeight)
-      )
-
-      await expect(lastBadge).toHaveAttribute('aria-pressed', 'true')
-    })
-
-    test('activates the last badge when page mounts already at the bottom via trailing hash', async ({
-      page
-    }) => {
-      await page.goto(`/privacy-policy${LAST_SECTION_HASH}`)
-
-      const sidebarNav = page.getByRole('navigation', {
-        name: 'Category filter'
-      })
-      const lastBadge = sidebarNav.getByRole('button').last()
-
-      await expect(lastBadge).toHaveAttribute('aria-pressed', 'true')
-    })
-  }
-)

apps/website/e2e/customers.spec.ts

@@ -1,33 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { test } from './fixtures/blockExternalMedia'
-
-test.describe('Customers @smoke', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/customers')
-  })
-
-  test('hero image declares intrinsic dimensions so layout reserves space before load', async ({
-    page
-  }) => {
-    const heroImage = page.locator('img[alt="Comfy 3D logo"]')
-    await expect(heroImage).toBeVisible()
-    await expect(heroImage).toHaveAttribute('width', /^\d+$/)
-    await expect(heroImage).toHaveAttribute('height', /^\d+$/)
-
-    // Regression guard: an unloaded <img> without intrinsic dimensions
-    // collapses to ~0px, then jumps to its natural size on load and pushes
-    // the video below it. Reserved space must persist before bytes arrive.
-    const heightWhileUnloaded = await page.evaluate(() => {
-      const img = document.querySelector<HTMLImageElement>(
-        'img[alt="Comfy 3D logo"]'
-      )
-      if (!img) return null
-      img.removeAttribute('src')
-      return img.getBoundingClientRect().height
-    })
-
-    expect(heightWhileUnloaded).not.toBeNull()
-    expect(heightWhileUnloaded!).toBeGreaterThan(100)
-  })
-})

apps/website/e2e/demos.spec.ts

@@ -1,71 +1,27 @@
 import { expect, test } from '@playwright/test'
 
-import { demos, getNextDemo } from '../src/config/demos'
-import { t } from '../src/i18n/translations'
-
-const escapeRegExp = (value: string): string =>
-  value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-
 test.describe('Demo pages @smoke', () => {
-  for (const demo of demos) {
-    const nextDemo = getNextDemo(demo.slug)
+  test('demo detail page renders hero and embed', async ({ page }) => {
+    await page.goto('/demos/image-to-video')
+    await expect(page.getByRole('heading', { level: 1 })).toBeVisible()
+    await expect(page.getByRole('heading', { level: 1 })).toContainText(
+      'Create a Video from an Image'
+    )
+    const iframe = page.locator('iframe[title*="Interactive demo"]')
+    await expect(iframe).toBeAttached()
+  })
 
-    test(`/demos/${demo.slug} renders hero, embed, transcript, and next-demo nav`, async ({
-      page
-    }) => {
-      await page.goto(`/demos/${demo.slug}`)
+  test('demo detail page has transcript section', async ({ page }) => {
+    await page.goto('/demos/image-to-video')
+    await expect(
+      page.getByRole('button', { name: /demo transcript/i })
+    ).toBeVisible()
+  })
 
-      const heading = page.getByRole('heading', { level: 1 })
-      await expect(heading).toBeVisible()
-      await expect(heading).toContainText(t(demo.title, 'en'))
-
-      const ogImage = page.locator('head meta[property="og:image"]')
-      await expect(ogImage).toHaveAttribute(
-        'content',
-        new RegExp(`${escapeRegExp(demo.slug)}-og\\.png`)
-      )
-
-      const iframe = page.locator(
-        `iframe[title*="${t('demos.embed.label', 'en')}"]`
-      )
-      await expect(iframe).toBeAttached()
-      await expect(iframe).toHaveAttribute(
-        'src',
-        new RegExp(escapeRegExp(demo.arcadeId))
-      )
-
-      await expect(
-        page.getByRole('button', { name: /demo transcript/i })
-      ).toBeVisible()
-
-      await expect(
-        page.getByText(t(nextDemo.title, 'en')).first()
-      ).toBeVisible()
-      const nextThumb = page.locator(`img[src="${nextDemo.thumbnail}"]`).first()
-      await expect(nextThumb).toBeAttached()
-      await expect(nextThumb).toBeVisible()
-      const naturalWidth = await nextThumb.evaluate(
-        (img) => (img as HTMLImageElement).naturalWidth
-      )
-      expect(naturalWidth).toBeGreaterThan(1)
-    })
-
-    test(`/zh-CN/demos/${demo.slug} renders localized content`, async ({
-      page
-    }) => {
-      await page.goto(`/zh-CN/demos/${demo.slug}`)
-
-      await expect(page).toHaveURL(/\/zh-CN\/demos\//)
-
-      const heading = page.getByRole('heading', { level: 1 })
-      await expect(heading).toContainText(t(demo.title, 'zh-CN'))
-      await expect(heading).toContainText(/[\u4E00-\u9FFF]/)
-
-      await expect(
-        page.getByText(t(nextDemo.title, 'zh-CN')).first()
-      ).toBeVisible()
-    })
-  }
+  test('demo detail page has next demo navigation', async ({ page }) => {
+    await page.goto('/demos/image-to-video')
+    await expect(page.getByText(/what's next/i)).toBeVisible()
+  })
 
   test('demo library page renders', async ({ page }) => {
     await page.goto('/demos')
@@ -76,4 +32,13 @@ test.describe('Demo pages @smoke', () => {
     const response = await page.goto('/demos/nonexistent')
     expect(response?.status()).toBe(404)
   })
+
+  test('zh-CN demo page renders localized content', async ({ page }) => {
+    await page.goto('/zh-CN/demos/image-to-video')
+    await expect(page.getByRole('heading', { level: 1 })).toContainText(
+      '从图片创建视频'
+    )
+    const nextDemoLink = page.locator('a[href*="/zh-CN/demos/"]').first()
+    await expect(nextDemoLink).toBeAttached()
+  })
 })

apps/website/e2e/responsive.spec.ts

@@ -1,4 +1,3 @@
-import type { Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 
 import { test } from './fixtures/blockExternalMedia'
@@ -48,105 +47,4 @@ test.describe('Mobile layout @mobile', () => {
     const mobileContainer = page.getByTestId('social-proof-mobile')
     await expect(mobileContainer).toBeVisible()
   })
-
-  test.describe('SocialProofBar seamless marquee', () => {
-    test.use({ contextOptions: { reducedMotion: 'no-preference' } })
-
-    test('mobile forward marquee loops seamlessly', async ({ page }) => {
-      const geometry = await measureMarqueeLoopGeometry(
-        page,
-        '[data-testid="social-proof-mobile"] .animate-marquee'
-      )
-      expectSeamlessForwardLoop(geometry)
-    })
-
-    test('mobile reverse marquee loops seamlessly', async ({ page }) => {
-      const geometry = await measureMarqueeLoopGeometry(
-        page,
-        '[data-testid="social-proof-mobile"] .animate-marquee-reverse'
-      )
-      expectSeamlessReverseLoop(geometry)
-    })
-  })
 })
-
-test.describe('Desktop SocialProofBar @smoke', () => {
-  test.use({ contextOptions: { reducedMotion: 'no-preference' } })
-
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/')
-  })
-
-  test('desktop marquee loops seamlessly', async ({ page }) => {
-    const geometry = await measureMarqueeLoopGeometry(
-      page,
-      '[data-testid="social-proof-desktop"] .animate-marquee'
-    )
-    expectSeamlessForwardLoop(geometry)
-  })
-})
-
-type MarqueeGeometry = {
-  copyWidths: number[]
-  startPositions: number[]
-  endPositions: number[]
-}
-
-async function measureMarqueeLoopGeometry(
-  page: Page,
-  selector: string
-): Promise<MarqueeGeometry> {
-  await page.locator(selector).first().waitFor()
-  return page.evaluate((sel) => {
-    const tracks = Array.from(
-      document.querySelectorAll<HTMLElement>(sel)
-    ).slice(0, 2)
-    const firstAnimation = tracks[0]?.getAnimations()[0]
-    if (!firstAnimation) {
-      throw new Error(`No CSS animation found on ${sel}`)
-    }
-    const duration = firstAnimation.effect?.getTiming().duration
-    if (typeof duration !== 'number' || duration <= 1) {
-      throw new Error(
-        `Animation on ${sel} has unusable duration: ${String(duration)}`
-      )
-    }
-    const setAllTimes = (time: number) => {
-      for (const track of tracks) {
-        for (const anim of track.getAnimations()) {
-          anim.currentTime = time
-        }
-      }
-      void document.body.offsetWidth
-    }
-    const readX = () => tracks.map((track) => track.getBoundingClientRect().x)
-    setAllTimes(0)
-    const startPositions = readX()
-    const copyWidths = tracks.map(
-      (track) => track.getBoundingClientRect().width
-    )
-    setAllTimes(duration - 0.1)
-    const endPositions = readX()
-    return { copyWidths, startPositions, endPositions }
-  }, selector)
-}
-
-function expectTwoMatchingCopies(geometry: MarqueeGeometry) {
-  const { copyWidths } = geometry
-  expect(copyWidths.length, 'expected two duplicate marquee tracks').toBe(2)
-  expect(copyWidths[0]).toBeGreaterThan(0)
-  expect(copyWidths[1]).toBeCloseTo(copyWidths[0], 0)
-}
-
-function expectSeamlessForwardLoop(geometry: MarqueeGeometry) {
-  expectTwoMatchingCopies(geometry)
-  // Copy 2 ends the cycle exactly where copy 1 started, so the restart
-  // (when copy 1 jumps back to its start position) is visually indistinguishable.
-  expect(geometry.endPositions[1]).toBeCloseTo(geometry.startPositions[0], 0)
-}
-
-function expectSeamlessReverseLoop(geometry: MarqueeGeometry) {
-  expectTwoMatchingCopies(geometry)
-  // Reverse marquee: copy 1 ends the cycle where copy 2 started.
-  expect(geometry.endPositions[0]).toBeCloseTo(geometry.startPositions[1], 0)
-}

apps/website/e2e/visual-responsive.spec.ts

@@ -26,8 +26,8 @@ async function assertNoOverflow(page: Page) {
 }
 
 async function navigateAndSettle(page: Page, url: string) {
-  await page.goto(url, { waitUntil: 'domcontentloaded' })
-  await page.waitForLoadState('load')
+  await page.goto(url)
+  await page.waitForLoadState('networkidle')
 }
 
 test.describe('Home', { tag: '@visual' }, () => {

apps/website/playwright.config.ts

@@ -28,7 +28,7 @@ export default defineConfig({
     ? [['html'], ['json', { outputFile: 'results.json' }]]
     : 'html',
   expect: {
-    toHaveScreenshot: { maxDiffPixels: 100 }
+    toHaveScreenshot: { maxDiffPixels: 50 }
   },
   ...maybeLocalOptions,
   webServer: {

apps/website/src/components/careers/RolesSection.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { useEventListener, useTemplateRefsList } from '@vueuse/core'
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import type { Department } from '../../data/roles'
 import type { Locale } from '../../i18n/translations'
 
-import { prefersReducedMotion } from '../../composables/useReducedMotion'
 import { t } from '../../i18n/translations'
-import { scrollTo } from '../../scripts/smoothScroll'
 import CategoryNav from '../common/CategoryNav.vue'
 import SectionLabel from '../common/SectionLabel.vue'
 
@@ -16,72 +13,24 @@ const { locale = 'en', departments = [] } = defineProps<{
   departments?: readonly Department[]
 }>()
 
+const activeCategory = ref('all')
+
 const visibleDepartments = computed(() =>
   departments.filter((d) => d.roles.length > 0)
 )
 
-const categories = computed(() =>
-  visibleDepartments.value.map((d) => ({ label: d.name, value: d.key }))
+const categories = computed(() => [
+  { label: 'ALL', value: 'all' },
+  ...visibleDepartments.value.map((d) => ({ label: d.name, value: d.key }))
+])
+
+const filteredDepartments = computed(() =>
+  activeCategory.value === 'all'
+    ? visibleDepartments.value
+    : visibleDepartments.value.filter((d) => d.key === activeCategory.value)
 )
 
 const hasRoles = computed(() => visibleDepartments.value.length > 0)
-
-const activeCategory = ref('')
-
-const sectionRefs = useTemplateRefsList<HTMLElement>()
-
-let isScrolling = false
-let pendingFrame = 0
-
-const HEADER_OFFSET = -144
-const ACTIVATION_OFFSET = 300
-
-const deptElementId = (key: string) => `careers-dept-${key}`
-
-function pickActiveSection() {
-  pendingFrame = 0
-  if (isScrolling) return
-  const sections = sectionRefs.value as HTMLElement[]
-  if (sections.length === 0) return
-
-  let active = sections[0]
-  for (const el of sections) {
-    if (el.getBoundingClientRect().top - ACTIVATION_OFFSET <= 0) {
-      active = el
-    } else {
-      break
-    }
-  }
-  activeCategory.value = active.id.replace(/^careers-dept-/, '')
-}
-
-function scheduleUpdate() {
-  if (pendingFrame !== 0) return
-  pendingFrame = requestAnimationFrame(pickActiveSection)
-}
-
-onMounted(pickActiveSection)
-useEventListener('scroll', scheduleUpdate, { passive: true })
-useEventListener('resize', scheduleUpdate, { passive: true })
-
-function scrollToDepartment(deptKey: string) {
-  activeCategory.value = deptKey
-  isScrolling = true
-  const el = document.getElementById(deptElementId(deptKey))
-  if (!el) {
-    isScrolling = false
-    return
-  }
-  scrollTo(el, {
-    offset: HEADER_OFFSET,
-    duration: 0.8,
-    immediate: prefersReducedMotion(),
-    onComplete: () => {
-      isScrolling = false
-      pickActiveSection()
-    }
-  })
-}
 </script>
 
 <template>
@@ -99,10 +48,9 @@ function scrollToDepartment(deptKey: string) {
             </h2>
             <CategoryNav
               v-if="hasRoles"
+              v-model="activeCategory"
               :categories="categories"
-              :model-value="activeCategory"
               class="mt-4"
-              @update:model-value="scrollToDepartment"
             />
           </div>
         </div>
@@ -117,11 +65,9 @@ function scrollToDepartment(deptKey: string) {
           </p>
 
           <div
-            v-for="dept in visibleDepartments"
-            :id="deptElementId(dept.key)"
-            :ref="sectionRefs.set"
+            v-for="dept in filteredDepartments"
             :key="dept.key"
-            class="mb-12 scroll-mt-24 last:mb-0 md:scroll-mt-36"
+            class="mb-12 last:mb-0"
           >
             <SectionLabel>
               {{ dept.name }}

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

@@ -1,11 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@comfyorg/tailwind-utils'
-import {
-  useEventListener,
-  useIntersectionObserver,
-  useTemplateRefsList
-} from '@vueuse/core'
-import { computed, onMounted, ref } from 'vue'
+import { useIntersectionObserver, useTemplateRefsList } from '@vueuse/core'
+import { computed, ref } from 'vue'
 
 import type { Locale, TranslationKey } from '../../i18n/translations'
 
@@ -44,25 +40,13 @@ const activeSection = ref(sections[0]?.id ?? '')
 
 const sectionRefs = useTemplateRefsList<HTMLElement>()
 let isScrolling = false
-let scrollSafetyTimer: ReturnType<typeof setTimeout> | undefined
 
 const HEADER_OFFSET = -144
-const BOTTOM_THRESHOLD_PX = 4
-const SCROLL_SAFETY_MS = 1500
-
-function clearScrollLock() {
-  isScrolling = false
-  if (scrollSafetyTimer !== undefined) {
-    clearTimeout(scrollSafetyTimer)
-    scrollSafetyTimer = undefined
-  }
-}
 
 useIntersectionObserver(
   sectionRefs,
   (entries) => {
     if (isScrolling) return
-    if (isAtBottom()) return
     let best: IntersectionObserverEntry | null = null
     for (const entry of entries) {
       if (!entry.isIntersecting) continue
@@ -74,39 +58,22 @@ useIntersectionObserver(
   { rootMargin: '-20% 0px -60% 0px' }
 )
 
-function isAtBottom(): boolean {
-  const scrollBottom = window.scrollY + window.innerHeight
-  return (
-    scrollBottom >= document.documentElement.scrollHeight - BOTTOM_THRESHOLD_PX
-  )
-}
-
-function activateLastIfAtBottom() {
-  if (isScrolling) return
-  if (!isAtBottom()) return
-  const lastId = sections[sections.length - 1]?.id
-  if (lastId) activeSection.value = lastId
-}
-
-onMounted(activateLastIfAtBottom)
-useEventListener('scroll', activateLastIfAtBottom, { passive: true })
-
 function scrollToSection(id: string) {
   activeSection.value = id
-  clearScrollLock()
   isScrolling = true
-  scrollSafetyTimer = setTimeout(clearScrollLock, SCROLL_SAFETY_MS)
   const el = document.getElementById(id)
   if (el) {
     scrollTo(el, {
       offset: HEADER_OFFSET,
       duration: 0.8,
       immediate: prefersReducedMotion(),
-      onComplete: clearScrollLock
+      onComplete: () => {
+        isScrolling = false
+      }
     })
     return
   }
-  clearScrollLock()
+  isScrolling = false
 }
 </script>
 

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

@@ -13,7 +13,7 @@ const { stars } = defineProps<{
     target="_blank"
     rel="noopener noreferrer"
     :aria-label="`ComfyUI on GitHub — ${stars} stars`"
-    class="hidden shrink-0 items-center gap-1 lg:flex"
+    class="hidden shrink-0 items-center gap-2 lg:flex"
   >
     <NodeBadge
       :segments="[{ text: stars }]"
@@ -22,7 +22,7 @@ const { stars } = defineProps<{
       size-class="h-5 sm:h-5"
     />
     <span
-      class="bg-primary-comfy-yellow block size-6 shrink-0"
+      class="bg-primary-comfy-yellow block size-7"
       aria-hidden="true"
       style="mask: url('/icons/social/github.svg') center / contain no-repeat"
     />

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

@@ -14,28 +14,23 @@ const logos = [
   'Ubisoft'
 ]
 
-const mobileRow1Logos = logos.slice(0, 6)
-const mobileRow2Logos = logos.slice(6)
+const desktopLogos = Array.from({ length: 4 }, () => logos).flat()
+const row1 = logos.slice(0, 6)
+const mobileRow1 = [...row1, ...row1]
+const row2 = logos.slice(6)
+const mobileRow2 = [...row2, ...row2]
 </script>
 
 <template>
   <section class="overflow-hidden py-12">
     <!-- Single row on desktop -->
-    <div data-testid="social-proof-desktop" class="hidden w-max gap-2 md:flex">
+    <div class="animate-marquee hidden items-center gap-2 md:flex">
       <div
-        v-for="copy in 2"
-        :key="copy"
-        class="animate-marquee flex shrink-0 items-center gap-2"
-        style="--marquee-gap: 0.5rem"
-        :aria-hidden="copy === 2 ? 'true' : undefined"
+        v-for="(logo, i) in desktopLogos"
+        :key="`${logo}-${i}`"
+        class="flex h-20 w-50 shrink-0 items-center justify-center"
       >
-        <div
-          v-for="logo in logos"
-          :key="logo"
-          class="flex h-20 w-50 shrink-0 items-center justify-center"
-        >
-          <img :src="`/icons/clients/${logo}.svg`" :alt="logo" />
-        </div>
+        <img :src="`/icons/clients/${logo}.svg`" :alt="logo" />
       </div>
     </div>
 
@@ -44,38 +39,22 @@ const mobileRow2Logos = logos.slice(6)
       data-testid="social-proof-mobile"
       class="flex flex-col gap-8 md:hidden"
     >
-      <div class="flex w-max gap-8">
+      <div class="animate-marquee flex items-center gap-8">
         <div
-          v-for="copy in 2"
-          :key="copy"
-          class="animate-marquee flex shrink-0 items-center gap-8"
-          style="--marquee-gap: 2rem"
-          :aria-hidden="copy === 2 ? 'true' : undefined"
+          v-for="(logo, i) in mobileRow1"
+          :key="`${logo}-${i}`"
+          class="flex h-14 w-40 shrink-0 items-center justify-center"
         >
-          <div
-            v-for="logo in mobileRow1Logos"
-            :key="logo"
-            class="flex h-14 w-40 shrink-0 items-center justify-center"
-          >
-            <img :src="`/icons/clients/${logo}.svg`" :alt="logo" />
-          </div>
+          <img :src="`/icons/clients/${logo}.svg`" :alt="logo" />
         </div>
       </div>
-      <div class="flex w-max gap-8">
+      <div class="animate-marquee-reverse flex items-center gap-8">
         <div
-          v-for="copy in 2"
-          :key="copy"
-          class="animate-marquee-reverse flex shrink-0 items-center gap-8"
-          style="--marquee-gap: 2rem"
-          :aria-hidden="copy === 2 ? 'true' : undefined"
+          v-for="(logo, i) in mobileRow2"
+          :key="`${logo}-${i}`"
+          class="flex h-14 w-40 shrink-0 items-center justify-center"
         >
-          <div
-            v-for="logo in mobileRow2Logos"
-            :key="logo"
-            class="flex h-14 w-40 shrink-0 items-center justify-center"
-          >
-            <img :src="`/icons/clients/${logo}.svg`" :alt="logo" />
-          </div>
+          <img :src="`/icons/clients/${logo}.svg`" :alt="logo" />
         </div>
       </div>
     </div>

apps/website/src/components/customers/FeedbackSection.vue

@@ -75,7 +75,7 @@ const progressPercent = computed(() => `${progress.value * 100}%`)
       <!-- Progress bar -->
       <div class="h-1 flex-1 rounded-full bg-white/20">
         <div
-          class="bg-primary-comfy-yellow h-full rounded-full"
+          class="bg-primary-comfy-yellow h-full rounded-full transition-all duration-200"
           :style="{ width: progressPercent }"
         />
       </div>

apps/website/src/components/customers/HeroSection.vue

@@ -5,7 +5,6 @@ import { useHeroAnimation } from '../../composables/useHeroAnimation'
 import SectionLabel from '../common/SectionLabel.vue'
 import type { Locale } from '../../i18n/translations'
 import { t } from '../../i18n/translations'
-import { ScrollTrigger } from '../../scripts/gsapSetup'
 import VideoPlayer from '../common/VideoPlayer.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
@@ -23,10 +22,6 @@ useHeroAnimation({
   logo: logoRef,
   video: videoRef
 })
-
-function handleLogoLoad() {
-  ScrollTrigger.refresh(true)
-}
 </script>
 
 <template>
@@ -42,10 +37,7 @@ function handleLogoLoad() {
         <img
           src="https://media.comfy.org/website/customers/c-projection.webp"
           alt="Comfy 3D logo"
-          width="1568"
-          height="1763"
-          class="mx-auto h-auto w-full max-w-md lg:max-w-none"
-          @load="handleLogoLoad"
+          class="mx-auto w-full max-w-md lg:max-w-none"
         />
       </div>
 

apps/website/src/components/demos/ArcadeEmbed.vue

@@ -8,12 +8,10 @@ import { t } from '../../i18n/translations'
 const {
   arcadeId,
   title,
-  aspectRatio = 16 / 9,
   locale = 'en'
 } = defineProps<{
   arcadeId: string
   title: string
-  aspectRatio?: number
   locale?: Locale
 }>()
 
@@ -26,8 +24,7 @@ const loaded = ref(false)
     :aria-label="t('demos.embed.label', locale)"
   >
     <div
-      class="relative mx-auto max-w-6xl overflow-hidden rounded-4xl border border-white/10"
-      :style="{ aspectRatio }"
+      class="relative mx-auto aspect-video max-w-6xl overflow-hidden rounded-4xl border border-white/10"
     >
       <div
         v-if="!loaded"

apps/website/src/components/home/UseCaseSection.vue

@@ -25,7 +25,7 @@ const categories: Category[] = [
   {
     label: t('useCase.vfx', locale),
     leftSrc: 'https://media.comfy.org/website/homepage/use-case/left1.webm',
-    rightSrc: 'https://media.comfy.org/website/homepage/use-case/right1.webm'
+    rightSrc: 'https://media.comfy.org/website/homepage/use-case/right1.webp'
   },
   {
     label: t('useCase.advertising', locale),

apps/website/src/components/pricing/PriceSection.vue

@@ -77,10 +77,7 @@ const plans: PricingPlan[] = [
     ctaKey: 'pricing.plan.creator.cta',
     ctaHref: subscribeUrl('creator'),
     featureIntroKey: 'pricing.plan.creator.featureIntro',
-    features: [
-      { text: 'pricing.plan.creator.feature1' },
-      { text: 'pricing.plan.creator.feature2' }
-    ],
+    features: [{ text: 'pricing.plan.creator.feature1' }],
     isPopular: true
   },
   {
@@ -93,10 +90,7 @@ const plans: PricingPlan[] = [
     ctaKey: 'pricing.plan.pro.cta',
     ctaHref: subscribeUrl('pro'),
     featureIntroKey: 'pricing.plan.pro.featureIntro',
-    features: [
-      { text: 'pricing.plan.pro.feature1' },
-      { text: 'pricing.plan.pro.feature2' }
-    ]
+    features: [{ text: 'pricing.plan.pro.feature1' }]
   },
   {
     id: 'enterprise',

apps/website/src/components/product/local/HeroSection.vue

@@ -276,6 +276,29 @@ onUnmounted(() => {
             fill="#211927"
           />
         </g>
+
+        <!-- Left-edge fade -->
+        <rect
+          x="300"
+          y="150"
+          width="250"
+          height="900"
+          fill="url(#localHeroFadeLeft)"
+        />
+
+        <defs>
+          <linearGradient
+            id="localHeroFadeLeft"
+            x1="550"
+            y1="600"
+            x2="300"
+            y2="600"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#211927" stop-opacity="0" />
+            <stop offset="1" stop-color="#211927" />
+          </linearGradient>
+        </defs>
       </svg>
     </div>
 

apps/website/src/config/demos.ts

@@ -15,14 +15,6 @@ interface Demo {
   readonly transcript?: TranslationKey
   readonly publishedDate: string
   readonly modifiedDate: string
-  /**
-   * Width / height of the Arcade demo's source recording (e.g. 1.93 for a
-   * landscape screencast). Sizes the embed container to match so rounded
-   * corners hug the content instead of empty letterbox space. Source from
-   * Arcade's `_serializablePublicFlow.aspectRatio` (which is height/width —
-   * invert it). Defaults to 16/9 if omitted.
-   */
-  readonly aspectRatio?: number
 }
 
 export const demos: readonly Demo[] = [
@@ -40,8 +32,7 @@ export const demos: readonly Demo[] = [
     difficulty: 'beginner',
     tags: ['templates', 'image', 'video'],
     publishedDate: '2026-04-19',
-    modifiedDate: '2026-04-19',
-    aspectRatio: 1.931
+    modifiedDate: '2026-04-19'
   },
   {
     slug: 'workflow-templates',
@@ -57,25 +48,7 @@ export const demos: readonly Demo[] = [
     difficulty: 'beginner',
     tags: ['getting-started', 'templates', 'workflow'],
     publishedDate: '2026-04-19',
-    modifiedDate: '2026-04-19',
-    aspectRatio: 1.931
-  },
-  {
-    slug: 'community-workflows',
-    arcadeId: 'mqZh17oWDuWIyhK0xwEV',
-    category: 'demos.category.gettingStarted',
-    title: 'demos.community-workflows.title',
-    description: 'demos.community-workflows.description',
-    transcript: 'demos.community-workflows.transcript',
-    ogImage: '/images/demos/community-workflows-og.png',
-    thumbnail: '/images/demos/community-workflows-thumb.webp',
-    estimatedTime: 'demos.duration.2min',
-    durationIso: 'PT2M',
-    difficulty: 'beginner',
-    tags: ['getting-started', 'community', 'workflow', 'hub'],
-    publishedDate: '2026-05-04',
-    modifiedDate: '2026-05-04',
-    aspectRatio: 1.931
+    modifiedDate: '2026-04-19'
   }
 ]
 

apps/website/src/i18n/translations.ts

@@ -1119,10 +1119,6 @@ const translations = {
     en: 'Import your own LoRAs',
     'zh-CN': '导入你自己的 LoRA'
   },
-  'pricing.plan.creator.feature2': {
-    en: '3 concurrent API jobs',
-    'zh-CN': '3 个并发 API 任务'
-  },
 
   'pricing.plan.pro.label': { en: 'PRO', 'zh-CN': '专业版' },
   'pricing.plan.pro.summary': {
@@ -1147,10 +1143,6 @@ const translations = {
     en: 'Longer workflow runtime (up to 1 hour)',
     'zh-CN': '更长工作流运行时长（最长 1 小时）'
   },
-  'pricing.plan.pro.feature2': {
-    en: '5 concurrent API jobs',
-    'zh-CN': '5 个并发 API 任务'
-  },
 
   'pricing.enterprise.label': { en: 'ENTERPRISE', 'zh-CN': '企业版' },
   'pricing.enterprise.heading': {
@@ -3570,20 +3562,6 @@ const translations = {
       '<ol><li><strong>打开模板浏览器</strong> — 点击 ComfyUI 侧栏中的模板图标。</li><li><strong>浏览分类</strong> — 模板按任务分类：图像生成、视频、放大等。</li><li><strong>预览模板</strong> — 将鼠标悬停在模板上查看预览。</li><li><strong>加载并自定义</strong> — 点击加载模板，然后修改参数。</li></ol>'
   },
 
-  'demos.community-workflows.title': {
-    en: 'Explore and Use a Community Workflow from the Hub',
-    'zh-CN': '探索并使用社区工作流'
-  },
-  'demos.community-workflows.description': {
-    en: 'Discover how to find and get started with popular community workflows for generative AI projects.',
-    'zh-CN': '了解如何查找并使用流行的社区工作流来构建生成式 AI 项目。'
-  },
-  'demos.community-workflows.transcript': {
-    en: '<ol><li><strong>Open the Workflow Hub</strong> — From the ComfyUI sidebar, navigate to the community Workflow Hub to browse curated and trending workflows shared by the community.</li><li><strong>Browse popular workflows</strong> — Explore featured projects sorted by popularity, recency, and category to find one that matches your goal.</li><li><strong>Preview a workflow</strong> — Click a workflow card to see example outputs, required models, and a description of what it produces.</li><li><strong>Open in ComfyUI</strong> — Use the "Get Started" action to load the selected community workflow directly onto your canvas.</li><li><strong>Run and customize</strong> — Queue the workflow to generate your first result, then tweak prompts, models, and parameters to make it your own.</li></ol>',
-    'zh-CN':
-      '<ol><li><strong>打开工作流中心</strong> — 在 ComfyUI 侧栏中，进入社区工作流中心，浏览社区分享的精选和热门工作流。</li><li><strong>浏览热门工作流</strong> — 按热度、时间和分类浏览精选项目，找到符合需求的工作流。</li><li><strong>预览工作流</strong> — 点击工作流卡片，查看示例输出、所需模型和功能描述。</li><li><strong>在 ComfyUI 中打开</strong> — 使用"开始使用"按钮，将选中的社区工作流直接加载到画布。</li><li><strong>运行并自定义</strong> — 排队执行工作流以生成首个结果，然后调整提示词、模型和参数。</li></ol>'
-  },
-
   'demos.nav.nextDemo': { en: "What's Next", 'zh-CN': '下一个演示' },
   'demos.nav.viewDemo': { en: 'View Demo', 'zh-CN': '查看演示' },
   'demos.nav.allDemos': { en: 'All Demos', 'zh-CN': '所有演示' },

apps/website/src/pages/demos/[slug].astro

@@ -121,7 +121,6 @@ const breadcrumbJsonLd = {
   <ArcadeEmbed
     arcadeId={demo.arcadeId}
     title={title}
-    aspectRatio={demo.aspectRatio}
     client:load
   />
 

apps/website/src/pages/zh-CN/demos/[slug].astro

@@ -122,7 +122,6 @@ const breadcrumbJsonLd = {
   <ArcadeEmbed
     arcadeId={demo.arcadeId}
     title={title}
-    aspectRatio={demo.aspectRatio}
     locale="zh-CN"
     client:load
   />

apps/website/src/styles/global.css

@@ -101,13 +101,13 @@
     transform: translateX(0);
   }
   100% {
-    transform: translateX(calc(-100% - var(--marquee-gap, 0px)));
+    transform: translateX(-50%);
   }
 }
 
 @keyframes marquee-reverse {
   0% {
-    transform: translateX(calc(-100% - var(--marquee-gap, 0px)));
+    transform: translateX(-50%);
   }
   100% {
     transform: translateX(0);
@@ -115,15 +115,11 @@
 }
 
 @utility animate-marquee {
-  @media (prefers-reduced-motion: no-preference) {
-    animation: marquee 30s linear infinite;
-  }
+  animation: marquee 30s linear infinite;
 }
 
 @utility animate-marquee-reverse {
-  @media (prefers-reduced-motion: no-preference) {
-    animation: marquee-reverse 30s linear infinite;
-  }
+  animation: marquee-reverse 30s linear infinite;
 }
 
 @keyframes ripple-effect {

browser_tests/assets/widgets/load_image_widget_missing_file.json

@@ -1,42 +0,0 @@
-{
-  "last_node_id": 10,
-  "last_link_id": 10,
-  "nodes": [
-    {
-      "id": 10,
-      "type": "LoadImage",
-      "pos": [50, 50],
-      "size": [315, 314],
-      "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": ["this-image-does-not-exist-deadbeef.png", "image"]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "offset": [0, 0],
-      "scale": 1
-    }
-  },
-  "version": 0.4
-}

browser_tests/fixtures/ComfyPage.ts

@@ -190,9 +190,6 @@ export class ComfyPage {
   /** Worker index to test user ID */
   public readonly userIds: string[] = []
 
-  /** Whether the current test runs in Vue Nodes mode (initialized from `@vue-nodes` tag). */
-  public isVueNodes = false
-
   /** Test user ID for the current context */
   get id() {
     return this.userIds[comfyPageFixture.info().parallelIndex]
@@ -355,12 +352,6 @@ export class ComfyPage {
     await nextFrame(this.page)
   }
 
-  async idleFrames(count: number) {
-    for (let i = 0; i < count; i++) {
-      await this.nextFrame()
-    }
-  }
-
   async delay(ms: number) {
     return sleep(ms)
   }
@@ -503,7 +494,6 @@ export const comfyPageFixture = base.extend<{
     comfyPage.userIds[parallelIndex] = userId
 
     const isVueNodes = testInfo.tags.includes('@vue-nodes')
-    comfyPage.isVueNodes = isVueNodes
 
     try {
       await comfyPage.setupSettings({

browser_tests/fixtures/VueNodeHelpers.ts

@@ -217,20 +217,13 @@ export class VueNodeHelpers {
     }
   }
 
-  /**
-   * Locator for the Enter Subgraph footer button.
-   */
-  getSubgraphEnterButton(nodeId?: string): Locator {
-    const root = nodeId ? this.getNodeLocator(nodeId) : this.page
-    return root.getByTestId(TestIds.widgets.subgraphEnterButton).first()
-  }
-
   /**
    * Enter the subgraph of a node.
    * @param nodeId - The ID of the node to enter the subgraph of. If not provided, the first matched subgraph will be entered.
    */
   async enterSubgraph(nodeId?: string): Promise<void> {
-    const editButton = this.getSubgraphEnterButton(nodeId)
+    const locator = nodeId ? this.getNodeLocator(nodeId) : this.page
+    const editButton = locator.getByTestId(TestIds.widgets.subgraphEnterButton)
 
     // The footer tab button extends below the node body (visible area),
     // but its bounding box center overlaps the node body div.

browser_tests/fixtures/components/Actionbar.ts

@@ -39,32 +39,10 @@ class ComfyQueueButton {
     await this.dropdownButton.click()
     return new ComfyQueueButtonOptions(this.actionbar.page)
   }
-
-  public async openOptions() {
-    const options = new ComfyQueueButtonOptions(this.actionbar.page)
-    if (!(await options.menu.isVisible())) {
-      await this.dropdownButton.click()
-    }
-    return options
-  }
 }
 
 class ComfyQueueButtonOptions {
-  public readonly menu: Locator
-  public readonly modeItems: Locator
-
-  constructor(public readonly page: Page) {
-    this.menu = page.getByRole('menu')
-    this.modeItems = this.menu.getByRole('menuitem')
-  }
-
-  public modeItem(name: string) {
-    return this.menu.getByRole('menuitem', { name, exact: true })
-  }
-
-  public async selectMode(name: string) {
-    await this.modeItem(name).click()
-  }
+  constructor(public readonly page: Page) {}
 
   public async setMode(mode: AutoQueueMode) {
     await this.page.evaluate((mode) => {

browser_tests/fixtures/components/ContextMenu.ts

@@ -20,7 +20,6 @@ export class ContextMenu {
 
   async clickMenuItemExact(name: string): Promise<void> {
     await this.page.getByRole('menuitem', { name, exact: true }).click()
-    await this.waitForHidden()
   }
 
   /**

browser_tests/fixtures/components/Topbar.ts

@@ -82,7 +82,7 @@ export class Topbar {
   }
 
   getSaveDialog(): Locator {
-    return this.page.getByRole('dialog').getByRole('textbox')
+    return this.page.locator('.p-dialog-content input')
   }
 
   saveWorkflow(workflowName: string): Promise<void> {
@@ -116,9 +116,9 @@ export class Topbar {
 
     // Check if a confirmation dialog appeared (e.g., "Overwrite existing file?")
     // If so, return early to let the test handle the confirmation
-    const confirmationDialog = this.page
-      .getByRole('dialog')
-      .filter({ hasText: 'Overwrite' })
+    const confirmationDialog = this.page.locator(
+      '.p-dialog:has-text("Overwrite")'
+    )
     if (await confirmationDialog.isVisible()) {
       return
     }

browser_tests/fixtures/components/WidgetSelectDropdown.ts

@@ -1,12 +0,0 @@
-import type { Locator } from '@playwright/test'
-
-export class WidgetSelectDropdownFixture {
-  public readonly selection: Locator
-
-  constructor(public readonly root: Locator) {
-    this.selection = root.locator('button span span')
-  }
-  async selectedItem(): Promise<string> {
-    return await this.selection.innerText()
-  }
-}

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -9,15 +9,13 @@ import { BuilderFooterHelper } from '@e2e/fixtures/helpers/BuilderFooterHelper'
 import { BuilderSaveAsHelper } from '@e2e/fixtures/helpers/BuilderSaveAsHelper'
 import { BuilderSelectHelper } from '@e2e/fixtures/helpers/BuilderSelectHelper'
 import { BuilderStepsHelper } from '@e2e/fixtures/helpers/BuilderStepsHelper'
-import { MobileAppHelper } from '@e2e/fixtures/helpers/MobileAppHelper'
 
 export class AppModeHelper {
+  readonly steps: BuilderStepsHelper
   readonly footer: BuilderFooterHelper
-  readonly mobile: MobileAppHelper
   readonly saveAs: BuilderSaveAsHelper
   readonly select: BuilderSelectHelper
   readonly outputHistory: OutputHistoryComponent
-  readonly steps: BuilderStepsHelper
   readonly widgets: AppModeWidgetHelper
 
   /** The "Connect an output" popover shown when saving without outputs. */
@@ -62,16 +60,13 @@ export class AppModeHelper {
   public readonly vueNodeSwitchDismissButton: Locator
   /** The "Don't show again" checkbox inside the Vue Node switch popup. */
   public readonly vueNodeSwitchDontShowAgainCheckbox: Locator
-  /** The main content area where outputs are displayed*/
-  public readonly centerPanel: Locator
 
   constructor(private readonly comfyPage: ComfyPage) {
-    this.mobile = new MobileAppHelper(comfyPage)
+    this.steps = new BuilderStepsHelper(comfyPage)
     this.footer = new BuilderFooterHelper(comfyPage)
     this.saveAs = new BuilderSaveAsHelper(comfyPage)
     this.select = new BuilderSelectHelper(comfyPage)
     this.outputHistory = new OutputHistoryComponent(comfyPage.page)
-    this.steps = new BuilderStepsHelper(comfyPage)
     this.widgets = new AppModeWidgetHelper(comfyPage)
 
     this.connectOutputPopover = this.page.getByTestId(
@@ -130,7 +125,6 @@ export class AppModeHelper {
     this.vueNodeSwitchDontShowAgainCheckbox = this.page.getByTestId(
       TestIds.appMode.vueNodeSwitchDontShowAgain
     )
-    this.centerPanel = this.page.getByTestId(TestIds.linear.centerPanel)
   }
 
   private get page(): Page {

browser_tests/fixtures/helpers/AssetHelper.ts

@@ -215,12 +215,11 @@ export class AssetHelper {
     return this.store.size
   }
   private handleListAssets(route: Route, url: URL) {
-    const includeTags = parseAssetTagParam(url.searchParams.get('include_tags'))
-    const excludeTags = parseAssetTagParam(url.searchParams.get('exclude_tags'))
+    const includeTags = url.searchParams.get('include_tags')?.split(',') ?? []
     const limit = parseInt(url.searchParams.get('limit') ?? '0', 10)
     const offset = parseInt(url.searchParams.get('offset') ?? '0', 10)
 
-    let filtered = this.getFilteredAssets(includeTags, excludeTags)
+    let filtered = this.getFilteredAssets(includeTags)
     if (limit > 0) {
       filtered = filtered.slice(offset, offset + limit)
     }
@@ -297,29 +296,15 @@ export class AssetHelper {
     this.paginationOptions = null
     this.uploadResponse = null
   }
-  private getFilteredAssets(
-    includeTags: string[],
-    excludeTags: string[]
-  ): Asset[] {
+  private getFilteredAssets(tags: string[]): Asset[] {
     const assets = [...this.store.values()]
+    if (tags.length === 0) return assets
 
-    return assets.filter(
-      (asset) =>
-        includeTags.every((tag) => (asset.tags ?? []).includes(tag)) &&
-        excludeTags.every((tag) => !(asset.tags ?? []).includes(tag))
+    return assets.filter((asset) =>
+      tags.every((tag) => (asset.tags ?? []).includes(tag))
     )
   }
 }
-
-function parseAssetTagParam(value: string | null): string[] {
-  return (
-    value
-      ?.split(',')
-      .map((tag) => tag.trim())
-      .filter(Boolean) ?? []
-  )
-}
-
 export function createAssetHelper(
   page: Page,
   ...operators: AssetOperator[]

browser_tests/fixtures/helpers/BuilderSelectHelper.ts

@@ -127,7 +127,9 @@ export class BuilderSelectHelper {
     await popoverTrigger.click()
     await this.page.getByText('Rename', { exact: true }).click()
 
-    const dialogInput = this.page.getByRole('dialog').getByRole('textbox')
+    const dialogInput = this.page.locator(
+      '.p-dialog-content input[type="text"]'
+    )
     await dialogInput.fill(newName)
     await this.page.keyboard.press('Enter')
     await dialogInput.waitFor({ state: 'hidden' })

browser_tests/fixtures/helpers/DragDropHelper.ts

@@ -1,5 +1,4 @@
 import { readFileSync } from 'fs'
-import { basename } from 'path'
 
 import type { Page } from '@playwright/test'
 
@@ -14,7 +13,6 @@ export class DragDropHelper {
   async dragAndDropExternalResource(
     options: {
       fileName?: string
-      filePath?: string
       url?: string
       dropPosition?: Position
       waitForUpload?: boolean
@@ -24,14 +22,13 @@ export class DragDropHelper {
     const {
       dropPosition = { x: 100, y: 100 },
       fileName,
-      filePath,
       url,
       waitForUpload = false,
       preserveNativePropagation = false
     } = options
 
-    if (!fileName && !filePath && !url)
-      throw new Error('Must provide fileName, filePath, or url')
+    if (!fileName && !url)
+      throw new Error('Must provide either fileName or url')
 
     const evaluateParams: {
       dropPosition: Position
@@ -42,22 +39,12 @@ export class DragDropHelper {
       preserveNativePropagation: boolean
     } = { dropPosition, preserveNativePropagation }
 
-    if (fileName || filePath) {
-      const resolvedPath = filePath ?? assetPath(fileName!)
-      const displayName = fileName ?? basename(resolvedPath)
-      let buffer: Buffer
-      try {
-        buffer = readFileSync(resolvedPath)
-      } catch (error) {
-        const reason = error instanceof Error ? error.message : String(error)
-        throw new Error(
-          `Failed to read drag-and-drop fixture at "${resolvedPath}": ${reason}`,
-          { cause: error }
-        )
-      }
+    if (fileName) {
+      const filePath = assetPath(fileName)
+      const buffer = readFileSync(filePath)
 
-      evaluateParams.fileName = displayName
-      evaluateParams.fileType = getMimeType(displayName)
+      evaluateParams.fileName = fileName
+      evaluateParams.fileType = getMimeType(fileName)
       evaluateParams.buffer = [...new Uint8Array(buffer)]
     }
 
@@ -161,13 +148,6 @@ export class DragDropHelper {
     return this.dragAndDropExternalResource({ fileName, ...options })
   }
 
-  async dragAndDropFilePath(
-    filePath: string,
-    options: { dropPosition?: Position; waitForUpload?: boolean } = {}
-  ): Promise<void> {
-    return this.dragAndDropExternalResource({ filePath, ...options })
-  }
-
   async dragAndDropURL(
     url: string,
     options: {

browser_tests/fixtures/helpers/ExecutionHelper.ts

@@ -1,10 +1,6 @@
 import type { WebSocketRoute } from '@playwright/test'
 
-import type {
-  NodeError,
-  NodeProgressState,
-  PromptResponse
-} from '@/schemas/apiSchema'
+import type { NodeError, PromptResponse } from '@/schemas/apiSchema'
 import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { createMockJob } from '@e2e/fixtures/helpers/AssetsHelper'
@@ -234,16 +230,6 @@ export class ExecutionHelper {
     )
   }
 
-  /** Send `progress_state` WS event with per-node execution state. */
-  progressState(jobId: string, nodes: Record<string, NodeProgressState>): void {
-    this.requireWs().send(
-      JSON.stringify({
-        type: 'progress_state',
-        data: { prompt_id: jobId, nodes }
-      })
-    )
-  }
-
   /**
    * Complete a job by adding it to mock history, sending execution_success,
    * and triggering a history refresh via a status event.

browser_tests/fixtures/helpers/MobileAppHelper.ts

@@ -1,33 +0,0 @@
-import type { Locator, Page } from '@playwright/test'
-
-import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
-import { TestIds } from '@e2e/fixtures/selectors'
-
-export class MobileAppHelper {
-  private readonly page: Page
-  readonly contentPanel: Locator
-  readonly navigation: Locator
-  readonly navigationTabs: Locator
-  readonly view: Locator
-  readonly workflows: Locator
-
-  constructor(comfyPage: ComfyPage) {
-    this.page = comfyPage.page
-    this.view = this.page.getByTestId(TestIds.linear.mobile)
-    this.contentPanel = this.page.getByRole('tabpanel')
-    this.navigation = this.page.getByRole('tablist').filter({ hasText: 'Run' })
-    this.navigationTabs = this.navigation.getByRole('tab')
-    this.workflows = this.view.getByTestId(TestIds.linear.mobileWorkflows)
-  }
-
-  async switchWorkflow(workflowName: string) {
-    await this.workflows.click()
-    await this.page.getByRole('menu').getByText(workflowName).click()
-  }
-  async navigateTab(name: 'run' | 'outputs' | 'assets') {
-    await this.navigation.getByRole('tab', { name }).click()
-  }
-  async tap(locator: Locator, { count = 1 }: { count?: number } = {}) {
-    for (let i = 0; i < count; i++) await locator.tap()
-  }
-}

browser_tests/fixtures/helpers/NodeOperationsHelper.ts

@@ -18,7 +18,9 @@ export class NodeOperationsHelper {
   public readonly promptDialogInput: Locator
 
   constructor(private comfyPage: ComfyPage) {
-    this.promptDialogInput = this.page.getByRole('dialog').getByRole('textbox')
+    this.promptDialogInput = this.page.locator(
+      '.p-dialog-content input[type="text"]'
+    )
   }
 
   private get page() {

browser_tests/fixtures/helpers/SubgraphHelper.ts

@@ -362,9 +362,6 @@ export class SubgraphHelper {
 
     await this.comfyPage.nextFrame()
     await expect.poll(async () => this.isInSubgraph()).toBe(false)
-    if (this.comfyPage.isVueNodes) {
-      await this.comfyPage.vueNodes.waitForNodes()
-    }
   }
 
   async countGraphPseudoPreviewEntries(): Promise<number> {

browser_tests/fixtures/selectors.ts

@@ -144,14 +144,6 @@ export const TestIds = {
     domWidgetTextarea: 'dom-widget-textarea',
     subgraphEnterButton: 'subgraph-enter-button'
   },
-  linear: {
-    centerPanel: 'linear-center-panel',
-    mobile: 'linear-mobile',
-    mobileNavigation: 'linear-mobile-navigation',
-    mobileWorkflows: 'linear-mobile-workflows',
-    outputInfo: 'linear-output-info',
-    widgetContainer: 'linear-widgets'
-  },
   builder: {
     footerNav: 'builder-footer-nav',
     saveButton: 'builder-save-button',

browser_tests/fixtures/utils/contextMenuTestHelpers.ts

@@ -0,0 +1,90 @@
+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 type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
+
+/**
+ * Click a menu item by exact label and wait for the menu to close.
+ */
+export async function clickExactMenuItem(comfyPage: ComfyPage, name: string) {
+  await comfyPage.contextMenu.clickMenuItemExact(name)
+  await expect(comfyPage.contextMenu.primeVueMenu).toBeHidden()
+}
+
+/**
+ * Open the context menu for a single Vue node by title.
+ * Selects the node first (required for correct menu items).
+ */
+export async function openContextMenu(
+  comfyPage: ComfyPage,
+  nodeTitle: string
+): Promise<Locator> {
+  const fixture = await comfyPage.vueNodes.getFixtureByTitle(nodeTitle)
+  await comfyPage.contextMenu.openForVueNode(fixture.header)
+  return comfyPage.contextMenu.primeVueMenu
+}
+
+/**
+ * Open the context menu for multiple selected Vue nodes.
+ */
+export async function openMultiNodeContextMenu(
+  comfyPage: ComfyPage,
+  titles: string[]
+): Promise<Locator> {
+  if (titles.length === 0) {
+    throw new Error('openMultiNodeContextMenu requires at least one title')
+  }
+
+  // deselectAll via evaluate — clearSelection() clicks at a fixed position
+  // which can hit nodes or the toolbar overlay
+  await comfyPage.page.evaluate(() => window.app!.canvas.deselectAll())
+  await comfyPage.nextFrame()
+
+  for (const title of titles) {
+    const fixture = await comfyPage.vueNodes.getFixtureByTitle(title)
+    await fixture.header.click({ modifiers: ['ControlOrMeta'] })
+  }
+  await comfyPage.nextFrame()
+
+  const firstFixture = await comfyPage.vueNodes.getFixtureByTitle(titles[0])
+  const box = await firstFixture.header.boundingBox()
+  if (!box) throw new Error(`Header for "${titles[0]}" not found`)
+  await comfyPage.page.mouse.click(
+    box.x + box.width / 2,
+    box.y + box.height / 2,
+    { button: 'right' }
+  )
+
+  const menu = comfyPage.contextMenu.primeVueMenu
+  await menu.waitFor({ state: 'visible' })
+  return menu
+}
+
+/**
+ * Get the inner wrapper locator for a Vue node by title.
+ */
+export function getNodeWrapper(
+  comfyPage: ComfyPage,
+  nodeTitle: string
+): Locator {
+  return comfyPage.vueNodes
+    .getNodeByTitle(nodeTitle)
+    .getByTestId(TestIds.node.innerWrapper)
+}
+
+/**
+ * Get the first NodeReference matching the given title.
+ */
+export async function getNodeRef(
+  comfyPage: ComfyPage,
+  nodeTitle: string
+): Promise<NodeReference> {
+  const refs = await comfyPage.nodeOps.getNodeRefsByTitle(nodeTitle)
+  const firstRef = refs[0]
+  if (!firstRef) {
+    throw new Error(`No node found with title "${nodeTitle}"`)
+  }
+  return firstRef
+}

browser_tests/fixtures/utils/mimeTypeUtil.ts

@@ -7,9 +7,6 @@ export function getMimeType(fileName: string): string {
   if (name.endsWith('.avif')) return 'image/avif'
   if (name.endsWith('.webm')) return 'video/webm'
   if (name.endsWith('.mp4')) return 'video/mp4'
-  if (name.endsWith('.mp3')) return 'audio/mpeg'
-  if (name.endsWith('.flac')) return 'audio/flac'
-  if (name.endsWith('.ogg') || name.endsWith('.opus')) return 'audio/ogg'
   if (name.endsWith('.json')) return 'application/json'
   if (name.endsWith('.glb')) return 'model/gltf-binary'
   return 'application/octet-stream'

browser_tests/fixtures/utils/paths.ts

@@ -1,7 +1,3 @@
 export function assetPath(fileName: string): string {
   return `./browser_tests/assets/${fileName}`
 }
-
-export function metadataFixturePath(fileName: string): string {
-  return `./src/scripts/metadata/__fixtures__/${fileName}`
-}

browser_tests/fixtures/utils/vueNodeFixtures.ts

@@ -13,8 +13,6 @@ export class VueNodeFixture {
   public readonly collapseButton: Locator
   public readonly collapseIcon: Locator
   public readonly root: Locator
-  public readonly widgets: Locator
-  public readonly imagePreview: Locator
 
   constructor(private readonly locator: Locator) {
     this.header = locator.locator('[data-testid^="node-header-"]')
@@ -25,8 +23,6 @@ export class VueNodeFixture {
     this.collapseButton = locator.getByTestId('node-collapse-button')
     this.collapseIcon = this.collapseButton.locator('i')
     this.root = locator
-    this.widgets = this.locator.locator('.lg-node-widget')
-    this.imagePreview = locator.locator('.image-preview')
   }
 
   async getTitle(): Promise<string> {
@@ -43,16 +39,6 @@ export class VueNodeFixture {
     await this.collapseButton.click()
   }
 
-  /**
-   * Select this node and delete it via the Delete key, waiting for the node
-   * element to leave the DOM before resolving.
-   */
-  async delete(): Promise<void> {
-    await this.header.click()
-    await this.header.press('Delete')
-    await this.locator.waitFor({ state: 'hidden' })
-  }
-
   async getCollapseIconClass(): Promise<string> {
     return (await this.collapseIcon.getAttribute('class')) ?? ''
   }

browser_tests/tests/appMode.spec.ts

@@ -1,154 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '@e2e/fixtures/ComfyPage'
-import { WidgetSelectDropdownFixture } from '@e2e/fixtures/components/WidgetSelectDropdown'
-
-test.describe('App mode usage', () => {
-  test('Drag and Drop', async ({ comfyPage, comfyFiles }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.settings.setSetting(
-      'Comfy.NodeSearchBoxImpl',
-      'v1 (legacy)'
-    )
-    const { centerPanel } = comfyPage.appMode
-    await comfyPage.appMode.enterAppModeWithInputs([['3', 'seed']])
-    await expect(centerPanel, 'Enter app mode').toBeVisible()
-
-    //an app without an image input will load the workflow
-    await test.step('App without an image input loads workflow', async () => {
-      await comfyPage.dragDrop.dragAndDropFile('workflowInMedia/workflow.webp')
-      await expect(centerPanel).toBeHidden()
-    })
-
-    //prep a load image
-    await test.step('Add a load image node', async () => {
-      await comfyPage.workflow.loadWorkflow('default')
-      await comfyPage.page.mouse.dblclick(200, 200, { delay: 5 })
-      await comfyPage.searchBox.fillAndSelectFirstNode('Load Image')
-      const loadImage = await comfyPage.vueNodes.getNodeLocator('10')
-      await expect(loadImage).toBeVisible()
-    })
-
-    const imageInput = new WidgetSelectDropdownFixture(
-      comfyPage.appMode.linearWidgets.locator('.lg-node-widget')
-    )
-
-    await test.step('Enter app mode with image input', async () => {
-      await comfyPage.appMode.enterAppModeWithInputs([['10', 'image']])
-      await expect(centerPanel).toBeVisible()
-
-      await expect(imageInput.root).toBeVisible()
-    })
-
-    await test.step('Dragging an image redirects to image input', async () => {
-      const initialImage = await imageInput.selectedItem()
-
-      await comfyPage.dragDrop.dragAndDropExternalResource({
-        fileName: 'workflow.webp',
-        filePath: './browser_tests/assets/workflowInMedia/workflow.webp',
-        preserveNativePropagation: true
-      })
-      comfyFiles.deleteAfterTest({ filename: 'workflow.webp', type: 'input' })
-
-      await expect(imageInput.selection).not.toHaveText(initialImage)
-      await expect(
-        centerPanel,
-        'A file with workflow should not open a new workflow'
-      ).toBeVisible()
-    })
-
-    await test.step('Dragging a url redirects to image input', async () => {
-      const secondImage = await imageInput.selectedItem()
-      await comfyPage.dragDrop.dragAndDropURL('/assets/images/og-image.png', {
-        preserveNativePropagation: true
-      })
-      comfyFiles.deleteAfterTest({
-        filename: 'og-image.png',
-        type: 'input'
-      })
-      await expect(imageInput.selection).not.toHaveText(secondImage)
-    })
-  })
-
-  test('Widget Interaction', async ({ comfyPage }) => {
-    await comfyPage.appMode.enterAppModeWithInputs([
-      ['3', 'seed'],
-      ['3', 'sampler_name'],
-      ['6', 'text']
-    ])
-    const seed = comfyPage.appMode.linearWidgets.getByLabel('seed', {
-      exact: true
-    })
-    const { input, incrementButton, decrementButton } =
-      comfyPage.vueNodes.getInputNumberControls(seed)
-    const initialValue = Number(await input.inputValue())
-
-    await seed.dragTo(incrementButton, { steps: 5 })
-    const intermediateValue = Number(await input.inputValue())
-    expect(intermediateValue).toBeGreaterThan(initialValue)
-
-    await seed.dragTo(decrementButton, { steps: 5 })
-    const endValue = Number(await input.inputValue())
-    expect(endValue).toBeLessThan(intermediateValue)
-
-    const sampler = comfyPage.appMode.linearWidgets.getByLabel('sampler_name', {
-      exact: true
-    })
-    await sampler.click()
-
-    await comfyPage.page.getByRole('searchbox').fill('uni')
-    await comfyPage.page.keyboard.press('ArrowDown')
-    await comfyPage.page.keyboard.press('Enter')
-    await expect(sampler).toHaveText('uni_pc')
-
-    //verify values are consistent with litegraph
-  })
-
-  test.describe('Mobile', { tag: ['@mobile'] }, () => {
-    test('panel navigation', async ({ comfyPage }) => {
-      const { mobile } = comfyPage.appMode
-      await comfyPage.appMode.enterAppModeWithInputs([['3', 'steps']])
-      await expect(mobile.view).toBeVisible()
-      await expect(mobile.navigation).toBeVisible()
-
-      await mobile.navigateTab('assets')
-      await expect(mobile.contentPanel).toHaveAccessibleName('Assets')
-
-      const buttons = await mobile.navigationTabs.all()
-      await buttons[0].dragTo(buttons[2], { steps: 5 })
-      await expect(mobile.contentPanel).toHaveAccessibleName('Outputs')
-
-      await mobile.navigateTab('run')
-      await expect(comfyPage.appMode.linearWidgets).toBeInViewport({ ratio: 1 })
-
-      const steps = comfyPage.page.getByRole('spinbutton')
-      const initialValue = Number(await steps.inputValue())
-      await mobile.tap(
-        comfyPage.page.getByRole('button', { name: 'increment' }),
-        { count: 5 }
-      )
-      await expect(steps).toHaveValue(String(initialValue + 5))
-      await mobile.tap(
-        comfyPage.page.getByRole('button', { name: 'decrement' }),
-        { count: 3 }
-      )
-
-      await expect(steps).toHaveValue(String(initialValue + 2))
-    })
-
-    test('workflow selection', async ({ comfyPage }) => {
-      const widgetNames = ['seed', 'steps', 'denoise', 'cfg']
-      for (const name of widgetNames)
-        await comfyPage.appMode.enterAppModeWithInputs([['3', name]])
-      await expect(comfyPage.appMode.mobile.workflows).toBeVisible()
-
-      const widgets = comfyPage.appMode.linearWidgets
-      await comfyPage.appMode.mobile.navigateTab('run')
-      for (let i = 0; i < widgetNames.length; i++) {
-        await comfyPage.appMode.mobile.switchWorkflow(`(${i + 2})`)
-        await expect(widgets.getByText(widgetNames[i])).toBeVisible()
-      }
-    })
-  })
-})

browser_tests/tests/appModeBuilder.spec.ts

@@ -1,121 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '@e2e/fixtures/ComfyPage'
-
-test.describe('App mode builder selection', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.appMode.enableLinearMode()
-  })
-
-  test('Can independently select inputs of same name', async ({
-    comfyPage
-  }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    const items = comfyPage.appMode.select.inputItems
-
-    await comfyPage.vueNodes.selectNodes(['6', '7'])
-    await comfyPage.command.executeCommand('Comfy.Graph.ConvertToSubgraph')
-
-    await comfyPage.appMode.enterBuilder()
-    await comfyPage.appMode.steps.goToInputs()
-    await expect(items).toHaveCount(0)
-
-    const prompts = comfyPage.vueNodes
-      .getNodeByTitle('New Subgraph')
-      .locator('.lg-node-widget')
-    const count = await prompts.count()
-    for (let i = 0; i < count; i++) {
-      await expect(prompts.nth(i)).toBeVisible()
-      await prompts.nth(i).click()
-      await expect(items).toHaveCount(i + 1)
-    }
-  })
-
-  test('Can select outputs', async ({ comfyPage }) => {
-    await comfyPage.appMode.enterBuilder()
-    await comfyPage.appMode.steps.goToOutputs()
-
-    await comfyPage.nodeOps
-      .getNodeRefById('9')
-      .then((ref) => ref.centerOnNode())
-    const saveImage = await comfyPage.vueNodes.getNodeLocator('9')
-    await saveImage.click()
-
-    const items = comfyPage.appMode.select.inputItems
-    await expect(items).toHaveCount(1)
-  })
-
-  test('Can not select nodes with errors or notes', async ({ comfyPage }) => {
-    //Manually set error state on checkpoint loader
-    //Shouldn't be needed on ci, but has spotty reliability
-    await comfyPage.page.evaluate(() => (graph!.nodes[6].has_errors = true))
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-
-    const items = comfyPage.appMode.select.inputItems
-    await comfyPage.appMode.enterBuilder()
-    await comfyPage.appMode.steps.goToInputs()
-    await expect(items).toHaveCount(0)
-
-    await comfyPage.appMode.select.selectInputWidget(
-      'Load Checkpoint',
-      'ckpt_name'
-    )
-    await expect(items).toHaveCount(0)
-
-    await comfyPage.workflow.loadWorkflow('nodes/note_nodes')
-    await comfyPage.appMode.enterBuilder()
-    await comfyPage.appMode.steps.goToInputs()
-    await expect(items).toHaveCount(0)
-
-    await comfyPage.appMode.select.selectInputWidget('Note', 'text')
-    await comfyPage.appMode.select.selectInputWidget('Markdown Note', 'text')
-
-    await expect(items).toHaveCount(0)
-  })
-
-  test('Marks canvas readOnly', async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting(
-      'Comfy.NodeSearchBoxImpl',
-      'v1 (legacy)'
-    )
-
-    await comfyPage.page.mouse.dblclick(100, 100, { delay: 5 })
-    await expect(
-      comfyPage.searchBox.input,
-      'Canvas is initially editable'
-    ).toHaveCount(1)
-    await comfyPage.page.keyboard.press('Escape')
-
-    await comfyPage.appMode.enterBuilder()
-    await comfyPage.appMode.steps.goToInputs()
-
-    await comfyPage.page.mouse.dblclick(100, 100, { delay: 5 })
-    await expect(
-      comfyPage.searchBox.input,
-      'Entering builder makes the canvas readonly'
-    ).toHaveCount(0)
-
-    await comfyPage.page.keyboard.press('Space')
-    await comfyPage.page.mouse.dblclick(100, 100, { delay: 5 })
-    await expect(
-      comfyPage.searchBox.input,
-      'Canvas remains readonly after pressing space'
-    ).toHaveCount(0)
-
-    const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
-    // oxlint-disable-next-line playwright/no-force-option -- Node container has conditional pointer-events:none that blocks actionability
-    await ksampler.header.dblclick({ force: true })
-    await expect(
-      ksampler.titleEditor.input,
-      'Double clicking node titles will not initiate a rename'
-    ).toBeHidden()
-
-    await comfyPage.page.keyboard.press('Escape')
-    await comfyPage.page.mouse.dblclick(100, 100, { delay: 5 })
-    await expect(
-      comfyPage.searchBox.input,
-      'Canvas is no longer readonly after exiting'
-    ).toHaveCount(1)
-  })
-})

browser_tests/tests/assetHelper.spec.ts

@@ -133,29 +133,6 @@ test.describe('AssetHelper', () => {
       expect(data.assets[0].id).toBe(STABLE_CHECKPOINT.id)
     })
 
-    test('GET /assets filters by exclude_tags', async ({
-      comfyPage,
-      assetApi
-    }) => {
-      assetApi.configure(
-        withAsset(STABLE_INPUT_IMAGE),
-        withAsset({
-          ...STABLE_INPUT_IMAGE,
-          id: 'missing-input',
-          tags: ['input', 'missing']
-        })
-      )
-      await assetApi.mock()
-
-      const { body } = await assetApi.fetch(
-        `${comfyPage.url}/api/assets?include_tags=input,&exclude_tags= missing,`
-      )
-      const data = body as { assets: Array<{ id: string }> }
-      expect(data.assets.map((asset) => asset.id)).toEqual([
-        STABLE_INPUT_IMAGE.id
-      ])
-    })
-
     test('GET /assets/:id returns single asset or 404', async ({
       comfyPage,
       assetApi

browser_tests/tests/defaultKeybindings.spec.ts

@@ -229,9 +229,9 @@ test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
       // The dialog appearing proves the keybinding was intercepted by the app.
       await comfyPage.keyboard.press('Control+s')
 
-      // The Save As dialog should appear
-      const saveDialog = comfyPage.page.getByRole('dialog')
-      await expect(saveDialog).toBeVisible()
+      // The Save As dialog should appear (p-dialog overlay)
+      const dialogOverlay = comfyPage.page.locator('.p-dialog-mask')
+      await expect(dialogOverlay).toBeVisible()
 
       // Dismiss the dialog
       await comfyPage.keyboard.press('Escape')

browser_tests/tests/dialogs/publishDialog.spec.ts

@@ -16,9 +16,9 @@ async function saveAndOpenPublishDialog(
   workflowName: string
 ): Promise<void> {
   await comfyPage.menu.topbar.saveWorkflow(workflowName)
-  const overwriteDialog = comfyPage.page
-    .getByRole('dialog')
-    .filter({ hasText: 'Overwrite' })
+  const overwriteDialog = comfyPage.page.locator(
+    '.p-dialog:has-text("Overwrite")'
+  )
   // Bounded wait: point-in-time isVisible() can miss dialogs that open
   // slightly after saveWorkflow() resolves.
   try {

browser_tests/tests/keybindingPanel.spec.ts

@@ -1,548 +0,0 @@
-import type { Locator, Page } from '@playwright/test'
-import { expect } from '@playwright/test'
-
-import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
-import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
-
-const MULTI_BINDING_COMMAND = 'Comfy.Canvas.DeleteSelectedItems'
-const SINGLE_BINDING_COMMAND = 'Comfy.SaveWorkflow'
-const NO_BINDING_COMMAND = 'TestCommand.KeybindingPanelE2E.NoBinding'
-
-async function searchKeybindings(page: Page, query: string) {
-  await getKeybindingSearchInput(page).fill(query)
-}
-
-async function clearSearch(page: Page) {
-  await getKeybindingSearchInput(page).clear()
-}
-
-function getKeybindingSearchInput(page: Page): Locator {
-  return page.getByPlaceholder('Search Keybindings...')
-}
-
-function getCommandRow(page: Page, commandId: string): Locator {
-  return page
-    .locator('.keybinding-panel tr')
-    .filter({ has: page.locator(`[title="${commandId}"]`) })
-}
-
-function getExpansionContent(page: Page, commandId: string): Locator {
-  // PrimeVue renders the expansion row as the next sibling <tr> of the
-  // expanded row. Scoping by sibling avoids matching unrelated expanded rows.
-  return getCommandRow(page, commandId)
-    .locator('xpath=following-sibling::tr[1]')
-    .getByTestId('keybinding-expansion-content')
-}
-
-async function openContextMenu(page: Page, commandId: string) {
-  const row = getCommandRow(page, commandId)
-  await row.locator(`[title="${commandId}"]`).click({ button: 'right' })
-  await expect(
-    page.getByRole('menuitem', { name: /Change keybinding/i })
-  ).toBeVisible()
-}
-
-function getKeybindingInput(page: Page): Locator {
-  return getEditKeybindingDialog(page).locator('input[autofocus]')
-}
-
-function getEditKeybindingDialog(page: Page): Locator {
-  return page.getByRole('dialog', { name: /Modify keybinding/i })
-}
-
-function getRemoveAllKeybindingsDialog(page: Page): Locator {
-  return page.getByRole('dialog', { name: /Remove all keybindings/i })
-}
-
-function getResetAllKeybindingsDialog(page: Page): Locator {
-  return page.getByRole('dialog', { name: /Reset all keybindings/i })
-}
-
-async function pressComboOnInput(page: Page, combo: string) {
-  const input = getKeybindingInput(page)
-  await expect(input).toBeFocused()
-  await input.press(combo)
-}
-
-async function saveAndCloseKeybindingDialog(page: Page) {
-  const dialog = getEditKeybindingDialog(page)
-  await dialog.getByRole('button', { name: /Save/i }).click()
-  await expect(dialog).toBeHidden()
-}
-
-async function cancelAndCloseDialog(page: Page) {
-  const dialog = getEditKeybindingDialog(page)
-  await dialog.getByRole('button', { name: /Cancel/i }).click()
-  await expect(dialog).toBeHidden()
-}
-
-async function addKeybindingToRow(page: Page, row: Locator, combo: string) {
-  await row.getByRole('button', { name: /Add new keybinding/i }).click()
-  await pressComboOnInput(page, combo)
-  await saveAndCloseKeybindingDialog(page)
-}
-
-test.beforeEach(async ({ comfyPage }) => {
-  await registerNoBindingCommand(comfyPage)
-  await comfyPage.settingDialog.open()
-  await comfyPage.settingDialog.category('Keybinding').click()
-})
-
-test.afterEach(async ({ comfyPage }) => {
-  await comfyPage.settings.setSetting('Comfy.Keybinding.NewBindings', [])
-  await comfyPage.settings.setSetting('Comfy.Keybinding.UnsetBindings', [])
-})
-
-async function registerNoBindingCommand(comfyPage: ComfyPage) {
-  await comfyPage.page.evaluate((commandId) => {
-    const app = window.app!
-    app.registerExtension({
-      name: 'TestExtension.KeybindingPanelE2E',
-      commands: [{ id: commandId, function: () => {} }]
-    })
-  }, NO_BINDING_COMMAND)
-}
-
-test.describe('Keybinding Panel', { tag: '@keyboard' }, () => {
-  test.describe('Row Expansion', () => {
-    test('Click on row with 2+ keybindings toggles expansion', async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, MULTI_BINDING_COMMAND)
-      const row = getCommandRow(page, MULTI_BINDING_COMMAND)
-      await expect(row).toBeVisible()
-
-      await row.locator(`[title="${MULTI_BINDING_COMMAND}"]`).click()
-
-      const expansionContent = getExpansionContent(page, MULTI_BINDING_COMMAND)
-      await expect(expansionContent).toBeVisible()
-
-      await row.locator(`[title="${MULTI_BINDING_COMMAND}"]`).click()
-      await expect(expansionContent).toBeHidden()
-    })
-
-    test('Click on row with 1 keybinding does not expand', async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, SINGLE_BINDING_COMMAND)
-      const row = getCommandRow(page, SINGLE_BINDING_COMMAND)
-      await expect(row).toBeVisible()
-
-      await row.locator(`[title="${SINGLE_BINDING_COMMAND}"]`).click()
-
-      const expansionContent = getExpansionContent(page, SINGLE_BINDING_COMMAND)
-      await expect(expansionContent).toBeHidden()
-    })
-  })
-
-  test.describe('Double-Click', () => {
-    test('Double-click row with 0 keybindings opens Add dialog', async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, NO_BINDING_COMMAND)
-      const row = getCommandRow(page, NO_BINDING_COMMAND)
-      await expect(row).toBeVisible()
-
-      await row.locator(`[title="${NO_BINDING_COMMAND}"]`).dblclick()
-
-      const input = getKeybindingInput(page)
-      await expect(input).toBeVisible()
-
-      await cancelAndCloseDialog(page)
-    })
-
-    test('Double-click row with 1 keybinding opens Edit dialog', async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, SINGLE_BINDING_COMMAND)
-      const row = getCommandRow(page, SINGLE_BINDING_COMMAND)
-      await expect(row).toBeVisible()
-
-      await row.locator(`[title="${SINGLE_BINDING_COMMAND}"]`).dblclick()
-
-      const input = getKeybindingInput(page)
-      await expect(input).toBeVisible()
-
-      await cancelAndCloseDialog(page)
-    })
-  })
-
-  test.describe('Context Menu', () => {
-    test('Right-click row shows context menu with correct items', async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, SINGLE_BINDING_COMMAND)
-      await openContextMenu(page, SINGLE_BINDING_COMMAND)
-
-      const changeItem = page.getByRole('menuitem', {
-        name: /Change keybinding/i
-      })
-      const addItem = page.getByRole('menuitem', {
-        name: /Add new keybinding/i
-      })
-      const resetItem = page.getByRole('menuitem', {
-        name: /Reset to default/i
-      })
-      const removeItem = page.getByRole('menuitem', {
-        name: /Remove keybinding/i
-      })
-
-      await expect(changeItem).toBeVisible()
-      await expect(addItem).toBeVisible()
-      await expect(resetItem).toBeVisible()
-      await expect(removeItem).toBeVisible()
-
-      await page.keyboard.press('Escape')
-    })
-
-    test("Context menu 'Add new keybinding' opens add dialog", async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, SINGLE_BINDING_COMMAND)
-      await openContextMenu(page, SINGLE_BINDING_COMMAND)
-
-      await page.getByRole('menuitem', { name: /Add new keybinding/i }).click()
-
-      const input = getKeybindingInput(page)
-      await expect(input).toBeVisible()
-
-      await cancelAndCloseDialog(page)
-    })
-
-    test("Context menu 'Change keybinding' on single-binding command opens edit dialog", async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, SINGLE_BINDING_COMMAND)
-      await openContextMenu(page, SINGLE_BINDING_COMMAND)
-
-      await page.getByRole('menuitem', { name: /Change keybinding/i }).click()
-
-      const input = getKeybindingInput(page)
-      await expect(input).toBeVisible()
-
-      await cancelAndCloseDialog(page)
-    })
-
-    test("Context menu 'Change keybinding' on multi-binding command expands row", async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, MULTI_BINDING_COMMAND)
-
-      const expansionContent = getExpansionContent(page, MULTI_BINDING_COMMAND)
-      await expect(expansionContent).toBeHidden()
-
-      await openContextMenu(page, MULTI_BINDING_COMMAND)
-
-      await page.getByRole('menuitem', { name: /Change keybinding/i }).click()
-
-      await expect(expansionContent).toBeVisible()
-    })
-
-    test("Context menu 'Remove keybinding' after adding second binding shows confirm dialog", async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, SINGLE_BINDING_COMMAND)
-      const row = getCommandRow(page, SINGLE_BINDING_COMMAND)
-
-      await addKeybindingToRow(page, row, 'Control+Shift+F9')
-
-      await openContextMenu(page, SINGLE_BINDING_COMMAND)
-      await page.getByRole('menuitem', { name: /Remove keybinding/i }).click()
-
-      const confirmDialog = getRemoveAllKeybindingsDialog(page)
-      await expect(confirmDialog).toBeVisible()
-      await confirmDialog.getByRole('button', { name: /Remove all/i }).click()
-
-      await expect(row.locator('td').nth(1)).toContainText('-')
-    })
-
-    test("Context menu 'Reset to default' resets modified command", async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, SINGLE_BINDING_COMMAND)
-      const row = getCommandRow(page, SINGLE_BINDING_COMMAND)
-
-      await addKeybindingToRow(page, row, 'Control+Shift+F10')
-
-      await openContextMenu(page, SINGLE_BINDING_COMMAND)
-      await page.getByRole('menuitem', { name: /Reset to default/i }).click()
-
-      await expect(row.getByRole('button', { name: /Reset/i })).toBeDisabled()
-    })
-
-    test('Context menu items disabled when no keybindings', async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, NO_BINDING_COMMAND)
-      await openContextMenu(page, NO_BINDING_COMMAND)
-
-      const changeItem = page.getByRole('menuitem', {
-        name: /Change keybinding/i
-      })
-      const removeItem = page.getByRole('menuitem', {
-        name: /Remove keybinding/i
-      })
-
-      await expect(changeItem).toHaveAttribute('data-disabled', '')
-      await expect(removeItem).toHaveAttribute('data-disabled', '')
-
-      await page.keyboard.press('Escape')
-    })
-  })
-
-  test.describe('Action Buttons', () => {
-    test('Edit button opens edit dialog for single-binding command', async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, SINGLE_BINDING_COMMAND)
-      const row = getCommandRow(page, SINGLE_BINDING_COMMAND)
-
-      const editButton = row.getByRole('button', { name: /^Edit$/i })
-      await expect(editButton).toBeVisible()
-      await editButton.click()
-
-      const input = getKeybindingInput(page)
-      await expect(input).toBeVisible()
-
-      await cancelAndCloseDialog(page)
-    })
-
-    test('Add button opens add dialog', async ({ comfyPage }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, SINGLE_BINDING_COMMAND)
-      const row = getCommandRow(page, SINGLE_BINDING_COMMAND)
-
-      await row.getByRole('button', { name: /Add new keybinding/i }).click()
-
-      const input = getKeybindingInput(page)
-      await expect(input).toBeVisible()
-
-      await cancelAndCloseDialog(page)
-    })
-
-    test('Reset button is disabled for unmodified commands', async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, SINGLE_BINDING_COMMAND)
-      const row = getCommandRow(page, SINGLE_BINDING_COMMAND)
-
-      const resetButton = row.getByRole('button', { name: /Reset/i })
-      await expect(resetButton).toBeDisabled()
-    })
-
-    test('Reset button resets modified keybinding', async ({ comfyPage }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, SINGLE_BINDING_COMMAND)
-      const row = getCommandRow(page, SINGLE_BINDING_COMMAND)
-
-      await addKeybindingToRow(page, row, 'Control+Shift+F11')
-
-      const resetButton = row.getByRole('button', { name: /Reset/i })
-      await expect(resetButton).toBeEnabled()
-
-      await resetButton.click()
-
-      await expect(resetButton).toBeDisabled()
-    })
-
-    test('Delete button is disabled for commands with 0 keybindings', async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, NO_BINDING_COMMAND)
-      const row = getCommandRow(page, NO_BINDING_COMMAND)
-
-      const deleteButton = row.getByRole('button', { name: /Delete/i })
-      await expect(deleteButton).toBeDisabled()
-    })
-
-    test('Delete button removes single keybinding directly', async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, NO_BINDING_COMMAND)
-      const row = getCommandRow(page, NO_BINDING_COMMAND)
-
-      await addKeybindingToRow(page, row, 'Control+Shift+F12')
-
-      const deleteButton = row.getByRole('button', { name: /Delete/i })
-      await expect(deleteButton).toBeEnabled()
-      await deleteButton.click()
-
-      await expect(row.locator('td').nth(1)).toContainText('-')
-    })
-
-    test('Delete button on command with 2+ keybindings shows confirm dialog', async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, MULTI_BINDING_COMMAND)
-      const row = getCommandRow(page, MULTI_BINDING_COMMAND)
-
-      const deleteButton = row.getByRole('button', { name: /Delete/i })
-      await deleteButton.click()
-
-      const confirmDialog = getRemoveAllKeybindingsDialog(page)
-      await expect(confirmDialog).toBeVisible()
-
-      await confirmDialog.getByRole('button', { name: /Cancel/i }).click()
-      await expect(confirmDialog).toBeHidden()
-      await expect(row.locator('td').nth(1)).not.toContainText('-')
-    })
-  })
-
-  test.describe('Expanded Row Actions', () => {
-    test('Edit button in expanded row opens edit dialog for that binding', async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, MULTI_BINDING_COMMAND)
-
-      await page.locator(`[title="${MULTI_BINDING_COMMAND}"]`).click()
-      const expansionContent = getExpansionContent(page, MULTI_BINDING_COMMAND)
-      await expect(expansionContent).toBeVisible()
-
-      const firstBindingRow = expansionContent
-        .getByTestId('keybinding-expansion-binding')
-        .first()
-      await firstBindingRow.getByRole('button', { name: /^Edit$/i }).click()
-
-      const input = getKeybindingInput(page)
-      await expect(input).toBeVisible()
-
-      await cancelAndCloseDialog(page)
-    })
-
-    test('Delete button in expanded row removes that binding and collapses', async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, MULTI_BINDING_COMMAND)
-
-      await page.locator(`[title="${MULTI_BINDING_COMMAND}"]`).click()
-      const expansionContent = getExpansionContent(page, MULTI_BINDING_COMMAND)
-      await expect(expansionContent).toBeVisible()
-
-      const bindingRows = expansionContent.getByTestId(
-        'keybinding-expansion-binding'
-      )
-      await expect
-        .poll(() => bindingRows.count(), {
-          message: 'Expected at least 2 bindings'
-        })
-        .toBeGreaterThanOrEqual(2)
-      const initialBindingCount = await bindingRows.count()
-
-      await bindingRows
-        .first()
-        .getByRole('button', { name: /Remove keybinding/i })
-        .click()
-
-      if (initialBindingCount === 2) {
-        // Expansion auto-collapses when bindings drop below 2
-        await expect(expansionContent).toBeHidden()
-      } else {
-        await expect(bindingRows).toHaveCount(initialBindingCount - 1)
-      }
-    })
-  })
-
-  test.describe('Reset All', () => {
-    test('Reset All button shows confirmation and resets on confirm', async ({
-      comfyPage
-    }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, SINGLE_BINDING_COMMAND)
-      const row = getCommandRow(page, SINGLE_BINDING_COMMAND)
-      await addKeybindingToRow(page, row, 'Control+Shift+F8')
-
-      await expect(row.getByRole('button', { name: /Reset/i })).toBeEnabled()
-
-      await clearSearch(page)
-
-      const resetAllButton = page
-        .locator('.keybinding-panel')
-        .getByRole('button', { name: /Reset All/i })
-      await resetAllButton.click()
-
-      const confirmDialog = getResetAllKeybindingsDialog(page)
-      await expect(confirmDialog).toBeVisible()
-      await expect(confirmDialog).toContainText(/Reset all keybindings/i)
-
-      await confirmDialog.getByRole('button', { name: /Reset All/i }).click()
-
-      await expect(comfyPage.toast.visibleToasts).toHaveCount(1)
-
-      await searchKeybindings(page, SINGLE_BINDING_COMMAND)
-      const rowAfterReset = getCommandRow(page, SINGLE_BINDING_COMMAND)
-      await expect(
-        rowAfterReset.getByRole('button', { name: /Reset/i })
-      ).toBeDisabled()
-    })
-
-    test('Reset All confirmation can be cancelled', async ({ comfyPage }) => {
-      const { page } = comfyPage
-
-      const resetAllButton = page
-        .locator('.keybinding-panel')
-        .getByRole('button', { name: /Reset All/i })
-      await resetAllButton.click()
-
-      const confirmDialog = getResetAllKeybindingsDialog(page)
-      await expect(confirmDialog).toBeVisible()
-      await confirmDialog.getByRole('button', { name: /Cancel/i }).click()
-
-      await expect(confirmDialog).toBeHidden()
-    })
-  })
-
-  test.describe('Search Filter', () => {
-    test('Typing in search clears expanded rows', async ({ comfyPage }) => {
-      const { page } = comfyPage
-
-      await searchKeybindings(page, MULTI_BINDING_COMMAND)
-
-      await page.locator(`[title="${MULTI_BINDING_COMMAND}"]`).click()
-      const expansionContent = getExpansionContent(page, MULTI_BINDING_COMMAND)
-      await expect(expansionContent).toBeVisible()
-
-      // Changing the filter triggers watch(filters, ...) which clears expansion
-      await searchKeybindings(page, MULTI_BINDING_COMMAND + ' ')
-      await expect(expansionContent).toBeHidden()
-    })
-  })
-})

browser_tests/tests/metadataWorkflowImport.spec.ts

@@ -1,62 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '@e2e/fixtures/ComfyPage'
-import { metadataFixturePath } from '@e2e/fixtures/utils/paths'
-
-type MetadataFixture = {
-  fileName: string
-  parser: string
-}
-
-// Each fixture embeds the same single-KSampler workflow (see
-// scripts/generate-embedded-metadata-test-files.py), exercising a different
-// parser in src/scripts/metadata/. Dropping the file should import that
-// workflow.
-const FIXTURES: readonly MetadataFixture[] = [
-  { fileName: 'with_metadata.png', parser: 'png' },
-  { fileName: 'with_metadata.avif', parser: 'avif' },
-  { fileName: 'with_metadata.webp', parser: 'webp' },
-  { fileName: 'with_metadata_exif_prefix.webp', parser: 'webp (exif prefix)' },
-  { fileName: 'with_metadata.flac', parser: 'flac' },
-  { fileName: 'with_metadata.mp3', parser: 'mp3' },
-  { fileName: 'with_metadata.opus', parser: 'ogg' },
-  { fileName: 'with_metadata.mp4', parser: 'isobmff' },
-  { fileName: 'with_metadata.webm', parser: 'ebml (webm)' }
-] as const
-
-test.describe(
-  'Metadata drop-to-load workflow import',
-  { tag: ['@workflow'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.nodeOps.clearGraph()
-      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(0)
-    })
-
-    for (const { fileName, parser } of FIXTURES) {
-      test(`loads embedded workflow 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 fixture'
-          ).toHaveLength(1)
-        })
-      })
-    }
-  }
-)

browser_tests/tests/nodeBadge.spec.ts

@@ -8,9 +8,6 @@ test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
 })
 
-const DEPRECATED_NODE_TYPE = 'ImageBatch'
-const API_NODE_TYPE = 'FluxProUltraImageNode'
-
 test.describe('Node Badge', { tag: ['@screenshot', '@smoke', '@node'] }, () => {
   test('Can add badge', async ({ comfyPage }) => {
     await comfyPage.page.evaluate(() => {
@@ -144,73 +141,3 @@ test.describe(
     })
   }
 )
-
-for (const vueEnabled of [false, true] as const) {
-  const renderer = vueEnabled ? 'vue' : 'classic'
-  const tag = vueEnabled
-    ? ['@vue-nodes', '@screenshot', '@node']
-    : ['@screenshot', '@node']
-
-  test.describe(`Node lifecycle badge (${renderer})`, { tag }, () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.Graph.CanvasInfo', false)
-    })
-
-    for (const mode of [NodeBadgeMode.ShowAll, NodeBadgeMode.None] as const) {
-      test(`renders deprecated node with mode=${mode}`, async ({
-        comfyPage
-      }) => {
-        await comfyPage.settings.setSetting(
-          'Comfy.NodeBadge.NodeLifeCycleBadgeMode',
-          mode
-        )
-        await comfyPage.nodeOps.clearGraph()
-        await comfyPage.nodeOps.addNode(DEPRECATED_NODE_TYPE, undefined, {
-          x: 100,
-          y: 100
-        })
-        await comfyPage.canvasOps.resetView()
-        await expect(comfyPage.canvas).toHaveScreenshot(
-          `node-lifecycle-${mode}-${renderer}.png`
-        )
-      })
-    }
-  })
-
-  test.describe(`API pricing badge (${renderer})`, { tag }, () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.Graph.CanvasInfo', false)
-      await comfyPage.page.evaluate((type) => {
-        const registered = window.LiteGraph!.registered_node_types[type] as {
-          nodeData?: { price_badge?: unknown }
-        }
-        if (!registered?.nodeData) throw new Error(`No nodeData for ${type}`)
-        registered.nodeData.price_badge = {
-          engine: 'jsonata',
-          expr: "{'type': 'text', 'text': '99.9 credits/Run'}",
-          depends_on: { widgets: [], inputs: [], input_groups: [] }
-        }
-      }, API_NODE_TYPE)
-    })
-
-    for (const enabled of [true, false] as const) {
-      test(`renders api node with showApiPricing=${enabled}`, async ({
-        comfyPage
-      }) => {
-        await comfyPage.settings.setSetting(
-          'Comfy.NodeBadge.ShowApiPricing',
-          enabled
-        )
-        await comfyPage.nodeOps.clearGraph()
-        await comfyPage.nodeOps.addNode(API_NODE_TYPE, undefined, {
-          x: 100,
-          y: 100
-        })
-        await comfyPage.canvasOps.resetView()
-        await expect(comfyPage.canvas).toHaveScreenshot(
-          `api-pricing-${enabled ? 'on' : 'off'}-${renderer}.png`
-        )
-      })
-    }
-  })
-}

browser_tests/tests/nodeContextMenuOverflow.spec.ts

@@ -51,7 +51,7 @@ test.describe(
       return menu
     }
 
-    test('last menu item "Remove" is reachable via scroll', async ({
+    test('last menu item "Delete" is reachable via scroll', async ({
       comfyPage
     }) => {
       const menu = await openMoreOptions(comfyPage)
@@ -67,26 +67,26 @@ test.describe(
         )
         .toBe(true)
 
-      // "Remove" is the last item in the More Options menu.
+      // "Delete" is the last item in the More Options menu.
       // It must become reachable by scrolling the bounded menu list.
-      const removeItem = menu.getByText('Remove', { exact: true })
+      const deleteItem = menu.getByText('Delete', { exact: true })
       const didScroll = await rootList.evaluate((el) => {
         const previousScrollTop = el.scrollTop
         el.scrollTo({ top: el.scrollHeight })
         return el.scrollTop > previousScrollTop
       })
       expect(didScroll).toBe(true)
-      await expect(removeItem).toBeVisible()
+      await expect(deleteItem).toBeVisible()
     })
 
-    test('last menu item "Remove" is clickable and removes the node', async ({
+    test('last menu item "Delete" is clickable and removes the node', async ({
       comfyPage
     }) => {
       const menu = await openMoreOptions(comfyPage)
 
-      const removeItem = menu.getByText('Remove', { exact: true })
-      await removeItem.scrollIntoViewIfNeeded()
-      await removeItem.click()
+      const deleteItem = menu.getByText('Delete', { exact: true })
+      await deleteItem.scrollIntoViewIfNeeded()
+      await deleteItem.click()
       await comfyPage.nextFrame()
 
       // The node should be removed from the graph

browser_tests/tests/painter.spec.ts

@@ -692,27 +692,19 @@ test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
     })
   })
 
-  test('Controls stack label above widget in compact mode', async ({
+  test('Controls collapse to single column in compact mode', async ({
     comfyPage
   }) => {
     const painterWidget = comfyPage.vueNodes
       .getNodeLocator('1')
       .locator('.widget-expands')
     const toolLabel = painterWidget.getByText('Tool', { exact: true })
-    const brushButton = painterWidget.getByText('Brush', { exact: true })
 
     await expect(
       toolLabel,
-      'tool label should be visible in wide layout'
+      'tool label should be visible in two-column layout'
     ).toBeVisible()
 
-    const wideLabelBox = await toolLabel.boundingBox()
-    const wideBrushBox = await brushButton.boundingBox()
-    expect(
-      wideLabelBox && wideBrushBox && wideLabelBox.x < wideBrushBox.x,
-      'label should sit to the left of the brush button in wide layout'
-    ).toBe(true)
-
     await comfyPage.page.evaluate(() => {
       const graph = window.graph as TestGraphAccess | undefined
       const node = graph?._nodes_by_id?.['1']
@@ -724,22 +716,8 @@ test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
 
     await expect(
       toolLabel,
-      'tool label should remain visible in compact layout'
-    ).toBeVisible()
-
-    await expect
-      .poll(
-        async () => {
-          const labelBox = await toolLabel.boundingBox()
-          const brushBox = await brushButton.boundingBox()
-          if (!labelBox || !brushBox) return false
-          return labelBox.y + labelBox.height <= brushBox.y
-        },
-        {
-          message: 'label should stack above the brush button in compact layout'
-        }
-      )
-      .toBe(true)
+      'tool label should hide in compact single-column layout'
+    ).toBeHidden()
   })
 
   test('Multiple sequential strokes at different positions all accumulate', async ({

browser_tests/tests/performance.spec.ts

@@ -351,45 +351,6 @@ test.describe('Performance', { tag: ['@perf'] }, () => {
     })
   })
 
-  test(
-    'subgraph transition (enter and exit)',
-    { tag: ['@vue-nodes'] },
-    async ({ comfyPage }, testInfo) => {
-      // Heaviest perf test: loads an 80-node subgraph and pays ~30s/repeat.
-      // The signal is dominated by N=80 mount cost, so a single sample per
-      // CI invocation is sufficient — early-return on subsequent repeats.
-      if (testInfo.repeatEachIndex > 0) return
-
-      // Load workflow with a subgraph containing 80 interior nodes.
-      // Entering the subgraph unmounts root nodes and mounts all 80 interior
-      // nodes synchronously — this is the bottleneck we're measuring.
-      await comfyPage.workflow.loadWorkflow('subgraphs/large-subgraph-80-nodes')
-
-      await comfyPage.idleFrames(30)
-
-      await comfyPage.vueNodes.enterSubgraph()
-      await comfyPage.vueNodes.waitForNodes(80)
-      await comfyPage.idleFrames(30)
-
-      // Exit back to root graph before measuring a fresh enter/exit cycle
-      await comfyPage.subgraph.exitViaBreadcrumb()
-      await comfyPage.idleFrames(10)
-
-      // Start measuring the enter transition
-      await comfyPage.perf.startMeasuring()
-
-      await comfyPage.vueNodes.enterSubgraph()
-      await comfyPage.vueNodes.waitForNodes(80)
-      await comfyPage.idleFrames(30)
-
-      const m = await comfyPage.perf.stopMeasuring('subgraph-transition-enter')
-      recordMeasurement(m)
-      console.log(
-        `Subgraph enter (80 nodes): ${m.taskDurationMs.toFixed(0)}ms task, ${m.layouts} layouts, TBT=${m.totalBlockingTimeMs.toFixed(0)}ms`
-      )
-    }
-  )
-
   test('workflow execution', async ({ comfyPage }) => {
     // Uses lightweight PrimitiveString → PreviewAny workflow (no GPU needed)
     await comfyPage.workflow.loadWorkflow('execution/partial_execution')

browser_tests/tests/previewAsText.spec.ts

@@ -1,42 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-test.describe('Preview as Text node', () => {
-  test('does not include preview widget values in the API prompt', async ({
-    comfyPage
-  }) => {
-    await comfyPage.page.evaluate(() => {
-      const node = window.LiteGraph!.createNode('PreviewAny')!
-      node.pos = [500, 200]
-      window.app!.graph.add(node)
-    })
-
-    // Simulate a previous execution: backend returned text and the frontend
-    // populated the preview widget values. The next prompt submission must
-    // NOT echo those values back as inputs (which would change the cache
-    // signature and trigger a redundant re-execution).
-    await comfyPage.page.evaluate(() => {
-      const node = window.app!.graph.nodes.find((n) => n.type === 'PreviewAny')!
-      for (const widget of node.widgets ?? []) {
-        if (widget.name?.startsWith('preview_')) {
-          widget.value = 'rendered preview content from previous execution'
-        }
-      }
-    })
-
-    const apiWorkflow = await comfyPage.workflow.getExportedWorkflow({
-      api: true
-    })
-
-    const previewEntry = Object.values(apiWorkflow).find(
-      (n) => n.class_type === 'PreviewAny'
-    )
-    expect(previewEntry).toBeDefined()
-
-    expect(previewEntry!.inputs).not.toHaveProperty('preview_markdown')
-    expect(previewEntry!.inputs).not.toHaveProperty('preview_text')
-    expect(previewEntry!.inputs).not.toHaveProperty('previewMode')
-  })
-})

browser_tests/tests/queueButtonModes.spec.ts

@@ -1,63 +0,0 @@
-import { expect } from '@playwright/test'
-
-import type { PromptResponse } from '@/schemas/apiSchema'
-
-import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
-
-const queueModeLabels = ['Run', 'Run (On Change)', 'Run (Instant)']
-const runOnChangeLabel = queueModeLabels[1]
-
-test.describe('Queue button modes', { tag: '@ui' }, () => {
-  test('Run button is visible in topbar', async ({ comfyPage }) => {
-    await expect(comfyPage.actionbar.queueButton.primaryButton).toBeVisible()
-  })
-
-  test('Queue mode trigger menu is visible', async ({ comfyPage }) => {
-    await expect(comfyPage.actionbar.queueButton.dropdownButton).toBeVisible()
-  })
-
-  test('Clicking queue mode trigger opens mode menu', async ({ comfyPage }) => {
-    const options = await comfyPage.actionbar.queueButton.openOptions()
-
-    await expect(options.menu).toBeVisible()
-  })
-
-  test('Queue mode menu shows available modes', async ({ comfyPage }) => {
-    const options = await comfyPage.actionbar.queueButton.openOptions()
-
-    await expect(options.menu).toBeVisible()
-    await expect(options.modeItems).toHaveText(queueModeLabels)
-  })
-
-  test('Selecting a non-default mode updates the Run button label', async ({
-    comfyPage
-  }) => {
-    const queueButton = comfyPage.actionbar.queueButton
-    const options = await queueButton.openOptions()
-
-    await expect(options.menu).toBeVisible()
-    await options.selectMode(runOnChangeLabel)
-
-    await expect(queueButton.primaryButton).toContainText(runOnChangeLabel)
-  })
-
-  test('Run button sends prompt when clicked', async ({ comfyPage }) => {
-    let promptQueued = false
-    const mockResponse: PromptResponse = {
-      prompt_id: 'test-id',
-      node_errors: {},
-      error: ''
-    }
-    await comfyPage.page.route('**/api/prompt', async (route) => {
-      promptQueued = true
-      await route.fulfill({
-        status: 200,
-        body: JSON.stringify(mockResponse)
-      })
-    })
-
-    await comfyPage.actionbar.queueButton.primaryButton.click()
-
-    await expect.poll(() => promptQueued).toBe(true)
-  })
-})

browser_tests/tests/saveImageAndWebp.spec.ts

@@ -16,7 +16,7 @@ test.describe(
       await comfyPage.runButton.click()
 
       const saveImageNode = comfyPage.vueNodes.getNodeByTitle('Save Image')
-      const saveWebmNode = comfyPage.vueNodes.getNodeByTitle('Save WEBM')
+      const saveWebmNode = comfyPage.vueNodes.getNodeByTitle('SaveWEBM')
 
       // Wait for SaveImage to render an img inside .image-preview
       await expect(saveImageNode.locator('.image-preview img')).toBeVisible({

browser_tests/tests/subgraph/subgraphPromotion.spec.ts

@@ -558,52 +558,5 @@ test.describe(
           .toBe(0)
       })
     })
-
-    test.fail(
-      'Promoted text widget is removed when source node is deleted inside the subgraph',
-      { tag: '@vue-nodes' },
-      async ({ comfyPage }) => {
-        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
-        const clipFixture = await comfyPage.vueNodes.getFixtureByTitle(
-          'CLIP Text Encode (Prompt)'
-        )
-        await comfyPage.contextMenu.openForVueNode(clipFixture.header)
-        await comfyPage.contextMenu.clickMenuItemExact('Convert to Subgraph')
-
-        const subgraphNode = comfyPage.vueNodes
-          .getNodeByTitle('New Subgraph')
-          .first()
-        await expect(subgraphNode).toBeVisible()
-
-        const subgraphNodeId =
-          await comfyPage.vueNodes.getNodeIdByTitle('New Subgraph')
-
-        await expect
-          .poll(() => getPromotedWidgetNames(comfyPage, subgraphNodeId))
-          .toContain('text')
-        await expect(
-          subgraphNode.getByTestId(TestIds.widgets.domWidgetTextarea)
-        ).toBeVisible()
-
-        await comfyPage.vueNodes.enterSubgraph(subgraphNodeId)
-        await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(true)
-        await comfyPage.vueNodes.waitForNodes()
-
-        const interiorClip = await comfyPage.vueNodes.getFixtureByTitle(
-          'CLIP Text Encode (Prompt)'
-        )
-        await interiorClip.delete()
-
-        await comfyPage.subgraph.exitViaBreadcrumb()
-
-        const subgraphNodeAfter =
-          comfyPage.vueNodes.getNodeLocator(subgraphNodeId)
-        await expect(subgraphNodeAfter).toBeVisible()
-        await expect(
-          subgraphNodeAfter.getByTestId(TestIds.widgets.domWidgetTextarea)
-        ).toBeHidden()
-      }
-    )
   }
 )

browser_tests/tests/topbar/workflowTabs.spec.ts

@@ -1,5 +1,4 @@
 import { expect } from '@playwright/test'
-import type { Locator, Page } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 
@@ -189,79 +188,4 @@ test.describe('Workflow tabs', () => {
     await topbar.closeWorkflowTab('Unsaved Workflow (2)')
     await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
   })
-
-  test.describe('Closing a modified workflow tab (FE-419)', () => {
-    async function modifyActiveWorkflow(page: Page, activeTab: Locator) {
-      await page.evaluate(() => {
-        const graph = window.app?.graph
-        const node = window.LiteGraph?.createNode('Note')
-        if (graph && node) graph.add(node)
-      })
-      await expect(
-        activeTab.getByTestId('workflow-dirty-indicator')
-      ).toHaveCount(1)
-    }
-
-    test('shows "Close anyway" label and no Cancel button on dirtyClose dialog', async ({
-      comfyPage
-    }) => {
-      const topbar = comfyPage.menu.topbar
-
-      await topbar.newWorkflowButton.click()
-      await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
-
-      await modifyActiveWorkflow(comfyPage.page, topbar.getActiveTab())
-      await topbar.closeWorkflowTab('Unsaved Workflow (2)')
-
-      const dialog = comfyPage.page.getByRole('dialog')
-      await expect(dialog).toBeVisible()
-      await expect(
-        dialog.getByRole('button', { name: 'Close anyway' })
-      ).toBeVisible()
-      await expect(dialog.getByRole('button', { name: 'Save' })).toBeVisible()
-      await expect(dialog.getByRole('button', { name: 'Cancel' })).toHaveCount(
-        0
-      )
-    })
-
-    test('clicking "Close anyway" closes the tab without saving', async ({
-      comfyPage
-    }) => {
-      const topbar = comfyPage.menu.topbar
-
-      await topbar.newWorkflowButton.click()
-      await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
-
-      await modifyActiveWorkflow(comfyPage.page, topbar.getActiveTab())
-      await topbar.closeWorkflowTab('Unsaved Workflow (2)')
-
-      await comfyPage.page
-        .getByRole('dialog')
-        .getByRole('button', { name: 'Close anyway' })
-        .click()
-
-      await expect.poll(() => topbar.getTabNames()).toHaveLength(1)
-      await expect
-        .poll(() => topbar.getActiveTabName())
-        .toContain('Unsaved Workflow')
-    })
-
-    test('dismissing the dialog keeps the modified tab open', async ({
-      comfyPage
-    }) => {
-      const topbar = comfyPage.menu.topbar
-
-      await topbar.newWorkflowButton.click()
-      await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
-
-      await modifyActiveWorkflow(comfyPage.page, topbar.getActiveTab())
-      await topbar.closeWorkflowTab('Unsaved Workflow (2)')
-
-      await expect(comfyPage.page.getByRole('dialog')).toBeVisible()
-      await comfyPage.page.keyboard.press('Escape')
-      await expect(comfyPage.page.getByRole('dialog')).toBeHidden()
-
-      await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
-    })
-  })
 })

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

@@ -1,65 +1,18 @@
-import type { Locator } from '@playwright/test'
-
 import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
-import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
+import {
+  clickExactMenuItem,
+  getNodeRef,
+  getNodeWrapper,
+  openContextMenu,
+  openMultiNodeContextMenu
+} from '@e2e/fixtures/utils/contextMenuTestHelpers'
 
 const BYPASS_CLASS = /before:bg-bypass\/60/
 
-async function clickExactMenuItem(comfyPage: ComfyPage, name: string) {
-  await comfyPage.contextMenu.clickMenuItemExact(name)
-  await expect(comfyPage.contextMenu.primeVueMenu).toBeHidden()
-}
-
-async function openContextMenu(comfyPage: ComfyPage, nodeTitle: string) {
-  const fixture = await comfyPage.vueNodes.getFixtureByTitle(nodeTitle)
-  await comfyPage.contextMenu.openForVueNode(fixture.header)
-  return comfyPage.contextMenu.primeVueMenu
-}
-
-async function openMultiNodeContextMenu(
-  comfyPage: ComfyPage,
-  titles: string[]
-) {
-  // deselectAll via evaluate — clearSelection() clicks at a fixed position
-  // which can hit nodes or the toolbar overlay
-  await comfyPage.page.evaluate(() => window.app!.canvas.deselectAll())
-  await comfyPage.nextFrame()
-
-  for (const title of titles) {
-    const fixture = await comfyPage.vueNodes.getFixtureByTitle(title)
-    await fixture.header.click({ modifiers: ['ControlOrMeta'] })
-  }
-  await comfyPage.nextFrame()
-
-  const firstFixture = await comfyPage.vueNodes.getFixtureByTitle(titles[0])
-  const box = await firstFixture.header.boundingBox()
-  if (!box) throw new Error(`Header for "${titles[0]}" not found`)
-  await comfyPage.page.mouse.click(
-    box.x + box.width / 2,
-    box.y + box.height / 2,
-    { button: 'right' }
-  )
-
-  const menu = comfyPage.contextMenu.primeVueMenu
-  await menu.waitFor({ state: 'visible' })
-  return menu
-}
-
-function getNodeWrapper(comfyPage: ComfyPage, nodeTitle: string): Locator {
-  return comfyPage.vueNodes
-    .getNodeByTitle(nodeTitle)
-    .getByTestId(TestIds.node.innerWrapper)
-}
-
-async function getNodeRef(comfyPage: ComfyPage, nodeTitle: string) {
-  const refs = await comfyPage.nodeOps.getNodeRefsByTitle(nodeTitle)
-  return refs[0]
-}
-
 test.describe('Vue Node Context Menu', { tag: '@vue-nodes' }, () => {
   test.describe('Single Node Actions', () => {
     test('should rename node via context menu', async ({ comfyPage }) => {

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

@@ -0,0 +1,285 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+import {
+  clickExactMenuItem,
+  getNodeRef,
+  openContextMenu,
+  openMultiNodeContextMenu
+} from '@e2e/fixtures/utils/contextMenuTestHelpers'
+
+test.describe(
+  'Vue Node Context Menu — Extended Coverage',
+  { tag: '@vue-nodes' },
+  () => {
+    test.describe('Single Node Actions', () => {
+      test.fixme('should open node info via context menu', async ({
+        comfyPage
+      }) => {
+        await openContextMenu(comfyPage, 'KSampler')
+        await clickExactMenuItem(comfyPage, 'Node Info')
+
+        await expect(
+          comfyPage.page.getByTestId(TestIds.propertiesPanel.root)
+        ).toBeVisible()
+      })
+
+      test('should change node color via Color submenu', async ({
+        comfyPage
+      }) => {
+        const nodeRef = await getNodeRef(comfyPage, 'KSampler')
+        const initialColor = await nodeRef.getProperty<string | undefined>(
+          'color'
+        )
+
+        await openContextMenu(comfyPage, 'KSampler')
+        const menu = comfyPage.contextMenu.primeVueMenu
+        await menu.getByRole('menuitem', { name: 'Color', exact: true }).click()
+
+        const redSwatch = comfyPage.page.getByTitle('Red', { exact: true })
+        await expect(redSwatch.first()).toBeVisible()
+        await redSwatch.first().click()
+
+        await expect
+          .poll(() => nodeRef.getProperty<string | undefined>('color'))
+          .not.toBe(initialColor)
+      })
+
+      test('should change node shape via Shape submenu', async ({
+        comfyPage
+      }) => {
+        const nodeRef = await getNodeRef(comfyPage, 'KSampler')
+
+        await openContextMenu(comfyPage, 'KSampler')
+        const menu = comfyPage.contextMenu.primeVueMenu
+        await menu.getByRole('menuitem', { name: 'Shape', exact: true }).hover()
+
+        const boxItem = menu
+          .getByRole('menuitem', { name: 'Box', exact: true })
+          .last()
+        await expect(boxItem).toBeVisible()
+        await boxItem.click()
+
+        await expect.poll(() => nodeRef.getProperty<number>('shape')).toBe(1)
+      })
+
+      test('should delete node via Delete context menu', async ({
+        comfyPage
+      }) => {
+        const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+        await openContextMenu(comfyPage, 'KSampler')
+        await clickExactMenuItem(comfyPage, 'Delete')
+
+        await expect
+          .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+          .toBe(initialCount - 1)
+      })
+
+      test('should not show Run Branch for non-output nodes', async ({
+        comfyPage
+      }) => {
+        const menu = await openContextMenu(comfyPage, 'Load Checkpoint')
+        await expect(menu).toBeVisible()
+        await expect(
+          menu.getByRole('menuitem', {
+            name: 'Run Branch',
+            exact: true
+          })
+        ).toBeHidden()
+      })
+
+      test.fixme('should show Run Branch for output nodes', async ({
+        comfyPage
+      }) => {
+        await expect(
+          comfyPage.vueNodes.getNodeByTitle('Save Image'),
+          'Default workflow must contain Save Image node'
+        ).toBeVisible()
+
+        await openContextMenu(comfyPage, 'Save Image')
+        await expect(
+          comfyPage.contextMenu.primeVueMenu.getByRole('menuitem', {
+            name: 'Run Branch',
+            exact: true
+          })
+        ).toBeVisible()
+      })
+    })
+
+    test.describe('Image Node Actions', () => {
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+        await comfyPage.vueNodes.waitForNodes(1)
+        await comfyPage.page
+          .locator('[data-node-id] img')
+          .first()
+          .waitFor({ state: 'visible' })
+
+        const [loadImageNode] =
+          await comfyPage.nodeOps.getNodeRefsByTitle('Load Image')
+        if (!loadImageNode) throw new Error('Load Image node not found')
+
+        await expect
+          .poll(() =>
+            comfyPage.page.evaluate(
+              (nodeId) =>
+                window.app!.graph.getNodeById(nodeId)?.imgs?.length ?? 0,
+              loadImageNode.id
+            )
+          )
+          .toBeGreaterThan(0)
+      })
+
+      test('should open mask editor via context menu', async ({
+        comfyPage
+      }) => {
+        await openContextMenu(comfyPage, 'Load Image')
+        await clickExactMenuItem(comfyPage, 'Open in Mask Editor')
+
+        const maskEditorDialog = comfyPage.page.locator('.mask-editor-dialog')
+        await expect(maskEditorDialog).toBeVisible()
+      })
+    })
+
+    test.describe('Multi-Node Actions', () => {
+      const nodeTitles = ['Load Checkpoint', 'KSampler']
+
+      test('should align selected nodes via Align Selected To submenu', async ({
+        comfyPage
+      }) => {
+        const nodeRef0 = await getNodeRef(comfyPage, nodeTitles[0])
+        const nodeRef1 = await getNodeRef(comfyPage, nodeTitles[1])
+
+        const initialPos0 = await nodeRef0.getPosition()
+        const initialPos1 = await nodeRef1.getPosition()
+        expect(
+          initialPos0.y !== initialPos1.y,
+          'Nodes should start at different y positions'
+        ).toBe(true)
+
+        await openMultiNodeContextMenu(comfyPage, nodeTitles)
+        const menu = comfyPage.contextMenu.primeVueMenu
+        await menu
+          .getByRole('menuitem', {
+            name: 'Align Selected To',
+            exact: true
+          })
+          .hover()
+
+        const topItem = menu
+          .getByRole('menuitem', { name: 'Top', exact: true })
+          .last()
+        await expect(topItem).toBeVisible()
+        await topItem.click()
+
+        await expect
+          .poll(async () => {
+            const pos0 = await nodeRef0.getPosition()
+            const pos1 = await nodeRef1.getPosition()
+            return Math.abs(pos0.y - pos1.y)
+          })
+          .toBeLessThanOrEqual(1)
+      })
+
+      test('should distribute selected nodes via Distribute Nodes submenu', async ({
+        comfyPage
+      }) => {
+        const threeNodes = ['Load Checkpoint', 'KSampler', 'Empty Latent Image']
+
+        await openMultiNodeContextMenu(comfyPage, threeNodes)
+        const menu = comfyPage.contextMenu.primeVueMenu
+        await menu
+          .getByRole('menuitem', {
+            name: 'Distribute Nodes',
+            exact: true
+          })
+          .hover()
+
+        const horizontalItem = menu
+          .getByRole('menuitem', {
+            name: 'Horizontal',
+            exact: true
+          })
+          .last()
+        await expect(horizontalItem).toBeVisible()
+        await horizontalItem.click()
+
+        const nodeRef0 = await getNodeRef(comfyPage, threeNodes[0])
+        const nodeRef1 = await getNodeRef(comfyPage, threeNodes[1])
+        const nodeRef2 = await getNodeRef(comfyPage, threeNodes[2])
+
+        await expect
+          .poll(async () => {
+            const bounds = await Promise.all([
+              nodeRef0.getBounding(),
+              nodeRef1.getBounding(),
+              nodeRef2.getBounding()
+            ])
+            const sorted = bounds.toSorted((a, b) => a.x - b.x)
+            const gap1 = sorted[1].x - (sorted[0].x + sorted[0].width)
+            const gap2 = sorted[2].x - (sorted[1].x + sorted[1].width)
+            return Math.abs(gap1 - gap2)
+          })
+          .toBeLessThanOrEqual(1)
+      })
+    })
+
+    test.describe('Menu Visibility Invariants', () => {
+      test('should show Delete menu item for any node', async ({
+        comfyPage
+      }) => {
+        await openContextMenu(comfyPage, 'KSampler')
+        await expect(
+          comfyPage.contextMenu.primeVueMenu.getByRole('menuitem', {
+            name: 'Delete',
+            exact: true
+          })
+        ).toBeVisible()
+      })
+    })
+
+    test.describe('Widget Extra Options', () => {
+      test('should show widget-specific options when right-clicking a named widget', async ({
+        comfyPage
+      }) => {
+        const widgetLocator = comfyPage.vueNodes.getWidgetByName(
+          'KSampler',
+          'seed'
+        )
+        await expect(
+          widgetLocator,
+          'KSampler must expose a "seed" widget'
+        ).toBeVisible()
+
+        await widgetLocator.hover()
+        await widgetLocator.dispatchEvent('contextmenu', {
+          bubbles: true,
+          cancelable: true,
+          button: 2
+        })
+
+        const menu = comfyPage.contextMenu.primeVueMenu
+        await menu.waitFor({ state: 'visible' })
+
+        const menuItems = menu.getByRole('menuitem')
+        const labels = await menuItems.allTextContents()
+        const trimmedLabels = labels.map((l) => l.trim())
+
+        const hasFavoriteOrRename = trimmedLabels.some(
+          (label) =>
+            label.startsWith('Favorite Widget') ||
+            label.startsWith('Unfavorite Widget') ||
+            label.startsWith('Rename Widget')
+        )
+
+        expect(
+          hasFavoriteOrRename,
+          'Widget-specific menu options (Favorite/Unfavorite/Rename Widget) should appear for the "seed" widget'
+        ).toBe(true)
+      })
+    })
+  }
+)

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

@@ -21,8 +21,9 @@ test.describe('Vue Nodes Image Preview', { tag: '@vue-nodes' }, () => {
     })
 
     const nodeId = String(loadImageNode.id)
-    const { imagePreview } =
-      await comfyPage.vueNodes.getFixtureByTitle('Load Image')
+    const imagePreview = comfyPage.vueNodes
+      .getNodeLocator(nodeId)
+      .locator('.image-preview')
 
     await expect(imagePreview).toBeVisible()
     await expect(imagePreview.locator('img')).toBeVisible({ timeout: 30_000 })
@@ -43,25 +44,6 @@ test.describe('Vue Nodes Image Preview', { tag: '@vue-nodes' }, () => {
     await expect(comfyPage.page.locator('.mask-editor-dialog')).toBeVisible()
   })
 
-  test('hides mask and download buttons when image is missing', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow(
-      'widgets/load_image_widget_missing_file'
-    )
-
-    const { imagePreview } =
-      await comfyPage.vueNodes.getFixtureByTitle('Load Image')
-
-    await expect(imagePreview).toBeVisible()
-    await expect(imagePreview.getByTestId('error-loading-image')).toBeVisible()
-
-    await imagePreview.getByRole('region').hover()
-
-    await expect(imagePreview.getByLabel('Edit or mask image')).toHaveCount(0)
-    await expect(imagePreview.getByLabel('Download image')).toHaveCount(0)
-  })
-
   test('shows image context menu options', async ({ comfyPage }) => {
     const { nodeId } = await loadImageOnNode(comfyPage)
 

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

@@ -1,5 +1,3 @@
-import type { Locator } from '@playwright/test'
-
 import {
   comfyExpect as expect,
   comfyPageFixture as test
@@ -41,19 +39,6 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
     expect(Math.abs(a.y - b.y)).toBeLessThanOrEqual(tol)
   }
 
-  const dragFromTabButton = async (comfyPage: ComfyPage, button: Locator) => {
-    const box = await button.boundingBox()
-    if (!box) throw new Error('Tab button has no bounding box')
-    const start = {
-      x: box.x + box.width / 2,
-      y: box.y + box.height * 0.75
-    }
-    await comfyPage.canvasOps.dragAndDrop(start, {
-      x: start.x + 120,
-      y: start.y + 80
-    })
-  }
-
   test('should allow moving nodes by dragging', async ({ comfyPage }) => {
     const loadCheckpointHeaderPos = await getLoadCheckpointHeaderPos(comfyPage)
     await comfyPage.canvasOps.dragAndDrop(loadCheckpointHeaderPos, {
@@ -105,63 +90,6 @@ test.describe('Vue Node Moving', { tag: '@vue-nodes' }, () => {
     await expectPosChanged(headerPos, afterPos)
   })
 
-  test('should not toggle advanced inputs when dragging by the Advanced button', async ({
-    comfyPage
-  }) => {
-    await comfyPage.settings.setSetting(
-      'Comfy.Node.AlwaysShowAdvancedWidgets',
-      false
-    )
-    await comfyPage.nodeOps.addNode(
-      'ModelSamplingFlux',
-      {},
-      {
-        x: 500,
-        y: 200
-      }
-    )
-    await comfyPage.vueNodes.waitForNodes()
-
-    const node = comfyPage.vueNodes.getNodeByTitle('ModelSamplingFlux')
-    const showButton = node.getByText('Show advanced inputs')
-    const widgets = node.locator('.lg-node-widget')
-
-    await expect(showButton).toBeVisible()
-    await expect(widgets).toHaveCount(2)
-
-    const beforePos = await node.boundingBox()
-    if (!beforePos) throw new Error('Node has no bounding box')
-
-    await dragFromTabButton(comfyPage, showButton)
-
-    await expect(showButton).toBeVisible()
-    await expect(node.getByText('Hide advanced inputs')).toBeHidden()
-    await expect(widgets).toHaveCount(2)
-
-    const afterPos = await node.boundingBox()
-    if (!afterPos) throw new Error('Node missing after drag')
-    await expectPosChanged(beforePos, afterPos)
-  })
-
-  test('should not enter subgraph when dragging by the Enter Subgraph button', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-    const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-    const beforePos = await subgraphNode.getPosition()
-
-    await dragFromTabButton(
-      comfyPage,
-      comfyPage.vueNodes.getSubgraphEnterButton('2')
-    )
-
-    expect(await comfyPage.subgraph.isInSubgraph()).toBe(false)
-
-    const afterPos = await subgraphNode.getPosition()
-    await expectPosChanged(beforePos, afterPos)
-  })
-
   test('should move all selected nodes together when dragging one with Meta held', async ({
     comfyPage
   }) => {

browser_tests/tests/wsReconnectStaleJob.spec.ts

@@ -1,211 +0,0 @@
-import type { WebSocketRoute } from '@playwright/test'
-import { mergeTests } from '@playwright/test'
-import type { z } from 'zod'
-
-import {
-  comfyExpect as expect,
-  comfyPageFixture
-} from '@e2e/fixtures/ComfyPage'
-import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
-import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
-import { webSocketFixture } from '@e2e/fixtures/ws'
-import type {
-  RawJobListItem,
-  zJobsListResponse
-} from '@/platform/remote/comfyui/jobs/jobTypes'
-
-type JobsListResponse = z.infer<typeof zJobsListResponse>
-
-const test = mergeTests(comfyPageFixture, webSocketFixture)
-
-const KSAMPLER_NODE = '3'
-const EXECUTING_CLASS = /outline-node-stroke-executing/
-
-const QUEUE_ROUTE = /\/api\/jobs\?[^/]*status=in_progress,pending/
-const HISTORY_ROUTE = /\/api\/jobs\?[^/]*status=completed/
-
-function jobsResponse(jobs: RawJobListItem[]): JobsListResponse {
-  return {
-    jobs,
-    pagination: { offset: 0, limit: 200, total: jobs.length, has_more: false }
-  }
-}
-
-async function mockJobsRoute(
-  comfyPage: ComfyPage,
-  pattern: RegExp,
-  body: string,
-  status: number = 200
-): Promise<() => number> {
-  let count = 0
-  await comfyPage.page.route(pattern, async (route) => {
-    count += 1
-    await route.fulfill({
-      status,
-      contentType: 'application/json',
-      body
-    })
-  })
-  return () => count
-}
-
-const emptyJobsBody = JSON.stringify(jobsResponse([]))
-
-type Scenario = {
-  name: string
-  /** Built per-test so it can incorporate the runtime-assigned jobId. */
-  queueBody: (jobId: string) => string
-  /** Whether the active job state should still be reflected after reconnect. */
-  expectsActiveAfter: boolean
-}
-
-const scenarios: Scenario[] = [
-  {
-    name: 'clears stale active job when queue is empty after reconnect',
-    queueBody: () => emptyJobsBody,
-    expectsActiveAfter: false
-  },
-  {
-    name: 'preserves active job when the job is still in the queue',
-    queueBody: (jobId) =>
-      JSON.stringify(
-        jobsResponse([
-          { id: jobId, status: 'in_progress', create_time: Date.now() }
-        ])
-      ),
-    expectsActiveAfter: true
-  }
-]
-
-/**
- * Stub the queue/history endpoints per `scenario`, close the WS, and wait
- * for the auto-reconnect to issue a fresh queue fetch.
- */
-async function triggerReconnect(
-  comfyPage: ComfyPage,
-  ws: WebSocketRoute,
-  scenario: Scenario,
-  jobId: string
-): Promise<void> {
-  await mockJobsRoute(comfyPage, HISTORY_ROUTE, emptyJobsBody)
-  const queueFetches = await mockJobsRoute(
-    comfyPage,
-    QUEUE_ROUTE,
-    scenario.queueBody(jobId)
-  )
-  const fetchesBeforeClose = queueFetches()
-  await ws.close()
-  await expect.poll(queueFetches).toBeGreaterThan(fetchesBeforeClose)
-}
-
-test.describe('WebSocket reconnect with stale job', { tag: '@ui' }, () => {
-  test.describe('app mode skeleton', () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.appMode.enterAppModeWithInputs([[KSAMPLER_NODE, 'seed']])
-      await expect(comfyPage.appMode.linearWidgets).toBeVisible()
-    })
-
-    for (const scenario of scenarios) {
-      test(scenario.name, async ({ comfyPage, getWebSocket }) => {
-        const ws = await getWebSocket()
-        const exec = new ExecutionHelper(comfyPage, ws)
-
-        const jobId = await exec.run()
-        exec.executionStart(jobId)
-
-        // Skeleton visibility is the deterministic sync point: it appears
-        // once both `storeJob` (HTTP) and `executionStart` (WS) have been
-        // processed, regardless of arrival order.
-        const firstSkeleton = comfyPage.appMode.outputHistory.skeletons.first()
-        await expect(firstSkeleton).toBeVisible()
-
-        await triggerReconnect(comfyPage, ws, scenario, jobId)
-
-        if (scenario.expectsActiveAfter) {
-          await expect(firstSkeleton).toBeVisible()
-        } else {
-          await expect(comfyPage.appMode.outputHistory.skeletons).toHaveCount(0)
-        }
-      })
-    }
-
-    test('preserves active job when the queue endpoint fails on reconnect', async ({
-      comfyPage,
-      getWebSocket
-    }) => {
-      const ws = await getWebSocket()
-      const exec = new ExecutionHelper(comfyPage, ws)
-
-      const jobId = await exec.run()
-      exec.executionStart(jobId)
-
-      const firstSkeleton = comfyPage.appMode.outputHistory.skeletons.first()
-      await expect(firstSkeleton).toBeVisible()
-
-      await mockJobsRoute(comfyPage, HISTORY_ROUTE, emptyJobsBody)
-
-      // Prime queueStore.runningTasks with the active job — a WS status
-      // event drives GraphView.onStatus -> queueStore.update().
-      const primer = await mockJobsRoute(
-        comfyPage,
-        QUEUE_ROUTE,
-        JSON.stringify(
-          jobsResponse([
-            { id: jobId, status: 'in_progress', create_time: Date.now() }
-          ])
-        )
-      )
-      exec.status(1)
-      await expect.poll(primer).toBeGreaterThanOrEqual(1)
-
-      // Swap to a failing handler so the reconnect-driven fetch 500s.
-      // The fix should preserve runningTasks from the priming call rather
-      // than overwriting it with empty/error state.
-      await comfyPage.page.unroute(QUEUE_ROUTE)
-      const failed = await mockJobsRoute(comfyPage, QUEUE_ROUTE, '{}', 500)
-
-      const before = failed()
-      await ws.close()
-      await expect.poll(failed).toBeGreaterThan(before)
-
-      await expect(firstSkeleton).toBeVisible()
-    })
-  })
-
-  test.describe('vue node executing class', { tag: '@vue-nodes' }, () => {
-    for (const scenario of scenarios) {
-      test(scenario.name, async ({ comfyPage, getWebSocket }) => {
-        const ws = await getWebSocket()
-        const exec = new ExecutionHelper(comfyPage, ws)
-
-        // The executing outline lives on the outer `[data-node-id]`
-        // container, not the inner wrapper.
-        const ksamplerNode = comfyPage.vueNodes.getNodeLocator(KSAMPLER_NODE)
-        await expect(ksamplerNode).toBeVisible()
-
-        const jobId = await exec.run()
-        exec.executionStart(jobId)
-        exec.progressState(jobId, {
-          [KSAMPLER_NODE]: {
-            value: 0,
-            max: 1,
-            state: 'running',
-            node_id: KSAMPLER_NODE,
-            display_node_id: KSAMPLER_NODE,
-            prompt_id: jobId
-          }
-        })
-
-        await expect(ksamplerNode).toHaveClass(EXECUTING_CLASS)
-
-        await triggerReconnect(comfyPage, ws, scenario, jobId)
-
-        if (scenario.expectsActiveAfter) {
-          await expect(ksamplerNode).toHaveClass(EXECUTING_CLASS)
-        } else {
-          await expect(ksamplerNode).not.toHaveClass(EXECUTING_CLASS)
-        }
-      })
-    }
-  })
-})

docs/adr/0008-entity-component-system.md

@@ -249,7 +249,6 @@ Companion architecture documents that expand on the design in this ADR:
 | [ECS Lifecycle Scenarios](../architecture/ecs-lifecycle-scenarios.md)                            | Before/after walkthroughs of lifecycle operations (node removal, link creation, etc.)       |
 | [World API and Command Layer](../architecture/ecs-world-command-api.md)                          | How each lifecycle scenario maps to a command in the World API                              |
 | [Subgraph Boundaries and Widget Promotion](../architecture/subgraph-boundaries-and-promotion.md) | Design rationale for modeling subgraphs as node components, not separate entities           |
-| [ADR 0009: Subgraph promoted widgets](0009-subgraph-promoted-widgets-use-linked-inputs.md)       | Follow-up decision for promoted widget identity and value ownership at subgraph boundaries  |
 | [Appendix: Critical Analysis](../architecture/appendix-critical-analysis.md)                     | Independent verification of the accuracy of the architecture documents                      |
 | [Change Tracker](../architecture/change-tracker.md)                                              | Documents the current undo/redo system that ECS cross-cutting concerns will replace         |
 

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

@@ -1,328 +0,0 @@
-# 9. Subgraph promoted widgets use linked inputs
-
-Date: 2026-05-05
-
-Appendices:
-
-- [Before/after flow diagrams](./0009-subgraph-promoted-widgets-use-linked-inputs/before-after-flows.md)
-- [System comparison](./0009-subgraph-promoted-widgets-use-linked-inputs/system-comparison.md)
-- [Removing `disambiguatingSourceNodeId`](./0009-subgraph-promoted-widgets-use-linked-inputs/disambiguating-source-node-id.md)
-
-## Status
-
-Proposed
-
-## Context
-
-Subgraph widget promotion historically had two overlapping representations:
-
-1. `properties.proxyWidgets`, a serialized list of source node/widget tuples;
-2. linked subgraph inputs, where an interior widget-bearing input is exposed
-   through the subgraph boundary.
-
-This created ambiguous ownership. Runtime value reads could collapse to an
-interior source widget, while host `widgets_values` could also carry an
-exterior value. Multiple host instances of the same subgraph could therefore
-stomp one another, and serialization could mutate interior widgets as a
-persistence carrier for exterior values.
-
-The ECS widget migration makes that ambiguity more expensive: widgets are
-becoming entities with component state keyed by stable entity identity, and
-subgraphs are modeled as graph boundary structure rather than a separate
-promotion-specific entity kind.
-
-## Decision
-
-Promoted widgets are represented only as standard linked `SubgraphInput`
-widgets. A promoted widget is a host-scoped widget entity owned by a subgraph
-input on a host `SubgraphNode`. The interior source widget supplies schema,
-type, options, tooltip, and default metadata, but it is not the owner of the
-host value.
-
-Display-only preview surfacing, such as `$$canvas-image-preview`, is not a
-promoted widget. It is a separate preview-exposure system because it has no
-host-owned widget value, does not feed prompt serialization, and often points at
-virtual `serialize: false` pseudo-widgets that may not exist on the source node.
-
-`properties.proxyWidgets` becomes a legacy load-time input only. Successful
-repair consumes entries from `proxyWidgets`; canonical saves do not re-emit
-those entries. The standard serialized representation is the existing subgraph
-interface/input form plus host-node `widgets_values`.
-
-Display-only preview exposures use their own host-node-scoped serialized entry,
-`properties.previewExposures`, instead of `properties.proxyWidgets` and instead
-of linked `SubgraphInput` widgets. Canonical preview-exposure JSON uses preview
-language, not widget language:
-
-```ts
-type PreviewExposure = {
-  name: string
-  sourceNodeId: string
-  sourcePreviewName: string
-}
-```
-
-Host-node scope preserves current behavior where different instances of the
-same subgraph can choose different exposed previews.
-
-The entry intentionally stores only host preview identity and source locator
-identity. `name` is the host-scoped stable identity for this preview exposure,
-analogous to `SubgraphInput.name`; it is not a display label. It is generated
-with existing collision behavior, such as `nextUniqueName(...)`, when an
-exposure is created. Media type, display labels, titles, image/video/audio URLs,
-and other runtime preview details are derived from the current graph and output
-state. Array order is the canonical display order. Preview exposures do not get
-a separate persisted `label` in this slice; if a future rename UX needs one, it
-should follow the same rule as subgraph inputs: `name` is identity and `label`
-is display-only.
-
-Preview exposures are persisted user choices after creation. Packing nodes into
-a subgraph may auto-add recommended preview exposures for supported output
-nodes, and users may explicitly add or remove additional preview exposures
-afterward. Normal load/save does not re-derive previews from node type alone,
-because that would make old workflows change when support for new preview node
-types is added. Unresolved preview exposures remain persisted and inert;
-automatic cleanup does not prune them. They are removed only by explicit user
-action or by destruction/unpacking of the owning host.
-
-Preview exposures compose through nested subgraph hosts by chaining immediate
-boundaries. If an outer subgraph wants to show a preview exposed by an inner
-subgraph host, the outer `previewExposures` entry points at the immediate inner
-`SubgraphNode`, and `sourcePreviewName` names the inner host's preview-exposure
-identity, not the deepest interior preview name. Runtime preview resolution may
-then follow the inner host's own preview exposures to find media. Canonical JSON
-does not persist flattened deep paths, because deep paths would couple host UI
-state to private nested graph internals.
-
-## Identity and value ownership
-
-- UI/value identity is host-scoped: host node locator plus
-  `SubgraphInput.name`.
-- Host-scoped identity means the host `SubgraphNode` instance within its
-  containing `graphScope`; the interior source node is not the state or
-  persistence owner.
-- `SubgraphInput.name` is the stable internal identity.
-- `SubgraphInput.label` / `localized_name` are display-only.
-- `SubgraphInput.id` may be used for slot-instance reconciliation, not as the
-  persisted widget value key.
-- Source node/widget identity remains metadata for diagnostics, missing-model
-  lookup, schema projection, and migration only.
-- The host/exterior value wins over the interior/source value during repair,
-  persistence, and prompt serialization.
-
-This follows the existing widget/slot convention: `name` is identity, `label`
-is display.
-
-Promoted-widget value state is a host-scoped sparse overlay over source-widget
-metadata and defaults. The source widget remains the schema/default provider;
-host value state is materialized only when the exterior value differs from the
-effective source default or when restored from persisted host state. Canonical
-save/load must not eagerly mirror source defaults or use interior widgets as
-persistence carriers.
-
-## Forward migration
-
-Loading a workflow with legacy `proxyWidgets` runs a one-way repair:
-
-1. Parse `properties.proxyWidgets` with the existing Zod-inferred tuple type.
-2. Invalid raw `proxyWidgets` data logs `console.error`, does not throw, and is
-   not quarantined.
-3. Build a multi-pass association map before mutation:
-   - normalized legacy proxy entry;
-   - projected legacy promoted-widget order;
-   - host `widgets_values` value, preserving sparse holes;
-   - repair strategy or failure reason;
-   - whether the entry is a value widget or display-only preview exposure.
-4. Defer mutations until node IDs/entity IDs are stable and the subgraph graph
-   is configured.
-5. On flush, re-resolve against current graph state, because clone/paste/load
-   flows may have remapped or created nodes and links.
-6. If already represented by a linked `SubgraphInput`, consider the legacy
-   entry resolved and consume it.
-7. Otherwise repair through existing subgraph input/link systems.
-8. If the entry is display-only preview surfacing, migrate it into the separate
-   preview-exposure representation instead of creating a linked `SubgraphInput`.
-9. If value-widget repair fails, write inert quarantine metadata and warn.
-
-The repair is idempotent. Pending plans store tuple/value data and re-check the
-current graph before applying mutations.
-
-Legacy entries are classified as preview exposures when either:
-
-- the legacy source name starts with `$$`; or
-- the source node resolves to a matching pseudo-preview widget, such as a
-  `serialize: false` preview/video/audio UI widget.
-
-Everything else is treated as a value-widget promotion candidate. An unresolved
-preview-shaped entry remains inert at runtime and is still persisted, because
-preview-capable pseudo-widgets and output media can be removed and re-added
-dynamically. It is not quarantined because it has no user value to preserve. A
-non-`$$` entry that cannot resolve to a source widget is a value-widget repair
-failure and follows the quarantine path unless it can resolve to a
-pseudo-preview widget.
-
-## Proxy widget error quarantine
-
-Valid legacy entries that cannot be repaired are persisted in
-`properties.proxyWidgetErrorQuarantine`. Quarantined entries are inert: they do
-not hydrate runtime promoted widgets, do not participate in execution, and are
-not used for app-mode/favorites identity.
-
-Quarantine entries preserve enough information to avoid data loss and support
-future tooling:
-
-```ts
-type ProxyWidgetErrorQuarantineEntry = {
-  originalEntry: ProxyWidgetTuple
-  reason:
-    | 'missingSourceNode'
-    | 'missingSourceWidget'
-    | 'missingSubgraphInput'
-    | 'ambiguousSubgraphInput'
-    | 'unlinkedSourceWidget'
-    | 'primitiveBypassFailed'
-  hostValue?: TWidgetValue
-  attemptedAtVersion: 1
-}
-```
-
-Unresolved legacy UI selections/favorites are dropped with `console.warn`.
-Workflow-level promotion/value intent is preserved by
-`proxyWidgetErrorQuarantine`, not by a second UI quarantine format.
-
-## Primitive-node repair
-
-Legacy `proxyWidgets` may point at `PrimitiveNode` outputs. Primitive nodes
-serve nearly the same purpose as subgraph inputs: they provide a widget value to
-one or more target widget inputs. The migration repairs this expected legacy
-shape in the first migration rather than quarantining it by default.
-
-Primitive repair:
-
-- coalesces exact duplicate legacy entries during planning;
-- uses the primitive node's user title as the base input name when the node was
-  renamed, otherwise the primitive output widget name;
-- applies existing naming behavior and `nextUniqueName(...)` for collisions;
-- uses the existing primitive merge/config compatibility logic;
-- creates one `SubgraphInput` for the primitive fanout;
-- reconnects every former primitive output target to that input in target
-  order, using standard connect/disconnect APIs;
-- applies the host value when one exists, otherwise seeds from the source
-  primitive value;
-- leaves the primitive node and its widget value in place, but disconnected and
-  inert.
-
-Primitive repair is all-or-quarantine. If any target cannot be validated or
-reconnected, the migration does not leave a partial rewrite; it quarantines the
-entry with `hostValue` and logs the reason.
-
-## Serialization
-
-After repair/quarantine:
-
-- `properties.proxyWidgets` is omitted for repaired entries;
-- display-only preview entries are omitted from `properties.proxyWidgets` and
-  emitted through `properties.previewExposures`;
-- `properties.proxyWidgetErrorQuarantine` carries unrepaired valid entries;
-- preview exposures do not carry quarantine values because they do not own user
-  values; unresolved preview exposures remain inert in `previewExposures`;
-- host `widgets_values` contains host-owned values only for canonical host
-  widgets, not source-owned defaults or interior persistence copies;
-- quarantined legacy values live in `proxyWidgetErrorQuarantine.hostValue`;
-- array-form `widgets_values` remains for now.
-
-Preview exposures are display-only UI metadata. They drive host canvas/app-mode
-preview rendering, but they do not create prompt inputs, do not create
-`widgets_values`, do not alter node execution order, do not become executable
-graph edges, and do not participate in prompt serialization. Runtime mapping
-from backend `display_node`/output messages to a host preview exposure is a UI
-projection only.
-
-The old `SubgraphNode.serialize()` behavior that copied exterior promoted
-values into connected interior widgets is removed. A temporary TODO should mark
-that removal point until the migration is proven stable. Host values are
-serialized through standard subgraph-input widgets instead.
-
-Longer term, `widgets_values` should move from array order to an object/map
-keyed by stable widget name, but that migration is out of scope for this
-decision.
-
-## App mode, builder, and favorites
-
-The runtime migration and UI identity migration ship in the same slice. The UI
-must not persist promoted selections by source node/widget identity after this
-change.
-
-Canonical UI identity is:
-
-```ts
-type PromotedWidgetUiIdentity = {
-  hostNodeLocator: string
-  subgraphInputName: string
-}
-```
-
-Legacy source-identity selections are migrated when they resolve through the
-standard input created or confirmed by the migration. Unresolved selections are
-dropped with a warning.
-
-Preview exposure output selections are also host-scoped and must not persist
-interior source node identity. Canonical preview/output identity is:
-
-```ts
-type PreviewExposureUiIdentity = {
-  hostNodeLocator: string
-  previewName: string
-}
-```
-
-The UI references the explicit preview exposure itself. This keeps subgraphs
-opaque: consumers select the host boundary contract, not the interior node that
-currently supplies media. Legacy output selections that refer to interior
-preview source nodes may migrate if they resolve to a preview-exposure chain;
-otherwise they are dropped with `console.warn`. There is no separate preview UI
-quarantine.
-
-## PromotionStore
-
-`PromotionStore` becomes vestigial. It may remain temporarily as a derived
-runtime compatibility/index layer for existing consumers, but it is not
-serialized authority, must not create promotions without linked
-`SubgraphInput`s, and should be removed once consumers query the standard graph
-interface directly.
-
-## Considered options
-
-### Keep `proxyWidgets` as canonical serialized topology
-
-Rejected. This preserves two representations for the same concept and keeps
-source-widget identity in the value-ownership path.
-
-### Preserve bare promoted widgets as degraded runtime state
-
-Rejected. This would avoid some migration complexity, but it perpetuates the
-ambiguity that caused host/source value bugs and makes ECS identity less clear.
-
-### Quarantine primitive-node promotions by default
-
-Rejected. Primitive-node proxy promotions are expected legacy workflows, and
-quarantining them would break users unnecessarily. They are repaired by bypassing
-the primitive node when the repair can be validated all-or-nothing.
-
-### Migrate `widgets_values` to object/map form now
-
-Rejected for this slice. Name-keyed object form is the desired long-term
-direction, but combining it with the promotion migration increases blast radius
-for existing workflow consumers that still assume array order.
-
-## Consequences
-
-- Promoted widget values become host-instance-owned and ECS-compatible.
-- Source widgets remain metadata/default providers, not persistence carriers.
-- Legacy workflows are repaired toward one standard representation.
-- Quarantine preserves unrepaired valid legacy data without reintroducing bare
-  runtime promotion.
-- Primitive fanout repair is more complex, but avoids breaking common existing
-  workflows.
-- UI code must migrate with the runtime migration to avoid mixed identity states.
-- `PromotionStore` has a clear removal path.

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

@@ -1,210 +0,0 @@
-# Appendix: Before and after flows
-
-This appendix visualizes the ownership and migration flows described in
-[ADR 0009](../0009-subgraph-promoted-widgets-use-linked-inputs.md).
-
-## Before: proxy widgets and linked inputs overlap
-
-Historically, promoted widgets could be represented both as serialized
-`properties.proxyWidgets` entries and as linked subgraph inputs. Runtime value
-reads could collapse back to the interior source widget, while host
-`widgets_values` could also carry an exterior value for the same promoted UI.
-
-```mermaid
-flowchart TD
-  workflow[Workflow JSON] --> proxyWidgets[properties.proxyWidgets]
-  workflow --> hostValues[host widgets_values]
-  proxyWidgets --> promotionStore[PromotionStore / promotion runtime]
-  promotionStore --> sourceWidget[Interior source widget]
-  linkedInput[Linked SubgraphInput] --> hostWidget[Host promoted widget]
-  sourceWidget --> hostWidget
-  hostValues --> hostWidget
-  hostWidget --> prompt[Prompt serialization]
-  hostWidget -. may copy value back .-> sourceWidget
-  sourceWidget -. shared by host instances .-> otherHost[Another host instance]
-
-  classDef legacy fill:#fff3cd,stroke:#a66f00,color:#332200
-  classDef ambiguous fill:#f8d7da,stroke:#842029,color:#330000
-  classDef canonical fill:#d1e7dd,stroke:#0f5132,color:#052e16
-
-  class proxyWidgets,promotionStore legacy
-  class sourceWidget,hostValues ambiguous
-  class linkedInput,hostWidget canonical
-```
-
-Key problems in the old flow:
-
-- `properties.proxyWidgets` and linked `SubgraphInput` widgets could describe
-  the same promotion.
-- Interior source widgets supplied both schema metadata and, in some flows,
-  persisted host values.
-- Multiple host instances of the same subgraph could stomp one another through
-  the shared interior widget value.
-- Display-only previews were mixed into widget-promotion language even though
-  they do not own values or feed prompt serialization.
-
-## After: linked inputs are the promoted-widget boundary
-
-Promoted value widgets are now represented only as standard linked
-`SubgraphInput` widgets. The source widget remains the schema/default provider,
-but the host `SubgraphNode` owns the promoted value.
-
-```mermaid
-flowchart TD
-  workflow[Workflow JSON] --> subgraphInterface[Subgraph interface / inputs]
-  workflow --> hostValues[host widgets_values]
-  subgraphInterface --> subgraphInput[SubgraphInput.name]
-  subgraphInput --> hostWidget[Host-scoped widget entity]
-  hostValues --> hostWidget
-  sourceWidget[Interior source widget] --> schema[Schema, type, options, tooltip, default]
-  schema --> hostWidget
-  hostWidget --> prompt[Prompt serialization]
-
-  hostIdentity[Host node locator + SubgraphInput.name] --> hostWidget
-  sourceWidget -. metadata only .-> diagnostics[Diagnostics / lookup / migration]
-  sourceWidget -. no host value ownership .-> schema
-
-  classDef owner fill:#d1e7dd,stroke:#0f5132,color:#052e16
-  classDef metadata fill:#cff4fc,stroke:#055160,color:#032830
-  classDef persisted fill:#e2e3e5,stroke:#41464b,color:#212529
-
-  class subgraphInterface,subgraphInput,hostWidget,hostIdentity owner
-  class sourceWidget,schema,diagnostics metadata
-  class workflow,hostValues persisted
-```
-
-Canonical ownership after the migration:
-
-- UI/value identity is host-scoped: host node locator plus
-  `SubgraphInput.name`.
-- `SubgraphInput.name` is stable identity; labels and localized names are
-  display-only.
-- Host values win during repair, persistence, and prompt serialization.
-- Source widgets provide metadata and defaults only.
-- Canonical saves omit repaired `properties.proxyWidgets` entries.
-
-## Legacy load migration
-
-Loading a workflow with legacy `proxyWidgets` performs an idempotent repair. The
-repair builds a plan before mutating graph state, then re-resolves against the
-current graph when node IDs and links are stable.
-
-```mermaid
-flowchart TD
-  start[Load workflow] --> parse{Parse properties.proxyWidgets}
-  parse -->|invalid raw data| invalid[console.error and ignore]
-  parse -->|valid tuples| plan[Build repair plan]
-  plan --> classify{Classify entry}
-
-  classify -->|value widget| valueRepair{Already linked SubgraphInput?}
-  valueRepair -->|yes| consume[Consume legacy proxy entry]
-  valueRepair -->|no| repair[Repair through subgraph input/link systems]
-  repair --> repairResult{Repair succeeded?}
-  repairResult -->|yes| consume
-  repairResult -->|no| quarantine[Persist proxyWidgetErrorQuarantine]
-
-  classify -->|primitive fanout| primitive[Validate all primitive targets]
-  primitive --> primitiveResult{All targets reconnectable?}
-  primitiveResult -->|yes| primitiveRepair[Create one SubgraphInput and reconnect fanout]
-  primitiveRepair --> consume
-  primitiveResult -->|no| quarantine
-
-  classify -->|display-only preview| preview[Create / keep previewExposures entry]
-  preview --> consume
-
-  consume --> save[Canonical save]
-  quarantine --> save
-  save --> omit[Omit repaired entries from proxyWidgets]
-  save --> keepQuarantine[Persist unrepaired value intent in quarantine]
-  save --> keepPreview[Persist previews in previewExposures]
-
-  classDef ok fill:#d1e7dd,stroke:#0f5132,color:#052e16
-  classDef warn fill:#fff3cd,stroke:#a66f00,color:#332200
-  classDef error fill:#f8d7da,stroke:#842029,color:#330000
-  classDef neutral fill:#e2e3e5,stroke:#41464b,color:#212529
-
-  class consume,repair,primitiveRepair,preview,save,omit,keepPreview ok
-  class plan,classify,valueRepair,primitive,primitiveResult,repairResult neutral
-  class quarantine,keepQuarantine warn
-  class invalid error
-```
-
-## Preview exposures are separate from value widgets
-
-Display-only previews, such as `$$canvas-image-preview`, are not promoted
-widgets. They have host-scoped serialized identity, but they do not create
-prompt inputs, do not create `widgets_values`, and do not own user values.
-
-```mermaid
-flowchart TD
-  hostNode[Host SubgraphNode] --> previewExposures[properties.previewExposures]
-  previewExposures --> exposure[PreviewExposure.name]
-  exposure --> sourceLocator[sourceNodeId + sourcePreviewName]
-  sourceLocator --> runtimePreview[Runtime preview/output state]
-  runtimePreview --> hostCanvas[Host canvas / app-mode preview]
-
-  exposure --> uiIdentity[hostNodeLocator + previewName]
-  runtimePreview -. UI projection only .-> hostCanvas
-  previewExposures -. no prompt input .-> noPrompt[No prompt serialization]
-  previewExposures -. no value widget .-> noValue[No widgets_values entry]
-  previewExposures -. no graph edge .-> noEdge[No executable graph edge]
-
-  classDef preview fill:#cff4fc,stroke:#055160,color:#032830
-  classDef noValue fill:#f8d7da,stroke:#842029,color:#330000
-  classDef persisted fill:#e2e3e5,stroke:#41464b,color:#212529
-
-  class previewExposures,exposure,sourceLocator,runtimePreview,hostCanvas,uiIdentity preview
-  class noPrompt,noValue,noEdge noValue
-  class hostNode persisted
-```
-
-For nested subgraphs, preview exposures chain across immediate host boundaries
-instead of persisting flattened deep paths.
-
-```mermaid
-flowchart LR
-  outerHost[Outer SubgraphNode] --> outerExposure[Outer previewExposures entry]
-  outerExposure --> innerHost[Immediate inner SubgraphNode]
-  innerHost --> innerExposure[Inner previewExposures entry]
-  innerExposure --> deepestPreview[Interior preview source]
-  deepestPreview --> media[Resolved media]
-
-  outerExposure -. sourcePreviewName names inner preview identity .-> innerExposure
-  outerExposure -. does not persist deep private path .-> opaque[Subgraph internals remain opaque]
-
-  classDef boundary fill:#d1e7dd,stroke:#0f5132,color:#052e16
-  classDef preview fill:#cff4fc,stroke:#055160,color:#032830
-  classDef note fill:#fff3cd,stroke:#a66f00,color:#332200
-
-  class outerHost,innerHost boundary
-  class outerExposure,innerExposure,deepestPreview,media preview
-  class opaque note
-```
-
-## Serialization summary
-
-```mermaid
-flowchart TD
-  canonical[Canonical serialized SubgraphNode] --> inputs[Subgraph interface / inputs]
-  canonical --> values[widgets_values for host-owned values]
-  canonical --> previews[properties.previewExposures]
-  canonical --> quarantine[properties.proxyWidgetErrorQuarantine]
-  canonical -. omits repaired entries .-> noProxy[No canonical proxyWidgets]
-
-  inputs --> valueWidgets[Promoted value widgets]
-  values --> valueWidgets
-  previews --> previewUi[Display-only preview UI]
-  quarantine --> futureTooling[Future recovery tooling]
-
-  valueWidgets --> prompt[Prompt serialization]
-  previewUi -. not serialized into prompt .-> prompt
-  quarantine -. inert .-> prompt
-
-  classDef canonical fill:#d1e7dd,stroke:#0f5132,color:#052e16
-  classDef inert fill:#fff3cd,stroke:#a66f00,color:#332200
-  classDef removed fill:#f8d7da,stroke:#842029,color:#330000
-
-  class inputs,values,valueWidgets,prompt,canonical canonical
-  class previews,previewUi,quarantine,futureTooling inert
-  class noProxy removed
-```