fix(browser-tests): deep-clone TemplateHelper state to preserve immutability

Replace shallow array spreads with structuredClone-based deep copies in
the constructor, configure(), and getTemplates(). Previously nested
TemplateInfo objects were shared between caller-supplied input, helper
internal state, and getTemplates() return values, which could leak
mutation across tests.

Addresses review feedback:
https://github.com/Comfy-Org/ComfyUI_frontend/pull/11837#discussion_r3176283430

.claude/skills/perf-fix-with-proof/SKILL.md

@@ -171,7 +171,7 @@ test('canvas text rendering with many nodes', async ({ comfyPage }) => {
 | ----------------- | ----------------------------------------------------- |
 | Perf test file    | `browser_tests/tests/performance.spec.ts`             |
 | PerformanceHelper | `browser_tests/fixtures/helpers/PerformanceHelper.ts` |
-| Perf reporter     | `browser_tests/helpers/perfReporter.ts`               |
+| Perf reporter     | `browser_tests/fixtures/utils/perfReporter.ts`        |
 | CI workflow       | `.github/workflows/ci-perf-report.yaml`               |
 | Report generator  | `scripts/perf-report.ts`                              |
 | Stats utilities   | `scripts/perf-stats.ts`                               |

.claude/skills/reviewing-unit-tests/SKILL.md

@@ -0,0 +1,156 @@
+---
+name: reviewing-unit-tests
+description: Use when reviewing Vitest unit-test diffs in ComfyUI_frontend, especially new mocks, store tests, component tests, or bugfix regression tests.
+---
+
+# Reviewing Unit Tests for ComfyUI_frontend
+
+## Overview
+
+Review for behavior and current repo rules, not motion. Compare to authoritative rules, not prior diffs or legacy snippets.
+
+## Review Workflow
+
+1. Identify the test type: component, store, composable, util, or bugfix regression.
+2. Name the behavior the test proves. If you cannot say it in one sentence, request changes.
+3. Open the authoritative doc section before judging structure.
+4. Scan the red flags below.
+5. State the verdict first. Name the failure mode. Cite the doc or rule.
+
+## Source of Truth / Precedence
+
+When docs and examples conflict, use this order:
+
+1. Explicit repo rules, lint rules, and note blocks.
+2. [`docs/testing/vitest-patterns.md`](../../../docs/testing/vitest-patterns.md)
+3. Rule sections in [`docs/testing/unit-testing.md`](../../../docs/testing/unit-testing.md), [`docs/testing/store-testing.md`](../../../docs/testing/store-testing.md), and [`docs/testing/component-testing.md`](../../../docs/testing/component-testing.md)
+4. Example snippets
+5. Prior diffs
+
+Apply these repo-specific clarifications:
+
+- [`docs/testing/component-testing.md`](../../../docs/testing/component-testing.md) starts with the authoritative rule: new component tests use `@testing-library/vue` with `@testing-library/user-event`. The `@vue/test-utils` snippets below it are legacy examples.
+- [`docs/testing/store-testing.md`](../../../docs/testing/store-testing.md) still contains `as any` examples. Treat them as legacy snippets, not approval for new or edited test code.
+- If docs conflict, prefer the stricter newer rule and call out the doc ambiguity. Do not approve through it.
+- Motion != fix.
+
+## 30-Second Red Flags
+
+| If you see...                                                                             | Failure mode                    | Default action                                                |
+| ----------------------------------------------------------------------------------------- | ------------------------------- | ------------------------------------------------------------- |
+| New `@vue/test-utils` import in a new component test                                      | legacy test API                 | Request changes                                               |
+| `vi.mock('vue-i18n', ...)`                                                                | mocked i18n                     | Request changes                                               |
+| `as any`, `@ts-expect-error`, `as Mock`, `as ReturnType<typeof vi.fn>`, `as unknown as X` | unnecessary cast or type escape | Request changes unless the author proves no safer type exists |
+| `getXMock()`, renamed wrapper, or helper that only returns a mocked value                 | alias-by-renaming               | Request changes                                               |
+| `beforeEach` recreates the return object for a module-mocked composable or service        | shared mock setup drift         | Request changes                                               |
+| Assertions only check defaults, mock plumbing, or CSS hooks                               | non-behavioral test             | Request changes                                               |
+| Bugfix test has no proof it fails on pre-fix code                                         | unproven regression             | Request changes                                               |
+
+## Rationalization Table
+
+| Excuse                              | Reality                                                                                                |
+| ----------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| "I restructured the mocks"          | If the indirection stayed, nothing improved. Flag `alias-by-renaming`.                                 |
+| "The docs do it"                    | Rule, note, and lint beat legacy snippet. Compare to the current rule, not the nearest example.        |
+| "TypeScript required the cast"      | `vi.mocked()` usually narrows mock methods. Assertion-only references need no cast.                    |
+| "Putting it in `beforeEach` is DRY" | Recreating module mock state in hooks hides singleton behavior and drifts from the documented pattern. |
+| "It is only a nit"                  | Explicit repo-rule violations are never nits.                                                          |
+| "No behavior changed, just cleanup" | Motion != fix. Ask what behavior got stronger.                                                         |
+| "Mental revert is enough"           | For bugfix tests, establish red on pre-fix code or ask the author to show it.                          |
+
+## Mocking Rules
+
+- Fail helpers that do not remove repeated setup, encode domain meaning, or simplify assertions. Barely earning the abstraction is not enough.
+- For composables with reactive or singleton state, define stable mock state inside the `vi.mock()` factory. Access it per test via the composable itself. See [`docs/testing/unit-testing.md`](../../../docs/testing/unit-testing.md) "Mocking Composables with Reactive State".
+- This does not ban local test data builders or per-test `vi.spyOn(...)`.
+- Mock seams, not the project-owned module you are trying to exercise. For store tests, prefer real Pinia plus `createTestingPinia({ stubActions: false })` per [`docs/testing/vitest-patterns.md`](../../../docs/testing/vitest-patterns.md) and [`docs/testing/store-testing.md`](../../../docs/testing/store-testing.md).
+
+### Alias-by-Renaming
+
+```ts
+// Before
+const mockAdd = vi.hoisted(() => vi.fn())
+
+// After: same indirection, new name
+function getToastAddMock() {
+  return useToast().add
+}
+```
+
+If the wrapper only renames or relays a mocked value, fail it. Inline the lookup at the call site or fetch the singleton mock via the documented pattern.
+
+### `vi.mocked()` Scope
+
+| Use case                                                        | `vi.mocked()` required? |
+| --------------------------------------------------------------- | ----------------------- |
+| `.mockReturnValue`, `.mockResolvedValue`, `.mockImplementation` | Yes                     |
+| `.mock.calls`, `.mock.results`                                  | Yes                     |
+| `expect(fn).toHaveBeenCalled()`                                 | No                      |
+| `expect(fn).toHaveBeenCalledWith(...)`                          | No                      |
+
+- Flag casts whenever `vi.mocked()` would narrow correctly.
+- Do not add `vi.mocked()` around assertion-only references just for style.
+
+### Reset Hygiene
+
+- Flag per-mock `mockClear()` or `mockReset()` when `vi.clearAllMocks()` or `vi.resetAllMocks()` already runs in the relevant hook chain.
+- Review for redundancy or broken state management. Do not bikeshed `clearAllMocks` vs `resetAllMocks` unless behavior depends on it.
+
+### Third-Party Seams
+
+- Distinguish trivial hooks from behavior-rich APIs.
+- Mocking single-method third-party hooks like `primevue/usetoast` is usually acceptable.
+- That exception does not justify mocking behavior-rich third-party modules.
+
+### `vue-i18n`
+
+- Never mock `vue-i18n` in component tests.
+- Use real `createI18n` per [`docs/testing/vitest-patterns.md`](../../../docs/testing/vitest-patterns.md) and the shared [`testI18n`](../../../src/components/searchbox/v2/__test__/testUtils.ts) setup.
+
+## Test-Body Rules
+
+| Smell                                                             | Review bar                                                                                                                                    |
+| ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| Change-detector test                                              | Reject. Default values alone prove nothing.                                                                                                   |
+| Mock-only assertion                                               | Accept collaborator-call assertions only when the call is the meaningful external effect and the test also exercises the triggering behavior. |
+| Non-behavioral assertion                                          | Reject tests that only check classes, utility hooks, or styling internals.                                                                    |
+| New component test using `@vue/test-utils`                        | Request changes. Use `@testing-library/vue` plus `@testing-library/user-event`.                                                               |
+| `any`, `as any`, or `@ts-expect-error` in new or edited test code | Request changes unless the author proves no safer type exists. Legacy doc snippets do not authorize it.                                       |
+
+## Bugfix Regression Proof
+
+For `fix:` PRs or bugfix diffs:
+
+1. Identify the production change that fixes the bug.
+2. Verify the new test fails on pre-fix code, or ask the author to show it.
+3. If the test passes on broken code, request changes.
+
+A regression test that never proves red does not pin the bug.
+
+## Review Output Rules
+
+- State verdict before procedural questions.
+- Do not lead with approval language like `LGTM, just one nit` or `approve and move on?`.
+- Name the failure mode directly: `alias-by-renaming`, `unnecessary cast`, `mocked i18n`, `mock-only assertion`, `unproven regression`.
+- Link the authoritative doc section in the review comment.
+- If an explicit repo rule, lint rule, or authoritative doc note is violated, do not downgrade it to "minor deviation" or "nit".
+
+## Quick Reference
+
+| When you see...                     | Read this                                                                                                                                                                                         |
+| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| New `vi.mock(...)` for a composable | [`docs/testing/unit-testing.md`](../../../docs/testing/unit-testing.md) -> "Mocking Composables with Reactive State"                                                                              |
+| New store test or store mock        | [`docs/testing/vitest-patterns.md`](../../../docs/testing/vitest-patterns.md) setup + [`docs/testing/store-testing.md`](../../../docs/testing/store-testing.md)                                   |
+| New component test                  | Top note in [`docs/testing/component-testing.md`](../../../docs/testing/component-testing.md)                                                                                                     |
+| `vue-i18n` in a component test      | [`docs/testing/vitest-patterns.md`](../../../docs/testing/vitest-patterns.md) + [`src/components/searchbox/v2/__test__/testUtils.ts`](../../../src/components/searchbox/v2/__test__/testUtils.ts) |
+| Cast around a mock                  | [`docs/guidance/typescript.md`](../../../docs/guidance/typescript.md) -> "Type Assertion Hierarchy"                                                                                               |
+
+## Key Files to Read
+
+| Purpose                              | Path                                                                                                              |
+| ------------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
+| Composable mocking patterns          | [`docs/testing/unit-testing.md`](../../../docs/testing/unit-testing.md)                                           |
+| Store testing patterns               | [`docs/testing/store-testing.md`](../../../docs/testing/store-testing.md)                                         |
+| Repo-wide Vitest setup defaults      | [`docs/testing/vitest-patterns.md`](../../../docs/testing/vitest-patterns.md)                                     |
+| Component testing rule for new tests | [`docs/testing/component-testing.md`](../../../docs/testing/component-testing.md)                                 |
+| Real i18n setup                      | [`src/components/searchbox/v2/__test__/testUtils.ts`](../../../src/components/searchbox/v2/__test__/testUtils.ts) |

.github/actions/ashby-pull/action.yaml

@@ -0,0 +1,23 @@
+name: Ashby Pull
+description: 'Refresh the apps/website Ashby roles snapshot from the Ashby job board API'
+inputs:
+  api_key:
+    description: 'Ashby API key (WEBSITE_ASHBY_API_KEY).'
+    required: true
+  job_board_name:
+    description: 'Ashby job board name (WEBSITE_ASHBY_JOB_BOARD_NAME).'
+    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 Ashby snapshot
+      shell: bash
+      env:
+        WEBSITE_ASHBY_API_KEY: ${{ inputs.api_key }}
+        WEBSITE_ASHBY_JOB_BOARD_NAME: ${{ inputs.job_board_name }}
+      run: pnpm --filter @comfyorg/website ashby:refresh-snapshot

.github/actions/changes-filter/action.yaml

@@ -0,0 +1,87 @@
+# Outputs default to 'true' for non-pull_request events (push, merge_group):
+# granular path filtering is a PR-only optimization. This avoids the silent
+# skip footgun where a job gated on e.g. `app-website-changes == 'true'`
+# would never run on push.
+#
+# Shared dependency files (root package.json, pnpm-lock.yaml,
+# pnpm-workspace.yaml) are folded into every app-* and packages-changes
+# output so a lockfile bump correctly invalidates each granular gate. They
+# are NOT folded into docs-changes.
+#
+# Two paths-filter steps are needed because predicate-quantifier=every is
+# required for the negated globs in `should-run` but breaks multi-pattern
+# OR filters like `docs:` and `deps:`.
+#
+# Requires the caller to have checked out the repository.
+
+name: 'Detect Path Changes'
+description: >
+  Computes typed *-changes outputs and a back-compat should-run for
+  path-gated CI jobs.
+
+outputs:
+  should-run:
+    description: 'Any file outside `apps/`, `docs/`, `.storybook/`, or `**/*.md` changed.'
+    value: ${{ github.event_name != 'pull_request' || steps.relevant.outputs.relevant == 'true' }}
+  app-website-changes:
+    description: 'Shared deps or `apps/website/**` changed.'
+    value: ${{ github.event_name != 'pull_request' || steps.filter.outputs.deps == 'true' || steps.filter.outputs.app_website == 'true' }}
+  app-desktop-changes:
+    description: 'Shared deps or `apps/desktop-ui/**` changed.'
+    value: ${{ github.event_name != 'pull_request' || steps.filter.outputs.deps == 'true' || steps.filter.outputs.app_desktop == 'true' }}
+  app-frontend-changes:
+    description: 'Shared deps or `src/**` changed.'
+    value: ${{ github.event_name != 'pull_request' || steps.filter.outputs.deps == 'true' || steps.filter.outputs.app_frontend == 'true' }}
+  packages-changes:
+    description: 'Shared deps or `packages/**` changed.'
+    value: ${{ github.event_name != 'pull_request' || steps.filter.outputs.deps == 'true' || steps.filter.outputs.packages == 'true' }}
+  storybook-changes:
+    description: 'Shared deps or `.storybook/**` changed.'
+    value: ${{ github.event_name != 'pull_request' || steps.filter.outputs.deps == 'true' || steps.filter.outputs.storybook == 'true' }}
+  docs-changes:
+    description: '`docs/**` or any `**/*.md` changed (deps NOT folded in).'
+    value: ${{ github.event_name != 'pull_request' || steps.filter.outputs.docs == 'true' }}
+  dependency-changes:
+    description: 'Root `package.json`, `pnpm-lock.yaml`, or `pnpm-workspace.yaml` changed.'
+    value: ${{ github.event_name != 'pull_request' || steps.filter.outputs.deps == 'true' }}
+
+runs:
+  using: composite
+  steps:
+    - name: Filter typed changes
+      if: ${{ github.event_name == 'pull_request' }}
+      id: filter
+      uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+      with:
+        filters: |
+          app_website:
+            - 'apps/website/**'
+          app_desktop:
+            - 'apps/desktop-ui/**'
+          app_frontend:
+            - 'src/**'
+          packages:
+            - 'packages/**'
+          storybook:
+            - '.storybook/**'
+          docs:
+            - 'docs/**'
+            - '**/*.md'
+          deps:
+            - 'package.json'
+            - 'pnpm-lock.yaml'
+            - 'pnpm-workspace.yaml'
+
+    - name: Filter relevant changes
+      if: ${{ github.event_name == 'pull_request' }}
+      id: relevant
+      uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+      with:
+        predicate-quantifier: 'every'
+        filters: |
+          relevant:
+            - '**'
+            - '!apps/**'
+            - '!docs/**'
+            - '!.storybook/**'
+            - '!**/*.md'

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

@@ -12,17 +12,30 @@ permissions:
   contents: read
 
 jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    outputs:
+      should-run: ${{ steps.changes.outputs.should-run }}
+    steps:
+      - uses: actions/checkout@v6
+      - id: changes
+        uses: ./.github/actions/changes-filter
+
   scan:
+    needs: changes
+    if: ${{ needs.changes.outputs.should-run == 'true' }}
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v6
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
 
       - name: Use Node.js
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@v6
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'

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

@@ -14,16 +14,29 @@ permissions:
   contents: read
 
 jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    outputs:
+      should-run: ${{ steps.changes.outputs.should-run }}
+    steps:
+      - uses: actions/checkout@v6
+      - id: changes
+        uses: ./.github/actions/changes-filter
+
   validate-fonts:
+    needs: changes
+    if: ${{ needs.changes.outputs.should-run == 'true' }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v6
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
 
       - name: Use Node.js
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@v6
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'
@@ -68,15 +81,17 @@ jobs:
           echo '✅ No proprietary fonts found in dist'
 
   validate-licenses:
+    needs: changes
+    if: ${{ needs.changes.outputs.should-run == 'true' }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+      - uses: actions/checkout@v6
 
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
 
       - name: Use Node.js
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@v6
         with:
           node-version-file: '.nvmrc'
           cache: 'pnpm'

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

@@ -3,10 +3,8 @@ name: 'CI: Performance Report'
 on:
   push:
     branches: [main, core/*]
-    paths-ignore: ['**/*.md']
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
-    paths-ignore: ['**/*.md']
 
 concurrency:
   group: perf-${{ github.ref }}
@@ -16,12 +14,24 @@ permissions:
   contents: read
 
 jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    outputs:
+      should-run: ${{ steps.changes.outputs.should-run }}
+    steps:
+      - uses: actions/checkout@v6
+      - id: changes
+        uses: ./.github/actions/changes-filter
+
   perf-tests:
-    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
+    needs: changes
+    if: ${{ needs.changes.outputs.should-run == 'true' && github.repository == 'Comfy-Org/ComfyUI_frontend' }}
     runs-on: ubuntu-latest
     timeout-minutes: 30
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.12
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.17
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/ci-size-data.yaml

@@ -16,9 +16,22 @@ permissions:
   contents: read
 
 jobs:
-  collect:
+  changes:
     if: github.repository == 'Comfy-Org/ComfyUI_frontend'
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    outputs:
+      should-run: ${{ steps.changes.outputs.should-run }}
+    steps:
+      - uses: actions/checkout@v6
+      - id: changes
+        uses: ./.github/actions/changes-filter
+
+  collect:
+    needs: changes
+    if: ${{ needs.changes.outputs.should-run == 'true' }}
+    runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v6

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

@@ -4,7 +4,6 @@ name: 'CI: Tests E2E'
 on:
   push:
     branches: [main, master, core/*, desktop/*]
-    paths-ignore: ['**/*.md']
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
   merge_group:
@@ -15,36 +14,20 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  # Detect whether e2e-relevant files changed. Required checks see "skipped"
-  # (which counts as passing) when only docs/apps/storybook files are touched,
-  # avoiding the stall that paths-ignore would cause.
   changes:
     runs-on: ubuntu-latest
     permissions:
       contents: read
     outputs:
-      should_run: ${{ github.event_name != 'pull_request' || steps.filter.outputs.e2e }}
+      should-run: ${{ steps.changes.outputs.should-run }}
     steps:
-      - name: Checkout repository
-        if: ${{ github.event_name == 'pull_request' }}
-        uses: actions/checkout@v6
-      - name: Check for e2e-relevant changes
-        if: ${{ github.event_name == 'pull_request' }}
-        id: filter
-        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
-        with:
-          predicate-quantifier: 'every'
-          filters: |
-            e2e:
-              - '**'
-              - '!apps/**'
-              - '!docs/**'
-              - '!.storybook/**'
-              - '!**/*.md'
+      - uses: actions/checkout@v6
+      - id: changes
+        uses: ./.github/actions/changes-filter
 
   setup:
     needs: changes
-    if: ${{ needs.changes.outputs.should_run == 'true' }}
+    if: ${{ needs.changes.outputs.should-run == 'true' }}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -82,7 +65,7 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 60
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.16
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.17
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}
@@ -140,7 +123,7 @@ jobs:
     needs: setup
     runs-on: ubuntu-latest
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.16
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.17
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}
@@ -194,7 +177,7 @@ jobs:
   merge-reports:
     needs: [changes, playwright-tests-chromium-sharded]
     runs-on: ubuntu-latest
-    if: ${{ !cancelled() && needs.changes.outputs.should_run == 'true' }}
+    if: ${{ !cancelled() && needs.changes.outputs.should-run == 'true' }}
     steps:
       - name: Install pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
@@ -233,7 +216,7 @@ jobs:
     steps:
       - name: Check E2E results
         env:
-          SHOULD_RUN: ${{ needs.changes.outputs.should_run }}
+          SHOULD_RUN: ${{ needs.changes.outputs.should-run }}
           SHARDED: ${{ needs.playwright-tests-chromium-sharded.result }}
           BROWSERS: ${{ needs.playwright-tests.result }}
         run: |
@@ -251,7 +234,7 @@ jobs:
     runs-on: ubuntu-latest
     if: >-
       ${{
-        needs.changes.outputs.should_run == 'true' &&
+        needs.changes.outputs.should-run == 'true' &&
         github.event_name == 'pull_request' &&
         github.event.pull_request.head.repo.fork == false
       }}
@@ -278,7 +261,7 @@ jobs:
     if: >-
       ${{
         always() &&
-        needs.changes.outputs.should_run == 'true' &&
+        needs.changes.outputs.should-run == 'true' &&
         github.event_name == 'pull_request' &&
         github.event.pull_request.head.repo.fork == false
       }}

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

@@ -8,10 +8,29 @@ on:
     branches: [main]
 
 jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    outputs:
+      storybook-changes: ${{ steps.changes.outputs.storybook-changes }}
+      app-frontend-changes: ${{ steps.changes.outputs.app-frontend-changes }}
+      packages-changes: ${{ steps.changes.outputs.packages-changes }}
+    steps:
+      - uses: actions/checkout@v6
+      - id: changes
+        uses: ./.github/actions/changes-filter
+
   # Post starting comment for non-forked PRs
   comment-on-pr-start:
+    needs: changes
     runs-on: ubuntu-latest
-    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
+    if: |
+      github.event_name == 'pull_request'
+      && github.event.pull_request.head.repo.fork == false
+      && (needs.changes.outputs.storybook-changes == 'true'
+          || needs.changes.outputs.app-frontend-changes == 'true'
+          || needs.changes.outputs.packages-changes == 'true')
     permissions:
       pull-requests: write
     steps:
@@ -30,8 +49,13 @@ jobs:
 
   # Build Storybook for all PRs (free Cloudflare deployment)
   storybook-build:
+    needs: changes
     runs-on: ubuntu-latest
-    if: github.event_name == 'pull_request'
+    if: |
+      github.event_name == 'pull_request'
+      && (needs.changes.outputs.storybook-changes == 'true'
+          || needs.changes.outputs.app-frontend-changes == 'true'
+          || needs.changes.outputs.packages-changes == 'true')
     outputs:
       conclusion: ${{ steps.job-status.outputs.conclusion }}
       workflow-url: ${{ steps.workflow-url.outputs.url }}
@@ -67,8 +91,15 @@ jobs:
 
   # Chromatic deployment only for version-bump-* branches or manual triggers
   chromatic-deployment:
+    needs: changes
     runs-on: ubuntu-latest
-    if: github.event_name == 'workflow_dispatch' || (github.event_name == 'pull_request' && startsWith(github.head_ref, 'version-bump-'))
+    if: |
+      github.event_name == 'workflow_dispatch'
+      || (github.event_name == 'pull_request'
+          && startsWith(github.head_ref, 'version-bump-')
+          && (needs.changes.outputs.storybook-changes == 'true'
+              || needs.changes.outputs.app-frontend-changes == 'true'
+              || needs.changes.outputs.packages-changes == 'true'))
     outputs:
       conclusion: ${{ steps.job-status.outputs.conclusion }}
       workflow-url: ${{ steps.workflow-url.outputs.url }}
@@ -107,9 +138,15 @@ jobs:
 
   # Deploy and comment for non-forked PRs only
   deploy-and-comment:
-    needs: [storybook-build]
+    needs: [changes, storybook-build]
     runs-on: ubuntu-latest
-    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false && always()
+    if: |
+      always()
+      && github.event_name == 'pull_request'
+      && github.event.pull_request.head.repo.fork == false
+      && (needs.changes.outputs.storybook-changes == 'true'
+          || needs.changes.outputs.app-frontend-changes == 'true'
+          || needs.changes.outputs.packages-changes == 'true')
     permissions:
       pull-requests: write
       contents: read

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

@@ -4,10 +4,8 @@ name: 'CI: Tests Unit'
 on:
   push:
     branches: [main, master, dev*, core/*, desktop/*]
-    paths-ignore: ['**/*.md']
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
-    paths-ignore: ['**/*.md']
   merge_group:
 
 concurrency:
@@ -15,7 +13,20 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    outputs:
+      should-run: ${{ steps.changes.outputs.should-run }}
+    steps:
+      - uses: actions/checkout@v6
+      - id: changes
+        uses: ./.github/actions/changes-filter
+
   test:
+    needs: changes
+    if: ${{ needs.changes.outputs.should-run == 'true' }}
     runs-on: ubuntu-latest
 
     steps:

.github/workflows/ci-vercel-website-preview.yaml

@@ -52,6 +52,9 @@ jobs:
         run: vercel pull --yes --environment=preview
 
       - 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 }}
         run: vercel build
 
       - name: Fetch head commit metadata
@@ -146,6 +149,9 @@ jobs:
         run: vercel pull --yes --environment=production
 
       - 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 }}
         run: vercel build --prod
 
       - name: Deploy project artifacts to Vercel

.github/workflows/ci-website-build.yaml

@@ -4,23 +4,29 @@ name: 'CI: Website Build'
 on:
   push:
     branches: [main, master, website/*]
-    paths:
-      - 'apps/website/**'
-      - 'packages/design-system/**'
-      - 'pnpm-lock.yaml'
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
-    paths:
-      - 'apps/website/**'
-      - 'packages/design-system/**'
-      - 'pnpm-lock.yaml'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
 jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    outputs:
+      app-website-changes: ${{ steps.changes.outputs.app-website-changes }}
+      packages-changes: ${{ steps.changes.outputs.packages-changes }}
+    steps:
+      - uses: actions/checkout@v6
+      - id: changes
+        uses: ./.github/actions/changes-filter
+
   build:
+    needs: changes
+    if: ${{ needs.changes.outputs.app-website-changes == 'true' || needs.changes.outputs.packages-changes == 'true' }}
     runs-on: ubuntu-latest
 
     steps:
@@ -30,4 +36,7 @@ jobs:
         uses: ./.github/actions/setup-frontend
 
       - name: Build website
+        env:
+          WEBSITE_ASHBY_API_KEY: ${{ secrets.WEBSITE_ASHBY_API_KEY }}
+          WEBSITE_ASHBY_JOB_BOARD_NAME: ${{ secrets.WEBSITE_ASHBY_JOB_BOARD_NAME }}
         run: pnpm --filter @comfyorg/website build

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

@@ -3,25 +3,29 @@ name: 'CI: Website E2E'
 on:
   push:
     branches: [main]
-    paths:
-      - 'apps/website/**'
-      - 'packages/design-system/**'
-      - 'packages/tailwind-utils/**'
-      - 'pnpm-lock.yaml'
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
-    paths:
-      - 'apps/website/**'
-      - 'packages/design-system/**'
-      - 'packages/tailwind-utils/**'
-      - 'pnpm-lock.yaml'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.repository }}-${{ github.head_ref || github.ref }}
   cancel-in-progress: true
 
 jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    outputs:
+      app-website-changes: ${{ steps.changes.outputs.app-website-changes }}
+      packages-changes: ${{ steps.changes.outputs.packages-changes }}
+    steps:
+      - uses: actions/checkout@v6
+      - id: changes
+        uses: ./.github/actions/changes-filter
+
   website-e2e:
+    needs: changes
+    if: ${{ needs.changes.outputs.app-website-changes == 'true' || needs.changes.outputs.packages-changes == 'true' }}
     runs-on: ubuntu-latest
     container:
       image: mcr.microsoft.com/playwright:v1.58.1-noble
@@ -45,6 +49,8 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Build website
+        env:
+          WEBSITE_GITHUB_STARS_OVERRIDE: 110000
         run: pnpm --filter @comfyorg/website build
 
       - name: Run Playwright tests
@@ -161,7 +167,11 @@ jobs:
   post-starting-comment:
     # Safe to comment from pull_request trigger: fork PRs are excluded by the guard below.
     # This avoids a ci-*/pr-* workflow_run split for a comment that must appear immediately.
-    if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
+    needs: changes
+    if: |
+      github.event_name == 'pull_request'
+      && github.event.pull_request.head.repo.fork == false
+      && (needs.changes.outputs.app-website-changes == 'true' || needs.changes.outputs.packages-changes == 'true')
     runs-on: ubuntu-latest
     permissions:
       pull-requests: write

.github/workflows/pr-update-playwright-expectations.yaml

@@ -77,7 +77,7 @@ jobs:
     needs: setup
     runs-on: ubuntu-latest
     container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.16
+      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.17
       credentials:
         username: ${{ github.actor }}
         password: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/pr-update-website-screenshots.yaml

@@ -18,6 +18,7 @@ jobs:
     timeout-minutes: 15
     permissions:
       contents: write
+      issues: write
       pull-requests: read
     # Trigger: (1) label, (2) /slash-command, or (3) checkbox in E2E status comment
     # ⚠️ This condition is duplicated on `post-starting-comment` — keep them in sync.
@@ -86,6 +87,8 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Build website
+        env:
+          WEBSITE_GITHUB_STARS_OVERRIDE: 110000
         run: pnpm --filter @comfyorg/website build
 
       - name: Update screenshots
@@ -137,7 +140,10 @@ jobs:
                 name: 'Update Website Screenshots'
               })
             } catch (e) {
-              // Label may already be removed
+              if (e.status !== 404) {
+                throw e
+              }
+              core.info('Label "Update Website Screenshots" was already removed')
             }
 
   post-starting-comment:

