Allow fast widget conversion from any node

.cursorrules

@@ -1,54 +0,0 @@
-// 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",
-  "Use vue 3.5 style of default prop declaration. Example:
-
-const { nodes, showTotal = true } = defineProps<{
-  nodes: ApiNodeCost[]
-  showTotal?: boolean
-}>()
-
-",
-  "Organize vue component in <template> <script> <style> order",
-]
-
-// 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
-10. Use vue-i18n in composition API for any string literals. Place new translation
-entries in src/locales/en/main.json.
-`;

.env_example

@@ -1,5 +1,4 @@
 # Local development playwright target
-# Note: Don't add a trailing / after the port
 PLAYWRIGHT_TEST_URL=http://localhost:5173
 # PLAYWRIGHT_TEST_URL=http://localhost:8188
 
@@ -7,14 +6,18 @@ PLAYWRIGHT_TEST_URL=http://localhost:5173
 # Note: localhost:8188 does not work.
 DEV_SERVER_COMFYUI_URL=http://127.0.0.1:8188
 
-# 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 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
 
 # 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
 
+# The directory containing the ComfyUI_examples repo used to extract test workflows.
+EXAMPLE_REPO_PATH=tests-ui/ComfyUI_examples
+
 # Whether to enable minification of the frontend code.
 ENABLE_MINIFY=true

.github/ISSUE_TEMPLATE/bug-report.yaml

@@ -16,18 +16,7 @@ body:
   - type: textarea
     attributes:
       label: Frontend Version
-      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>
+      description: 'What is the frontend version you are using? You can check this in the settings dialog'
     validations:
       required: true
   - type: textarea
@@ -83,8 +72,7 @@ body:
         - Other
   - type: textarea
     attributes:
-      label: Other Information
-      description: 'Any other context, details, or screenshots that might help solve the issue.'
-      placeholder: 'Add any other relevant information here...'
+      label: Other
+      description: 'Any other additional information you think might be helpful.'
     validations:
       required: false

.github/workflows/eslint.yaml

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

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

@@ -1,159 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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,56 +2,33 @@ name: Create Release Draft
 
 on:
   pull_request:
-    types: [ closed ]
-    branches: [ main, core/* ]
+    types: [closed]
+    branches:
+      - main
+      - master
     paths:
-      - 'package.json'
+      - "package.json"
 
 jobs:
-  build:
+  draft_release:
     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@v4
+      - uses: actions/setup-node@v3
         with:
-          node-version: 'lts/*'
+          node-version: lts/*
       - name: Get current version
         id: current_version
-        run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
+        run: echo ::set-output name=version::$(node -p "require('./package.json').version")
       - 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
@@ -60,57 +37,7 @@ jobs:
         with:
           files: |
             dist.zip
-          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' }}
+          tag_name: v${{ steps.current_version.outputs.version }}
+          draft: true
           prerelease: false
-          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 }}
+          make_latest: "true"

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

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

.github/workflows/test-ui.yaml

@@ -2,104 +2,74 @@ name: Tests CI
 
 on:
   push:
-    branches: [main, master, core/*, desktop/*]
+    branches:
+      - main
+      - master
   pull_request:
-    branches: [main, master, dev*, core/*, desktop/*]
+    branches:
+      - main
+      - master
+      - 'dev*'
 
 jobs:
-  setup:
+  jest-tests:
     runs-on: ubuntu-latest
-    outputs:
-      cache-key: ${{ steps.cache-key.outputs.key }}
     steps:
-      - name: Checkout ComfyUI
-        uses: actions/checkout@v4
-        with:
-          repository: 'comfyanonymous/ComfyUI'
-          path: 'ComfyUI'
-          ref: master
+    - 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_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'
-          ref: '49c8220be49120dbaff85f32813d854d6dff2d05'
-
-      - 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
+  playwright-tests-chromium:
     runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        browser: [chromium, chromium-2x, mobile-chrome]
     steps:
-      - name: Restore cached setup
-        uses: actions/cache@v3
-        with:
-          path: |
-            ComfyUI
-            ComfyUI_frontend
-          key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
+    - 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
 
-      - uses: actions/setup-python@v4
-        with:
-          python-version: '3.10'
+  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: 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
+  playwright-tests-mobile-chrome:
+    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 (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

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

@@ -1,44 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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-registry-types.yaml

@@ -1,97 +0,0 @@
-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

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

.gitignore

@@ -16,9 +16,6 @@ dist-ssr
 .vscode/*
 *.code-workspace
 !.vscode/extensions.json
-!.vscode/tailwind.json
-!.vscode/settings.json.default
-!.vscode/launch.json.default
 .idea
 .DS_Store
 *.suo
@@ -38,20 +35,8 @@ tests-ui/workflows/examples
 /playwright-report/
 /blob-report/
 /playwright/.cache/
-browser_tests/**/*-win32.png
+browser_tests/*/*-win32.png
 
 .env
 
-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/
+dist.zip

.i18nrc.cjs

@@ -1,17 +0,0 @@
-// 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', 'es'],
-  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora.
-  'latent' is the short form of 'latent space'.
-  'mask' is in the context of image processing.
-  `
-});

.prettierrc

@@ -3,16 +3,5 @@
   "tabWidth": 2,
   "semi": false,
   "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"]
-      }
-    }
-  ]
-}
+  "printWidth": 80
+}

.vscode/extensions.json

