1.35.2 (#7365)

Patch version increment to 1.35.2

**Base branch:** `main`

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7365-1-35-2-2c66d73d365081198874ca2695162232)
by [Unito](https://www.unito.io)

---------

Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>

.cursorrules

@@ -1,61 +0,0 @@
-# Vue 3 Composition API Project Rules
-
-## Vue 3 Composition API Best Practices
-- Use setup() function for component logic
-- Utilize ref and reactive for reactive state
-- Implement computed properties with computed()
-- Use watch and watchEffect for side effects
-- Implement lifecycle hooks with onMounted, onUpdated, etc.
-- Utilize provide/inject for dependency injection
-- Use vue 3.5 style of default prop declaration. Example:
-
-```typescript
-const { nodes, showTotal = true } = defineProps<{
-  nodes: ApiNodeCost[]
-  showTotal?: boolean
-}>()
-```
-
-- Organize vue component in <template> <script> <style> order
-
-## Project Structure
-```
-src/
-  components/
-  constants/
-  composables/
-  views/
-  stores/
-  services/
-  App.vue
-  main.ts
-```
-
-## Styling Guidelines
-- Use Tailwind CSS for styling
-- Implement responsive design with Tailwind CSS
-
-## PrimeVue Component Guidelines
-DO NOT use deprecated PrimeVue components. Use these replacements instead:
-- Dropdown → Use Select (import from 'primevue/select')
-- OverlayPanel → Use Popover (import from 'primevue/popover')
-- Calendar → Use DatePicker (import from 'primevue/datepicker')
-- InputSwitch → Use ToggleSwitch (import from 'primevue/toggleswitch')
-- Sidebar → Use Drawer (import from 'primevue/drawer')
-- Chips → Use AutoComplete with multiple enabled and typeahead disabled
-- TabMenu → Use Tabs without panels
-- Steps → Use Stepper without panels
-- InlineMessage → Use Message component
-
-## Development Guidelines
-1. Leverage VueUse functions for performance-enhancing styles
-2. Use es-toolkit for utility functions
-3. Use TypeScript for type safety
-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. Never use deprecated PrimeVue components listed above

.env_example

@@ -42,3 +42,7 @@ 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-tests-e2e.yaml

@@ -124,12 +124,19 @@ jobs:
       - name: Run Playwright tests (${{ matrix.browser }})
         id: playwright
         run: |
-          # Run tests with both HTML and JSON reporters
+          # Run tests with blob reporter first
+          pnpm exec playwright test --project=${{ matrix.browser }} --reporter=blob
+        env:
+          PLAYWRIGHT_BLOB_OUTPUT_DIR: ./blob-report
+
+      - name: Generate HTML and JSON reports
+        if: always()
+        run: |
+          # Generate HTML report from blob
+          pnpm exec playwright merge-reports --reporter=html ./blob-report
+          # Generate JSON report separately with explicit output path
           PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          pnpm exec playwright test --project=${{ matrix.browser }} \
-            --reporter=list \
-            --reporter=html \
-            --reporter=json
+          pnpm exec playwright merge-reports --reporter=json ./blob-report
 
       - name: Upload Playwright report
         uses: actions/upload-artifact@v4

.github/workflows/pr-backport.yaml

@@ -16,6 +16,10 @@ 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/release-weekly-comfyui.yaml

@@ -0,0 +1,292 @@
+# Automated weekly workflow to bump ComfyUI frontend RC releases
+name: "Release: Weekly ComfyUI"
+
+on:
+  # Schedule for Monday at 12:00 PM PST (20:00 UTC)
+  schedule:
+    - cron: '0 20 * * 1'
+
+  # Allow manual triggering
+  workflow_dispatch:
+    inputs:
+      comfyui_fork:
+        description: 'ComfyUI fork to use for PR (e.g., Comfy-Org/ComfyUI)'
+        required: false
+        default: 'Comfy-Org/ComfyUI'
+        type: string
+
+jobs:
+  resolve-version:
+    runs-on: ubuntu-latest
+    outputs:
+      current_version: ${{ steps.resolve.outputs.current_version }}
+      target_version: ${{ steps.resolve.outputs.target_version }}
+      target_minor: ${{ steps.resolve.outputs.target_minor }}
+      target_branch: ${{ steps.resolve.outputs.target_branch }}
+      needs_release: ${{ steps.resolve.outputs.needs_release }}
+      diff_url: ${{ steps.resolve.outputs.diff_url }}
+      latest_patch_tag: ${{ steps.resolve.outputs.latest_patch_tag }}
+
+    steps:
+      - name: Checkout ComfyUI_frontend
+        uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+          path: frontend
+
+      - name: Checkout ComfyUI (sparse)
+        uses: actions/checkout@v5
+        with:
+          repository: comfyanonymous/ComfyUI
+          sparse-checkout: |
+            requirements.txt
+          path: comfyui
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Install dependencies
+        working-directory: frontend
+        run: pnpm install --frozen-lockfile
+
+      - name: Resolve release information
+        id: resolve
+        working-directory: frontend
+        run: |
+          set -euo pipefail
+
+          # Run the resolver script
+          if ! RESULT=$(pnpm exec tsx scripts/cicd/resolve-comfyui-release.ts ../comfyui .); then
+            echo "Failed to resolve release information"
+            exit 1
+          fi
+
+          echo "Resolver output:"
+          echo "$RESULT"
+
+          # Validate JSON output
+          if ! echo "$RESULT" | jq empty 2>/dev/null; then
+            echo "Invalid JSON output from resolver"
+            exit 1
+          fi
+
+          # Parse JSON output and set outputs
+          echo "current_version=$(echo "$RESULT" | jq -r '.current_version')" >> $GITHUB_OUTPUT
+          echo "target_version=$(echo "$RESULT" | jq -r '.target_version')" >> $GITHUB_OUTPUT
+          echo "target_minor=$(echo "$RESULT" | jq -r '.target_minor')" >> $GITHUB_OUTPUT
+          echo "target_branch=$(echo "$RESULT" | jq -r '.target_branch')" >> $GITHUB_OUTPUT
+          echo "needs_release=$(echo "$RESULT" | jq -r '.needs_release')" >> $GITHUB_OUTPUT
+          echo "diff_url=$(echo "$RESULT" | jq -r '.diff_url')" >> $GITHUB_OUTPUT
+          echo "latest_patch_tag=$(echo "$RESULT" | jq -r '.latest_patch_tag')" >> $GITHUB_OUTPUT
+
+      - name: Summary
+        run: |
+          echo "## Release Information" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "- Current version: ${{ steps.resolve.outputs.current_version }}" >> $GITHUB_STEP_SUMMARY
+          echo "- Target version: ${{ steps.resolve.outputs.target_version }}" >> $GITHUB_STEP_SUMMARY
+          echo "- Target branch: ${{ steps.resolve.outputs.target_branch }}" >> $GITHUB_STEP_SUMMARY
+          echo "- Needs release: ${{ steps.resolve.outputs.needs_release }}" >> $GITHUB_STEP_SUMMARY
+          echo "- Diff: [${{ steps.resolve.outputs.current_version }}...${{ steps.resolve.outputs.target_version }}](${{ steps.resolve.outputs.diff_url }})" >> $GITHUB_STEP_SUMMARY
+
+  trigger-release-if-needed:
+    needs: resolve-version
+    if: needs.resolve-version.outputs.needs_release == 'true'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Trigger release workflow
+        env:
+          GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
+        run: |
+          set -euo pipefail
+
+          echo "Triggering release workflow for branch ${{ needs.resolve-version.outputs.target_branch }}"
+
+          # Trigger the release-version-bump workflow
+          if ! gh workflow run release-version-bump.yaml \
+            --repo Comfy-Org/ComfyUI_frontend \
+            --ref main \
+            --field version_type=patch \
+            --field branch=${{ needs.resolve-version.outputs.target_branch }}; then
+            echo "Failed to trigger release workflow"
+            exit 1
+          fi
+
+          echo "Release workflow triggered successfully for ${{ needs.resolve-version.outputs.target_branch }}"
+
+      - name: Summary
+        run: |
+          echo "## Release Workflow Triggered" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "- Branch: ${{ needs.resolve-version.outputs.target_branch }}" >> $GITHUB_STEP_SUMMARY
+          echo "- Target version: ${{ needs.resolve-version.outputs.target_version }}" >> $GITHUB_STEP_SUMMARY
+          echo "- [View workflow runs](https://github.com/Comfy-Org/ComfyUI_frontend/actions/workflows/release-version-bump.yaml)" >> $GITHUB_STEP_SUMMARY
+
+  create-comfyui-pr:
+    needs: [resolve-version, trigger-release-if-needed]
+    if: always() && needs.resolve-version.result == 'success'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout ComfyUI fork
+        uses: actions/checkout@v5
+        with:
+          repository: ${{ inputs.comfyui_fork || 'Comfy-Org/ComfyUI' }}
+          token: ${{ secrets.PR_GH_TOKEN }}
+          path: comfyui
+
+      - name: Sync with upstream
+        working-directory: comfyui
+        run: |
+          set -euo pipefail
+
+          # Fetch latest upstream to base our branch on fresh code
+          # Note: This only affects the local checkout, NOT the fork's master branch
+          # We only push the automation branch, leaving the fork's master untouched
+          echo "Fetching upstream master..."
+          if ! git fetch https://github.com/comfyanonymous/ComfyUI.git master; then
+            echo "Failed to fetch upstream master"
+            exit 1
+          fi
+
+          echo "Checking out upstream master..."
+          if ! git checkout FETCH_HEAD; then
+            echo "Failed to checkout FETCH_HEAD"
+            exit 1
+          fi
+
+          echo "Successfully synced with upstream master"
+
+      - name: Update requirements.txt
+        working-directory: comfyui
+        run: |
+          set -euo pipefail
+
+          TARGET_VERSION="${{ needs.resolve-version.outputs.target_version }}"
+          echo "Updating comfyui-frontend-package to ${TARGET_VERSION}"
+
+          # Update the comfyui-frontend-package version (POSIX-compatible)
+          sed -i.bak "s/comfyui-frontend-package==[0-9.][0-9.]*/comfyui-frontend-package==${TARGET_VERSION}/" requirements.txt
+          rm requirements.txt.bak
+
+          # Verify the change was made
+          if ! grep -q "comfyui-frontend-package==${TARGET_VERSION}" requirements.txt; then
+            echo "Failed to update requirements.txt"
+            exit 1
+          fi
+
+          echo "Updated requirements.txt:"
+          grep comfyui-frontend-package requirements.txt
+
+      - name: Build PR description
+        id: pr-body
+        run: |
+          BODY=$(cat <<'EOF'
+          Bumps frontend to ${{ needs.resolve-version.outputs.target_version }}
+
+          Test quickly:
+
+          ```bash
+          python main.py --front-end-version Comfy-Org/ComfyUI_frontend@${{ needs.resolve-version.outputs.target_version }}
+          ```
+
+          - Diff: [v${{ needs.resolve-version.outputs.current_version }}...v${{ needs.resolve-version.outputs.target_version }}](${{ needs.resolve-version.outputs.diff_url }})
+          - PyPI: https://pypi.org/project/comfyui-frontend-package/${{ needs.resolve-version.outputs.target_version }}/
+          - npm: https://www.npmjs.com/package/@comfyorg/comfyui-frontend-types/v/${{ needs.resolve-version.outputs.target_version }}
+          EOF
+          )
+
+          # Add release PR note if release was triggered
+          if [ "${{ needs.resolve-version.outputs.needs_release }}" = "true" ]; then
+            RELEASE_NOTE="⚠️ **Release PR must be merged first** - check [release workflow runs](https://github.com/Comfy-Org/ComfyUI_frontend/actions/workflows/release-version-bump.yaml)"
+            BODY=$''"${RELEASE_NOTE}"$'\n\n'"${BODY}"
+          fi
+
+          # Save to file for later use
+          printf '%s\n' "$BODY" > pr-body.txt
+          cat pr-body.txt
+
+      - name: Create PR to ComfyUI
+        working-directory: comfyui
+        env:
+          GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
+          COMFYUI_FORK: ${{ inputs.comfyui_fork || 'Comfy-Org/ComfyUI' }}
+        run: |
+          set -euo pipefail
+
+          # Extract fork owner from repository name
+          FORK_OWNER=$(echo "$COMFYUI_FORK" | cut -d'/' -f1)
+
+          echo "Creating PR from ${COMFYUI_FORK} to comfyanonymous/ComfyUI"
+
+          # Configure git
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+          # Create/update branch (reuse same branch name each week)
+          BRANCH="automation/comfyui-frontend-bump"
+          git checkout -B "$BRANCH"
+          git add requirements.txt
+
+          if ! git diff --cached --quiet; then
+            git commit -m "Bump comfyui-frontend-package to ${{ needs.resolve-version.outputs.target_version }}"
+          else
+            echo "No changes to commit"
+            exit 0
+          fi
+
+          # Force push to fork (overwrites previous week's branch)
+          # Note: This intentionally destroys branch history to maintain a single PR
+          # Any review comments or manual commits will need to be re-applied
+          if ! git push -f origin "$BRANCH"; then
+            echo "Failed to push branch to fork"
+            exit 1
+          fi
+
+          # Create draft PR from fork to upstream
+          PR_BODY=$(cat ../pr-body.txt)
+
+          # Try to create PR, ignore error if it already exists
+          if ! gh pr create \
+            --repo comfyanonymous/ComfyUI \
+            --head "${FORK_OWNER}:${BRANCH}" \
+            --base master \
+            --title "Bump comfyui-frontend-package to ${{ needs.resolve-version.outputs.target_version }}" \
+            --body "$PR_BODY" \
+            --draft 2>&1; then
+
+            # Check if PR already exists
+            set +e
+            EXISTING_PR=$(gh pr list --repo comfyanonymous/ComfyUI --head "${FORK_OWNER}:${BRANCH}" --json number --jq '.[0].number' 2>&1)
+            PR_LIST_EXIT=$?
+            set -e
+
+            if [ $PR_LIST_EXIT -ne 0 ]; then
+              echo "Failed to check for existing PR: $EXISTING_PR"
+              exit 1
+            fi
+
+            if [ -n "$EXISTING_PR" ] && [ "$EXISTING_PR" != "null" ]; then
+              echo "PR already exists (#${EXISTING_PR}), updating branch will update the PR"
+            else
+              echo "Failed to create PR and no existing PR found"
+              exit 1
+            fi
+          fi
+
+      - name: Summary
+        run: |
+          echo "## ComfyUI PR Created" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "Draft PR created in comfyanonymous/ComfyUI" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "### PR Body:" >> $GITHUB_STEP_SUMMARY
+          cat pr-body.txt >> $GITHUB_STEP_SUMMARY

.i18nrc.cjs

@@ -9,7 +9,7 @@ module.exports = defineConfig({
   entry: 'src/locales/en',
   entryLocale: 'en',
   output: 'src/locales',
-  outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar', 'tr'],
+  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.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.

.oxlintrc.json

@@ -2,25 +2,98 @@
   "$schema": "./node_modules/oxlint/configuration_schema.json",
   "ignorePatterns": [
     ".i18nrc.cjs",
-    "components.d.ts",
-    "lint-staged.config.js",
-    "vitest.setup.ts",
+    ".nx/*",
     "**/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"
+    "src/types/vue-shim.d.ts",
+    "test-results/*",
+    "vitest.setup.ts"
+  ],
+  "plugins": [
+    "eslint",
+    "import",
+    "oxc",
+    "typescript",
+    "unicorn",
+    "vitest",
+    "vue"
   ],
   "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",
@@ -38,6 +111,19 @@
     "typescript/no-redundant-type-constituents": "off",
     "typescript/restrict-template-expressions": "off",
     "typescript/unbound-method": "off",
-    "typescript/no-floating-promises": "error"
-  }
+    "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"
+      }
+    }
+  ]
 }