.github/workflows/release-website.yaml

@@ -0,0 +1,59 @@
+# 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:
+  workflow_dispatch:
+
+concurrency:
+  group: release-website
+  cancel-in-progress: true
+
+jobs:
+  refresh-snapshot:
+    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+        with:
+          ref: main
+          persist-credentials: false
+
+      - name: Refresh Ashby snapshot
+        uses: ./.github/actions/ashby-pull
+        with:
+          api_key: ${{ secrets.WEBSITE_ASHBY_API_KEY }}
+          job_board_name: ${{ secrets.WEBSITE_ASHBY_JOB_BOARD_NAME }}
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
+        with:
+          token: ${{ secrets.PR_GH_TOKEN }}
+          commit-message: 'chore(website): refresh Ashby roles snapshot'
+          title: 'chore(website): refresh Ashby roles snapshot'
+          body: |
+            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 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` remains
+            intact: builds without `WEBSITE_ASHBY_API_KEY` continue to use the
+            committed snapshot.
+
+            Triggered by workflow run `${{ github.run_id }}`.
+          branch: chore/refresh-ashby-snapshot-${{ github.run_id }}
+          base: main
+          labels: |
+            Release:Website
+          delete-branch: true

.husky/pre-push

@@ -1,5 +1,13 @@
 #!/usr/bin/env bash
 
+# Skip in CI: the canonical knip check runs in ci-lint-format on every
+# PR, and bot workflows (e.g. i18n-update-core) populate ComfyUI/ via
+# setup-comfyui-server, which contaminates knip's project glob with the
+# devtools copy under custom_nodes and produces false-positive failures.
+if [ -n "${CI-}" ]; then
+  exit 0
+fi
+
 # Run Knip with cache via package script
 pnpm knip 1>&2
 

apps/desktop-ui/src/assets/css/style.css

@@ -20,15 +20,15 @@
 }
 
 .p-button-danger {
-  background-color: var(--color-coral-red-600);
+  background-color: var(--color-coral-700);
 }
 
 .p-button-danger:hover {
-  background-color: var(--color-coral-red-500);
+  background-color: var(--color-coral-600);
 }
 
 .p-button-danger:active {
-  background-color: var(--color-coral-red-400);
+  background-color: var(--color-coral-500);
 }
 
 .task-div .p-card {

apps/website/README.md

@@ -113,6 +113,31 @@ git commit apps/website/src/data/ashby-roles.snapshot.json
 The script exits non-zero on any non-fresh outcome so stale/empty
 snapshots can't be accidentally committed.
 
+## HubSpot contact form
+
+The contact page uses HubSpot's hosted form embed for the interest form:
+
+```html
+<script
+  src="https://js-na2.hsforms.net/forms/embed/developer/244637579.js"
+  defer
+></script>
+<div
+  class="hs-form-html"
+  data-region="na2"
+  data-form-id="94e05eab-1373-47f7-ab5e-d84f9e6aa262"
+  data-portal-id="244637579"
+></div>
+```
+
+The localized `/zh-CN/contact` page uses the same portal and script with form
+ID `6885750c-02ef-4aa2-ba0d-213be9cccf93`.
+
+This keeps submission handling, validation, anti-spam updates, and field
+configuration in HubSpot. The local implementation in
+`src/components/contact/HubspotFormEmbed.vue` only loads the hosted script and
+renders the documented embed container.
+
 ## Scripts
 
 - `pnpm dev` — Astro dev server

apps/website/package.json

@@ -26,6 +26,7 @@
     "cva": "catalog:",
     "gsap": "catalog:",
     "lenis": "catalog:",
+    "posthog-js": "catalog:",
     "vue": "catalog:",
     "zod": "catalog:"
   },

apps/website/public/robots.txt

@@ -1,4 +1,33 @@
+# robots.txt for comfy.org
+# Open to all crawlers — including AI/LLM bots — for maximum visibility
+# in AI-powered search, chat-based answer engines, and traditional search.
+# Granular UAs are listed explicitly to signal intent; rules are shared
+# via stacked user-agent records (RFC 9309 §2.2).
+
 User-agent: *
+User-agent: Googlebot
+User-agent: Bingbot
+User-agent: DuckDuckBot
+User-agent: GPTBot
+User-agent: ChatGPT-User
+User-agent: OAI-SearchBot
+User-agent: Google-Extended
+User-agent: ClaudeBot
+User-agent: Claude-Web
+User-agent: anthropic-ai
+User-agent: PerplexityBot
+User-agent: Perplexity-User
+User-agent: Applebot
+User-agent: Applebot-Extended
+User-agent: Bytespider
+User-agent: Amazonbot
+User-agent: CCBot
+User-agent: Meta-ExternalAgent
+User-agent: Meta-ExternalFetcher
+User-agent: Diffbot
 Allow: /
+Disallow: /_astro/
+Disallow: /_website/
+Disallow: /_vercel/
 
 Sitemap: https://comfy.org/sitemap-index.xml

apps/website/src/components/contact/FormSection.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
 import { ref } from 'vue'
 
 import type { Locale, TranslationKey } from '../../i18n/translations'
 
 import { useHeroAnimation } from '../../composables/useHeroAnimation'
 import { t } from '../../i18n/translations'
-import BrandButton from '../common/BrandButton.vue'
 import SectionLabel from '../common/SectionLabel.vue'
+import HubspotFormEmbed from './HubspotFormEmbed.vue'
 
 const { locale = 'en' } = defineProps<{
   locale?: Locale
@@ -17,30 +16,6 @@ function tk(suffix: string): TranslationKey {
   return `contact.form.${suffix}` as TranslationKey
 }
 
-const firstName = ref('')
-const lastName = ref('')
-const company = ref('')
-const phone = ref('')
-const selectedPackage = ref('')
-const comfyUsage = ref('')
-const lookingFor = ref('')
-
-const packageOptions = [
-  'packageIndividual',
-  'packageTeams',
-  'packageEnterprise'
-] as const
-
-const usageOptions = [
-  'usingYesProduction',
-  'usingYesTesting',
-  'usingNotYet',
-  'usingOtherTools'
-] as const
-
-const inputClass =
-  'text-primary-comfy-canvas placeholder:text-primary-comfy-canvas/30 border-primary-warm-gray/20 focus:border-primary-comfy-yellow mt-2 w-full rounded-2xl border bg-transparency-white-t4 p-4 text-sm transition-colors outline-none'
-
 const sectionRef = ref<HTMLElement>()
 const badgeRef = ref<HTMLElement>()
 const headingRef = ref<HTMLElement>()
@@ -55,10 +30,6 @@ useHeroAnimation({
   video: formRef,
   parallax: false
 })
-
-function handleSubmit() {
-  // TODO: implement form submission
-}
 </script>
 
 <template>
@@ -105,160 +76,7 @@ function handleSubmit() {
 
     <!-- Right column: form -->
     <div ref="formRef" class="mt-12 lg:mt-0 lg:w-1/2">
-      <form class="space-y-6" @submit.prevent="handleSubmit">
-        <!-- First Name + Last Name -->
-        <div class="lg:grid lg:grid-cols-2 lg:gap-4">
-          <div>
-            <label class="text-primary-comfy-canvas text-xs">
-              {{ t(tk('firstName'), locale) }}*
-            </label>
-            <input
-              v-model="firstName"
-              type="text"
-              required
-              :placeholder="t(tk('firstNamePlaceholder'), locale)"
-              :class="inputClass"
-            />
-          </div>
-          <div class="mt-6 lg:mt-0">
-            <label class="text-primary-comfy-canvas text-xs">
-              {{ t(tk('lastName'), locale) }}*
-            </label>
-            <input
-              v-model="lastName"
-              type="text"
-              required
-              :placeholder="t(tk('lastNamePlaceholder'), locale)"
-              :class="inputClass"
-            />
-          </div>
-        </div>
-
-        <!-- Company + Phone -->
-        <div class="lg:grid lg:grid-cols-2 lg:gap-4">
-          <div>
-            <label class="text-primary-comfy-canvas text-xs">
-              {{ t(tk('company'), locale) }}*
-            </label>
-            <input
-              v-model="company"
-              type="text"
-              required
-              :placeholder="t(tk('companyPlaceholder'), locale)"
-              :class="inputClass"
-            />
-          </div>
-          <div class="mt-6 lg:mt-0">
-            <label class="text-primary-comfy-canvas text-xs">
-              {{ t(tk('phone'), locale) }}
-            </label>
-            <input v-model="phone" type="tel" :class="inputClass" />
-          </div>
-        </div>
-
-        <!-- Package selection -->
-        <div>
-          <p class="text-primary-comfy-canvas text-xs">
-            {{ t(tk('packageQuestion'), locale) }}
-          </p>
-          <div class="mt-3 flex flex-wrap gap-3">
-            <label
-              v-for="opt in packageOptions"
-              :key="opt"
-              :class="
-                cn(
-                  'bg-transparency-white-t4 flex cursor-pointer items-center gap-2 rounded-lg border px-6 py-2 text-xs font-bold tracking-wider transition-colors',
-                  selectedPackage === opt
-                    ? 'border-primary-comfy-yellow text-primary-comfy-yellow'
-                    : 'text-primary-comfy-canvas border-(--site-border-subtle)'
-                )
-              "
-            >
-              <input
-                v-model="selectedPackage"
-                type="radio"
-                name="package"
-                :value="opt"
-                class="sr-only"
-              />
-              <span
-                :class="
-                  cn(
-                    'flex size-4 shrink-0 items-center justify-center rounded-full border',
-                    selectedPackage === opt
-                      ? 'border-primary-comfy-yellow'
-                      : 'border-primary-warm-gray/40'
-                  )
-                "
-              >
-                <span
-                  v-if="selectedPackage === opt"
-                  class="bg-primary-comfy-yellow size-2 rounded-full"
-                />
-              </span>
-              {{ t(tk(opt), locale) }}
-            </label>
-          </div>
-        </div>
-
-        <!-- Comfy usage -->
-        <div>
-          <p class="text-primary-comfy-canvas text-xs">
-            {{ t(tk('usingComfy'), locale) }}
-          </p>
-          <div class="mt-3 space-y-3">
-            <label
-              v-for="opt in usageOptions"
-              :key="opt"
-              class="flex cursor-pointer items-center gap-3"
-            >
-              <span
-                :class="
-                  cn(
-                    'flex size-4 shrink-0 items-center justify-center rounded-full border',
-                    comfyUsage === opt
-                      ? 'border-primary-comfy-yellow'
-                      : 'border-(--site-border-subtle)'
-                  )
-                "
-              >
-                <span
-                  v-if="comfyUsage === opt"
-                  class="bg-primary-comfy-yellow size-2 rounded-full"
-                />
-              </span>
-              <input
-                v-model="comfyUsage"
-                type="radio"
-                :value="opt"
-                class="sr-only"
-              />
-              <span class="text-primary-comfy-canvas text-sm">
-                {{ t(tk(opt), locale) }}
-              </span>
-            </label>
-          </div>
-        </div>
-
-        <!-- Looking for -->
-        <div>
-          <label class="text-primary-comfy-canvas text-xs">
-            {{ t(tk('lookingFor'), locale) }}
-          </label>
-          <textarea
-            v-model="lookingFor"
-            :placeholder="t(tk('lookingForPlaceholder'), locale)"
-            :class="cn(inputClass, 'min-h-24 resize-y')"
-          />
-        </div>
-
-        <!-- Submit -->
-        <div>
-          <BrandButton type="submit" variant="outline" size="sm">
-            {{ t(tk('submit'), locale) }}
-          </BrandButton>
-        </div>
-      </form>
+      <HubspotFormEmbed :locale />
     </div>
   </section>
 </template>

apps/website/src/components/contact/HubspotFormEmbed.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+import type { Locale } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{
+  locale?: Locale
+}>()
+
+const HUBSPOT_CONTACT_PORTAL_ID = '244637579'
+const HUBSPOT_CONTACT_REGION = 'na2'
+const HUBSPOT_CONTACT_SCRIPT_ID = 'hubspot-contact-form-embed'
+const HUBSPOT_CONTACT_SCRIPT_SRC = `https://js-${HUBSPOT_CONTACT_REGION}.hsforms.net/forms/embed/developer/${HUBSPOT_CONTACT_PORTAL_ID}.js`
+
+const hubspotContactFormIds: Record<Locale, string> = {
+  en: '94e05eab-1373-47f7-ab5e-d84f9e6aa262',
+  'zh-CN': '6885750c-02ef-4aa2-ba0d-213be9cccf93'
+}
+
+const hasEmbedLoadError = ref(false)
+const hubspotContactFormId = computed(() => hubspotContactFormIds[locale])
+
+const hubspotFormStyles: Record<`--${string}`, string> = {
+  '--hsf-global__font-family': "'PP Formula', sans-serif",
+  '--hsf-global__color': '#c2bfb9',
+  '--hsf-background__background-color': '#211927',
+  '--hsf-background__border-width': '0',
+  '--hsf-background__padding': '0',
+  '--hsf-button__font-family': "'PP Formula', sans-serif",
+  '--hsf-button__font-size': '14px',
+  '--hsf-button__color': '#211927',
+  '--hsf-button__background-color': '#f2ff59',
+  '--hsf-button__border-radius': '16px',
+  '--hsf-button__padding': '10px 24px',
+  '--hsf-richtext__font-family': "'PP Formula', sans-serif",
+  '--hsf-richtext__color': '#c2bfb9',
+  '--hsf-heading__font-family': "'PP Formula', sans-serif",
+  '--hsf-heading__color': '#c2bfb9',
+  '--hsf-field-label__font-family': "'PP Formula', sans-serif",
+  '--hsf-field-label__font-size': '12px',
+  '--hsf-field-label__color': '#c2bfb9',
+  '--hsf-field-description__font-family': "'PP Formula', sans-serif",
+  '--hsf-field-description__color': '#c2bfb9',
+  '--hsf-field-footer__font-family': "'PP Formula', sans-serif",
+  '--hsf-field-footer__color': '#c2bfb9',
+  '--hsf-field-input__font-family': "'PP Formula', sans-serif",
+  '--hsf-field-input__color': '#c2bfb9',
+  '--hsf-field-input__background-color': '#2a2230',
+  '--hsf-field-input__placeholder-color': '#585159',
+  '--hsf-field-input__border-color': '#3b3539',
+  '--hsf-field-input__border-width': '1px',
+  '--hsf-field-input__border-style': 'solid',
+  '--hsf-field-input__border-radius': '16px',
+  '--hsf-field-input__padding': '16px',
+  '--hsf-field-textarea__font-family': "'PP Formula', sans-serif",
+  '--hsf-field-textarea__color': '#c2bfb9',
+  '--hsf-field-textarea__background-color': '#2a2230',
+  '--hsf-field-textarea__placeholder-color': '#585159',
+  '--hsf-field-textarea__border-color': '#3b3539',
+  '--hsf-field-textarea__border-width': '1px',
+  '--hsf-field-textarea__border-style': 'solid',
+  '--hsf-field-textarea__border-radius': '16px',
+  '--hsf-field-textarea__padding': '16px',
+  '--hsf-field-checkbox__color': '#c2bfb9',
+  '--hsf-field-checkbox__background-color': '#2a2230',
+  '--hsf-field-checkbox__border-color': '#464147',
+  '--hsf-field-checkbox__border-width': '1px',
+  '--hsf-field-checkbox__border-style': 'solid',
+  '--hsf-field-radio__color': '#c2bfb9',
+  '--hsf-field-radio__background-color': '#2a2230',
+  '--hsf-field-radio__border-color': '#464147',
+  '--hsf-field-radio__border-width': '1px',
+  '--hsf-field-radio__border-style': 'solid',
+  '--hsf-erroralert__font-family': "'PP Formula', sans-serif",
+  '--hsf-infoalert__font-family': "'PP Formula', sans-serif"
+}
+
+onMounted(() => {
+  if (document.getElementById(HUBSPOT_CONTACT_SCRIPT_ID)) return
+
+  const script = document.createElement('script')
+  script.id = HUBSPOT_CONTACT_SCRIPT_ID
+  script.src = HUBSPOT_CONTACT_SCRIPT_SRC
+  script.defer = true
+  script.addEventListener(
+    'error',
+    () => {
+      hasEmbedLoadError.value = true
+      script.remove()
+    },
+    { once: true }
+  )
+
+  document.head.append(script)
+})
+</script>
+
+<template>
+  <div class="min-h-[640px] w-full">
+    <p
+      v-if="hasEmbedLoadError"
+      class="text-primary-comfy-canvas text-sm/6"
+      role="status"
+    >
+      {{ t('contact.form.embedLoadErrorPrefix', locale) }}
+      <a
+        class="text-primary-comfy-yellow underline"
+        href="mailto:hello@comfy.org"
+      >
+        hello@comfy.org
+      </a>
+      {{ t('contact.form.embedLoadErrorSuffix', locale) }}
+    </p>
+    <div
+      v-else
+      :key="hubspotContactFormId"
+      class="hs-form-html"
+      :style="hubspotFormStyles"
+      :data-region="HUBSPOT_CONTACT_REGION"
+      :data-form-id="hubspotContactFormId"
+      :data-portal-id="HUBSPOT_CONTACT_PORTAL_ID"
+    />
+  </div>
+</template>

apps/website/src/i18n/translations.ts

@@ -3298,82 +3298,13 @@ const translations = {
     en: 'Find your answer here',
     'zh-CN': '在这里找到答案'
   },