@@ -1,25 +0,0 @@
-{
-  "recommendations": [
-    "austenc.tailwind-docs",
-    "bradlc.vscode-tailwindcss",
-    "davidanson.vscode-markdownlint",
-    "dbaeumer.vscode-eslint",
-    "eamodio.gitlens",
-    "esbenp.prettier-vscode",
-    "figma.figma-vscode-extension",
-    "github.vscode-github-actions",
-    "github.vscode-pull-request-github",
-    "hbenl.vscode-test-explorer",
-    "lokalise.i18n-ally",
-    "ms-playwright.playwright",
-    "vitest.explorer",
-    "vue.volar",
-    "sonarsource.sonarlint-vscode",
-    "deque-systems.vscode-axe-linter",
-    "kisstkondoros.vscode-codemetrics",
-    "donjayamanne.githistory",
-    "wix.vscode-import-cost",
-    "prograhammer.tslint-vue",
-    "antfu.vite"
-  ]
-}

.vscode/launch.json.default

@@ -1,16 +0,0 @@
-{
-    // 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

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

.vscode/tailwind.json

@@ -1,55 +0,0 @@
-{
-  "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

@@ -1,17 +0,0 @@
-# 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,22 +31,8 @@
 
 ## Release Schedule
 
-The project follows a structured release process for each minor version, consisting of three distinct phases:
+### Nightly Release
 
-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:
@@ -55,49 +41,28 @@ To use the latest nightly release, add the following command line argument to yo
 --front-end-version Comfy-Org/ComfyUI_frontend@latest
 ```
 
-## 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.
+#### For Windows Stand-alone Build Users
 
-### Example Release Cycle
+Edit your `run_cpu.bat` or `run_nvidia_gpu.bat` file as follows:
 
-| 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) |
+```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.
 
 ## Release Summary
 
 ### Major features
 
-<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'>
+<details>
   <summary>v1.3.7: Keybinding customization</summary>
 
 ## Basic UI
@@ -114,7 +79,7 @@ https://github.com/user-attachments/assets/eddedc6a-07a3-4a83-9475-63b3977f6d94
 
 </details>
 
-<details id='feature-node-library-sidebar'>
+<details>
   <summary>v1.2.4: Node library sidebar tab</summary>
 
   #### Drag & Drop
@@ -124,13 +89,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 id='feature-queue-sidebar'>
+<details>
   <summary>v1.2.0: Queue/History sidebar tab</summary>
 
   https://github.com/user-attachments/assets/86e264fe-4d26-4f07-aa9a-83bdd2d02b8f
 </details>
 
-<details id='feature-node-search'>
+<details>
   <summary>v1.1.0: Node search box</summary>
 
   #### Fuzzy search & Node preview
@@ -142,26 +107,14 @@ https://github.com/user-attachments/assets/4bbca3ee-318f-4cf0-be32-a5a5541066cf
 
 ### QoL changes
 
-<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'>
+<details>
   <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'>
+<details>
   <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.
@@ -170,7 +123,7 @@ Dropping a link of correct type on node widget will automatically convert the wi
 
 </details>
 
-<details id='feature-pan-mode'>
+<details>
   <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
@@ -180,42 +133,42 @@ or by holding the space key.
 
 </details>
 
-<details id='feature-shift-drag-link-creation'>
+<details>
   <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 id='feature-optional-input-donuts'>
+<details>
   <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'>
+<details>
   <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 id='feature-group-selection-shortcut'>
+<details>
   <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 id='feature-node-title-edit'>
+<details>
   <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 id='feature-drag-multi-link'>
+<details>
   <summary>v1.2.7: **Litegraph** drags multiple links with shift pressed</summary>
 
 https://github.com/user-attachments/assets/68826715-bb55-4b2a-be6e-675cfc424afe
@@ -224,7 +177,7 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
 
 </details>
 
-<details id='feature-auto-connect-link'>
+<details>
   <summary>v1.2.2: **Litegraph** auto connects to correct slot</summary>
 
   #### Before
@@ -234,7 +187,7 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
   https://github.com/user-attachments/assets/b6360ac0-f0d2-447c-9daa-8a2e20c0dc1d
 </details>
 
-<details id='feature-hide-text-overflow'>
+<details>
   <summary>v1.1.8: **Litegraph** hides text overflow on widget value</summary>
 
   https://github.com/user-attachments/assets/5696a89d-4a47-4fcc-9e8c-71e1264943f2
@@ -243,75 +196,6 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
 ### 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
@@ -334,7 +218,7 @@ app.registerExtension({
 
 </details>
 
-<details id='extension-api-settings'>
+<details>
   <summary>v1.3.22: New settings API</summary>
 
 Legacy settings API.
@@ -380,7 +264,7 @@ app.extensionManager.setting.set('TestSetting', 'Hello, universe!')
 
 </details>
 
-<details id='extension-api-commands-keybindings'>
+<details>
   <summary>v1.3.7: Register commands and keybindings</summary>
 
   Extensions can call the following API to register commands and keybindings. Do
@@ -409,7 +293,7 @@ app.extensionManager.setting.set('TestSetting', 'Hello, universe!')
 
 </details>
 
-<details id='extension-api-topbar-menu'>
+<details>
   <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.
@@ -438,7 +322,7 @@ app.extensionManager.setting.set('TestSetting', 'Hello, universe!')
 ![image](https://github.com/user-attachments/assets/ae7b082f-7ce9-4549-a446-4563567102fe)
 </details>
 
-<details id='extension-api-toast'>
+<details>
   <summary>v1.2.27: Extension API to add toast message</summary>i
 
   Extensions can call the following API to add toast messages.
@@ -456,7 +340,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 id='extension-api-sidebar-tab'>
+<details>
   <summary>v1.2.4: Extension API to register custom sidebar tab</summary>
 
   Extensions now can call the following API to register a sidebar tab.
@@ -481,35 +365,6 @@ We will support custom icons later.
 ![image](https://github.com/user-attachments/assets/7bff028a-bf91-4cab-bf97-55c243b3f5e0)
 </details>
 
-<details id='extension-api-selection-toolbox'>
-  <summary>v1.10.9: Selection Toolbox API</summary>
-
-Extensions can register commands that appear in the selection toolbox when specific items are selected on the canvas.
-
-```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)
-
-</details>
-
 ## Development
 
 ### Tech Stack
@@ -517,9 +372,8 @@ The selection toolbox will display the command button when items are selected:
 - [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
+- [Litegraph](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
 
@@ -531,36 +385,17 @@ 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
-
-#### 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:unit` to execute all unit tests.
+- `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.
 
 ### Component Test
 
@@ -572,17 +407,25 @@ Component test verifies Vue components in `src/components/`.
 
 Playwright test verifies the whole app. See <https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/browser_tests/README.md> for details.
 
-### litegraph.js
+### LiteGraph
 
 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.js changes
+### Test litegraph changes
 
 - Run `npm link` in the local litegraph repo.
 - Run `npm link @comfyorg/litegraph` in this repo.
 
 This will replace the litegraph package in this repo with the local litegraph repo.
 
-### i18n
+## Deploy
 
-See [locales/README.md](src/locales/README.md) for details.
+- 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>`

babel.config.json

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

browser_tests/README.md

@@ -9,26 +9,15 @@ If `TEST_COMFYUI_DIR` in `.env` isn't set to your `(Comfy Path)/ComfyUI` directo
 
 ## Setup
 
-### ComfyUI devtools
-Clone <https://github.com/Comfy-Org/ComfyUI_devtools> to your `custom_nodes` directory.  
-_ComfyUI_devtools adds additional API endpoints and nodes to ComfyUI for browser testing._
+Clone <https://github.com/Comfy-Org/ComfyUI_devtools> to your `custom_nodes` directory.
+ComfyUI_devtools adds additional API endpoints and nodes to ComfyUI for browser testing.
 
-### Node.js & Playwright Prerequisites
 Ensure you have Node.js v20 or later installed. Then, set up the Chromium test driver:
+
 ```bash
 npx playwright install chromium --with-deps
 ```
 
-### Environment Variables
-Ensure the environment variables in `.env` are set correctly according to your setup. 
-
-The `.env` file will not exist until you create it yourself.
-
-A template with helpful information can be found in `.env_example`.
-
-### Multiple Tests
-If you are running Playwright tests in parallel or running the same test multiple times, the flag `--multi-user` must be added to the main ComfyUI process.
-
 ## Running Tests
 
 There are two ways to run the tests:

browser_tests/actionbar.spec.ts

@@ -1,9 +1,8 @@
 import type { Response } from '@playwright/test'
+import type { StatusWsMessage } from '../src/types/apiTypes.ts'
 import { expect, mergeTests } from '@playwright/test'
-
-import type { StatusWsMessage } from '../../src/schemas/apiSchema.ts'
-import { comfyPageFixture } from '../fixtures/ComfyPage.ts'
-import { webSocketFixture } from '../fixtures/ws.ts'
+import { comfyPageFixture } from './fixtures/ComfyPage'
+import { webSocketFixture } from './fixtures/ws.ts'
 
 const test = mergeTests(comfyPageFixture, webSocketFixture)
 
@@ -53,9 +52,7 @@ test.describe('Actionbar', () => {
           (n) => n.type === 'EmptyLatentImage'
         )
         node.widgets[0].value = value
-        window[
-          'app'
-        ].extensionManager.workflow.activeWorkflow.changeTracker.checkState()
+        window['app'].workflowManager.activeWorkflow.changeTracker.checkState()
       }, value)
     }
 

browser_tests/assets/bad_link.json

@@ -1,126 +0,0 @@
-{
-  "id": "51b9b184-770d-40ac-a478-8cc31667ff23",
-  "revision": 0,
-  "last_node_id": 5,
-  "last_link_id": 3,
-  "nodes": [
-    {
-      "id": 4,
-      "type": "KSampler",
-      "pos": [
-        867.4669799804688,
-        347.22369384765625
-      ],
-      "size": [
-        315,
-        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
-        },
-        {
-          "name": "steps",
-          "type": "INT",
-          "widget": {
-            "name": "steps"
-          },
-          "link": 3
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "KSampler"
-      },
-      "widgets_values": [
-        0,
-        "randomize",
-        20,
-        8,
-        "euler",
-        "normal",
-        1
-      ]
-    },
-    {
-      "id": 5,
-      "type": "PrimitiveInt",
-      "pos": [
-        443.0852355957031,
-        441.131591796875
-      ],
-      "size": [
-        315,
-        82
-      ],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "INT",
-          "type": "INT",
-          "links": [
-            3
-          ]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "PrimitiveInt"
-      },
-      "widgets_values": [
-        0,
-        "randomize"
-      ]
-    }
-  ],
-  "links": [
-    [
-      3,
-      5,
-      0,
-      4,
-      5,
-      "INT"
-    ]
-  ],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1.9487171000000016,
-      "offset": [
-        -325.57196748514497,
-        -168.13150517966463
-      ]
-    }
-  },
-  "version": 0.4
-}

browser_tests/assets/collapsed_multiline.json

@@ -1,37 +0,0 @@
-{
-  "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-fp16.safetensors"]
+      "widgets_values": ["v1-5-pruned-emaonly.ckpt"]
     }
   ],
   "links": [

browser_tests/assets/default_input.json

@@ -1,53 +0,0 @@
-{
-  "id": "9bcb9451-8319-492a-88d4-fb711d8c3d25",
-  "revision": 0,
-  "last_node_id": 6,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 6,
-      "type": "DevToolsNodeWithDefaultInput",
-      "pos": [
-        8.39722728729248,
-        29.727279663085938
-      ],
-      "size": [
-        315,
-        82
-      ],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "float_input",
-          "shape": 7,
-          "type": "FLOAT",
-          "link": null
-        }
-      ],
-      "outputs": [],
-      "properties": {
-        "Node name for S&R": "DevToolsNodeWithDefaultInput"
-      },
-      "widgets_values": [
-        0,
-        1,
-        0
-      ]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 2.1600300525920346,
-      "offset": [
-        63.071794466403446,
-        75.18055335968394
-      ]
-    }
-  },
-  "version": 0.4
-}