.stylelintrc.json

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

AGENTS.md

@@ -1,38 +1,244 @@
 # Repository Guidelines
 
 ## Project Structure & Module Organization
-- Source: `src/` (Vue 3 + TypeScript). Key areas: `components/`, `views/`, `stores/` (Pinia), `composables/`, `services/`, `utils/`, `assets/`, `locales/`.
-- Routing/i18n/entry: `src/router.ts`, `src/i18n.ts`, `src/main.ts`.
-- Tests: unit/component in `tests-ui/` and `src/components/**/*.{test,spec}.ts`; E2E in `browser_tests/`.
-- Public assets: `public/`. Build output: `dist/`.
-- Config: `vite.config.mts`, `vitest.config.ts`, `playwright.config.ts`, `eslint.config.ts`, `.prettierrc`.
+
+- Source: `src/`
+  - Vue 3.5+
+  - TypeScript
+  - Tailwind 4
+  - Key areas:
+    - `components/`
+    - `views/`
+    - `stores/` (Pinia)
+    - `composables/`
+    - `services/`
+    - `utils/`
+    - `assets/`
+    - `locales/`
+- Routing: `src/router.ts`,
+- i18n: `src/i18n.ts`,
+- Entry Point: `src/main.ts`.
+- Tests:
+  - unit/component in `tests-ui/` and `src/**/*.test.ts`
+  - E2E (Playwright) in `browser_tests/**/*.spec.ts`
+- Public assets: `public/`
+- Build output: `dist/`
+- Configs
+  - `vite.config.mts`
+  - `vitest.config.ts`
+  - `playwright.config.ts`
+  - `eslint.config.ts`
+  - `.prettierrc`
+  - etc.
+
+## Monorepo Architecture
+
+The project uses **Nx** for build orchestration and task management
 
 ## Build, Test, and Development Commands