-  'contact.form.firstName': {
-    en: 'First name',
-    'zh-CN': '名'
+  'contact.form.embedLoadErrorPrefix': {
+    en: 'Unable to load the contact form. Email us at',
+    'zh-CN': '联系表单无法加载。请发送邮件至'
   },
-  'contact.form.lastName': {
-    en: 'Last Name',
-    'zh-CN': '姓'
-  },
-  'contact.form.company': {
-    en: 'Company',
-    'zh-CN': '公司'
-  },
-  'contact.form.phone': {
-    en: 'Phone Number (optional)',
-    'zh-CN': '电话号码（可选）'
-  },
-  'contact.form.packageQuestion': {
-    en: 'Are you interested in learning more about our Enterprise Services, which start at $100K annually, our individual packages, or our team packages?',
-    'zh-CN':
-      '您是否有兴趣了解更多关于我们的企业服务（年费起价 $100K）、个人套餐或团队套餐？'
-  },
-  'contact.form.packageIndividual': {
-    en: 'INDIVIDUAL',
-    'zh-CN': '个人'
-  },
-  'contact.form.packageTeams': {
-    en: 'TEAMS',
-    'zh-CN': '团队'
-  },
-  'contact.form.packageEnterprise': {
-    en: 'ENTERPRISE',
-    'zh-CN': '企业'
-  },
-  'contact.form.usingComfy': {
-    en: 'Are you /your team currently using Comfy?',
-    'zh-CN': '您/您的团队目前是否在使用 Comfy？'
-  },
-  'contact.form.usingYesProduction': {
-    en: 'Yes, in production',
-    'zh-CN': '是，在生产环境中'
-  },
-  'contact.form.usingYesTesting': {
-    en: 'Yes, testing / experimenting',
-    'zh-CN': '是，测试/实验中'
-  },
-  'contact.form.usingNotYet': {
-    en: 'Not yet, evaluating',
-    'zh-CN': '尚未使用，评估中'
-  },
-  'contact.form.usingOtherTools': {
-    en: 'Not using Comfy yet, but using other GenAI tools',
-    'zh-CN': '尚未使用 Comfy，但在使用其他 GenAI 工具'
-  },
-  'contact.form.lookingFor': {
-    en: 'What are you looking for?',
-    'zh-CN': '您在寻找什么？'
-  },
-  'contact.form.lookingForPlaceholder': {
-    en: 'Tell us about your team needs, expected usage, or other specific requirements.',
-    'zh-CN': '请告诉我们您的团队需求、预期使用情况或其他具体要求。'
-  },
-  'contact.form.submit': {
-    en: 'SUBMIT',
-    'zh-CN': '提交'
-  },
-  'contact.form.firstNamePlaceholder': {
-    en: 'Jane',
-    'zh-CN': 'Jane'
-  },
-  'contact.form.lastNamePlaceholder': {
-    en: 'Smith',
-    'zh-CN': 'Smith'
-  },
-  'contact.form.companyPlaceholder': {
-    en: 'jane@acme.org',
-    'zh-CN': 'jane@acme.org'
+  'contact.form.embedLoadErrorSuffix': {
+    en: "and we'll route your request.",
+    'zh-CN': '我们会为您处理请求。'
   },
 
   'customers.story.whatsNext': {

apps/website/src/layouts/BaseLayout.astro

@@ -133,9 +133,15 @@ const websiteJsonLd = {
     <script>
       import { initSmoothScroll, cancelScroll } from '../scripts/smoothScroll'
       import { ScrollTrigger } from '../scripts/gsapSetup'
+      import { initPostHog, capturePageview } from '../scripts/posthog'
 
       initSmoothScroll()
 
+      if (import.meta.env.PROD) {
+        initPostHog()
+        document.addEventListener('astro:page-load', capturePageview)
+      }
+
       document.addEventListener('astro:page-load', () => {
         ScrollTrigger.refresh()
       })

apps/website/src/scripts/posthog.ts

@@ -0,0 +1,36 @@
+import posthog from 'posthog-js'
+
+const POSTHOG_KEY =
+  import.meta.env.PUBLIC_POSTHOG_KEY ??
+  'phc_iKfK86id4xVYws9LybMje0h44eGtfwFgRPIBehmy8rO'
+const POSTHOG_API_HOST =
+  import.meta.env.PUBLIC_POSTHOG_API_HOST ?? 'https://t.comfy.org'
+const POSTHOG_UI_HOST =
+  import.meta.env.PUBLIC_POSTHOG_UI_HOST ?? 'https://us.posthog.com'
+
+let initialized = false
+
+export function initPostHog() {
+  if (initialized || typeof window === 'undefined' || !POSTHOG_KEY) return
+  try {
+    posthog.init(POSTHOG_KEY, {
+      api_host: POSTHOG_API_HOST,
+      ui_host: POSTHOG_UI_HOST,
+      capture_pageview: false,
+      capture_pageleave: true,
+      person_profiles: 'identified_only'
+    })
+    initialized = true
+  } catch (error) {
+    console.error('PostHog init failed', error)
+  }
+}
+
+export function capturePageview() {
+  if (!initialized) return
+  try {
+    posthog.capture('$pageview')
+  } catch (error) {
+    console.error('PostHog pageview capture failed', error)
+  }
+}

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

@@ -0,0 +1,36 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { fetchGitHubStars, formatStarCount } from './github'
+
+describe('fetchGitHubStars', () => {
+  const savedOverride = process.env.WEBSITE_GITHUB_STARS_OVERRIDE
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    if (savedOverride === undefined)
+      delete process.env.WEBSITE_GITHUB_STARS_OVERRIDE
+    else process.env.WEBSITE_GITHUB_STARS_OVERRIDE = savedOverride
+  })
+
+  it('uses the build-time override without calling GitHub', async () => {
+    process.env.WEBSITE_GITHUB_STARS_OVERRIDE = '110000'
+    const fetchMock = vi.spyOn(globalThis, 'fetch')
+
+    await expect(fetchGitHubStars('Comfy-Org', 'ComfyUI')).resolves.toBe(110000)
+    expect(fetchMock).not.toHaveBeenCalled()
+  })
+
+  it('fails fast when the build-time override is malformed', async () => {
+    process.env.WEBSITE_GITHUB_STARS_OVERRIDE = '110K'
+
+    await expect(fetchGitHubStars('Comfy-Org', 'ComfyUI')).rejects.toThrow(
+      'WEBSITE_GITHUB_STARS_OVERRIDE must be a non-negative integer'
+    )
+  })
+})
+
+describe('formatStarCount', () => {
+  it('formats the visual-test override to match committed snapshots', () => {
+    expect(formatStarCount(110000)).toBe('110K')
+  })
+})

apps/website/src/utils/github.ts

@@ -2,6 +2,9 @@ export async function fetchGitHubStars(
   owner: string,
   repo: string
 ): Promise<number | null> {
+  const override = readGitHubStarsOverride()
+  if (override !== undefined) return override
+
   try {
     const res = await fetch(`https://api.github.com/repos/${owner}/${repo}`, {
       headers: { Accept: 'application/vnd.github.v3+json' }
@@ -25,3 +28,17 @@ export function formatStarCount(count: number): string {
   }
   return count.toString()
 }
+
+function readGitHubStarsOverride(): number | undefined {
+  const rawCount = process.env.WEBSITE_GITHUB_STARS_OVERRIDE
+  if (rawCount === undefined || rawCount === '') return undefined
+
+  const count = Number(rawCount)
+  if (!Number.isSafeInteger(count) || count < 0) {
+    throw new Error(
+      'WEBSITE_GITHUB_STARS_OVERRIDE must be a non-negative integer'
+    )
+  }
+
+  return count
+}

apps/website/vercel.json

@@ -7,6 +7,15 @@
   "github": {
     "enabled": false
   },
+  "headers": [
+    {
+      "source": "/(.*)",
+      "has": [
+        { "type": "host", "value": "website-frontend-comfyui.vercel.app" }
+      ],
+      "headers": [{ "key": "X-Robots-Tag", "value": "index, follow" }]
+    }
+  ],
   "redirects": [
     {
       "source": "/pricing",

browser_tests/AGENTS.md

@@ -15,11 +15,15 @@ browser_tests/
 │   ├── VueNodeHelpers.ts - Vue Nodes 2.0 helpers
 │   ├── selectors.ts      - Centralized TestIds
 │   ├── data/             - Static test data (mock API responses, workflow JSONs, node definitions)
-│   ├── components/       - Page object components (locators, user interactions)
+│   ├── components/       - Page object classes (locators, user interactions)
+│   │   ├── Actionbar.ts
 │   │   ├── ContextMenu.ts
+│   │   ├── ManageGroupNode.ts
 │   │   ├── SettingDialog.ts
 │   │   ├── SidebarTab.ts
-│   │   └── Topbar.ts
+│   │   ├── Templates.ts
+│   │   ├── Topbar.ts
+│   │   └── ...
 │   ├── helpers/          - Focused helper classes (domain-specific actions)
 │   │   ├── CanvasHelper.ts
 │   │   ├── CommandHelper.ts
@@ -28,17 +32,36 @@ browser_tests/
 │   │   ├── SettingsHelper.ts
 │   │   ├── WorkflowHelper.ts
 │   │   └── ...
-│   └── utils/            - Pure utility functions (no page dependency)
-├── helpers/          - Test-specific utilities
+│   └── utils/            - Standalone utility functions (used by tests or fixtures)
+│       ├── builderTestUtils.ts
+│       ├── clipboardSpy.ts
+│       ├── fitToView.ts
+│       ├── perfReporter.ts
+│       └── ...
 └── tests/            - Test files (*.spec.ts)
 ```
 
 ### Architectural Separation
 
 - **`fixtures/data/`** — Static test data only. Mock API responses, workflow JSONs, node definitions. No code, no imports from Playwright.
-- **`fixtures/components/`** — Page object components. Encapsulate locators and user interactions for a specific UI area.
-- **`fixtures/helpers/`** — Focused helper classes. Domain-specific actions that coordinate multiple page objects (e.g. canvas operations, workflow loading).
-- **`fixtures/utils/`** — Pure utility functions. No `Page` dependency; stateless helpers that can be used anywhere.
+- **`fixtures/components/`** — Page object components. Classes that own locators for a specific UI region (e.g. `Actionbar`, `ContextMenu`, `ManageGroupNode`).
+- **`fixtures/helpers/`** — Helper classes that coordinate actions across multiple regions without owning a locator surface of their own (e.g. `CanvasHelper`, `WorkflowHelper`, `NodeOperationsHelper`).
+- **`fixtures/utils/`** — Standalone utility functions. Exported functions (not classes) used by tests or fixtures (e.g. `fitToView`, `clipboardSpy`, `builderTestUtils`).
+
+### Placement Rule
+
+When adding a new file, use this decision tree:
+
+```mermaid
+flowchart TD
+    A[New file in browser_tests/fixtures/] --> B{Has any code?}
+    B -- No, JSON/data only --> D[fixtures/data/]
+    B -- Yes --> C{Is it a class?}
+    C -- No, exported functions --> U[fixtures/utils/]
+    C -- Yes --> E{Owns locators for a<br/>specific UI region?}
+    E -- Yes --> P[fixtures/components/]
+    E -- No, coordinates actions<br/>across the app --> H[fixtures/helpers/]
+```
 
 ## Page Object Locator Style
 

browser_tests/README.md

@@ -96,6 +96,17 @@ pnpm test:browser:local                    # Run all tests
 pnpm test:browser:local widget.spec.ts     # Run specific test file
 ```
 
+### Slowing the browser down for debugging
+
+When running with `--headed` (or `--ui`), set `SLOW_MO` to a millisecond delay
+to slow every Playwright action down so you can watch what is happening. The
+delay only applies when `PLAYWRIGHT_LOCAL` is set (the default for the
+`pnpm test:browser:local` script).
+
+```bash
+SLOW_MO=250 pnpm test:browser:local --headed widget.spec.ts
+```
+
 ## Test Structure
 
 Browser tests in this project follow a specific organization pattern:
@@ -140,12 +151,9 @@ Always check for existing helpers and fixtures before implementing new ones:
 
 - **ComfyPage**: Main fixture with methods for canvas interaction and node management
 - **ComfyMouse**: Helper for precise mouse operations on the canvas
-- **Helpers**: Check `browser_tests/helpers/` for specialized helpers like:
-  - `actionbar.ts`: Interact with the action bar
-  - `manageGroupNode.ts`: Group node management operations
-  - `templates.ts`: Template workflows operations
-- **Component Fixtures**: Check `browser_tests/fixtures/components/` for UI component helpers
-- **Utility Functions**: Check `browser_tests/utils/` and `browser_tests/fixtures/utils/` for shared utilities
+- **Component Fixtures**: Check `browser_tests/fixtures/components/` for UI component page objects (e.g. `Actionbar.ts`, `Templates.ts`, `ContextMenu.ts`)
+- **Helper Classes**: Check `browser_tests/fixtures/helpers/` for domain-specific helper classes wired into ComfyPage (e.g. `CanvasHelper.ts`, `WorkflowHelper.ts`)
+- **Utility Functions**: Check `browser_tests/fixtures/utils/` for standalone utilities (e.g. `fitToView.ts`, `clipboardSpy.ts`, `builderTestUtils.ts`)
 
 Most common testing needs are already addressed by these helpers, which will make your tests more consistent and reliable.
 

browser_tests/assets/3d/load3d_missing_model.json

@@ -0,0 +1,27 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "Preview3D",
+      "pos": [50, 50],
+      "size": [450, 600],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "Preview3D",
+        "Last Time Model File": "nonexistent_model.glb"
+      },
+      "widgets_values": ["nonexistent_model.glb"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": { "ds": { "offset": [0, 0], "scale": 1 } },
+  "version": 0.4
+}

browser_tests/assets/default.json

@@ -119,7 +119,15 @@
         { "name": "CLIP", "type": "CLIP", "links": [3, 5], "slot_index": 1 },
         { "name": "VAE", "type": "VAE", "links": [8], "slot_index": 2 }
       ],
-      "properties": {},
+      "properties": {
+        "models": [
+          {
+            "name": "v1-5-pruned-emaonly-fp16.safetensors",
+            "url": "https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emaonly-fp16.safetensors",
+            "directory": "checkpoints"
+          }
+        ]
+      },
       "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
     }
   ],

browser_tests/assets/subgraphs/subgraph-multi-instance-promoted-text-values.json

@@ -1,284 +0,0 @@
-{
-  "id": "2f54e2f0-6db4-4bdf-84a8-9c3ea3ec0123",
-  "revision": 0,
-  "last_node_id": 13,
-  "last_link_id": 9,
-  "nodes": [
-    {
-      "id": 11,
-      "type": "422723e8-4bf6-438c-823f-881ca81acead",
-      "pos": [120, 180],
-      "size": [210, 168],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        { "name": "clip", "type": "CLIP", "link": null },
-        { "name": "model", "type": "MODEL", "link": null },
-        { "name": "positive", "type": "CONDITIONING", "link": null },
-        { "name": "negative", "type": "CONDITIONING", "link": null },
-        { "name": "latent_image", "type": "LATENT", "link": null }
-      ],
-      "outputs": [],
-      "properties": {},
-      "widgets_values": ["Alpha\n"]
-    },
-    {
-      "id": 12,
-      "type": "422723e8-4bf6-438c-823f-881ca81acead",
-      "pos": [420, 180],
-      "size": [210, 168],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        { "name": "clip", "type": "CLIP", "link": null },
-        { "name": "model", "type": "MODEL", "link": null },
-        { "name": "positive", "type": "CONDITIONING", "link": null },
-        { "name": "negative", "type": "CONDITIONING", "link": null },
-        { "name": "latent_image", "type": "LATENT", "link": null }
-      ],
-      "outputs": [],
-      "properties": {},
-      "widgets_values": ["Beta\n"]
-    },
-    {
-      "id": 13,
-      "type": "422723e8-4bf6-438c-823f-881ca81acead",
-      "pos": [720, 180],
-      "size": [210, 168],
-      "flags": {},
-      "order": 2,
-      "mode": 0,
-      "inputs": [
-        { "name": "clip", "type": "CLIP", "link": null },
-        { "name": "model", "type": "MODEL", "link": null },
-        { "name": "positive", "type": "CONDITIONING", "link": null },
-        { "name": "negative", "type": "CONDITIONING", "link": null },
-        { "name": "latent_image", "type": "LATENT", "link": null }
-      ],
-      "outputs": [],
-      "properties": {},
-      "widgets_values": ["Gamma\n"]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "definitions": {
-    "subgraphs": [
-      {
-        "id": "422723e8-4bf6-438c-823f-881ca81acead",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 11,
-          "lastLinkId": 15,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "New Subgraph",
-        "inputNode": {
-          "id": -10,
-          "bounding": [481.59912109375, 379.13336181640625, 120, 160]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [1121.59912109375, 379.13336181640625, 120, 40]
-        },
-        "inputs": [
-          {
-            "id": "0f07c10e-5705-4764-9b24-b69606c6dbcc",
-            "name": "text",
-            "type": "STRING",
-            "linkIds": [10],
-            "pos": { "0": 581.59912109375, "1": 399.13336181640625 }
-          },
-          {
-            "id": "214a5060-24dd-4299-ab78-8027dc5b9c59",
-            "name": "clip",
-            "type": "CLIP",
-            "linkIds": [11],
-            "pos": { "0": 581.59912109375, "1": 419.13336181640625 }
-          },
-          {
-            "id": "8ab94c5d-e7df-433c-9177-482a32340552",
-            "name": "model",
-            "type": "MODEL",
-            "linkIds": [12],
-            "pos": { "0": 581.59912109375, "1": 439.13336181640625 }
-          },
-          {
-            "id": "8a4cd719-8c67-473b-9b44-ac0582d02641",
-            "name": "positive",
-            "type": "CONDITIONING",
-            "linkIds": [13],
-            "pos": { "0": 581.59912109375, "1": 459.13336181640625 }
-          },
-          {
-            "id": "a78d6b3a-ad40-4300-b0a5-2cdbdb8dc135",
-            "name": "negative",
-            "type": "CONDITIONING",
-            "linkIds": [14],
-            "pos": { "0": 581.59912109375, "1": 479.13336181640625 }
-          },
-          {
-            "id": "4c7abe0c-902d-49ef-a5b0-cbf02b50b693",
-            "name": "latent_image",
-            "type": "LATENT",
-            "linkIds": [15],
-            "pos": { "0": 581.59912109375, "1": 499.13336181640625 }
-          }
-        ],
-        "outputs": [],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 10,
-            "type": "CLIPTextEncode",
-            "pos": [661.59912109375, 314.13336181640625],
-            "size": [400, 200],
-            "flags": {},
-            "order": 1,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "clip",
-                "name": "clip",
-                "type": "CLIP",
-                "link": 11
-              },
-              {
-                "localized_name": "text",
-                "name": "text",
-                "type": "STRING",
-                "widget": { "name": "text" },
-                "link": 10
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "CONDITIONING",
-                "name": "CONDITIONING",
-                "type": "CONDITIONING",
-                "links": null
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "CLIPTextEncode"
-            },
-            "widgets_values": [""]
-          },
-          {
-            "id": 11,
-            "type": "KSampler",
-            "pos": [674.1234741210938, 570.5839233398438],
-            "size": [270, 262],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "model",
-                "name": "model",
-                "type": "MODEL",
-                "link": 12
-              },
-              {
-                "localized_name": "positive",
-                "name": "positive",
-                "type": "CONDITIONING",
-                "link": 13
-              },
-              {
-                "localized_name": "negative",
-                "name": "negative",
-                "type": "CONDITIONING",
-                "link": 14
-              },
-              {
-                "localized_name": "latent_image",
-                "name": "latent_image",
-                "type": "LATENT",
-                "link": 15
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "LATENT",
-                "name": "LATENT",
-                "type": "LATENT",
-                "links": null
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "KSampler"
-            },
-            "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 10,
-            "origin_id": -10,
-            "origin_slot": 0,
-            "target_id": 10,
-            "target_slot": 1,
-            "type": "STRING"
-          },
-          {
-            "id": 11,
-            "origin_id": -10,
-            "origin_slot": 1,
-            "target_id": 10,
-            "target_slot": 0,
-            "type": "CLIP"
-          },
-          {
-            "id": 12,
-            "origin_id": -10,
-            "origin_slot": 2,
-            "target_id": 11,
-            "target_slot": 0,
-            "type": "MODEL"
-          },
-          {
-            "id": 13,
-            "origin_id": -10,
-            "origin_slot": 3,
-            "target_id": 11,
-            "target_slot": 1,
-            "type": "CONDITIONING"
-          },
-          {
-            "id": 14,
-            "origin_id": -10,
-            "origin_slot": 4,
-            "target_id": 11,
-            "target_slot": 2,
-            "type": "CONDITIONING"
-          },
-          {
-            "id": 15,
-            "origin_id": -10,
-            "origin_slot": 5,
-            "target_id": 11,
-            "target_slot": 3,
-            "type": "LATENT"
-          }
-        ],
-        "extra": {}
-      }
-    ]
-  },
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [0, 0]
-    },
-    "frontendVersion": "1.24.1"
-  },
-  "version": 0.4
-}

browser_tests/assets/widgets/painter_with_input.json

@@ -0,0 +1,74 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 1,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "LoadImage",
+      "pos": [50, 50],
+      "size": [400, 314],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": [1]
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": ["example.png", "image"]
+    },
+    {
+      "id": 1,
+      "type": "Painter",
+      "pos": [450, 50],
+      "size": [450, 550],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "link": 1
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "Painter"
+      },
+      "widgets_values": ["", 512, 512, "#000000"]
+    }
+  ],
+  "links": [[1, 2, 0, 1, 0, "IMAGE"]],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}

browser_tests/fixtures/ComfyMouse.ts

@@ -1,4 +1,4 @@
-import type { Mouse } from '@playwright/test'
+import type { Locator, Mouse } from '@playwright/test'
 
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import type { Position } from '@e2e/fixtures/types'
@@ -72,6 +72,22 @@ export class ComfyMouse implements Omit<Mouse, 'move'> {
     await this.nextFrame()
   }
 
