fix: use real LGraphNode instance in createMockNode fixture

Instead of using `as unknown as LGraphNode` type assertion, instantiate a real LGraphNode and assign test-specific overrides. This eliminates the type escape at the fixture level while maintaining test flexibility. Addresses review feedback: https://github.com/Comfy-Org/ComfyUI_frontend/pull/11397#discussion_r3186572593 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Merge remote-tracking branch 'origin/main' into test/cov-litegraphService
2026-05-23 14:16:00 +00:00 · 2026-05-13 13:45:37 -07:00 · 2026-05-13 13:17:40 -07:00 · 2026-05-04 14:06:43 -07:00 · 2026-05-04 14:05:16 -07:00 · 2026-05-04 14:01:07 -07:00
237 changed files with 2521 additions and 9968 deletions
--- a/.github/actions/cloud-nodes-pull/action.yaml
+++ b/.github/actions/cloud-nodes-pull/action.yaml
@@ -1,19 +0,0 @@
-name: Cloud Nodes Pull
-description: 'Refresh the apps/website cloud nodes snapshot from the Comfy Cloud /api/object_info endpoint'
-inputs:
-  api_key:
-    description: 'Comfy Cloud API key (WEBSITE_CLOUD_API_KEY).'
-    required: true
-runs:
-  using: 'composite'
-  steps:
-    # Note: this action assumes the frontend repo is checked out at the workspace root.
-
-    - name: Setup frontend
-      uses: ./.github/actions/setup-frontend
-
-    - name: Refresh cloud nodes snapshot
-      shell: bash
-      env:
-        WEBSITE_CLOUD_API_KEY: ${{ inputs.api_key }}
-      run: pnpm --filter @comfyorg/website cloud-nodes:refresh-snapshot
--- a/.github/workflows/ci-tests-e2e-coverage.yaml
+++ b/.github/workflows/ci-tests-e2e-coverage.yaml
@@ -106,12 +106,17 @@ jobs:
      - name: Generate HTML coverage report
        if: steps.coverage-shards.outputs.has-coverage == 'true'
        run: |
+          if [ ! -s coverage/playwright/coverage.lcov ]; then
+            echo "No coverage data; generating placeholder report."
+            mkdir -p coverage/html
+            echo '<html><body><h1>No E2E coverage data available for this run.</h1></body></html>' > coverage/html/index.html
+            exit 0
+          fi
          genhtml coverage/playwright/coverage.lcov \
            -o coverage/html \
            --title "ComfyUI E2E Coverage" \
            --no-function-coverage \
-            --precision 1 \
-            --ignore-errors source,unmapped
+            --precision 1

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

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

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

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

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

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

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

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

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

            Triggered by workflow run `${{ github.run_id }}`.
-          branch: chore/refresh-website-snapshots-${{ github.run_id }}
+          branch: chore/refresh-ashby-snapshot-${{ github.run_id }}
          base: main
          labels: |
            Release:Website
--- a/apps/desktop-ui/src/components/maintenance/TaskListItem.vue
+++ b/apps/desktop-ui/src/components/maintenance/TaskListItem.vue
@@ -1,12 +1,12 @@
 <template>
  <tr
-    class="border-y border-solid border-neutral-700"
+    class="border-neutral-700 border-solid border-y"
    :class="{
      'opacity-50': runner.resolved,
      'opacity-75': isLoading && runner.resolved
    }"
  >
-    <td class="w-16 text-center">
+    <td class="text-center w-16">
      <TaskListStatusIcon :state="runner.state" :loading="isLoading" />
    </td>
    <td>
@@ -14,7 +14,7 @@
        {{ task.name }}
      </p>
      <Button
-        class="mx-2 inline-block"
+        class="inline-block mx-2"
        type="button"
        :icon="PrimeIcons.INFO_CIRCLE"
        severity="secondary"
@@ -22,11 +22,11 @@
        @click="toggle"
      />

-      <Popover ref="infoPopover" class="m-1 block max-w-64 min-w-32">
+      <Popover ref="infoPopover" class="block m-1 max-w-64 min-w-32">
        <span class="whitespace-pre-line">{{ task.description }}</span>
      </Popover>
    </td>
-    <td class="px-4 text-right">
+    <td class="text-right px-4">
      <Button
        :icon="task.button?.icon"
        :label="task.button?.text"
--- a/apps/website/README.md
+++ b/apps/website/README.md
@@ -119,44 +119,6 @@ snapshots can't be accidentally committed.

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

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

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

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

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

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