browser_tests/assets/dynamically_added_input.json

@@ -1,82 +0,0 @@
-{
-  "last_node_id": 9,
-  "last_link_id": 13,
-  "nodes": [
-    {
-      "id": 3,
-      "type": "KSampler",
-      "pos": [
-        0,
-        30
-      ],
-      "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
-        } ,
-        {
-          "name": "dynamic_input",
-          "type": "FLOAT",
-          "link": null,
-          "_meta": "Dynamically added input via frontend JS logic"
-        }
-      ],
-      "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": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [
-        0,
-        0
-      ]
-    }
-  },
-  "version": 0.4
-}

browser_tests/assets/group_node_identical_nodes_hidden_inputs.json

@@ -1,163 +0,0 @@
-{
-  "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/input_order_swap.json

@@ -1,74 +0,0 @@
-{
-  "id": "51b9b184-770d-40ac-a478-8cc31667ff23",
-  "revision": 0,
-  "last_node_id": 2,
-  "last_link_id": 1,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "CLIPTextEncode",
-      "pos": [904, 466],
-      "size": [400, 200],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "text",
-          "type": "STRING",
-          "widget": {
-            "name": "text"
-          },
-          "link": 1
-        },
-        {
-          "name": "clip",
-          "type": "CLIP",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "CONDITIONING",
-          "type": "CONDITIONING",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "CLIPTextEncode"
-      },
-      "widgets_values": [""]
-    },
-    {
-      "id": 2,
-      "type": "PrimitiveString",
-      "pos": [556.8589477539062, 472.94342041015625],
-      "size": [315, 58],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "STRING",
-          "type": "STRING",
-          "links": [1]
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "PrimitiveString"
-      },
-      "widgets_values": ["foo"]
-    }
-  ],
-  "links": [[1, 2, 0, 1, 0, "STRING"]],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1.7715610000000013,
-      "offset": [-388.521484375, -162.31336975097656]
-    }
-  },
-  "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": "text_encoders"
+      "directory": "clip"
     }
   ],
   "version": 0.4