+
 - `pnpm dev`: Start Vite dev server.
-- `pnpm dev:electron`: Dev server with Electron API mocks.
-- `pnpm build`: Type-check then production build to `dist/`.
-- `pnpm preview`: Preview the production build locally.
-- `pnpm test:unit`: Run Vitest unit tests.
-- `pnpm test:browser`: Run Playwright E2E tests (`browser_tests/`).
-- `pnpm lint` / `pnpm lint:fix`: Lint (ESLint). `pnpm format` / `format:check`: Prettier.
-- `pnpm typecheck`: Vue TSC type checking.
+- `pnpm dev:electron`: Dev server with Electron API mocks
+- `pnpm build`: Type-check then production build to `dist/`
+- `pnpm preview`: Preview the production build locally
+- `pnpm test:unit`: Run Vitest unit tests
+- `pnpm test:browser`: Run Playwright E2E tests (`browser_tests/`)
+- `pnpm lint` / `pnpm lint:fix`: Lint (ESLint)
+- `pnpm format` / `pnpm format:check`: Prettier
+- `pnpm typecheck`: Vue TSC type checking
 
 ## Coding Style & Naming Conventions
-- Language: TypeScript, Vue SFCs (`.vue`). Indent 2 spaces; single quotes; no semicolons; width 80 (see `.prettierrc`).
-- Imports: sorted/grouped by plugin; run `pnpm format` before committing.
-- ESLint: Vue + TS rules; no floating promises; unused imports disallowed; i18n raw text restrictions in templates.
-- Naming: Vue components in PascalCase (e.g., `MenuHamburger.vue`); composables `useXyz.ts`; Pinia stores `*Store.ts`.
 
