Fix regex handling of folderName

Co-authored-by: github-actions <github-actions@github.com>

.cursorrules

@@ -0,0 +1,43 @@
+// Vue 3 Composition API .cursorrules
+
+// Vue 3 Composition API best practices
+const vue3CompositionApiBestPractices = [
+  "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",
+]
+
+// Folder structure
+const folderStructure = `
+src/
+  components/
+  constants/
+  composables/
+  views/
+  stores/
+  services/
+  App.vue
+  main.ts
+`;
+
+// Tailwind CSS best practices
+const tailwindCssBestPractices = [
+  "Use Tailwind CSS for styling",
+  "Implement responsive design with Tailwind CSS",
+]
+
+// Additional instructions
+const additionalInstructions = `
+1. Leverage VueUse functions for performance-enhancing styles
+2. Use lodash 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
+`;

.env_example

@@ -6,14 +6,14 @@ PLAYWRIGHT_TEST_URL=http://localhost:5173
 # Note: localhost:8188 does not work.
 DEV_SERVER_COMFYUI_URL=http://127.0.0.1:8188
 
-# The target ComfyUI checkout directory to deploy the frontend code to.
-# The dist directory will be copied to {DEPLOY_COMFYUI_DIR}/custom_web_versions/main/dev
-# Add `--front-end-root {DEPLOY_COMFYUI_DIR}/custom_web_versions/main/dev`
-# to ComfyUI launch script to serve the custom web version.
-DEPLOY_COMFYUI_DIR=/home/ComfyUI/web
+# Allow dev server access from remote IP addresses.
+# If true, the vite dev server will listen on all addresses, including LAN
+# and public addresses.
+VITE_REMOTE_DEV=false
 
-# The directory containing the ComfyUI_examples repo used to extract test workflows.
-EXAMPLE_REPO_PATH=tests-ui/ComfyUI_examples
+# The directory containing the ComfyUI installation used to run Playwright tests.
+# If you aren't using a separate install for testing, point this to your regular install.
+TEST_COMFYUI_DIR=/home/ComfyUI
 
 # Whether to enable minification of the frontend code.
 ENABLE_MINIFY=true

.github/ISSUE_TEMPLATE/bug-report.yaml

@@ -16,7 +16,18 @@ body:
   - type: textarea
     attributes:
       label: Frontend Version
