fix: nodes themselves to have focus and indication, made the image node keyboard acessible and have better aria labels, added simply cache for loading so we only show loading state for non cached images

.env_example

@@ -42,7 +42,3 @@ ALGOLIA_API_KEY=684d998c36b67a9a9fce8fc2d8860579
 # SENTRY_AUTH_TOKEN=private-token # get from sentry
 # SENTRY_ORG=comfy-org
 # SENTRY_PROJECT=cloud-frontend-staging
-
-# Stripe pricing table configuration (used by feature-flagged subscription tiers UI)
-# VITE_STRIPE_PUBLISHABLE_KEY=pk_test_123
-# VITE_STRIPE_PRICING_TABLE_ID=prctbl_123

.github/workflows/ci-shell-validation.yaml

@@ -1,26 +0,0 @@
-# Description: Runs shellcheck on tracked shell scripts when they change
-name: "CI: Shell Validation"
-
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - '**/*.sh'
-  pull_request:
-    paths:
-      - '**/*.sh'
-
-jobs:
-  shell-lint:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Install shellcheck
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y shellcheck
-
-      - name: Run shellcheck
-        run: bash ./scripts/cicd/check-shell.sh

.github/workflows/pr-backport.yaml

@@ -16,10 +16,6 @@ on:
         type: boolean
         default: false
 
-concurrency:
-  group: backport-${{ github.event_name == 'workflow_dispatch' && inputs.pr_number || github.event.pull_request.number }}
-  cancel-in-progress: false
-
 jobs:
   backport:
     if: >

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

@@ -124,16 +124,12 @@ jobs:
       - name: Stage changed snapshot files
         id: changed-snapshots
         run: |
-          set -euo pipefail
           echo "=========================================="
           echo "STAGING CHANGED SNAPSHOTS (Shard ${{ matrix.shardIndex }})"
           echo "=========================================="
 
-          # Get list of changed snapshot files (including untracked/new files)
-          changed_files=$( (
-            git diff --name-only browser_tests/ 2>/dev/null || true
-            git ls-files --others --exclude-standard browser_tests/ 2>/dev/null || true
-          ) | sort -u | grep -E '\-snapshots/' || true )
+          # Get list of changed snapshot files
+          changed_files=$(git diff --name-only browser_tests/ 2>/dev/null | grep -E '\-snapshots/' || echo "")
 
           if [ -z "$changed_files" ]; then
             echo "No snapshot changes in this shard"
@@ -155,11 +151,6 @@ jobs:
           # Strip 'browser_tests/' prefix to avoid double nesting
           echo "Copying changed files to staging directory..."
           while IFS= read -r file; do
-            # Skip paths that no longer exist (e.g. deletions)
-            if [ ! -f "$file" ]; then
-              echo "  → (skipped; not a file) $file"
-              continue
-            fi
             # Remove 'browser_tests/' prefix
             file_without_prefix="${file#browser_tests/}"
             # Create parent directories
@@ -270,19 +261,11 @@ jobs:
           echo "CHANGES SUMMARY"
           echo "=========================================="
           echo ""
-          echo "Changed files in browser_tests (including untracked):"
-          CHANGES=$(git status --porcelain=v1 --untracked-files=all -- browser_tests/)
-          if [ -z "$CHANGES" ]; then
-            echo "No changes"
-            echo ""
-            echo "Total changes:"
-            echo "0"
-          else
-            echo "$CHANGES" | head -50
-            echo ""
-            echo "Total changes:"
-            echo "$CHANGES" | wc -l
-          fi
+          echo "Changed files in browser_tests:"
+          git diff --name-only browser_tests/ | head -20 || echo "No changes"
+          echo ""
+          echo "Total changes:"
+          git diff --name-only browser_tests/ | wc -l || echo "0"
 
       - name: Commit updated expectations
         id: commit
@@ -290,7 +273,7 @@ jobs:
           git config --global user.name 'github-actions'
           git config --global user.email 'github-actions@github.com'
 
-          if [ -z "$(git status --porcelain=v1 --untracked-files=all -- browser_tests/)" ]; then
+          if git diff --quiet browser_tests/; then
             echo "No changes to commit"
             echo "has-changes=false" >> $GITHUB_OUTPUT
             exit 0

.github/workflows/release-version-bump.yaml

@@ -20,13 +20,6 @@ on:
         required: true
         default: 'main'
         type: string
-  schedule:
-    # 00:00 UTC ≈ 4:00 PM PST / 5:00 PM PDT on the previous calendar day
-    - cron: '0 0 * * *'
-
-concurrency:
-  group: release-version-bump
-  cancel-in-progress: true
 
 jobs:
   bump-version:
@@ -36,99 +29,15 @@ jobs:
       pull-requests: write
 
     steps:
-      - name: Prepare inputs
-        id: prepared-inputs
-        shell: bash
-        env:
-          RAW_VERSION_TYPE: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.version_type || '' }}
-          RAW_PRE_RELEASE: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.pre_release || '' }}
-          RAW_BRANCH: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.branch || '' }}
-        run: |
-          set -euo pipefail
-          VERSION_TYPE="$RAW_VERSION_TYPE"
-          PRE_RELEASE="$RAW_PRE_RELEASE"
-          TARGET_BRANCH="$RAW_BRANCH"
-
-          if [[ -z "$VERSION_TYPE" ]]; then
-            VERSION_TYPE='patch'
-          fi
-
-          if [[ -z "$TARGET_BRANCH" ]]; then
-            TARGET_BRANCH='main'
-          fi
-
-          {
-            echo "version_type=$VERSION_TYPE"
-            echo "pre_release=$PRE_RELEASE"
-            echo "branch=$TARGET_BRANCH"
-          } >> "$GITHUB_OUTPUT"
-
-      - name: Close stale nightly version bump PRs
-        if: github.event_name == 'schedule'
-        uses: actions/github-script@v7
-        with:
-          github-token: ${{ github.token }}
-          script: |
-            const prefix = 'version-bump-'
-            const closed = []
-            const prs = await github.paginate(github.rest.pulls.list, {
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              state: 'open',
-              per_page: 100
-            })
-
-            for (const pr of prs) {
-              if (!pr.head?.ref?.startsWith(prefix)) {
-                continue
-              }
-
-              if (pr.user?.login !== 'github-actions[bot]') {
-                continue
-              }
-
-              // Only clean up stale nightly PRs targeting main.
-              // Adjust here if other target branches should be cleaned.
-              if (pr.base?.ref !== 'main') {
-                continue
-              }
-
-              await github.rest.pulls.update({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                pull_number: pr.number,
-                state: 'closed'
-              })
-
-              try {
-                await github.rest.git.deleteRef({
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  ref: `heads/${pr.head.ref}`
-                })
-              } catch (error) {
-                if (![404, 422].includes(error.status)) {
-                  throw error
-                }
-              }
-
-              closed.push(pr.number)
-            }
-
-            core.info(`Closed ${closed.length} stale PR(s).`)
-
       - name: Checkout repository
         uses: actions/checkout@v5
         with:
-          ref: ${{ steps.prepared-inputs.outputs.branch }}
+          ref: ${{ github.event.inputs.branch }}
           fetch-depth: 0
-          persist-credentials: false
 
       - name: Validate branch exists
-        env:
-          TARGET_BRANCH: ${{ steps.prepared-inputs.outputs.branch }}
         run: |
-          BRANCH="$TARGET_BRANCH"
+          BRANCH="${{ github.event.inputs.branch }}"
           if ! git show-ref --verify --quiet "refs/heads/$BRANCH" && ! git show-ref --verify --quiet "refs/remotes/origin/$BRANCH"; then
             echo "❌ Branch '$BRANCH' does not exist"
             echo ""
@@ -142,7 +51,7 @@ jobs:
           echo "✅ Branch '$BRANCH' exists"
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
@@ -153,31 +62,16 @@ jobs:
 
       - name: Bump version
         id: bump-version
-        env:
-          VERSION_TYPE: ${{ steps.prepared-inputs.outputs.version_type }}
-          PRE_RELEASE: ${{ steps.prepared-inputs.outputs.pre_release }}
         run: |
-          set -euo pipefail
-          if [[ -n "$PRE_RELEASE" && ! "$VERSION_TYPE" =~ ^pre(major|minor|patch)$ && "$VERSION_TYPE" != "prerelease" ]]; then
-            echo "❌ pre_release was provided but version_type='$VERSION_TYPE' does not support --preid"
-            exit 1
-          fi
-          if [[ -n "$PRE_RELEASE" ]]; then
-            pnpm version "$VERSION_TYPE" --preid "$PRE_RELEASE" --no-git-tag-version
-          else
-            pnpm version "$VERSION_TYPE" --no-git-tag-version
-          fi
-
+          pnpm version ${{ github.event.inputs.version_type }} --preid ${{ github.event.inputs.pre_release }} --no-git-tag-version
           NEW_VERSION=$(node -p "require('./package.json').version")
-          echo "NEW_VERSION=$NEW_VERSION" >> "$GITHUB_OUTPUT"
+          echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
 
       - name: Format PR string
         id: capitalised
-        env:
-          VERSION_TYPE: ${{ steps.prepared-inputs.outputs.version_type }}
         run: |
-          CAPITALISED_TYPE="$VERSION_TYPE"
-          echo "capitalised=${CAPITALISED_TYPE@u}" >> "$GITHUB_OUTPUT"
+          CAPITALISED_TYPE=${{ github.event.inputs.version_type }}
+          echo "capitalised=${CAPITALISED_TYPE@u}" >> $GITHUB_OUTPUT
 
       - name: Create Pull Request
         uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
@@ -188,8 +82,8 @@ jobs:
           body: |
             ${{ steps.capitalised.outputs.capitalised }} version increment to ${{ steps.bump-version.outputs.NEW_VERSION }}
 
-            **Base branch:** `${{ steps.prepared-inputs.outputs.branch }}`
+            **Base branch:** `${{ github.event.inputs.branch }}`
           branch: version-bump-${{ steps.bump-version.outputs.NEW_VERSION }}
-          base: ${{ steps.prepared-inputs.outputs.branch }}
+          base: ${{ github.event.inputs.branch }}
           labels: |
             Release

.i18nrc.cjs