--- a/apps/website/src/utils/cloudNodes.registry.test.ts
+++ b/apps/website/src/utils/cloudNodes.registry.test.ts
@@ -17,7 +17,7 @@ function jsonResponse(
 }

 describe('fetchRegistryPacks', () => {
-  it('requests node ids in batches of 50 with matching limit param', async () => {
+  it('requests node ids in batches of 50', async () => {
    const ids = Array.from({ length: 120 }, (_, i) => `pack-${i}`)
    const fetchImpl = vi.fn(async (input: RequestInfo | URL) => {
      const url = new URL(String(input))
@@ -40,73 +40,6 @@ describe('fetchRegistryPacks', () => {
    expect(firstCallUrl.origin).toBe(DEFAULT_REGISTRY_BASE_URL)
    expect(firstCallUrl.pathname).toBe('/nodes')
    expect(firstCallUrl.searchParams.getAll('node_id')).toHaveLength(50)
-    expect(firstCallUrl.searchParams.get('limit')).toBe('50')
-    const lastCallUrl = new URL(String(fetchImpl.mock.calls[2]?.[0]))
-    expect(lastCallUrl.searchParams.getAll('node_id')).toHaveLength(20)
-    expect(lastCallUrl.searchParams.get('limit')).toBe('20')
-  })
-
-  it('survives the server defaulting to a small page size (regression for missing limit)', async () => {
-    // Mock applies the server's pre-fix behavior: default limit=10 silently
-    // truncates batches with more node_id filters than the page size.
-    const ids = Array.from({ length: 30 }, (_, i) => `pack-${i}`)
-    const fetchImpl = vi.fn(async (input: RequestInfo | URL) => {
-      const url = new URL(String(input))
-      const requestedLimit = Number(url.searchParams.get('limit') ?? '10')
-      const batchIds = url.searchParams
-        .getAll('node_id')
-        .slice(0, requestedLimit)
-      return jsonResponse({
-        nodes: batchIds.map((id) => ({ id, name: id })),
-        total: batchIds.length,
-        page: 1,
-        limit: requestedLimit
-      })
-    })
-
-    const result = await fetchRegistryPacks(ids, {
-      fetchImpl: fetchImpl as typeof fetch
-    })
-
-    const enriched = [...result.values()].filter((pack) => pack !== null)
-    expect(enriched).toHaveLength(30)
-  })
-
-  it('accepts null values for optional registry fields and normalizes them to undefined', async () => {
-    const fetchImpl = vi.fn(async () =>
-      jsonResponse({
-        nodes: [
-          {
-            id: 'pack-with-nulls',
-            name: 'Pack With Nulls',
-            description: null,
-            icon: null,
-            banner_url: null,
-            supported_os: null,
-            supported_accelerators: null,
-            publisher: null,
-            latest_version: null,
-            downloads: 42
-          }
-        ],
-        total: 1,
-        page: 1,
-        limit: 50
-      })
-    )
-
-    const result = await fetchRegistryPacks(['pack-with-nulls'], {
-      fetchImpl: fetchImpl as typeof fetch
-    })
-
-    const pack = result.get('pack-with-nulls')
-    expect(pack).not.toBeNull()
-    expect(pack?.downloads).toBe(42)
-    expect(pack?.description).toBeUndefined()
-    expect(pack?.supported_os).toBeUndefined()
-    expect(pack?.supported_accelerators).toBeUndefined()
-    expect(pack?.publisher).toBeUndefined()
-    expect(pack?.latest_version).toBeUndefined()
  })

  it('retries a failed batch once and then succeeds', async () => {
--- a/apps/website/src/utils/cloudNodes.registry.ts
+++ b/apps/website/src/utils/cloudNodes.registry.ts
@@ -8,47 +8,34 @@ const BATCH_SIZE = 50

 export type RegistryPack = components['schemas']['Node']

-function nullToUndefined<T>(value: T | null | undefined): T | undefined {
-  return value ?? undefined
-}
-
-const optionalString = z.string().nullish().transform(nullToUndefined)
-const optionalNumber = z.number().nullish().transform(nullToUndefined)
-const optionalStringArray = z
-  .array(z.string())
-  .nullish()
-  .transform(nullToUndefined)
-
 const RegistryPackSchema = z
  .object({
-    id: optionalString,
-    name: optionalString,
-    description: optionalString,
-    icon: optionalString,
-    banner_url: optionalString,
-    repository: optionalString,
-    license: optionalString,
-    downloads: optionalNumber,
-    github_stars: optionalNumber,
-    created_at: optionalString,
-    supported_os: optionalStringArray,
-    supported_accelerators: optionalStringArray,
+    id: z.string().optional(),
+    name: z.string().optional(),
+    description: z.string().optional(),
+    icon: z.string().optional(),
+    banner_url: z.string().optional(),
+    repository: z.string().optional(),
+    license: z.string().optional(),
+    downloads: z.number().optional(),
+    github_stars: z.number().optional(),
+    created_at: z.string().optional(),
+    supported_os: z.array(z.string()).optional(),
+    supported_accelerators: z.array(z.string()).optional(),
    publisher: z
      .object({
-        id: optionalString,
-        name: optionalString
+        id: z.string().optional(),
+        name: z.string().optional()
      })
      .passthrough()
-      .nullish()
-      .transform(nullToUndefined),
+      .optional(),
    latest_version: z
      .object({
-        version: optionalString,
-        createdAt: optionalString
+        version: z.string().optional(),
+        createdAt: z.string().optional()
      })
      .passthrough()
-      .nullish()
-      .transform(nullToUndefined)
+      .optional()
  })
  .passthrough()

@@ -154,7 +141,6 @@ async function fetchBatch(
  timeoutMs: number
 ): Promise<BatchResponse> {
  const params = new URLSearchParams()
-  params.set('limit', String(packIds.length))
  for (const packId of packIds) {
    params.append('node_id', packId)
  }
--- a/browser_tests/assets/missing/missing_media_cloud_output_annotation.json
+++ b/browser_tests/assets/missing/missing_media_cloud_output_annotation.json
@@ -1,45 +0,0 @@
-{
-  "last_node_id": 1,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "LoadImage",
-      "pos": [50, 120],
-      "size": [400, 200],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": null
-        },
-        {
-          "name": "MASK",
-          "type": "MASK",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "LoadImage"
-      },
-      "widgets_values": [
-        "147257c95a3e957e0deee73a077cfec89da2d906dd086ca70a2b0c897a9591d6e.png[output]",
-        "image"
-      ]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "offset": [0, 0],
-      "scale": 1
-    }
-  },
-  "version": 0.4
-}
--- a/browser_tests/assets/missing/missing_media_output_annotations.json
+++ b/browser_tests/assets/missing/missing_media_output_annotations.json
@@ -1,84 +0,0 @@
-{
-  "last_node_id": 3,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "LoadImage",
-      "pos": [50, 120],
-      "size": [400, 200],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": null
-        },
-        {
-          "name": "MASK",
-          "type": "MASK",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "LoadImage"
-      },
-      "widgets_values": ["ComfyUI_00001_.png [output]", "image"]
-    },
-    {
-      "id": 2,
-      "type": "LoadVideo",
-      "pos": [430, 120],
-      "size": [400, 200],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "VIDEO",
-          "type": "VIDEO",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "LoadVideo"
-      },
-      "widgets_values": ["clip.mp4 [output]", "image"]
-    },
-    {
-      "id": 3,
-      "type": "LoadAudio",
-      "pos": [810, 120],
-      "size": [400, 200],
-      "flags": {},
-      "order": 2,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "AUDIO",
-          "type": "AUDIO",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "LoadAudio"
-      },
-      "widgets_values": ["sound.wav [output]", null, ""]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "offset": [0, 0],
-      "scale": 1
-    }
-  },
-  "version": 0.4
-}
--- a/browser_tests/assets/plain_video.mp4
+++ b/browser_tests/assets/plain_video.mp4
--- a/browser_tests/assets/widgets/curve_widget.json
+++ b/browser_tests/assets/widgets/curve_widget.json
@@ -1,51 +0,0 @@
-{
-  "last_node_id": 1,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "CurveEditor",
-      "pos": [50, 50],
-      "size": [400, 400],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "histogram",
-          "type": "HISTOGRAM",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "curve",
-          "type": "CURVE",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CurveEditor"
-      },
-      "widgets_values": [
-        {
-          "points": [
-            [0.2, 0.7],
-            [0.8, 0.3]
-          ],
-          "interpolation": "linear"
-        }
-      ]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "offset": [0, 0],
-      "scale": 1
-    }
-  },
-  "version": 0.4
-}
--- a/browser_tests/fixtures/VueNodeHelpers.ts
+++ b/browser_tests/fixtures/VueNodeHelpers.ts
@@ -246,18 +246,4 @@ export class VueNodeHelpers {
      position: { x: box.width / 2, y: box.height * 0.75 }
    })
  }