-      description: 'What is the frontend version you are using? You can check this in the settings dialog'
+      description: |
+        What is the frontend version you are using? You can check this in the settings dialog.
+
+        <details>
+
+        <summary>Click to show where to find the version</summary>
+
+        Open the setting by clicking the cog icon in the bottom-left of the screen, then click `About`.
+
+        ![Frontend version](https://github.com/user-attachments/assets/561fb7c3-3012-457c-a494-9bdc1ff035c0)
+
+        </details>
     validations:
       required: true
   - type: textarea
@@ -50,6 +61,12 @@ body:
       description: 'Please copy the output from your browser logs here. You can access this by pressing F12 to toggle the developer tools, then navigating to the Console tab.'
     validations:
       required: true
+  - type: textarea
+    attributes:
+      label: Setting JSON
+      description: 'Please upload the setting file here. The setting file is located at `user/default/comfy.settings.json`'
+    validations:
+      required: true
   - type: dropdown
     id: browsers
     attributes:
@@ -66,7 +83,8 @@ body:
         - Other
   - type: textarea
     attributes:
-      label: Other
-      description: 'Any other additional information you think might be helpful.'
+      label: Other Information
+      description: 'Any other context, details, or screenshots that might help solve the issue.'
+      placeholder: 'Add any other relevant information here...'
     validations:
       required: false

.github/workflows/eslint.yaml

@@ -2,10 +2,7 @@ name: ESLint
 
 on:
   pull_request:
-    branches:
-      - main
-      - master
-      - 'dev*'
+    branches: [ main, master, dev*, core/*, desktop/* ]
 
 jobs:
   eslint:
@@ -13,8 +10,8 @@ jobs:
     steps:
     - uses: actions/checkout@v4
     - name: Use Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
-        node-version: lts/*
+        node-version: 'lts/*'
     - run: npm ci
-    - run: npm run lint
+    - run: npm run lint

.github/workflows/format.yaml

@@ -2,7 +2,7 @@ name: Prettier Check
 
 on:
   pull_request:
-    branches: [ main, master, dev* ]
+    branches: [ main, master, dev*, core/*, desktop/* ]
 
 jobs:
   prettier:
@@ -12,12 +12,12 @@ jobs:
     - uses: actions/checkout@v4
 
     - name: Use Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
-        node-version: lts/*
+        node-version: 'lts/*'
 
     - name: Install dependencies
       run: npm ci
 
     - name: Run Prettier check
-      run: npx prettier --check './**/*.{js,ts,tsx,vue}'
+      run: npm run format:check

.github/workflows/i18n-custom-nodes.yaml

@@ -0,0 +1,159 @@
+name: Update Locales for given custom node repository
+
+on:
+  workflow_dispatch:
+    inputs:
+      owner:
+        description: 'Owner of the repository to update locales for'
+        required: true
+        type: string
+      repository:
+        description: 'Repository to update locales for'
+        required: true
+        type: string
+      fork_owner:
+        description: 'Owner of the forked repository'
+        required: false
+        type: string
+        default: 'Comfy-Org'
+
+jobs:
+  update-locales:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout ComfyUI
+      uses: actions/checkout@v4
+      with:
+        repository: comfyanonymous/ComfyUI
+        path: ComfyUI
+        ref: master
+    - name: Checkout ComfyUI_frontend
+      uses: actions/checkout@v4
+      with:
+        repository: Comfy-Org/ComfyUI_frontend
+        path: ComfyUI_frontend
+    - name: Checkout ComfyUI_devtools
+      uses: actions/checkout@v4
+      with:
+        repository: Comfy-Org/ComfyUI_devtools
+        path: ComfyUI/custom_nodes/ComfyUI_devtools
+    - name: Checkout custom node repository
+      uses: actions/checkout@v4
+      with:
+        repository: ${{ inputs.owner }}/${{ inputs.repository }}
+        path: 'ComfyUI/custom_nodes/${{ inputs.repository }}'
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 'lts/*'
+    - uses: actions/setup-python@v4
+      with:
+        python-version: '3.10'
+    - name: Install ComfyUI requirements
+      run: |
+        python -m pip install --upgrade pip
+        pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
+        pip install -r requirements.txt
+        pip install wait-for-it
+      working-directory: ComfyUI
+    - name: Install custom node requirements
+      run: |
+        if [ -f "requirements.txt" ]; then
+          pip install -r requirements.txt
+        fi
+      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+    - name: Build & Install ComfyUI_frontend
+      run: |
+        npm ci
+        npm run build
+        rm -rf ../ComfyUI/web/*
+        mv dist/* ../ComfyUI/web/
+      working-directory: ComfyUI_frontend
+    - name: Start ComfyUI server
+      run: |
+        python main.py --cpu --multi-user &
+        wait-for-it --service 127.0.0.1:8188 -t 600
+      working-directory: ComfyUI
+    - name: Install Playwright Browsers
+      run: npx playwright install chromium --with-deps
+      working-directory: ComfyUI_frontend
+    - name: Start dev server
+      # Run electron dev server as it is a superset of the web dev server
+      # We do want electron specific UIs to be translated.
+      run: npm run dev:electron &
+      working-directory: ComfyUI_frontend
+    - name: Capture base i18n
+      run: npx tsx scripts/diff-i18n capture
+      working-directory: ComfyUI_frontend
+    - name: Update en.json
+      run: npm run collect-i18n
+      env:
+        PLAYWRIGHT_TEST_URL: http://localhost:5173
+      working-directory: ComfyUI_frontend
+    - name: Update translations
+      run: npm run locale
+      env:
+        OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      working-directory: ComfyUI_frontend
+    - name: Diff base vs updated i18n
+      run: npx tsx scripts/diff-i18n diff
+      working-directory: ComfyUI_frontend
+    - name: Update i18n in custom node repository
+      run: |
+        LOCALE_DIR=ComfyUI/custom_nodes/${{ inputs.repository }}/locales/
+        install -d "$LOCALE_DIR"
+        cp -rf ComfyUI_frontend/temp/diff/* "$LOCALE_DIR"
+    - name: Check and create fork of custom node repository
+      run: |
+        # Try to fork the repository
+        gh repo fork ${{ inputs.owner }}/${{ inputs.repository }} --clone=false || {
+          echo "Fork failed - repository might already be forked"
+          # Exit 0 to prevent the workflow from failing
+          exit 0
+        }
+
+        # Enable workflows on the forked repository
+        gh api \
+          --method PUT \
+          -H "Accept: application/vnd.github+json" \
+          "/repos/${{ inputs.fork_owner }}/${{ inputs.repository }}/actions/permissions/workflow" \
+          -F can_approve_pull_request_reviews=true \
+          -F default_workflow_permissions="write" \
+          -F enabled=true
+      env:
+        GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
+
+    - name: Commit changes
+      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+      run: |
+        git config --global user.name 'github-actions'
+        git config --global user.email 'github-actions@github.com'
+
+        # Create and switch to new branch
+        git checkout -b update-locales
+
+        # Stage and commit changes
+        git add -A
+        git commit -m "Update locales"
+
+    - name: Install SSH key For PUSH
+      uses: shimataro/ssh-key-action@v2
+      with:
+        # PR private key from action server
+        key: ${{ secrets.PR_SSH_PRIVATE_KEY }}
+        # github public key to confirm it's github server
+        known_hosts: github.com ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAq2A7hRGmdnm9tUDbO9IDSwBK6TbQa+PXYPCPy6rbTrTtw7PHkccKrpp0yVhp5HdEIcKr6pLlVDBfOLX9QUsyCOV0wzfjIJNlGEYsdlLJizHhbn2mUjvSAHQqZETYP81eFzLQNnPHt4EVVUh7VfDESU84KezmD5QlWpXLmvU31/yMf+Se8xhHTvKSCZIFImWwoG6mbUoWf9nzpIoaSjB+weqqUUmpaaasXVal72J+UX2B+2RPW3RcT0eOzQgqlJL3RKrTJvdsjE3JEAvGq3lGHSZXy28G3skua2SmVi/w4yCE6gbODqnTWlg7+wC604ydGXA8VJiS5ap43JXiUFFAaQ==
+
+    - name: Push changes
+      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+      run: |
+        # Force push to create the branch
+        echo "Pushing changes to ${{ inputs.fork_owner }}/${{ inputs.repository }}"
+        git push -f git@github.com:${{ inputs.fork_owner }}/${{ inputs.repository }}.git update-locales
+
+    - name: Create PR
+      working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
+      run: |
+        # Create PR using gh cli
+        gh pr create --title "Update locales for ${{ inputs.repository }}" --repo ${{ inputs.owner }}/${{ inputs.repository }} --head ${{ inputs.fork_owner }}:update-locales --body "Update locales for ${{ inputs.repository }}"
+      env:
+        GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}

.github/workflows/i18n-node-defs.yaml

@@ -0,0 +1,48 @@
+name: Update Node Definitions Locales
+
+on:
+  workflow_dispatch:
+    inputs:
+      trigger_type:
+        description: 'Type of trigger (manual or automatic)'
+        required: false
+        type: string
+        default: 'manual'
+
+jobs:
+  update-locales:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.3
+    - name: Install Playwright Browsers
+      run: npx playwright install chromium --with-deps
+      working-directory: ComfyUI_frontend
+    - name: Start dev server
+      # Run electron dev server as it is a superset of the web dev server
+      # We do want electron specific UIs to be translated.
+      run: npm run dev:electron &
+      working-directory: ComfyUI_frontend
+    - name: Update en.json
+      run: npm run collect-i18n -- scripts/collect-i18n-node-defs.ts
+      env:
+        PLAYWRIGHT_TEST_URL: http://localhost:5173
+      working-directory: ComfyUI_frontend
+    - name: Update translations
+      run: npm run locale
+      env:
+        OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      working-directory: ComfyUI_frontend
+    - name: Create Pull Request
+      uses: peter-evans/create-pull-request@v7
+      with:
+        token: ${{ secrets.PR_GH_TOKEN }}
+        commit-message: "Update locales for node definitions"
+        title: "Update locales for node definitions"
+        body: |
+          Automated PR to update locales for node definitions
+
+          This PR was created automatically by the frontend update workflow.
+        branch: update-locales-node-defs-${{ github.event.inputs.trigger_type }}-${{ github.run_id }}
+        base: main
+        labels: dependencies
+        path: ComfyUI_frontend

.github/workflows/i18n.yaml

@@ -0,0 +1,45 @@
+name: Update Locales
+
+on:
+  pull_request:
+    branches: [ main, master, dev* ]
+
+jobs:
+  update-locales:
+    # Don't run on fork PRs
+    if: github.event.pull_request.head.repo.full_name == github.repository
+    runs-on: ubuntu-latest
+    steps:
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.3
+    - name: Install Playwright Browsers
+      run: npx playwright install chromium --with-deps
+      working-directory: ComfyUI_frontend
+    - name: Start dev server
+      # Run electron dev server as it is a superset of the web dev server
+      # We do want electron specific UIs to be translated.
+      run: npm run dev:electron &
+      working-directory: ComfyUI_frontend
+    - name: Update en.json
+      run: npm run collect-i18n -- scripts/collect-i18n-general.ts
+      env:
+        PLAYWRIGHT_TEST_URL: http://localhost:5173
+      working-directory: ComfyUI_frontend
+    - name: Update translations
+      run: npm run locale
+      env:
+        OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      working-directory: ComfyUI_frontend
+    - name: Commit updated locales
+      run: |
+        git config --global user.name 'github-actions'
+        git config --global user.email 'github-actions@github.com'
+        git fetch origin ${{ github.head_ref }}
+        # Stash any local changes before checkout
+        git stash -u
+        git checkout -B ${{ github.head_ref }} origin/${{ github.head_ref }}
+        # Apply the stashed changes if any
+        git stash pop || true
+        git add src/locales/
+        git diff --staged --quiet || git commit -m "Update locales [skip ci]"
+        git push origin HEAD:${{ github.head_ref }}
+      working-directory: ComfyUI_frontend

.github/workflows/release.yaml

@@ -2,33 +2,56 @@ name: Create Release Draft
 
 on:
   pull_request:
-    types: [closed]
-    branches:
-      - main
-      - master
+    types: [ closed ]
+    branches: [ main, core/* ]
     paths:
-      - "package.json"
+      - 'package.json'
 
 jobs:
-  draft_release:
+  build:
     runs-on: ubuntu-latest
     if: >
       github.event.pull_request.merged == true &&
       contains(github.event.pull_request.labels.*.name, 'Release')
+    outputs:
+      version: ${{ steps.current_version.outputs.version }}
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: lts/*
+          node-version: 'lts/*'
       - name: Get current version
         id: current_version
-        run: echo ::set-output name=version::$(node -p "require('./package.json').version")
+        run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
       - name: Build project
+        env:
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
+          ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
         run: |
           npm ci
+          npm run fetch-templates
           npm run build
           npm run zipdist
+      - name: Upload dist artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist-files
+          path: |
+            dist/
+            dist.zip
+
+  draft_release:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Download dist artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: dist-files
       - name: Create release
         id: create_release
         uses: softprops/action-gh-release@v2
@@ -37,7 +60,57 @@ jobs:
         with:
           files: |
             dist.zip
-          tag_name: v${{ steps.current_version.outputs.version }}
-          draft: true
+          tag_name: v${{ needs.build.outputs.version }}
+          target_commitish: ${{ github.event.pull_request.base.ref }}
+          make_latest: ${{ github.event.pull_request.base.ref == 'main' }}
+          draft: ${{ github.event.pull_request.base.ref != 'main' }}
           prerelease: false
-          make_latest: "true"
+          generate_release_notes: true
+
+  publish_pypi:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Download dist artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: dist-files
+      - name: Set up Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: '3.x'
+      - name: Install build dependencies
+        run: python -m pip install build
+      - name: Setup pypi package
+        run: |
+          mkdir -p comfyui_frontend_package/comfyui_frontend_package/static/
+          cp -r dist/* comfyui_frontend_package/comfyui_frontend_package/static/
+      - name: Build pypi package
+        run: python -m build
+        working-directory: comfyui_frontend_package
+        env:
+          COMFYUI_FRONTEND_VERSION: ${{ needs.build.outputs.version }}
+      - name: Publish pypi package
+        uses: pypa/gh-action-pypi-publish@release/v1
+        with:
+          password: ${{ secrets.PYPI_TOKEN }}
+          packages-dir: comfyui_frontend_package/dist
+
+  publish_types:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+          registry-url: https://registry.npmjs.org
+      - run: npm ci
+      - run: npm run build:types
+      - name: Publish package
+        run: npm publish --access public
+        working-directory: dist
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/test-browser-exp.yaml

@@ -1,5 +1,4 @@
 # Setting test expectation screenshots for Playwright
-
 name: Update Playwright Expectations
 
 on:
@@ -11,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'New Browser Test Expectations'
     steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v1
+    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.3
     - name: Install Playwright Browsers
       run: npx playwright install chromium --with-deps
       working-directory: ComfyUI_frontend

.github/workflows/test-ui.yaml

@@ -2,74 +2,104 @@ name: Tests CI
 
 on:
   push:
-    branches:
-      - main
-      - master
+    branches: [main, master, core/*, desktop/*]
   pull_request:
-    branches:
-      - main
-      - master
-      - 'dev*'
+    branches: [main, master, dev*, core/*, desktop/*]
 
 jobs:
-  jest-tests:
+  setup:
     runs-on: ubuntu-latest
+    outputs:
+      cache-key: ${{ steps.cache-key.outputs.key }}
     steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v1
-    - name: Run Jest tests
-      run: |
-        npm run test:generate
-        npm run test:generate:examples
-        npm test -- --verbose
-      working-directory: ComfyUI_frontend
+      - name: Checkout ComfyUI
+        uses: actions/checkout@v4
+        with:
+          repository: 'comfyanonymous/ComfyUI'
+          path: 'ComfyUI'
+          ref: master
 
-  playwright-tests-chromium:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v1
-    - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
-      working-directory: ComfyUI_frontend
-    - name: Run Playwright tests (Chromium)
-      run: npx playwright test --project=chromium
-      working-directory: ComfyUI_frontend
-    - uses: actions/upload-artifact@v4
-      if: always()
-      with:
-        name: playwright-report-chromium
-        path: ComfyUI_frontend/playwright-report/
-        retention-days: 30
+      - name: Checkout ComfyUI_frontend
+        uses: actions/checkout@v4
+        with:
+          repository: 'Comfy-Org/ComfyUI_frontend'
+          path: 'ComfyUI_frontend'
 
-  playwright-tests-chromium-2x:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v1
-    - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
-      working-directory: ComfyUI_frontend
-    - name: Run Playwright tests (Chromium 2x)
-      run: npx playwright test --project=chromium-2x
-      working-directory: ComfyUI_frontend
-    - uses: actions/upload-artifact@v4
-      if: always()
-      with:
-        name: playwright-report-chromium-2x
-        path: ComfyUI_frontend/playwright-report/
-        retention-days: 30
+      - name: Checkout ComfyUI_devtools
+        uses: actions/checkout@v4
+        with:
+          repository: 'Comfy-Org/ComfyUI_devtools'
+          path: 'ComfyUI/custom_nodes/ComfyUI_devtools'
+          ref: '080e6d4af809a46852d1c4b7ed85f06e8a3a72be'
 
-  playwright-tests-mobile-chrome:
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Build ComfyUI_frontend
+        run: |
+          npm ci
+          npm run fetch-templates
+          npm run build
+        working-directory: ComfyUI_frontend
+
+      - name: Generate cache key
+        id: cache-key
+        run: echo "key=$(date +%s)" >> $GITHUB_OUTPUT
+
+      - name: Cache setup
+        uses: actions/cache@v3
+        with:
+          path: |
+            ComfyUI
+            ComfyUI_frontend
+          key: comfyui-setup-${{ steps.cache-key.outputs.key }}
+
+  playwright-tests:
+    needs: setup
     runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chromium, chromium-2x, mobile-chrome]
     steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v1
-    - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
-      working-directory: ComfyUI_frontend
-    - name: Run Playwright tests (Mobile Chrome)
-      run: npx playwright test --project=mobile-chrome
-      working-directory: ComfyUI_frontend
-    - uses: actions/upload-artifact@v4
-      if: always()
-      with:
-        name: playwright-report-mobile-chrome
-        path: ComfyUI_frontend/playwright-report/
-        retention-days: 30
+      - name: Restore cached setup
+        uses: actions/cache@v3
+        with:
+          path: |
+            ComfyUI
+            ComfyUI_frontend
+          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
+
+      - uses: actions/setup-python@v4
+        with:
+          python-version: '3.10'
+
+      - name: Install requirements
+        run: |
+          python -m pip install --upgrade pip
+          pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
+          pip install -r requirements.txt
+          pip install wait-for-it
+        working-directory: ComfyUI
+
+      - name: Start ComfyUI server
+        run: |
+          python main.py --cpu --multi-user --front-end-root ../ComfyUI_frontend/dist &
+          wait-for-it --service 127.0.0.1:8188 -t 600
+        working-directory: ComfyUI
+
+      - name: Install Playwright Browsers
+        run: npx playwright install chromium --with-deps
+        working-directory: ComfyUI_frontend
+
+      - name: Run Playwright tests (${{ matrix.browser }})
+        run: npx playwright test --project=${{ matrix.browser }}
+        working-directory: ComfyUI_frontend
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report-${{ matrix.browser }}
+          path: ComfyUI_frontend/playwright-report/
+          retention-days: 30

.github/workflows/update-electron-types.yaml

@@ -0,0 +1,44 @@
+name: Update Electron Types
+
+on:
+  workflow_dispatch:
+
+jobs:
+  update-electron-types:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: 'npm'
+
+      - name: Update electron types
+        run: npm install @comfyorg/comfyui-electron-types@latest
+
+      - name: Get new version
+        id: get-version
+        run: |
+          NEW_VERSION=$(node -e "console.log(JSON.parse(require('fs').readFileSync('./package-lock.json')).packages['node_modules/@comfyorg/comfyui-electron-types'].version)")
+          echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v7
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          commit-message: '[chore] Update electron-types to ${{ steps.get-version.outputs.NEW_VERSION }}'
+          title: '[chore] Update electron-types to ${{ steps.get-version.outputs.NEW_VERSION }}'
+          body: |
+            Automated update of desktop API types to version ${{ steps.get-version.outputs.NEW_VERSION }}.
+          branch: update-electron-types-${{ steps.get-version.outputs.NEW_VERSION }}
+          base: main
+          labels: |
+            dependencies
+            Electron

.github/workflows/update-litegraph.yaml

@@ -0,0 +1,43 @@
+name: Update Litegraph Dependency
+
+on:
+  workflow_dispatch:
+
+jobs:
+  update-litegraph:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Update litegraph
+        run: npm install @comfyorg/litegraph@latest
+
+      - name: Get new version
+        id: get-version
+        run: |
+          NEW_VERSION=$(node -e "console.log(JSON.parse(require('fs').readFileSync('./package-lock.json')).packages['node_modules/@comfyorg/litegraph'].version)")
+          echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v7
+        with:
+          token: ${{ secrets.PR_GH_TOKEN }}
+          commit-message: '[chore] Update litegraph to ${{ steps.get-version.outputs.NEW_VERSION }}'
+          title: '[chore] Update litegraph to ${{ steps.get-version.outputs.NEW_VERSION }}'
+          body: |
+            Automated update of litegraph to version ${{ steps.get-version.outputs.NEW_VERSION }}.
+            Ref: https://github.com/Comfy-Org/litegraph.js/releases/tag/v${{ steps.get-version.outputs.NEW_VERSION }}
+          branch: update-litegraph-${{ steps.get-version.outputs.NEW_VERSION }}
+          base: main
+          labels: |
+            dependencies

.github/workflows/update-main.yaml

@@ -1,53 +0,0 @@
-name: Update Main Repo from PR
-
-on:
-  pull_request:
-    types: [labeled]
-
-jobs:
-  update-main-repo:
-    if: github.event.label.name == 'Update Main Repo'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout frontend repo PR
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          ref: ${{ github.event.pull_request.head.sha }}
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: lts/*
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build project
-        run: npm run build
-
-      - name: Checkout ComfyUI
-        uses: actions/checkout@v4
-        with:
-          repository: "comfyanonymous/ComfyUI"
-          path: ComfyUI
-          ref: master
-
-      - name: Copy compiled assets
-        run: |
-          rm -rf ./ComfyUI/web/*
-          cp -R dist/* ./ComfyUI/web/
-
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v5
-        with:
-          token: ${{ secrets.PAT }}
-          commit-message: 'Update frontend assets from PR #${{ github.event.pull_request.number }}'
-          title: 'Update frontend assets from PR #${{ github.event.pull_request.number }}'
-          body: |
-            This PR updates the compiled frontend assets from PR #${{ github.event.pull_request.number }} in the frontend repo.
-
-            Frontend PR: ${{ github.event.pull_request.html_url }}
-          branch: update-frontend-assets-pr-${{ github.event.pull_request.number }}
-          base: main
-          path: ComfyUI

.github/workflows/update-registry-types.yaml

@@ -0,0 +1,97 @@
+name: Update Comfy Registry API Types
+
+on:
+  # Manual trigger
+  workflow_dispatch:
+
+  # Triggered from comfy-api repo
+  repository_dispatch:
+    types: [comfy-api-updated]
+
+jobs:
+  update-registry-types:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Checkout comfy-api repository
+        uses: actions/checkout@v4
+        with:
+          repository: Comfy-Org/comfy-api
+          path: comfy-api
+          token: ${{ secrets.COMFY_API_PAT }}
+          clean: true
+
+      - name: Get API commit information
+        id: api-info
+        run: |
+          cd comfy-api
+          API_COMMIT=$(git rev-parse --short HEAD)
+          echo "commit=${API_COMMIT}" >> $GITHUB_OUTPUT
+          cd ..
+
+      - name: Generate API types
+        run: |
+          echo "Generating TypeScript types from comfy-api@${{ steps.api-info.outputs.commit }}..."
+          npx openapi-typescript ./comfy-api/openapi.yml --output ./src/types/comfyRegistryTypes.ts
+
+      - name: Validate generated types
+        run: |
+          if [ ! -f ./src/types/comfyRegistryTypes.ts ]; then
+            echo "Error: Types file was not generated."
+            exit 1
+          fi
+
+          # Check if file is not empty
+          if [ ! -s ./src/types/comfyRegistryTypes.ts ]; then
+            echo "Error: Generated types file is empty."
+            exit 1
+          fi
+
+      - name: Check for changes
+        id: check-changes
+        run: |
+          if [[ -z $(git status --porcelain ./src/types/comfyRegistryTypes.ts) ]]; then
+            echo "No changes to Comfy Registry API types detected."
+            echo "changed=false" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Changes detected in Comfy Registry API types."
+            echo "changed=true" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Create Pull Request
+        if: steps.check-changes.outputs.changed == 'true'
+        uses: peter-evans/create-pull-request@v7
+        with:
+          token: ${{ secrets.PR_GH_TOKEN }}
+          commit-message: '[chore] Update Comfy Registry API types from comfy-api@${{ steps.api-info.outputs.commit }}'
+          title: '[chore] Update Comfy Registry API types from comfy-api@${{ steps.api-info.outputs.commit }}'
+          body: |
+            ## Automated API Type Update
+
+            This PR updates the Comfy Registry API types from the latest comfy-api OpenAPI specification.
+
+            - API commit: ${{ steps.api-info.outputs.commit }}
+            - Generated on: ${{ github.event.repository.updated_at }}
+
+            These types are automatically generated using openapi-typescript.
+          branch: update-registry-types-${{ steps.api-info.outputs.commit }}
+          base: main
+          labels: CNR
+          delete-branch: true
+          add-paths: |
+            src/types/comfyRegistryTypes.ts

.github/workflows/version-bump.yaml

@@ -0,0 +1,51 @@
+name: Version Bump
+
+on:
+  workflow_dispatch:
+    inputs:
+      version_type:
+        description: 'Version increment type'
+        required: true
+        default: 'patch'
+        type: 'choice'
+        options:
+          - patch
+          - minor
+          - major
+
+jobs:
+  bump-version:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: 'npm'
+
+      - name: Bump version
+        id: bump-version
+        run: |
+          npm version ${{ github.event.inputs.version_type }} --no-git-tag-version
+          NEW_VERSION=$(node -p "require('./package.json').version")
+          echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v7
+        with:
+          token: ${{ secrets.PR_GH_TOKEN }}
+          commit-message: '[release] Bump version to ${{ steps.bump-version.outputs.NEW_VERSION }}'
+          title: '${{ steps.bump-version.outputs.NEW_VERSION }}'
+          body: |
+            Automated version bump to ${{ steps.bump-version.outputs.NEW_VERSION }}
+          branch: version-bump-${{ steps.bump-version.outputs.NEW_VERSION }}
+          base: main
+          labels: |
+            Release

.github/workflows/vitest.yaml

@@ -2,15 +2,9 @@ name: Vitest Tests
 
 on:
   push:
-    branches:
-      - main
-      - master
-      - 'dev*'
+    branches: [ main, master, dev*, core/*, desktop/* ]
   pull_request:
-    branches:
-      - main
-      - master
-      - 'dev*'
+    branches: [ main, master, dev*, core/*, desktop/* ]
 
 jobs:
   test:
@@ -20,12 +14,14 @@ jobs:
     - uses: actions/checkout@v4
 
     - name: Use Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
-        node-version: lts/*
+        node-version: 'lts/*'
 
     - name: Install dependencies
       run: npm ci
 
     - name: Run Vitest tests
-      run: npm run test:component
+      run: |
+        npm run test:component
+        npm run test:unit

.gitignore

@@ -16,6 +16,9 @@ dist-ssr
 .vscode/*
 *.code-workspace
 !.vscode/extensions.json
+!.vscode/tailwind.json
+!.vscode/settings.json.default
+!.vscode/launch.json.default
 .idea
 .DS_Store
 *.suo
@@ -39,4 +42,16 @@ browser_tests/*/*-win32.png
 
 .env
 
-dist.zip
+dist.zip
+
+/temp/
+
+# Generated JSON Schemas
+/schemas/
+
+# Workflow templates assets
+# Hosted on https://github.com/Comfy-Org/workflow_templates
+/public/templates/
+
+# Temporary repository directory
+templates_repo/

.husky/pre-commit

@@ -1 +1,5 @@
-npx lint-staged
+if [[ "$OS" == "Windows_NT" ]]; then
+  npx.cmd lint-staged
+else
+  npx lint-staged
+fi

.i18nrc.cjs

@@ -0,0 +1,17 @@
+// This file is intentionally kept in CommonJS format (.cjs)
+// to resolve compatibility issues with dependencies that require CommonJS.
+// Do not convert this file to ESModule format unless all dependencies support it.
+const { defineConfig } = require('@lobehub/i18n-cli');
+
+module.exports = defineConfig({
+  modelName: 'gpt-4',
+  splitToken: 1024,
+  entry: 'src/locales/en',
+  entryLocale: 'en',
+  output: 'src/locales',
+  outputLocales: ['zh', 'ru', 'ja', 'ko', 'fr'],
+  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, controlnet, lora.
+  'latent' is the short form of 'latent space'.
+  'mask' is in the context of image processing.
+  `
+});

.prettierrc

@@ -2,5 +2,17 @@
   "singleQuote": true,
   "tabWidth": 2,
   "semi": false,
-  "trailingComma": "none"
-}
+  "trailingComma": "none",
+  "printWidth": 80,
+  "importOrder": ["^@core/(.*)$", "<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "overrides": [
+    {
+      "files": "*.{js,cjs,mjs,ts,cts,mts,tsx,vue}",
+      "options": {
+        "plugins": ["@trivago/prettier-plugin-sort-imports"]
+      }
+    }
+  ]
+}

.vscode/launch.json.default

@@ -0,0 +1,16 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome on frontend dev",
+            "url": "http://localhost:5173",
+            "webRoot": "${workspaceFolder}/src",
+            "sourceMaps": true,
+        }
+    ]
+}

.vscode/settings.json.default

@@ -0,0 +1,5 @@
+{
+  "css.customData": [
+    ".vscode/tailwind.json"
+  ]
+}

.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}

CODEOWNERS

@@ -0,0 +1,17 @@
+# Admins
+* @Comfy-Org/comfy_frontend_devs
+
+# Maintainers
+*.md @Comfy-Org/comfy_maintainer
+/tests-ui/ @Comfy-Org/comfy_maintainer
+/browser_tests/ @Comfy-Org/comfy_maintainer
+/.env_example @Comfy-Org/comfy_maintainer
+
+# Translations (AIGODLIKE team + shinshin86)
+/src/locales/ @Yorha4D @KarryCharon @DorotaLuna @shinshin86 @Comfy-Org/comfy_maintainer
+
+# Load 3D extension
+/src/extensions/core/load3d.ts @jtydhr88 @Comfy-Org/comfy_frontend_devs
+
+# Mask Editor extension
+/src/extensions/core/maskeditor.ts @trsommer @Comfy-Org/comfy_frontend_devs

README.md

@@ -31,38 +31,90 @@
 
 ## Release Schedule
 
-### Nightly Release
+The project follows a structured release process for each minor version, consisting of three distinct phases:
 
-Nightly releases are published daily at [https://github.com/Comfy-Org/ComfyUI_frontend/releases](https://github.com/Comfy-Org/ComfyUI_frontend/releases). 
+1. **Development Phase** - 1 week
+   - Active development of new features
+   - Code changes merged to the development branch
+
+2. **Feature Freeze** - 1 week
+   - No new features accepted
+   - Only bug fixes are cherry-picked to the release branch
+   - Testing and stabilization of the codebase
+
+3. **Publication**
+   - Release is published at the end of the freeze period
+   - Version is finalized and made available to all users
+
+### Nightly Releases
+Nightly releases are published daily at [https://github.com/Comfy-Org/ComfyUI_frontend/releases](https://github.com/Comfy-Org/ComfyUI_frontend/releases).
 
 To use the latest nightly release, add the following command line argument to your ComfyUI launch script:
 
-```
+```bat
 --front-end-version Comfy-Org/ComfyUI_frontend@latest
 ```
 
-#### For Windows Stand-alone Build Users
+## Overlapping Release Cycles
+The development of successive minor versions overlaps. For example, while version 1.1 is in feature freeze, development for version 1.2 begins simultaneously.
 
-Edit your `run_cpu.bat` or `run_nvidia_gpu.bat` file as follows:
+### Example Release Cycle
 
-```bat
-.\python_embeded\python.exe -s ComfyUI\main.py --windows-standalone-build --front-end-version Comfy-Org/ComfyUI_frontend@latest
-pause
-```
-
-### Stable Release
-
-Stable releases are published weekly in the ComfyUI main repository, aligned with ComfyUI backend's stable release schedule.
-
-#### Feature Freeze
-
-There will be a 2-day feature freeze before each stable release. During this period, no new major features will be merged.
+| Week | Date Range | Version 1.1 | Version 1.2 | Version 1.3 | Patch Releases |
+|------|------------|-------------|-------------|-------------|----------------|
+| 1 | Mar 1-7 | Development | - | - | - |
+| 2 | Mar 8-14 | Feature Freeze | Development | - | 1.1.0 through 1.1.6 (daily) |
+| 3 | Mar 15-21 | Released | Feature Freeze | Development | 1.1.7 through 1.1.13 (daily)<br>1.2.0 through 1.2.6 (daily) |
+| 4 | Mar 22-28 | - | Released | Feature Freeze | 1.2.7 through 1.2.13 (daily)<br>1.3.0 through 1.3.6 (daily) |
 
 ## Release Summary
 
 ### Major features
 
-<details>
+<details id='feature-native-translation'>
+  <summary>v1.5: Native translation (i18n)</summary>
+
+  ComfyUI now includes built-in translation support, replacing the need for third-party translation extensions. Select your language
+  in `Comfy > Locale > Language` to translate the interface into English, Chinese (Simplified), Russian, Japanese, or Korean. This native
+  implementation offers better performance, reliability, and maintainability compared to previous solutions.<br>
+
+  More details available here: https://blog.comfy.org/p/native-localization-support-i18n
+</details>
+
+<details id='feature-mask-editor'>
+  <summary>v1.4: New mask editor</summary>
+
+  https://github.com/Comfy-Org/ComfyUI_frontend/pull/1284 implements a new mask editor.
+
+  ![image](https://github.com/user-attachments/assets/f0ea6ee5-00ee-4e5d-a09c-6938e86a1f17)
+</details>
+
+<details id='feature-integrated-server-terminal'>
+  <summary>v1.3.22: Integrated server terminal</summary>
+
+Press Ctrl + ` to toggle integrated terminal.
+
+https://github.com/user-attachments/assets/eddedc6a-07a3-4a83-9475-63b3977f6d94
+</details>
+
+<details id='feature-keybinding-customization'>
+  <summary>v1.3.7: Keybinding customization</summary>
+
+## Basic UI
+![image](https://github.com/user-attachments/assets/c84a1609-3880-48e0-a746-011f36beda68)
+
+## Reset button
+![image](https://github.com/user-attachments/assets/4d2922da-bb4f-4f90-8017-a8e4a0db07c7)
+
+## Edit Keybinding
+![image](https://github.com/user-attachments/assets/77626b7a-cb46-48f8-9465-e03120aac66a)
+![image](https://github.com/user-attachments/assets/79131a4e-75c6-4715-bd11-c6aaed887779)
+
+[rec.webm](https://github.com/user-attachments/assets/a3984ed9-eb28-4d47-86c0-7fc3efc2b5d0)
+
+</details>
+
+<details id='feature-node-library-sidebar'>
   <summary>v1.2.4: Node library sidebar tab</summary>
 
   #### Drag & Drop
@@ -72,13 +124,13 @@ https://github.com/user-attachments/assets/853e20b7-bc0e-49c9-bbce-a2ba7566f92f
 https://github.com/user-attachments/assets/4bbca3ee-318f-4cf0-be32-a5a5541066cf
 </details>
 
-<details>
+<details id='feature-queue-sidebar'>
   <summary>v1.2.0: Queue/History sidebar tab</summary>
 
   https://github.com/user-attachments/assets/86e264fe-4d26-4f07-aa9a-83bdd2d02b8f
 </details>
 
-<details>
+<details id='feature-node-search'>
   <summary>v1.1.0: Node search box</summary>
 
   #### Fuzzy search & Node preview
@@ -90,35 +142,80 @@ https://github.com/user-attachments/assets/4bbca3ee-318f-4cf0-be32-a5a5541066cf
 
 ### QoL changes
 
-<details>
+<details id='feature-nested-group'>
+  <summary>v1.3.32: **Litegraph** Nested group</summary>
+
+https://github.com/user-attachments/assets/f51adeb1-028e-40af-81e4-0ac13075198a
+</details>
+
+<details id='feature-group-selection'>
+  <summary>v1.3.24: **Litegraph** Group selection</summary>
+
+https://github.com/user-attachments/assets/e6230a94-411e-4fba-90cb-6c694200adaa
+</details>
+
+<details id='feature-toggle-link-visibility'>
+  <summary>v1.3.6: **Litegraph** Toggle link visibility</summary>
+
+[rec.webm](https://github.com/user-attachments/assets/34e460ac-fbbc-44ef-bfbb-99a84c2ae2be)
+
+</details>
+
+<details id='feature-auto-widget-conversion'>
+  <summary>v1.3.4: **Litegraph** Auto widget to input conversion</summary>
+
+Dropping a link of correct type on node widget will automatically convert the widget to input.
+
+[rec.webm](https://github.com/user-attachments/assets/15cea0b0-b225-4bec-af50-2cdb16dc46bf)
+
+</details>
+
+<details id='feature-pan-mode'>
+  <summary>v1.3.4: **Litegraph** Canvas pan mode</summary>
+
+The canvas becomes readonly in pan mode. Pan mode is activated by clicking the pan mode button on the canvas menu
+or by holding the space key.
+
+[rec.webm](https://github.com/user-attachments/assets/c7872532-a2ac-44c1-9e7d-9e03b5d1a80b)
+
+</details>
+
+<details id='feature-shift-drag-link-creation'>
   <summary>v1.3.1: **Litegraph** Shift drag link to create a new link</summary>
 
 [rec.webm](https://github.com/user-attachments/assets/7e73aaf9-79e2-4c3c-a26a-911cba3b85e4)
 
 </details>
 
-<details>
+<details id='feature-optional-input-donuts'>
+  <summary>v1.2.62: **Litegraph** Show optional input slots as donuts</summary>
+
+![GYEIRidb0AYGO-v](https://github.com/user-attachments/assets/e6cde0b6-654b-4afd-a117-133657a410b1)
+
+</details>
+
+<details id='feature-group-title-edit'>
   <summary>v1.2.44: **Litegraph** Double click group title to edit</summary>
 
 https://github.com/user-attachments/assets/5bf0e2b6-8b3a-40a7-b44f-f0879e9ad26f
 
 </details>
 
-<details>
+<details id='feature-group-selection-shortcut'>
   <summary>v1.2.39: **Litegraph** Group selected nodes with Ctrl + G</summary>
 
 https://github.com/user-attachments/assets/7805dc54-0854-4a28-8bcd-4b007fa01151
 
 </details>
 
-<details>
+<details id='feature-node-title-edit'>
   <summary>v1.2.38: **Litegraph** Double click node title to edit</summary>
 
 https://github.com/user-attachments/assets/d61d5d0e-f200-4153-b293-3e3f6a212b30
 
 </details>
 
-<details>
+<details id='feature-drag-multi-link'>
   <summary>v1.2.7: **Litegraph** drags multiple links with shift pressed</summary>
 
 https://github.com/user-attachments/assets/68826715-bb55-4b2a-be6e-675cfc424afe
@@ -127,7 +224,7 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
 
 </details>
 
-<details>
+<details id='feature-auto-connect-link'>
   <summary>v1.2.2: **Litegraph** auto connects to correct slot</summary>
 
   #### Before
@@ -137,27 +234,211 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
   https://github.com/user-attachments/assets/b6360ac0-f0d2-447c-9daa-8a2e20c0dc1d
 </details>
 
-<details>
+<details id='feature-hide-text-overflow'>
   <summary>v1.1.8: **Litegraph** hides text overflow on widget value</summary>
 
   https://github.com/user-attachments/assets/5696a89d-4a47-4fcc-9e8c-71e1264943f2
 </details>
 
-### Node developers API
+### Developer APIs
 
 <details>
+  <summary>v1.6.13: prompt/confirm/alert replacements for ComfyUI desktop</summary>
+
+Several browser-only APIs are not available in ComfyUI desktop's electron environment.
+
+- `window.prompt`
+- `window.confirm`
+- `window.alert`
+
+Please use the following APIs as replacements.
+
+```js
+// window.prompt
+window['app'].extensionManager.dialog
+  .prompt({
+    title: 'Test Prompt',
+    message: 'Test Prompt Message'
+  })
+  .then((value: string) => {
+    // Do something with the value user entered
+  })
+```
+
+![image](https://github.com/user-attachments/assets/c73f74d0-9bb4-4555-8d56-83f1be4a1d7e)
+
+```js
+// window.confirm
+window['app'].extensionManager.dialog
+  .confirm({
+    title: 'Test Confirm',
+    message: 'Test Confirm Message'
+  })
+  .then((value: boolean) => {
+    // Do something with the value user entered
+  })
+```
+
+![image](https://github.com/user-attachments/assets/8dec7a42-7443-4245-85be-ceefb1116e96)
+
+```js
+// window.alert
+window['app'].extensionManager.toast
+  .addAlert("Test Alert")
+```
+
+![image](https://github.com/user-attachments/assets/9b18bdca-76ef-4432-95de-5cd2369684f2)
+
+</details>
+
+<details>
+  <summary>v1.3.34: Register about panel badges</summary>
+
+```js
+app.registerExtension({
+  name: 'TestExtension1',
+  aboutPageBadges: [
+    {
+      label: 'Test Badge',
+      url: 'https://example.com',
+      icon: 'pi pi-box'
+    }
+  ]
+})
+```
+
+![image](https://github.com/user-attachments/assets/099e77ee-16ad-4141-b2fc-5e9d5075188b)
+
+</details>
+
+<details id='extension-api-bottom-panel-tabs'>
+  <summary>v1.3.22: Register bottom panel tabs</summary>
+
+```js
+app.registerExtension({
+  name: 'TestExtension',
+  bottomPanelTabs: [
+    {
+      id: 'TestTab',
+      title: 'Test Tab',
+      type: 'custom',
+      render: (el) => {
+        el.innerHTML = '<div>Custom tab</div>'
+      }
+    }
+  ]
+})
+```
+
+![image](https://github.com/user-attachments/assets/2114f8b8-2f55-414b-b027-78e61c870b64)
+
+</details>
+
+<details id='extension-api-settings'>
+  <summary>v1.3.22: New settings API</summary>
+
+Legacy settings API.
+
+```js
+// Register a new setting
+app.ui.settings.addSetting({
+  id: 'TestSetting',
+  name: 'Test Setting',
+  type: 'text',
+  defaultValue: 'Hello, world!'
+})
+
+// Get the value of a setting
+const value = app.ui.settings.getSettingValue('TestSetting')
+
+// Set the value of a setting
+app.ui.settings.setSettingValue('TestSetting', 'Hello, universe!')
+```
+
+New settings API.
+
+```js
+// Register a new setting
+app.registerExtension({
+  name: 'TestExtension1',
+  settings: [
+    {
+      id: 'TestSetting',
+      name: 'Test Setting',
+      type: 'text',
+      defaultValue: 'Hello, world!'
+    }
+  ]
+})
+
+// Get the value of a setting
+const value = app.extensionManager.setting.get('TestSetting')
+
+// Set the value of a setting
+app.extensionManager.setting.set('TestSetting', 'Hello, universe!')
+```
+
+</details>
+
+<details id='extension-api-commands-keybindings'>
+  <summary>v1.3.7: Register commands and keybindings</summary>
+
+  Extensions can call the following API to register commands and keybindings. Do
+  note that keybindings defined in core cannot be overwritten, and some keybindings
+  are reserved by the browser.
+
+```js
+  app.registerExtension({
+    name: 'TestExtension1',
+    commands: [
+      {
+        id: 'TestCommand',
+        function: () => {
+          alert('TestCommand')
+        }
+      }
+    ],
+    keybindings: [
+      {
+        combo: { key: 'k' },
+        commandId: 'TestCommand'
+      }
+    ]
+  })
+```
+
+</details>
+
+<details id='extension-api-topbar-menu'>
   <summary>v1.3.1: Extension API to register custom topbar menu items</summary>
 
   Extensions can call the following API to register custom topbar menu items.
 
 ```js
-  app.extensionManager.menu.registerTopbarCommands(["ext", "ext2"], [{id:"foo", label: "foo", function: () => alert(1)}])
+  app.registerExtension({
+    name: 'TestExtension1',
+    commands: [
+      {
+        id: 'foo-id',
+        label: 'foo',
+        function: () => {
+          alert(1)
+        }
+      }
+    ],
+    menuCommands: [
+      {
+        path: ['ext', 'ext2'],
+        commands: ['foo-id']
+      }
+    ]
+  })
 ```
 
 ![image](https://github.com/user-attachments/assets/ae7b082f-7ce9-4549-a446-4563567102fe)
 </details>
 
-<details>
+<details id='extension-api-toast'>
   <summary>v1.2.27: Extension API to add toast message</summary>i
 
   Extensions can call the following API to add toast messages.
@@ -175,7 +456,7 @@ Documentation of all supported options can be found here: <https://primevue.org/
 ![image](https://github.com/user-attachments/assets/de02cd7e-cd81-43d1-a0b0-bccef92ff487)
 </details>
 
-<details>
+<details id='extension-api-sidebar-tab'>
   <summary>v1.2.4: Extension API to register custom sidebar tab</summary>
 
   Extensions now can call the following API to register a sidebar tab.
@@ -200,33 +481,46 @@ We will support custom icons later.
 ![image](https://github.com/user-attachments/assets/7bff028a-bf91-4cab-bf97-55c243b3f5e0)
 </details>
 
-## Road Map
+<details id='extension-api-selection-toolbox'>
+  <summary>v1.10.9: Selection Toolbox API</summary>
 
-### What has been done
+Extensions can register commands that appear in the selection toolbox when specific items are selected on the canvas.
 
-- Migrate all code to TypeScript with minimal change modification to the original logic.
-- Bundle all code with Vite's rollup build.
-- Added a shim layer to be backward compatible with the existing extension system. <https://github.com/huchenlei/ComfyUI_frontend/pull/15>
-- Front-end dev server.
-- Zod schema for input validation on ComfyUI workflow.
-- Make litegraph a npm dependency. <https://github.com/Comfy-Org/ComfyUI_frontend/pull/89>
-- Introduce Vue to start managing part of the UI.
-- Easy install and version management (<https://github.com/comfyanonymous/ComfyUI/pull/3897>).
-- Better node management. Sherlock <https://github.com/Nuked88/ComfyUI-N-Sidebar>.
-- Replace the existing ComfyUI front-end implementation. <https://github.com/comfyanonymous/ComfyUI/pull/4379>
+```js
+app.registerExtension({
+  name: 'TestExtension1',
+  commands: [
+    {
+      id: 'test.selection.command',
+      label: 'Test Command',
+      icon: 'pi pi-star',
+      function: () => {
+        // Command logic here
+      }
+    }
+  ],
+  // Return an array of command IDs to show in the selection toolbox
+  // when an item is selected
+  getSelectionToolboxCommands: (selectedItem) => ['test.selection.command']
+})
+```
 
+The selection toolbox will display the command button when items are selected:
+![Image](https://github.com/user-attachments/assets/28d91267-c0a9-4bd5-a7c4-36e8ec44c9bd)
 
-### What to be done
-
-- Remove `@ts-ignore`s.
-- Turn on `strict` on `tsconfig.json`.
-- Add more widget types for node developers.
-- LLM streaming node.
-- Linear mode (Similar to InvokeAI's linear mode).
-- Keybinding settings management. Register keybindings API for custom nodes.
+</details>
 
 ## Development
 
+### Tech Stack
+
+- [Vue 3](https://vuejs.org/) with [TypeScript](https://www.typescriptlang.org/)
+- [Pinia](https://pinia.vuejs.org/) for state management
+- [PrimeVue](https://primevue.org/) with [TailwindCSS](https://tailwindcss.com/) for UI
+- [litegraph.js](https://github.com/Comfy-Org/litegraph.js) for node editor
+- [zod](https://zod.dev/) for schema validation
+- [vue-i18n](https://github.com/intlify/vue-i18n) for internationalization
+
 ### Git pre-commit hooks
 
 Run `npm run prepare` to install Git pre-commit hooks. Currently, the pre-commit
@@ -237,38 +531,58 @@ hook is used to auto-format code on commit.
 Note: The dev server will NOT load any extension from the ComfyUI server. Only
 core extensions will be loaded.
 
-- Run `npm install` to install the necessary packages
 - Start local ComfyUI backend at `localhost:8188`
 - Run `npm run dev` to start the dev server
+- Run `npm run dev:electron` to start the dev server with electron API mocked
 
-### Test
+#### Access dev server on touch devices
+
+Enable remote access to the dev server by setting `VITE_REMOTE_DEV` in `.env` to `true`.
+
+After you start the dev server, you should see following logs:
+
+```
+> comfyui-frontend@1.3.42 dev
+> vite
+
+
+  VITE v5.4.6  ready in 488 ms
+
+  ➜  Local:   http://localhost:5173/
+  ➜  Network: http://172.21.80.1:5173/
+  ➜  Network: http://192.168.2.20:5173/
+  ➜  press h + enter to show help
+```
+
+Make sure your desktop machine and touch device are on the same network. On your touch device,
+navigate to `http://<server_ip>:5173` (e.g. `http://192.168.2.20:5173` here), to access the ComfyUI frontend.
+
+### Unit Test
 
-- `git clone https://github.com/comfyanonymous/ComfyUI_examples.git` to `tests-ui/ComfyUI_examples` or the EXAMPLE_REPO_PATH location specified in .env
 - `npm i` to install all dependencies
-- `npm run test:generate` to fetch `tests-ui/data/object_info.json`
-- `npm run test:generate:examples` to extract the example workflows
-- `npm run test` to execute all unit tests.
+- `npm run test:unit` to execute all unit tests.
 
-### LiteGraph
+### Component Test
+
+Component test verifies Vue components in `src/components/`.
+
+- `npm run test:component` to execute all component tests.
+
+### Playwright Test
+
+Playwright test verifies the whole app. See <https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/browser_tests/README.md> for details.
+
+### litegraph.js
 
 This repo is using litegraph package hosted on <https://github.com/Comfy-Org/litegraph.js>. Any changes to litegraph should be submitted in that repo instead.
 
-### Test litegraph changes
+#### Test litegraph.js changes
 
 - Run `npm link` in the local litegraph repo.
-- Run `npm uninstall @comfyorg/litegraph` in this repo.
 - Run `npm link @comfyorg/litegraph` in this repo.
 
 This will replace the litegraph package in this repo with the local litegraph repo.
 
-## Deploy
+### i18n
 
-- Option 1: Set `DEPLOY_COMFYUI_DIR` in `.env` and run `npm run deploy`.
-- Option 2: Copy everything under `dist/` to `ComfyUI/web/` in your ComfyUI checkout manually.
-
-## Publish release to ComfyUI main repo
-
-Run following command to publish a release to ComfyUI main repo. The script will create a new branch and do a commit to `web/` folder by checkout `dist.zip`
-from GitHub release.
-
-- `python scripts/main_repo_release.py <path_to_comfyui_main_repo> <version>`
+See [locales/README.md](src/locales/README.md) for details.

babel.config.json

@@ -1,8 +0,0 @@
-{
-	"presets": [
-		"@babel/preset-env"
-	],
-	"plugins": [
-		"babel-plugin-transform-import-meta"
-	]
-}

browser_tests/README.md

@@ -5,7 +5,7 @@ This document outlines the setup and usage of Playwright for testing the ComfyUI
 ## WARNING
 
 The browser tests will change the ComfyUI backend state, such as user settings and saved workflows.
-Please backup your ComfyUI data before running the tests locally.
+If `TEST_COMFYUI_DIR` in `.env` isn't set to your `(Comfy Path)/ComfyUI` directory, these changes won't be automatically restored.
 
 ## Setup
 
@@ -34,6 +34,8 @@ There are two ways to run the tests:
    ```
    This opens a user interface where you can select specific tests to run and inspect the test execution timeline.
 
+   To run the same test multiple times in Playwright's UI mode, you must launch the main ComfyUI process with the `--multi-user` flag.
+
    ![Playwright UI Mode](https://github.com/user-attachments/assets/6a1ebef0-90eb-4157-8694-f5ee94d03755)
 
 ## Screenshot Expectations

browser_tests/actionbar.spec.ts

@@ -1,18 +1,15 @@
 import type { Response } from '@playwright/test'
-import type { StatusWsMessage } from '../src/types/apiTypes.ts'
 import { expect, mergeTests } from '@playwright/test'
-import { comfyPageFixture } from './ComfyPage'
+
+import type { StatusWsMessage } from '../src/schemas/apiSchema.ts'
+import { comfyPageFixture } from './fixtures/ComfyPage'
 import { webSocketFixture } from './fixtures/ws.ts'
 
 const test = mergeTests(comfyPageFixture, webSocketFixture)
 
-test.describe('AppMenu', () => {
+test.describe('Actionbar', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
-  })
-
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
   })
 
   /**
@@ -23,12 +20,12 @@ test.describe('AppMenu', () => {
     ws
   }) => {
     // Enable change auto-queue mode
-    const queueOpts = await comfyPage.appMenu.queueButton.toggleOptions()
+    const queueOpts = await comfyPage.actionbar.queueButton.toggleOptions()
     expect(await queueOpts.getMode()).toBe('disabled')
     await queueOpts.setMode('change')
     await comfyPage.nextFrame()
     expect(await queueOpts.getMode()).toBe('change')
-    await comfyPage.appMenu.queueButton.toggleOptions()
+    await comfyPage.actionbar.queueButton.toggleOptions()
 
     // Intercept the prompt queue endpoint
     let promptNumber = 0
@@ -56,7 +53,9 @@ test.describe('AppMenu', () => {
           (n) => n.type === 'EmptyLatentImage'
         )
         node.widgets[0].value = value
-        window['app'].workflowManager.activeWorkflow.changeTracker.checkState()
+        window[
+          'app'
+        ].extensionManager.workflow.activeWorkflow.changeTracker.checkState()
       }, value)
     }
 
@@ -113,4 +112,15 @@ test.describe('AppMenu', () => {
     ).toBe(END)
     expect(promptNumber, 'queued prompt count should be 2').toBe(2)
   })
+
+  test('Can dock actionbar into top menu', async ({ comfyPage }) => {
+    await comfyPage.page.dragAndDrop(
+      '.actionbar .drag-handle',
+      '.comfyui-menu',
+      {
+        targetPosition: { x: 0, y: 0 }
+      }
+    )
+    expect(await comfyPage.actionbar.isDocked()).toBe(true)
+  })
 })

browser_tests/assets/collapsed_multiline.json

@@ -0,0 +1,37 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "CLIPTextEncode",
+      "pos": [20, 50],
+      "size": [400, 200],
+      "flags": { "collapsed": true },
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "clip",
+          "type": "CLIP",
+          "link": null,
+          "localized_name": "clip"
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": null,
+          "localized_name": "CONDITIONING"
+        }
+      ],
+      "properties": {},
+      "widgets_values": ["Should not be displayed."]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "version": 0.4
+}

browser_tests/assets/default.json

@@ -114,7 +114,7 @@
         { "name": "VAE", "type": "VAE", "links": [8], "slot_index": 2 }
       ],
       "properties": {},
-      "widgets_values": ["v1-5-pruned-emaonly.ckpt"]
+      "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
     }
   ],
   "links": [

browser_tests/assets/group_node_identical_nodes_hidden_inputs.json

@@ -0,0 +1,163 @@
+{
+  "last_node_id": 19,
+  "last_link_id": 14,
+  "nodes": [
+    {
+      "id": 19,
+      "type": "workflow>two_VAE_decode",
+      "pos": [
+        1368.800048828125,
+        768.7999877929688
+      ],
+      "size": [
+        418.1999816894531,
+        86
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "samples",
+          "type": "LATENT",
+          "link": null
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "VAEDecode IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {}
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    },
+    "node_versions": {},
+    "ue_links": [],
+    "groupNodes": {
+      "two_VAE_decode": {
+        "nodes": [
+          {
+            "id": -1,
+            "type": "VAEDecode",
+            "pos": [
+              1368.800048828125,
+              768.7999877929688
+            ],
+            "size": [
+              210,
+              46
+            ],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "name": "samples",
+                "type": "LATENT",
+                "link": null,
+                "localized_name": "samples"
+              },
+              {
+                "name": "vae",
+                "type": "VAE",
+                "link": null,
+                "localized_name": "vae"
+              }
+            ],
+            "outputs": [
+              {
+                "name": "IMAGE",
+                "type": "IMAGE",
+                "links": null,
+                "localized_name": "IMAGE"
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "VAEDecode"
+            },
+            "index": 0
+          },
+          {
+            "id": -1,
+            "type": "VAEDecode",
+            "pos": [
+              1368.800048828125,
+              873.7999877929688
+            ],
+            "size": [
+              210,
+              46
+            ],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "name": "samples",
+                "type": "LATENT",
+                "link": null,
+                "localized_name": "samples"
+              },
+              {
+                "name": "vae",
+                "type": "VAE",
+                "link": null,
+                "localized_name": "vae"
+              }
+            ],
+            "outputs": [
+              {
+                "name": "IMAGE",
+                "type": "IMAGE",
+                "links": null,
+                "localized_name": "IMAGE"
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "VAEDecode"
+            },
+            "index": 1
+          }
+        ],
+        "links": [],
+        "external": [],
+        "config": {
+          "1": {
+            "input": {
+              "samples": {
+                "visible": false
+              },
+              "vae": {
+                "visible": false
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/group_node_v1.3.3.json

@@ -0,0 +1,404 @@
+{
+  "last_node_id": 10,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "workflow>group_node",
+      "pos": {
+        "0": 26,
+        "1": 186
+      },
+      "size": {
+        "0": 400,
+        "1": 390
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "workflow>group_node"
+      },
+      "widgets_values": [
+        512,
+        512,
+        1,
+        "v1-5-pruned-emaonly.ckpt",
+        "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,",
+        "text, watermark",
+        156680208700286,
+        "randomize",
+        20,
+        8,
+        "euler",
+        "normal",
+        1,
+        "ComfyUI"
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "groupNodes": {
+      "group_node": {
+        "nodes": [
+          {
+            "id": -1,
+            "type": "EmptyLatentImage",
+            "pos": {
+              "0": 473,
+              "1": 609
+            },
+            "size": {
+              "0": 315,
+              "1": 106
+            },
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [
+              {
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": [],
+                "slot_index": 0
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "EmptyLatentImage"
+            },
+            "widgets_values": [
+              512,
+              512,
+              1
+            ],
+            "index": 0
+          },
+          {
+            "id": -1,
+            "type": "CheckpointLoaderSimple",
+            "pos": {
+              "0": 26,
+              "1": 474
+            },
+            "size": {
+              "0": 315,
+              "1": 98
+            },
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [],
+            "outputs": [
+              {
+                "name": "MODEL",
+                "type": "MODEL",
+                "links": [],
+                "slot_index": 0
+              },
+              {
+                "name": "CLIP",
+                "type": "CLIP",
+                "links": [],
+                "slot_index": 1
+              },
+              {
+                "name": "VAE",
+                "type": "VAE",
+                "links": [],
+                "slot_index": 2
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "CheckpointLoaderSimple"
+            },
+            "widgets_values": [
+              "v1-5-pruned-emaonly.ckpt"
+            ],
+            "index": 1
+          },
+          {
+            "id": -1,
+            "type": "CLIPTextEncode",
+            "pos": {
+              "0": 415,
+              "1": 186
+            },
+            "size": {
+              "0": 422.84503173828125,
+              "1": 164.31304931640625
+            },
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              {
+                "name": "clip",
+                "type": "CLIP",
+                "link": null
+              }
+            ],
+            "outputs": [
+              {
+                "name": "CONDITIONING",
+                "type": "CONDITIONING",
+                "links": [],
+                "slot_index": 0
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "CLIPTextEncode"
+            },
+            "widgets_values": [
+              "beautiful scenery nature glass bottle landscape, , purple galaxy bottle,"
+            ],
+            "index": 2
+          },
+          {
+            "id": -1,
+            "type": "CLIPTextEncode",
+            "pos": {
+              "0": 413,
+              "1": 389
+            },
+            "size": {
+              "0": 425.27801513671875,
+              "1": 180.6060791015625
+            },
+            "flags": {},
+            "order": 3,
+            "mode": 0,
+            "inputs": [
+              {
+                "name": "clip",
+                "type": "CLIP",
+                "link": null
+              }
+            ],
+            "outputs": [
+              {
+                "name": "CONDITIONING",
+                "type": "CONDITIONING",
+                "links": [],
+                "slot_index": 0
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "CLIPTextEncode"
+            },
+            "widgets_values": [
+              "text, watermark"
+            ],
+            "index": 3
+          },
+          {
+            "id": -1,
+            "type": "KSampler",
+            "pos": {
+              "0": 863,
+              "1": 186
+            },
+            "size": {
+              "0": 315,
+              "1": 262
+            },
+            "flags": {},
+            "order": 4,
+            "mode": 0,
+            "inputs": [
+              {
+                "name": "model",
+                "type": "MODEL",
+                "link": null
+              },
+              {
+                "name": "positive",
+                "type": "CONDITIONING",
+                "link": null
+              },
+              {
+                "name": "negative",
+                "type": "CONDITIONING",
+                "link": null
+              },
+              {
+                "name": "latent_image",
+                "type": "LATENT",
+                "link": null
+              }
+            ],
+            "outputs": [
+              {
+                "name": "LATENT",
+                "type": "LATENT",
+                "links": [],
+                "slot_index": 0
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "KSampler"
+            },
+            "widgets_values": [
+              156680208700286,
+              "randomize",
+              20,
+              8,
+              "euler",
+              "normal",
+              1
+            ],
+            "index": 4
+          },
+          {
+            "id": -1,
+            "type": "VAEDecode",
+            "pos": {
+              "0": 1209,
+              "1": 188
+            },
+            "size": {
+              "0": 210,
+              "1": 46
+            },
+            "flags": {},
+            "order": 5,
+            "mode": 0,
+            "inputs": [
+              {
+                "name": "samples",
+                "type": "LATENT",
+                "link": null
+              },
+              {
+                "name": "vae",
+                "type": "VAE",
+                "link": null
+              }
+            ],
+            "outputs": [
+              {
+                "name": "IMAGE",
+                "type": "IMAGE",
+                "links": [],
+                "slot_index": 0
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "VAEDecode"
+            },
+            "index": 5
+          },
+          {
+            "id": -1,
+            "type": "SaveImage",
+            "pos": {
+              "0": 1451,
+              "1": 189
+            },
+            "size": {
+              "0": 210,
+              "1": 58
+            },
+            "flags": {},
+            "order": 6,
+            "mode": 0,
+            "inputs": [
+              {
+                "name": "images",
+                "type": "IMAGE",
+                "link": null
+              }
+            ],
+            "outputs": [],
+            "properties": {},
+            "widgets_values": [
+              "ComfyUI"
+            ],
+            "index": 6
+          }
+        ],
+        "links": [
+          [
+            1,
+            1,
+            2,
+            0,
+            4,
+            "CLIP"
+          ],
+          [
+            1,
+            1,
+            3,
+            0,
+            4,
+            "CLIP"
+          ],
+          [
+            1,
+            0,
+            4,
+            0,
+            4,
+            "MODEL"
+          ],
+          [
+            2,
+            0,
+            4,
+            1,
+            6,
+            "CONDITIONING"
+          ],
+          [
+            3,
+            0,
+            4,
+            2,
+            7,
+            "CONDITIONING"
+          ],
+          [
+            0,
+            0,
+            4,
+            3,
+            5,
+            "LATENT"
+          ],
+          [
+            4,
+            0,
+            5,
+            0,
+            3,
+            "LATENT"
+          ],
+          [
+            1,
+            2,
+            5,
+            1,
+            4,
+            "VAE"
+          ],
+          [
+            5,
+            0,
+            6,
+            0,
+            8,
+            "IMAGE"
+          ]
+        ],
+        "external": []
+      }
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/missing_models.json

@@ -18,7 +18,7 @@
     {
       "name": "fake_model.safetensors",
       "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
-      "directory": "clip"
+      "directory": "text_encoders"
     }
   ],
   "version": 0.4

browser_tests/assets/missing_models_from_node_properties.json

@@ -0,0 +1,49 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 1,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "CheckpointLoaderSimple",
+      "pos": [256, 256],
+      "size": [315, 98],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "links": null
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "links": null
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple",
+        "models": [
+          {
+            "name": "fake_model.safetensors",
+            "url": "http://localhost:8188/api/devtools/fake_model.safetensors",
+            "directory": "text_encoders"
+          }
+        ]
+      },
+      "widgets_values": ["fake_model.safetensors"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {},
+  "version": 0.4
+}

browser_tests/assets/missing_nodes_converted_widget.json

@@ -0,0 +1,63 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "UNKNOWN NODE",
+      "pos": [
+        48,
+        86
+      ],
+      "size": {
+        "0": 358.80780029296875,
+        "1": 314.7989501953125
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "link": null,
+          "slot_index": 0
+        },
+        {
+          "name": "foo",
+          "type": "STRING",
+          "link": null,
+          "slot_index": 1,
+          "widget": {
+            "name": "foo"
+          }
+        }
+      ],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": [],
+          "slot_index": 0,
+          "shape": 6
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "UNKNOWN NODE"
+      },
+      "widgets_values": [
+        "wd-v1-4-moat-tagger-v2",
+        0.35,
+        0.85,
+        false,
+        false,
+        ""
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {},
+  "version": 0.4
+}

browser_tests/assets/mixed_graph_items.json

@@ -0,0 +1,227 @@
+{
+  "last_node_id": 3,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "KSampler",
+      "pos": {
+        "0": 420,
+        "1": 130
+      },
+      "size": {
+        "0": 315,
+        "1": 262
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": null
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [
+        0,
+        "randomize",
+        20,
+        8,
+        "euler",
+        "normal",
+        1
+      ]
+    },
+    {
+      "id": 3,
+      "type": "KSampler",
+      "pos": {
+        "0": 820,
+        "1": 130
+      },
+      "size": {
+        "0": 315,
+        "1": 262
+      },
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": null
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [
+        0,
+        "randomize",
+        20,
+        8,
+        "euler",
+        "normal",
+        1
+      ]
+    },
+    {
+      "id": 1,
+      "type": "KSampler",
+      "pos": {
+        "0": 30,
+        "1": 130
+      },
+      "size": {
+        "0": 315,
+        "1": 262
+      },
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": null
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [
+        0,
+        "randomize",
+        20,
+        8,
+        "euler",
+        "normal",
+        1
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [
+    {
+      "id": 0,
+      "title": "Group",
+      "bounding": [
+        406.9701232910156,
+        59.079444885253906,
+        335,
+        345.6000061035156
+      ],
+      "color": "#3f789e",
+      "font_size": 24,
+      "flags": {}
+    },
+    {
+      "id": 3,
+      "title": "Group Parent",
+      "bounding": [
+        796.9703979492188,
+        14.796443939208984,
+        355,
+        399.20001220703125
+      ],
+      "color": "#3f789e",
+      "font_size": 24,
+      "flags": {}
+    },
+    {
+      "id": 2,
+      "title": "Group Child",
+      "bounding": [
+        806.9703979492188,
+        58.39643096923828,
+        335,
+        345.6000061035156
+      ],
+      "color": "#3f789e",
+      "font_size": 24,
+      "flags": {}
+    }
+  ],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/note_nodes.json

@@ -0,0 +1,55 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "Note",
+      "pos": [
+        50, 50
+      ],
+      "size": [
+        322.3645935058594,
+        167.91612243652344
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": [
+        "Foo\n123"
+      ],
+      "color": "#432",
+      "bgcolor": "#653"
+    },
+    {
+      "id": 2,
+      "type": "MarkdownNote",
+      "pos": [
+        50, 300
+      ],
+      "size": [
+        320.9985656738281,
+        179.52735900878906
+      ],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {},
+      "widgets_values": [
+        "# Bar\n123"
+      ],
+      "color": "#432",
+      "bgcolor": "#653"
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {},
+  "version": 0.4
+}

browser_tests/assets/old_workflow_converted_input.json

@@ -0,0 +1,128 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 1,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "ControlNetApplyAdvanced",
+      "pos": {
+        "0": 449,
+        "1": 204
+      },
+      "size": [
+        340.20001220703125,
+        166
+      ],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "control_net",
+          "type": "CONTROL_NET",
+          "link": null
+        },
+        {
+          "name": "image",
+          "type": "IMAGE",
+          "link": null
+        },
+        {
+          "name": "strength",
+          "type": "FLOAT",
+          "link": 1,
+          "widget": {
+            "name": "strength"
+          }
+        }
+      ],
+      "outputs": [
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "links": null
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ControlNetApplyAdvanced"
+      },
+      "widgets_values": [
+        1,
+        0,
+        1
+      ]
+    },
+    {
+      "id": 2,
+      "type": "PrimitiveNode",
+      "pos": {
+        "0": 177,
+        "1": 265
+      },
+      "size": [
+        210,
+        82
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "FLOAT",
+          "type": "FLOAT",
+          "links": [
+            1
+          ],
+          "widget": {
+            "name": "strength"
+          }
+        }
+      ],
+      "properties": {
+        "Run widget replace on values": false
+      },
+      "widgets_values": [
+        1,
+        "fixed"
+      ]
+    }
+  ],
+  "links": [
+    [
+      1,
+      2,
+      0,
+      1,
+      4,
+      "FLOAT"
+    ]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": {
+        "0": 47.541666666666515,
+        "1": 186.9375
+      }
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/optional_combo_input.json

@@ -0,0 +1,37 @@
+{
+  "last_node_id": 16,
+  "last_link_id": 17,
+  "nodes": [
+    {
+      "id": 16,
+      "type": "DevToolsNodeWithOptionalComboInput",
+      "pos": [1605, 480],
+      "size": [378, 58],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "DevToolsNodeWithOptionalComboInput"
+      },
+      "widgets_values": ["Random Unique Option 1740551583.3507228"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 2.0875710456451313,
+      "offset": [-1311.5753953400676, -176.7620403697558]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/oversized_group.json

@@ -0,0 +1,90 @@
+{
+  "last_node_id": 9,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 3,
+      "type": "KSampler",
+      "pos": [
+        37,
+        98
+      ],
+      "size": [
+        315,
+        262
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": null
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [
+        156680208700286,
+        "randomize",
+        20,
+        8,
+        "euler",
+        "normal",
+        1
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [
+    {
+      "id": 1,
+      "title": "Group",
+      "bounding": [
+        23,
+        23,
+        900,
+        825
+      ],
+      "color": "#3f789e",
+      "font_size": 24,
+      "flags": {}
+    }
+  ],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/primitive_node_unconnected.json

@@ -0,0 +1,104 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 1,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "KSampler",
+      "pos": {
+        "0": 304.3653259277344,
+        "1": 42.15586471557617
+      },
+      "size": [
+        315,
+        262
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "model",
+          "type": "MODEL",
+          "link": null
+        },
+        {
+          "name": "positive",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "negative",
+          "type": "CONDITIONING",
+          "link": null
+        },
+        {
+          "name": "latent_image",
+          "type": "LATENT",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null,
+          "shape": 3
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [
+        0,
+        "randomize",
+        20,
+        8,
+        "euler",
+        "normal",
+        1
+      ]
+    },
+    {
+      "id": 1,
+      "type": "PrimitiveNode",
+      "pos": {
+        "0": 14,
+        "1": 43
+      },
+      "size": [
+        203.1999969482422,
+        40.368401303242536
+      ],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "connect to widget input",
+          "type": "*",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Run widget replace on values": false
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/primitive_node_unconnected_dom_widget.json

@@ -0,0 +1,59 @@
+{
+  "last_node_id": 3,
+  "last_link_id": 1,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "PrimitiveNode",
+      "pos": [14, 43],
+      "size": [203.1999969482422, 40.36840057373047],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "connect to widget input",
+          "type": "*",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Run widget replace on values": false
+      }
+    },
+    {
+      "id": 2,
+      "type": "CLIPTextEncode",
+      "pos": [306.2463684082031, 45.30042266845703],
+      "size": [400, 200],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "clip",
+          "type": "CLIP",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CLIPTextEncode"
+      },
+      "widgets_values": [""]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {},
+  "version": 0.4
+}

browser_tests/assets/remote_widget.json

@@ -0,0 +1,48 @@
+{
+  "last_node_id": 15,
+  "last_link_id": 10,
+  "nodes": [
+    {
+      "id": 15,
+      "type": "DevToolsRemoteWidgetNode",
+      "pos": [
+        495,
+        735
+      ],
+      "size": [
+        315,
+        58
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "DevToolsRemoteWidgetNode"
+      },
+      "widgets_values": [
+        "v1-5-pruned-emaonly-fp16.safetensors"
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 0.8008869919566275,
+      "offset": [
+        538.9801226576359,
+        -55.24554581806672
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/renamed_converted_widget.json

@@ -0,0 +1,101 @@
+{
+  "last_node_id": 4,
+  "last_link_id": 2,
+  "nodes": [
+    {
+      "id": 3,
+      "type": "EmptyLatentImage",
+      "pos": [
+        380.51641845703125,
+        191.39659118652344
+      ],
+      "size": [
+        315,
+        106
+      ],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "breadth",
+          "type": "INT",
+          "widget": {
+            "name": "breadth"
+          },
+          "link": 2
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "EmptyLatentImage"
+      },
+      "widgets_values": [
+        512,
+        512,
+        1
+      ]
+    },
+    {
+      "id": 4,
+      "type": "PrimitiveNode",
+      "pos": [
+        73.6164321899414,
+        197.9966278076172
+      ],
+      "size": [
+        210,
+        82
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "INT",
+          "type": "INT",
+          "widget": {
+            "name": "bredth"
+          },
+          "links": [
+            2
+          ]
+        }
+      ],
+      "title": "breadth",
+      "properties": {
+        "Run widget replace on values": false
+      },
+      "widgets_values": [
+        512,
+        "fixed"
+      ]
+    }
+  ],
+  "links": [
+    [
+      2,
+      4,
+      0,
+      3,
+      0,
+      "INT"
+    ]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "VHS_latentpreview": true,
+    "VHS_latentpreviewrate": 0,
+    "VHS_MetadataImage": false,
+    "VHS_KeepIntermediate": false
+  },
+  "version": 0.4
+}

browser_tests/assets/reroute/native_reroute.json

@@ -0,0 +1,110 @@
+{
+  "last_node_id": 25,
+  "last_link_id": 33,
+  "nodes": [
+    {
+      "id": 4,
+      "type": "CheckpointLoaderSimple",
+      "pos": [160, 240],
+      "size": [315, 98],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "slot_index": 0,
+          "links": []
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "slot_index": 1,
+          "links": []
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "slot_index": 2,
+          "links": [33]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["v1-5-pruned-emaonly.safetensors"]
+    },
+    {
+      "id": 19,
+      "type": "VAEDecode",
+      "pos": [623.0897216796875, 324.64453125],
+      "size": [210, 46],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "samples",
+          "type": "LATENT",
+          "link": null
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": 33
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "VAEDecode"
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [[33, 4, 2, 19, 1, "VAE"]],
+  "floatingLinks": [
+    {
+      "id": 6,
+      "origin_id": 4,
+      "origin_slot": 2,
+      "target_id": -1,
+      "target_slot": -1,
+      "type": "VAE",
+      "parentId": 1
+    }
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "reroutes": [
+      {
+        "id": 1,
+        "pos": [545.4541015625, 295.85760498046875],
+        "linkIds": [],
+        "floating": {
+          "slotType": "output"
+        }
+      },
+      {
+        "id": 2,
+        "pos": [543.8283081054688, 355.45849609375],
+        "linkIds": [33]
+      }
+    ],
+    "linkExtensions": [
+      {
+        "id": 33,
+        "parentId": 2
+      }
+    ]
+  },
+  "version": 0.4
+}

browser_tests/assets/simple_slider.json

@@ -0,0 +1,49 @@
+{
+  "last_node_id": 12,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 12,
+      "type": "DevToolsSimpleSlider",
+      "pos": [
+        50,
+        50
+      ],
+      "size": [
+        315,
+        58
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "FLOAT",
+          "type": "FLOAT",
+          "links": null,
+          "label": "FLOAT"
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "DevToolsSimpleSlider"
+      },
+      "widgets_values": [
+        0.5
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/single_connected_reroute_node.json

@@ -0,0 +1,116 @@
+{
+  "last_node_id": 16,
+  "last_link_id": 18,
+  "nodes": [
+    {
+      "id": 12,
+      "type": "VAEDecode",
+      "pos": [620, 260],
+      "size": [210, 46],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "samples",
+          "type": "LATENT",
+          "link": null
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": 18
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "VAEDecode"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 13,
+      "type": "Reroute",
+      "pos": [510, 280],
+      "size": [75, 26],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "",
+          "type": "*",
+          "link": 13
+        }
+      ],
+      "outputs": [
+        {
+          "name": "",
+          "type": "VAE",
+          "links": [18],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "showOutputText": false,
+        "horizontal": false
+      }
+    },
+    {
+      "id": 4,
+      "type": "CheckpointLoaderSimple",
+      "pos": [160, 240],
+      "size": [315, 98],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "links": [],
+          "slot_index": 0
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "links": [],
+          "slot_index": 1
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "links": [13],
+          "slot_index": 2
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["v1-5-pruned-emaonly.safetensors"]
+    }
+  ],
+  "links": [
+    [13, 4, 2, 13, 0, "*"],
+    [18, 13, 0, 12, 1, "VAE"]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": {
+        "0": 0,
+        "1": 0
+      }
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/string_input.json

@@ -0,0 +1,42 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "DevToolsNodeWithStringInput",
+      "pos": [
+        15,
+        48
+      ],
+      "size": [
+        315,
+        58
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "DevToolsNodeWithStringInput"
+      },
+      "widgets_values": [
+        ""
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/widgets/boolean_widget.json

@@ -0,0 +1,35 @@
+{
+  "last_node_id": 11,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 11,
+      "type": "DevToolsNodeWithBooleanInput",
+      "pos": [
+        0,
+        30
+      ],
+      "size": [
+        315,
+        58
+      ],
+      "flags": {
+        "collapsed": false
+      },
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "DevToolsNodeWithBooleanInput"
+      },
+      "widgets_values": [
+        false
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "version": 0.4
+}

browser_tests/assets/widgets/load_audio_widget.json

@@ -0,0 +1,32 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "LoadAudio",
+      "pos": [41.5296516418457, 16.930862426757812],
+      "size": [315, 82],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "AUDIO",
+          "type": "AUDIO",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadAudio"
+      },
+      "widgets_values": [null, ""]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {},
+  "version": 0.4
+}

browser_tests/assets/widgets/load_image_widget.json

@@ -0,0 +1,46 @@
+{
+  "last_node_id": 10,
+  "last_link_id": 10,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "LoadImage",
+      "pos": [
+        50,
+        50
+      ],
+      "size": [
+        315,
+        314
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": [
+        "example.png",
+        "image"
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {},
+  "version": 0.4
+}

browser_tests/assets/widgets/seed_widget.json

@@ -0,0 +1,43 @@
+{
+  "last_node_id": 10,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "DevToolsNodeWithSeedInput",
+      "pos": [
+        20,
+        50
+      ],
+      "size": [
+        315,
+        82
+      ],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "DevToolsNodeWithSeedInput"
+      },
+      "widgets_values": [
+        0,
+        "randomize"
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/browserTabTitle.spec.ts

@@ -1,46 +1,41 @@
 import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './ComfyPage'
+
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Browser tab title', () => {
   test.describe('Beta Menu', () => {
     test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
-    })
-
-    test.afterEach(async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
     })
 
     test('Can display workflow name', async ({ comfyPage }) => {
       const workflowName = await comfyPage.page.evaluate(async () => {
-        return window['app'].workflowManager.activeWorkflow.name
+        return window['app'].extensionManager.workflow.activeWorkflow.filename
       })
-      // Note: unsaved workflow name is always prepended with "*".
-      expect(await comfyPage.page.title()).toBe(`*${workflowName}`)
+      expect(await comfyPage.page.title()).toBe(`*${workflowName} - ComfyUI`)
     })
 
-    // Broken by https://github.com/Comfy-Org/ComfyUI_frontend/pull/893
-    // Release blocker for v1.3.0
+    // Failing on CI
+    // Cannot reproduce locally
     test.skip('Can display workflow name with unsaved changes', async ({
       comfyPage
     }) => {
       const workflowName = await comfyPage.page.evaluate(async () => {
-        return window['app'].workflowManager.activeWorkflow.name
+        return window['app'].extensionManager.workflow.activeWorkflow.filename
       })
-      // Note: unsaved workflow name is always prepended with "*".
-      expect(await comfyPage.page.title()).toBe(`*${workflowName}`)
+      expect(await comfyPage.page.title()).toBe(`${workflowName} - ComfyUI`)
 
-      await comfyPage.menu.saveWorkflow('test')
-      expect(await comfyPage.page.title()).toBe('test')
+      await comfyPage.menu.topbar.saveWorkflow('test')
+      expect(await comfyPage.page.title()).toBe('test - ComfyUI')
 
       const textBox = comfyPage.widgetTextBox
       await textBox.fill('Hello World')
       await comfyPage.clickEmptySpace()
-      expect(await comfyPage.page.title()).toBe(`*test`)
+      expect(await comfyPage.page.title()).toBe(`*test - ComfyUI`)
 
       // Delete the saved workflow for cleanup.
       await comfyPage.page.evaluate(async () => {
-        window['app'].workflowManager.activeWorkflow.delete()
+        return window['app'].extensionManager.workflow.activeWorkflow.delete()
       })
     })
   })

browser_tests/changeTracker.spec.ts

@@ -0,0 +1,167 @@
+import {
+  ComfyPage,
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from './fixtures/ComfyPage'
+
+async function beforeChange(comfyPage: ComfyPage) {
+  await comfyPage.page.evaluate(() => {
+    window['app'].canvas.emitBeforeChange()
+  })
+}
+async function afterChange(comfyPage: ComfyPage) {
+  await comfyPage.page.evaluate(() => {
+    window['app'].canvas.emitAfterChange()
+  })
+}
+
+test.describe('Change Tracker', () => {
+  test.describe('Undo/Redo', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+      await comfyPage.setupWorkflowsDirectory({})
+    })
+
+    test('Can undo multiple operations', async ({ comfyPage }) => {
+      expect(await comfyPage.getUndoQueueSize()).toBe(0)
+      expect(await comfyPage.getRedoQueueSize()).toBe(0)
+
+      // Save, confirm no errors & workflow modified flag removed
+      await comfyPage.menu.topbar.saveWorkflow('undo-redo-test')
+      expect(await comfyPage.getToastErrorCount()).toBe(0)
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
+      expect(await comfyPage.getUndoQueueSize()).toBe(0)
+      expect(await comfyPage.getRedoQueueSize()).toBe(0)
+
+      const node = (await comfyPage.getFirstNodeRef())!
+      await node.click('title')
+      await node.click('collapse')
+      await expect(node).toBeCollapsed()
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(true)
+      expect(await comfyPage.getUndoQueueSize()).toBe(1)
+      expect(await comfyPage.getRedoQueueSize()).toBe(0)
+
+      await comfyPage.ctrlB()
+      await expect(node).toBeBypassed()
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(true)
+      expect(await comfyPage.getUndoQueueSize()).toBe(2)
+      expect(await comfyPage.getRedoQueueSize()).toBe(0)
+
+      await comfyPage.ctrlZ()
+      await expect(node).not.toBeBypassed()
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(true)
+      expect(await comfyPage.getUndoQueueSize()).toBe(1)
+      expect(await comfyPage.getRedoQueueSize()).toBe(1)
+
+      await comfyPage.ctrlZ()
+      await expect(node).not.toBeCollapsed()
+      expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
+      expect(await comfyPage.getUndoQueueSize()).toBe(0)
+      expect(await comfyPage.getRedoQueueSize()).toBe(2)
+    })
+  })
+
+  test('Can group multiple change actions into a single transaction', async ({
+    comfyPage
+  }) => {
+    const node = (await comfyPage.getFirstNodeRef())!
+    expect(node).toBeTruthy()
+    await expect(node).not.toBeCollapsed()
+    await expect(node).not.toBeBypassed()
+
+    // Make changes outside set
+    // Bypass + collapse node
+    await node.click('title')
+    await node.click('collapse')
+    await comfyPage.ctrlB()
+    await expect(node).toBeCollapsed()
+    await expect(node).toBeBypassed()
+
+    // Undo, undo, ensure both changes undone
+    await comfyPage.ctrlZ()
+    await expect(node).not.toBeBypassed()
+    await expect(node).toBeCollapsed()
+    await comfyPage.ctrlZ()
+    await expect(node).not.toBeBypassed()
+    await expect(node).not.toBeCollapsed()
+
+    // Prevent clicks registering a double-click
+    await comfyPage.clickEmptySpace()
+    await node.click('title')
+
+    // Run again, but within a change transaction
+    await beforeChange(comfyPage)
+
+    await node.click('collapse')
+    await comfyPage.ctrlB()
+    await expect(node).toBeCollapsed()
+    await expect(node).toBeBypassed()
+
+    // End transaction
+    await afterChange(comfyPage)
+
+    // Ensure undo reverts both changes
+    await comfyPage.ctrlZ()
+    await expect(node).not.toBeBypassed()
+    await expect(node).not.toBeCollapsed()
+  })
+
+  test('Can nest multiple change transactions without adding undo steps', async ({
+    comfyPage
+  }) => {
+    const node = (await comfyPage.getFirstNodeRef())!
+    const bypassAndPin = async () => {
+      await beforeChange(comfyPage)
+      await comfyPage.ctrlB()
+      await expect(node).toBeBypassed()
+      await comfyPage.page.keyboard.press('KeyP')
+      await comfyPage.nextFrame()
+      await expect(node).toBePinned()
+      await afterChange(comfyPage)
+    }
+
+    const collapse = async () => {
+      await beforeChange(comfyPage)
+      await node.click('collapse', { moveMouseToEmptyArea: true })
+      await expect(node).toBeCollapsed()
+      await afterChange(comfyPage)
+    }
+
+    const multipleChanges = async () => {
+      await beforeChange(comfyPage)
+      // Call other actions that uses begin/endChange
+      await node.click('title')
+      await collapse()
+      await bypassAndPin()
+      await afterChange(comfyPage)
+    }
+
+    await multipleChanges()
+
+    await comfyPage.ctrlZ()
+    await expect(node).not.toBeBypassed()
+    await expect(node).not.toBePinned()
+    await expect(node).not.toBeCollapsed()
+
+    await comfyPage.ctrlY()
+    await expect(node).toBeBypassed()
+    await expect(node).toBePinned()
+    await expect(node).toBeCollapsed()
+  })
+
+  test('Can detect changes in workflow.extra', async ({ comfyPage }) => {
+    expect(await comfyPage.getUndoQueueSize()).toBe(0)
+    await comfyPage.page.evaluate(() => {
+      window['app'].graph.extra.foo = 'bar'
+    })
+    // Click empty space to trigger a change detection.
+    await comfyPage.clickEmptySpace()
+    expect(await comfyPage.getUndoQueueSize()).toBe(1)
+  })
+
+  test('Ignores changes in workflow.ds', async ({ comfyPage }) => {
+    expect(await comfyPage.getUndoQueueSize()).toBe(0)
+    await comfyPage.pan({ x: 10, y: 10 })
+    expect(await comfyPage.getUndoQueueSize()).toBe(0)
+  })
+})

browser_tests/colorPalette.spec.ts

@@ -1,7 +1,9 @@
 import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './ComfyPage'
 
-const customColorPalettes = {
+import type { Palette } from '../src/schemas/colorPaletteSchema'
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
+
+const customColorPalettes: Record<string, Palette> = {
   obsidian: {
     version: 102,
     id: 'obsidian',
@@ -127,29 +129,62 @@ const customColorPalettes = {
         'tr-odd-bg-color': 'rgba(19,19,19,.9)'
       }
     }
+  },
+  // A custom light theme with fg color red
+  light_red: {
+    id: 'light_red',
+    name: 'Light Red',
+    light_theme: true,
+    colors: {
+      node_slot: {},
+      litegraph_base: {},
+      comfy_base: {
+        'fg-color': '#ff0000'
+      }
+    }
   }
 }
 
 test.describe('Color Palette', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.CustomColorPalettes', customColorPalettes)
-  })
-
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.CustomColorPalettes', {})
-    await comfyPage.setSetting('Comfy.ColorPalette', 'dark')
-    await comfyPage.setSetting('Comfy.Node.Opacity', 1.0)
-  })
-
   test('Can show custom color palette', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.CustomColorPalettes', customColorPalettes)
+    // Reload to apply the new setting. Setting Comfy.CustomColorPalettes directly
+    // doesn't update the store immediately.
+    await comfyPage.setup()
+
+    await comfyPage.loadWorkflow('every_node_color')
+    await comfyPage.setSetting('Comfy.ColorPalette', 'obsidian_dark')
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'custom-color-palette-obsidian-dark-all-colors.png'
+    )
+    await comfyPage.setSetting('Comfy.ColorPalette', 'light_red')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'custom-color-palette-light-red.png'
+    )
+
+    await comfyPage.setSetting('Comfy.ColorPalette', 'dark')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('default-color-palette.png')
+  })
+
+  test('Can add custom color palette', async ({ comfyPage }) => {
+    await comfyPage.page.evaluate((p) => {
+      window['app'].extensionManager.colorPalette.addCustomColorPalette(p)
+    }, customColorPalettes.obsidian_dark)
+    expect(await comfyPage.getToastErrorCount()).toBe(0)
+
+    await comfyPage.setSetting('Comfy.ColorPalette', 'obsidian_dark')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'custom-color-palette-obsidian-dark.png'
+    )
+    // Legacy `custom_` prefix is still supported
     await comfyPage.setSetting('Comfy.ColorPalette', 'custom_obsidian_dark')
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'custom-color-palette-obsidian-dark.png'
     )
-    await comfyPage.setSetting('Comfy.ColorPalette', 'dark')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('default-color-palette.png')
   })
 })
 
@@ -158,11 +193,6 @@ test.describe('Node Color Adjustments', () => {
     await comfyPage.loadWorkflow('every_node_color')
   })
 
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.Node.Opacity', 1.0)
-    await comfyPage.setSetting('Comfy.ColorPalette', 'dark')
-  })
-
   test('should adjust opacity via node opacity setting', async ({
     comfyPage
   }) => {
@@ -203,7 +233,7 @@ test.describe('Node Color Adjustments', () => {
     const workflow = await comfyPage.page.evaluate(() => {
       return localStorage.getItem('workflow')
     })
-    for (const node of JSON.parse(workflow).nodes) {
+    for (const node of JSON.parse(workflow ?? '{}').nodes) {
       if (node.bgcolor) expect(node.bgcolor).not.toMatch(/hsla/)
       if (node.color) expect(node.color).not.toMatch(/hsla/)
     }
@@ -222,7 +252,7 @@ test.describe('Node Color Adjustments', () => {
       await comfyPage.setSetting('Comfy.ColorPalette', 'light')
       await comfyPage.setSetting('Comfy.Node.Opacity', 0.3)
       const node = await comfyPage.getFirstNodeRef()
-      await node.clickContextMenuOption('Colors')
+      await node?.clickContextMenuOption('Colors')
     })
 
     test('should persist color adjustments when changing custom node colors', async ({

browser_tests/commands.spec.ts

@@ -0,0 +1,50 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
+
+test.describe('Keybindings', () => {
+  test('Should execute command', async ({ comfyPage }) => {
+    await comfyPage.registerCommand('TestCommand', () => {
+      window['foo'] = true
+    })
+
+    await comfyPage.executeCommand('TestCommand')
+    expect(await comfyPage.page.evaluate(() => window['foo'])).toBe(true)
+  })
+
+  test('Should execute async command', async ({ comfyPage }) => {
+    await comfyPage.registerCommand('TestCommand', async () => {
+      await new Promise<void>((resolve) =>
+        setTimeout(() => {
+          window['foo'] = true
+          resolve()
+        }, 5)
+      )
+    })
+
+    await comfyPage.executeCommand('TestCommand')
+    expect(await comfyPage.page.evaluate(() => window['foo'])).toBe(true)
+  })
+
+  test('Should handle command errors', async ({ comfyPage }) => {
+    await comfyPage.registerCommand('TestCommand', () => {
+      throw new Error('Test error')
+    })
+
+    await comfyPage.executeCommand('TestCommand')
+    await expect(comfyPage.page.locator('.p-toast')).toBeVisible()
+  })
+
+  test('Should handle async command errors', async ({ comfyPage }) => {
+    await comfyPage.registerCommand('TestCommand', async () => {
+      await new Promise<void>((resolve, reject) =>
+        setTimeout(() => {
+          reject(new Error('Test error'))
+        }, 5)
+      )
+    })
+
+    await comfyPage.executeCommand('TestCommand')
+    await expect(comfyPage.page.locator('.p-toast')).toBeVisible()
+  })
+})

browser_tests/copyPaste.spec.ts

@@ -1,5 +1,6 @@
 import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './ComfyPage'
+
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Copy Paste', () => {
   test('Can copy and paste node', async ({ comfyPage }) => {
@@ -10,28 +11,28 @@ test.describe('Copy Paste', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('copied-node.png')
   })
 
+  test('Can copy and paste node with link', async ({ comfyPage }) => {
+    await comfyPage.clickTextEncodeNode1()
+    await comfyPage.page.mouse.move(10, 10)
+    await comfyPage.ctrlC()
+    await comfyPage.page.keyboard.press('Control+Shift+V')
+    await expect(comfyPage.canvas).toHaveScreenshot('copied-node-with-link.png')
+  })
+
   test('Can copy and paste text', async ({ comfyPage }) => {
     const textBox = comfyPage.widgetTextBox
     await textBox.click()
     const originalString = await textBox.inputValue()
     await textBox.selectText()
-    await comfyPage.ctrlC()
-    await comfyPage.ctrlV()
-    await comfyPage.ctrlV()
+    await comfyPage.ctrlC(null)
+    await comfyPage.ctrlV(null)
+    await comfyPage.ctrlV(null)
     const resultString = await textBox.inputValue()
     expect(resultString).toBe(originalString + originalString)
   })
 
   test('Can copy and paste widget value', async ({ comfyPage }) => {
     // Copy width value (512) from empty latent node to KSampler's seed.
-    // Empty latent node's width
-    await comfyPage.canvas.click({
-      position: {
-        x: 718,
-        y: 643
-      }
-    })
-    await comfyPage.ctrlC()
     // KSampler's seed
     await comfyPage.canvas.click({
       position: {
@@ -39,7 +40,15 @@ test.describe('Copy Paste', () => {
         y: 281
       }
     })
-    await comfyPage.ctrlV()
+    await comfyPage.ctrlC(null)
+    // Empty latent node's width
+    await comfyPage.canvas.click({
+      position: {
+        x: 718,
+        y: 643
+      }
+    })
+    await comfyPage.ctrlV(null)
     await comfyPage.page.keyboard.press('Enter')
     await expect(comfyPage.canvas).toHaveScreenshot('copied-widget-value.png')
   })
@@ -51,14 +60,14 @@ test.describe('Copy Paste', () => {
     comfyPage
   }) => {
     await comfyPage.clickEmptyLatentNode()
-    await comfyPage.ctrlC()
+    await comfyPage.ctrlC(null)
     const textBox = comfyPage.widgetTextBox
     await textBox.click()
     await textBox.inputValue()
     await textBox.selectText()
-    await comfyPage.ctrlC()
-    await comfyPage.ctrlV()
-    await comfyPage.ctrlV()
+    await comfyPage.ctrlC(null)
+    await comfyPage.ctrlV(null)
+    await comfyPage.ctrlV(null)
     await expect(comfyPage.canvas).toHaveScreenshot(
       'paste-in-text-area-with-node-previously-copied.png'
     )
@@ -69,10 +78,10 @@ test.describe('Copy Paste', () => {
     await textBox.click()
     await textBox.inputValue()
     await textBox.selectText()
-    await comfyPage.ctrlC()
+    await comfyPage.ctrlC(null)
     // Unfocus textbox.
     await comfyPage.page.mouse.click(10, 10)
-    await comfyPage.ctrlV()
+    await comfyPage.ctrlV(null)
     await expect(comfyPage.canvas).toHaveScreenshot('no-node-copied.png')
   })
 
@@ -86,4 +95,23 @@ test.describe('Copy Paste', () => {
     await comfyPage.page.keyboard.up('Alt')
     await expect(comfyPage.canvas).toHaveScreenshot('drag-copy-copied-node.png')
   })
+
+  test('Can undo paste multiple nodes as single action', async ({
+    comfyPage
+  }) => {
+    const initialCount = await comfyPage.getGraphNodesCount()
+    expect(initialCount).toBeGreaterThan(1)
+    await comfyPage.canvas.click()
+    await comfyPage.ctrlA()
+    await comfyPage.page.mouse.move(10, 10)
+    await comfyPage.ctrlC()
+    await comfyPage.ctrlV()
+
+    const pasteCount = await comfyPage.getGraphNodesCount()
+    expect(pasteCount).toBe(initialCount * 2)
+
+    await comfyPage.ctrlZ()
+    const undoCount = await comfyPage.getGraphNodesCount()
+    expect(undoCount).toBe(initialCount)
+  })
 })

browser_tests/dialog.spec.ts

@@ -1,5 +1,7 @@
-import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './ComfyPage'
+import { Locator, expect } from '@playwright/test'
+
+import type { Keybinding } from '../src/schemas/keyBindingSchema'
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Load workflow warning', () => {
   test('Should display a warning when loading a workflow with missing nodes', async ({
@@ -36,11 +38,24 @@ test.describe('Execution error', () => {
   }) => {
     await comfyPage.loadWorkflow('execution_error')
     await comfyPage.queueButton.click()
+    await comfyPage.nextFrame()
 
     // Wait for the element with the .comfy-execution-error selector to be visible
     const executionError = comfyPage.page.locator('.comfy-error-report')
     await expect(executionError).toBeVisible()
   })
+
+  test('Can display Issue Report form', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('execution_error')
+    await comfyPage.queueButton.click()
+    await comfyPage.nextFrame()
+
+    await comfyPage.page.getByLabel('Help Fix This').click()
+    const issueReportForm = comfyPage.page.getByText(
+      'Submit Error Report (Optional)'
+    )
+    await expect(issueReportForm).toBeVisible()
+  })
 })
 
 test.describe('Missing models warning', () => {
@@ -53,6 +68,75 @@ test.describe('Missing models warning', () => {
 
   test('Should display a warning when missing models are found', async ({
     comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('missing_models')
+
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
+
+    const downloadButton = missingModelsWarning.getByLabel('Download')
+    await expect(downloadButton).toBeVisible()
+  })
+
+  test('Should display a warning when missing models are found in node properties', async ({
+    comfyPage
+  }) => {
+    // Load workflow that has a node with models metadata at the node level
+    await comfyPage.loadWorkflow('missing_models_from_node_properties')
+
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
+
+    const downloadButton = missingModelsWarning.getByLabel('Download')
+    await expect(downloadButton).toBeVisible()
+  })
+
+  test('Should not display a warning when no missing models are found', async ({
+    comfyPage
+  }) => {
+    const modelFoldersRes = {
+      status: 200,
+      body: JSON.stringify([
+        {
+          name: 'text_encoders',
+          folders: ['ComfyUI/models/text_encoders']
+        }
+      ])
+    }
+    comfyPage.page.route(
+      '**/api/experiment/models',
+      (route) => route.fulfill(modelFoldersRes),
+      { times: 1 }
+    )
+
+    // Reload page to trigger indexing of model folders
+    await comfyPage.setup()
+
+    const clipModelsRes = {
+      status: 200,
+      body: JSON.stringify([
+        {
+          name: 'fake_model.safetensors',
+          pathIndex: 0
+        }
+      ])
+    }
+    comfyPage.page.route(
+      '**/api/experiment/models/text_encoders',
+      (route) => route.fulfill(clipModelsRes),
+      { times: 1 }
+    )
+
+    await comfyPage.loadWorkflow('missing_models')
+
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).not.toBeVisible()
+  })
+
+  // Flaky test after parallelization
+  // https://github.com/Comfy-Org/ComfyUI_frontend/pull/1400
+  test.skip('Should download missing model when clicking download button', async ({
+    comfyPage
   }) => {
     // The fake_model.safetensors is served by
     // https://github.com/Comfy-Org/ComfyUI_devtools/blob/main/__init__.py
@@ -63,35 +147,165 @@ test.describe('Missing models warning', () => {
 
     const downloadButton = comfyPage.page.getByLabel('Download')
     await expect(downloadButton).toBeVisible()
+    const downloadPromise = comfyPage.page.waitForEvent('download')
     await downloadButton.click()
 
-    const downloadComplete = comfyPage.page.locator('.download-complete')
-    await expect(downloadComplete).toBeVisible()
+    const download = await downloadPromise
+    expect(download.suggestedFilename()).toBe('fake_model.safetensors')
   })
 
-  test('Can configure download folder', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('missing_models')
+  test.describe('Do not show again checkbox', () => {
+    let checkbox: Locator
+    let closeButton: Locator
 
-    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
-    await expect(missingModelsWarning).toBeVisible()
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning',
+        true
+      )
+      await comfyPage.loadWorkflow('missing_models')
 
-    const folderSelectToggle = comfyPage.page.locator(
-      '.model-path-select-checkbox'
-    )
-    const folderSelect = comfyPage.page.locator('.model-path-select')
-    await expect(folderSelectToggle).toBeVisible()
-    await expect(folderSelect).not.toBeVisible()
+      checkbox = comfyPage.page.getByLabel("Don't show this again")
+      closeButton = comfyPage.page.getByLabel('Close')
+    })
 
-    await folderSelectToggle.click() // show the selectors
-    await expect(folderSelect).toBeVisible()
+    test('Should disable warning dialog when checkbox is checked', async ({
+      comfyPage
+    }) => {
+      await checkbox.click()
+      const changeSettingPromise = comfyPage.page.waitForRequest(
+        '**/api/settings/Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      await closeButton.click()
+      await changeSettingPromise
 
-    await folderSelect.click() // open dropdown
-    await expect(folderSelect).toHaveClass(/p-select-open/)
+      const settingValue = await comfyPage.getSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      expect(settingValue).toBe(false)
+    })
 
-    await folderSelect.click() // close the dropdown
-    await expect(folderSelect).not.toHaveClass(/p-select-open/)
+    test('Should keep warning dialog enabled when checkbox is unchecked', async ({
+      comfyPage
+    }) => {
+      await closeButton.click()
 
-    await folderSelectToggle.click() // hide the selectors
-    await expect(folderSelect).not.toBeVisible()
+      const settingValue = await comfyPage.getSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      expect(settingValue).toBe(true)
+    })
+  })
+})
+
+test.describe('Settings', () => {
+  test('@mobile Should be visible on mobile', async ({ comfyPage }) => {
+    await comfyPage.page.keyboard.press('Control+,')
+    const settingsContent = comfyPage.page.locator('.settings-content')
+    await expect(settingsContent).toBeVisible()
+    const isUsableHeight = await settingsContent.evaluate(
+      (el) => el.clientHeight > 30
+    )
+    expect(isUsableHeight).toBeTruthy()
+  })
+
+  test('Can open settings with hotkey', async ({ comfyPage }) => {
+    await comfyPage.page.keyboard.down('ControlOrMeta')
+    await comfyPage.page.keyboard.press(',')
+    await comfyPage.page.keyboard.up('ControlOrMeta')
+    const settingsLocator = comfyPage.page.locator('.settings-container')
+    await expect(settingsLocator).toBeVisible()
+    await comfyPage.page.keyboard.press('Escape')
+    await expect(settingsLocator).not.toBeVisible()
+  })
+
+  test('Can change canvas zoom speed setting', async ({ comfyPage }) => {
+    const maxSpeed = 2.5
+    await comfyPage.setSetting('Comfy.Graph.ZoomSpeed', maxSpeed)
+    await test.step('Setting should persist', async () => {
+      expect(await comfyPage.getSetting('Comfy.Graph.ZoomSpeed')).toBe(maxSpeed)
+    })
+  })
+
+  test('Should persist keybinding setting', async ({ comfyPage }) => {
+    // Open the settings dialog
+    await comfyPage.page.keyboard.press('Control+,')
+    await comfyPage.page.waitForSelector('.settings-container')
+
+    // Open the keybinding tab
+    await comfyPage.page.getByLabel('Keybinding').click()
+    await comfyPage.page.waitForSelector(
+      '[placeholder="Search Keybindings..."]'
+    )
+
+    // Focus the 'New Blank Workflow' row
+    const newBlankWorkflowRow = comfyPage.page.locator('tr', {
+      has: comfyPage.page.getByRole('cell', { name: 'New Blank Workflow' })
+    })
+    await newBlankWorkflowRow.click()
+
+    // Click edit button
+    const editKeybindingButton = newBlankWorkflowRow.locator('.pi-pencil')
+    await editKeybindingButton.click()
+
+    // Set new keybinding
+    const input = comfyPage.page.getByPlaceholder('Press keys for new binding')
+    await input.press('Alt+n')
+
+    const requestPromise = comfyPage.page.waitForRequest(
+      '**/api/settings/Comfy.Keybinding.NewBindings'
+    )
+
+    // Save keybinding
+    const saveButton = comfyPage.page
+      .getByLabel('New Blank Workflow')
+      .getByLabel('Save')
+    await saveButton.click()
+
+    const request = await requestPromise
+    const expectedSetting: Keybinding = {
+      commandId: 'Comfy.NewBlankWorkflow',
+      combo: {
+        key: 'n',
+        ctrl: false,
+        alt: true,
+        shift: false
+      }
+    }
+    expect(request.postData()).toContain(JSON.stringify(expectedSetting))
+  })
+})
+
+test.describe('Feedback dialog', () => {
+  test('Should open from topmenu help command', async ({ comfyPage }) => {
+    // Open feedback dialog from top menu
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Feedback'])
+
+    // Verify feedback dialog content is visible
+    const feedbackHeader = comfyPage.page.getByRole('heading', {
+      name: 'Feedback'
+    })
+    await expect(feedbackHeader).toBeVisible()
+  })
+
+  test('Should close when close button clicked', async ({ comfyPage }) => {
+    // Open feedback dialog
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Feedback'])
+
+    const feedbackHeader = comfyPage.page.getByRole('heading', {
+      name: 'Feedback'
+    })
+
+    // Close feedback dialog
+    await comfyPage.page
+      .getByLabel('', { exact: true })
+      .getByLabel('Close')
+      .click()
+    await feedbackHeader.waitFor({ state: 'hidden' })
+
+    // Verify dialog is closed
+    await expect(feedbackHeader).not.toBeVisible()
   })
 })

browser_tests/domWidget.spec.ts

@@ -0,0 +1,27 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
+
+test.describe('DOM Widget', () => {
+  test('Collapsed multiline textarea is not visible', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('collapsed_multiline')
+
+    expect(comfyPage.page.locator('.comfy-multiline-input')).not.toBeVisible()
+  })
+
+  test('Multiline textarea correctly collapses', async ({ comfyPage }) => {
+    const multilineTextAreas = comfyPage.page.locator('.comfy-multiline-input')
+    const firstMultiline = multilineTextAreas.first()
+    const lastMultiline = multilineTextAreas.last()
+
+    await expect(firstMultiline).toBeVisible()
+    await expect(lastMultiline).toBeVisible()
+
+    const nodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
+    for (const node of nodes) {
+      await node.click('collapse')
+    }
+    await expect(firstMultiline).not.toBeVisible()
+    await expect(lastMultiline).not.toBeVisible()
+  })
+})

browser_tests/extensionAPI.spec.ts

@@ -1,32 +1,342 @@
 import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './ComfyPage'
+
+import { SettingParams } from '../src/types/settingTypes'
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Topbar commands', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
-  })
-
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
   })
 
   test('Should allow registering topbar commands', async ({ comfyPage }) => {
     await comfyPage.page.evaluate(() => {
-      window['app'].extensionManager.menu.registerTopbarCommands(
-        ['ext'],
-        [
+      window['app'].registerExtension({
+        name: 'TestExtension1',
+        commands: [
           {
             id: 'foo',
-            label: 'foo',
+            label: 'foo-command',
             function: () => {
               window['foo'] = true
             }
           }
+        ],
+        menuCommands: [
+          {
+            path: ['ext'],
+            commands: ['foo']
+          }
         ]
+      })
+    })
+
+    await comfyPage.menu.topbar.triggerTopbarCommand(['ext', 'foo-command'])
+    expect(await comfyPage.page.evaluate(() => window['foo'])).toBe(true)
+  })
+
+  test('Should not allow register command defined in other extension', async ({
+    comfyPage
+  }) => {
+    await comfyPage.registerCommand('foo', () => alert(1))
+    await comfyPage.page.evaluate(() => {
+      window['app'].registerExtension({
+        name: 'TestExtension1',
+        menuCommands: [
+          {
+            path: ['ext'],
+            commands: ['foo']
+          }
+        ]
+      })
+    })
+
+    const menuItem = comfyPage.menu.topbar.getMenuItem('ext')
+    expect(await menuItem.count()).toBe(0)
+  })
+
+  test('Should allow registering keybindings', async ({ comfyPage }) => {
+    await comfyPage.page.evaluate(() => {
+      const app = window['app']
+      app.registerExtension({
+        name: 'TestExtension1',
+        commands: [
+          {
+            id: 'TestCommand',
+            function: () => {
+              window['TestCommand'] = true
+            }
+          }
+        ],
+        keybindings: [
+          {
+            combo: { key: 'k' },
+            commandId: 'TestCommand'
+          }
+        ]
+      })
+    })
+
+    await comfyPage.page.keyboard.press('k')
+    expect(await comfyPage.page.evaluate(() => window['TestCommand'])).toBe(
+      true
+    )
+  })
+
+  test.describe('Settings', () => {
+    test('Should allow adding settings', async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => {
+        window['app'].registerExtension({
+          name: 'TestExtension1',
+          settings: [
+            {
+              id: 'TestSetting',
+              name: 'Test Setting',
+              type: 'text',
+              defaultValue: 'Hello, world!',
+              onChange: () => {
+                window['changeCount'] = (window['changeCount'] ?? 0) + 1
+              }
+            }
+          ]
+        })
+      })
+      // onChange is called when the setting is first added
+      expect(await comfyPage.page.evaluate(() => window['changeCount'])).toBe(1)
+      expect(await comfyPage.getSetting('TestSetting')).toBe('Hello, world!')
+
+      await comfyPage.setSetting('TestSetting', 'Hello, universe!')
+      expect(await comfyPage.getSetting('TestSetting')).toBe('Hello, universe!')
+      expect(await comfyPage.page.evaluate(() => window['changeCount'])).toBe(2)
+    })
+
+    test('Should allow setting boolean settings', async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => {
+        window['app'].registerExtension({
+          name: 'TestExtension1',
+          settings: [
+            {
+              id: 'Comfy.TestSetting',
+              name: 'Test Setting',
+              type: 'boolean',
+              defaultValue: false,
+              onChange: () => {
+                window['changeCount'] = (window['changeCount'] ?? 0) + 1
+              }
+            }
+          ]
+        })
+      })
+
+      expect(await comfyPage.getSetting('Comfy.TestSetting')).toBe(false)
+      expect(await comfyPage.page.evaluate(() => window['changeCount'])).toBe(1)
+
+      await comfyPage.settingDialog.open()
+      await comfyPage.settingDialog.toggleBooleanSetting('Comfy.TestSetting')
+      expect(await comfyPage.getSetting('Comfy.TestSetting')).toBe(true)
+      expect(await comfyPage.page.evaluate(() => window['changeCount'])).toBe(2)
+    })
+
+    test.describe('Passing through attrs to setting components', () => {
+      const testCases: Array<{
+        config: Partial<SettingParams>
+        selector: string
+      }> = [
+        {
+          config: {
+            type: 'boolean',
+            defaultValue: true
+          },
+          selector: '.p-toggleswitch.p-component'
+        },
+        {
+          config: {
+            type: 'number',
+            defaultValue: 10
+          },
+          selector: '.p-inputnumber input'
+        },
+        {
+          config: {
+            type: 'slider',
+            defaultValue: 10
+          },
+          selector: '.p-slider.p-component'
+        },
+        {
+          config: {
+            type: 'combo',
+            defaultValue: 'foo',
+            options: ['foo', 'bar', 'baz']
+          },
+          selector: '.p-select.p-component'
+        },
+        {
+          config: {
+            type: 'text',
+            defaultValue: 'Hello'
+          },
+          selector: '.p-inputtext'
+        },
+        {
+          config: {
+            type: 'color',
+            defaultValue: '#000000'
+          },
+          selector: '.p-colorpicker-preview'
+        }
+      ] as const
+
+      for (const { config, selector } of testCases) {
+        test(`${config.type} component should respect disabled attr`, async ({
+          comfyPage
+        }) => {
+          await comfyPage.page.evaluate((config) => {
+            window['app'].registerExtension({
+              name: 'TestExtension1',
+              settings: [
+                {
+                  id: 'Comfy.TestSetting',
+                  name: 'Test',
+                  // The `disabled` attr is common to all settings components
+                  attrs: { disabled: true },
+                  ...config
+                }
+              ]
+            })
+          }, config)
+
+          await comfyPage.settingDialog.open()
+          const component = comfyPage.settingDialog.root
+            .getByText('TestSetting Test')
+            .locator(selector)
+
+          const isDisabled = await component.evaluate((el) =>
+            el.tagName === 'INPUT'
+              ? (el as HTMLInputElement).disabled
+              : el.classList.contains('p-disabled')
+          )
+          expect(isDisabled).toBe(true)
+        })
+      }
+    })
+  })
+
+  test.describe('About panel', () => {
+    test('Should allow adding badges', async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => {
+        window['app'].registerExtension({
+          name: 'TestExtension1',
+          aboutPageBadges: [
+            {
+              label: 'Test Badge',
+              url: 'https://example.com',
+              icon: 'pi pi-box'
+            }
+          ]
+        })
+      })
+
+      await comfyPage.settingDialog.open()
+      await comfyPage.settingDialog.goToAboutPanel()
+      const badge = comfyPage.page.locator('.about-badge').last()
+      expect(badge).toBeDefined()
+      expect(await badge.textContent()).toContain('Test Badge')
+    })
+  })
+
+  test.describe('Dialog', () => {
+    test('Should allow showing a prompt dialog', async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => {
+        window['app'].extensionManager.dialog
+          .prompt({
+            title: 'Test Prompt',
+            message: 'Test Prompt Message'
+          })
+          .then((value: string) => {
+            window['value'] = value
+          })
+      })
+
+      await comfyPage.fillPromptDialog('Hello, world!')
+      expect(await comfyPage.page.evaluate(() => window['value'])).toBe(
+        'Hello, world!'
       )
     })
 
-    await comfyPage.menu.topbar.triggerTopbarCommand(['ext', 'foo'])
-    expect(await comfyPage.page.evaluate(() => window['foo'])).toBe(true)
+    test('Should allow showing a confirmation dialog', async ({
+      comfyPage
+    }) => {
+      await comfyPage.page.evaluate(() => {
+        window['app'].extensionManager.dialog
+          .confirm({
+            title: 'Test Confirm',
+            message: 'Test Confirm Message'
+          })
+          .then((value: boolean) => {
+            window['value'] = value
+          })
+      })
+
+      await comfyPage.confirmDialog.click('confirm')
+      expect(await comfyPage.page.evaluate(() => window['value'])).toBe(true)
+    })
+
+    test('Should allow dismissing a dialog', async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => {
+        window['value'] = 'foo'
+        window['app'].extensionManager.dialog
+          .confirm({
+            title: 'Test Confirm',
+            message: 'Test Confirm Message'
+          })
+          .then((value: boolean) => {
+            window['value'] = value
+          })
+      })
+
+      await comfyPage.confirmDialog.click('reject')
+      expect(await comfyPage.page.evaluate(() => window['value'])).toBeNull()
+    })
+  })
+
+  test.describe('Selection Toolbox', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
+    })
+
+    test('Should allow adding commands to selection toolbox', async ({
+      comfyPage
+    }) => {
+      // Register an extension with a selection toolbox command
+      await comfyPage.page.evaluate(() => {
+        window['app'].registerExtension({
+          name: 'TestExtension1',
+          commands: [
+            {
+              id: 'test.selection.command',
+              label: 'Test Command',
+              icon: 'pi pi-star',
+              function: () => {
+                window['selectionCommandExecuted'] = true
+              }
+            }
+          ],
+          getSelectionToolboxCommands: () => ['test.selection.command']
+        })
+      })
+
+      await comfyPage.selectNodes(['CLIP Text Encode (Prompt)'])
+
+      // Click the command button in the selection toolbox
+      const toolboxButton = comfyPage.page.locator(
+        '.selection-toolbox button:has(.pi-star)'
+      )
+      await toolboxButton.click()
+
+      // Verify the command was executed
+      expect(
+        await comfyPage.page.evaluate(() => window['selectionCommandExecuted'])
+      ).toBe(true)
+    })
   })
 })

browser_tests/fixtures/ComfyMouse.ts

@@ -0,0 +1,97 @@
+import type { Mouse } from '@playwright/test'
+
+import type { ComfyPage } from './ComfyPage'
+import type { Position } from './types'
+
+/**
+ * Used for drag and drop ops
+ * @see
+ * - {@link Mouse.down}
+ * - {@link Mouse.move}
+ * - {@link Mouse.up}
+ */
+export interface DragOptions {
+  button?: 'left' | 'right' | 'middle'
+  clickCount?: number
+  steps?: number
+}
+
+/**
+ * Wraps mouse drag and drop to work with a canvas-based app.
+ *
+ * Requires the next frame animated before and after all steps, giving the
+ * canvas time to render the changes before screenshots are taken.
+ */
+export class ComfyMouse implements Omit<Mouse, 'move'> {
+  static defaultSteps = 5
+  static defaultOptions: DragOptions = { steps: ComfyMouse.defaultSteps }
+
+  constructor(readonly comfyPage: ComfyPage) {}
+
+  /** The normal Playwright {@link Mouse} property from {@link ComfyPage.page}. */
+  get mouse() {
+    return this.comfyPage.page.mouse
+  }
+
+  async nextFrame() {
+    await this.comfyPage.nextFrame()
+  }
+
+  /** Drags from current location to a new location and hovers there (no pointerup event) */
+  async drag(to: Position, options = ComfyMouse.defaultOptions) {
+    const { steps, ...downOptions } = options
+
+    await this.mouse.down(downOptions)
+    await this.nextFrame()
+
+    await this.move(to, { steps })
+    await this.nextFrame()
+  }
+
+  async drop(options = ComfyMouse.defaultOptions) {
+    await this.mouse.up(options)
+    await this.nextFrame()
+  }
+
+  async dragAndDrop(
+    from: Position,
+    to: Position,
+    options = ComfyMouse.defaultOptions
+  ) {
+    const { steps } = options
+
+    await this.nextFrame()
+
+    await this.move(from, { steps })
+    await this.drag(to, options)
+    await this.drop(options)
+  }
+
+  /** @see {@link Mouse.move} */
+  async move(to: Position, options = ComfyMouse.defaultOptions) {
+    await this.mouse.move(to.x, to.y, options)
+    await this.nextFrame()
+  }
+
+  //#region Pass-through
+  async click(...args: Parameters<Mouse['click']>) {
+    return await this.mouse.click(...args)
+  }
+
+  async dblclick(...args: Parameters<Mouse['dblclick']>) {
+    return await this.mouse.dblclick(...args)
+  }
+
+  async down(...args: Parameters<Mouse['down']>) {
+    return await this.mouse.down(...args)
+  }
+
+  async up(...args: Parameters<Mouse['up']>) {
+    return await this.mouse.up(...args)
+  }
+
+  async wheel(...args: Parameters<Mouse['wheel']>) {
+    return await this.mouse.wheel(...args)
+  }
+  //#endregion Pass-through
+}

browser_tests/fixtures/ComfyPage.ts

@@ -0,0 +1,999 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+import type { APIRequestContext, Locator, Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+import { test as base } from '@playwright/test'
+import dotenv from 'dotenv'
+import * as fs from 'fs'
+
+import type { NodeId } from '../../src/schemas/comfyWorkflowSchema'
+import type { KeyCombo } from '../../src/schemas/keyBindingSchema'
+import type { useWorkspaceStore } from '../../src/stores/workspaceStore'
+import { NodeBadgeMode } from '../../src/types/nodeSource'
+import { ComfyActionbar } from '../helpers/actionbar'
+import { ComfyTemplates } from '../helpers/templates'
+import { ComfyMouse } from './ComfyMouse'
+import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
+import { SettingDialog } from './components/SettingDialog'
+import {
+  NodeLibrarySidebarTab,
+  QueueSidebarTab,
+  WorkflowsSidebarTab
+} from './components/SidebarTab'
+import { Topbar } from './components/Topbar'
+import type { Position, Size } from './types'
+import { NodeReference } from './utils/litegraphUtils'
+import TaskHistory from './utils/taskHistory'
+
+dotenv.config()
+
+type WorkspaceStore = ReturnType<typeof useWorkspaceStore>
+
+class ComfyMenu {
+  private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
+  private _workflowsTab: WorkflowsSidebarTab | null = null
+  private _queueTab: QueueSidebarTab | null = null
+  private _topbar: Topbar | null = null
+
+  public readonly sideToolbar: Locator
+  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.saveButton = page
+      .locator('button[title="Save the current workflow"]')
+      .nth(0)
+  }
+
+  get nodeLibraryTab() {
+    this._nodeLibraryTab ??= new NodeLibrarySidebarTab(this.page)
+    return this._nodeLibraryTab
+  }
+
+  get workflowsTab() {
+    this._workflowsTab ??= new WorkflowsSidebarTab(this.page)
+    return this._workflowsTab
+  }
+
+  get queueTab() {
+    this._queueTab ??= new QueueSidebarTab(this.page)
+    return this._queueTab
+  }
+
+  get topbar() {
+    this._topbar ??= new Topbar(this.page)
+    return this._topbar
+  }
+
+  async toggleTheme() {
+    await this.themeToggleButton.click()
+    await this.page.evaluate(() => {
+      return new Promise((resolve) => {
+        window['app'].ui.settings.addEventListener(
+          'Comfy.ColorPalette.change',
+          resolve,
+          { once: true }
+        )
+
+        setTimeout(resolve, 5000)
+      })
+    })
+  }
+
+  async getThemeId() {
+    return await this.page.evaluate(async () => {
+      return await window['app'].ui.settings.getSettingValue(
+        'Comfy.ColorPalette'
+      )
+    })
+  }
+}
+
+type FolderStructure = {
+  [key: string]: FolderStructure | string
+}
+
+type KeysOfType<T, Match> = {
+  [K in keyof T]: T[K] extends Match ? K : never
+}[keyof T]
+
+class ConfirmDialog {
+  public readonly delete: Locator
+  public readonly overwrite: Locator
+  public readonly reject: Locator
+  public readonly confirm: Locator
+
+  constructor(public readonly page: Page) {
+    this.delete = page.locator('button.p-button[aria-label="Delete"]')
+    this.overwrite = page.locator('button.p-button[aria-label="Overwrite"]')
+    this.reject = page.locator('button.p-button[aria-label="Cancel"]')
+    this.confirm = page.locator('button.p-button[aria-label="Confirm"]')
+  }
+
+  async click(locator: KeysOfType<ConfirmDialog, Locator>) {
+    const loc = this[locator]
+    await expect(loc).toBeVisible()
+    await loc.click()
+  }
+}
+
+export class ComfyPage {
+  private _history: TaskHistory | null = null
+
+  public readonly url: string
+  // All canvas position operations are based on default view of canvas.
+  public readonly canvas: Locator
+  public readonly widgetTextBox: Locator
+
+  // Buttons
+  public readonly resetViewButton: Locator
+  public readonly queueButton: Locator
+
+  // Inputs
+  public readonly workflowUploadInput: Locator
+
+  // Components
+  public readonly searchBox: ComfyNodeSearchBox
+  public readonly menu: ComfyMenu
+  public readonly actionbar: ComfyActionbar
+  public readonly templates: ComfyTemplates
+  public readonly settingDialog: SettingDialog
+  public readonly confirmDialog: ConfirmDialog
+
+  /** Worker index to test user ID */
+  public readonly userIds: string[] = []
+
+  /** Test user ID for the current context */
+  get id() {
+    return this.userIds[comfyPageFixture.info().parallelIndex]
+  }
+
+  constructor(
+    public readonly page: Page,
+    public readonly request: APIRequestContext
+  ) {
+    this.url = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
+    this.canvas = page.locator('#graph-canvas')
+    this.widgetTextBox = page.getByPlaceholder('text').nth(1)
+    this.resetViewButton = page.getByRole('button', { name: 'Reset View' })
+    this.queueButton = page.getByRole('button', { name: 'Queue Prompt' })
+    this.workflowUploadInput = page.locator('#comfy-file-input')
+    this.searchBox = new ComfyNodeSearchBox(page)
+    this.menu = new ComfyMenu(page)
+    this.actionbar = new ComfyActionbar(page)
+    this.templates = new ComfyTemplates(page)
+    this.settingDialog = new SettingDialog(page)
+    this.confirmDialog = new ConfirmDialog(page)
+  }
+
+  convertLeafToContent(structure: FolderStructure): FolderStructure {
+    const result: FolderStructure = {}
+
+    for (const [key, value] of Object.entries(structure)) {
+      if (typeof value === 'string') {
+        const filePath = this.assetPath(value)
+        result[key] = fs.readFileSync(filePath, 'utf-8')
+      } else {
+        result[key] = this.convertLeafToContent(value)
+      }
+    }
+
+    return result
+  }
+
+  async getGraphNodesCount(): Promise<number> {
+    return await this.page.evaluate(() => {
+      return window['app']?.graph?.nodes?.length || 0
+    })
+  }
+
+  async getSelectedGraphNodesCount(): Promise<number> {
+    return await this.page.evaluate(() => {
+      return (
+        window['app']?.graph?.nodes?.filter(
+          (node: any) => node.is_selected === true
+        ).length || 0
+      )
+    })
+  }
+
+  async setupWorkflowsDirectory(structure: FolderStructure) {
+    const resp = await this.request.post(
+      `${this.url}/api/devtools/setup_folder_structure`,
+      {
+        data: {
+          tree_structure: this.convertLeafToContent(structure),
+          base_path: `user/${this.id}/workflows`
+        }
+      }
+    )
+
+    if (resp.status() !== 200) {
+      throw new Error(
+        `Failed to setup workflows directory: ${await resp.text()}`
+      )
+    }
+  }
+
+  async setupUser(username: string) {
+    const res = await this.request.get(`${this.url}/api/users`)
+    if (res.status() !== 200)
+      throw new Error(`Failed to retrieve users: ${await res.text()}`)
+
+    const apiRes = await res.json()
+    const user = Object.entries(apiRes?.users ?? {}).find(
+      ([, name]) => name === username
+    )
+    const id = user?.[0]
+
+    return id ? id : await this.createUser(username)
+  }
+
+  async createUser(username: string) {
+    const resp = await this.request.post(`${this.url}/api/users`, {
+      data: { username }
+    })
+
+    if (resp.status() !== 200)
+      throw new Error(`Failed to create user: ${await resp.text()}`)
+
+    return await resp.json()
+  }
+
+  async setupSettings(settings: Record<string, any>) {
+    const resp = await this.request.post(
+      `${this.url}/api/devtools/set_settings`,
+      {
+        data: settings
+      }
+    )
+
+    if (resp.status() !== 200) {
+      throw new Error(`Failed to setup settings: ${await resp.text()}`)
+    }
+  }
+
+  setupHistory(): TaskHistory {
+    this._history ??= new TaskHistory(this)
+    return this._history
+  }
+
+  async setup({ clearStorage = true }: { clearStorage?: boolean } = {}) {
+    await this.goto()
+    if (clearStorage) {
+      await this.page.evaluate((id) => {
+        localStorage.clear()
+        sessionStorage.clear()
+        localStorage.setItem('Comfy.userId', id)
+      }, this.id)
+    }
+    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(
+      () =>
+        // window['app'] => GraphCanvas ready
+        // window['app'].extensionManager => GraphView ready
+        window['app'] && window['app'].extensionManager
+    )
+    await this.page.waitForSelector('.p-blockui-mask', { state: 'hidden' })
+    await this.nextFrame()
+  }
+
+  public assetPath(fileName: string) {
+    return `./browser_tests/assets/${fileName}`
+  }
+
+  async executeCommand(commandId: string) {
+    await this.page.evaluate((id: string) => {
+      return window['app'].extensionManager.command.execute(id)
+    }, commandId)
+  }
+
+  async registerCommand(
+    commandId: string,
+    command: (() => void) | (() => Promise<void>)
+  ) {
+    await this.page.evaluate(
+      ({ commandId, commandStr }) => {
+        const app = window['app']
+        const randomSuffix = Math.random().toString(36).substring(2, 8)
+        const extensionName = `TestExtension_${randomSuffix}`
+
+        app.registerExtension({
+          name: extensionName,
+          commands: [
+            {
+              id: commandId,
+              function: eval(commandStr)
+            }
+          ]
+        })
+      },
+      { commandId, commandStr: command.toString() }
+    )
+  }
+
+  async registerKeybinding(keyCombo: KeyCombo, command: () => void) {
+    await this.page.evaluate(
+      ({ keyCombo, commandStr }) => {
+        const app = window['app']
+        const randomSuffix = Math.random().toString(36).substring(2, 8)
+        const extensionName = `TestExtension_${randomSuffix}`
+        const commandId = `TestCommand_${randomSuffix}`
+
+        app.registerExtension({
+          name: extensionName,
+          keybindings: [
+            {
+              combo: keyCombo,
+              commandId: commandId
+            }
+          ],
+          commands: [
+            {
+              id: commandId,
+              function: eval(commandStr)
+            }
+          ]
+        })
+      },
+      { keyCombo, commandStr: command.toString() }
+    )
+  }
+
+  async setSetting(settingId: string, settingValue: any) {
+    return await this.page.evaluate(
+      async ({ id, value }) => {
+        await window['app'].extensionManager.setting.set(id, value)
+      },
+      { id: settingId, value: settingValue }
+    )
+  }
+
+  async getSetting(settingId: string) {
+    return await this.page.evaluate(async (id) => {
+      return await window['app'].extensionManager.setting.get(id)
+    }, settingId)
+  }
+
+  async goto() {
+    await this.page.goto(this.url)
+  }
+
+  async nextFrame() {
+    await this.page.evaluate(() => {
+      return new Promise<number>(requestAnimationFrame)
+    })
+  }
+
+  async delay(ms: number) {
+    return new Promise((resolve) => setTimeout(resolve, ms))
+  }
+
+  async loadWorkflow(workflowName: string) {
+    await this.workflowUploadInput.setInputFiles(
+      this.assetPath(`${workflowName}.json`)
+    )
+    await this.nextFrame()
+  }
+
+  async resetView() {
+    if (await this.resetViewButton.isVisible()) {
+      await this.resetViewButton.click()
+    }
+    // Avoid "Reset View" button highlight.
+    await this.page.mouse.move(10, 10)
+    await this.nextFrame()
+  }
+
+  async getToastErrorCount() {
+    return await this.page
+      .locator('.p-toast-message.p-toast-message-error')
+      .count()
+  }
+
+  async getVisibleToastCount() {
+    return await this.page.locator('.p-toast:visible').count()
+  }
+
+  async clickTextEncodeNode1() {
+    await this.canvas.click({
+      position: {
+        x: 618,
+        y: 191
+      }
+    })
+    await this.nextFrame()
+  }
+
+  async clickTextEncodeNodeToggler() {
+    await this.canvas.click({
+      position: {
+        x: 430,
+        y: 171
+      }
+    })
+    await this.nextFrame()
+  }
+
+  async clickTextEncodeNode2() {
+    await this.canvas.click({
+      position: {
+        x: 622,
+        y: 400
+      }
+    })
+    await this.nextFrame()
+  }
+
+  async clickEmptySpace() {
+    await this.canvas.click({
+      position: {
+        x: 35,
+        y: 31
+      }
+    })
+    await this.nextFrame()
+  }
+
+  async dragAndDrop(source: Position, target: Position) {
+    await this.page.mouse.move(source.x, source.y)
+    await this.page.mouse.down()
+    await this.page.mouse.move(target.x, target.y)
+    await this.page.mouse.up()
+    await this.nextFrame()
+  }
+
+  async dragAndDropFile(fileName: string) {
+    const filePath = this.assetPath(fileName)
+
+    // Read the file content
+    const buffer = fs.readFileSync(filePath)
+
+    // Get file type
+    const getFileType = (fileName: string) => {
+      if (fileName.endsWith('.png')) return 'image/png'
+      if (fileName.endsWith('.webp')) return 'image/webp'
+      if (fileName.endsWith('.webm')) return 'video/webm'
+      if (fileName.endsWith('.json')) return 'application/json'
+      return 'application/octet-stream'
+    }
+
+    const fileType = getFileType(fileName)
+
+    await this.page.evaluate(
+      async ({ buffer, fileName, fileType }) => {
+        const file = new File([new Uint8Array(buffer)], fileName, {
+          type: fileType
+        })
+        const dataTransfer = new DataTransfer()
+        dataTransfer.items.add(file)
+
+        const dropEvent = new DragEvent('drop', {
+          bubbles: true,
+          cancelable: true,
+          dataTransfer
+        })
+
+        Object.defineProperty(dropEvent, 'preventDefault', {
+          value: () => {},
+          writable: false
+        })
+
+        Object.defineProperty(dropEvent, 'stopPropagation', {
+          value: () => {},
+          writable: false
+        })
+
+        document.dispatchEvent(dropEvent)
+      },
+      { buffer: [...new Uint8Array(buffer)], fileName, fileType }
+    )
+
+    await this.nextFrame()
+  }
+
+  async dragNode2() {
+    await this.dragAndDrop({ x: 622, y: 400 }, { x: 622, y: 300 })
+    await this.nextFrame()
+  }
+
+  // Default graph positions
+  get clipTextEncodeNode1InputSlot(): Position {
+    return { x: 427, y: 198 }
+  }
+
+  get clipTextEncodeNode2InputSlot(): Position {
+    return { x: 422, y: 402 }
+  }
+
+  // A point on input edge.
+  get clipTextEncodeNode2InputLinkPath(): Position {
+    return {
+      x: 395,
+      y: 422
+    }
+  }
+
+  get loadCheckpointNodeClipOutputSlot(): Position {
+    return { x: 332, y: 509 }
+  }
+
+  get emptySpace(): Position {
+    return { x: 427, y: 98 }
+  }
+
+  get promptDialogInput() {
+    return this.page.locator('.p-dialog-content input[type="text"]')
+  }
+
+  async fillPromptDialog(value: string) {
+    await this.promptDialogInput.fill(value)
+    await this.page.keyboard.press('Enter')
+    await this.promptDialogInput.waitFor({ state: 'hidden' })
+    await this.nextFrame()
+  }
+
+  async disconnectEdge() {
+    await this.dragAndDrop(this.clipTextEncodeNode1InputSlot, this.emptySpace)
+  }
+
+  async connectEdge() {
+    await this.dragAndDrop(
+      this.loadCheckpointNodeClipOutputSlot,
+      this.clipTextEncodeNode1InputSlot
+    )
+  }
+
+  async adjustWidgetValue() {
+    // Adjust Empty Latent Image's width input.
+    const page = this.page
+    await page.locator('#graph-canvas').click({
+      position: {
+        x: 724,
+        y: 645
+      }
+    })
+    const dialogInput = page.locator('.graphdialog input[type="text"]')
+    await dialogInput.click()
+    await dialogInput.fill('128')
+    await dialogInput.press('Enter')
+    await this.nextFrame()
+  }
+
+  async zoom(deltaY: number, steps: number = 1) {
+    await this.page.mouse.move(10, 10)
+    for (let i = 0; i < steps; i++) {
+      await this.page.mouse.wheel(0, deltaY)
+    }
+    await this.nextFrame()
+  }
+
+  async pan(offset: Position, safeSpot?: Position) {
+    safeSpot = safeSpot || { x: 10, y: 10 }
+    await this.page.mouse.move(safeSpot.x, safeSpot.y)
+    await this.page.mouse.down()
+    await this.page.mouse.move(offset.x + safeSpot.x, offset.y + safeSpot.y)
+    await this.page.mouse.up()
+    await this.nextFrame()
+  }
+
+  async panWithTouch(offset: Position, safeSpot?: Position) {
+    safeSpot = safeSpot || { x: 10, y: 10 }
+    const client = await this.page.context().newCDPSession(this.page)
+    await client.send('Input.dispatchTouchEvent', {
+      type: 'touchStart',
+      touchPoints: [safeSpot]
+    })
+    await client.send('Input.dispatchTouchEvent', {
+      type: 'touchMove',
+      touchPoints: [{ x: offset.x + safeSpot.x, y: offset.y + safeSpot.y }]
+    })
+    await client.send('Input.dispatchTouchEvent', {
+      type: 'touchEnd',
+      touchPoints: []
+    })
+    await this.nextFrame()
+  }
+
+  async rightClickCanvas() {
+    await this.page.mouse.click(10, 10, { button: 'right' })
+    await this.nextFrame()
+  }
+
+  async clickContextMenuItem(name: string): Promise<void> {
+    await this.page.getByRole('menuitem', { name }).click()
+    await this.nextFrame()
+  }
+
+  async doubleClickCanvas() {
+    await this.page.mouse.dblclick(10, 10, { delay: 5 })
+    await this.nextFrame()
+  }
+
+  async clickEmptyLatentNode() {
+    await this.canvas.click({
+      position: {
+        x: 724,
+        y: 625
+      }
+    })
+    this.page.mouse.move(10, 10)
+    await this.nextFrame()
+  }
+
+  async rightClickEmptyLatentNode() {
+    await this.canvas.click({
+      position: {
+        x: 724,
+        y: 645
+      },
+      button: 'right'
+    })
+    this.page.mouse.move(10, 10)
+    await this.nextFrame()
+  }
+
+  async selectNodes(nodeTitles: string[]) {
+    await this.page.keyboard.down('Control')
+    for (const nodeTitle of nodeTitles) {
+      const nodes = await this.getNodeRefsByTitle(nodeTitle)
+      for (const node of nodes) {
+        await node.click('title')
+      }
+    }
+    await this.page.keyboard.up('Control')
+    await this.nextFrame()
+  }
+
+  async select2Nodes() {
+    // Select 2 CLIP nodes.
+    await this.page.keyboard.down('Control')
+    await this.clickTextEncodeNode1()
+    await this.clickTextEncodeNode2()
+    await this.page.keyboard.up('Control')
+    await this.nextFrame()
+  }
+
+  async ctrlSend(keyToPress: string, locator: Locator | null = this.canvas) {
+    const target = locator ?? this.page.keyboard
+    await target.press(`Control+${keyToPress}`)
+    await this.nextFrame()
+  }
+
+  async ctrlA(locator?: Locator | null) {
+    await this.ctrlSend('KeyA', locator)
+  }
+
+  async ctrlB(locator?: Locator | null) {
+    await this.ctrlSend('KeyB', locator)
+  }
+
+  async ctrlC(locator?: Locator | null) {
+    await this.ctrlSend('KeyC', locator)
+  }
+
+  async ctrlV(locator?: Locator | null) {
+    await this.ctrlSend('KeyV', locator)
+  }
+
+  async ctrlZ(locator?: Locator | null) {
+    await this.ctrlSend('KeyZ', locator)
+  }
+
+  async ctrlY(locator?: Locator | null) {
+    await this.ctrlSend('KeyY', locator)
+  }
+
+  async ctrlArrowUp(locator?: Locator | null) {
+    await this.ctrlSend('ArrowUp', locator)
+  }
+
+  async ctrlArrowDown(locator?: Locator | null) {
+    await this.ctrlSend('ArrowDown', locator)
+  }
+
+  async closeMenu() {
+    await this.page.click('button.comfy-close-menu-btn')
+    await this.nextFrame()
+  }
+
+  async closeDialog() {
+    await this.page.locator('.p-dialog-close-button').click()
+    await expect(this.page.locator('.p-dialog')).toBeHidden()
+  }
+
+  async resizeNode(
+    nodePos: Position,
+    nodeSize: Size,
+    ratioX: number,
+    ratioY: number,
+    revertAfter: boolean = false
+  ) {
+    const bottomRight = {
+      x: nodePos.x + nodeSize.width,
+      y: nodePos.y + nodeSize.height
+    }
+    const target = {
+      x: nodePos.x + nodeSize.width * ratioX,
+      y: nodePos.y + nodeSize.height * ratioY
+    }
+    // -1 to be inside the node.  -2 because nodes currently get an arbitrary +1 to width.
+    await this.dragAndDrop(
+      { x: bottomRight.x - 2, y: bottomRight.y - 1 },
+      target
+    )
+    await this.nextFrame()
+    if (revertAfter) {
+      await this.dragAndDrop({ x: target.x - 2, y: target.y - 1 }, bottomRight)
+      await this.nextFrame()
+    }
+  }
+
+  async resizeKsamplerNode(
+    percentX: number,
+    percentY: number,
+    revertAfter: boolean = false
+  ) {
+    const ksamplerPos = {
+      x: 863,
+      y: 156
+    }
+    const ksamplerSize = {
+      width: 315,
+      height: 292
+    }
+    return this.resizeNode(
+      ksamplerPos,
+      ksamplerSize,
+      percentX,
+      percentY,
+      revertAfter
+    )
+  }
+
+  async resizeLoadCheckpointNode(
+    percentX: number,
+    percentY: number,
+    revertAfter: boolean = false
+  ) {
+    const loadCheckpointPos = {
+      x: 26,
+      y: 444
+    }
+    const loadCheckpointSize = {
+      width: 315,
+      height: 127
+    }
+    return this.resizeNode(
+      loadCheckpointPos,
+      loadCheckpointSize,
+      percentX,
+      percentY,
+      revertAfter
+    )
+  }
+
+  async resizeEmptyLatentNode(
+    percentX: number,
+    percentY: number,
+    revertAfter: boolean = false
+  ) {
+    const emptyLatentPos = {
+      x: 473,
+      y: 579
+    }
+    const emptyLatentSize = {
+      width: 315,
+      height: 136
+    }
+    return this.resizeNode(
+      emptyLatentPos,
+      emptyLatentSize,
+      percentX,
+      percentY,
+      revertAfter
+    )
+  }
+
+  async clickDialogButton(prompt: string, buttonText: string = 'Yes') {
+    const modal = this.page.locator(
+      `.comfy-modal-content:has-text("${prompt}")`
+    )
+    await expect(modal).toBeVisible()
+    await modal
+      .locator('.comfyui-button', {
+        hasText: buttonText
+      })
+      .click()
+    await expect(modal).toBeHidden()
+  }
+
+  async convertAllNodesToGroupNode(groupNodeName: string) {
+    await this.canvas.press('Control+a')
+    const node = await this.getFirstNodeRef()
+    await node!.clickContextMenuOption('Convert to Group Node')
+    await this.fillPromptDialog(groupNodeName)
+    await this.nextFrame()
+  }
+
+  async convertOffsetToCanvas(pos: [number, number]) {
+    return this.page.evaluate((pos) => {
+      return window['app'].canvas.ds.convertOffsetToCanvas(pos)
+    }, pos)
+  }
+  async getNodeRefById(id: NodeId) {
+    return new NodeReference(id, this)
+  }
+  async getNodes() {
+    return await this.page.evaluate(() => {
+      return window['app'].graph.nodes
+    })
+  }
+  async getNodeRefsByType(type: string): Promise<NodeReference[]> {
+    return Promise.all(
+      (
+        await this.page.evaluate((type) => {
+          return window['app'].graph.nodes
+            .filter((n: LGraphNode) => n.type === type)
+            .map((n: LGraphNode) => n.id)
+        }, type)
+      ).map((id: NodeId) => this.getNodeRefById(id))
+    )
+  }
+  async getNodeRefsByTitle(title: string): Promise<NodeReference[]> {
+    return Promise.all(
+      (
+        await this.page.evaluate((title) => {
+          return window['app'].graph.nodes
+            .filter((n: LGraphNode) => n.title === title)
+            .map((n: LGraphNode) => n.id)
+        }, title)
+      ).map((id: NodeId) => this.getNodeRefById(id))
+    )
+  }
+
+  async getFirstNodeRef(): Promise<NodeReference | null> {
+    const id = await this.page.evaluate(() => {
+      return window['app'].graph.nodes[0]?.id
+    })
+    if (!id) return null
+    return this.getNodeRefById(id)
+  }
+  async moveMouseToEmptyArea() {
+    await this.page.mouse.move(10, 10)
+  }
+  async getUndoQueueSize() {
+    return this.page.evaluate(() => {
+      const workflow = (window['app'].extensionManager as WorkspaceStore)
+        .workflow.activeWorkflow
+      return workflow?.changeTracker.undoQueue.length
+    })
+  }
+  async getRedoQueueSize() {
+    return this.page.evaluate(() => {
+      const workflow = (window['app'].extensionManager as WorkspaceStore)
+        .workflow.activeWorkflow
+      return workflow?.changeTracker.redoQueue.length
+    })
+  }
+  async isCurrentWorkflowModified() {
+    return this.page.evaluate(() => {
+      return (window['app'].extensionManager as WorkspaceStore).workflow
+        .activeWorkflow?.isModified
+    })
+  }
+  async getExportedWorkflow({ api = false }: { api?: boolean } = {}) {
+    return this.page.evaluate(async (api) => {
+      return (await window['app'].graphToPrompt())[api ? 'output' : 'workflow']
+    }, api)
+  }
+  async setFocusMode(focusMode: boolean) {
+    await this.page.evaluate((focusMode) => {
+      window['app'].extensionManager.focusMode = focusMode
+    }, focusMode)
+    await this.nextFrame()
+  }
+}
+
+export const comfyPageFixture = base.extend<{
+  comfyPage: ComfyPage
+  comfyMouse: ComfyMouse
+}>({
+  comfyPage: async ({ page, request }, use, testInfo) => {
+    const comfyPage = new ComfyPage(page, request)
+
+    const { parallelIndex } = testInfo
+    const username = `playwright-test-${parallelIndex}`
+    const userId = await comfyPage.setupUser(username)
+    comfyPage.userIds[parallelIndex] = userId
+
+    try {
+      await comfyPage.setupSettings({
+        'Comfy.UseNewMenu': 'Disabled',
+        // Hide canvas menu/info/selection toolbox by default.
+        'Comfy.Graph.CanvasInfo': false,
+        'Comfy.Graph.CanvasMenu': false,
+        'Comfy.Canvas.SelectionToolbox': false,
+        // Hide all badges by default.
+        'Comfy.NodeBadge.NodeIdBadgeMode': NodeBadgeMode.None,
+        'Comfy.NodeBadge.NodeSourceBadgeMode': NodeBadgeMode.None,
+        // Disable tooltips by default to avoid flakiness.
+        'Comfy.EnableTooltips': false,
+        'Comfy.userId': userId,
+        // Set tutorial completed to true to avoid loading the tutorial workflow.
+        'Comfy.TutorialCompleted': true
+      })
+    } catch (e) {
+      console.error(e)
+    }
+
+    await comfyPage.setup()
+    await use(comfyPage)
+  },
+  comfyMouse: async ({ comfyPage }, use) => {
+    const comfyMouse = new ComfyMouse(comfyPage)
+    use(comfyMouse)
+  }
+})
+
+const makeMatcher = function <T>(
+  getValue: (node: NodeReference) => Promise<T> | T,
+  type: string
+) {
+  return async function (
+    node: NodeReference,
+    options?: { timeout?: number; intervals?: number[] }
+  ) {
+    const value = await getValue(node)
+    let assertion = expect(
+      value,
+      'Node is ' + (this.isNot ? '' : 'not ') + type
+    )
+    if (this.isNot) {
+      assertion = assertion.not
+    }
+    await expect(async () => {
+      assertion.toBeTruthy()
+    }).toPass({ timeout: 250, ...options })
+    return {
+      pass: !this.isNot,
+      message: () => 'Node is ' + (this.isNot ? 'not ' : '') + type
+    }
+  }
+}
+
+export const comfyExpect = expect.extend({
+  toBePinned: makeMatcher((n) => n.isPinned(), 'pinned'),
+  toBeBypassed: makeMatcher((n) => n.isBypassed(), 'bypassed'),
+  toBeCollapsed: makeMatcher((n) => n.isCollapsed(), 'collapsed'),
+  async toHaveFocus(locator: Locator, options = { timeout: 256 }) {
+    const isFocused = await locator.evaluate(
+      (el) => el === document.activeElement
+    )
+
+    await expect(async () => {
+      expect(isFocused).toBe(!this.isNot)
+    }).toPass(options)
+
+    return {
+      pass: isFocused,
+      message: () => `Expected element to ${isFocused ? 'not ' : ''}be focused.`
+    }
+  }
+})