browser_tests/assets/missing_models_from_node_properties.json

@@ -1,49 +0,0 @@
-{
-  "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

@@ -1,66 +0,0 @@
-{
-  "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,
-        "",
-        {
-          "foo": "bar"
-        }
-      ]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {},
-  "version": 0.4
-}

browser_tests/assets/mixed_graph_items.json

@@ -1,227 +0,0 @@
-{
-  "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

@@ -1,55 +0,0 @@
-{
-  "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/optional_combo_input.json

@@ -1,37 +0,0 @@
-{
-  "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

@@ -1,90 +0,0 @@
-{
-  "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/primitive_node_unconnected_dom_widget.json

@@ -1,59 +0,0 @@
-{
-  "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/primitive/static_primitive_unconnected.json

@@ -1,104 +0,0 @@
-{
-  "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": "PrimitiveInt",
-      "pos": {
-        "0": 14,
-        "1": 43
-      },
-      "size": [
-        203.1999969482422,
-        40.368401303242536
-      ],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "value",
-          "type": "INT",
-          "links": [],
-          "slot_index": 0
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "Int"
-      },
-      "widgets_values": [10]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [
-        0,
-        0
-      ]
-    }
-  },
-  "version": 0.4
-}

browser_tests/assets/remote_widget.json

@@ -1,48 +0,0 @@
-{
-  "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

@@ -1,101 +0,0 @@
-{
-  "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

@@ -1,110 +0,0 @@
-{
-  "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

@@ -1,49 +0,0 @@
-{
-  "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

@@ -1,116 +0,0 @@
-{
-  "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

@@ -1,42 +0,0 @@
-{
-  "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

@@ -1,35 +0,0 @@
-{
-  "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

@@ -1,32 +0,0 @@
-{
-  "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

@@ -1,46 +0,0 @@
-{
-  "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

@@ -1,43 +0,0 @@
-{
-  "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,6 +1,5 @@
 import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Browser tab title', () => {
   test.describe('Beta Menu', () => {
@@ -10,22 +9,24 @@ test.describe('Browser tab title', () => {
 
     test('Can display workflow name', async ({ comfyPage }) => {
       const workflowName = await comfyPage.page.evaluate(async () => {
-        return window['app'].extensionManager.workflow.activeWorkflow.filename
+        return window['app'].workflowManager.activeWorkflow.name
       })
+      // Note: unsaved workflow name is always prepended with "*".
       expect(await comfyPage.page.title()).toBe(`*${workflowName} - ComfyUI`)
     })
 
-    // Failing on CI
-    // Cannot reproduce locally
+    // Broken by https://github.com/Comfy-Org/ComfyUI_frontend/pull/893
+    // Release blocker for v1.3.0
     test.skip('Can display workflow name with unsaved changes', async ({
       comfyPage
     }) => {
       const workflowName = await comfyPage.page.evaluate(async () => {
-        return window['app'].extensionManager.workflow.activeWorkflow.filename
+        return window['app'].workflowManager.activeWorkflow.name
       })
-      expect(await comfyPage.page.title()).toBe(`${workflowName} - ComfyUI`)
+      // Note: unsaved workflow name is always prepended with "*".
+      expect(await comfyPage.page.title()).toBe(`*${workflowName} - ComfyUI`)
 
-      await comfyPage.menu.topbar.saveWorkflow('test')
+      await comfyPage.menu.saveWorkflow('test')
       expect(await comfyPage.page.title()).toBe('test - ComfyUI')
 
       const textBox = comfyPage.widgetTextBox
@@ -35,7 +36,7 @@ test.describe('Browser tab title', () => {
 
       // Delete the saved workflow for cleanup.
       await comfyPage.page.evaluate(async () => {
-        return window['app'].extensionManager.workflow.activeWorkflow.delete()
+        window['app'].workflowManager.activeWorkflow.delete()
       })
     })
   })

browser_tests/changeTracker.spec.ts

@@ -0,0 +1,100 @@
+import {
+  ComfyPage,
+  comfyPageFixture as test,
+  comfyExpect as expect
+} 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('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('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()
+
+    // Run again, but within a change transaction
+    beforeChange(comfyPage)
+
+    await node.click('collapse')
+    await comfyPage.ctrlB()
+    await expect(node).toBeCollapsed()
+    await expect(node).toBeBypassed()
+
+    // End transaction
+    afterChange(comfyPage)
+
+    // Ensure undo reverts both changes
+    await comfyPage.ctrlZ()
+    await expect(node).not.toBeBypassed()
+    await expect(node).not.toBeCollapsed()
+  })
+
+  test('Can group multiple transaction calls into a single one', 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 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()
+  })
+})

browser_tests/colorPalette.spec.ts

@@ -1,9 +1,7 @@
 import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
-import type { Palette } from '../../src/schemas/colorPaletteSchema'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-const customColorPalettes: Record<string, Palette> = {
+const customColorPalettes = {
   obsidian: {
     version: 102,
     id: 'obsidian',
@@ -129,62 +127,23 @@ const customColorPalettes: Record<string, Palette> = {
         '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('Can show custom color palette', async ({ comfyPage }) => {
+  test.beforeEach(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
+  test('Can show custom color palette', async ({ comfyPage }) => {
     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')
   })
 })
 
@@ -233,7 +192,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/)
     }
@@ -252,7 +211,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

@@ -1,6 +1,5 @@
 import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Keybindings', () => {
   test('Should execute command', async ({ comfyPage }) => {
@@ -32,7 +31,7 @@ test.describe('Keybindings', () => {
     })
 
     await comfyPage.executeCommand('TestCommand')
-    expect(await comfyPage.getToastErrorCount()).toBe(1)
+    await expect(comfyPage.page.locator('.p-toast')).toBeVisible()
   })
 
   test('Should handle async command errors', async ({ comfyPage }) => {
@@ -45,6 +44,6 @@ test.describe('Keybindings', () => {
     })
 
     await comfyPage.executeCommand('TestCommand')
-    expect(await comfyPage.getToastErrorCount()).toBe(1)
+    await expect(comfyPage.page.locator('.p-toast')).toBeVisible()
   })
 })

browser_tests/copyPaste.spec.ts

@@ -1,6 +1,5 @@
 import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Copy Paste', () => {
   test('Can copy and paste node', async ({ comfyPage }) => {
@@ -11,36 +10,20 @@ 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(null)
-    await comfyPage.ctrlV(null)
-    await comfyPage.ctrlV(null)
+    await comfyPage.ctrlC()
+    await comfyPage.ctrlV()
+    await comfyPage.ctrlV()
     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.
-    // KSampler's seed
-    await comfyPage.canvas.click({
-      position: {
-        x: 1005,
-        y: 281
-      }
-    })
-    await comfyPage.ctrlC(null)
     // Empty latent node's width
     await comfyPage.canvas.click({
       position: {
@@ -48,7 +31,15 @@ test.describe('Copy Paste', () => {
         y: 643
       }
     })
-    await comfyPage.ctrlV(null)
+    await comfyPage.ctrlC()
+    // KSampler's seed
+    await comfyPage.canvas.click({
+      position: {
+        x: 1005,
+        y: 281
+      }
+    })
+    await comfyPage.ctrlV()
     await comfyPage.page.keyboard.press('Enter')
     await expect(comfyPage.canvas).toHaveScreenshot('copied-widget-value.png')
   })
@@ -60,14 +51,14 @@ test.describe('Copy Paste', () => {
     comfyPage
   }) => {
     await comfyPage.clickEmptyLatentNode()
-    await comfyPage.ctrlC(null)
+    await comfyPage.ctrlC()
     const textBox = comfyPage.widgetTextBox
     await textBox.click()
     await textBox.inputValue()
     await textBox.selectText()
-    await comfyPage.ctrlC(null)
-    await comfyPage.ctrlV(null)
-    await comfyPage.ctrlV(null)
+    await comfyPage.ctrlC()
+    await comfyPage.ctrlV()
+    await comfyPage.ctrlV()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'paste-in-text-area-with-node-previously-copied.png'
     )
@@ -78,10 +69,10 @@ test.describe('Copy Paste', () => {
     await textBox.click()
     await textBox.inputValue()
     await textBox.selectText()
-    await comfyPage.ctrlC(null)
+    await comfyPage.ctrlC()
     // Unfocus textbox.
     await comfyPage.page.mouse.click(10, 10)
-    await comfyPage.ctrlV(null)
+    await comfyPage.ctrlV()
     await expect(comfyPage.canvas).toHaveScreenshot('no-node-copied.png')
   })
 

browser_tests/dialog.spec.ts

@@ -0,0 +1,98 @@
+import { expect } from '@playwright/test'
+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 ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('missing_nodes')
+
+    // Wait for the element with the .comfy-missing-nodes selector to be visible
+    const missingNodesWarning = comfyPage.page.locator('.comfy-missing-nodes')
+    await expect(missingNodesWarning).toBeVisible()
+  })
+})
+
+test('Does not report warning on undo/redo', async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+
+  await comfyPage.loadWorkflow('missing_nodes')
+  await comfyPage.closeDialog()
+
+  // Make a change to the graph
+  await comfyPage.doubleClickCanvas()
+  await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
+
+  // Undo and redo the change
+  await comfyPage.ctrlZ()
+  await expect(comfyPage.page.locator('.comfy-missing-nodes')).not.toBeVisible()
+  await comfyPage.ctrlY()
+  await expect(comfyPage.page.locator('.comfy-missing-nodes')).not.toBeVisible()
+})
+
+test.describe('Execution error', () => {
+  test('Should display an error message when an execution error occurs', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('execution_error')
+    await comfyPage.queueButton.click()
+
+    // 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.describe('Missing models warning', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.Workflow.ShowMissingModelsWarning', true)
+    await comfyPage.page.evaluate((url: string) => {
+      return fetch(`${url}/api/devtools/cleanup_fake_model`)
+    }, comfyPage.url)
+  })
+
+  test('Should display a warning when missing models are found', async ({
+    comfyPage
+  }) => {
+    // The fake_model.safetensors is served by
+    // https://github.com/Comfy-Org/ComfyUI_devtools/blob/main/__init__.py
+    await comfyPage.loadWorkflow('missing_models')
+
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
+
+    const downloadButton = comfyPage.page.getByLabel('Download')
+    await expect(downloadButton).toBeVisible()
+    const downloadPromise = comfyPage.page.waitForEvent('download')
+    await downloadButton.click()
+
+    const download = await downloadPromise
+    expect(download.suggestedFilename()).toBe('fake_model.safetensors')
+  })
+})
+
+test.describe('Settings', () => {
+  test('@mobile Should be visible on mobile', async ({ comfyPage }) => {
+    await comfyPage.page.keyboard.press('Control+,')
+    const searchBox = comfyPage.page.locator('.settings-content')
+    await expect(searchBox).toBeVisible()
+  })
+
+  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)
+    test.step('Setting should persist', async () => {
+      expect(await comfyPage.getSetting('Comfy.Graph.ZoomSpeed')).toBe(maxSpeed)
+    })
+  })
+})

browser_tests/extensionAPI.spec.ts

@@ -0,0 +1,101 @@
+import { expect, Locator } from '@playwright/test'
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
+
+test.describe('Topbar commands', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('Should allow registering topbar commands', async ({ comfyPage }) => {
+    await comfyPage.page.evaluate(() => {
+      window['app'].registerExtension({
+        name: 'TestExtension1',
+        commands: [
+          {
+            id: '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: Locator = await 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('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!'
+          }
+        ]
+      })
+    })
+    expect(await comfyPage.getSetting('TestSetting')).toBe('Hello, world!')
+    await comfyPage.setSetting('TestSetting', 'Hello, universe!')
+    expect(await comfyPage.getSetting('TestSetting')).toBe('Hello, universe!')
+  })
+})

browser_tests/fixtures/ComfyMouse.ts

@@ -1,97 +0,0 @@
-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

@@ -1,39 +1,24 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
-import type { APIRequestContext, Locator, Page } from '@playwright/test'
+import type { Page, Locator, APIRequestContext } 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 dotenv from 'dotenv'
+dotenv.config()
+import * as fs from 'fs'
+import { NodeBadgeMode } from '../../src/types/nodeSource'
+import type { NodeId } from '../../src/types/comfyWorkflow'
+import type { KeyCombo } from '../../src/types/keyBindingTypes'
 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>
+import type { Position, Size } from './types'
 
 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
@@ -47,23 +32,15 @@ class ComfyMenu {
   }
 
   get nodeLibraryTab() {
-    this._nodeLibraryTab ??= new NodeLibrarySidebarTab(this.page)
-    return this._nodeLibraryTab
+    return new NodeLibrarySidebarTab(this.page)
   }
 
   get workflowsTab() {
-    this._workflowsTab ??= new WorkflowsSidebarTab(this.page)
-    return this._workflowsTab
-  }
-
-  get queueTab() {
-    this._queueTab ??= new QueueSidebarTab(this.page)
-    return this._queueTab
+    return new WorkflowsSidebarTab(this.page)
   }
 
   get topbar() {
-    this._topbar ??= new Topbar(this.page)
-    return this._topbar
+    return new Topbar(this.page)
   }
 
   async toggleTheme() {
@@ -94,33 +71,7 @@ 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
@@ -138,16 +89,6 @@ export class ComfyPage {
   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,
@@ -163,8 +104,6 @@ export class ComfyPage {
     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 {
@@ -204,7 +143,7 @@ export class ComfyPage {
       {
         data: {
           tree_structure: this.convertLeafToContent(structure),
-          base_path: `user/${this.id}/workflows`
+          base_path: 'user/default/workflows'
         }
       }
     )
@@ -214,35 +153,6 @@ export class ComfyPage {
         `Failed to setup workflows directory: ${await resp.text()}`
       )
     }
-
-    await this.page.evaluate(async () => {
-      await window['app'].extensionManager.workflow.syncWorkflows()
-    })
-  }
-
-  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>) {
@@ -258,22 +168,12 @@ export class ComfyPage {
     }
   }
 
-  setupHistory(): TaskHistory {
-    this._history ??= new TaskHistory(this)
-    return this._history
-  }
-
-  async setup({ clearStorage = true }: { clearStorage?: boolean } = {}) {
+  async setup() {
     await this.goto()
-    if (clearStorage) {
-      await this.page.evaluate((id) => {
-        localStorage.clear()
-        sessionStorage.clear()
-        localStorage.setItem('Comfy.userId', id)
-      }, this.id)
-    }
-    await this.goto()
-
+    await this.page.evaluate(() => {
+      localStorage.clear()
+      sessionStorage.clear()
+    })
     // 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'
@@ -284,8 +184,8 @@ export class ComfyPage {
     await this.page.addStyleTag({
       content: `
       * {
-        font-family: 'Roboto Mono', 'Noto Color Emoji';
-      }`
+				font-family: 'Roboto Mono', 'Noto Color Emoji';
+			}`
     })
     await this.page.waitForFunction(() => document.fonts.ready)
     await this.page.waitForFunction(
@@ -375,6 +275,11 @@ export class ComfyPage {
     }, settingId)
   }
 
+  async reload() {
+    await this.page.reload({ timeout: 15000 })
+    await this.setup()
+  }
+
   async goto() {
     await this.page.goto(this.url)
   }
@@ -405,14 +310,8 @@ export class ComfyPage {
     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-message:visible').count()
+    return await this.page.locator('.p-toast:visible').count()
   }
 
   async clickTextEncodeNode1() {
@@ -463,14 +362,7 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
-  async dragAndDropFile(
-    fileName: string,
-    options: {
-      dropPosition?: Position
-    } = {}
-  ) {
-    const { dropPosition = { x: 100, y: 100 } } = options
-
+  async dragAndDropFile(fileName: string) {
     const filePath = this.assetPath(fileName)
 
     // Read the file content
@@ -480,65 +372,39 @@ export class ComfyPage {
     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'
-      if (fileName.endsWith('.glb')) return 'model/gltf-binary'
       return 'application/octet-stream'
     }
 
     const fileType = getFileType(fileName)
 
     await this.page.evaluate(
-      async ({ buffer, fileName, fileType, dropPosition }) => {
+      async ({ buffer, fileName, fileType }) => {
         const file = new File([new Uint8Array(buffer)], fileName, {
           type: fileType
         })
         const dataTransfer = new DataTransfer()
         dataTransfer.items.add(file)
 
-        const targetElement = document.elementFromPoint(
-          dropPosition.x,
-          dropPosition.y
-        )
-
-        if (!targetElement) {
-          console.error('No element found at drop position:', dropPosition)
-          return { success: false, error: 'No element at position' }
-        }
-
-        const eventOptions = {
+        const dropEvent = new DragEvent('drop', {
           bubbles: true,
           cancelable: true,
-          dataTransfer,
-          clientX: dropPosition.x,
-          clientY: dropPosition.y
-        }
-
-        const dragOverEvent = new DragEvent('dragover', eventOptions)
-        const dropEvent = new DragEvent('drop', eventOptions)
+          dataTransfer
+        })
 
         Object.defineProperty(dropEvent, 'preventDefault', {
           value: () => {},
           writable: false
         })
+
         Object.defineProperty(dropEvent, 'stopPropagation', {
           value: () => {},
           writable: false
         })
 
-        targetElement.dispatchEvent(dragOverEvent)
-        targetElement.dispatchEvent(dropEvent)
-
-        return {
-          success: true,
-          targetInfo: {
-            tagName: targetElement.tagName,
-            id: targetElement.id,
-            classList: Array.from(targetElement.classList)
-          }
-        }
+        document.dispatchEvent(dropEvent)
       },
-      { buffer: [...new Uint8Array(buffer)], fileName, fileType, dropPosition }
+      { buffer: [...new Uint8Array(buffer)], fileName, fileType }
     )
 
     await this.nextFrame()
@@ -574,35 +440,15 @@ export class ComfyPage {
     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(
-    options: {
-      reverse?: boolean
-    } = {}
-  ) {
-    const { reverse = false } = options
-    const start = reverse
-      ? this.clipTextEncodeNode1InputSlot
-      : this.loadCheckpointNodeClipOutputSlot
-    const end = reverse
-      ? this.loadCheckpointNodeClipOutputSlot
-      : this.clipTextEncodeNode1InputSlot
-
-    await this.dragAndDrop(start, end)
+  async connectEdge() {
+    await this.dragAndDrop(
+      this.loadCheckpointNodeClipOutputSlot,
+      this.clipTextEncodeNode1InputSlot
+    )
   }
 
   async adjustWidgetValue() {
@@ -633,6 +479,9 @@ export class ComfyPage {
     safeSpot = safeSpot || { x: 10, y: 10 }
     await this.page.mouse.move(safeSpot.x, safeSpot.y)
     await this.page.mouse.down()
+    // TEMPORARY HACK: Multiple pans open the search menu, so cheat and keep it closed.
+    // TODO: Fix that (double-click at not-the-same-coordinations should not open the menu)
+    await this.page.keyboard.press('Escape')
     await this.page.mouse.move(offset.x + safeSpot.x, offset.y + safeSpot.y)
     await this.page.mouse.up()
     await this.nextFrame()
@@ -661,13 +510,8 @@ export class ComfyPage {
     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.page.mouse.dblclick(10, 10)
     await this.nextFrame()
   }
 
@@ -694,18 +538,6 @@ export class ComfyPage {
     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')
@@ -715,42 +547,43 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
-  async ctrlSend(keyToPress: string, locator: Locator | null = this.canvas) {
-    const target = locator ?? this.page.keyboard
-    await target.press(`Control+${keyToPress}`)
+  async ctrlSend(keyToPress: string) {
+    await this.page.keyboard.down('Control')
+    await this.page.keyboard.press(keyToPress)
+    await this.page.keyboard.up('Control')
     await this.nextFrame()
   }
 
-  async ctrlA(locator?: Locator | null) {
-    await this.ctrlSend('KeyA', locator)
+  async ctrlA() {
+    await this.ctrlSend('KeyA')
   }
 
-  async ctrlB(locator?: Locator | null) {
-    await this.ctrlSend('KeyB', locator)
+  async ctrlB() {
+    await this.ctrlSend('KeyB')
   }
 
-  async ctrlC(locator?: Locator | null) {
-    await this.ctrlSend('KeyC', locator)
+  async ctrlC() {
+    await this.ctrlSend('KeyC')
   }
 
-  async ctrlV(locator?: Locator | null) {
-    await this.ctrlSend('KeyV', locator)
+  async ctrlV() {
+    await this.ctrlSend('KeyV')
   }
 
-  async ctrlZ(locator?: Locator | null) {
-    await this.ctrlSend('KeyZ', locator)
+  async ctrlZ() {
+    await this.ctrlSend('KeyZ')
   }
 
-  async ctrlY(locator?: Locator | null) {
-    await this.ctrlSend('KeyY', locator)
+  async ctrlY() {
+    await this.ctrlSend('KeyY')
   }
 
-  async ctrlArrowUp(locator?: Locator | null) {
-    await this.ctrlSend('ArrowUp', locator)
+  async ctrlArrowUp() {
+    await this.ctrlSend('ArrowUp')
   }
 
-  async ctrlArrowDown(locator?: Locator | null) {
-    await this.ctrlSend('ArrowDown', locator)
+  async ctrlArrowDown() {
+    await this.ctrlSend('ArrowDown')
   }
 
   async closeMenu() {
@@ -778,14 +611,10 @@ export class ComfyPage {
       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.dragAndDrop(bottomRight, target)
     await this.nextFrame()
     if (revertAfter) {
-      await this.dragAndDrop({ x: target.x - 2, y: target.y - 1 }, bottomRight)
+      await this.dragAndDrop(target, bottomRight)
       await this.nextFrame()
     }
   }
@@ -796,20 +625,14 @@ export class ComfyPage {
     revertAfter: boolean = false
   ) {
     const ksamplerPos = {
-      x: 863,
-      y: 156
+      x: 864,
+      y: 157
     }
     const ksamplerSize = {
       width: 315,
       height: 292
     }
-    return this.resizeNode(
-      ksamplerPos,
-      ksamplerSize,
-      percentX,
-      percentY,
-      revertAfter
-    )
+    this.resizeNode(ksamplerPos, ksamplerSize, percentX, percentY, revertAfter)
   }
 
   async resizeLoadCheckpointNode(
@@ -818,14 +641,14 @@ export class ComfyPage {
     revertAfter: boolean = false
   ) {
     const loadCheckpointPos = {
-      x: 26,
-      y: 444
+      x: 25,
+      y: 440
     }
     const loadCheckpointSize = {
-      width: 315,
-      height: 127
+      width: 320,
+      height: 120
     }
-    return this.resizeNode(
+    this.resizeNode(
       loadCheckpointPos,
       loadCheckpointSize,
       percentX,
@@ -840,14 +663,14 @@ export class ComfyPage {
     revertAfter: boolean = false
   ) {
     const emptyLatentPos = {
-      x: 473,
-      y: 579
+      x: 475,
+      y: 580
     }
     const emptyLatentSize = {
-      width: 315,
-      height: 136
+      width: 303,
+      height: 132
     }
-    return this.resizeNode(
+    this.resizeNode(
       emptyLatentPos,
       emptyLatentSize,
       percentX,
@@ -856,27 +679,15 @@ export class ComfyPage {
     )
   }
 
-  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) {
+    this.page.on('dialog', async (dialog) => {
+      await dialog.accept(groupNodeName)
+    })
     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)
@@ -885,34 +696,17 @@ export class ComfyPage {
   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)
+            .filter((n) => n.type === type)
+            .map((n) => 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
@@ -923,77 +717,23 @@ export class ComfyPage {
   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) => {
+export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({
+  comfyPage: async ({ page, request }, use) => {
     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.setupSettings({
+      // Hide canvas menu/info by default.
+      'Comfy.Graph.CanvasInfo': false,
+      'Comfy.Graph.CanvasMenu': 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
+    })
     await comfyPage.setup()
     await use(comfyPage)
-  },
-  comfyMouse: async ({ comfyPage }, use) => {
-    const comfyMouse = new ComfyMouse(comfyPage)
-    use(comfyMouse)
   }
 })
 
@@ -1026,19 +766,5 @@ const makeMatcher = function <T>(
 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.`
-    }
-  }
+  toBeCollapsed: makeMatcher((n) => n.isCollapsed(), 'collapsed')
 })