-  async isSlotConnected(slot: Locator) {
-    const key = await slot.getByTestId('slot-dot').getAttribute('data-slot-key')
-    if (!key) return false
-
-    return await this.page.evaluate((key) => {
-      const [nodeId, type, slotId] = key.split('-')
-      const node = app?.canvas?.graph?.getNodeById(nodeId)
-      if (!node) return false
-
-      return type === 'in'
-        ? node.inputs[Number(slotId)]?.link !== null
-        : !!node.outputs[Number(slotId)].links?.length
-    }, key)
-  }
 }
--- a/browser_tests/fixtures/components/ContextMenu.ts
+++ b/browser_tests/fixtures/components/ContextMenu.ts
@@ -6,16 +6,12 @@ export class ContextMenu {
  public readonly litegraphMenu: Locator
  public readonly litegraphContextMenu: Locator
  public readonly menuItems: Locator
-  protected readonly anyMenu: Locator

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-  async select() {
-    await this.header.click()
-  }
-
  async toggleCollapse(): Promise<void> {
    await this.collapseButton.click()
  }
@@ -66,15 +60,4 @@ export class VueNodeFixture {
  boundingBox(): ReturnType<Locator['boundingBox']> {
    return this.locator.boundingBox()
  }
-
-  getSlot(nameOrLocator: string | Locator) {
-    const slotLocators = this.root
-      .getByTestId('node-widget')
-      .or(this.root.locator('.lg-slot'))
-    const filteredLocator =
-      typeof nameOrLocator === 'string'
-        ? slotLocators.filter({ hasText: nameOrLocator })
-        : slotLocators.filter({ has: nameOrLocator })
-    return filteredLocator.getByTestId('slot-dot').locator('..')
-  }
 }
--- a/browser_tests/tests/appMode.spec.ts
+++ b/browser_tests/tests/appMode.spec.ts
@@ -3,7 +3,6 @@ import {
  comfyExpect as expect
 } from '@e2e/fixtures/ComfyPage'
 import { WidgetSelectDropdownFixture } from '@e2e/fixtures/components/WidgetSelectDropdown'
-import { TestIds } from '@e2e/fixtures/selectors'

 test.describe('App mode usage', () => {
  test('Drag and Drop', async ({ comfyPage, comfyFiles }) => {
@@ -98,9 +97,8 @@ test.describe('App mode usage', () => {
    })
    await sampler.click()

-    await comfyPage.page
-      .getByTestId(TestIds.widgets.selectDefaultSearchInput)
-      .fill('uni')
+    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')

--- a/browser_tests/tests/appModeDropdownClipping.spec.ts
+++ b/browser_tests/tests/appModeDropdownClipping.spec.ts
@@ -87,9 +87,7 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
    const codecSelect = widgetList.getByRole('combobox', { name: 'codec' })
    await codecSelect.click()

-    const overlay = comfyPage.page
-      .getByTestId('widget-select-default-overlay')
-      .first()
+    const overlay = comfyPage.page.locator('.p-select-overlay').first()
    await expect(overlay).toBeVisible()

    await expect
--- a/browser_tests/tests/appModeInputPersistence.spec.ts
+++ b/browser_tests/tests/appModeInputPersistence.spec.ts
@@ -1,44 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '@e2e/fixtures/ComfyPage'
-import {
-  saveCloseAndReopenInBuilder,
-  setupBuilder
-} from '@e2e/fixtures/utils/builderTestUtils'
-
-const WIDGETS = ['seed', 'steps', 'cfg']
-
-test.describe(
-  'App builder input persistence after reload',
-  { tag: '@ui' },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.appMode.enableLinearMode()
-      await comfyPage.settings.setSetting(
-        'Comfy.AppBuilder.VueNodeSwitchDismissed',
-        true
-      )
-    })
-
-    test('persists selected inputs after save and reopen without visibility errors', async ({
-      comfyPage
-    }) => {
-      const { appMode } = comfyPage
-      await setupBuilder(comfyPage, undefined, WIDGETS)
-
-      await appMode.steps.goToInputs()
-      await expect(appMode.select.inputItemTitles).toHaveText(WIDGETS)
-
-      const workflowName = `${Date.now()} input-persistence`
-      await saveCloseAndReopenInBuilder(comfyPage, appMode, workflowName)
-
-      await expect(appMode.select.inputItemTitles).toHaveText(WIDGETS)
-      for (const widget of WIDGETS) {
-        await expect(
-          appMode.select.getInputItemSubtitle(widget)
-        ).not.toContainText('Widget not visible')
-      }
-    })
-  }
-)
--- a/browser_tests/tests/builderReorder.spec.ts
+++ b/browser_tests/tests/builderReorder.spec.ts
@@ -5,18 +5,26 @@ import {
 import type { AppModeHelper } from '@e2e/fixtures/helpers/AppModeHelper'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import {
-  saveCloseAndReopenInBuilder,
+  builderSaveAs,
+  openWorkflowFromSidebar,
  setupBuilder
 } from '@e2e/fixtures/utils/builderTestUtils'

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

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

--- a/browser_tests/tests/curveWidget.spec.ts
+++ b/browser_tests/tests/curveWidget.spec.ts
@@ -1,78 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
-
-test.describe('Curve Widget', { tag: ['@widget', '@vue-nodes'] }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.workflow.loadWorkflow('widgets/curve_widget')
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
-  test(
-    'Loads control points and interpolation from workflow',
-    { tag: '@smoke' },
-    async ({ comfyPage }) => {
-      const node = comfyPage.vueNodes.getNodeLocator('1')
-      await expect(node).toBeVisible()
-
-      const svg = node.getByTestId('curve-editor')
-      await expect(svg).toBeVisible()
-
-      const points = svg.getByTestId('curve-point')
-      await expect(points).toHaveCount(2)
-
-      const [cxs, cys] = await Promise.all([
-        points.evaluateAll((els) =>
-          els.map((e) => Number(e.getAttribute('cx')))
-        ),
-        points.evaluateAll((els) =>
-          els.map((e) => Number(e.getAttribute('cy')))
-        )
-      ])
-      expect(cxs[0]).toBeCloseTo(0.2, 5)
-      expect(cxs[1]).toBeCloseTo(0.8, 5)
-      expect(cys[0]).toBeCloseTo(0.3, 5)
-      expect(cys[1]).toBeCloseTo(0.7, 5)
-    }
-  )
-
-  test(
-    'Interpolation selector reflects loaded value (Linear)',
-    { tag: '@smoke' },
-    async ({ comfyPage }) => {
-      const node = comfyPage.vueNodes.getNodeLocator('1')
-      await expect(node).toBeVisible()
-
-      await expect(node.getByText('Linear', { exact: true })).toBeVisible()
-      await expect(node.getByText('Smooth', { exact: true })).toHaveCount(0)
-    }
-  )
-
-  test(
-    'Click on SVG canvas adds a control point',
-    { tag: '@smoke' },
-    async ({ comfyPage }) => {
-      const node = comfyPage.vueNodes.getNodeLocator('1')
-      const svg = node.getByTestId('curve-editor')
-      await expect(svg).toBeVisible()
-      await expect(svg.getByTestId('curve-point')).toHaveCount(2)
-
-      const position = await svg.evaluate((el) => {
-        const svgEl = el as SVGSVGElement
-        const ctm = svgEl.getScreenCTM()
-        if (!ctm) throw new Error('SVG has no screen CTM')
-        const pt = svgEl.createSVGPoint()
-        pt.x = 0.5
-        pt.y = 1 - 0.5 // curve-Y is inverted vs SVG-Y
-        const screen = pt.matrixTransform(ctm)
-        const rect = svgEl.getBoundingClientRect()
-        return { x: screen.x - rect.left, y: screen.y - rect.top }
-      })
-
-      await svg.click({ position })
-
-      await expect(svg.getByTestId('curve-point')).toHaveCount(3)
-    }
-  )
-})
--- a/browser_tests/tests/dialog.spec.ts
+++ b/browser_tests/tests/dialog.spec.ts
@@ -247,14 +247,6 @@ test.describe('Cloud notification dialog', () => {
    await dialog.back.click()
    await expect(dialog.root).toBeHidden()
  })
-
-  test('Should not advertise free monthly credits', async ({ comfyPage }) => {
-    const dialog = new CloudNotification(comfyPage.page)
-    await dialog.open()
-
-    await expect(dialog.root.getByText(/Free Credits/i)).toHaveCount(0)
-    await expect(dialog.root.getByText(/400/)).toHaveCount(0)
-  })
 })

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