-## Testing Guidelines
-- Frameworks: Vitest (unit/component, happy-dom) and Playwright (E2E).
-- Test files: `**/*.{test,spec}.{ts,tsx,js}` under `tests-ui/`, `src/components/`, and `src/lib/litegraph/test/`.
-- Coverage: text/json/html reporters enabled; aim to cover critical logic and new features.
-- Playwright: place tests in `browser_tests/`; optional tags like `@mobile`, `@2x` are respected by config.
+- Language:
+  - TypeScript (exclusive, no new JavaScript)
+  - Vue 3 SFCs (`.vue`)
+    - Composition API only
+  - Tailwind 4 styling
+    - Avoid `<style>` blocks
+- Style: (see `.prettierrc`)
+  - Indent 2 spaces
+  - single quotes
+  - no trailing semicolons
+  - width 80
+- Imports:
+  - sorted/grouped by plugin
+  - run `pnpm format` before committing
+- ESLint:
+  - Vue + TS rules
+  - no floating promises
+  - unused imports disallowed
+  - i18n raw text restrictions in templates
+- Naming:
+  - Vue components in PascalCase (e.g., `MenuHamburger.vue`)
+  - composables `useXyz.ts`
+  - Pinia stores `*Store.ts`
+
 
 ## Commit & Pull Request Guidelines