@@ -10,7 +10,7 @@ module.exports = defineConfig({
   entryLocale: 'en',
   output: 'src/locales',
   outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar', 'tr', 'pt-BR'],
-  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream, Civitai, Hugging Face.
+  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.
   

.npmrc

@@ -1,3 +1,2 @@
 ignore-workspace-root-check=true
 catalog-mode=prefer
-public-hoist-pattern[]=@parcel/watcher

.oxlintrc.json

@@ -2,98 +2,25 @@
   "$schema": "./node_modules/oxlint/configuration_schema.json",
   "ignorePatterns": [
     ".i18nrc.cjs",
-    ".nx/*",
+    "components.d.ts",
+    "lint-staged.config.js",
+    "vitest.setup.ts",
     "**/vite.config.*.timestamp*",
     "**/vitest.config.*.timestamp*",
-    "components.d.ts",
-    "coverage/*",
-    "dist/*",
     "packages/registry-types/src/comfyRegistryTypes.ts",
-    "playwright-report/*",
     "src/extensions/core/*",
     "src/scripts/*",
     "src/types/generatedManagerTypes.ts",
-    "src/types/vue-shim.d.ts",
-    "test-results/*",
-    "vitest.setup.ts"
-  ],
-  "plugins": [
-    "eslint",
-    "import",
-    "oxc",
-    "typescript",
-    "unicorn",
-    "vitest",
-    "vue"
+    "src/types/vue-shim.d.ts"
   ],
   "rules": {
     "no-async-promise-executor": "off",
-    "no-console": [
-      "error",
-      {
-        "allow": [
-          "warn",
-          "error"
-        ]
-      }
-    ],
     "no-control-regex": "off",
     "no-eval": "off",
-    "no-redeclare": "error",
-    "no-restricted-imports": [
-      "error",
-      {
-        "paths": [
-          {
-            "name": "primevue/calendar",
-            "message": "Calendar is deprecated in PrimeVue 4+. Use DatePicker instead: import DatePicker from 'primevue/datepicker'"
-          },
-          {
-            "name": "primevue/dropdown",
-            "message": "Dropdown is deprecated in PrimeVue 4+. Use Select instead: import Select from 'primevue/select'"
-          },
-          {
-            "name": "primevue/inputswitch",
-            "message": "InputSwitch is deprecated in PrimeVue 4+. Use ToggleSwitch instead: import ToggleSwitch from 'primevue/toggleswitch'"
-          },
-          {
-            "name": "primevue/overlaypanel",
-            "message": "OverlayPanel is deprecated in PrimeVue 4+. Use Popover instead: import Popover from 'primevue/popover'"
-          },
-          {
-            "name": "primevue/sidebar",
-            "message": "Sidebar is deprecated in PrimeVue 4+. Use Drawer instead: import Drawer from 'primevue/drawer'"
-          },
-          {
-            "name": "@/i18n--to-enable",
-            "importNames": [
-              "st",
-              "t",
-              "te",
-              "d"
-            ],
-            "message": "Don't import `@/i18n` directly, prefer `useI18n()`"
-          }
-        ]
-      }
-    ],
     "no-self-assign": "allow",
     "no-unused-expressions": "off",
     "no-unused-private-class-members": "off",
     "no-useless-rename": "off",
-    "import/default": "error",
-    "import/export": "error",
-    "import/namespace": "error",
-    "import/no-duplicates": "error",
-    "import/consistent-type-specifier-style": [
-      "error",
-      "prefer-top-level"
-    ],
-    "jest/expect-expect": "off",
-    "jest/no-conditional-expect": "off",
-    "jest/no-disabled-tests": "off",
-    "jest/no-standalone-expect": "off",
-    "jest/valid-title": "off",
     "typescript/no-this-alias": "off",
     "typescript/no-unnecessary-parameter-property-assignment": "off",
     "typescript/no-unsafe-declaration-merging": "off",
@@ -112,18 +39,6 @@
     "typescript/restrict-template-expressions": "off",
     "typescript/unbound-method": "off",
     "typescript/no-floating-promises": "error",
-    "vue/no-import-compiler-macros": "error",
-    "vue/no-dupe-keys": "error"
-  },
-  "overrides": [
-    {
-      "files": [
-        "**/*.{stories,test,spec}.ts",
-        "**/*.stories.vue"
-      ],
-      "rules": {
-        "no-console": "allow"
-      }
-    }
-  ]
+    "vue/no-import-compiler-macros": "error"
+  }
 }

.stylelintrc.json