-// NaN-variant fixtures embed only an API-format prompt containing bare
-// `NaN`/`Infinity` tokens (Python's `json.dumps` default). The loader must
-// tolerate Python generated JSON for these to import successfully.
-const NAN_FIXTURES: readonly MetadataFixture[] = [
-  { fileName: 'with_nan_metadata.json', parser: 'json' },
-  { fileName: 'with_nan_metadata.png', parser: 'png' },
-  { fileName: 'with_nan_metadata.avif', parser: 'avif' },
-  { fileName: 'with_nan_metadata.webp', parser: 'webp' },
-  { fileName: 'with_nan_metadata.flac', parser: 'flac' },
-  { fileName: 'with_nan_metadata.mp3', parser: 'mp3' },
-  { fileName: 'with_nan_metadata.opus', parser: 'ogg' },
-  { fileName: 'with_nan_metadata.mp4', parser: 'isobmff' },
-  { fileName: 'with_nan_metadata.webm', parser: 'ebml (webm)' }
-] as const
-
 test.describe(
  'Metadata drop-to-load workflow import',
  { tag: ['@workflow'] },
@@ -73,42 +58,5 @@ test.describe(
        })
      })
    }
-
-    for (const { fileName, parser } of NAN_FIXTURES) {
-      test(`loads Python JSON prompt with NaN/Infinity from ${fileName} (${parser})`, async ({
-        comfyPage
-      }) => {
-        await test.step(`drop ${fileName} on canvas`, async () => {
-          await comfyPage.dragDrop.dragAndDropFilePath(
-            metadataFixturePath(fileName)
-          )
-        })
-
-        await test.step('graph contains only the embedded KSampler', async () => {
-          await expect
-            .poll(() => comfyPage.nodeOps.getGraphNodesCount())
-            .toBe(1)
-
-          const ksamplers =
-            await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-          expect(
-            ksamplers,
-            'exactly one KSampler should have been loaded from the NaN-laden prompt'
-          ).toHaveLength(1)
-        })
-
-        await test.step('NaN-coerced widget values are 0', async () => {
-          const [ksampler] =
-            await comfyPage.nodeOps.getNodeRefsByType('KSampler')
-          for (const widgetName of ['cfg', 'denoise']) {
-            const widget = await ksampler.getWidgetByName(widgetName)
-            expect(
-              await widget.getValue(),
-              `${widgetName} should be 0 after NaN coercion to null`
-            ).toBe(0)
-          }
-        })
-      })
-    }
  }
 )