-- Commits: Use `[skip ci]` for locale-only updates when appropriate.
-- PRs: Include clear description, linked issues (`- Fixes #123`), and screenshots/GIFs for UI changes.
-- Quality gates: `pnpm lint`, `pnpm typecheck`, and relevant tests must pass. Keep PRs focused and small.
+
+- PRs:
+  - Include clear description
+  - Reference linked issues (e.g. `- Fixes #123`)
+  - Keep it extremely concise and information-dense
+  - Don't use emojis or add excessive headers/sections
+  - Follow the PR description template in the `.github/` folder.
+- Quality gates:
+  - `pnpm lint`
+  - `pnpm typecheck`
+  - `pnpm knip`
+  - Relevant tests must pass
+- Never use `--no-verify` to bypass failing tests
+  - Identify the issue and present root cause analysis and possible solutions if you are unable to solve quickly yourself
+- Keep PRs focused and small
+  - If it looks like the current changes will have 300+ lines of non-test code, suggest ways it could be broken into multiple PRs
 
 ## Security & Configuration Tips
+
 - Secrets: Use `.env` (see `.env_example`); do not commit secrets.
+
+## Vue 3 Composition API Best Practices
+
+- Use `<script setup lang="ts">` for component logic
+- Utilize `ref` for reactive state
+- Implement computed properties with computed()
+- Use watch and watchEffect for side effects
+  - Avoid using a `ref` and a `watch` if a `computed` would work instead
+- Implement lifecycle hooks with onMounted, onUpdated, etc.
+- Utilize provide/inject for dependency injection
+  - Do not use dependency injection if a Store or a shared composable would be simpler
+- Use Vue 3.5 TypeScript style of default prop declaration
+  - Example:
+
+    ```typescript
+    const { nodes, showTotal = true } = defineProps<{
+    nodes: ApiNodeCost[]
+    showTotal?: boolean
+    }>()
+    ```
+
+  - 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
+  - Be judicious with addition of new refs or other state
+    - If it's possible to accomplish the design goals with just a prop, don't add a `ref`
+    - If it's possible to use the `ref` or prop directly, don't add a `computed`
+    - If it's possible to use a `computed` to name and reuse a derived value, don't use a `watch`
+
+## Development Guidelines
+
+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
+
+## 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
+
+- Follow good software engineering principles
+  - YAGNI
+  - AHA
+  - DRY
+  - SOLID
+- Clean, stable public APIs
+- Domain-driven design
+- Thousands of users and extensions
+- Prioritize clean interfaces that restrict extension access
+
+## Repository Navigation
+
+- Check README files in key folders (tests-ui, browser_tests, composables, etc.)
+- Prefer running single tests for performance
+- Use --help for unfamiliar CLI tools
+
+## GitHub Integration
+
+When referencing Comfy-Org repos:
+
+1. Check for local copy
+2. Use GitHub API for branches/PRs/metadata
+3. Curl GitHub website if needed
+
+## Common Pitfalls
+
+- NEVER use `any` type - use proper TypeScript types
+- NEVER use `as any` type assertions - fix the underlying type issue
+- NEVER use `--no-verify` flag when committing
+- NEVER delete or disable tests to make them pass
+- NEVER circumvent quality checks
+- NEVER use the `dark:` tailwind variant
+  - Instead use a semantic value from the `style.css` theme
+    - e.g. `bg-node-component-surface`
+- NEVER use `:class="[]"` to merge class names
+  - Always use `import { cn } from '@/utils/tailwindUtil'`
+    - e.g. `<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />`
+  - Use `cn()` inline in the template when feasible instead of creating a `computed` to hold the value

CLAUDE.md