+  async resizeByDragging(
+    element: Locator,
+    { x, y }: { x?: number; y?: number }
+  ) {
+    const elementBox = await element.boundingBox()
+    if (!elementBox) throw new Error('element should have layout')
+
+    const cx = elementBox.x + elementBox.width / 2
+    const cy = elementBox.y + elementBox.height / 2
+
+    await this.dragAndDrop(
+      { x: cx, y: cy },
+      { x: cx + (x ?? 0), y: cy + (y ?? 0) }
+    )
+  }
+
   //#region Pass-through
   async click(...args: Parameters<Mouse['click']>) {
     return await this.mouse.click(...args)

browser_tests/fixtures/ComfyPage.ts

@@ -5,8 +5,8 @@ import MCR from 'monocart-coverage-reports'
 
 import { COVERAGE_OUTPUT_DIR } from '@e2e/coverageConfig'
 import { NodeBadgeMode } from '@/types/nodeSource'
-import { ComfyActionbar } from '@e2e/helpers/actionbar'
-import { ComfyTemplates } from '@e2e/helpers/templates'
+import { ComfyActionbar } from '@e2e/fixtures/components/Actionbar'
+import { ComfyTemplates } from '@e2e/fixtures/components/Templates'
 import { ComfyMouse } from '@e2e/fixtures/ComfyMouse'
 import { TestIds } from '@e2e/fixtures/selectors'
 import { comfyExpect } from '@e2e/fixtures/utils/customMatchers'
@@ -22,6 +22,7 @@ import { MediaLightbox } from '@e2e/fixtures/components/MediaLightbox'
 import { QueuePanel } from '@e2e/fixtures/components/QueuePanel'
 import { SettingDialog } from '@e2e/fixtures/components/SettingDialog'
 import { TemplatesDialog } from '@e2e/fixtures/components/TemplatesDialog'
+import { TitleEditor } from '@e2e/fixtures/components/TitleEditor'
 import {
   AssetsSidebarTab,
   ModelLibrarySidebarTab,
@@ -54,11 +55,13 @@ class ComfyPropertiesPanel {
   readonly root: Locator
   readonly panelTitle: Locator
   readonly searchBox: Locator
+  readonly titleEditor: TitleEditor
 
   constructor(readonly page: Page) {
     this.root = page.getByTestId(TestIds.propertiesPanel.root)
     this.panelTitle = this.root.locator('h3')
     this.searchBox = this.root.getByPlaceholder(/^Search/)
+    this.titleEditor = new TitleEditor(this.root)
   }
 }
 
@@ -160,6 +163,7 @@ export class ComfyPage {
   public readonly settingDialog: SettingDialog
   public readonly confirmDialog: ConfirmDialog
   public readonly templatesDialog: TemplatesDialog
+  public readonly titleEditor: TitleEditor
   public readonly mediaLightbox: MediaLightbox
   public readonly vueNodes: VueNodeHelpers
   public readonly appMode: AppModeHelper
@@ -206,13 +210,14 @@ export class ComfyPage {
     this.workflowUploadInput = page.locator('#comfy-file-input')
 
     this.searchBox = new ComfyNodeSearchBox(page)
-    this.searchBoxV2 = new ComfyNodeSearchBoxV2(page)
+    this.searchBoxV2 = new ComfyNodeSearchBoxV2(this)
     this.menu = new ComfyMenu(page)
     this.actionbar = new ComfyActionbar(page)
     this.templates = new ComfyTemplates(page)
     this.settingDialog = new SettingDialog(page, this)
     this.confirmDialog = new ConfirmDialog(page)
     this.templatesDialog = new TemplatesDialog(page)
+    this.titleEditor = new TitleEditor(page)
     this.mediaLightbox = new MediaLightbox(page)
     this.vueNodes = new VueNodeHelpers(page)
     this.appMode = new AppModeHelper(this)

browser_tests/fixtures/VueNodeHelpers.ts

@@ -30,6 +30,13 @@ export class VueNodeHelpers {
     return this.page.locator(`[data-node-id="${nodeId}"]`)
   }
 
+  /**
+   * Get the inner wrapper element of a Vue node.
+   */
+  getNodeInnerWrapper(nodeId: string): Locator {
+    return this.getNodeLocator(nodeId).getByTestId(TestIds.node.innerWrapper)
+  }
+
   /**
    * Get locator for Vue nodes by the node's title (displayed name in the header).
    * Matches against the actual title element, not the full node body.
@@ -119,10 +126,9 @@ export class VueNodeHelpers {
   }
 
   /**
-   * Return a DOM-focused VueNodeFixture for the first node matching the title.
-   * Resolves the node id up front so subsequent interactions survive title changes.
+   * Resolve the data-node-id of the first rendered node matching the title.
    */
-  async getFixtureByTitle(title: string): Promise<VueNodeFixture> {
+  async getNodeIdByTitle(title: string): Promise<string> {
     const node = this.getNodeByTitle(title).first()
     await node.waitFor({ state: 'visible' })
 
@@ -133,6 +139,15 @@ export class VueNodeHelpers {
       )
     }
 
+    return nodeId
+  }
+
+  /**
+   * Return a DOM-focused VueNodeFixture for the first node matching the title.
+   * Resolves the node id up front so subsequent interactions survive title changes.
+   */
+  async getFixtureByTitle(title: string): Promise<VueNodeFixture> {
+    const nodeId = await this.getNodeIdByTitle(title)
     return new VueNodeFixture(this.getNodeLocator(nodeId))
   }
 

browser_tests/fixtures/components/ComfyNodeSearchBoxV2.ts

@@ -1,6 +1,12 @@
-import type { Locator, Page } from '@playwright/test'
+import type { Locator } from '@playwright/test'
 
+import type { RootCategoryId } from '@/components/searchbox/v2/rootCategories'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+const { searchBoxV2 } = TestIds
+
+export type { RootCategoryId }
 
 export class ComfyNodeSearchBoxV2 {
   readonly dialog: Locator
@@ -8,24 +14,99 @@ export class ComfyNodeSearchBoxV2 {
   readonly filterSearch: Locator
   readonly results: Locator
   readonly filterOptions: Locator
+  readonly filterChips: Locator
+  readonly noResults: Locator
+  readonly nodeIdBadge: Locator
+  readonly sidebarToggle: Locator
+  readonly sidebarBackdrop: Locator
+  readonly filterChipsScroll: Locator
 
-  constructor(readonly page: Page) {
+  constructor(private comfyPage: ComfyPage) {
+    const page = comfyPage.page
     this.dialog = page.getByRole('search')
     this.input = this.dialog.getByRole('combobox')
     this.filterSearch = this.dialog.getByRole('textbox', { name: 'Search' })
-    this.results = this.dialog.getByTestId('result-item')
-    this.filterOptions = this.dialog.getByTestId('filter-option')
+    this.results = this.dialog.getByTestId(searchBoxV2.resultItem)
+    this.filterOptions = this.dialog.getByTestId(searchBoxV2.filterOption)
+    this.filterChips = this.dialog.getByTestId(searchBoxV2.filterChip)
+    this.noResults = this.dialog.getByTestId(searchBoxV2.noResults)
+    this.nodeIdBadge = this.dialog.getByTestId(searchBoxV2.nodeIdBadge)
+    this.sidebarToggle = this.dialog.getByTestId(searchBoxV2.sidebarToggle)
+    this.sidebarBackdrop = this.dialog.getByTestId(searchBoxV2.sidebarBackdrop)
+    this.filterChipsScroll = this.dialog.getByTestId(
+      searchBoxV2.filterChipsScroll
+    )
   }
 
+  /** Sidebar category tree button (e.g. `sampling`, `sampling/custom_sampling`). */
   categoryButton(categoryId: string): Locator {
-    return this.dialog.getByTestId(`category-${categoryId}`)
+    return this.dialog.getByTestId(searchBoxV2.category(categoryId))
   }
 
-  filterBarButton(name: string): Locator {
-    return this.dialog.getByRole('button', { name })
+  /** Top filter-bar root category chip (e.g. `comfy`, `essentials`). */
+  rootCategoryButton(id: RootCategoryId): Locator {
+    return this.dialog.getByTestId(searchBoxV2.rootCategory(id))
   }
 
-  async reload(comfyPage: ComfyPage) {
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+  /** Top filter-bar input/output type popover trigger. */
+  typeFilterButton(key: 'input' | 'output'): Locator {
+    return this.dialog.getByTestId(searchBoxV2.typeFilter(key))
+  }
+
+  async applyTypeFilter(
+    key: 'input' | 'output',
+    typeName: string
+  ): Promise<void> {
+    const trigger = this.typeFilterButton(key)
+    await trigger.click()
+    await this.filterOptions.first().waitFor({ state: 'visible' })
+    await this.filterSearch.fill(typeName)
+    await this.filterOptions.filter({ hasText: typeName }).first().click()
+    // The popover does not auto-close on selection — toggle the trigger.
+    await trigger.click()
+    await this.filterOptions.first().waitFor({ state: 'hidden' })
+  }
+
+  async removeFilterChip(index = 0): Promise<void> {
+    await this.filterChips
+      .nth(index)
+      .getByTestId(searchBoxV2.chipDelete)
+      .click()
+  }
+
+  async toggle(): Promise<void> {
+    await this.comfyPage.command.executeCommand('Workspace.SearchBox.Toggle')
+  }
+
+  async open(): Promise<void> {
+    if (await this.input.isVisible()) return
+    await this.toggle()
+    await this.input.waitFor({ state: 'visible' })
+  }
+
+  async openByDoubleClickCanvas(): Promise<void> {
+    // Use page.mouse.dblclick (not canvas.dblclick) so the z-999 Vue overlay
+    // does not intercept; coords target a viewport spot that is on the canvas
+    // and clear of both the side toolbar and any default-graph nodes.
+    await this.comfyPage.page.mouse.dblclick(200, 200, { delay: 5 })
+  }
+
+  async ensureV2Search(): Promise<void> {
+    await this.comfyPage.settings.setSetting(
+      'Comfy.NodeSearchBoxImpl',
+      'default'
+    )
+  }
+
+  async setup(): Promise<void> {
+    await this.ensureV2Search()
+    await this.comfyPage.settings.setSetting(
+      'Comfy.LinkRelease.Action',
+      'search box'
+    )
+    await this.comfyPage.settings.setSetting(
+      'Comfy.LinkRelease.ActionShift',
+      'search box'
+    )
   }
 }

browser_tests/fixtures/components/ContextMenu.ts

@@ -4,11 +4,13 @@ import type { Locator, Page } from '@playwright/test'
 export class ContextMenu {
   public readonly primeVueMenu: Locator
   public readonly litegraphMenu: Locator
+  public readonly litegraphContextMenu: Locator
   public readonly menuItems: 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')
   }
 
@@ -39,7 +41,10 @@ export class ContextMenu {
     const litegraphVisible = await this.litegraphMenu
       .isVisible()
       .catch(() => false)
-    return primeVueVisible || litegraphVisible
+    const litegraphContextVisible = await this.litegraphContextMenu
+      .isVisible()
+      .catch(() => false)
+    return primeVueVisible || litegraphVisible || litegraphContextVisible
   }
 
   async assertHasItems(items: string[]): Promise<void> {
@@ -71,7 +76,8 @@ export class ContextMenu {
   async waitForHidden(): Promise<void> {
     await Promise.all([
       this.primeVueMenu.waitFor({ state: 'hidden' }),
-      this.litegraphMenu.waitFor({ state: 'hidden' })
+      this.litegraphMenu.waitFor({ state: 'hidden' }),
+      this.litegraphContextMenu.waitFor({ state: 'hidden' })
     ])
   }
 }

browser_tests/fixtures/components/TitleEditor.ts

@@ -0,0 +1,33 @@
+import type { Locator, Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import { TestIds } from '@e2e/fixtures/selectors'
+
+/**
+ * The node/group title-editing input. Rendered in three scopes: the canvas
+ * overlay (page-wide), the properties panel, and the Vue node itself.
+ */
+export class TitleEditor {
+  public readonly input: Locator
+
+  constructor(scope: Page | Locator) {
+    this.input = scope.getByTestId(TestIds.node.titleInput)
+  }
+
+  async setTitle(title: string): Promise<void> {
+    await this.input.fill(title)
+    await this.input.press('Enter')
+  }
+
+  async cancel(): Promise<void> {
+    await this.input.press('Escape')
+  }
+
+  async expectVisible(): Promise<void> {
+    await expect(this.input).toBeVisible()
+  }
+
+  async expectHidden(): Promise<void> {
+    await expect(this.input).toBeHidden()
+  }
+}

browser_tests/fixtures/components/WidgetBoundingBox.ts

@@ -0,0 +1,54 @@
+import type { Locator } from '@playwright/test'
+
+import { TestIds } from '@e2e/fixtures/selectors'
+
+class BoundingBoxCoordinate {
+  public readonly root: Locator
+  public readonly input: Locator
+  public readonly incrementButton: Locator
+  public readonly decrementButton: Locator
+
+  constructor(root: Locator) {
+    this.root = root
+    this.input = root.locator('input')
+    this.incrementButton = root.getByTestId(TestIds.widgets.increment)
+    this.decrementButton = root.getByTestId(TestIds.widgets.decrement)
+  }
+
+  async type(value: string | number): Promise<void> {
+    await this.input.fill(String(value))
+    await this.input.press('Enter')
+  }
+
+  async focus(): Promise<void> {
+    await this.input.focus()
+  }
+
+  async increment(): Promise<void> {
+    await this.incrementButton.click()
+  }
+
+  async decrement(): Promise<void> {
+    await this.decrementButton.click()
+  }
+}
+
+export class WidgetBoundingBoxFixture {
+  public readonly root: Locator
+  public readonly x: BoundingBoxCoordinate
+  public readonly y: BoundingBoxCoordinate
+  public readonly width: BoundingBoxCoordinate
+  public readonly height: BoundingBoxCoordinate
+
+  constructor(parent: Locator) {
+    this.root = parent.getByTestId('bounding-box')
+    this.x = new BoundingBoxCoordinate(this.root.getByTestId('bounding-box-x'))
+    this.y = new BoundingBoxCoordinate(this.root.getByTestId('bounding-box-y'))
+    this.width = new BoundingBoxCoordinate(
+      this.root.getByTestId('bounding-box-width')
+    )
+    this.height = new BoundingBoxCoordinate(
+      this.root.getByTestId('bounding-box-height')
+    )
+  }
+}

browser_tests/fixtures/data/templateFixtures.ts

@@ -2,6 +2,11 @@ import type {
   TemplateInfo,
   WorkflowTemplates
 } from '@/platform/workflow/templates/types/template'
+import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
+
+const Cloud = TemplateIncludeOnDistributionEnum.Cloud
+const Desktop = TemplateIncludeOnDistributionEnum.Desktop
+const Local = TemplateIncludeOnDistributionEnum.Local
 
 export function makeTemplate(
   overrides: Partial<TemplateInfo> & Pick<TemplateInfo, 'name'>
@@ -26,3 +31,33 @@ export function mockTemplateIndex(
     }
   ]
 }
+
+export const STABLE_CLOUD_TEMPLATE: TemplateInfo = makeTemplate({
+  name: 'cloud-stable',
+  title: 'Cloud Stable',
+  includeOnDistributions: [Cloud]
+})
+
+export const STABLE_DESKTOP_TEMPLATE: TemplateInfo = makeTemplate({
+  name: 'desktop-stable',
+  title: 'Desktop Stable',
+  includeOnDistributions: [Desktop]
+})
+
+export const STABLE_LOCAL_TEMPLATE: TemplateInfo = makeTemplate({
+  name: 'local-stable',
+  title: 'Local Stable',
+  includeOnDistributions: [Local]
+})
+
+export const STABLE_UNRESTRICTED_TEMPLATE: TemplateInfo = makeTemplate({
+  name: 'unrestricted-stable',
+  title: 'Unrestricted Stable'
+})
+
+export const ALL_DISTRIBUTION_TEMPLATES: TemplateInfo[] = [
+  STABLE_CLOUD_TEMPLATE,
+  STABLE_DESKTOP_TEMPLATE,
+  STABLE_LOCAL_TEMPLATE,
+  STABLE_UNRESTRICTED_TEMPLATE
+]

browser_tests/fixtures/helpers/CanvasHelper.ts

@@ -74,7 +74,7 @@ export class CanvasHelper {
    * Use with `page.mouse` APIs when Vue DOM overlays above the canvas would
    * cause Playwright's actionability check to fail on the canvas locator.
    */
-  private async toAbsolute(position: Position): Promise<Position> {
+  async toAbsolute(position: Position): Promise<Position> {
     const box = await this.canvas.boundingBox()
     if (!box) throw new Error('Canvas bounding box not available')
     return { x: box.x + position.x, y: box.y + position.y }
@@ -150,6 +150,28 @@ export class CanvasHelper {
     await nextFrame(this.page)
   }
 
+  async getOffset(): Promise<[number, number]> {
+    return this.page.evaluate(
+      () => [...window.app!.canvas.ds.offset] as [number, number]
+    )
+  }
+
+  async getNodeTitleHeight(): Promise<number> {
+    return this.page.evaluate(() => window.LiteGraph!.NODE_TITLE_HEIGHT)
+  }
+
+  /**
+   * Hold `Control+Shift` and drag from `from` to `to` using page-absolute
+   * coordinates.
+   */
+  async ctrlShiftDrag(from: Position, to: Position): Promise<void> {
+    await this.page.keyboard.down('Control')
+    await this.page.keyboard.down('Shift')
+    await this.dragAndDrop(from, to)
+    await this.page.keyboard.up('Shift')
+    await this.page.keyboard.up('Control')
+  }
+
   async convertOffsetToCanvas(
     pos: [number, number]
   ): Promise<[number, number]> {
@@ -242,11 +264,39 @@ export class CanvasHelper {
     await this.page.mouse.up({ button: 'middle' })
   }
 
-  async disconnectEdge(): Promise<void> {
-    await this.dragAndDrop(
-      DefaultGraphPositions.clipTextEncodeNode1InputSlot,
-      DefaultGraphPositions.emptySpace
-    )
+  async disconnectEdge(
+    options: { modifiers?: ('Shift' | 'Control' | 'Alt' | 'Meta')[] } = {}
+  ): Promise<void> {
+    const { modifiers = [] } = options
+    for (const mod of modifiers) await this.page.keyboard.down(mod)
+    try {
+      await this.dragAndDrop(
+        DefaultGraphPositions.clipTextEncodeNode1InputSlot,
+        DefaultGraphPositions.emptySpace
+      )
+    } finally {
+      for (const mod of modifiers) await this.page.keyboard.up(mod)
+    }
+  }
+
+  async middleClick(position: Position): Promise<void> {
+    await this.mouseClickAt(position, { button: 'middle' })
+  }
+
+  async dblclickGroupTitle(title: string): Promise<void> {
+    const clientPos = await this.page.evaluate((targetTitle) => {
+      const groups = window.app!.canvas.graph?.groups ?? []
+      const group = groups.find(
+        (g: { title: string }) => g.title === targetTitle
+      )
+      if (!group) return null
+      const cx = group.pos[0] + group.size[0] / 2
+      const cy = group.pos[1] + group.titleHeight / 2
+      return window.app!.canvasPosToClientPos([cx, cy])
+    }, title)
+    if (!clientPos) throw new Error(`Group "${title}" not found`)
+    await this.page.mouse.dblclick(clientPos[0], clientPos[1], { delay: 5 })
+    await nextFrame(this.page)
   }
 
   async connectEdge(options: { reverse?: boolean } = {}): Promise<void> {

browser_tests/fixtures/helpers/ClipboardHelper.ts

@@ -4,7 +4,7 @@ import { basename } from 'path'
 import type { Locator, Page } from '@playwright/test'
 
 import type { KeyboardHelper } from '@e2e/fixtures/helpers/KeyboardHelper'
-import { getMimeType } from '@e2e/fixtures/helpers/mimeTypeUtil'
+import { getMimeType } from '@e2e/fixtures/utils/mimeTypeUtil'
 
 export class ClipboardHelper {
   constructor(

browser_tests/fixtures/helpers/DragDropHelper.ts

@@ -3,7 +3,7 @@ import { readFileSync } from 'fs'
 import type { Page } from '@playwright/test'
 
 import type { Position } from '@e2e/fixtures/types'
-import { getMimeType } from '@e2e/fixtures/helpers/mimeTypeUtil'
+import { getMimeType } from '@e2e/fixtures/utils/mimeTypeUtil'
 import { assetPath } from '@e2e/fixtures/utils/paths'
 import { nextFrame } from '@e2e/fixtures/utils/timing'
 

browser_tests/fixtures/helpers/ErrorsTabHelper.ts

@@ -4,6 +4,21 @@ import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 import { PropertiesPanelHelper } from '@e2e/tests/propertiesPanel/PropertiesPanelHelper'
 
+export async function enableErrorsOverlay(comfyPage: ComfyPage) {
+  await comfyPage.settings.setSetting(
+    'Comfy.RightSidePanel.ShowErrorsTab',
+    true
+  )
+}
+
+/** Dismiss the error overlay (the floating dialog with the dismiss button). */
+export async function dismissErrorOverlay(comfyPage: ComfyPage): Promise<void> {
+  const overlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+  await expect(overlay).toBeVisible()
+  await overlay.getByTestId(TestIds.dialogs.errorOverlayDismiss).click()
+  await expect(overlay).toBeHidden()
+}
+
 export async function loadWorkflowAndOpenErrorsTab(
   comfyPage: ComfyPage,
   workflow: string

browser_tests/fixtures/helpers/ExecutionHelper.ts

@@ -1,9 +1,35 @@
 import type { WebSocketRoute } from '@playwright/test'
 
+import type { NodeError, PromptResponse } from '@/schemas/apiSchema'
 import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { createMockJob } from '@e2e/fixtures/helpers/AssetsHelper'
 
+const PROMPT_ROUTE_PATTERN = /\/api\/prompt$/
+
+/**
+ * Build a `NodeError` describing a single failed input on a KSampler node.
+ * Shared between specs that surface validation rings via 400 responses.
+ */
+export function buildKSamplerError(
+  type: NodeError['errors'][number]['type'],
+  inputName: string,
+  message: string
+): NodeError {
+  return {
+    class_type: 'KSampler',
+    dependent_outputs: [],
+    errors: [
+      {
+        type,
+        message,
+        details: '',
+        extra_info: { input_name: inputName }
+      }
+    ]
+  }
+}
+
 /**
  * Helper for simulating prompt execution in e2e tests.
  */
@@ -16,13 +42,23 @@ export class ExecutionHelper {
 
   constructor(
     comfyPage: ComfyPage,
-    private readonly ws: WebSocketRoute
+    private readonly ws?: WebSocketRoute
   ) {
     this.page = comfyPage.page
     this.command = comfyPage.command
     this.assets = comfyPage.assets
   }
 
+  private requireWs(): WebSocketRoute {
+    if (!this.ws) {
+      throw new Error(
+        'ExecutionHelper was constructed without a WebSocketRoute; ' +
+          'pass `ws` to use methods that send WS frames.'
+      )
+    }
+    return this.ws
+  }
+
   /**
    * Intercept POST /api/prompt, execute Comfy.QueuePrompt, and return
    * the synthetic job ID.
@@ -39,7 +75,7 @@ export class ExecutionHelper {
     })
 
     await this.page.route(
-      '**/api/prompt',
+      PROMPT_ROUTE_PATTERN,
       async (route) => {
         await route.fulfill({
           status: 200,
@@ -60,6 +96,31 @@ export class ExecutionHelper {
     return jobId
   }
 
+  async mockValidationFailure(
+    nodeErrors: Record<string, NodeError>
+  ): Promise<void> {
+    const response: PromptResponse = {
+      node_errors: nodeErrors,
+      error: {
+        type: 'prompt_outputs_failed_validation',
+        message: 'Prompt outputs failed validation',
+        details: ''
+      }
+    }
+
+    await this.page.route(
+      PROMPT_ROUTE_PATTERN,
+      async (route) => {
+        await route.fulfill({
+          status: 400,
+          contentType: 'application/json',
+          body: JSON.stringify(response)
+        })
+      },
+      { times: 1 }
+    )
+  }
+
   /**
    * Send a binary `b_preview_with_metadata` WS message (type 4).
    * Encodes the metadata and a tiny 1x1 PNG so the app creates a blob URL.
@@ -89,12 +150,12 @@ export class ExecutionHelper {
     new Uint8Array(buf, 8, metadataBytes.length).set(metadataBytes)
     new Uint8Array(buf, 8 + metadataBytes.length).set(png)
 
-    this.ws.send(Buffer.from(buf))
+    this.requireWs().send(Buffer.from(buf))
   }
 
   /** Send `execution_start` WS event. */
   executionStart(jobId: string): void {
-    this.ws.send(
+    this.requireWs().send(
       JSON.stringify({
         type: 'execution_start',
         data: { prompt_id: jobId, timestamp: Date.now() }
@@ -104,7 +165,7 @@ export class ExecutionHelper {
 
   /** Send `executing` WS event to signal which node is currently running. */
   executing(jobId: string, nodeId: string | null): void {
-    this.ws.send(
+    this.requireWs().send(
       JSON.stringify({
         type: 'executing',
         data: { prompt_id: jobId, node: nodeId }
@@ -118,7 +179,7 @@ export class ExecutionHelper {
     nodeId: string,
     output: Record<string, unknown>
   ): void {
-    this.ws.send(
+    this.requireWs().send(
       JSON.stringify({
         type: 'executed',
         data: {
@@ -133,7 +194,7 @@ export class ExecutionHelper {
 
   /** Send `execution_success` WS event. */
   executionSuccess(jobId: string): void {
-    this.ws.send(
+    this.requireWs().send(
       JSON.stringify({
         type: 'execution_success',
         data: { prompt_id: jobId, timestamp: Date.now() }
@@ -143,7 +204,7 @@ export class ExecutionHelper {
 
   /** Send `execution_error` WS event. */
   executionError(jobId: string, nodeId: string, message: string): void {
-    this.ws.send(
+    this.requireWs().send(
       JSON.stringify({
         type: 'execution_error',
         data: {
@@ -161,7 +222,7 @@ export class ExecutionHelper {
 
   /** Send `progress` WS event. */
   progress(jobId: string, nodeId: string, value: number, max: number): void {
-    this.ws.send(
+    this.requireWs().send(
       JSON.stringify({
         type: 'progress',
         data: { prompt_id: jobId, node: nodeId, value, max }
@@ -201,7 +262,7 @@ export class ExecutionHelper {
 
   /** Send `status` WS event to update queue count. */
   status(queueRemaining: number): void {
-    this.ws.send(
+    this.requireWs().send(
       JSON.stringify({
         type: 'status',
         data: { status: { exec_info: { queue_remaining: queueRemaining } } }

browser_tests/fixtures/helpers/NodeOperationsHelper.ts

@@ -55,29 +55,32 @@ export class NodeOperationsHelper {
    * Add a node to the graph by type.
    * @param type - The node type (e.g. 'KSampler', 'VAEDecode')
    * @param options - GraphAddOptions (ghost, skipComputeOrder). When ghost is
-   *   true and cursorPosition is provided, a synthetic MouseEvent is created
-   *   as the dragEvent.
-   * @param cursorPosition - Client coordinates for ghost placement dragEvent
+   *   true and position is provided, a synthetic MouseEvent is created as the
+   *   dragEvent.
+   * @param position - When ghost is true, client coordinates for the ghost
+   *   placement dragEvent. Otherwise, world coordinates assigned to node.pos.
    */
   async addNode(
     type: string,
     options?: Omit<GraphAddOptions, 'dragEvent'>,
-    cursorPosition?: Position
+    position?: Position
   ): Promise<NodeReference> {
     const id = await this.page.evaluate(
-      ([nodeType, opts, cursor]) => {
+      ([nodeType, opts, pos]) => {
         const node = window.LiteGraph!.createNode(nodeType)!
         const addOpts: Record<string, unknown> = { ...opts }
-        if (opts?.ghost && cursor) {
+        if (opts?.ghost && pos) {
           addOpts.dragEvent = new MouseEvent('click', {
-            clientX: cursor.x,
-            clientY: cursor.y
+            clientX: pos.x,
+            clientY: pos.y
           })
+        } else if (pos) {
+          node.pos = [pos.x, pos.y]
         }
         window.app!.graph.add(node, addOpts as GraphAddOptions)
         return node.id
       },
-      [type, options ?? {}, cursorPosition ?? null] as const
+      [type, options ?? {}, position ?? null] as const
     )
     return new NodeReference(id, this.comfyPage)
   }

browser_tests/fixtures/helpers/TemplateHelper.ts

@@ -0,0 +1,198 @@
+import type { Page, Route } from '@playwright/test'
+
+import type {
+  TemplateInfo,
+  WorkflowTemplates
+} from '@/platform/workflow/templates/types/template'
+import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
+import {
+  makeTemplate,
+  mockTemplateIndex
+} from '@e2e/fixtures/data/templateFixtures'
+
+/**
+ * Generate N deterministic templates, optionally restricted to a distribution.
+ *
+ * Lives here (not in `fixtures/data/`) because `fixtures/data/` is reserved
+ * for static test data with no executable fixture logic.
+ */
+function generateTemplates(
+  count: number,
+  distribution?: TemplateIncludeOnDistributionEnum
+): TemplateInfo[] {
+  const slug = distribution ?? 'unrestricted'
+  return Array.from({ length: count }, (_, i) =>
+    makeTemplate({
+      name: `gen-${slug}-${String(i + 1).padStart(3, '0')}`,
+      title: `Generated ${slug} ${i + 1}`,
+      ...(distribution ? { includeOnDistributions: [distribution] } : {})
+    })
+  )
+}
+
+export interface TemplateConfig {
+  readonly templates: readonly TemplateInfo[]
+  readonly index: readonly WorkflowTemplates[] | null
+}
+
+function emptyConfig(): TemplateConfig {
+  return { templates: [], index: null }
+}
+
+export type TemplateOperator = (config: TemplateConfig) => TemplateConfig
+
+function cloneTemplates(templates: readonly TemplateInfo[]): TemplateInfo[] {
+  return templates.map((t) => structuredClone(t))
+}
+
+function cloneIndex(
+  index: readonly WorkflowTemplates[] | null
+): WorkflowTemplates[] | null {
+  return index ? index.map((m) => structuredClone(m)) : null
+}
+
+function addTemplates(
+  config: TemplateConfig,
+  templates: TemplateInfo[]
+): TemplateConfig {
+  return { ...config, templates: [...config.templates, ...templates] }
+}
+
+export function withTemplates(templates: TemplateInfo[]): TemplateOperator {
+  return (config) => addTemplates(config, templates)
+}
+
+export function withTemplate(template: TemplateInfo): TemplateOperator {
+  return (config) => addTemplates(config, [template])
+}
+
+export function withCloudTemplates(count: number): TemplateOperator {
+  return (config) =>
+    addTemplates(
+      config,
+      generateTemplates(count, TemplateIncludeOnDistributionEnum.Cloud)
+    )
+}
+
+export function withDesktopTemplates(count: number): TemplateOperator {
+  return (config) =>
+    addTemplates(
+      config,
+      generateTemplates(count, TemplateIncludeOnDistributionEnum.Desktop)
+    )
+}
+
+export function withLocalTemplates(count: number): TemplateOperator {
+  return (config) =>
+    addTemplates(
+      config,
+      generateTemplates(count, TemplateIncludeOnDistributionEnum.Local)
+    )
+}
+
+export function withUnrestrictedTemplates(count: number): TemplateOperator {
+  return (config) => addTemplates(config, generateTemplates(count))
+}
+
+/**
+ * Override the index payload entirely. Useful when a test needs a custom
+ * `WorkflowTemplates[]` shape (e.g. multiple modules).
+ */
+export function withRawIndex(index: WorkflowTemplates[]): TemplateOperator {
+  return (config) => ({ ...config, index })
+}
+
+export class TemplateHelper {
+  private templates: TemplateInfo[]
+  private index: WorkflowTemplates[] | null
+  private routeHandlers: Array<{
+    pattern: string
+    handler: (route: Route) => Promise<void>
+  }> = []
+
+  constructor(
+    private readonly page: Page,
+    config: TemplateConfig = emptyConfig()
+  ) {
+    this.templates = cloneTemplates(config.templates)
+    this.index = cloneIndex(config.index)
+  }
+
+  configure(...operators: TemplateOperator[]): void {
+    const config = operators.reduce<TemplateConfig>(
+      (cfg, op) => op(cfg),
+      emptyConfig()
+    )
+    this.templates = cloneTemplates(config.templates)
+    this.index = cloneIndex(config.index)
+  }
+
+  async mock(): Promise<void> {
+    await this.mockIndex()
+    await this.mockThumbnails()
+  }
+
+  async mockIndex(): Promise<void> {
+    const indexHandler = async (route: Route) => {
+      const payload = this.index ?? mockTemplateIndex(this.templates)
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify(payload),
+        headers: {
+          'Content-Type': 'application/json',
+          'Cache-Control': 'no-store'
+        }
+      })
+    }
+    const indexPattern = '**/templates/index.json'
+    this.routeHandlers.push({ pattern: indexPattern, handler: indexHandler })
+    await this.page.route(indexPattern, indexHandler)
+  }
+
+  async mockThumbnails(): Promise<void> {
+    const thumbnailHandler = async (route: Route) => {
+      await route.fulfill({
+        status: 200,
+        path: 'browser_tests/assets/example.webp',
+        headers: {
+          'Content-Type': 'image/webp',
+          'Cache-Control': 'no-store'
+        }
+      })
+    }
+    const thumbnailPattern = '**/templates/**.webp'
+    this.routeHandlers.push({
+      pattern: thumbnailPattern,
+      handler: thumbnailHandler
+    })
+    await this.page.route(thumbnailPattern, thumbnailHandler)
+  }
+
+  getTemplates(): TemplateInfo[] {
+    return cloneTemplates(this.templates)
+  }
+
+  get templateCount(): number {
+    return this.templates.length
+  }
+
+  async clearMocks(): Promise<void> {
+    for (const { pattern, handler } of this.routeHandlers) {
+      await this.page.unroute(pattern, handler)
+    }
+    this.routeHandlers = []
+    this.templates = []
+    this.index = null
+  }
+}
+
+export function createTemplateHelper(
+  page: Page,
+  ...operators: TemplateOperator[]
+): TemplateHelper {
+  const config = operators.reduce<TemplateConfig>(
+    (cfg, op) => op(cfg),
+    emptyConfig()
+  )
+  return new TemplateHelper(page, config)
+}

browser_tests/fixtures/selectors.ts

@@ -86,7 +86,11 @@ export const TestIds = {
     queueButton: 'queue-button',
     queueModeMenuTrigger: 'queue-mode-menu-trigger',
     saveButton: 'save-workflow-button',
-    subscribeButton: 'topbar-subscribe-button'
+    subscribeButton: 'topbar-subscribe-button',
+    loginButton: 'login-button',
+    loginButtonPopover: 'login-button-popover',
+    loginButtonPopoverLearnMore: 'login-button-popover-learn-more',
+    actionBarButtons: 'action-bar-buttons'
   },
   nodeLibrary: {
     bookmarksSection: 'node-library-bookmarks-section'
@@ -206,7 +210,9 @@ export const TestIds = {
   },
   queue: {
     overlayToggle: 'queue-overlay-toggle',
-    clearHistoryAction: 'clear-history-action'
+    clearHistoryAction: 'clear-history-action',
+    jobAssetsList: 'job-assets-list',
+    notificationBanner: 'queue-notification-banner'
   },
   errors: {
     imageLoadError: 'error-loading-image',
@@ -249,6 +255,20 @@ export const TestIds = {
     batchCounter: 'batch-counter',
     batchNext: 'batch-next',
     batchPrev: 'batch-prev'
+  },
+  searchBoxV2: {
+    resultItem: 'result-item',
+    filterOption: 'filter-option',
+    filterChip: 'filter-chip',
+    chipDelete: 'chip-delete',
+    noResults: 'no-results',
+    nodeIdBadge: 'node-id-badge',
+    sidebarToggle: 'toggle-category-sidebar',
+    sidebarBackdrop: 'sidebar-backdrop',
+    filterChipsScroll: 'filter-chips-scroll',
+    category: (id: string) => `category-${id}`,
+    rootCategory: (id: string) => `search-category-${id}`,
+    typeFilter: (key: 'input' | 'output') => `search-filter-${key}`
   }
 } as const
 

browser_tests/fixtures/templateApiFixture.ts

@@ -0,0 +1,16 @@
+import { test as base } from '@playwright/test'
+
+import type { TemplateHelper } from '@e2e/fixtures/helpers/TemplateHelper'
+import { createTemplateHelper } from '@e2e/fixtures/helpers/TemplateHelper'
+
+export const templateApiFixture = base.extend<{
+  templateApi: TemplateHelper
+}>({
+  templateApi: async ({ page }, use) => {
+    const templateApi = createTemplateHelper(page)
+
+    await use(templateApi)
+
+    await templateApi.clearMocks()
+  }
+})

browser_tests/fixtures/utils/builderTestUtils.ts

@@ -5,7 +5,7 @@ import type { AppModeHelper } from '@e2e/fixtures/helpers/AppModeHelper'
 import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
 
 import { comfyExpect } from '@e2e/fixtures/ComfyPage'
-import { fitToViewInstant } from '@e2e/helpers/fitToView'
+import { fitToViewInstant } from '@e2e/fixtures/utils/fitToView'
 
 interface BuilderSetupResult {
   inputNodeTitle: string

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -1,7 +1,8 @@
 import { expect } from '@playwright/test'
 
+import type { SerialisableLLink } from '@/lib/litegraph/src/types/serialisation'
 import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
-import { ManageGroupNode } from '@e2e/helpers/manageGroupNode'
+import { ManageGroupNode } from '@e2e/fixtures/components/ManageGroupNode'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import type { Position, Size } from '@e2e/fixtures/types'
 import { VueNodeFixture } from '@e2e/fixtures/utils/vueNodeFixtures'
@@ -169,6 +170,36 @@ class NodeSlotReference {
       [this.type, this.node.id, this.index] as const
     )
   }
+
+  async getLink(): Promise<SerialisableLLink | null> {
+    return await this.node.comfyPage.page.evaluate(
+      ([type, id, index]) => {
+        const graph = window.app!.canvas.graph!
+        const node = graph.getNodeById(id)
+        if (!node) throw new Error(`Node ${id} not found.`)
+        const linkId =
+          type === 'input'
+            ? node.inputs[index].link
+            : (node.outputs[index].links ?? [])[0]
+        if (linkId == null) return null
+        const link =
+          graph.links instanceof Map
+            ? graph.links.get(linkId)
+            : graph.links[linkId]
+        if (!link) return null
+        return {
+          id: link.id,
+          origin_id: link.origin_id,
+          origin_slot: link.origin_slot,
+          target_id: link.target_id,
+          target_slot: link.target_slot,
+          type: link.type,
+          parentId: link.parentId
+        }
+      },
+      [this.type, this.node.id, this.index] as const
+    )
+  }
 }
 
 export class NodeWidgetReference {
@@ -326,6 +357,23 @@ export class NodeReference {
     const nodeSize = await this.getSize()
     return { x: nodePos.x + nodeSize.width / 2, y: nodePos.y - 15 }
   }
+  async dragBy(
+    delta: Position,
+    options?: {
+      modifiers?: ('Shift' | 'Control' | 'Alt' | 'Meta')[]
+    }
+  ): Promise<void> {
+    const titlePos = await this.getTitlePosition()
+    const target = { x: titlePos.x + delta.x, y: titlePos.y + delta.y }
+    const modifiers = options?.modifiers ?? []
+    const keyboard = this.comfyPage.page.keyboard
+    for (const mod of modifiers) await keyboard.down(mod)
+    try {
+      await this.comfyPage.canvasOps.dragAndDrop(titlePos, target)
+    } finally {
+      for (const mod of modifiers) await keyboard.up(mod)
+    }
+  }
   async isPinned() {
     return !!(await this.getFlags()).pinned
   }

browser_tests/fixtures/utils/vueNodeFixtures.ts

@@ -1,12 +1,13 @@
 import type { Locator } from '@playwright/test'
 
+import { TitleEditor } from '@e2e/fixtures/components/TitleEditor'
 import { TestIds } from '@e2e/fixtures/selectors'
 
 /** DOM-centric helper for a single Vue-rendered node on the canvas. */
 export class VueNodeFixture {
   public readonly header: Locator
   public readonly title: Locator
-  public readonly titleInput: Locator
+  public readonly titleEditor: TitleEditor
   public readonly body: Locator
   public readonly pinIndicator: Locator
   public readonly collapseButton: Locator
@@ -16,7 +17,7 @@ export class VueNodeFixture {
   constructor(private readonly locator: Locator) {
     this.header = locator.locator('[data-testid^="node-header-"]')
     this.title = locator.getByTestId('node-title')
-    this.titleInput = locator.getByTestId('node-title-input')
+    this.titleEditor = new TitleEditor(locator)
     this.body = locator.locator('[data-testid^="node-body-"]')
     this.pinIndicator = locator.getByTestId(TestIds.node.pinIndicator)
     this.collapseButton = locator.getByTestId('node-collapse-button')
@@ -30,17 +31,8 @@ export class VueNodeFixture {
 
   async setTitle(value: string): Promise<void> {
     await this.header.dblclick()
-    const input = this.titleInput
-    await input.waitFor({ state: 'visible' })
-    await input.fill(value)
-    await input.press('Enter')
-  }
-
-  async cancelTitleEdit(): Promise<void> {
-    await this.header.dblclick()
-    const input = this.titleInput
-    await input.waitFor({ state: 'visible' })
-    await input.press('Escape')
+    await this.titleEditor.expectVisible()
+    await this.titleEditor.setTitle(value)
   }
 
   async toggleCollapse(): Promise<void> {

browser_tests/globalTeardown.ts

@@ -2,7 +2,7 @@ import { config as dotenvConfig } from 'dotenv'
 import MCR from 'monocart-coverage-reports'
 
 import { COVERAGE_OUTPUT_DIR, coverageSourceFilter } from '@e2e/coverageConfig'
-import { writePerfReport } from '@e2e/helpers/perfReporter'
+import { writePerfReport } from '@e2e/fixtures/utils/perfReporter'
 import { restorePath } from '@e2e/utils/backupUtils'
 
 dotenvConfig()

browser_tests/tests/actionBarButtons.spec.ts

@@ -0,0 +1,140 @@
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+const ICON_CLASS = 'icon-[lucide--star]'
+const BUTTON_LABEL = 'Test Action'
+const BUTTON_TOOLTIP = 'Test action tooltip'
+
+async function registerTestButton(
+  page: Page,
+  opts: {
+    name?: string
+    icon?: string
+    label?: string
+    tooltip?: string
+  } = {}
+): Promise<void> {
+  await page.evaluate(
+    ({ name, icon, label, tooltip }) => {
+      window.app!.registerExtension({
+        name,
+        actionBarButtons: [{ icon, label, tooltip, onClick: () => {} }]
+      })
+    },
+    {
+      name: opts.name ?? 'TestActionBarButton',
+      icon: opts.icon ?? ICON_CLASS,
+      label: opts.label ?? BUTTON_LABEL,
+      tooltip: opts.tooltip ?? BUTTON_TOOLTIP
+    }
+  )
+}
+
+test.describe('ActionBar Buttons', { tag: ['@ui'] }, () => {
+  test.describe('Empty state', () => {
+    test('container is hidden when no extension registers buttons', async ({
+      comfyPage
+    }) => {
+      await expect(
+        comfyPage.page.getByTestId(TestIds.topbar.actionBarButtons)
+      ).toBeHidden()
+    })
+  })
+
+  test.describe('Button rendering', () => {
+    test('registered button is visible with correct label', async ({
+      comfyPage
+    }) => {
+      await registerTestButton(comfyPage.page)
+      const container = comfyPage.page.getByTestId(
+        TestIds.topbar.actionBarButtons
+      )
+      await expect(container).toBeVisible()
+      await expect(
+        container.getByRole('button', { name: BUTTON_TOOLTIP })
+      ).toBeVisible()
+      await expect(container.getByText(BUTTON_LABEL)).toBeVisible()
+    })
+
+    test('button icon is rendered', async ({ comfyPage }) => {
+      await registerTestButton(comfyPage.page)
+      const icon = comfyPage.page
+        .getByTestId(TestIds.topbar.actionBarButtons)
+        .getByRole('button', { name: BUTTON_TOOLTIP })
+        .locator('i')
+      await expect(icon).toHaveClass(ICON_CLASS)
+    })
+
+    test('multiple registered buttons all appear', async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => {
+        window.app!.registerExtension({
+          name: 'TestActionBarButtons',
+          actionBarButtons: [
+            {
+              icon: 'icon-[lucide--star]',
+              label: 'First',
+              tooltip: 'First action',
+              onClick: () => {}
+            },
+            {
+              icon: 'icon-[lucide--heart]',
+              label: 'Second',
+              tooltip: 'Second action',
+              onClick: () => {}
+            }
+          ]
+        })
+      })
+
+      const container = comfyPage.page.getByTestId(
+        TestIds.topbar.actionBarButtons
+      )
+      await expect(
+        container.getByRole('button', { name: 'First action' })
+      ).toBeVisible()
+      await expect(
+        container.getByRole('button', { name: 'Second action' })
+      ).toBeVisible()
+    })
+  })
+
+  test.describe('Click handler', () => {
+    test('clicking a button fires its onClick handler', async ({
+      comfyPage
+    }) => {
+      const onClickFired = comfyPage.page.evaluate(
+        ({ icon, label, tooltip }) =>
+          new Promise<boolean>((resolve) => {
+            window.app!.registerExtension({
+              name: 'TestActionBarButton',
+              actionBarButtons: [
+                { icon, label, tooltip, onClick: () => resolve(true) }
+              ]
+            })
+          }),
+        { icon: ICON_CLASS, label: BUTTON_LABEL, tooltip: BUTTON_TOOLTIP }
+      )
+
+      const button = comfyPage.page
+        .getByTestId(TestIds.topbar.actionBarButtons)
+        .getByRole('button', { name: BUTTON_TOOLTIP })
+      await button.click()
+
+      await expect(onClickFired).resolves.toBe(true)
+    })
+  })
+
+  test.describe('Mobile layout', { tag: ['@mobile'] }, () => {
+    test('button label is hidden on mobile viewport', async ({ comfyPage }) => {
+      await registerTestButton(comfyPage.page)
+      const container = comfyPage.page.getByTestId(
+        TestIds.topbar.actionBarButtons
+      )
+      await expect(container).toBeVisible()
+      await expect(container.getByText(BUTTON_LABEL)).toBeHidden()
+    })
+  })
+})

browser_tests/tests/appModeArrange.spec.ts

@@ -2,7 +2,7 @@ import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from '@e2e/fixtures/ComfyPage'
-import { setupBuilder } from '@e2e/helpers/builderTestUtils'
+import { setupBuilder } from '@e2e/fixtures/utils/builderTestUtils'
 
 test.describe('App mode arrange step', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {

browser_tests/tests/appModePruning.spec.ts

@@ -3,8 +3,8 @@ import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from '@e2e/fixtures/ComfyPage'
-import { setupBuilder } from '@e2e/helpers/builderTestUtils'
-import { fitToViewInstant } from '@e2e/helpers/fitToView'
+import { setupBuilder } from '@e2e/fixtures/utils/builderTestUtils'
+import { fitToViewInstant } from '@e2e/fixtures/utils/fitToView'
 
 const RESIZE_NODE_TITLE = 'Resize Image/Mask'
 const RESIZE_NODE_ID = '1'

browser_tests/tests/appModeWidgetRename.spec.ts

@@ -5,7 +5,7 @@ import {
 import {
   saveAndReopenInAppMode,
   setupSubgraphBuilder
-} from '@e2e/helpers/builderTestUtils'
+} from '@e2e/fixtures/utils/builderTestUtils'
 
 test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {

browser_tests/tests/bottomPanelLogs.spec.ts

@@ -12,7 +12,7 @@ import { webSocketFixture } from '@e2e/fixtures/ws'
 import {
   getClipboardText,
   interceptClipboardWrite
-} from '@e2e/helpers/clipboardSpy'
+} from '@e2e/fixtures/utils/clipboardSpy'
 
 const test = mergeTests(comfyPageFixture, logsTerminalFixture, webSocketFixture)
 

browser_tests/tests/builderReorder.spec.ts

@@ -8,7 +8,7 @@ import {
   builderSaveAs,
   openWorkflowFromSidebar,
   setupBuilder
-} from '@e2e/helpers/builderTestUtils'
+} from '@e2e/fixtures/utils/builderTestUtils'
 
 const WIDGETS = ['seed', 'steps', 'cfg']
 

browser_tests/tests/builderSaveFlow.spec.ts

@@ -8,8 +8,8 @@ import {
   builderSaveAs,
   openWorkflowFromSidebar,
   setupBuilder
-} from '@e2e/helpers/builderTestUtils'
-import { fitToViewInstant } from '@e2e/helpers/fitToView'
+} from '@e2e/fixtures/utils/builderTestUtils'
+import { fitToViewInstant } from '@e2e/fixtures/utils/fitToView'
 
 /**
  * After a first save, open save-as again from the chevron,

browser_tests/tests/canvasLayoutSettings.spec.ts

@@ -0,0 +1,175 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import type { Size } from '@e2e/fixtures/types'
+
+const expectedGroupSize = (
+  nodeBounds: Size,
+  padding: number,
+  titleHeight: number
+): Size => ({
+  width: nodeBounds.width + padding * 2,
+  // Group height adds one title row above the contained node bounds (which
+  // themselves already include the node's own title), independent of padding.
+  height: nodeBounds.height + padding * 2 + titleHeight
+})
+
+test.describe('Canvas layout settings', { tag: '@canvas' }, () => {
+  test.describe('Comfy.SnapToGrid.GridSize', () => {
+    const DRAG_DELTA = { x: 550, y: 330 } as const
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.nodeOps.clearGraph()
+    })
+
+    const createNode = async (comfyPage: ComfyPage) => {
+      const note = await comfyPage.nodeOps.addNode('Note', undefined, {
+        x: 0,
+        y: 0
+      })
+      await note.centerOnNode()
+      return note
+    }
+
+    test('shift+drag rounds final node position to multiples of grid size', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.SnapToGrid.GridSize', 100)
+      const note = await createNode(comfyPage)
+
+      await note.dragBy(DRAG_DELTA, { modifiers: ['Shift'] })
+
+      // raw final world pos = (550, 330); rounded to nearest 100 = (600, 300)
+      const after = await note.getProperty<[number, number]>('pos')
+      expect(after[0]).toBe(600)
+      expect(after[1]).toBe(300)
+    })
+
+    test('grid size determines the snap multiple', async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.SnapToGrid.GridSize', 50)
+      const note = await createNode(comfyPage)
+
+      await note.dragBy(DRAG_DELTA, { modifiers: ['Shift'] })
+
+      // raw final world pos = (550, 330); rounded to nearest 50 = (550, 350)
+      const after = await note.getProperty<[number, number]>('pos')
+      expect(after[0]).toBe(550)
+      expect(after[1]).toBe(350)
+    })
+
+    test('drag without shift bypasses snap regardless of grid size', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.SnapToGrid.GridSize', 100)
+      const note = await createNode(comfyPage)
+      const before = await note.getProperty<[number, number]>('pos')
+
+      await note.dragBy(DRAG_DELTA)
+
+      const after = await note.getProperty<[number, number]>('pos')
+      expect(after[0]).toBe(before[0] + DRAG_DELTA.x)
+      expect(after[1]).toBe(before[1] + DRAG_DELTA.y)
+    })
+  })
+
+  test.describe('Comfy.GroupSelectedNodes.Padding', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
+    })
+
+    const groupAroundAllNodesWithPadding = async (
+      comfyPage: ComfyPage,
+      padding: number
+    ): Promise<Size> => {
+      await comfyPage.settings.setSetting(
+        'Comfy.GroupSelectedNodes.Padding',
+        padding
+      )
+      await comfyPage.command.executeCommand('Comfy.Canvas.SelectAll')
+      await comfyPage.command.executeCommand('Comfy.Graph.GroupSelectedNodes')
+      return comfyPage.page.evaluate(() => {
+        const group = window.app!.graph.groups[0]
+        return { width: group.size[0], height: group.size[1] }
+      })
+    }
+
+    test('padding=0 makes the group exactly enclose the selection', async ({
+      comfyPage
+    }) => {
+      const ksampler = (
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      )[0]
+      const nodeBounds = await ksampler.getBounding()
+      const titleHeight = await comfyPage.canvasOps.getNodeTitleHeight()
+
+      const group = await groupAroundAllNodesWithPadding(comfyPage, 0)
+
+      expect(group).toEqual(expectedGroupSize(nodeBounds, 0, titleHeight))
+    })
+
+    test('padding=50 grows the group by 100 around the selection', async ({
+      comfyPage
+    }) => {
+      const ksampler = (
+        await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      )[0]
+      const nodeBounds = await ksampler.getBounding()
+      const titleHeight = await comfyPage.canvasOps.getNodeTitleHeight()
+
+      const group = await groupAroundAllNodesWithPadding(comfyPage, 50)
+
+      expect(group).toEqual(expectedGroupSize(nodeBounds, 50, titleHeight))
+    })
+  })
+
+  test.describe('LiteGraph.ContextMenu.Scaling', () => {
+    const ZOOM_SCALE = 2
+    const litegraphContextMenu = (comfyPage: ComfyPage) =>
+      comfyPage.page.locator('.litecontextmenu')
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+      await comfyPage.canvasOps.setScale(ZOOM_SCALE)
+    })
+
+    const openComboMenu = async (comfyPage: ComfyPage) => {
+      const loadImage = (
+        await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
+      )[0]
+      const fileCombo = await loadImage.getWidget(0)
+      await fileCombo.click()
+    }
+
+    test('combo widget popup is scaled when setting is enabled', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('LiteGraph.ContextMenu.Scaling', true)
+
+      await openComboMenu(comfyPage)
+
+      const menu = litegraphContextMenu(comfyPage)
+      await expect(menu).toBeVisible()
+      await expect(menu).toHaveCSS(
+        'transform',
+        `matrix(${ZOOM_SCALE}, 0, 0, ${ZOOM_SCALE}, 0, 0)`
+      )
+    })
+
+    test('combo widget popup is not scaled when setting is disabled', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'LiteGraph.ContextMenu.Scaling',
+        false
+      )
+
+      await openComboMenu(comfyPage)
+
+      const menu = litegraphContextMenu(comfyPage)
+      await expect(menu).toBeVisible()
+      await expect(menu).toHaveCSS('transform', 'none')
+    })
+  })
+})

browser_tests/tests/canvasSettings.spec.ts

@@ -0,0 +1,400 @@
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '@e2e/fixtures/ComfyPage'
+import { sleep } from '@e2e/fixtures/utils/timing'
+
+const CLIP_NODE_COUNT = 2
+
+const getClipNodesDragBox = async (comfyPage: ComfyPage) => {
+  const clipNodes = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+  expect(
+    clipNodes,
+    'Default workflow is expected to contain exactly two CLIPTextEncode nodes'
+  ).toHaveLength(CLIP_NODE_COUNT)
+  const p1 = await clipNodes[0].getPosition()
+  const p2 = await clipNodes[1].getPosition()
+  const margin = 64
+  const from = await comfyPage.canvasOps.toAbsolute({
+    x: Math.min(p1.x, p2.x) - margin,
+    y: Math.min(p1.y, p2.y) - margin
+  })
+  const to = await comfyPage.canvasOps.toAbsolute({
+    x: Math.max(p1.x, p2.x) + margin,
+    y: Math.max(p1.y, p2.y) + margin
+  })
+  return { from, to }
+}
+
+test.describe('Canvas settings', { tag: '@canvas' }, () => {
+  test.describe('Comfy.Graph.CanvasInfo', () => {
+    test(
+      'toggles the bottom-left HUD',
+      { tag: '@screenshot' },
+      async ({ comfyPage }) => {
+        const box = await comfyPage.canvas.boundingBox()
+        expect(box, 'Canvas bounding box must be available').not.toBeNull()
+        // HUD is drawn ~80px tall along the bottom edge of the canvas; grab a
+        // comfortable 180px × 160px strip to catch it across viewports.
+        const HUD_WIDTH = 180
+        const HUD_HEIGHT = 160
+        const hudClip = {
+          x: box!.x,
+          y: box!.y + box!.height - HUD_HEIGHT,
+          width: HUD_WIDTH,
+          height: HUD_HEIGHT
+        }
+
+        await test.step('Capture HUD region with setting off', async () => {
+          await comfyPage.settings.setSetting('Comfy.Graph.CanvasInfo', false)
+          await comfyPage.canvasOps.resetView()
+          await comfyPage.canvasOps.moveMouseToEmptyArea()
+          await expect(comfyPage.page).toHaveScreenshot(
+            'canvas-info-hud-off.png',
+            { clip: hudClip, maxDiffPixels: 50 }
+          )
+        })
+
+        await test.step('Capture HUD region with setting on', async () => {
+          await comfyPage.settings.setSetting('Comfy.Graph.CanvasInfo', true)
+          await comfyPage.canvasOps.moveMouseToEmptyArea()
+          await expect(comfyPage.page).toHaveScreenshot(
+            'canvas-info-hud-on.png',
+            { clip: hudClip, maxDiffPixels: 50 }
+          )
+        })
+      }
+    )
+  })
+
+  test.describe('Comfy.Graph.CtrlShiftZoom', () => {
+    const CTRL_SHIFT_DRAG_FROM = { x: 100, y: 100 }
+    const CTRL_SHIFT_DRAG_TO = { x: 400, y: 400 }
+
+    test('Ctrl+Shift+drag zooms canvas when enabled', async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.Graph.CtrlShiftZoom', true)
+      await comfyPage.canvasOps.resetView()
+      const initialScale = await comfyPage.canvasOps.getScale()
+
+      await comfyPage.canvasOps.ctrlShiftDrag(
+        CTRL_SHIFT_DRAG_FROM,
+        CTRL_SHIFT_DRAG_TO
+      )
+
+      await expect
+        .poll(() => comfyPage.canvasOps.getScale())
+        .not.toBeCloseTo(initialScale, 2)
+    })
+
+    test('Ctrl+Shift+drag does not zoom when disabled', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.Graph.CtrlShiftZoom', false)
+      await comfyPage.canvasOps.resetView()
+      const initialScale = await comfyPage.canvasOps.getScale()
+
+      await comfyPage.canvasOps.ctrlShiftDrag(
+        CTRL_SHIFT_DRAG_FROM,
+        CTRL_SHIFT_DRAG_TO
+      )
+
+      expect(await comfyPage.canvasOps.getScale()).toBeCloseTo(initialScale, 2)
+    })
+  })
+
+  test.describe('Comfy.Graph.LiveSelection', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Canvas.NavigationMode',
+        'standard'
+      )
+    })
+
+    test('selects nodes mid-drag when enabled', async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.Graph.LiveSelection', true)
+      const { from, to } = await getClipNodesDragBox(comfyPage)
+
+      await comfyPage.page.mouse.move(from.x, from.y)
+      await comfyPage.page.mouse.down()
+      await comfyPage.page.mouse.move(to.x, to.y, { steps: 10 })
+
+      await expect
+        .poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
+        .toBe(CLIP_NODE_COUNT)
+
+      await comfyPage.page.mouse.up()
+      await comfyPage.nextFrame()
+    })
+
+    test('defers selection to drag end when disabled', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting('Comfy.Graph.LiveSelection', false)
+      const { from, to } = await getClipNodesDragBox(comfyPage)
+
+      await comfyPage.page.mouse.move(from.x, from.y)
+      await comfyPage.page.mouse.down()
+      await comfyPage.page.mouse.move(to.x, to.y, { steps: 10 })
+      expect(await comfyPage.nodeOps.getSelectedGraphNodesCount()).toBe(0)
+
+      await comfyPage.page.mouse.up()
+      await expect
+        .poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
+        .toBe(CLIP_NODE_COUNT)
+    })
+  })
+
+  test.describe('Comfy.Canvas.MouseWheelScroll', () => {
+    const WHEEL_POS = { x: 400, y: 400 }
+
+    test('wheel zooms when set to zoom', async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Canvas.MouseWheelScroll',
+        'zoom'
+      )
+      const initialScale = await comfyPage.canvasOps.getScale()
+
+      await comfyPage.page.mouse.move(WHEEL_POS.x, WHEEL_POS.y)
+      await comfyPage.page.mouse.wheel(0, -120)
+      await comfyPage.page.mouse.wheel(0, -120)
+      await comfyPage.nextFrame()
+
+      expect(await comfyPage.canvasOps.getScale()).not.toBeCloseTo(
+        initialScale,
+        3
+      )
+    })
+
+    test('wheel pans when set to panning', async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Canvas.MouseWheelScroll',
+        'panning'
+      )
+      const initialScale = await comfyPage.canvasOps.getScale()
+      const initialOffset = await comfyPage.canvasOps.getOffset()
+
+      await comfyPage.page.mouse.move(WHEEL_POS.x, WHEEL_POS.y)
+      await comfyPage.page.mouse.wheel(0, 120)
+      await comfyPage.page.mouse.wheel(0, 120)
+      await comfyPage.nextFrame()
+
+      expect(await comfyPage.canvasOps.getScale()).toBeCloseTo(initialScale, 3)
+      const offset = await comfyPage.canvasOps.getOffset()
+      expect(
+        Math.abs(offset[0] - initialOffset[0]) +
+          Math.abs(offset[1] - initialOffset[1])
+      ).toBeGreaterThan(1)
+    })
+  })
+
+  test.describe('Comfy.Canvas.LeftMouseClickBehavior', () => {
+    test('override to panning makes empty left-drag pan the canvas', async ({
+      comfyPage
+    }) => {
+      await test.step("Flip to 'select' then back to 'panning' (NavigationMode→custom)", async () => {
+        await comfyPage.settings.setSetting(
+          'Comfy.Canvas.LeftMouseClickBehavior',
+          'select'
+        )
+        await comfyPage.settings.setSetting(
+          'Comfy.Canvas.LeftMouseClickBehavior',
+          'panning'
+        )
+      })
+
+      await comfyPage.canvasOps.resetView()
+
+      const initialOffset = await comfyPage.canvasOps.getOffset()
+      await comfyPage.canvasOps.dragAndDrop(
+        { x: 200, y: 300 },
+        { x: 400, y: 500 }
+      )
+      const offset = await comfyPage.canvasOps.getOffset()
+
+      expect(
+        Math.abs(offset[0] - initialOffset[0]) +
+          Math.abs(offset[1] - initialOffset[1])
+      ).toBeGreaterThan(50)
+      expect(await comfyPage.nodeOps.getSelectedGraphNodesCount()).toBe(0)
+    })
+
+    test('override to select turns empty left-drag into a selection rectangle', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Canvas.LeftMouseClickBehavior',
+        'select'
+      )
+      const { from, to } = await getClipNodesDragBox(comfyPage)
+
+      await comfyPage.canvasOps.dragAndDrop(from, to)
+
+      await expect
+        .poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
+        .toBe(CLIP_NODE_COUNT)
+    })
+  })
+
+  test.describe('Pointer settings', () => {
+    /**
+     * Press left-mouse at canvas-relative `pos`, hold for `holdMs` (0 = no
+     * hold), nudge by `(dx, dy)` absolute pixels, then release. Spec-local
+     * because it exists only to probe the CanvasPointer timing thresholds.
+     */
+    const holdDragAt = async (
+      comfyPage: ComfyPage,
+      pos: { x: number; y: number },
+      opts: { dx: number; dy: number; holdMs: number }
+    ) => {
+      const abs = await comfyPage.canvasOps.toAbsolute(pos)
+      await comfyPage.page.mouse.move(abs.x, abs.y)
+      await comfyPage.page.mouse.down()
+      await sleep(opts.holdMs)
+      await comfyPage.page.mouse.move(abs.x + opts.dx, abs.y + opts.dy)
+      await comfyPage.page.mouse.up()
+      await comfyPage.nextFrame()
+    }
+
+    test('DoubleClickTime controls whether two clicks open the title editor', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Node.DoubleClickTitleToEdit',
+        true
+      )
+      const clipNodes =
+        await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      expect(
+        clipNodes,
+        'Default workflow must have CLIPTextEncode nodes'
+      ).toHaveLength(CLIP_NODE_COUNT)
+      const titlePos = await clipNodes[0].getTitlePosition()
+      const CLICK_GAP_MS = 200
+
+      await test.step(`Gap (${CLICK_GAP_MS}ms) exceeds DoubleClickTime → editor stays hidden`, async () => {
+        await comfyPage.settings.setSetting(
+          'Comfy.Pointer.DoubleClickTime',
+          100
+        )
+        await comfyPage.canvasOps.mouseClickAt(titlePos)
+        await sleep(CLICK_GAP_MS)
+        await comfyPage.canvasOps.mouseClickAt(titlePos)
+        await comfyPage.titleEditor.expectHidden()
+      })
+
+      await test.step(`Gap (${CLICK_GAP_MS}ms) within DoubleClickTime → editor opens`, async () => {
+        await comfyPage.settings.setSetting(
+          'Comfy.Pointer.DoubleClickTime',
+          1000
+        )
+        await comfyPage.canvasOps.mouseClickAt(titlePos)
+        await sleep(CLICK_GAP_MS)
+        await comfyPage.canvasOps.mouseClickAt(titlePos)
+        await comfyPage.titleEditor.expectVisible()
+      })
+    })
+
+    test('ClickBufferTime governs the click-vs-drag time threshold', async ({
+      comfyPage
+    }) => {
+      // Keep drift generous so only elapsed time distinguishes click vs drag.
+      await comfyPage.settings.setSetting('Comfy.Pointer.ClickDrift', 20)
+      const node = (
+        await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      )[0]
+      const titlePos = await node.getTitlePosition()
+      const NUDGE = 2
+      const HOLD_MS = 250
+
+      await test.step(`Buffer=2000ms (hold=${HOLD_MS}ms within buffer) → click, node stays put`, async () => {
+        await comfyPage.settings.setSetting(
+          'Comfy.Pointer.ClickBufferTime',
+          2000
+        )
+        const before = await node.getPosition()
+        await holdDragAt(comfyPage, titlePos, {
+          dx: NUDGE,
+          dy: NUDGE,
+          holdMs: HOLD_MS
+        })
+        const after = await node.getPosition()
+        expect(after.x).toBeCloseTo(before.x, 0)
+        expect(after.y).toBeCloseTo(before.y, 0)
+      })
+
+      await test.step(`Buffer=50ms (hold=${HOLD_MS}ms exceeds buffer) → drag, node moves`, async () => {
+        await comfyPage.settings.setSetting('Comfy.Pointer.ClickBufferTime', 50)
+        const before = await node.getPosition()
+        await holdDragAt(comfyPage, titlePos, {
+          dx: NUDGE,
+          dy: NUDGE,
+          holdMs: HOLD_MS
+        })
+        const after = await node.getPosition()
+        expect(
+          Math.abs(after.x - before.x) + Math.abs(after.y - before.y)
+        ).toBeGreaterThan(0)
+      })
+    })
+
+    test('ClickDrift governs the click-vs-drag distance threshold', async ({
+      comfyPage
+    }) => {
+      // Keep buffer generous so only drift distance matters.
+      await comfyPage.settings.setSetting('Comfy.Pointer.ClickBufferTime', 2000)
+      const node = (
+        await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      )[0]
+      const titlePos = await node.getTitlePosition()
+      const NUDGE = 8
+
+      await test.step(`Drift=20px (nudge=${NUDGE}px within tolerance) → click, node stays put`, async () => {
+        await comfyPage.settings.setSetting('Comfy.Pointer.ClickDrift', 20)
+        const before = await node.getPosition()
+        await holdDragAt(comfyPage, titlePos, {
+          dx: NUDGE,
+          dy: NUDGE,
+          holdMs: 0
+        })
+        const after = await node.getPosition()
+        expect(after.x).toBeCloseTo(before.x, 0)
+        expect(after.y).toBeCloseTo(before.y, 0)
+      })
+
+      await test.step(`Drift=1px (nudge=${NUDGE}px exceeds tolerance) → drag, node moves`, async () => {
+        await comfyPage.settings.setSetting('Comfy.Pointer.ClickDrift', 1)
+        const before = await node.getPosition()
+        await holdDragAt(comfyPage, titlePos, {
+          dx: NUDGE,
+          dy: NUDGE,
+          holdMs: 0
+        })
+        const after = await node.getPosition()
+        expect(
+          Math.abs(after.x - before.x) + Math.abs(after.y - before.y)
+        ).toBeGreaterThan(0)
+      })
+    })
+  })
+
+  test.describe('LiteGraph.Canvas.MaximumFps', () => {
+    // Behavioural FPS counting via rAF is not reliable under Playwright
+    // (CI jitter, background throttling, canvas-idle behaviour). Assert the
+    // render-loop throttle value instead — that is what actually governs
+    // frame cadence.
+    const getFrameGap = (comfyPage: ComfyPage) =>
+      comfyPage.page.evaluate(() => window.app!.canvas.maximumFps * 1000)
+
+    test('caps the render loop frame gap', async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('LiteGraph.Canvas.MaximumFps', 30)
+      await expect.poll(() => getFrameGap(comfyPage)).toBeCloseTo(1000 / 30, 1)
+
+      await comfyPage.settings.setSetting('LiteGraph.Canvas.MaximumFps', 60)
+      await expect.poll(() => getFrameGap(comfyPage)).toBeCloseTo(1000 / 60, 1)
+
+      await comfyPage.settings.setSetting('LiteGraph.Canvas.MaximumFps', 0)
+      await expect.poll(() => getFrameGap(comfyPage)).toBe(0)
+    })
+  })
+})

browser_tests/tests/errorDialog.spec.ts

@@ -8,7 +8,7 @@ import { TestIds } from '@e2e/fixtures/selectors'
 import {
   interceptClipboardWrite,
   getClipboardText
-} from '@e2e/helpers/clipboardSpy'
+} from '@e2e/fixtures/utils/clipboardSpy'
 
 async function triggerConfigureError(
   comfyPage: ComfyPage,

browser_tests/tests/errorOverlay.spec.ts

@@ -5,7 +5,7 @@ import {
   comfyExpect as expect
 } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
-import { cleanupFakeModel } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+import { cleanupFakeModel } from '@e2e/fixtures/helpers/ErrorsTabHelper'
 
 test.describe('Error overlay', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {

browser_tests/tests/linkNodeInteractionSettings.spec.ts

@@ -0,0 +1,208 @@
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '@e2e/fixtures/ComfyPage'
+import { DefaultGraphPositions } from '@e2e/fixtures/constants/defaultGraphPositions'
+
+const VAE_DECODE_SAMPLES_INPUT_SLOT = 0
+const DEFAULT_GROUP_TITLE = 'Group'
+
+test.describe('Link & node interaction settings', { tag: '@canvas' }, () => {
+  test.describe('Comfy.LinkRelease.Action', () => {
+    test('"search box" opens node search on link release', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.LinkRelease.Action',
+        'search box'
+      )
+      await comfyPage.canvasOps.disconnectEdge()
+      await expect(comfyPage.searchBoxV2.input).toBeVisible()
+    })
+
+    test('"context menu" opens litegraph connection menu on link release', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.LinkRelease.Action',
+        'context menu'
+      )
+      await comfyPage.canvasOps.disconnectEdge()
+      await expect(comfyPage.contextMenu.litegraphContextMenu).toBeVisible()
+    })
+
+    test('"no action" suppresses both search box and context menu', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.LinkRelease.Action',
+        'no action'
+      )
+      await comfyPage.canvasOps.disconnectEdge()
+      await expect(comfyPage.searchBoxV2.input).toBeHidden()
+      await expect(comfyPage.contextMenu.litegraphContextMenu).toBeHidden()
+    })
+  })
+
+  test.describe('Comfy.LinkRelease.ActionShift', () => {
+    test('shift+drag dispatches to ActionShift (not Action)', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.LinkRelease.Action',
+        'no action'
+      )
+      await comfyPage.settings.setSetting(
+        'Comfy.LinkRelease.ActionShift',
+        'search box'
+      )
+
+      await comfyPage.canvasOps.disconnectEdge({ modifiers: ['Shift'] })
+
+      await expect(comfyPage.searchBoxV2.input).toBeVisible()
+    })
+  })
+
+  test.describe('Comfy.Node.DoubleClickTitleToEdit', () => {
+    test('enabled → double-click on node title opens editor', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Node.DoubleClickTitleToEdit',
+        true
+      )
+      const [node] = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      await comfyPage.canvasOps.mouseDblclickAt(await node.getTitlePosition())
+      await comfyPage.titleEditor.expectVisible()
+    })
+
+    test('disabled → double-click on node title stays hidden', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Node.DoubleClickTitleToEdit',
+        false
+      )
+      const [node] = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      await comfyPage.canvasOps.mouseDblclickAt(await node.getTitlePosition())
+      await comfyPage.titleEditor.expectHidden()
+    })
+  })
+
+  test.describe('Comfy.Group.DoubleClickTitleToEdit', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.workflow.loadWorkflow('groups/single_group_only')
+    })
+
+    test('enabled → double-click on group title opens editor', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Group.DoubleClickTitleToEdit',
+        true
+      )
+      await comfyPage.canvasOps.dblclickGroupTitle(DEFAULT_GROUP_TITLE)
+      await comfyPage.titleEditor.expectVisible()
+    })
+
+    test('disabled → double-click on group title stays hidden', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Group.DoubleClickTitleToEdit',
+        false
+      )
+      await comfyPage.canvasOps.dblclickGroupTitle(DEFAULT_GROUP_TITLE)
+      await comfyPage.titleEditor.expectHidden()
+    })
+  })
+
+  test.describe('Comfy.Node.BypassAllLinksOnDelete', () => {
+    test('enabled → deleting KSampler bridges EmptyLatentImage → VAEDecode.samples', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Node.BypassAllLinksOnDelete',
+        true
+      )
+      const [kSampler] = await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      const [emptyLatent] =
+        await comfyPage.nodeOps.getNodeRefsByType('EmptyLatentImage')
+      const [vaeDecode] = await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
+      const vaeSamplesInput = await vaeDecode.getInput(
+        VAE_DECODE_SAMPLES_INPUT_SLOT
+      )
+
+      await test.step('precondition: KSampler feeds VAEDecode.samples', async () => {
+        expect(
+          (await vaeSamplesInput.getLink())?.origin_id,
+          'VAEDecode.samples should originate from KSampler before delete'
+        ).toBe(kSampler.id)
+      })
+
+      await kSampler.delete()
+
+      await expect
+        .poll(async () => (await vaeSamplesInput.getLink())?.origin_id ?? null)
+        .toBe(emptyLatent.id)
+    })
+
+    test('disabled → deleting KSampler drops VAEDecode.samples', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Node.BypassAllLinksOnDelete',
+        false
+      )
+      const [kSampler] = await comfyPage.nodeOps.getNodeRefsByType('KSampler')
+      const [vaeDecode] = await comfyPage.nodeOps.getNodeRefsByType('VAEDecode')
+      const vaeSamplesInput = await vaeDecode.getInput(
+        VAE_DECODE_SAMPLES_INPUT_SLOT
+      )
+
+      await kSampler.delete()
+
+      await expect.poll(() => vaeSamplesInput.getLink()).toBeNull()
+    })
+  })
+
+  test.describe('Comfy.Node.MiddleClickRerouteNode', () => {
+    async function countReroutes(comfyPage: ComfyPage): Promise<number> {
+      return (await comfyPage.nodeOps.getNodeRefsByType('Reroute')).length
+    }
+
+    test('enabled → middle-click on an output slot creates a Reroute', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Node.MiddleClickRerouteNode',
+        true
+      )
+      const before = await countReroutes(comfyPage)
+
+      await comfyPage.canvasOps.middleClick(
+        DefaultGraphPositions.loadCheckpointNodeClipOutputSlot
+      )
+
+      await expect.poll(() => countReroutes(comfyPage)).toBe(before + 1)
+    })
+
+    test('disabled → middle-click on an output slot does nothing', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Node.MiddleClickRerouteNode',
+        false
+      )
+      const before = await countReroutes(comfyPage)
+
+      await comfyPage.canvasOps.middleClick(
+        DefaultGraphPositions.loadCheckpointNodeClipOutputSlot
+      )
+      await comfyPage.nextFrame()
+
+      expect(await countReroutes(comfyPage)).toBe(before)
+    })
+  })
+})

browser_tests/tests/load3d/load3d.spec.ts

@@ -282,6 +282,57 @@ test.describe('Load3D', () => {
   })
 })
 
+test.describe('Load3D silent 404 on missing output model', () => {
+  test('Does not show an error toast when the output model file is missing (404)', async ({
+    comfyPage
+  }) => {
+    // Intercept model fetch and return 404 to simulate a missing output file
+    // (e.g. shared workflow opened on a machine that never ran it)
+    await comfyPage.page.route('**/view?**', (route) =>
+      route.fulfill({ status: 404, body: 'Not Found' })
+    )
+
+    // This workflow has a Preview3D node with Last Time Model File set,
+    // triggering the loadFolder: 'output' + silentOnNotFound: true path.
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+
+    // Wait for the 404 response before asserting — gives the load attempt time
+    // to complete without using waitForTimeout
+    const responsePromise = comfyPage.page.waitForResponse('**/view?**')
+    await comfyPage.workflow.loadWorkflow('3d/load3d_missing_model')
+    await responsePromise
+
+    await expect(
+      comfyPage.toast.visibleToasts.filter({ hasText: 'Error loading model' })
+    ).toHaveCount(0)
+  })
+
+  test('Shows an error toast when a non-404 error occurs loading the output model', async ({
+    comfyPage
+  }) => {
+    // Intercept with a 500 to simulate a real server error (not 404) — toast must appear
+    await comfyPage.page.route('**/view?**', (route) =>
+      route.fulfill({ status: 500, body: 'Internal Server Error' })
+    )
+
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+
+    const responsePromise = comfyPage.page.waitForResponse('**/view?**')
+    await comfyPage.workflow.loadWorkflow('3d/load3d_missing_model')
+    await responsePromise
+
+    await expect
+      .poll(
+        () =>
+          comfyPage.toast.visibleToasts
+            .filter({ hasText: 'Error loading model' })
+            .count(),
+        { timeout: 10000 }
+      )
+      .toBeGreaterThan(0)
+  })
+})
+
 test.describe('Load3D initialization failure', () => {
   test('Surfaces a toast when the THREE.WebGLRenderer cannot be created', async ({
     comfyPage

browser_tests/tests/loginButton.spec.ts

@@ -0,0 +1,106 @@
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { SignInDialog } from '@e2e/fixtures/components/SignInDialog'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+/**
+ * Enable the show_signin_button server feature flag so LoginButton renders
+ * in WorkflowTabs (which uses `flags.showSignInButton ?? isDesktop`).
+ * The flag is reset automatically on each fresh page load in beforeEach.
+ */
+async function enableLoginButtonFlag(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    window.app!.api.serverFeatureFlags.value = {
+      ...window.app!.api.serverFeatureFlags.value,
+      show_signin_button: true
+    }
+  })
+}
+
+test.describe('Login Button', { tag: ['@ui'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setup()
+  })
+
+  test.describe('Visibility', () => {
+    test('button is hidden when show_signin_button flag is off', async ({
+      comfyPage
+    }) => {
+      await comfyPage.page.evaluate(() => {
+        window.app!.api.serverFeatureFlags.value = {
+          ...window.app!.api.serverFeatureFlags.value,
+          show_signin_button: false
+        }
+      })
+      await expect(
+        comfyPage.page.getByTestId(TestIds.topbar.loginButton)
+      ).toBeHidden()
+    })
+
+    test('button is visible when show_signin_button flag is enabled', async ({
+      comfyPage
+    }) => {
+      await enableLoginButtonFlag(comfyPage.page)
+      await expect(
+        comfyPage.page.getByTestId(TestIds.topbar.loginButton)
+      ).toBeVisible()
+    })
+  })
+
+  test.describe('ARIA', () => {
+    test('button has correct aria-label', async ({ comfyPage }) => {
+      await enableLoginButtonFlag(comfyPage.page)
+      const button = comfyPage.page.getByTestId(TestIds.topbar.loginButton)
+      await expect(button).toHaveAttribute('aria-label', /.+/)
+    })
+  })
+
+  test.describe('Click behaviour', () => {
+    test('clicking the button opens the sign-in dialog', async ({
+      comfyPage
+    }) => {
+      await enableLoginButtonFlag(comfyPage.page)
+      const dialog = new SignInDialog(comfyPage.page)
+      await comfyPage.page.getByTestId(TestIds.topbar.loginButton).click()
+      await expect(dialog.root).toBeVisible()
+    })
+  })
+
+  test.describe('Hover popover', () => {
+    test('hovering shows an informational popover', async ({ comfyPage }) => {
+      await enableLoginButtonFlag(comfyPage.page)
+      await comfyPage.page.getByTestId(TestIds.topbar.loginButton).hover()
+      await expect(
+        comfyPage.page.getByTestId(TestIds.topbar.loginButtonPopover)
+      ).toBeVisible()
+    })
+
+    test('popover contains a Learn more link', async ({ comfyPage }) => {
+      await enableLoginButtonFlag(comfyPage.page)
+      await comfyPage.page.getByTestId(TestIds.topbar.loginButton).hover()
+      const learnMoreLink = comfyPage.page.getByTestId(
+        TestIds.topbar.loginButtonPopoverLearnMore
+      )
+      await expect(learnMoreLink).toBeVisible()
+      await expect(learnMoreLink).toHaveAttribute('href', /api-nodes/)
+    })
+
+    test('popover hides after mouse leaves the button area', async ({
+      comfyPage
+    }) => {
+      await enableLoginButtonFlag(comfyPage.page)
+      const button = comfyPage.page.getByTestId(TestIds.topbar.loginButton)
+      await button.hover()
+      await expect(
+        comfyPage.page.getByTestId(TestIds.topbar.loginButtonPopover)
+      ).toBeVisible()
+
+      await comfyPage.canvas.hover()
+      await expect(
+        comfyPage.page.getByTestId(TestIds.topbar.loginButtonPopover)
+      ).toBeHidden()
+    })
+  })
+})

browser_tests/tests/nodeGhostPlacement.spec.ts

@@ -201,12 +201,10 @@ for (const mode of ['litegraph', 'vue'] as const) {
       'subgraph blueprint added from search box enters ghost mode',
       { tag: ['@subgraph'] },
       async ({ comfyPage }) => {
-        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
         await comfyPage.settings.setSetting(
           'Comfy.NodeSearchBoxImpl',
           'default'
         )
-        await comfyPage.searchBoxV2.reload(comfyPage)
 
         // Convert a node to a subgraph and publish it as a blueprint
         const nodeRef = await comfyPage.nodeOps.getNodeRefById('3')
@@ -231,9 +229,8 @@ for (const mode of ['litegraph', 'vue'] as const) {
         const nodeCountBefore = await comfyPage.nodeOps.getGraphNodesCount()
 
         // Open v2 search box and search for the published blueprint
-        await comfyPage.canvasOps.doubleClick()
         const { searchBoxV2 } = comfyPage
-        await expect(searchBoxV2.input).toBeVisible()
+        await searchBoxV2.open()
 
         await searchBoxV2.input.fill(blueprintName)
         await expect(searchBoxV2.results.first()).toBeVisible()
@@ -270,5 +267,65 @@ for (const mode of ['litegraph', 'vue'] as const) {
         expect(afterPlace!.ghost).toBe(false)
       }
     )
+
+    test(
+      'Escape during ghost placement inside a subgraph cancels the ghost without exiting the subgraph',
+      { tag: ['@subgraph'] },
+      async ({ comfyPage }) => {
+        await comfyPage.searchBoxV2.setup()
+        await comfyPage.settings.setSetting(
+          'Comfy.NodeSearchBoxImpl.FollowCursor',
+          true
+        )
+        await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
+
+        if (mode === 'vue') {
+          await comfyPage.vueNodes.waitForNodes()
+          await comfyPage.vueNodes.enterSubgraph('2')
+        } else {
+          const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
+          await subgraphNode.navigateIntoSubgraph()
+        }
+        await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(true)
+
+        const subgraphId = await comfyPage.subgraph.getActiveGraphId()
+        const initialNodeCount = await comfyPage.subgraph.getNodeCount()
+
+        const { searchBoxV2 } = comfyPage
+        await searchBoxV2.open()
+        await searchBoxV2.input.fill('KSampler')
+        await expect(searchBoxV2.results.first()).toBeVisible()
+        await comfyPage.page.keyboard.press('Enter')
+        await expect(searchBoxV2.input).toBeHidden()
+
+        await expect
+          .poll(() =>
+            comfyPage.page.evaluate(
+              () => window.app!.canvas.state.ghostNodeId != null
+            )
+          )
+          .toBe(true)
+
+        await comfyPage.keyboard.press('Escape')
+
+        await expect
+          .poll(() => comfyPage.subgraph.isInSubgraph(), {
+            message:
+              'Escape during ghost placement should cancel the ghost, not exit the subgraph'
+          })
+          .toBe(true)
+        await expect
+          .poll(() => comfyPage.subgraph.getActiveGraphId())
+          .toBe(subgraphId)
+        await expect
+          .poll(() =>
+            comfyPage.page.evaluate(() => window.app!.canvas.state.ghostNodeId)
+          )
+          .toBeNull()
+        await expect
+          .poll(() => comfyPage.subgraph.getNodeCount())
+          .toBe(initialNodeCount)
+      }
+    )
   })
 }

browser_tests/tests/nodeHelp.spec.ts

@@ -3,7 +3,7 @@ import {
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
-import { fitToViewInstant } from '@e2e/helpers/fitToView'
+import { fitToViewInstant } from '@e2e/fixtures/utils/fitToView'
 import type { WorkspaceStore } from '@e2e/types/globals'
 import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
 

browser_tests/tests/nodeSearchBoxV2.spec.ts

@@ -5,32 +5,19 @@ import {
 
 test.describe('Node search box V2', { tag: '@node' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
-    await comfyPage.settings.setSetting(
-      'Comfy.LinkRelease.Action',
-      'search box'
-    )
-    await comfyPage.settings.setSetting(
-      'Comfy.LinkRelease.ActionShift',
-      'search box'
-    )
-    await comfyPage.searchBoxV2.reload(comfyPage)
+    await comfyPage.searchBoxV2.setup()
   })
 
   test('Can open search and add node', async ({ comfyPage }) => {
     const { searchBoxV2 } = comfyPage
     const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
 
-    await comfyPage.canvasOps.doubleClick()
-    await expect(searchBoxV2.input).toBeVisible()
-
+    await searchBoxV2.open()
     await searchBoxV2.input.fill('KSampler')
     await expect(searchBoxV2.results.first()).toBeVisible()
 
     await comfyPage.page.keyboard.press('Enter')
     await expect(searchBoxV2.input).toBeHidden()
-
     await expect
       .poll(() => comfyPage.nodeOps.getGraphNodesCount())
       .toBe(initialCount + 1)
@@ -40,16 +27,12 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
     const { searchBoxV2 } = comfyPage
     const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
 
-    await comfyPage.canvasOps.doubleClick()
-    await expect(searchBoxV2.input).toBeVisible()
-
-    // Default results should be visible without typing
+    await searchBoxV2.open()
+    // Default results should be visible without typing.
     await expect(searchBoxV2.results.first()).toBeVisible()
 
-    // Enter should add the first (selected) result
     await comfyPage.page.keyboard.press('Enter')
     await expect(searchBoxV2.input).toBeHidden()
-
     await expect
       .poll(() => comfyPage.nodeOps.getGraphNodesCount())
       .toBe(initialCount + 1)
@@ -63,12 +46,9 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
       await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
         'KSampler'
       ])
-      await searchBoxV2.reload(comfyPage)
 
-      await comfyPage.canvasOps.doubleClick()
-      await expect(searchBoxV2.input).toBeVisible()
-
-      await searchBoxV2.filterBarButton('Bookmarked').click()
+      await searchBoxV2.open()
+      await searchBoxV2.rootCategoryButton('favorites').click()
 
       await expect(searchBoxV2.results).toHaveCount(1)
       await expect(searchBoxV2.results.first()).toContainText('KSampler')
@@ -79,13 +59,10 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
     }) => {
       const { searchBoxV2 } = comfyPage
 
-      await comfyPage.canvasOps.doubleClick()
-      await expect(searchBoxV2.input).toBeVisible()
-
+      await searchBoxV2.open()
       await searchBoxV2.categoryButton('sampling').click()
 
       await expect(searchBoxV2.results.first()).toBeVisible()
-      await expect.poll(() => searchBoxV2.results.count()).toBeGreaterThan(0)
     })
   })
 
@@ -93,26 +70,23 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
     test('Can filter by input type via filter bar', async ({ comfyPage }) => {
       const { searchBoxV2 } = comfyPage
 
-      await comfyPage.canvasOps.doubleClick()
-      await expect(searchBoxV2.input).toBeVisible()
+      await searchBoxV2.open()
 
-      // Click "Input" filter chip in the filter bar
-      await searchBoxV2.filterBarButton('Input').click()
+      await test.step('Open Input filter popover', async () => {
+        await searchBoxV2.typeFilterButton('input').click()
+        await expect(searchBoxV2.filterOptions.first()).toBeVisible()
+      })
 
-      // Filter options should appear
-      await expect(searchBoxV2.filterOptions.first()).toBeVisible()
+      await test.step('Select MODEL type', async () => {
+        await searchBoxV2.filterSearch.fill('MODEL')
+        await searchBoxV2.filterOptions
+          .filter({ hasText: 'MODEL' })
+          .first()
+          .click()
+      })
 
-      // Type to narrow and select MODEL
-      await searchBoxV2.filterSearch.fill('MODEL')
-      await searchBoxV2.filterOptions
-        .filter({ hasText: 'MODEL' })
-        .first()
-        .click()
-
-      // Filter chip should appear and results should be filtered
-      await expect(
-        searchBoxV2.dialog.getByText('Input:', { exact: false }).locator('..')
-      ).toContainText('MODEL')
+      await expect(searchBoxV2.filterChips).toHaveCount(1)
+      await expect(searchBoxV2.filterChips.first()).toContainText('MODEL')
       await expect(searchBoxV2.results.first()).toBeVisible()
     })
   })
@@ -122,32 +96,180 @@ test.describe('Node search box V2', { tag: '@node' }, () => {
       const { searchBoxV2 } = comfyPage
       const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
 
-      await comfyPage.canvasOps.doubleClick()
-      await expect(searchBoxV2.input).toBeVisible()
-
+      await searchBoxV2.open()
       await searchBoxV2.input.fill('KSampler')
       const results = searchBoxV2.results
       await expect(results.first()).toBeVisible()
 
-      // First result selected by default
-      await expect(results.first()).toHaveAttribute('aria-selected', 'true')
+      await test.step('First result is selected by default', async () => {
+        await expect(results.first()).toHaveAttribute('aria-selected', 'true')
+      })
 
-      // ArrowDown moves selection
-      await comfyPage.page.keyboard.press('ArrowDown')
-      await expect(results.nth(1)).toHaveAttribute('aria-selected', 'true')
-      await expect(results.first()).toHaveAttribute('aria-selected', 'false')
+      await test.step('ArrowDown moves selection to next result', async () => {
+        await comfyPage.page.keyboard.press('ArrowDown')
+        await expect(results.nth(1)).toHaveAttribute('aria-selected', 'true')
+        await expect(results.first()).toHaveAttribute('aria-selected', 'false')
+      })
 
-      // ArrowUp moves back
-      await comfyPage.page.keyboard.press('ArrowUp')
-      await expect(results.first()).toHaveAttribute('aria-selected', 'true')
+      await test.step('ArrowUp moves selection back', async () => {
+        await comfyPage.page.keyboard.press('ArrowUp')
+        await expect(results.first()).toHaveAttribute('aria-selected', 'true')
+      })
 
-      // Enter selects and adds node
-      await comfyPage.page.keyboard.press('Enter')
-      await expect(searchBoxV2.input).toBeHidden()
+      await test.step('Enter selects and adds the node', async () => {
+        await comfyPage.page.keyboard.press('Enter')
+        await expect(searchBoxV2.input).toBeHidden()
+        await expect
+          .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+          .toBe(initialCount + 1)
+      })
+    })
+  })
 
-      await expect
-        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
-        .toBe(initialCount + 1)
+  test.describe('Category sidebar', () => {
+    test('Sidebar toggle hides and shows the category sidebar', async ({
+      comfyPage
+    }) => {
+      const { searchBoxV2 } = comfyPage
+      await searchBoxV2.open()
+
+      const samplingCategory = searchBoxV2.categoryButton('sampling')
+      await expect(samplingCategory).toBeVisible()
+      await expect(searchBoxV2.sidebarToggle).toHaveAttribute(
+        'aria-expanded',
+        'true'
+      )
+
+      await searchBoxV2.sidebarToggle.click()
+      await expect(searchBoxV2.sidebarToggle).toHaveAttribute(
+        'aria-expanded',
+        'false'
+      )
+      await expect(samplingCategory).toBeHidden()
+
+      await searchBoxV2.sidebarToggle.click()
+      await expect(searchBoxV2.sidebarToggle).toHaveAttribute(
+        'aria-expanded',
+        'true'
+      )
+      await expect(samplingCategory).toBeVisible()
+    })
+
+    test('Filter bar scrolls horizontally while the sidebar toggle stays pinned', async ({
+      comfyPage
+    }) => {
+      const { searchBoxV2 } = comfyPage
+      // Narrow viewport so the chips overflow the filter bar
+      await comfyPage.page.setViewportSize({ width: 360, height: 800 })
+      await searchBoxV2.open()
+
+      const scrollEl = searchBoxV2.filterChipsScroll
+      const dims = await scrollEl.evaluate((el) => ({
+        scrollWidth: el.scrollWidth,
+        clientWidth: el.clientWidth
+      }))
+      expect(dims.scrollWidth).toBeGreaterThan(dims.clientWidth)
+
+      await scrollEl.evaluate((el) => {
+        el.scrollLeft = el.scrollWidth
+      })
+
+      // The toggle lives outside the scroll container, so even when the
+      // chips scroll hundreds of px it must remain visible in the viewport.
+      await expect(searchBoxV2.sidebarToggle).toBeInViewport()
+    })
+
+    test('@mobile Sidebar is collapsed by default on mobile', async ({
+      comfyPage
+    }) => {
+      const { searchBoxV2 } = comfyPage
+      await searchBoxV2.open()
+
+      await expect(searchBoxV2.sidebarToggle).toHaveAttribute(
+        'aria-expanded',
+        'false'
+      )
+      await expect(searchBoxV2.categoryButton('sampling')).toBeHidden()
+    })
+
+    test('@mobile Clicking outside the sidebar closes it', async ({
+      comfyPage
+    }) => {
+      const { searchBoxV2 } = comfyPage
+      await searchBoxV2.open()
+
+      await searchBoxV2.sidebarToggle.click()
+      await expect(searchBoxV2.sidebarToggle).toHaveAttribute(
+        'aria-expanded',
+        'true'
+      )
+      await expect(searchBoxV2.categoryButton('sampling')).toBeVisible()
+      await expect(searchBoxV2.sidebarBackdrop).toBeVisible()
+
+      // The backdrop spans the full content area, but the sidebar (z-20)
+      // covers its left ~208px (w-52). Click past that to land on the
+      // backdrop rather than the sidebar.
+      await searchBoxV2.sidebarBackdrop.click({ position: { x: 240, y: 40 } })
+
+      await expect(searchBoxV2.sidebarToggle).toHaveAttribute(
+        'aria-expanded',
+        'false'
+      )
+      await expect(searchBoxV2.categoryButton('sampling')).toBeHidden()
+      await expect(searchBoxV2.sidebarBackdrop).toBeHidden()
+    })
+
+    test('@mobile Focusing the search input closes the sidebar', async ({
+      comfyPage
+    }) => {
+      const { searchBoxV2 } = comfyPage
+      await searchBoxV2.open()
+
+      await searchBoxV2.sidebarToggle.click()
+      await expect(searchBoxV2.sidebarToggle).toHaveAttribute(
+        'aria-expanded',
+        'true'
+      )
+
+      await searchBoxV2.input.focus()
+
+      await expect(searchBoxV2.sidebarToggle).toHaveAttribute(
+        'aria-expanded',
+        'false'
+      )
+    })
+
+    test('Sidebar state across mobile/desktop resizes', async ({
+      comfyPage
+    }) => {
+      const { searchBoxV2 } = comfyPage
+      const switchToDesktop = () =>
+        comfyPage.page.setViewportSize({ width: 1280, height: 800 })
+      const switchToMobile = () =>
+        comfyPage.page.setViewportSize({ width: 360, height: 800 })
+      const expectExpanded = (value: 'true' | 'false') =>
+        expect(searchBoxV2.sidebarToggle).toHaveAttribute(
+          'aria-expanded',
+          value
+        )
+
+      await switchToDesktop()
+      await searchBoxV2.open()
+      await expectExpanded('true')
+
+      await switchToMobile()
+      await expectExpanded('false')
+
+      await searchBoxV2.sidebarToggle.click()
+      await switchToDesktop()
+      await expectExpanded('true')
+
+      await searchBoxV2.sidebarToggle.click()
+      await switchToMobile()
+      await expectExpanded('false')
+
+      await switchToDesktop()
+      await expectExpanded('false')
     })
   })
 })

browser_tests/tests/nodeSearchBoxV2Extended.spec.ts

@@ -2,27 +2,17 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
+import { RootCategory } from '@/components/searchbox/v2/rootCategories'
 
 test.describe('Node search box V2 extended', { tag: '@node' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
-    await comfyPage.settings.setSetting(
-      'Comfy.LinkRelease.Action',
-      'search box'
-    )
-    await comfyPage.settings.setSetting(
-      'Comfy.LinkRelease.ActionShift',
-      'search box'
-    )
-    await comfyPage.searchBoxV2.reload(comfyPage)
+    await comfyPage.searchBoxV2.setup()
   })
 
   test('Double-click on empty canvas opens search', async ({ comfyPage }) => {
     const { searchBoxV2 } = comfyPage
 
-    await comfyPage.canvasOps.doubleClick()
-    await expect(searchBoxV2.input).toBeVisible()
+    await searchBoxV2.openByDoubleClickCanvas()
     await expect(searchBoxV2.dialog).toBeVisible()
   })
 
@@ -32,43 +22,40 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
     const { searchBoxV2 } = comfyPage
     const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
 
-    await comfyPage.canvasOps.doubleClick()
-    await expect(searchBoxV2.input).toBeVisible()
-
+    await searchBoxV2.open()
     await searchBoxV2.input.fill('KSampler')
     await expect(searchBoxV2.results.first()).toBeVisible()
 
     await comfyPage.page.keyboard.press('Escape')
     await expect(searchBoxV2.input).toBeHidden()
-
     await expect
       .poll(() => comfyPage.nodeOps.getGraphNodesCount())
       .toBe(initialCount)
   })
 
-  test('Search clears when reopening', async ({ comfyPage }) => {
-    const { searchBoxV2 } = comfyPage
+  for (const closeKey of ['Enter', 'Escape'] as const) {
+    test(`Reopening search after ${closeKey} has no persisted state`, async ({
+      comfyPage
+    }) => {
+      const { searchBoxV2 } = comfyPage
 
-    await comfyPage.canvasOps.doubleClick()
-    await expect(searchBoxV2.input).toBeVisible()
+      await searchBoxV2.open()
+      await searchBoxV2.input.fill('KSampler')
+      await expect(searchBoxV2.results.first()).toBeVisible()
+      await comfyPage.page.keyboard.press(closeKey)
+      await expect(searchBoxV2.input).toBeHidden()
 
-    await searchBoxV2.input.fill('KSampler')
-    await expect(searchBoxV2.results.first()).toBeVisible()
-
-    await comfyPage.page.keyboard.press('Escape')
-    await expect(searchBoxV2.input).toBeHidden()
-
-    await comfyPage.canvasOps.doubleClick()
-    await expect(searchBoxV2.input).toBeVisible()
-    await expect(searchBoxV2.input).toHaveValue('')
-  })
+      await searchBoxV2.open()
+      await expect(searchBoxV2.input).toHaveValue('')
+      await expect(searchBoxV2.filterChips).toHaveCount(0)
+    })
+  }
 
   test.describe('Category navigation', () => {
     test('Category navigation updates results', async ({ comfyPage }) => {
       const { searchBoxV2 } = comfyPage
 
-      await comfyPage.canvasOps.doubleClick()
-      await expect(searchBoxV2.input).toBeVisible()
+      await searchBoxV2.open()
 
       await searchBoxV2.categoryButton('sampling').click()
       await expect(searchBoxV2.results.first()).toBeVisible()
@@ -76,7 +63,6 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
 
       await searchBoxV2.categoryButton('loaders').click()
       await expect(searchBoxV2.results.first()).toBeVisible()
-
       await expect
         .poll(() => searchBoxV2.results.allTextContents())
         .not.toEqual(samplingResults)
@@ -87,58 +73,328 @@ test.describe('Node search box V2 extended', { tag: '@node' }, () => {
     test('Filter chip removal restores results', async ({ comfyPage }) => {
       const { searchBoxV2 } = comfyPage
 
-      await comfyPage.canvasOps.doubleClick()
-      await expect(searchBoxV2.input).toBeVisible()
+      await searchBoxV2.open()
 
-      // Record initial result text for comparison
+      // Search first to keep the result set under the 64-item cap.
+      await searchBoxV2.input.fill('Load')
       await expect(searchBoxV2.results.first()).toBeVisible()
-      const unfilteredResults = await searchBoxV2.results.allTextContents()
+      const unfilteredCount = await searchBoxV2.results.count()
 
-      // Apply Input filter with MODEL type
-      await searchBoxV2.filterBarButton('Input').click()
-      await expect(searchBoxV2.filterOptions.first()).toBeVisible()
-      await searchBoxV2.filterSearch.fill('MODEL')
-      await searchBoxV2.filterOptions
-        .filter({ hasText: 'MODEL' })
-        .first()
-        .click()
+      await test.step('Apply Input/MODEL filter', async () => {
+        await searchBoxV2.applyTypeFilter('input', 'MODEL')
+        await expect(searchBoxV2.filterChips).toHaveCount(1)
+        await expect
+          .poll(() => searchBoxV2.results.count())
+          .not.toBe(unfilteredCount)
+      })
 
-      // Verify filter chip appeared and results changed
-      const filterChip = searchBoxV2.dialog.getByTestId('filter-chip')
-      await expect(filterChip).toBeVisible()
-      await expect(searchBoxV2.results.first()).toBeVisible()
-      await expect
-        .poll(() => searchBoxV2.results.allTextContents())
-        .not.toEqual(unfilteredResults)
-
-      // Remove filter by clicking the chip delete button
-      await filterChip.getByTestId('chip-delete').click()
-
-      // Filter chip should be removed
-      await expect(filterChip).toBeHidden()
-      await expect(searchBoxV2.results.first()).toBeVisible()
+      await test.step('Remove the filter chip', async () => {
+        await searchBoxV2.removeFilterChip()
+        await expect(searchBoxV2.filterChips).toHaveCount(0)
+        await expect(searchBoxV2.results).toHaveCount(unfilteredCount)
+      })
     })
   })
 
-  test.describe('Keyboard navigation', () => {
-    test('ArrowUp on first item keeps first selected', async ({
+  test.describe('Link release', () => {
+    test('Link release opens search with pre-applied type filter', async ({
       comfyPage
     }) => {
       const { searchBoxV2 } = comfyPage
 
-      await comfyPage.canvasOps.doubleClick()
+      await comfyPage.canvasOps.disconnectEdge()
       await expect(searchBoxV2.input).toBeVisible()
 
+      // disconnectEdge pulls a CLIP link → expect a single CLIP filter chip.
+      await expect(searchBoxV2.filterChips).toHaveCount(1)
+      await expect(searchBoxV2.filterChips.first()).toContainText('CLIP')
+    })
+
+    test('Link release auto-connects added node', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+      const NODE_TYPE = 'CLIPTextEncode'
+      const refsBefore = await comfyPage.nodeOps.getNodeRefsByType(NODE_TYPE)
+      const idsBefore = new Set(refsBefore.map((n) => n.id))
+
+      await comfyPage.canvasOps.disconnectEdge()
+      await expect(searchBoxV2.input).toBeVisible()
+
+      await searchBoxV2.input.fill('CLIP Text Encode')
+      await expect(searchBoxV2.results.first()).toBeVisible()
+      await comfyPage.page.keyboard.press('Enter')
+      await expect(searchBoxV2.input).toBeHidden()
+
+      // A new CLIPTextEncode node should have been added.
+      await expect
+        .poll(() =>
+          comfyPage.nodeOps
+            .getNodeRefsByType(NODE_TYPE)
+            .then((refs) => refs.length)
+        )
+        .toBe(refsBefore.length + 1)
+
+      // Verify the auto-connect: the newly-added node's CLIP input must be
+      // connected (proves the release wasn't just dropped).
+      const refsAfter = await comfyPage.nodeOps.getNodeRefsByType(NODE_TYPE)
+      const newNode = refsAfter.find((n) => !idsBefore.has(n.id))
+      expect(newNode, 'expected a new CLIPTextEncode node').toBeDefined()
+      const clipInput = await newNode!.getInput(0)
+      await expect.poll(() => clipInput.getLinkCount()).toBe(1)
+    })
+  })
+
+  test.describe('Filter combinations', () => {
+    test('Output type filter filters results', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+
+      await searchBoxV2.input.fill('Load')
+      await expect(searchBoxV2.results.first()).toBeVisible()
+      const unfilteredCount = await searchBoxV2.results.count()
+
+      await searchBoxV2.applyTypeFilter('output', 'IMAGE')
+      await expect(searchBoxV2.filterChips).toHaveCount(1)
+      await expect
+        .poll(() => searchBoxV2.results.count())
+        .not.toBe(unfilteredCount)
+    })
+
+    test('Multiple type filters (Input + Output) narrows results', async ({
+      comfyPage
+    }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+
+      await searchBoxV2.applyTypeFilter('input', 'MODEL')
+      await expect(searchBoxV2.filterChips).toHaveCount(1)
+      await expect(searchBoxV2.results.first()).toBeVisible()
+      const singleFilterCount = await searchBoxV2.results.count()
+
+      await searchBoxV2.applyTypeFilter('output', 'LATENT')
+      await expect(searchBoxV2.filterChips).toHaveCount(2)
+      await expect
+        .poll(() => searchBoxV2.results.count())
+        .toBeLessThan(singleFilterCount)
+    })
+
+    test('Root filter + search query narrows results', async ({
+      comfyPage
+    }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+      await searchBoxV2.input.fill('Sampler')
+      await expect(searchBoxV2.results.first()).toBeVisible()
+      const unfilteredCount = await searchBoxV2.results.count()
+
+      await searchBoxV2.rootCategoryButton('comfy').click()
+      await expect
+        .poll(() => searchBoxV2.results.count())
+        .toBeLessThan(unfilteredCount)
+      await expect.poll(() => searchBoxV2.results.count()).toBeGreaterThan(0)
+    })
+
+    test('Root filter + category selection', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+
+      await searchBoxV2.rootCategoryButton('comfy').click()
+      await expect(searchBoxV2.results.first()).toBeVisible()
+      const comfyCount = await searchBoxV2.results.count()
+
+      // Under root filter, categories are prefixed (e.g. comfy/sampling).
+      await searchBoxV2.categoryButton('comfy/sampling').click()
+      await expect
+        .poll(() => searchBoxV2.results.count())
+        .toBeLessThan(comfyCount)
+    })
+  })
+
+  test.describe('Category sidebar', () => {
+    test('Category tree expand and collapse', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+
+      const samplingBtn = searchBoxV2.categoryButton('sampling')
+      const subcategory = searchBoxV2.categoryButton('sampling/custom_sampling')
+
+      await test.step('Expanding sampling reveals its subcategories', async () => {
+        await samplingBtn.click()
+        await expect(subcategory).toBeVisible()
+      })
+
+      await test.step('Collapsing sampling hides its subcategories', async () => {
+        await samplingBtn.click()
+        await expect(subcategory).toBeHidden()
+      })
+    })
+
+    test('Subcategory narrows results to subset', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+
+      await searchBoxV2.categoryButton('sampling').click()
+      await expect(searchBoxV2.results.first()).toBeVisible()
+      const parentCount = await searchBoxV2.results.count()
+
+      const subcategory = searchBoxV2.categoryButton('sampling/custom_sampling')
+      await expect(subcategory).toBeVisible()
+      await subcategory.click()
+
+      await expect
+        .poll(() => searchBoxV2.results.count())
+        .toBeLessThan(parentCount)
+    })
+
+    test('Most relevant resets category filter', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+      await expect(searchBoxV2.results.first()).toBeVisible()
+      const defaultCount = await searchBoxV2.results.count()
+
+      await searchBoxV2.categoryButton('sampling').click()
+      await expect
+        .poll(() => searchBoxV2.results.count())
+        .not.toBe(defaultCount)
+
+      await searchBoxV2.categoryButton('most-relevant').click()
+      await expect(searchBoxV2.results).toHaveCount(defaultCount)
+    })
+
+    test(
+      'Blueprint root chip filters to published blueprints',
+      { tag: ['@subgraph'] },
+      async ({ comfyPage }) => {
+        const blueprintName = `chip-test-${crypto.randomUUID().slice(0, 8)}`
+        const nodeRef = await comfyPage.nodeOps.getNodeRefById('3')
+        await nodeRef.click('title')
+        await comfyPage.command.executeCommand('Comfy.Graph.ConvertToSubgraph')
+        await expect
+          .poll(() =>
+            comfyPage.nodeOps
+              .getNodeRefsByTitle('New Subgraph')
+              .then((refs) => refs.length)
+          )
+          .toBe(1)
+        const subgraphNodes =
+          await comfyPage.nodeOps.getNodeRefsByTitle('New Subgraph')
+        await subgraphNodes[0].click('title')
+        await comfyPage.command.executeCommand('Comfy.PublishSubgraph', {
+          name: blueprintName
+        })
+        await expect(comfyPage.visibleToasts).toHaveCount(1, { timeout: 5000 })
+        await comfyPage.toast.closeToasts(1)
+
+        const { searchBoxV2 } = comfyPage
+        await searchBoxV2.open()
+
+        const blueprintsChip = searchBoxV2.rootCategoryButton(
+          RootCategory.Blueprint
+        )
+        await expect(blueprintsChip).toBeVisible()
+        await blueprintsChip.click()
+
+        // Blueprints persist across tests on the same worker; filter by the
+        // unique name we just published rather than asserting the full list.
+        await expect(
+          searchBoxV2.results.filter({ hasText: blueprintName })
+        ).toHaveCount(1)
+      }
+    )
+  })
+
+  test.describe('Search behavior', () => {
+    test('Search narrows results progressively', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+      const getCount = () => searchBoxV2.results.count()
+
+      await searchBoxV2.open()
+
+      await searchBoxV2.input.fill('S')
+      await expect(searchBoxV2.results.first()).toBeVisible()
+      const count1 = await getCount()
+
+      await searchBoxV2.input.fill('Sa')
+      await expect.poll(getCount).toBeLessThan(count1)
+      const count2 = await getCount()
+
+      await searchBoxV2.input.fill('Sampler')
+      await expect.poll(getCount).toBeLessThan(count2)
+    })
+
+    test('No results shown for nonsensical query', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+      await searchBoxV2.input.fill('zzzxxxyyy_nonexistent_node')
+
+      await expect(searchBoxV2.noResults).toBeVisible()
+      await expect(searchBoxV2.results).toHaveCount(0)
+    })
+  })
+
+  test.describe('Filter chip interaction', () => {
+    test('Multiple filter chips displayed', async ({ comfyPage }) => {
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+      await searchBoxV2.applyTypeFilter('input', 'MODEL')
+      await searchBoxV2.applyTypeFilter('output', 'LATENT')
+
+      await expect(searchBoxV2.filterChips).toHaveCount(2)
+      const chipTexts = await searchBoxV2.filterChips.allTextContents()
+      expect(chipTexts.some((t) => t.includes('MODEL'))).toBe(true)
+      expect(chipTexts.some((t) => t.includes('LATENT'))).toBe(true)
+    })
+  })
+
+  test.describe('Settings-driven behavior', () => {
+    test('Node ID name shown when setting enabled', async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.NodeSearchBoxImpl.ShowIdName',
+        true
+      )
+      const { searchBoxV2 } = comfyPage
+
+      await searchBoxV2.open()
+      await searchBoxV2.input.fill('VAE Decode')
+      await expect(searchBoxV2.results.first()).toBeVisible()
+
+      await expect(searchBoxV2.nodeIdBadge.first()).toBeVisible()
+      await expect(searchBoxV2.nodeIdBadge.first()).toContainText('VAEDecode')
+    })
+
+    test('Follow-cursor disabled places node without ghost mode', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.NodeSearchBoxImpl.FollowCursor',
+        false
+      )
+      const { searchBoxV2 } = comfyPage
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+
+      await searchBoxV2.open()
+
       await searchBoxV2.input.fill('KSampler')
-      const results = searchBoxV2.results
-      await expect(results.first()).toBeVisible()
+      await expect(searchBoxV2.results.first()).toBeVisible()
 
-      // First result should be selected by default
-      await expect(results.first()).toHaveAttribute('aria-selected', 'true')
+      await searchBoxV2.results.first().click()
+      await expect(searchBoxV2.input).toBeHidden()
 
-      // ArrowUp on first item should keep first selected
-      await comfyPage.page.keyboard.press('ArrowUp')
-      await expect(results.first()).toHaveAttribute('aria-selected', 'true')
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount())
+        .toBe(initialCount + 1)
+
+      await expect(
+        comfyPage.page.locator('[data-node-id][data-ghost]')
+      ).toHaveCount(0)
     })
   })
 })

browser_tests/tests/painter.spec.ts

@@ -7,7 +7,7 @@ import {
   drawStroke,
   hasCanvasContent,
   triggerSerialization
-} from '@e2e/helpers/painter'
+} from '@e2e/fixtures/utils/painter'
 import type { TestGraphAccess } from '@e2e/types/globals'
 
 test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
@@ -163,7 +163,7 @@ test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
         .poll(() => cursor.evaluate((el: HTMLElement) => el.style.transform))
         .not.toBe(transform1)
 
-      await comfyPage.page.mouse.move(0, 0)
+      await comfyPage.page.mouse.move(box.x + box.width + 50, box.y)
       await expect(cursor).toBeHidden()
     })
 
@@ -187,7 +187,10 @@ test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
         box.y + box.height * 0.5,
         { steps: 10 }
       )
-      await comfyPage.page.mouse.move(box.x - 20, box.y + box.height * 0.5)
+      await comfyPage.page.mouse.move(
+        box.x + box.width + 20,
+        box.y + box.height * 0.5
+      )
       await comfyPage.page.mouse.up()
 
       await comfyPage.nextFrame()
@@ -408,6 +411,7 @@ test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
 
       await expect
         .poll(() => canvas.evaluate((el: HTMLCanvasElement) => el.width))
+        // default 512 + slider step 64 = 576
         .toBe(576)
     })
 
@@ -493,6 +497,29 @@ test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
           .toBe(false)
       }
     )
+
+    test('Clear on empty canvas is harmless', async ({ comfyPage }) => {
+      const painterWidget = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands')
+      const canvas = painterWidget.locator('canvas')
+
+      await expect
+        .poll(() => hasCanvasContent(canvas), {
+          message: 'canvas should start empty'
+        })
+        .toBe(false)
+
+      await painterWidget
+        .getByTestId('painter-clear-button')
+        .dispatchEvent('click')
+
+      await expect
+        .poll(() => hasCanvasContent(canvas), {
+          message: 'canvas should still be empty after clearing empty canvas'
+        })
+        .toBe(false)
+    })
   })
 
   test.describe('Serialization', () => {
@@ -560,36 +587,6 @@ test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
   })
 
   test.describe('Eraser', () => {
-    test('Eraser removes previously drawn content', async ({ comfyPage }) => {
-      const node = comfyPage.vueNodes.getNodeLocator('1')
-      const painterWidget = node.locator('.widget-expands')
-      const canvas = painterWidget.locator('canvas')
-      await expect(canvas).toBeVisible()
-
-      await drawStroke(comfyPage.page, canvas)
-      await comfyPage.nextFrame()
-      await expect.poll(() => hasCanvasContent(canvas)).toBe(true)
-
-      await painterWidget.getByRole('button', { name: 'Eraser' }).click()
-      await drawStroke(comfyPage.page, canvas)
-      await comfyPage.nextFrame()
-
-      await expect
-        .poll(
-          () =>
-            canvas.evaluate((el: HTMLCanvasElement) => {
-              const ctx = el.getContext('2d')
-              if (!ctx) return false
-              const cx = Math.floor(el.width / 2)
-              const cy = Math.floor(el.height / 2)
-              const { data } = ctx.getImageData(cx - 5, cy - 5, 10, 10)
-              return data.every((v, i) => i % 4 !== 3 || v === 0)
-            }),
-          { message: 'erased area should be transparent' }
-        )
-        .toBe(true)
-    })
-
     test('Eraser on empty canvas adds no content', async ({ comfyPage }) => {
       const node = comfyPage.vueNodes.getNodeLocator('1')
       const painterWidget = node.locator('.widget-expands')
@@ -604,18 +601,318 @@ test.describe('Painter', { tag: ['@widget', '@vue-nodes'] }, () => {
     })
   })
 
-  test('Multiple strokes accumulate on the canvas', async ({ comfyPage }) => {
+  test.describe('Serialization — unchanged canvas', () => {
+    test(
+      'Unchanged canvas does not re-upload on second serialization',
+      { tag: '@slow' },
+      async ({ comfyPage }) => {
+        let uploadCount = 0
+
+        await comfyPage.page.route('**/upload/image', async (route) => {
+          uploadCount++
+          const mockResponse: UploadImageResponse = { name: 'painter-test.png' }
+          await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify(mockResponse)
+          })
+        })
+
+        const canvas = comfyPage.vueNodes
+          .getNodeLocator('1')
+          .locator('.widget-expands canvas')
+
+        await drawStroke(comfyPage.page, canvas)
+        await triggerSerialization(comfyPage.page)
+        expect(uploadCount, 'first serialization should upload once').toBe(1)
+
+        await triggerSerialization(comfyPage.page)
+        expect(
+          uploadCount,
+          'second serialization without new drawing should not re-upload'
+        ).toBe(1)
+      }
+    )
+  })
+
+  test.describe('Settings persistence', () => {
+    test('Tool selection is saved to node properties', async ({
+      comfyPage
+    }) => {
+      const painterWidget = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands')
+
+      await painterWidget.getByRole('button', { name: 'Eraser' }).click()
+
+      await expect
+        .poll(
+          () =>
+            comfyPage.page.evaluate(() => {
+              const graph = window.graph as TestGraphAccess | undefined
+              return graph?._nodes_by_id?.['1']?.properties?.painterTool as
+                | string
+                | undefined
+            }),
+          { message: 'painterTool property should update to eraser' }
+        )
+        .toBe('eraser')
+    })
+
+    test('Brush size change is saved to node properties', async ({
+      comfyPage
+    }) => {
+      const sizeRow = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands')
+        .getByTestId('painter-size-row')
+      const sizeSlider = sizeRow.getByRole('slider')
+
+      await expect(
+        sizeRow.getByTestId('painter-size-value'),
+        'brush size should start at default 20'
+      ).toHaveText('20')
+
+      await sizeSlider.focus()
+      for (let i = 0; i < 10; i++) {
+        await sizeSlider.press('ArrowRight')
+      }
+
+      await expect
+        .poll(
+          () =>
+            comfyPage.page.evaluate(() => {
+              const graph = window.graph as TestGraphAccess | undefined
+              return graph?._nodes_by_id?.['1']?.properties
+                ?.painterBrushSize as number | undefined
+            }),
+          { message: 'painterBrushSize property should update to 30' }
+        )
+        .toBe(30)
+    })
+  })
+
+  test('Controls collapse to single column in compact mode', async ({
+    comfyPage
+  }) => {
+    const painterWidget = comfyPage.vueNodes
+      .getNodeLocator('1')
+      .locator('.widget-expands')
+    const toolLabel = painterWidget.getByText('Tool', { exact: true })
+
+    await expect(
+      toolLabel,
+      'tool label should be visible in two-column layout'
+    ).toBeVisible()
+
+    await comfyPage.page.evaluate(() => {
+      const graph = window.graph as TestGraphAccess | undefined
+      const node = graph?._nodes_by_id?.['1']
+      if (node) {
+        node.size = [200, 400]
+        window.app!.canvas.setDirty(true, true)
+      }
+    })
+
+    await expect(
+      toolLabel,
+      'tool label should hide in compact single-column layout'
+    ).toBeHidden()
+  })
+
+  test('Multiple sequential strokes at different positions all accumulate', async ({
+    comfyPage
+  }) => {
     const canvas = comfyPage.vueNodes
       .getNodeLocator('1')
       .locator('.widget-expands canvas')
     await expect(canvas).toBeVisible()
 
-    await drawStroke(comfyPage.page, canvas, { yPct: 0.3 })
+    await drawStroke(comfyPage.page, canvas, { yPct: 0.25 })
+    await drawStroke(comfyPage.page, canvas, { yPct: 0.5 })
+    await drawStroke(comfyPage.page, canvas, { yPct: 0.75 })
     await comfyPage.nextFrame()
-    await expect.poll(() => hasCanvasContent(canvas)).toBe(true)
 
-    await drawStroke(comfyPage.page, canvas, { yPct: 0.7 })
-    await comfyPage.nextFrame()
-    await expect.poll(() => hasCanvasContent(canvas)).toBe(true)
+    const hasContentAtRow = (yFraction: number) =>
+      canvas.evaluate((el: HTMLCanvasElement, y: number) => {
+        const ctx = el.getContext('2d')
+        if (!ctx) return false
+        const cy = Math.floor(el.height * y)
+        const { data } = ctx.getImageData(0, cy - 5, el.width, 10)
+        for (let i = 3; i < data.length; i += 4) {
+          if (data[i] > 0) return true
+        }
+        return false
+      }, yFraction)
+
+    await expect
+      .poll(() => hasContentAtRow(0.25), {
+        message: 'top stroke should be present'
+      })
+      .toBe(true)
+    await expect
+      .poll(() => hasContentAtRow(0.5), {
+        message: 'middle stroke should be present'
+      })
+      .toBe(true)
+    await expect
+      .poll(() => hasContentAtRow(0.75), {
+        message: 'bottom stroke should be present'
+      })
+      .toBe(true)
   })
 })
+
+test.describe(
+  'Painter — input image connection',
+  { tag: ['@widget', '@vue-nodes', '@slow'] },
+  () => {
+    test.setTimeout(60_000)
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => window.app?.graph?.clear())
+      await comfyPage.workflow.loadWorkflow('widgets/painter_with_input')
+    })
+
+    test('Width, height, and bg_color controls hide when input is connected', async ({
+      comfyPage
+    }) => {
+      const painterWidget = comfyPage.vueNodes
+        .getNodeLocator('1')
+        .locator('.widget-expands')
+
+      await expect(
+        painterWidget.getByTestId('painter-width-row'),
+        'width row should be hidden when input is connected'
+      ).toBeHidden()
+      await expect(
+        painterWidget.getByTestId('painter-height-row'),
+        'height row should be hidden when input is connected'
+      ).toBeHidden()
+      await expect(
+        painterWidget.getByTestId('painter-bg-color-row'),
+        'background color row should be hidden when input is connected'
+      ).toBeHidden()
+      await expect(
+        painterWidget.getByTestId('painter-dimension-text'),
+        'dimension text should be visible when input is connected'
+      ).toBeVisible()
+    })
+
+    test('Canvas resizes to match input image dimensions after execution', async ({
+      comfyPage
+    }) => {
+      await comfyPage.runButton.click()
+
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const img = node.locator('.widget-expands img')
+      await expect(
+        img,
+        'input image should appear after execution'
+      ).toBeVisible({
+        timeout: 30_000
+      })
+
+      await expect
+        .poll(
+          () =>
+            img.evaluate(
+              (el: HTMLImageElement) => el.complete && el.naturalWidth > 0
+            ),
+          {
+            message: 'input image should be fully decoded',
+            timeout: 30_000
+          }
+        )
+        .toBe(true)
+
+      const { nw, nh } = await img.evaluate((el: HTMLImageElement) => ({
+        nw: el.naturalWidth,
+        nh: el.naturalHeight
+      }))
+
+      const canvas = node.locator('.widget-expands canvas')
+      await expect
+        .poll(() => canvas.evaluate((el: HTMLCanvasElement) => el.width), {
+          message: 'canvas width should match input image natural width'
+        })
+        .toBe(nw)
+      await expect
+        .poll(() => canvas.evaluate((el: HTMLCanvasElement) => el.height), {
+          message: 'canvas height should match input image natural height'
+        })
+        .toBe(nh)
+    })
+
+    test('Drawing over input image produces content on canvas', async ({
+      comfyPage
+    }) => {
+      await comfyPage.runButton.click()
+
+      const node = comfyPage.vueNodes.getNodeLocator('1')
+      const img = node.locator('.widget-expands img')
+      await expect(
+        img,
+        'input image should appear after execution'
+      ).toBeVisible({
+        timeout: 30_000
+      })
+      await expect
+        .poll(
+          () =>
+            img.evaluate(
+              (el: HTMLImageElement) => el.complete && el.naturalWidth > 0
+            ),
+          { message: 'input image should be fully decoded', timeout: 30_000 }
+        )
+        .toBe(true)
+
+      const nw = await img.evaluate((el: HTMLImageElement) => el.naturalWidth)
+      const canvas = node.locator('.widget-expands canvas')
+      await expect
+        .poll(() => canvas.evaluate((el: HTMLCanvasElement) => el.width), {
+          message: 'canvas should resize to match input image width',
+          timeout: 15_000
+        })
+        .toBe(nw)
+
+      // Use dispatchEvent to bypass the LiteGraph canvas z-index overlay that
+      // intercepts coordinate-based hit testing from page.mouse
+      const box = await canvas.boundingBox()
+      if (!box) throw new Error('Canvas bounding box not found')
+      const startX = box.x + box.width * 0.3
+      const endX = box.x + box.width * 0.7
+      const midY = box.y + box.height * 0.5
+      const pointerOpts = {
+        bubbles: true,
+        cancelable: true,
+        pointerId: 1,
+        button: 0,
+        isPrimary: true
+      }
+      await canvas.dispatchEvent('pointerdown', {
+        ...pointerOpts,
+        clientX: startX,
+        clientY: midY
+      })
+      for (let i = 1; i <= 10; i++) {
+        await canvas.dispatchEvent('pointermove', {
+          ...pointerOpts,
+          clientX: startX + (endX - startX) * (i / 10),
+          clientY: midY
+        })
+      }
+      await canvas.dispatchEvent('pointerup', {
+        ...pointerOpts,
+        clientX: endX,
+        clientY: midY
+      })
+
+      await expect
+        .poll(() => hasCanvasContent(canvas), {
+          message: 'drawing over input image should produce canvas content'
+        })
+        .toBe(true)
+    })
+  }
+)

browser_tests/tests/performance.spec.ts

@@ -1,7 +1,10 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
-import { logMeasurement, recordMeasurement } from '@e2e/helpers/perfReporter'
+import {
+  logMeasurement,
+  recordMeasurement
+} from '@e2e/fixtures/utils/perfReporter'
 
 test.describe('Performance', { tag: ['@perf'] }, () => {
   test('canvas idle style recalculations', async ({ comfyPage }) => {

browser_tests/tests/propertiesPanel/PropertiesPanelHelper.ts

@@ -1,6 +1,7 @@
 import type { Locator, Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 
+import { TitleEditor } from '@e2e/fixtures/components/TitleEditor'
 import { TestIds } from '@e2e/fixtures/selectors'
 
 export class PropertiesPanelHelper {
@@ -8,12 +9,14 @@ export class PropertiesPanelHelper {
   readonly panelTitle: Locator
   readonly searchBox: Locator
   readonly closeButton: Locator
+  readonly titleEditor: TitleEditor
 
   constructor(readonly page: Page) {
     this.root = page.getByTestId(TestIds.propertiesPanel.root)
     this.panelTitle = this.root.locator('h3')
     this.searchBox = this.root.getByPlaceholder(/^Search/)
     this.closeButton = this.root.locator('button[aria-pressed]')
+    this.titleEditor = new TitleEditor(this.root)
   }
 
   get tabs(): Locator {
@@ -28,10 +31,6 @@ export class PropertiesPanelHelper {
     return this.panelTitle.locator('i[class*="lucide--pencil"]')
   }
 
-  get titleInput(): Locator {
-    return this.root.getByTestId(TestIds.node.titleInput)
-  }
-
   getNodeStateButton(state: 'Normal' | 'Bypass' | 'Mute'): Locator {
     return this.root.locator('button', { hasText: state })
   }
@@ -86,8 +85,8 @@ export class PropertiesPanelHelper {
 
   async editTitle(newTitle: string): Promise<void> {
     await this.titleEditIcon.click()
-    await this.titleInput.fill(newTitle)
-    await this.titleInput.press('Enter')
+    await this.titleEditor.expectVisible()
+    await this.titleEditor.setTitle(newTitle)
   }
 
   async searchWidgets(query: string): Promise<void> {

browser_tests/tests/propertiesPanel/errorsTabMissingMedia.spec.ts

@@ -3,7 +3,7 @@ import { expect } from '@playwright/test'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
-import { loadWorkflowAndOpenErrorsTab } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+import { loadWorkflowAndOpenErrorsTab } from '@e2e/fixtures/helpers/ErrorsTabHelper'
 
 async function uploadFileViaDropzone(comfyPage: ComfyPage) {
   const dropzone = comfyPage.page.getByTestId(

browser_tests/tests/propertiesPanel/errorsTabMissingModels.spec.ts

@@ -5,11 +5,11 @@ import { TestIds } from '@e2e/fixtures/selectors'
 import {
   interceptClipboardWrite,
   getClipboardText
-} from '@e2e/helpers/clipboardSpy'
+} from '@e2e/fixtures/utils/clipboardSpy'
 import {
   cleanupFakeModel,
   loadWorkflowAndOpenErrorsTab
-} from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+} from '@e2e/fixtures/helpers/ErrorsTabHelper'
 
 test.describe('Errors tab - Missing models', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {

browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts

@@ -2,7 +2,7 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
-import { loadWorkflowAndOpenErrorsTab } from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+import { loadWorkflowAndOpenErrorsTab } from '@e2e/fixtures/helpers/ErrorsTabHelper'
 
 test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {

browser_tests/tests/propertiesPanel/errorsTabModeAware.spec.ts

@@ -6,7 +6,7 @@ import {
   cleanupFakeModel,
   openErrorsTab,
   loadWorkflowAndOpenErrorsTab
-} from '@e2e/tests/propertiesPanel/ErrorsTabHelper'
+} from '@e2e/fixtures/helpers/ErrorsTabHelper'
 
 test.describe('Errors tab - Mode-aware errors', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {

browser_tests/tests/propertiesPanel/titleEditing.spec.ts

@@ -18,7 +18,7 @@ test.describe('Properties panel - Title editing', () => {
 
   test('should enter edit mode on pencil click', async () => {
     await panel.titleEditIcon.click()
-    await expect(panel.titleInput).toBeVisible()
+    await panel.titleEditor.expectVisible()
   })
 
   test('should update node title on edit', async () => {

browser_tests/tests/queue/queueSettings.spec.ts

@@ -0,0 +1,121 @@
+import { mergeTests } from '@playwright/test'
+import type { Locator, Page, Request } from '@playwright/test'
+import type { JobsListResponse } from '@comfyorg/ingest-types'
+
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import {
+  comfyExpect as expect,
+  comfyPageFixture
+} from '@e2e/fixtures/ComfyPage'
+import { createMockJobs } from '@e2e/fixtures/helpers/AssetsHelper'
+import { ExecutionHelper } from '@e2e/fixtures/helpers/ExecutionHelper'
+import { TestIds } from '@e2e/fixtures/selectors'
+import { webSocketFixture } from '@e2e/fixtures/ws'
+
+const test = mergeTests(comfyPageFixture, webSocketFixture)
+
+const TOTAL_MOCK_JOBS = 20
+const overflowJobsListRoutePattern = '**/api/jobs?*'
+
+function isHistoryJobsRequest(url: string): boolean {
+  if (!url.includes('/api/jobs')) return false
+  const params = new URL(url).searchParams
+  const statuses = (params.get('status') ?? '').split(',')
+  return statuses.includes('completed')
+}
+
+async function captureNextHistoryRequest(
+  comfyPage: ComfyPage,
+  exec: ExecutionHelper
+): Promise<Request> {
+  const requestPromise = comfyPage.page.waitForRequest(
+    (req) => isHistoryJobsRequest(req.url()),
+    { timeout: 5000 }
+  )
+  exec.status(0)
+  return requestPromise
+}
+
+function getJobListResults(page: Page): Locator {
+  return page.getByTestId(TestIds.queue.jobAssetsList).locator('[data-job-id]')
+}
+
+test.describe('Queue settings', { tag: '@canvas' }, () => {
+  test.describe('Comfy.Queue.MaxHistoryItems', () => {
+    test.describe('limit query parameter', () => {
+      test.beforeEach(async ({ comfyPage }) => {
+        await comfyPage.assets.mockOutputHistory(
+          createMockJobs(TOTAL_MOCK_JOBS)
+        )
+      })
+
+      test.afterEach(async ({ comfyPage }) => {
+        await comfyPage.assets.clearMocks()
+      })
+
+      test('limit query parameter on /api/jobs reflects the setting', async ({
+        comfyPage,
+        getWebSocket
+      }) => {
+        const TARGET_LIMIT = 6
+        await comfyPage.settings.setSetting(
+          'Comfy.Queue.MaxHistoryItems',
+          TARGET_LIMIT
+        )
+
+        const exec = new ExecutionHelper(comfyPage, await getWebSocket())
+        const request = await captureNextHistoryRequest(comfyPage, exec)
+        const url = new URL(request.url())
+        expect(url.searchParams.get('limit')).toBe(String(TARGET_LIMIT))
+      })
+    })
+
+    test('queue panel caps history items to the configured number', async ({
+      comfyPage,
+      getWebSocket
+    }) => {
+      // Add a mock route that returns all jobs regardless of the request's `limit` param
+      const overflowJobs = createMockJobs(TOTAL_MOCK_JOBS)
+      await comfyPage.page.route(
+        overflowJobsListRoutePattern,
+        async (route) => {
+          const url = new URL(route.request().url())
+          if (!url.searchParams.get('status')?.includes('completed')) {
+            await route.continue()
+            return
+          }
+          const response = {
+            jobs: overflowJobs,
+            pagination: {
+              offset: 0,
+              limit: overflowJobs.length,
+              total: overflowJobs.length,
+              has_more: false
+            }
+          } satisfies {
+            jobs: unknown[]
+            pagination: JobsListResponse['pagination']
+          }
+          await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify(response)
+          })
+        }
+      )
+
+      const VISIBLE_LIMIT = 6
+      await comfyPage.settings.setSetting(
+        'Comfy.Queue.MaxHistoryItems',
+        VISIBLE_LIMIT
+      )
+      const exec = new ExecutionHelper(comfyPage, await getWebSocket())
+      await captureNextHistoryRequest(comfyPage, exec)
+
+      await comfyPage.page.getByTestId(TestIds.queue.overlayToggle).click()
+      const jobs = getJobListResults(comfyPage.page)
+      await expect(jobs.first()).toBeVisible()
+      await expect(jobs).toHaveCount(VISIBLE_LIMIT)
+    })
+  })
+})

browser_tests/tests/queueNotificationBanners.spec.ts

@@ -0,0 +1,164 @@
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TestIds } from '@e2e/fixtures/selectors'
+
+// Mirrors BANNER_DISMISS_DELAY_MS in src/composables/queue/useQueueNotificationBanners.ts.
+// Duplicated here to avoid pulling production source (and its litegraph
+// transitive deps) into the Playwright TS loader.
+const BANNER_DISMISS_DELAY_MS = 4000
+const BANNER_ASSERT_TIMEOUT_MS = BANNER_DISMISS_DELAY_MS + 2000
+
+const REQUEST_ID_PRIMARY = 1
+const REQUEST_ID_SECONDARY = 2
+const REQUEST_ID_MISMATCH = 999
+
+let nextRequestId = 1000
+const newRequestId = () => nextRequestId++
+
+function bannerLocator(page: Page) {
+  return page.getByTestId(TestIds.queue.notificationBanner)
+}
+
+type DispatchOpts = { batchCount?: number; requestId?: number }
+
+function dispatchPromptQueueing(page: Page, opts: DispatchOpts = {}) {
+  return page.evaluate(
+    ([batchCount, requestId]) => {
+      window.app!.api.dispatchCustomEvent('promptQueueing', {
+        batchCount,
+        requestId
+      })
+    },
+    [opts.batchCount ?? 1, opts.requestId ?? newRequestId()]
+  )
+}
+
+function dispatchPromptQueued(page: Page, opts: DispatchOpts = {}) {
+  return page.evaluate(
+    ([batchCount, requestId]) => {
+      window.app!.api.dispatchCustomEvent('promptQueued', {
+        number: 0,
+        batchCount,
+        requestId
+      })
+    },
+    [opts.batchCount ?? 1, opts.requestId ?? newRequestId()]
+  )
+}
+
+test.describe('Queue notification banners', { tag: ['@ui'] }, () => {
+  test.describe('Queuing lifecycle', () => {
+    test('promptQueueing event shows a queueing banner', async ({
+      comfyPage
+    }) => {
+      await dispatchPromptQueueing(comfyPage.page)
+
+      const banner = bannerLocator(comfyPage.page)
+      await expect(banner).toBeVisible()
+      await expect(banner).toContainText('queuing')
+    })
+
+    test('promptQueued upgrades a pending banner to queued', async ({
+      comfyPage
+    }) => {
+      await dispatchPromptQueueing(comfyPage.page, {
+        batchCount: 1,
+        requestId: REQUEST_ID_PRIMARY
+      })
+
+      const banner = bannerLocator(comfyPage.page)
+      await expect(banner).toContainText('queuing')
+
+      await dispatchPromptQueued(comfyPage.page, {
+        batchCount: 1,
+        requestId: REQUEST_ID_PRIMARY
+      })
+
+      await expect(banner).toContainText('queued')
+    })
+
+    test('promptQueued with batch count > 1 shows plural text', async ({
+      comfyPage
+    }) => {
+      await dispatchPromptQueued(comfyPage.page, { batchCount: 3 })
+
+      const banner = bannerLocator(comfyPage.page)
+      await expect(banner).toBeVisible()
+      await expect(banner).toContainText('3')
+      await expect(banner).toContainText('jobs added to queue')
+    })
+
+    test('promptQueued with mismatched requestId enqueues a separate queued banner', async ({
+      comfyPage
+    }) => {
+      await dispatchPromptQueueing(comfyPage.page, {
+        batchCount: 1,
+        requestId: REQUEST_ID_PRIMARY
+      })
+
+      const banner = bannerLocator(comfyPage.page)
+      await expect(banner).toContainText('queuing')
+
+      await dispatchPromptQueued(comfyPage.page, {
+        batchCount: 1,
+        requestId: REQUEST_ID_MISMATCH
+      })
+
+      // Pending banner is not upgraded — still shows "queuing".
+      await expect(banner).toContainText('queuing')
+
+      // After the pending banner auto-dismisses, the queued banner appears.
+      await expect(banner).toContainText('queued', {
+        timeout: BANNER_ASSERT_TIMEOUT_MS
+      })
+    })
+  })
+
+  test.describe('Auto-dismiss', () => {
+    test('Banner auto-dismisses after timeout', async ({ comfyPage }) => {
+      await dispatchPromptQueued(comfyPage.page)
+
+      const banner = bannerLocator(comfyPage.page)
+      await expect(banner).toBeVisible()
+      await expect(banner).toBeHidden({ timeout: BANNER_ASSERT_TIMEOUT_MS })
+    })
+  })
+
+  test.describe('Notification queue (FIFO)', () => {
+    test('Second notification shows after first auto-dismisses', async ({
+      comfyPage
+    }) => {
+      await dispatchPromptQueued(comfyPage.page, {
+        batchCount: 1,
+        requestId: REQUEST_ID_PRIMARY
+      })
+      await dispatchPromptQueued(comfyPage.page, {
+        batchCount: 2,
+        requestId: REQUEST_ID_SECONDARY
+      })
+
+      const banner = bannerLocator(comfyPage.page)
+      await expect(banner).toContainText('Job queued')
+      await expect(banner).toContainText('2 jobs added to queue', {
+        timeout: BANNER_ASSERT_TIMEOUT_MS
+      })
+    })
+  })
+
+  test.describe('Direct queued event (no pending predecessor)', () => {
+    test('promptQueued without prior queueing shows queued banner directly', async ({
+      comfyPage
+    }) => {
+      await dispatchPromptQueued(comfyPage.page, {
+        batchCount: 1,
+        requestId: REQUEST_ID_PRIMARY
+      })
+
+      const banner = bannerLocator(comfyPage.page)
+      await expect(banner).toBeVisible()
+      await expect(banner).toContainText('queued')
+    })
+  })
+})

browser_tests/tests/rightSidePanelTabs.spec.ts

@@ -2,7 +2,6 @@ import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from '@e2e/fixtures/ComfyPage'
-import { TestIds } from '@e2e/fixtures/selectors'
 
 test.describe('Right Side Panel Tabs', { tag: '@ui' }, () => {
   test('Properties panel opens with workflow overview', async ({
@@ -35,11 +34,8 @@ test.describe('Right Side Panel Tabs', { tag: '@ui' }, () => {
 
     // Click on the title to enter edit mode
     await propertiesPanel.panelTitle.click()
-    const titleInput = propertiesPanel.root.getByTestId(TestIds.node.titleInput)
-    await expect(titleInput).toBeVisible()
-
-    await titleInput.fill('My Custom Sampler')
-    await titleInput.press('Enter')
+    await propertiesPanel.titleEditor.expectVisible()
+    await propertiesPanel.titleEditor.setTitle('My Custom Sampler')
 
     await expect(propertiesPanel.panelTitle).toContainText('My Custom Sampler')
   })

browser_tests/tests/selectionBoundingBox.spec.ts

@@ -3,7 +3,7 @@ import type { Page } from '@playwright/test'
 
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
-import { measureSelectionBounds } from '@e2e/fixtures/helpers/boundsUtils'
+import { measureSelectionBounds } from '@e2e/fixtures/utils/boundsUtils'
 import type { NodeReference } from '@e2e/fixtures/utils/litegraphUtils'
 
 const SUBGRAPH_ID = '2'