@@ -12,9 +12,6 @@
     "declaration-property-value-no-unknown": [
       true,
       {
-        "typesSyntax": {
-          "radial-gradient()": "| <any-value>"
-        },
         "ignoreProperties": {
           "speak": ["none"],
           "app-region": ["drag", "no-drag"],
@@ -59,7 +56,10 @@
     "function-no-unknown": [
       true,
       {
-        "ignoreFunctions": ["theme", "v-bind"]
+        "ignoreFunctions": [
+          "theme",
+          "v-bind"
+        ]
       }
     ]
   },

AGENTS.md

@@ -33,7 +33,18 @@
 
 ## Monorepo Architecture
 
-The project uses **Nx** for build orchestration and task management
+The project uses **Nx** for build orchestration and task management:
+
+- **Task Orchestration**: Commands like `dev`, `build`, `lint`, and `test:browser` run via Nx
+- **Caching**: Nx provides intelligent caching for faster rebuilds
+- **Configuration**: Managed through `nx.json` with plugins for ESLint, Storybook, Vite, and Playwright
+- **Dependencies**: Nx handles dependency graph analysis and parallel execution
+
+Key Nx features:
+
+- Build target caching and incremental builds
+- Parallel task execution across the monorepo
+- Plugin-based architecture for different tools
 
 ## Build, Test, and Development Commands
 
@@ -73,6 +84,24 @@ The project uses **Nx** for build orchestration and task management
   - composables `useXyz.ts`
   - Pinia stores `*Store.ts`
 
+## Testing Guidelines
+
+- Frameworks:
+  - Vitest (unit/component, happy-dom)
+  - Playwright (E2E)
+- Test files:
+  - Unit/Component: `**/*.test.ts`
+  - E2E: `browser_tests/**/*.spec.ts`
+  - Litegraph Specific: `src/lib/litegraph/test/`
+- Coverage: text/json/html reporters enabled
+  - aim to cover critical logic and new features
+- Playwright:
+  - optional tags like `@mobile`, `@2x` are respected by config
+- Tests to avoid
+  - Change detector tests
+    - e.g. a test that just asserts that the defaults are certain values
+  - Tests that are dependent on non-behavioral features like utility classes or styles
+  - Redundant tests
 
 ## Commit & Pull Request Guidelines
 
@@ -116,7 +145,6 @@ The project uses **Nx** for build orchestration and task management
     }>()
     ```
 
-  - Prefer reactive props destructuring to `const props = defineProps<...>`
   - Do not use `withDefaults` or runtime props declaration
   - Do not import Vue macros unnecessarily
   - Prefer `useModel` to separately defining a prop and emit
@@ -130,77 +158,29 @@ The project uses **Nx** for build orchestration and task management
 1. Leverage VueUse functions for performance-enhancing styles
 2. Use es-toolkit for utility functions
 3. Use TypeScript for type safety
-4. If a complex type definition is inlined in multiple related places, extract and name it for reuse
-5. In Vue Components, implement proper props and emits definitions
-6. Utilize Vue 3's Teleport component when needed
-7. Use Suspense for async components
-8. Implement proper error handling
-9. Follow Vue 3 style guide and naming conventions
-10. Use Vite for fast development and building
-11. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
-12. Avoid new usage of PrimeVue components
-13. Write tests for all changes, especially bug fixes to catch future regressions
-14. Write code that is expressive and self-documenting to the furthest degree possible. This reduces the need for code comments which can get out of sync with the code itself. Try to avoid comments unless absolutely necessary
-15. Do not add or retain redundant comments, clean as you go
-16. Whenever a new piece of code is written, the author should ask themselves 'is there a simpler way to introduce the same functionality?'. If the answer is yes, the simpler course should be chosen
-17. [Refactoring](https://refactoring.com/catalog/) should be used to make complex code simpler
-18. Try to minimize the surface area (exported values) of each module and composable
-19. Don't use barrel files, e.g. `/some/package/index.ts` to re-export within `/src`
-20. Keep functions short and functional
-21. Minimize [nesting](https://wiki.c2.com/?ArrowAntiPattern), e.g. `if () { ... }` or `for () { ... }`
-22. Avoid mutable state, prefer immutability and assignment at point of declaration
-23. Favor pure functions (especially testable ones)
-24. Watch out for [Code Smells](https://wiki.c2.com/?CodeSmell) and refactor to avoid them
-
-## Testing Guidelines
-
-- Frameworks:
-  - Vitest (unit/component, happy-dom)
-  - Playwright (E2E)
-- Test files:
-  - Unit/Component: `**/*.test.ts`
-  - E2E: `browser_tests/**/*.spec.ts`
-  - Litegraph Specific: `src/lib/litegraph/test/`
-
-### General
-
-1. Do not write change detector tests  
-   e.g. a test that just asserts that the defaults are certain values
-2. Do not write tests that are dependent on non-behavioral features like utility classes or styles
-3. Be parsimonious in testing, do not write redundant tests  
-   See <https://tidyfirst.substack.com/p/composable-tests>
-4. [Don’t Mock What You Don’t Own](https://hynek.me/articles/what-to-mock-in-5-mins/)
-
-### Vitest / Unit Tests
-
-1. Do not write tests that just test the mocks  
-   Ensure that the tests fail when the code itself would behave in a way that was not expected or desired
-2. For mocking, leverage [Vitest's utilities](https://vitest.dev/guide/mocking.html) where possible
-3. Keep your module mocks contained  
-   Do not use global mutable state within the test file  
-   Use `vi.hoisted()` if necessary to allow for per-test Arrange phase manipulation of deeper mock state
-4. For Component testing, use [Vue Test Utils](https://test-utils.vuejs.org/) and especially follow the advice [about making components easy to test](https://test-utils.vuejs.org/guide/essentials/easy-to-test.html)
-5. Aim for behavioral coverage of critical and new features
-
-### Playwright / Browser / E2E Tests
-
-1. Follow the Best Practices described [in the Playwright documentation](https://playwright.dev/docs/best-practices)
-2. Do not use waitForTimeout, use Locator actions and [retrying assertions](https://playwright.dev/docs/test-assertions#auto-retrying-assertions)
-3. Tags like `@mobile`, `@2x` are respected by config and should be used for relevant tests
+4. Implement proper props and emits definitions
+5. Utilize Vue 3's Teleport component when needed
+6. Use Suspense for async components
+7. Implement proper error handling
+8. Follow Vue 3 style guide and naming conventions
+9. Use Vite for fast development and building
+10. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
+11. Avoid new usage of PrimeVue components
+12. Write tests for all changes, especially bug fixes to catch future regressions
+13. Write code that is expressive and self-documenting to the furthest degree possible. This reduces the need for code comments which can get out of sync with the code itself. Try to avoid comments unless absolutely necessary
+14. Whenever a new piece of code is written, the author should ask themselves 'is there a simpler way to introduce the same functionality?'. If the answer is yes, the simpler course should be chosen
+15. Refactoring should be used to make complex code simpler
 
 ## External Resources
 
 - Vue: <https://vuejs.org/api/>
 - Tailwind: <https://tailwindcss.com/docs/styling-with-utility-classes>
-- VueUse: <https://vueuse.org/functions.html>
 - shadcn/vue: <https://www.shadcn-vue.com/>
 - Reka UI: <https://reka-ui.com/>
 - PrimeVue: <https://primevue.org>
 - ComfyUI: <https://docs.comfy.org>
 - Electron: <https://www.electronjs.org/docs/latest/>
 - Wiki: <https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview>
-- Nx: <https://nx.dev/docs/reference/nx-commands>
-- [Practical Test Pyramid](https://martinfowler.com/articles/practical-test-pyramid.html)
 
 ## Project Philosophy
 

CODEOWNERS

@@ -25,9 +25,6 @@
 # Link rendering
 /src/renderer/core/canvas/links/                  @benceruleanlu
 
-# Partner Nodes
-/src/composables/node/useNodePricing.ts           @jojodecayz @bigcat88
-
 # Node help system
 /src/utils/nodeHelpUtil.ts                        @benceruleanlu
 /src/stores/workspace/nodeHelpStore.ts            @benceruleanlu

apps/desktop-ui/package.json

@@ -87,8 +87,6 @@
     }
   },
   "scripts": {
-    "lint": "nx run @comfyorg/desktop-ui:lint",
-    "typecheck": "nx run @comfyorg/desktop-ui:typecheck",
     "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build -o dist/storybook"
   },

apps/desktop-ui/src/components/install/InstallFooter.vue

@@ -40,8 +40,7 @@
 <script setup lang="ts">
 import type { PassThrough } from '@primevue/core'
 import Button from 'primevue/button'
-import Step from 'primevue/step'
-import type { StepPassThroughOptions } from 'primevue/step'
+import Step, { type StepPassThroughOptions } from 'primevue/step'
 import StepList from 'primevue/steplist'
 
 defineProps<{
@@ -51,6 +50,8 @@ defineProps<{
   canProceed: boolean
   /** Whether the location step should be disabled */
   disableLocationStep: boolean
+  /** Whether the migration step should be disabled */
+  disableMigrationStep: boolean
   /** Whether the settings step should be disabled */
   disableSettingsStep: boolean
 }>()

apps/desktop-ui/src/i18n.ts

@@ -1,13 +1,13 @@
 // Import only English locale eagerly as the default/fallback
 // ESLint cannot statically resolve dynamic imports with path aliases (@frontend-locales/*),
 // but these are properly configured in tsconfig.json and resolved by Vite at build time.
-
+// eslint-disable-next-line import-x/no-unresolved
 import enCommands from '@frontend-locales/en/commands.json' with { type: 'json' }
-
+// eslint-disable-next-line import-x/no-unresolved
 import en from '@frontend-locales/en/main.json' with { type: 'json' }
-
+// eslint-disable-next-line import-x/no-unresolved
 import enNodes from '@frontend-locales/en/nodeDefs.json' with { type: 'json' }
-
+// eslint-disable-next-line import-x/no-unresolved
 import enSettings from '@frontend-locales/en/settings.json' with { type: 'json' }
 import { createI18n } from 'vue-i18n'
 
@@ -27,7 +27,7 @@ function buildLocale<
 
 // Locale loader map - dynamically import locales only when needed
 // ESLint cannot statically resolve these dynamic imports, but they are valid at build time
-
+/* eslint-disable import-x/no-unresolved */
 const localeLoaders: Record<
   string,
   () => Promise<{ default: Record<string, unknown> }>
@@ -155,14 +155,12 @@ export async function loadLocale(locale: string): Promise<void> {
 }
 
 // Only include English in the initial bundle
-const enMessages = buildLocale(en, enNodes, enCommands, enSettings)
+const messages = {
+  en: buildLocale(en, enNodes, enCommands, enSettings)
+}
 
 // Type for locale messages - inferred from the English locale structure
-type LocaleMessages = typeof enMessages
-
-const messages: Record<string, LocaleMessages> = {
-  en: enMessages
-}
+type LocaleMessages = typeof messages.en
 
 export const i18n = createI18n({
   // Must set `false`, as Vue I18n Legacy API is for Vue 2

apps/desktop-ui/src/utils/refUtil.ts

@@ -1,6 +1,5 @@
 import { useTimeout } from '@vueuse/core'
-import { computed, ref, watch } from 'vue'
-import type { Ref } from 'vue'
+import { type Ref, computed, ref, watch } from 'vue'
 
 /**
  * Vue boolean ref (writable computed) with one difference: when set to `true` it stays that way for at least {@link minDuration}.

apps/desktop-ui/src/views/DesktopDialogView.vue

@@ -29,8 +29,7 @@ import { normalizeI18nKey } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Button from 'primevue/button'
 import { useRoute } from 'vue-router'
 
-import { getDialog } from '@/constants/desktopDialogs'
-import type { DialogAction } from '@/constants/desktopDialogs'
+import { type DialogAction, getDialog } from '@/constants/desktopDialogs'
 import { t } from '@/i18n'
 import { electronAPI } from '@/utils/envUtil'
 

apps/desktop-ui/src/views/NotSupportedView.vue

@@ -5,7 +5,7 @@
       <img
         class="sad-girl"
         src="/assets/images/sad_girl.png"
-        :alt="$t('notSupported.illustrationAlt')"
+        alt="Sad girl illustration"
       />
 
       <div class="no-drag sad-text flex items-center">

browser_tests/assets/subgraphs/subgraph-compressed-target-slot.json

@@ -1,150 +0,0 @@
-{
-  "id": "e0cb1d7e-5437-4911-b574-c9603dfbeaee",
-  "revision": 0,
-  "last_node_id": 2,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 2,
-      "type": "8bfe4227-f272-49e1-a892-0a972a86867c",
-      "pos": [
-        -317,
-        -336
-      ],
-      "size": [
-        210,
-        58
-      ],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [],
-      "properties": {
-        "proxyWidgets": [
-          [
-            "-1",
-            "batch_size"
-          ]
-        ]
-      },
-      "widgets_values": [
-        1
-      ]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "definitions": {
-    "subgraphs": [
-      {
-        "id": "8bfe4227-f272-49e1-a892-0a972a86867c",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 1,
-          "lastLinkId": 1,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "New Subgraph",
-        "inputNode": {
-          "id": -10,
-          "bounding": [
-            -562,
-            -358,
-            120,
-            60
-          ]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [
-            -52,
-            -358,
-            120,
-            40
-          ]
-        },
-        "inputs": [
-          {
-            "id": "b4a8bc2a-8e9f-41aa-938d-c567a11d2c00",
-            "name": "batch_size",
-            "type": "INT",
-            "linkIds": [
-              1
-            ],
-            "pos": [
-              -462,
-              -338
-            ]
-          }
-        ],
-        "outputs": [],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 1,
-            "type": "EmptyLatentImage",
-            "pos": [
-              -382,
-              -376
-            ],
-            "size": [
-              270,
-              106
-            ],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "batch_size",
-                "name": "batch_size",
-                "type": "INT",
-                "widget": {
-                  "name": "batch_size"
-                },
-                "link": 1
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "LATENT",
-                "name": "LATENT",
-                "type": "LATENT",
-                "links": null
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "EmptyLatentImage"
-            },
-            "widgets_values": [
-              512,
-              512,
-              1
-            ]
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 1,
-            "origin_id": -10,
-            "origin_slot": 0,
-            "target_id": 1,
-            "target_slot": 0,
-            "type": "INT"
-          }
-        ],
-        "extra": {}
-      }
-    ]
-  },
-  "config": {},
-  "extra": {
-    "frontendVersion": "1.35.1"
-  },
-  "version": 0.4
-}

browser_tests/fixtures/ComfyPage.ts

@@ -126,20 +126,6 @@ class ConfirmDialog {
     const loc = this[locator]
     await expect(loc).toBeVisible()
     await loc.click()
-
-    // Wait for the dialog mask to disappear after confirming
-    const mask = this.page.locator('.p-dialog-mask')
-    const count = await mask.count()
-    if (count > 0) {
-      await mask.first().waitFor({ state: 'hidden', timeout: 3000 })
-    }
-
-    // Wait for workflow service to finish if it's busy
-    await this.page.waitForFunction(
-      () => window['app']?.extensionManager?.workflow?.isBusy === false,
-      undefined,
-      { timeout: 3000 }
-    )
   }
 }
 
@@ -256,9 +242,6 @@ export class ComfyPage {
     await this.page.evaluate(async () => {
       await window['app'].extensionManager.workflow.syncWorkflows()
     })
-
-    // Wait for Vue to re-render the workflow list
-    await this.nextFrame()
   }
 
   async setupUser(username: string) {
@@ -341,6 +324,19 @@ export class ComfyPage {
     }
     await this.goto()
 
+    // Unify font for consistent screenshots.
+    await this.page.addStyleTag({
+      url: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'
+    })
+    await this.page.addStyleTag({
+      url: 'https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'
+    })
+    await this.page.addStyleTag({
+      content: `
+      * {
+        font-family: 'Roboto Mono', 'Noto Color Emoji';
+      }`
+    })
     await this.page.waitForFunction(() => document.fonts.ready)
     await this.page.waitForFunction(
       () =>
@@ -585,15 +581,9 @@ export class ComfyPage {
       fileName?: string
       url?: string
       dropPosition?: Position
-      waitForUpload?: boolean
     } = {}
   ) {
-    const {
-      dropPosition = { x: 100, y: 100 },
-      fileName,
-      url,
-      waitForUpload = false
-    } = options
+    const { dropPosition = { x: 100, y: 100 }, fileName, url } = options
 
     if (!fileName && !url)
       throw new Error('Must provide either fileName or url')
@@ -630,14 +620,6 @@ export class ComfyPage {
     // Dropping a URL (e.g., dropping image across browser tabs in Firefox)
     if (url) evaluateParams.url = url
 
-    // Set up response waiter for file uploads before triggering the drop
-    const uploadResponsePromise = waitForUpload
-      ? this.page.waitForResponse(
-          (resp) => resp.url().includes('/upload/') && resp.status() === 200,
-          { timeout: 10000 }
-        )
-      : null
-
     // Execute the drag and drop in the browser
     await this.page.evaluate(async (params) => {
       const dataTransfer = new DataTransfer()
@@ -704,17 +686,12 @@ export class ComfyPage {
       }
     }, evaluateParams)
 
-    // Wait for file upload to complete
-    if (uploadResponsePromise) {
-      await uploadResponsePromise
-    }
-
     await this.nextFrame()
   }
 
   async dragAndDropFile(
     fileName: string,
-    options: { dropPosition?: Position; waitForUpload?: boolean } = {}
+    options: { dropPosition?: Position } = {}
   ) {
     return this.dragAndDropExternalResource({ fileName, ...options })
   }
@@ -1295,6 +1272,9 @@ export class ComfyPage {
         }, 'image/png')
       })
     }, filename)
+
+    // Wait a bit for the download to process
+    await this.page.waitForTimeout(500)
   }
 
   /**

browser_tests/fixtures/VueNodeHelpers.ts

@@ -160,7 +160,7 @@ export class VueNodeHelpers {
     return {
       input: widget.locator('input'),
       incrementButton: widget.locator('button').first(),
-      decrementButton: widget.locator('button').nth(1)
+      decrementButton: widget.locator('button').last()
     }
   }
 }

browser_tests/fixtures/components/ComfyNodeSearchBox.ts

@@ -60,6 +60,9 @@ export class ComfyNodeSearchBox {
     await this.input.waitFor({ state: 'visible' })
     await this.input.fill(nodeName)
     await this.dropdown.waitFor({ state: 'visible' })
+    // Wait for some time for the auto complete list to update.
+    // The auto complete list is debounced and may take some time to update.
+    await this.page.waitForTimeout(500)
     await this.dropdown
       .locator('li')
       .nth(options?.suggestionIndex || 0)

browser_tests/fixtures/components/SidebarTab.ts

@@ -116,6 +116,7 @@ export class WorkflowsSidebarTab extends SidebarTab {
   async switchToWorkflow(workflowName: string) {
     const workflowLocator = this.getOpenedItem(workflowName)
     await workflowLocator.click()
+    await this.page.waitForTimeout(300)
   }
 
   getOpenedItem(name: string) {
@@ -137,13 +138,7 @@ export class WorkflowsSidebarTab extends SidebarTab {
       .click()
     await this.page.keyboard.type(newName)
     await this.page.keyboard.press('Enter')
-
-    // Wait for workflow service to finish renaming
-    await this.page.waitForFunction(
-      () => !window['app']?.extensionManager?.workflow?.isBusy,
-      undefined,
-      { timeout: 3000 }
-    )
+    await this.page.waitForTimeout(300)
   }
 
   async insertWorkflow(locator: Locator) {

browser_tests/fixtures/components/Topbar.ts

@@ -92,26 +92,10 @@ export class Topbar {
     )
     // Wait for the dialog to close.
     await this.getSaveDialog().waitFor({ state: 'hidden', timeout: 500 })
-
-    // Check if a confirmation dialog appeared (e.g., "Overwrite existing file?")
-    // If so, return early to let the test handle the confirmation
-    const confirmationDialog = this.page.locator(
-      '.p-dialog:has-text("Overwrite")'
-    )
-    if (await confirmationDialog.isVisible()) {
-      return
-    }
   }
 
   async openTopbarMenu() {
-    // If menu is already open, close it first to reset state
-    const isAlreadyOpen = await this.menuLocator.isVisible()
-    if (isAlreadyOpen) {
-      // Click outside the menu to close it properly
-      await this.page.locator('body').click({ position: { x: 500, y: 300 } })
-      await this.menuLocator.waitFor({ state: 'hidden', timeout: 1000 })
-    }
-
+    await this.page.waitForTimeout(1000)
     await this.menuTrigger.click()
     await this.menuLocator.waitFor({ state: 'visible' })
     return this.menuLocator
@@ -179,36 +163,15 @@ export class Topbar {
 
     await topLevelMenu.hover()
 
-    // Hover over top-level menu with retry logic for flaky submenu appearance
-    const submenu = this.getVisibleSubmenu()
-    try {
-      await submenu.waitFor({ state: 'visible', timeout: 1000 })
-    } catch {
-      // Click outside to reset, then reopen menu
-      await this.page.locator('body').click({ position: { x: 500, y: 300 } })
-      await this.menuLocator.waitFor({ state: 'hidden', timeout: 1000 })
-      await this.menuTrigger.click()
-      await this.menuLocator.waitFor({ state: 'visible' })
-      // Re-hover on top-level menu to trigger submenu
-      await topLevelMenu.hover()
-      await submenu.waitFor({ state: 'visible', timeout: 1000 })
-    }
-
     let currentMenu = topLevelMenu
     for (let i = 1; i < path.length; i++) {
       const commandName = path[i]
-      const menuItem = submenu
-        .locator(`.p-tieredmenu-item:has-text("${commandName}")`)
+      const menuItem = currentMenu
+        .locator(
+          `.p-tieredmenu-submenu .p-tieredmenu-item:has-text("${commandName}")`
+        )
         .first()
       await menuItem.waitFor({ state: 'visible' })
-
-      // For the last item, click it
-      if (i === path.length - 1) {
-        await menuItem.click()
-        return
-      }
-
-      // Otherwise, hover to open nested submenu
       await menuItem.hover()
       currentMenu = menuItem
     }

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -462,6 +462,7 @@ export class NodeReference {
   async convertToSubgraph() {
     await this.clickContextMenuOption('Convert to Subgraph')
     await this.comfyPage.nextFrame()
+    await this.comfyPage.page.waitForTimeout(256)
     const nodes = await this.comfyPage.getNodeRefsByTitle('New Subgraph')
     if (nodes.length !== 1) {
       throw new Error(
@@ -510,6 +511,7 @@ export class NodeReference {
         // Double-click to enter subgraph
         await this.comfyPage.canvas.dblclick({ position, force: true })
         await this.comfyPage.nextFrame()
+        await this.comfyPage.page.waitForTimeout(500)
 
         // Check if we successfully entered the subgraph
         isInSubgraph = await this.comfyPage.page.evaluate(() => {

browser_tests/helpers/templates.ts

@@ -1,5 +1,4 @@
 import type { Locator, Page } from '@playwright/test'
-import { expect } from '@playwright/test'
 import path from 'path'
 
 import type {
@@ -9,20 +8,9 @@ import type {
 
 export class ComfyTemplates {
   readonly content: Locator
-  readonly allTemplateCards: Locator
 
   constructor(readonly page: Page) {
     this.content = page.getByTestId('template-workflows-content')
-    this.allTemplateCards = page.locator('[data-testid^="template-workflow-"]')
-  }
-
-  async waitForMinimumCardCount(count: number) {
-    return await expect(async () => {
-      const cardCount = await this.allTemplateCards.count()
-      expect(cardCount).toBeGreaterThanOrEqual(count)
-    }).toPass({
-      timeout: 1_000
-    })
   }
 
   async loadTemplate(id: string) {

browser_tests/tests/backgroundImageUpload.spec.ts

@@ -75,9 +75,13 @@ test.describe('Background Image Upload', () => {
     // Upload the test image
     await fileChooser.setFiles(comfyPage.assetPath('image32x32.webp'))
 
+    // Wait for upload to complete and verify the setting was updated
+    await comfyPage.page.waitForTimeout(500) // Give time for file reading
+
     // Verify the URL input now has an API URL
     const urlInput = backgroundImageSetting.locator('input[type="text"]')
-    await expect(urlInput).toHaveValue(/^\/api\/view\?.*subfolder=backgrounds/)
+    const inputValue = await urlInput.inputValue()
+    expect(inputValue).toMatch(/^\/api\/view\?.*subfolder=backgrounds/)
 
     // Verify clear button is now enabled
     const clearButton = backgroundImageSetting.locator('button:has(.pi-trash)')
@@ -187,11 +191,14 @@ test.describe('Background Image Upload', () => {
     )
     await uploadButton.hover()
 
+    // Wait for tooltip to appear and verify it exists
+    await comfyPage.page.waitForTimeout(700) // Tooltip delay
     const uploadTooltip = comfyPage.page.locator('.p-tooltip:visible')
     await expect(uploadTooltip).toBeVisible()
 
     // Move away to hide tooltip
     await comfyPage.page.locator('body').hover()
+    await comfyPage.page.waitForTimeout(100)
 
     // Set a background to enable clear button
     const urlInput = backgroundImageSetting.locator('input[type="text"]')
@@ -202,6 +209,8 @@ test.describe('Background Image Upload', () => {
     const clearButton = backgroundImageSetting.locator('button:has(.pi-trash)')
     await clearButton.hover()
 
+    // Wait for tooltip to appear and verify it exists
+    await comfyPage.page.waitForTimeout(700) // Tooltip delay
     const clearTooltip = comfyPage.page.locator('.p-tooltip:visible')
     await expect(clearTooltip).toBeVisible()
   })

browser_tests/tests/colorPalette.spec.ts

@@ -203,6 +203,7 @@ test.describe('Node Color Adjustments', () => {
     comfyPage
   }) => {
     await comfyPage.setSetting('Comfy.Node.Opacity', 0.5)
+    await comfyPage.page.waitForTimeout(128)
 
     // Drag mouse to force canvas to redraw
     await comfyPage.page.mouse.move(0, 0)
@@ -210,6 +211,7 @@ test.describe('Node Color Adjustments', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('node-opacity-0.5.png')
 
     await comfyPage.setSetting('Comfy.Node.Opacity', 1.0)
+    await comfyPage.page.waitForTimeout(128)
 
     await comfyPage.page.mouse.move(8, 8)
     await expect(comfyPage.canvas).toHaveScreenshot('node-opacity-1.png')
@@ -233,6 +235,7 @@ test.describe('Node Color Adjustments', () => {
     await comfyPage.setSetting('Comfy.Node.Opacity', 0.5)
     await comfyPage.setSetting('Comfy.ColorPalette', 'light')
     const saveWorkflowInterval = 1000
+    await comfyPage.page.waitForTimeout(saveWorkflowInterval)
     const workflow = await comfyPage.page.evaluate(() => {
       return localStorage.getItem('workflow')
     })

browser_tests/tests/dialog.spec.ts

@@ -43,6 +43,7 @@ test('Does not report warning on undo/redo', async ({ comfyPage }) => {
 
   // Wait for any async operations to complete after dialog closes
   await comfyPage.nextFrame()
+  await comfyPage.page.waitForTimeout(100)
 
   // Make a change to the graph
   await comfyPage.doubleClickCanvas()

browser_tests/tests/execution.spec.ts

@@ -36,10 +36,13 @@ test.describe('Execute to selected output nodes', () => {
     await output1.click('title')
 
     await comfyPage.executeCommand('Comfy.QueueSelectedOutputNodes')
-    await expect(async () => {
-      expect(await (await input.getWidget(0)).getValue()).toBe('foo')
-      expect(await (await output1.getWidget(0)).getValue()).toBe('foo')
-      expect(await (await output2.getWidget(0)).getValue()).toBe('')
-    }).toPass({ timeout: 2_000 })
+    // @note: Wait for the execution to finish. We might want to move to a more
+    // reliable way to wait for the execution to finish. Workflow in this test
+    // is simple enough that this is fine for now.
+    await comfyPage.page.waitForTimeout(200)
+
+    expect(await (await input.getWidget(0)).getValue()).toBe('foo')
+    expect(await (await output1.getWidget(0)).getValue()).toBe('foo')
+    expect(await (await output2.getWidget(0)).getValue()).toBe('')
   })
 })

browser_tests/tests/featureFlags.spec.ts

@@ -94,6 +94,9 @@ test.describe('Feature Flags', () => {
   test('Server feature flags are received and accessible', async ({
     comfyPage
   }) => {
+    // Wait for connection to establish
+    await comfyPage.page.waitForTimeout(1000)
+
     // Get the actual server feature flags from the backend
     const serverFlags = await comfyPage.page.evaluate(() => {
       return window['app'].api.serverFeatureFlags
@@ -113,6 +116,9 @@ test.describe('Feature Flags', () => {
   test('serverSupportsFeature method works with real backend flags', async ({
     comfyPage
   }) => {
+    // Wait for connection
+    await comfyPage.page.waitForTimeout(1000)
+
     // Test serverSupportsFeature with real backend flags
     const supportsPreviewMetadata = await comfyPage.page.evaluate(() => {
       return window['app'].api.serverSupportsFeature(
@@ -164,6 +170,9 @@ test.describe('Feature Flags', () => {
   test('getServerFeature method works with real backend data', async ({
     comfyPage
   }) => {
+    // Wait for connection
+    await comfyPage.page.waitForTimeout(1000)
+
     // Test getServerFeature method
     const previewMetadataValue = await comfyPage.page.evaluate(() => {
       return window['app'].api.getServerFeature('supports_preview_metadata')
@@ -190,6 +199,9 @@ test.describe('Feature Flags', () => {
   test('getServerFeatures returns all backend feature flags', async ({
     comfyPage
   }) => {
+    // Wait for connection
+    await comfyPage.page.waitForTimeout(1000)
+
     // Test getServerFeatures returns all flags
     const allFeatures = await comfyPage.page.evaluate(() => {
       return window['app'].api.getServerFeatures()
@@ -236,6 +248,9 @@ test.describe('Feature Flags', () => {
   test('Server features are immutable when accessed via getServerFeatures', async ({
     comfyPage
   }) => {
+    // Wait for connection to establish
+    await comfyPage.page.waitForTimeout(1000)
+
     const immutabilityTest = await comfyPage.page.evaluate(() => {
       // Get a copy of server features
       const features1 = window['app'].api.getServerFeatures()

browser_tests/tests/groupNode.spec.ts

@@ -104,6 +104,8 @@ test.describe('Group Node', () => {
     await comfyPage.setSetting('Comfy.EnableTooltips', true)
     await comfyPage.convertAllNodesToGroupNode('Group Node')
     await comfyPage.page.mouse.move(47, 173)
+    const tooltipTimeout = 500
+    await comfyPage.page.waitForTimeout(tooltipTimeout + 16)
     await expect(comfyPage.page.locator('.node-tooltip')).toBeVisible()
   })
 
@@ -318,12 +320,14 @@ test.describe('Group Node', () => {
     test('Convert to group node, no selection', async ({ comfyPage }) => {
       expect(await comfyPage.getVisibleToastCount()).toBe(0)
       await comfyPage.page.keyboard.press('Alt+g')
+      await comfyPage.page.waitForTimeout(300)
       expect(await comfyPage.getVisibleToastCount()).toBe(1)
     })
     test('Convert to group node, selected 1 node', async ({ comfyPage }) => {
       expect(await comfyPage.getVisibleToastCount()).toBe(0)
       await comfyPage.clickTextEncodeNode1()
       await comfyPage.page.keyboard.press('Alt+g')
+      await comfyPage.page.waitForTimeout(300)
       expect(await comfyPage.getVisibleToastCount()).toBe(1)
     })
   })

browser_tests/tests/interaction.spec.ts

@@ -306,16 +306,16 @@ test.describe('Node Interaction', () => {
     await comfyPage.canvas.click({
       position: numberWidgetPos
     })
-    const legacyPrompt = comfyPage.page.locator('.graphdialog')
-    await expect(legacyPrompt).toBeVisible()
-    await comfyPage.delay(300)
+    await expect(comfyPage.canvas).toHaveScreenshot('prompt-dialog-opened.png')
+    // Wait for 1s so that it does not trigger the search box by double click.
+    await comfyPage.page.waitForTimeout(1000)
     await comfyPage.canvas.click({
       position: {
         x: 10,
         y: 10
       }
     })
-    await expect(legacyPrompt).toBeHidden()
+    await expect(comfyPage.canvas).toHaveScreenshot('prompt-dialog-closed.png')
   })
 
   test('Can close prompt dialog with canvas click (text widget)', async ({
@@ -329,16 +329,19 @@ test.describe('Node Interaction', () => {
     await comfyPage.canvas.click({
       position: textWidgetPos
     })
-    const legacyPrompt = comfyPage.page.locator('.graphdialog')
-    await expect(legacyPrompt).toBeVisible()
-    await comfyPage.delay(300)
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'prompt-dialog-opened-text.png'
+    )
+    await comfyPage.page.waitForTimeout(1000)
     await comfyPage.canvas.click({
       position: {
         x: 10,
         y: 10
       }
     })
-    await expect(legacyPrompt).toBeHidden()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'prompt-dialog-closed-text.png'
+    )
   })
 
   test('Can double click node title to edit', async ({ comfyPage }) => {
@@ -660,6 +663,9 @@ test.describe('Load workflow', () => {
     await comfyPage.loadWorkflow('nodes/single_ksampler')
     const node = (await comfyPage.getFirstNodeRef())!
     await node.click('collapse')
+    // Wait 300ms between 2 clicks so that it is not treated as a double click
+    // by litegraph.
+    await comfyPage.page.waitForTimeout(300)
     await comfyPage.clickEmptySpace()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'single_ksampler_modified.png'