@@ -1,44 +1,19 @@
-# ComfyUI Frontend Project Guidelines
+# Claude Code specific instructions
+
+@Agents.md
 
 ## Repository Setup
 
 For first-time setup, use the Claude command:
-```
+
+```sh
 /setup_repo
 ```
+
 This bootstraps the monorepo with dependencies, builds, tests, and dev server verification.
 
 **Prerequisites:** Node.js >= 24, Git repository, available ports (5173, 6006)
 
-## Quick Commands
-
-- `pnpm`: See all available commands
-- `pnpm dev`: Start development server (port 5173, via nx)
-- `pnpm typecheck`: Type checking
-- `pnpm build`: Build for production (via nx)
-- `pnpm lint`: Linting (via nx)
-- `pnpm oxlint`: Fast Rust-based linting with Oxc
-- `pnpm format`: Prettier formatting
-- `pnpm test:unit`: Run all unit tests
-- `pnpm test:browser`: Run E2E tests via Playwright
-- `pnpm test:unit -- tests-ui/tests/example.test.ts`: Run single test file
-- `pnpm storybook`: Start Storybook development server (port 6006)
-- `pnpm knip`: Detect unused code and dependencies
-
-## Monorepo Architecture
-
-The project now 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
-
 ## Development Workflow
 
 1. **First-time setup**: Run `/setup_repo` Claude command
@@ -50,87 +25,6 @@ Key Nx features:
 
 ## Git Conventions
 
-- Use [prefix] format: [feat], [bugfix], [docs]
+- Use `prefix:` format: `feat:`, `fix:`, `test:`
 - Add "Fixes #n" to PR descriptions
 - Never mention Claude/AI in commits
-
-## External Resources
-
-- PrimeVue docs: <https://primevue.org>
-- ComfyUI docs: <https://docs.comfy.org>
-- Electron: <https://www.electronjs.org/docs/latest/>
-- Wiki: <https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview>
-
-## Project Philosophy
-
-- Follow good software engineering principles
-  - YAGNI
-  - AHA
-  - DRY
-  - SOLID
-- Clean, stable public APIs
-- Domain-driven design
-- Thousands of users and extensions
-- Prioritize clean interfaces that restrict extension access
-
-## Repository Navigation
-
-- Check README files in key folders (tests-ui, browser_tests, composables, etc.)
-- Prefer running single tests for performance
-- Use --help for unfamiliar CLI tools
-
-## GitHub Integration
-
-When referencing Comfy-Org repos:
-
-1. Check for local copy
-2. Use GitHub API for branches/PRs/metadata
-3. Curl GitHub website if needed
-
-## Settings and Feature Flags Quick Reference
-
-### Settings Usage
-```typescript
-const settingStore = useSettingStore()
-const value = settingStore.get('Comfy.SomeSetting')     // Get setting
-await settingStore.set('Comfy.SomeSetting', newValue)   // Update setting
-```
-
-### Dynamic Defaults
-```typescript
-{
-  id: 'Comfy.Example.Setting',
-  defaultValue: () => window.innerWidth < 1024 ? 'small' : 'large'  // Runtime context
-}
-```
-
-### Version-Based Defaults
-```typescript
-{
-  id: 'Comfy.Example.Feature',
-  defaultValue: 'legacy',
-  defaultsByInstallVersion: { '1.25.0': 'enhanced' }  // Gradual rollout
-}
-```
-
-### Feature Flags
-```typescript
-if (api.serverSupportsFeature('feature_name')) {  // Check capability
-  // Use enhanced feature
-}
-const value = api.getServerFeature('config_name', defaultValue)  // Get config
-```
-
-**Documentation:**
-- Settings system: `docs/SETTINGS.md`
-- Feature flags system: `docs/FEATURE_FLAGS.md`
-
-## Common Pitfalls
-
-- NEVER use `any` type - use proper TypeScript types
-- NEVER use `as any` type assertions - fix the underlying type issue
-- NEVER use `--no-verify` flag when committing
-- NEVER delete or disable tests to make them pass
-- NEVER circumvent quality checks
-- NEVER use `dark:` or `dark-theme:` tailwind variants. Instead use a semantic value from the `style.css` theme, e.g. `bg-node-component-surface`
-- NEVER use `:class="[]"` to merge class names - always use `import { cn } from '@/utils/tailwindUtil'`, for example: `<div :class="cn('text-node-component-header-icon', hasError && 'text-danger')" />`

CODEOWNERS

@@ -25,6 +25,9 @@
 # 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
@@ -54,10 +57,11 @@
 
 # Translations
 /src/locales/                                     @Yorha4D @KarryCharon @shinshin86 @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs
+/src/locales/pt-BR/                               @JonatanAtila @Yorha4D @KarryCharon @shinshin86
 
 # LLM Instructions (blank on purpose)
 .claude/
 .cursor/
 .cursorrules
 **/AGENTS.md
-**/CLAUDE.md
+**/CLAUDE.md

apps/desktop-ui/package.json

@@ -87,6 +87,8 @@
     }
   },
   "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/common/LanguageSelector.vue

@@ -59,7 +59,8 @@ const LOCALES = [
   ['fr', 'Français'],
   ['es', 'Español'],
   ['ar', 'عربي'],
-  ['tr', 'Türkçe']
+  ['tr', 'Türkçe'],
+  ['pt-BR', 'Português (BR)']
 ] as const satisfies ReadonlyArray<[string, string]>
 
 type SupportedLocale = (typeof LOCALES)[number][0]

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

@@ -40,7 +40,8 @@
 <script setup lang="ts">
 import type { PassThrough } from '@primevue/core'
 import Button from 'primevue/button'
-import Step, { type StepPassThroughOptions } from 'primevue/step'
+import Step from 'primevue/step'
+import type { StepPassThroughOptions } from 'primevue/step'
 import StepList from 'primevue/steplist'
 
 defineProps<{

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> }>
@@ -40,7 +40,8 @@ const localeLoaders: Record<
   ru: () => import('@frontend-locales/ru/main.json'),
   tr: () => import('@frontend-locales/tr/main.json'),
   zh: () => import('@frontend-locales/zh/main.json'),
-  'zh-TW': () => import('@frontend-locales/zh-TW/main.json')
+  'zh-TW': () => import('@frontend-locales/zh-TW/main.json'),
+  'pt-BR': () => import('@frontend-locales/pt-BR/main.json')
 }
 
 const nodeDefsLoaders: Record<
@@ -55,7 +56,8 @@ const nodeDefsLoaders: Record<
   ru: () => import('@frontend-locales/ru/nodeDefs.json'),
   tr: () => import('@frontend-locales/tr/nodeDefs.json'),
   zh: () => import('@frontend-locales/zh/nodeDefs.json'),
-  'zh-TW': () => import('@frontend-locales/zh-TW/nodeDefs.json')
+  'zh-TW': () => import('@frontend-locales/zh-TW/nodeDefs.json'),
+  'pt-BR': () => import('@frontend-locales/pt-BR/nodeDefs.json')
 }
 
 const commandsLoaders: Record<
@@ -70,7 +72,8 @@ const commandsLoaders: Record<
   ru: () => import('@frontend-locales/ru/commands.json'),
   tr: () => import('@frontend-locales/tr/commands.json'),
   zh: () => import('@frontend-locales/zh/commands.json'),
-  'zh-TW': () => import('@frontend-locales/zh-TW/commands.json')
+  'zh-TW': () => import('@frontend-locales/zh-TW/commands.json'),
+  'pt-BR': () => import('@frontend-locales/pt-BR/commands.json')
 }
 
 const settingsLoaders: Record<
@@ -85,7 +88,8 @@ const settingsLoaders: Record<
   ru: () => import('@frontend-locales/ru/settings.json'),
   tr: () => import('@frontend-locales/tr/settings.json'),
   zh: () => import('@frontend-locales/zh/settings.json'),
-  'zh-TW': () => import('@frontend-locales/zh-TW/settings.json')
+  'zh-TW': () => import('@frontend-locales/zh-TW/settings.json'),
+  'pt-BR': () => import('@frontend-locales/pt-BR/settings.json')
 }
 
 // Track which locales have been loaded
@@ -151,12 +155,14 @@ export async function loadLocale(locale: string): Promise<void> {
 }
 
 // Only include English in the initial bundle
-const messages = {
-  en: buildLocale(en, enNodes, enCommands, enSettings)
-}
+const enMessages = buildLocale(en, enNodes, enCommands, enSettings)
 
 // Type for locale messages - inferred from the English locale structure
-type LocaleMessages = typeof messages.en
+type LocaleMessages = typeof enMessages
+
+const messages: Record<string, LocaleMessages> = {
+  en: enMessages
+}
 
 export const i18n = createI18n({
   // Must set `false`, as Vue I18n Legacy API is for Vue 2

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

@@ -1,5 +1,6 @@
 import { useTimeout } from '@vueuse/core'
-import { type Ref, computed, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
+import type { Ref } 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,7 +29,8 @@ import { normalizeI18nKey } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Button from 'primevue/button'
 import { useRoute } from 'vue-router'
 
-import { type DialogAction, getDialog } from '@/constants/desktopDialogs'
+import { getDialog } from '@/constants/desktopDialogs'
+import type { DialogAction } 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="Sad girl illustration"
+        :alt="$t('notSupported.illustrationAlt')"
       />
 
       <div class="no-drag sad-text flex items-center">

browser_tests/fixtures/ComfyPage.ts

@@ -27,18 +27,32 @@ dotenv.config()
 
 type WorkspaceStore = ReturnType<typeof useWorkspaceStore>
 
+class ComfyPropertiesPanel {
+  readonly root: Locator
+  readonly panelTitle: Locator
+  readonly searchBox: Locator
+
+  constructor(readonly page: Page) {
+    this.root = page.getByTestId('properties-panel')
+    this.panelTitle = this.root.locator('h3')
+    this.searchBox = this.root.getByPlaceholder('Search...')
+  }
+}
+
 class ComfyMenu {
   private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
   private _workflowsTab: WorkflowsSidebarTab | null = null
   private _topbar: Topbar | null = null
 
   public readonly sideToolbar: Locator
+  public readonly propertiesPanel: ComfyPropertiesPanel
   public readonly themeToggleButton: Locator
   public readonly saveButton: Locator
 
   constructor(public readonly page: Page) {
     this.sideToolbar = page.locator('.side-tool-bar-container')
     this.themeToggleButton = page.locator('.comfy-vue-theme-toggle')
+    this.propertiesPanel = new ComfyPropertiesPanel(page)
     this.saveButton = page
       .locator('button[title="Save the current workflow"]')
       .nth(0)
@@ -112,6 +126,20 @@ 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 }
+    )
   }
 }
 
@@ -228,6 +256,9 @@ 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) {
@@ -310,19 +341,6 @@ 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(
       () =>
@@ -1258,9 +1276,6 @@ export class ComfyPage {
         }, 'image/png')
       })
     }, filename)
-
-    // Wait a bit for the download to process
-    await this.page.waitForTimeout(500)
   }
 
   /**
@@ -1651,7 +1666,10 @@ export const comfyPageFixture = base.extend<{
         // Set tutorial completed to true to avoid loading the tutorial workflow.
         'Comfy.TutorialCompleted': true,
         'Comfy.SnapToGrid.GridSize': testComfySnapToGridGridSize,
-        'Comfy.VueNodes.AutoScaleLayout': false
+        'Comfy.VueNodes.AutoScaleLayout': false,
+        // Disable toast warning about version compatibility, as they may or
+        // may not appear - depending on upstream ComfyUI dependencies
+        'Comfy.VersionCompatibility.DisableWarnings': true
       })
     } catch (e) {
       console.error(e)

browser_tests/fixtures/components/ComfyNodeSearchBox.ts

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

browser_tests/fixtures/components/Topbar.ts

@@ -92,10 +92,26 @@ 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() {
-    await this.page.waitForTimeout(1000)
+    // 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.menuTrigger.click()
     await this.menuLocator.waitFor({ state: 'visible' })
     return this.menuLocator
@@ -163,15 +179,36 @@ 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 = currentMenu
-        .locator(
-          `.p-tieredmenu-submenu .p-tieredmenu-item:has-text("${commandName}")`
-        )
+      const menuItem = submenu
+        .locator(`.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,7 +462,6 @@ 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(
@@ -511,7 +510,6 @@ 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/actionbar.ts

@@ -5,14 +5,18 @@ import type { AutoQueueMode } from '../../src/stores/queueStore'
 export class ComfyActionbar {
   public readonly root: Locator
   public readonly queueButton: ComfyQueueButton
+  public readonly propertiesButton: Locator
 
   constructor(public readonly page: Page) {
-    this.root = page.locator('.actionbar')
+    this.root = page.locator('.actionbar-container')
     this.queueButton = new ComfyQueueButton(this)
+    this.propertiesButton = this.root.getByLabel('Toggle properties panel')
   }
 
   async isDocked() {
-    const className = await this.root.getAttribute('class')
+    const className = await this.root
+      .locator('.actionbar')
+      .getAttribute('class')
     return className?.includes('static') ?? false
   }
 }

browser_tests/tests/backgroundImageUpload.spec.ts

@@ -75,9 +75,6 @@ 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"]')
     const inputValue = await urlInput.inputValue()
@@ -191,14 +188,11 @@ 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"]')
@@ -209,8 +203,6 @@ 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,7 +203,6 @@ 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)
@@ -211,7 +210,6 @@ 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')
@@ -235,7 +233,6 @@ 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,7 +43,6 @@ 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,6 @@ test.describe('Execute to selected output nodes', () => {
     await output1.click('title')
 
     await comfyPage.executeCommand('Comfy.QueueSelectedOutputNodes')
-    // @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')

browser_tests/tests/featureFlags.spec.ts

@@ -94,9 +94,6 @@ 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
@@ -116,9 +113,6 @@ 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(
@@ -170,9 +164,6 @@ 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')
@@ -199,9 +190,6 @@ 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()
@@ -248,9 +236,6 @@ 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,8 +104,6 @@ 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()
   })
 
@@ -320,14 +318,12 @@ 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

@@ -307,8 +307,6 @@ test.describe('Node Interaction', () => {
       position: numberWidgetPos
     })
     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,
@@ -332,7 +330,6 @@ test.describe('Node Interaction', () => {
     await expect(comfyPage.canvas).toHaveScreenshot(
       'prompt-dialog-opened-text.png'
     )
-    await comfyPage.page.waitForTimeout(1000)
     await comfyPage.canvas.click({
       position: {
         x: 10,
@@ -663,9 +660,6 @@ 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'