--- a/browser_tests/tests/previewAsText.spec.ts
+++ b/browser_tests/tests/previewAsText.spec.ts
@@ -1,7 +1,7 @@
 import {
  comfyPageFixture as test,
  comfyExpect as expect
-} from '@e2e/fixtures/ComfyPage'
+} from '../fixtures/ComfyPage'

 test.describe('Preview as Text node', () => {
  test('does not include preview widget values in the API prompt', async ({
--- a/browser_tests/tests/propertiesPanel/errorsTabMissingMediaRuntime.spec.ts
+++ b/browser_tests/tests/propertiesPanel/errorsTabMissingMediaRuntime.spec.ts
@@ -1,358 +0,0 @@
-import { expect, mergeTests } from '@playwright/test'
-import type { Page, Route } from '@playwright/test'
-import type { Asset, ListAssetsResponse } from '@comfyorg/ingest-types'
-
-import {
-  assetRequestIncludesTag,
-  createCloudAssetsFixture
-} from '@e2e/fixtures/assetApiFixture'
-import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
-import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
-import {
-  createRouteMockJob,
-  jobsRouteFixture
-} from '@e2e/fixtures/jobsRouteFixture'
-import { TestIds } from '@e2e/fixtures/selectors'
-import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
-import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
-
-const ossTest = mergeTests(comfyPageFixture, jobsRouteFixture)
-const outputHash =
-  '147257c95a3e957e0deee73a077cfec89da2d906dd086ca70a2b0c897a9591d6e.png'
-const plainVideoFileName = 'plain_video.mp4'
-const graphDropPosition = { x: 500, y: 300 }
-const missingMediaUploadObservationMs = 1_000
-const missingMediaUploadPollMs = 100
-
-const cloudOutputAsset: Asset = {
-  id: 'test-output-hash-001',
-  name: 'ComfyUI_00001_.png',
-  asset_hash: outputHash,
-  size: 4_194_304,
-  mime_type: 'image/png',
-  tags: ['output'],
-  created_at: '2026-05-01T00:00:00Z',
-  updated_at: '2026-05-01T00:00:00Z',
-  last_access_time: '2026-05-01T00:00:00Z'
-}
-
-const cloudUploadedVideoAsset: Asset = {
-  id: 'test-uploaded-video-001',
-  name: plainVideoFileName,
-  asset_hash: plainVideoFileName,
-  size: 1_024,
-  mime_type: 'video/mp4',
-  tags: ['input'],
-  created_at: '2026-05-01T00:00:00Z',
-  updated_at: '2026-05-01T00:00:00Z',
-  last_access_time: '2026-05-01T00:00:00Z'
-}
-
-// The Cloud test app starts with a default LoadImage node. Keep that baseline
-// input resolvable so this spec only observes the media it creates.
-const cloudDefaultGraphInputAsset: Asset = {
-  id: 'test-default-input-001',
-  name: '00000000000000000000000Aexample.png',
-  asset_hash: '00000000000000000000000Aexample.png',
-  size: 1_024,
-  mime_type: 'image/png',
-  tags: ['input'],
-  created_at: '2026-05-01T00:00:00Z',
-  updated_at: '2026-05-01T00:00:00Z',
-  last_access_time: '2026-05-01T00:00:00Z'
-}
-
-interface CloudUploadAssetState {
-  isUploadedAssetAvailable: boolean
-}
-
-const cloudOutputTest = createCloudAssetsFixture([cloudOutputAsset])
-const cloudUploadAssetStateByPage = new WeakMap<Page, CloudUploadAssetState>()
-const cloudUploadRaceTest = comfyPageFixture.extend<{
-  markUploadedCloudAssetAvailable: () => void
-}>({
-  page: async ({ page }, use) => {
-    const state: CloudUploadAssetState = {
-      isUploadedAssetAvailable: false
-    }
-    cloudUploadAssetStateByPage.set(page, state)
-
-    const assetsRouteHandler = async (route: Route) => {
-      const allAssets = [
-        cloudDefaultGraphInputAsset,
-        ...(state.isUploadedAssetAvailable ? [cloudUploadedVideoAsset] : [])
-      ]
-      const includeTags =
-        new URL(route.request().url()).searchParams
-          .get('include_tags')
-          ?.split(',')
-          .filter(Boolean) ?? []
-      const assets = includeTags.length
-        ? allAssets.filter((asset) =>
-            asset.tags?.some((tag) => includeTags.includes(tag))
-          )
-        : allAssets
-      const response: ListAssetsResponse = {
-        assets,
-        total: assets.length,
-        has_more: false
-      }
-
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(response)
-      })
-    }
-
-    await page.route(/\/api\/assets(?:\?.*)?$/, assetsRouteHandler)
-    await use(page)
-    await page.unroute(/\/api\/assets(?:\?.*)?$/, assetsRouteHandler)
-    cloudUploadAssetStateByPage.delete(page)
-  },
-  markUploadedCloudAssetAvailable: async ({ page }, use) => {
-    await use(() => {
-      const state = cloudUploadAssetStateByPage.get(page)
-      if (state) state.isUploadedAssetAvailable = true
-    })
-  }
-})
-
-async function enableErrorsTab(comfyPage: ComfyPage) {
-  await comfyPage.settings.setSetting(
-    'Comfy.RightSidePanel.ShowErrorsTab',
-    true
-  )
-}
-
-function getErrorOverlay(comfyPage: ComfyPage) {
-  return comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
-}
-
-async function expectNoErrorsTab(comfyPage: ComfyPage) {
-  await expect(getErrorOverlay(comfyPage)).toBeHidden()
-
-  const panel = new PropertiesPanelHelper(comfyPage.page)
-  await panel.open(comfyPage.actionbar.propertiesButton)
-  await expect(
-    panel.root.getByTestId(TestIds.propertiesPanel.errorsTab)
-  ).toBeHidden()
-}
-
-async function delayNextUpload(comfyPage: ComfyPage) {
-  let releaseUpload!: () => void
-  let resolveUploadStarted!: () => void
-  const uploadStarted = new Promise<void>((resolve) => {
-    resolveUploadStarted = resolve
-  })
-  const release = new Promise<void>((resolve) => {
-    releaseUpload = resolve
-  })
-
-  const uploadRouteHandler = async (route: Route) => {
-    resolveUploadStarted()
-    await release
-    await route.continue()
-  }
-
-  await comfyPage.page.route('**/upload/image', uploadRouteHandler)
-
-  return {
-    waitForUploadStarted: () => uploadStarted,
-    finishUpload: async () => {
-      const uploadResponse = comfyPage.page.waitForResponse(
-        (response) =>
-          response.url().includes('/upload/image') && response.status() === 200,
-        { timeout: 10_000 }
-      )
-      releaseUpload()
-      try {
-        await uploadResponse
-      } finally {
-        await comfyPage.page.unroute('**/upload/image', uploadRouteHandler)
-      }
-    }
-  }
-}
-
-async function expectLoadVideoUploading(comfyPage: ComfyPage) {
-  await expect
-    .poll(
-      () =>
-        comfyPage.page.evaluate(() =>
-          window.app!.graph.nodes.some(
-            (node) => node.type === 'LoadVideo' && node.isUploading
-          )
-        ),
-      { timeout: 5_000 }
-    )
-    .toBe(true)
-}
-
-async function expectNoMissingMediaDuringUpload(comfyPage: ComfyPage) {
-  await comfyPage.nextFrame()
-  await comfyPage.nextFrame()
-
-  let sawErrorOverlay = false
-  const startedAt = Date.now()
-  await expect
-    .poll(
-      async () => {
-        sawErrorOverlay =
-          sawErrorOverlay || (await getErrorOverlay(comfyPage).isVisible())
-        return (
-          !sawErrorOverlay &&
-          Date.now() - startedAt >= missingMediaUploadObservationMs
-        )
-      },
-      {
-        timeout: missingMediaUploadObservationMs + missingMediaUploadPollMs * 5,
-        intervals: [missingMediaUploadPollMs]
-      }
-    )
-    .toBe(true)
-}
-
-function outputHistoryJobs(): RawJobListItem[] {
-  return [
-    createRouteMockJob({
-      id: 'history-output-image',
-      preview_output: {
-        filename: 'ComfyUI_00001_.png',
-        subfolder: '',
-        type: 'output',
-        nodeId: '1',
-        mediaType: 'images'
-      }
-    }),
-    createRouteMockJob({
-      id: 'history-output-video',
-      preview_output: {
-        filename: 'clip.mp4',
-        subfolder: '',
-        type: 'output',
-        nodeId: '2',
-        mediaType: 'video'
-      }
-    }),
-    createRouteMockJob({
-      id: 'history-output-audio',
-      preview_output: {
-        filename: 'sound.wav',
-        subfolder: '',
-        type: 'output',
-        nodeId: '3',
-        mediaType: 'audio'
-      }
-    })
-  ]
-}
-
-ossTest.describe(
-  'Errors tab - OSS missing media runtime sources',
-  { tag: '@ui' },
-  () => {
-    ossTest.beforeEach(async ({ comfyPage }) => {
-      await enableErrorsTab(comfyPage)
-    })
-
-    ossTest(
-      'resolves annotated output media from job history',
-      async ({ comfyPage, jobsRoutes }) => {
-        await jobsRoutes.mockJobsHistory(outputHistoryJobs())
-        await jobsRoutes.mockJobsQueue([])
-
-        await comfyPage.workflow.loadWorkflow(
-          'missing/missing_media_output_annotations'
-        )
-
-        await expectNoErrorsTab(comfyPage)
-      }
-    )
-
-    ossTest(
-      'does not surface missing media while dropped video upload is in progress',
-      async ({ comfyFiles, comfyPage }) => {
-        await comfyPage.nodeOps.clearGraph()
-        const delayedUpload = await delayNextUpload(comfyPage)
-
-        await comfyPage.dragDrop.dragAndDropFile(plainVideoFileName, {
-          dropPosition: graphDropPosition
-        })
-        await delayedUpload.waitForUploadStarted()
-        comfyFiles.deleteAfterTest({
-          filename: plainVideoFileName,
-          type: 'input'
-        })
-
-        await expectLoadVideoUploading(comfyPage)
-        await expectNoMissingMediaDuringUpload(comfyPage)
-
-        await delayedUpload.finishUpload()
-        await expect(getErrorOverlay(comfyPage)).toBeHidden()
-      }
-    )
-  }
-)
-
-cloudOutputTest.describe(
-  'Errors tab - Cloud missing media runtime sources',
-  { tag: '@cloud' },
-  () => {
-    cloudOutputTest.beforeEach(async ({ comfyPage }) => {
-      await enableErrorsTab(comfyPage)
-    })
-
-    cloudOutputTest(
-      'resolves compact annotated output media from output assets',
-      async ({ cloudAssetRequests, comfyPage }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'missing/missing_media_cloud_output_annotation'
-        )
-
-        await expect
-          .poll(() =>
-            cloudAssetRequests.some((url) =>
-              assetRequestIncludesTag(url, 'output')
-            )
-          )
-          .toBe(true)
-        await expectNoErrorsTab(comfyPage)
-      }
-    )
-  }
-)
-
-cloudUploadRaceTest.describe(
-  'Errors tab - Cloud missing media upload race',
-  { tag: '@cloud' },
-  () => {
-    cloudUploadRaceTest.beforeEach(async ({ comfyPage }) => {
-      await enableErrorsTab(comfyPage)
-    })
-
-    cloudUploadRaceTest(
-      'does not surface missing media while dropped video upload is in progress',
-      async ({ comfyFiles, comfyPage, markUploadedCloudAssetAvailable }) => {
-        await comfyPage.nodeOps.clearGraph()
-        const delayedUpload = await delayNextUpload(comfyPage)
-
-        await comfyPage.dragDrop.dragAndDropFile(plainVideoFileName, {
-          dropPosition: graphDropPosition
-        })
-        await delayedUpload.waitForUploadStarted()
-        comfyFiles.deleteAfterTest({
-          filename: plainVideoFileName,
-          type: 'input'
-        })
-
-        await expectLoadVideoUploading(comfyPage)
-        await expectNoMissingMediaDuringUpload(comfyPage)
-
-        markUploadedCloudAssetAvailable()
-        await delayedUpload.finishUpload()
-        await expect(getErrorOverlay(comfyPage)).toBeHidden()
-      }
-    )
-  }
-)
--- a/browser_tests/tests/queue/queueOverlay.spec.ts
+++ b/browser_tests/tests/queue/queueOverlay.spec.ts
@@ -1,54 +1,56 @@
 import { expect, mergeTests } from '@playwright/test'
+import type { JobEntry } from '@comfyorg/ingest-types'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
      await expect(comfyPage.templates.content).toBeVisible()
--- a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png
--- a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-overlapped-after-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-overlapped-after-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-overlapped-before-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-overlapped-before-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-widget-overlapped-after-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-widget-overlapped-after-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-widget-overlapped-before-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/interactions/node/bringToFront.spec.ts-snapshots/bring-to-front-widget-overlapped-before-chromium-linux.png
--- a/browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts
@@ -75,24 +75,6 @@ test.describe('Vue Node Context Menu', { tag: '@vue-nodes' }, () => {
      await expect(renamedNode).toBeVisible()
    })

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

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

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

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

  test.describe('subgraph propagation', { tag: '@subgraph' }, () => {
--- a/browser_tests/tests/vueNodes/nodeStates/error.spec.ts-snapshots/vue-node-required-input-missing-slot-error-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/error.spec.ts-snapshots/vue-node-required-input-missing-slot-error-chromium-linux.png
--- a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png
--- a/browser_tests/tests/vueNodes/rerouteNodeSize.spec.ts-snapshots/vue-reroute-node-compact-chromium-linux.png
+++ b/browser_tests/tests/vueNodes/rerouteNodeSize.spec.ts-snapshots/vue-reroute-node-compact-chromium-linux.png
--- a/browser_tests/tests/vueNodes/widgets/combo/comboWidget.spec.ts
+++ b/browser_tests/tests/vueNodes/widgets/combo/comboWidget.spec.ts
@@ -2,12 +2,9 @@ import {
  comfyExpect as expect,
  comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
-import { TestIds } from '@e2e/fixtures/selectors'
-import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
-import type { Locator } from '@playwright/test'

-test.describe('Vue Combo Widget', { tag: ['@vue-nodes', '@widget'] }, () => {
-  async function openSamplerDropdown(comfyPage: ComfyPage) {
+test.describe('Vue Combo Widget', { tag: '@vue-nodes' }, () => {
+  test('opens a dropdown that lists sampler options', async ({ comfyPage }) => {
    await comfyPage.workflow.loadWorkflow('vueNodes/linked-int-widget')

    const samplerCombo = comfyPage.vueNodes
@@ -16,120 +13,6 @@ test.describe('Vue Combo Widget', { tag: ['@vue-nodes', '@widget'] }, () => {

    await samplerCombo.click()

-    const viewport = comfyPage.page.getByTestId(
-      TestIds.widgets.selectDefaultViewport
-    )
-    await expect(viewport).toBeVisible()
-
-    return viewport
-  }
-
-  async function pressDropdownScrollbar(
-    comfyPage: ComfyPage,
-    viewport: Locator
-  ) {
-    const { x, y } = await getScrollbarPressPoint(viewport)
-
-    await comfyPage.page.mouse.move(x, y)
-    await comfyPage.page.mouse.down()
-    await expect(viewport).toBeVisible()
-    await comfyPage.page.mouse.up()
-  }
-
-  async function getCanvasViewport(comfyPage: ComfyPage) {
-    return comfyPage.page.evaluate(() => ({
-      scale: window.app!.canvas.ds.scale,
-      offset: [...window.app!.canvas.ds.offset]
-    }))
-  }
-
-  async function getViewportBox(viewport: Locator) {
-    await expect.poll(() => viewport.boundingBox()).not.toBeNull()
-
-    const box = await viewport.boundingBox()
-    if (!box) {
-      throw new Error('Widget select viewport is not visible')
-    }
-
-    return box
-  }
-
-  async function getScrollbarPressPoint(viewport: Locator) {
-    await expect
-      .poll(() =>
-        viewport.evaluate(
-          (element) => element.scrollHeight > element.clientHeight
-        )
-      )
-      .toBe(true)
-
-    return viewport.evaluate((element) => {
-      const viewportElement = element as HTMLElement
-      const rect = viewportElement.getBoundingClientRect()
-      const scrollbarWidth =
-        viewportElement.offsetWidth - viewportElement.clientWidth
-      const scrollbarInset = scrollbarWidth > 0 ? scrollbarWidth / 2 : 2
-
-      return {
-        x: rect.right - scrollbarInset,
-        y: rect.top + Math.min(rect.height / 2, 20)
-      }
-    })
-  }
-
-  async function getMixedGraphSamplerCombos(comfyPage: ComfyPage) {
-    await comfyPage.workflow.loadWorkflow('groups/mixed_graph_items')
-    await comfyPage.vueNodes.waitForNodes(3)
-
-    const nodes = comfyPage.vueNodes.getNodeByTitle('KSampler')
-    await expect(nodes).toHaveCount(3)
-
-    return {
-      firstSamplerCombo: nodes
-        .nth(0)
-        .getByRole('combobox', { name: 'sampler_name', exact: true }),
-      secondSamplerCombo: nodes
-        .nth(2)
-        .getByRole('combobox', { name: 'sampler_name', exact: true })
-    }
-  }
-
-  async function getActiveWidgetSelectViewport(comfyPage: ComfyPage) {
-    const viewport = comfyPage.page.getByTestId(
-      TestIds.widgets.selectDefaultViewport
-    )
-    await expect(viewport).toBeVisible()
-    return viewport
-  }
-
-  async function expectWheelScrollsDropdownWithoutMovingCanvas(
-    comfyPage: ComfyPage,
-    viewport: Locator
-  ) {
-    const canvasViewportBefore = await getCanvasViewport(comfyPage)
-    await viewport.evaluate((el) => {
-      el.scrollTop = 0
-    })
-    const scrollBefore = 0
-    const box = await getViewportBox(viewport)
-
-    await comfyPage.page.mouse.move(
-      box.x + box.width / 2,
-      box.y + Math.min(box.height / 2, 40)
-    )
-    await comfyPage.page.mouse.wheel(0, 120)
-
-    await expect
-      .poll(() => viewport.evaluate((el) => el.scrollTop))
-      .toBeGreaterThan(scrollBefore)
-
-    const canvasViewportAfter = await getCanvasViewport(comfyPage)
-    expect(canvasViewportAfter).toEqual(canvasViewportBefore)
-  }
-
-  test('opens a dropdown that lists sampler options', async ({ comfyPage }) => {
-    await openSamplerDropdown(comfyPage)
-
    // The option list should include at least a few known samplers
    await expect(
      comfyPage.page.getByRole('option', { name: 'euler', exact: true })
@@ -157,99 +40,6 @@ test.describe('Vue Combo Widget', { tag: ['@vue-nodes', '@widget'] }, () => {
    await expect(samplerCombo).toContainText('dpmpp_2m')
  })

-  test('mouse wheel scrolls the dropdown list instead of zooming the canvas', async ({
-    comfyPage
-  }) => {
-    const viewport = await openSamplerDropdown(comfyPage)
-
-    await expectWheelScrollsDropdownWithoutMovingCanvas(comfyPage, viewport)
-  })
-
-  test('keeps the dropdown open when the scrollbar is pressed', async ({
-    comfyPage
-  }) => {
-    const viewport = await openSamplerDropdown(comfyPage)
-
-    await pressDropdownScrollbar(comfyPage, viewport)
-    await expect(viewport).toBeVisible()
-  })
-
-  test('closes the dropdown when clicking outside', async ({ comfyPage }) => {
-    const viewport = await openSamplerDropdown(comfyPage)
-
-    await comfyPage.page.mouse.click(10, 10)
-
-    await expect(viewport).toBeHidden()
-  })
-
-  test('keeps wheel scrolling captured after the scrollbar is pressed', async ({
-    comfyPage
-  }) => {
-    const viewport = await openSamplerDropdown(comfyPage)
-
-    await pressDropdownScrollbar(comfyPage, viewport)
-
-    await expectWheelScrollsDropdownWithoutMovingCanvas(comfyPage, viewport)
-  })
-
-  test('closes the previous dropdown when another node widget opens', async ({
-    comfyPage
-  }) => {
-    const { firstSamplerCombo, secondSamplerCombo } =
-      await getMixedGraphSamplerCombos(comfyPage)
-
-    await firstSamplerCombo.click()
-    const viewport = await getActiveWidgetSelectViewport(comfyPage)
-
-    await pressDropdownScrollbar(comfyPage, viewport)
-    await expect(viewport).toBeVisible()
-
-    await secondSamplerCombo.click()
-    await expect(
-      comfyPage.page.getByTestId(TestIds.widgets.selectDefaultViewport)
-    ).toHaveCount(1)
-    await expect(
-      comfyPage.page.getByTestId(TestIds.widgets.selectDefaultViewport)
-    ).toBeVisible()
-  })
-
-  test('preserves dropdown scroll capture when switching between node widgets', async ({
-    comfyPage
-  }) => {
-    const { firstSamplerCombo, secondSamplerCombo } =
-      await getMixedGraphSamplerCombos(comfyPage)
-
-    await firstSamplerCombo.click()
-    const viewport = await getActiveWidgetSelectViewport(comfyPage)
-
-    await expectWheelScrollsDropdownWithoutMovingCanvas(comfyPage, viewport)
-
-    await pressDropdownScrollbar(comfyPage, viewport)
-    await expect(viewport).toBeVisible()
-
-    await expectWheelScrollsDropdownWithoutMovingCanvas(comfyPage, viewport)
-
-    await secondSamplerCombo.click()
-    await expect(
-      comfyPage.page.getByTestId(TestIds.widgets.selectDefaultViewport)
-    ).toHaveCount(1)
-
-    const secondViewport = await getActiveWidgetSelectViewport(comfyPage)
-
-    await expectWheelScrollsDropdownWithoutMovingCanvas(
-      comfyPage,
-      secondViewport
-    )
-
-    await pressDropdownScrollbar(comfyPage, secondViewport)
-    await expect(secondViewport).toBeVisible()
-
-    await expectWheelScrollsDropdownWithoutMovingCanvas(
-      comfyPage,
-      secondViewport
-    )
-  })
-
  test('persists the selected combo value across a serialize and reload round-trip', async ({
    comfyPage
  }) => {
--- a/index.html
+++ b/index.html
@@ -26,10 +26,6 @@
        width: 100%;
        height: 100%;
        margin: 0;
-        /* Disable trackpad two-finger horizontal swipe back/forward navigation
-           and other overscroll gestures. ComfyUI is a full-screen editor; the
-           browser's overscroll behaviors only ever leave or break the workflow. */
-        overscroll-behavior: none;
      }
      body {
        display: grid;
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@comfyorg/comfyui-frontend",
-  "version": "1.45.9",
+  "version": "1.45.6",
  "private": true,
  "description": "Official front-end implementation of ComfyUI",
  "homepage": "https://comfy.org",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -36,7 +36,7 @@ catalog:
  '@storybook/addon-mcp': 0.1.6
  '@storybook/vue3': ^10.2.10
  '@storybook/vue3-vite': ^10.2.10
-  '@tailwindcss/vite': ^4.3.0
+  '@tailwindcss/vite': ^4.2.0
  '@tanstack/vue-virtual': ^3.13.12
  '@testing-library/jest-dom': ^6.9.1
  '@testing-library/user-event': ^14.6.1
@@ -112,7 +112,7 @@ catalog:
  rollup-plugin-visualizer: ^6.0.4
  storybook: ^10.2.10
  stylelint: ^16.26.1
-  tailwindcss: ^4.3.0
+  tailwindcss: ^4.2.0
  three: ^0.170.0
  tailwindcss-primeui: ^0.6.1
  tsx: ^4.15.6
--- a/scripts/generate-embedded-metadata-test-files.py
+++ b/scripts/generate-embedded-metadata-test-files.py
@@ -36,19 +36,8 @@ WORKFLOW = {
 }
 PROMPT = {'1': {'class_type': 'KSampler', 'inputs': {}}}

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


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


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

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


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

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

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


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

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

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

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

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

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

 const { t } = useI18n()

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

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

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

 const nodeBookmarkStore = useNodeBookmarkStore()

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

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

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

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

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

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

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

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

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

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

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

    vi.resetAllMocks()
-    mockSettingValues()
  })

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  describe('isPanning watcher', () => {
--- a/src/components/maskeditor/PointerZone.vue
+++ b/src/components/maskeditor/PointerZone.vue
@@ -11,7 +11,7 @@
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
-    @wheel.prevent="handleWheel"
+    @wheel="handleWheel"
    @contextmenu.prevent
  />
 </template>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Connor Byrne	dd17fcf8c6	fix: use real LGraphNode instance in createMockNode fixture Instead of using `as unknown as LGraphNode` type assertion, instantiate a real LGraphNode and assign test-specific overrides. This eliminates the type escape at the fixture level while maintaining test flexibility. Addresses review feedback: https://github.com/Comfy-Org/ComfyUI_frontend/pull/11397#discussion_r3186572593 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-05-13 13:45:37 -07:00
Connor Byrne	cfc65bda75	Merge remote-tracking branch 'origin/main' into test/cov-litegraphService	2026-05-13 13:17:40 -07:00
Connor Byrne	f7f237658c	test: cover getCanvasCenter when app.canvas is undefined Promotes the previously hardcoded app mock to a hoisted, mutable mockApp object so tests can simulate the runtime case where app.canvas itself is still uninitialized. Adds a test asserting getCanvasCenter() returns [0, 0] without throwing in that state, exercising the optional chain on app.canvas?.ds?.visible_area. Addresses review feedback: https://github.com/Comfy-Org/ComfyUI_frontend/pull/11397#discussion_r3176135138	2026-05-04 14:06:43 -07:00
Connor Byrne	f88492387b	test: type litegraph fixtures and remove call-site as-never casts Localizes type assertions inside the mock factories so callers receive properly-typed LGraphNode and IBaseWidget values, eliminating the 'node as never' / 'widget as never' casts at every test call site. Replaces .call(null as never) on context-menu callbacks with a typed helper, and drops as-never on goToNode IDs and updatePreviews node fixtures. Addresses review feedback: https://github.com/Comfy-Org/ComfyUI_frontend/pull/11397#discussion_r3176135135	2026-05-04 14:05:16 -07:00
Connor Byrne	c09f1d7d15	test: remove change-detector test for Symbol exports Addresses review feedback: https://github.com/Comfy-Org/ComfyUI_frontend/pull/11397#discussion_r3176135137	2026-05-04 14:01:07 -07:00
Christian Byrne	4a40c050d9	Merge branch 'main' into test/cov-litegraphService	2026-05-04 13:27:33 -07:00
bymyself	35492bc530	fix: assert error is logged in updatePreviews error test Addresses review feedback: https://github.com/Comfy-Org/ComfyUI_frontend/pull/11397#discussion_r3114595641	2026-04-21 18:47:47 -07:00
bymyself	c30177a749	fix: reset mock implementations in beforeEach to prevent leakage Addresses review feedback: https://github.com/Comfy-Org/ComfyUI_frontend/pull/11397#discussion_r3114595634	2026-04-21 18:47:47 -07:00
bymyself	cb443d455e	fix: use shared nodeOutputStore mock instance via vi.hoisted Addresses review feedback: https://github.com/Comfy-Org/ComfyUI_frontend/pull/11397#discussion_r3114595624	2026-04-21 18:47:47 -07:00
bymyself	a378ebb5af	test: add unit tests for litegraphService	2026-04-20 18:45:03 -07:00