nit

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

.claude/commands/create-frontend-release.md

@@ -171,53 +171,7 @@ echo "Last stable release: $LAST_STABLE"
 
 ### Step 7: Analyze Dependency Updates
 
-1. **Check for dependency version changes:**
-   ```bash
-   # Compare package.json between versions to detect dependency updates
-   PREV_PACKAGE_JSON=$(git show ${BASE_TAG}:package.json 2>/dev/null || echo '{}')
-   CURRENT_PACKAGE_JSON=$(cat package.json)
-   
-   # Extract litegraph versions
-   PREV_LITEGRAPH=$(echo "$PREV_PACKAGE_JSON" | grep -o '"@comfyorg/litegraph": "[^"]*"' | grep -o '[0-9][^"]*' || echo "not found")
-   CURRENT_LITEGRAPH=$(echo "$CURRENT_PACKAGE_JSON" | grep -o '"@comfyorg/litegraph": "[^"]*"' | grep -o '[0-9][^"]*' || echo "not found")
-   
-   echo "Litegraph version change: ${PREV_LITEGRAPH} → ${CURRENT_LITEGRAPH}"
-   ```
-
-2. **Generate litegraph changelog if version changed:**
-   ```bash
-   if [ "$PREV_LITEGRAPH" != "$CURRENT_LITEGRAPH" ] && [ "$PREV_LITEGRAPH" != "not found" ]; then
-     echo "📦 Fetching litegraph changes between v${PREV_LITEGRAPH} and v${CURRENT_LITEGRAPH}..."
-     
-     # Clone or update litegraph repo for changelog analysis
-     if [ ! -d ".temp-litegraph" ]; then
-       git clone https://github.com/comfyanonymous/litegraph.js.git .temp-litegraph
-     else
-       cd .temp-litegraph && git fetch --all && cd ..
-     fi
-     
-     # Get litegraph changelog between versions
-     LITEGRAPH_CHANGES=$(cd .temp-litegraph && git log v${PREV_LITEGRAPH}..v${CURRENT_LITEGRAPH} --oneline --no-merges 2>/dev/null || \
-       git log --oneline --no-merges --since="$(git log -1 --format=%ci ${BASE_TAG})" --until="$(git log -1 --format=%ci HEAD)" 2>/dev/null || \
-       echo "Unable to fetch litegraph changes")
-     
-     # Categorize litegraph changes
-     LITEGRAPH_FEATURES=$(echo "$LITEGRAPH_CHANGES" | grep -iE "(feat|feature|add)" || echo "")
-     LITEGRAPH_FIXES=$(echo "$LITEGRAPH_CHANGES" | grep -iE "(fix|bug)" || echo "")
-     LITEGRAPH_BREAKING=$(echo "$LITEGRAPH_CHANGES" | grep -iE "(break|breaking)" || echo "")
-     LITEGRAPH_OTHER=$(echo "$LITEGRAPH_CHANGES" | grep -viE "(feat|feature|add|fix|bug|break|breaking)" || echo "")
-     
-     # Clean up temp directory
-     rm -rf .temp-litegraph
-     
-     echo "✅ Litegraph changelog extracted"
-   else
-     echo "ℹ️  No litegraph version change detected"
-     LITEGRAPH_CHANGES=""
-   fi
-   ```
-
-3. **Check other significant dependency updates:**
+1. **Check significant dependency updates:**
    ```bash
    # Extract all dependency changes for major version bumps
    OTHER_DEP_CHANGES=""
@@ -394,6 +348,14 @@ echo "Workflow triggered. Waiting for PR creation..."
    sleep 10
    gh run list --workflow=release.yaml --limit=1
    ```
+4. **For Minor/Major Version Releases**: The create-release-candidate-branch workflow will automatically:
+   - Create a `core/x.yy` branch for the PREVIOUS minor version
+   - Apply branch protection rules
+   - Document the feature freeze policy
+   ```bash
+   # Monitor branch creation (for minor/major releases)
+   gh run list --workflow=create-release-candidate-branch.yaml --limit=1
+   ```
 4. If workflow didn't trigger due to [skip ci]:
    ```bash
    echo "ERROR: Release workflow didn't trigger!"

.cursor/rules/unit-test.mdc

@@ -0,0 +1,21 @@
+---
+description: Creating unit tests
+globs: 
+alwaysApply: false
+---
+
+# Creating unit tests
+
+- This project uses `vitest` for unit testing
+- Tests are stored in the `test/` directory
+- Tests should be cross-platform compatible; able to run on Windows, macOS, and linux
+  - e.g. the use of `path.resolve`, or `path.join` and `path.sep` to ensure that tests work the same on all platforms
+- Tests should be mocked properly
+  - Mocks should be cleanly written and easy to understand
+  - Mocks should be re-usable where possible
+
+## Unit test style
+
+- Prefer the use of `test.extend` over loose variables
+  - To achieve this, import `test as baseTest` from `vitest`
+- Never use `it`; `test` should be used in place of this

.github/ISSUE_TEMPLATE/bug-report.yaml

@@ -1,99 +1,106 @@
 name: Bug Report
-description: 'Something is not behaving as expected.'
+description: 'Report something that is not working correctly'
 title: '[Bug]: '
 labels: ['Potential Bug']
 type: Bug
 
 body:
-  - type: markdown
-    attributes:
-      value: |
-        Before submitting a **Bug Report**, please ensure the following:
-
-        - **1:** You are running the latest version of ComfyUI.
-        - **2:** You have looked at the existing bug reports and made sure this isn't already reported.
-
   - type: checkboxes
-    id: custom-nodes-test
     attributes:
-      label: Custom Node Testing
-      description: Please confirm you have tried to reproduce the issue with all custom nodes disabled.
+      label: Prerequisites
       options:
-        - label: I have tried disabling custom nodes and the issue persists (see [how to disable custom nodes](https://docs.comfy.org/troubleshooting/custom-node-issues#step-1%3A-test-with-all-custom-nodes-disabled) if you need help)
+        - label: I am running the latest version of ComfyUI
+          required: true
+        - label: I have searched existing issues to make sure this isn't a duplicate
+          required: true
+        - label: I have tested with all custom nodes disabled ([see how](https://docs.comfy.org/troubleshooting/custom-node-issues#step-1%3A-test-with-all-custom-nodes-disabled))
           required: true
 
   - type: textarea
+    id: description
     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>
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Expected Behavior
-      description: 'What you expected to happen.'
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Actual Behavior
-      description: 'What actually happened. Please include a screenshot / video clip of the issue if possible.'
+      label: What happened?
+      description: A clear and concise description of the bug. Include screenshots or videos if helpful.
+      placeholder: |
+        Example: "When I connect a VAE Decode node to a KSampler, the connection line appears but the workflow fails to execute with an error message..."
     validations:
       required: true
+
   - type: textarea
+    id: reproduce
     attributes:
       label: Steps to Reproduce
-      description: "Describe how to reproduce the issue. Please be sure to attach a workflow JSON or PNG, ideally one that doesn't require custom nodes to test. If the bug open happens when certain custom nodes are used, most likely that custom node is what has the bug rather than ComfyUI, in which case it should be reported to the node's author."
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Debug Logs
-      description: 'Please copy the output from your terminal logs here.'
-      render: powershell
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Browser Logs
-      description: 'Please copy the output from your browser logs here. You can access this by pressing F12 to toggle the developer tools, then navigating to the Console tab.'
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Setting JSON
-      description: 'Please upload the setting file here. The setting file is located at `user/default/comfy.settings.json`'
+      description: How can we reproduce this issue? Please attach your workflow (JSON or PNG).
+      placeholder: |
+        1. Add a KSampler node
+        2. Connect it to...
+        3. Click Queue Prompt
+        4. See error
+      value: |
+        1. 
+        2. 
+        3. 
     validations:
       required: true
+
   - type: dropdown
-    id: browsers
+    id: severity
     attributes:
-      label: What browsers do you use to access the UI ?
-      multiple: true
+      label: How is this affecting you?
       options:
-        - Mozilla Firefox
-        - Google Chrome
-        - Brave
-        - Apple Safari
-        - Microsoft Edge
-        - Android
-        - iOS
-        - 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...'
+        - Crashes ComfyUI completely
+        - Workflow won't execute
+        - Feature doesn't work as expected
+        - Visual/UI issue only
+        - Minor inconvenience
     validations:
-      required: false
+      required: true
+
+  - type: input
+    id: version
+    attributes:
+      label: ComfyUI Frontend Version
+      description: Found in Settings > About (e.g., "1.3.45")
+      placeholder: "1.3.45"
+    validations:
+      required: true
+
+  - type: dropdown
+    id: browser
+    attributes:
+      label: Browser
+      description: Which browser are you using?
+      options:
+        - Chrome/Chromium
+        - Firefox
+        - Safari
+        - Edge
+        - Other
+    validations:
+      required: true
+
+  - type: markdown
+    attributes:
+      value: |
+        ## Additional Information (Optional)
+        *The following fields help us debug complex issues but are not required for most bug reports.*
+
+  - type: textarea
+    id: console-errors
+    attributes:
+      label: Console Errors
+      description: If you see red error messages in the browser console (F12), paste them here
+      render: javascript
+
+  - type: textarea
+    id: logs
+    attributes:
+      label: Logs
+      description: If relevant, paste any terminal/server logs here
+      render: shell
+
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional Context
+      description: Any other information that might help (OS, GPU, specific nodes involved, etc.)

.github/ISSUE_TEMPLATE/feature-request.yaml

@@ -1,6 +1,6 @@
 name: Feature Request
-description: Suggest an idea for this project
-title: '[Feature Request]: '
+description: Report a problem or limitation you're experiencing
+title: '[Feature]: '
 labels: ['enhancement']
 type: Feature
 
@@ -8,34 +8,74 @@ body:
   - type: checkboxes
     attributes:
       label: Is there an existing issue for this?
-      description: Please search to see if an issue already exists for the feature you want, and that it's not implemented in a recent build/commit.
+      description: Please search to see if an issue already exists for the problem you're experiencing, and that it's not addressed in a recent build/commit.
       options:
         - label: I have searched the existing issues and checked the recent builds/commits
           required: true
   - type: markdown
     attributes:
       value: |
-        *Please fill this form with as much information as possible, provide screenshots and/or illustrations of the feature if possible*
+        *Please focus on describing the problem you're experiencing rather than proposing specific solutions. This helps us design the best possible solution for you and other users.*
   - type: textarea
-    id: feature
+    id: problem
     attributes:
-      label: What would your feature do ?
-      description: Tell us about your feature in a very clear and simple way, and what problem it would solve
+      label: What problem are you experiencing?
+      description: Describe the issue or limitation you're facing in your workflow
+      placeholder: |
+        Example: "I frequently lose work when switching between different projects because there's no way to save my current workspace state"
+        NOT: "Add a save button that exports the workspace"
     validations:
       required: true
   - type: textarea
-    id: workflow
+    id: context
     attributes:
-      label: Proposed workflow
-      description: Please provide us with step by step information on how you'd like the feature to be accessed and used
-      value: |
-        1. Go to ....
-        2. Press ....
-        3. ...
+      label: When does this problem occur?
+      description: Describe the specific situations or workflows where you encounter this issue
+      placeholder: |
+        - When working with large node graphs...
+        - During batch processing workflows...
+        - While collaborating with team members...
+    validations:
+      required: true
+  - type: dropdown
+    id: frequency
+    attributes:
+      label: How often do you encounter this problem?
+      options:
+        - Multiple times per day
+        - Daily
+        - Several times per week
+        - Weekly
+        - Occasionally
+        - Rarely
+    validations:
+      required: true
+  - type: dropdown
+    id: impact
+    attributes:
+      label: How much does this problem affect your workflow?
+      description: Help us understand the severity of this issue for you
+      options:
+        - Blocks me from completing tasks
+        - Significantly slows down my work
+        - Causes moderate inconvenience
+        - Minor annoyance
     validations:
       required: true
   - type: textarea
-    id: misc
+    id: workaround
     attributes:
-      label: Additional information
-      description: Add any other context or screenshots about the feature request here.
+      label: Current workarounds
+      description: How do you currently deal with this problem, if at all?
+      placeholder: |
+        Example: "I manually export and reimport nodes between projects, which takes 10-15 minutes each time"
+  - type: textarea
+    id: ideas
+    attributes:
+      label: Ideas for solutions (Optional)
+      description: If you have thoughts on potential solutions, feel free to share them here. However, we'll explore all possible options to find the best approach.
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional context
+      description: Add any other context, screenshots, or examples that help illustrate the problem.

.github/workflows/backport.yaml

@@ -0,0 +1,165 @@
+name: Auto Backport
+
+on:
+  pull_request_target:
+    types: [closed]
+    branches: [main]
+
+jobs:
+  backport:
+    if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'needs-backport')
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      issues: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Configure git
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+      - name: Extract version labels
+        id: versions
+        run: |
+          # Extract version labels (e.g., "1.24", "1.22")
+          VERSIONS=""
+          LABELS='${{ toJSON(github.event.pull_request.labels) }}'
+          for label in $(echo "$LABELS" | jq -r '.[].name'); do
+            # Match version labels like "1.24" (major.minor only)
+            if [[ "$label" =~ ^[0-9]+\.[0-9]+$ ]]; then
+              # Validate the branch exists before adding to list
+              if git ls-remote --exit-code origin "core/${label}" >/dev/null 2>&1; then
+                VERSIONS="${VERSIONS}${label} "
+              else
+                echo "::warning::Label '${label}' found but branch 'core/${label}' does not exist"
+              fi
+            fi
+          done
+
+          if [ -z "$VERSIONS" ]; then
+            echo "::error::No version labels found (e.g., 1.24, 1.22)"
+            exit 1
+          fi
+
+          echo "versions=${VERSIONS}" >> $GITHUB_OUTPUT
+          echo "Found version labels: ${VERSIONS}"
+
+      - name: Backport commits
+        id: backport
+        env:
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          PR_TITLE: ${{ github.event.pull_request.title }}
+          MERGE_COMMIT: ${{ github.event.pull_request.merge_commit_sha }}
+        run: |
+          FAILED=""
+          SUCCESS=""
+
+          for version in ${{ steps.versions.outputs.versions }}; do
+            echo "::group::Backporting to core/${version}"
+
+            TARGET_BRANCH="core/${version}"
+            BACKPORT_BRANCH="backport-${PR_NUMBER}-to-${version}"
+
+            # Fetch target branch (fail if doesn't exist)
+            if ! git fetch origin "${TARGET_BRANCH}"; then
+              echo "::error::Target branch ${TARGET_BRANCH} does not exist"
+              FAILED="${FAILED}${version}:branch-missing "
+              echo "::endgroup::"
+              continue
+            fi
+
+            # Create backport branch
+            git checkout -b "${BACKPORT_BRANCH}" "origin/${TARGET_BRANCH}"
+
+            # Try cherry-pick
+            if git cherry-pick "${MERGE_COMMIT}"; then
+              git push origin "${BACKPORT_BRANCH}"
+              SUCCESS="${SUCCESS}${version}:${BACKPORT_BRANCH} "
+              echo "Successfully created backport branch: ${BACKPORT_BRANCH}"
+              # Return to main (keep the branch, we need it for PR)
+              git checkout main
+            else
+              # Get conflict info
+              CONFLICTS=$(git diff --name-only --diff-filter=U | tr '\n' ',')
+              git cherry-pick --abort
+
+              echo "::error::Cherry-pick failed due to conflicts"
+              FAILED="${FAILED}${version}:conflicts:${CONFLICTS} "
+
+              # Clean up the failed branch
+              git checkout main
+              git branch -D "${BACKPORT_BRANCH}"
+            fi
+
+            echo "::endgroup::"
+          done
+
+          echo "success=${SUCCESS}" >> $GITHUB_OUTPUT
+          echo "failed=${FAILED}" >> $GITHUB_OUTPUT
+
+          if [ -n "${FAILED}" ]; then
+            exit 1
+          fi
+
+      - name: Create PR for each successful backport
+        if: steps.backport.outputs.success
+        env:
+          GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
+        run: |
+          PR_TITLE="${{ github.event.pull_request.title }}"
+          PR_NUMBER="${{ github.event.pull_request.number }}"
+          PR_AUTHOR="${{ github.event.pull_request.user.login }}"
+
+          for backport in ${{ steps.backport.outputs.success }}; do
+            IFS=':' read -r version branch <<< "${backport}"
+
+            if PR_URL=$(gh pr create \
+              --base "core/${version}" \
+              --head "${branch}" \
+              --title "[backport ${version}] ${PR_TITLE}" \
+              --body "Backport of #${PR_NUMBER} to \`core/${version}\`"$'\n\n'"Automatically created by backport workflow." \
+              --label "backport" 2>&1); then
+
+              # Extract PR number from URL
+              PR_NUM=$(echo "${PR_URL}" | grep -o '[0-9]*$')
+
+              if [ -n "${PR_NUM}" ]; then
+                gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Successfully backported to #${PR_NUM}"
+              fi
+            else
+              echo "::error::Failed to create PR for ${version}: ${PR_URL}"
+              # Still try to comment on the original PR about the failure
+              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport branch created but PR creation failed for \`core/${version}\`. Please create the PR manually from branch \`${branch}\`"
+            fi
+          done
+
+      - name: Comment on failures
+        if: failure() && steps.backport.outputs.failed
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          PR_NUMBER="${{ github.event.pull_request.number }}"
+          PR_AUTHOR="${{ github.event.pull_request.user.login }}"
+          MERGE_COMMIT="${{ github.event.pull_request.merge_commit_sha }}"
+
+          for failure in ${{ steps.backport.outputs.failed }}; do
+            IFS=':' read -r version reason conflicts <<< "${failure}"
+
+            if [ "${reason}" = "branch-missing" ]; then
+              gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Backport failed: Branch \`core/${version}\` does not exist"
+
+            elif [ "${reason}" = "conflicts" ]; then
+              # Convert comma-separated conflicts back to newlines for display
+              CONFLICTS_LIST=$(echo "${conflicts}" | tr ',' '\n' | sed 's/^/- /')
+
+              COMMENT_BODY="@${PR_AUTHOR} Backport to \`core/${version}\` failed: Merge conflicts detected."$'\n\n'"Please manually cherry-pick commit \`${MERGE_COMMIT}\` to the \`core/${version}\` branch."$'\n\n'"<details><summary>Conflicting files</summary>"$'\n\n'"${CONFLICTS_LIST}"$'\n\n'"</details>"
+              gh pr comment "${PR_NUMBER}" --body "${COMMENT_BODY}"
+            fi
+          done

.github/workflows/claude-pr-review.yml

@@ -19,10 +19,10 @@ jobs:
       should-proceed: ${{ steps.check-status.outputs.proceed }}
     steps:
       - name: Wait for other CI checks
-        uses: lewagon/wait-on-check-action@v1.3.1
+        uses: lewagon/wait-on-check-action@e106e5c43e8ca1edea6383a39a01c5ca495fd812
         with:
           ref: ${{ github.event.pull_request.head.sha }}
-          check-regexp: '^(eslint|prettier|test|playwright-tests)'
+          check-regexp: '^(lint-and-format|test|playwright-tests)'
           wait-interval: 30
           repo-token: ${{ secrets.GITHUB_TOKEN }}
       
@@ -30,7 +30,7 @@ jobs:
         id: check-status
         run: |
           # Get all check runs for this commit
-          CHECK_RUNS=$(gh api repos/${{ github.repository }}/commits/${{ github.event.pull_request.head.sha }}/check-runs --jq '.check_runs[] | select(.name | test("eslint|prettier|test|playwright-tests")) | {name, conclusion}')
+          CHECK_RUNS=$(gh api repos/${{ github.repository }}/commits/${{ github.event.pull_request.head.sha }}/check-runs --jq '.check_runs[] | select(.name | test("lint-and-format|test|playwright-tests")) | {name, conclusion}')
           
           # Check if any required checks failed
           if echo "$CHECK_RUNS" | grep -q '"conclusion": "failure"'; then

.github/workflows/create-release-candidate-branch.yaml

@@ -0,0 +1,214 @@
+name: Create Release Branch
+
+on:
+  pull_request:
+    types: [closed]
+    branches: [main]
+    paths:
+      - 'package.json'
+
+jobs:
+  create-release-branch:
+    runs-on: ubuntu-latest
+    if: >
+      github.event.pull_request.merged == true &&
+      contains(github.event.pull_request.labels.*.name, 'Release')
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          token: ${{ secrets.PR_GH_TOKEN || secrets.GITHUB_TOKEN }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+
+      - name: Check version bump type
+        id: check_version
+        run: |
+          # Get current version from main
+          CURRENT_VERSION=$(node -p "require('./package.json').version")
+          # Remove 'v' prefix if present (shouldn't be in package.json, but defensive)
+          CURRENT_VERSION=${CURRENT_VERSION#v}
+          echo "current_version=$CURRENT_VERSION" >> $GITHUB_OUTPUT
+
+          # Validate version format
+          if ! [[ "$CURRENT_VERSION" =~ ^[0-9]+\.[0-9]+\.[0-9]+ ]]; then
+            echo "ERROR: Invalid version format: $CURRENT_VERSION"
+            exit 1
+          fi
+
+          # Extract major and minor versions
+          MAJOR=$(echo $CURRENT_VERSION | cut -d. -f1)
+          MINOR=$(echo $CURRENT_VERSION | cut -d. -f2)
+          PATCH=$(echo $CURRENT_VERSION | cut -d. -f3 | cut -d- -f1)
+
+          echo "major=$MAJOR" >> $GITHUB_OUTPUT
+          echo "minor=$MINOR" >> $GITHUB_OUTPUT
+          echo "patch=$PATCH" >> $GITHUB_OUTPUT
+
+          # Get previous version from the commit before the merge
+          git checkout HEAD^1
+          PREV_VERSION=$(node -p "require('./package.json').version" 2>/dev/null || echo "0.0.0")
+          # Remove 'v' prefix if present
+          PREV_VERSION=${PREV_VERSION#v}
+
+          # Validate previous version format
+          if ! [[ "$PREV_VERSION" =~ ^[0-9]+\.[0-9]+\.[0-9]+ ]]; then
+            echo "WARNING: Invalid previous version format: $PREV_VERSION, using 0.0.0"
+            PREV_VERSION="0.0.0"
+          fi
+
+          PREV_MINOR=$(echo $PREV_VERSION | cut -d. -f2)
+
+          echo "prev_version=$PREV_VERSION" >> $GITHUB_OUTPUT
+          echo "prev_minor=$PREV_MINOR" >> $GITHUB_OUTPUT
+
+          # Get previous major version for comparison
+          PREV_MAJOR=$(echo $PREV_VERSION | cut -d. -f1)
+
+          # Check if current version is a pre-release
+          if [[ "$CURRENT_VERSION" =~ ^[0-9]+\.[0-9]+\.[0-9]+- ]]; then
+            IS_PRERELEASE=true
+          else
+            IS_PRERELEASE=false
+          fi
+
+          # Check if this was a minor version bump or major version bump
+          # But skip if it's a pre-release version
+          if [[ "$IS_PRERELEASE" == "true" ]]; then
+            echo "is_minor_bump=false" >> $GITHUB_OUTPUT
+            echo "reason=prerelease version" >> $GITHUB_OUTPUT
+          elif [[ "$MAJOR" -gt "$PREV_MAJOR" && "$MINOR" == "0" && "$PATCH" == "0" ]]; then
+            # Major version bump (e.g., 1.99.x → 2.0.0)
+            echo "is_minor_bump=true" >> $GITHUB_OUTPUT
+            BRANCH_NAME="core/${PREV_MAJOR}.${PREV_MINOR}"
+            echo "branch_name=$BRANCH_NAME" >> $GITHUB_OUTPUT
+          elif [[ "$MAJOR" == "$PREV_MAJOR" && "$MINOR" -gt "$PREV_MINOR" && "$PATCH" == "0" ]]; then
+            # Minor version bump (e.g., 1.23.x → 1.24.0)
+            echo "is_minor_bump=true" >> $GITHUB_OUTPUT
+            BRANCH_NAME="core/${MAJOR}.${PREV_MINOR}"
+            echo "branch_name=$BRANCH_NAME" >> $GITHUB_OUTPUT
+          else
+            echo "is_minor_bump=false" >> $GITHUB_OUTPUT
+          fi
+
+          # Return to main branch
+          git checkout main
+
+      - name: Create release branch
+        if: steps.check_version.outputs.is_minor_bump == 'true'
+        run: |
+          BRANCH_NAME="${{ steps.check_version.outputs.branch_name }}"
+
+          # Check if branch already exists
+          if git ls-remote --heads origin "$BRANCH_NAME" | grep -q "$BRANCH_NAME"; then
+            echo "⚠️  Branch $BRANCH_NAME already exists, skipping creation"
+            echo "branch_exists=true" >> $GITHUB_ENV
+            exit 0
+          else
+            echo "branch_exists=false" >> $GITHUB_ENV
+          fi
+
+          # Create branch from the commit BEFORE the version bump
+          # This ensures the release branch has the previous minor version
+          git checkout -b "$BRANCH_NAME" HEAD^1
+
+          # Push the new branch
+          git push origin "$BRANCH_NAME"
+
+          echo "✅ Created release branch: $BRANCH_NAME"
+          echo "This branch is now in feature freeze and will only receive:"
+          echo "- Bug fixes"
+          echo "- Critical security patches"
+          echo "- Documentation updates"
+
+      - name: Create branch protection rules
+        if: steps.check_version.outputs.is_minor_bump == 'true' && env.branch_exists != 'true'
+        env:
+          GITHUB_TOKEN: ${{ secrets.PR_GH_TOKEN || secrets.GITHUB_TOKEN }}
+        run: |
+          BRANCH_NAME="${{ steps.check_version.outputs.branch_name }}"
+
+          # Create branch protection using GitHub API
+          echo "Setting up branch protection for $BRANCH_NAME..."
+
+          RESPONSE=$(curl -s -w "\n%{http_code}" -X PUT \
+            -H "Authorization: token $GITHUB_TOKEN" \
+            -H "Accept: application/vnd.github.v3+json" \
+            "https://api.github.com/repos/${{ github.repository }}/branches/$BRANCH_NAME/protection" \
+            -d '{
+              "required_status_checks": {
+                "strict": true,
+                "contexts": ["lint-and-format", "test", "playwright-tests"]
+              },
+              "enforce_admins": false,
+              "required_pull_request_reviews": {
+                "required_approving_review_count": 1,
+                "dismiss_stale_reviews": true
+              },
+              "restrictions": null,
+              "allow_force_pushes": false,
+              "allow_deletions": false
+            }')
+
+          HTTP_CODE=$(echo "$RESPONSE" | tail -n 1)
+          BODY=$(echo "$RESPONSE" | sed '$d')
+
+          if [[ "$HTTP_CODE" -eq 200 ]] || [[ "$HTTP_CODE" -eq 201 ]]; then
+            echo "✅ Branch protection successfully applied"
+          else
+            echo "⚠️  Failed to apply branch protection (HTTP $HTTP_CODE)"
+            echo "Response: $BODY"
+            # Don't fail the workflow, just warn
+          fi
+
+      - name: Post summary
+        if: steps.check_version.outputs.is_minor_bump == 'true'
+        run: |
+          BRANCH_NAME="${{ steps.check_version.outputs.branch_name }}"
+          PREV_VERSION="${{ steps.check_version.outputs.prev_version }}"
+          CURRENT_VERSION="${{ steps.check_version.outputs.current_version }}"
+
+          if [[ "${{ env.branch_exists }}" == "true" ]]; then
+            cat >> $GITHUB_STEP_SUMMARY << EOF
+          ## 🌿 Release Branch Already Exists
+
+          The release branch for the previous minor version already exists:
+          EOF
+          else
+            cat >> $GITHUB_STEP_SUMMARY << EOF
+          ## 🌿 Release Branch Created
+
+          A new release branch has been created for the previous minor version:
+          EOF
+          fi
+
+          cat >> $GITHUB_STEP_SUMMARY << EOF
+
+          - **Branch**: \`$BRANCH_NAME\`
+          - **Version**: \`$PREV_VERSION\` (feature frozen)
+          - **Main branch**: \`$CURRENT_VERSION\` (active development)
+
+          ### Branch Policy
+
+          The \`$BRANCH_NAME\` branch is now in **feature freeze** and will only accept:
+          - 🐛 Bug fixes
+          - 🔒 Security patches
+          - 📚 Documentation updates
+
+          All new features should continue to be developed against \`main\`.
+
+          ### Backporting Changes
+
+          To backport a fix to this release branch:
+          1. Create your fix on \`main\` first
+          2. Cherry-pick to \`$BRANCH_NAME\`
+          3. Create a PR targeting \`$BRANCH_NAME\`
+          4. Use the \`Release\` label on the PR
+          EOF

.github/workflows/eslint.yaml

@@ -1,17 +0,0 @@
-name: ESLint
-
-on:
-  pull_request:
-    branches-ignore: [ wip/*, draft/*, temp/* ]
-
-jobs:
-  eslint:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    - name: Use Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: 'lts/*'
-    - run: npm ci
-    - run: npm run lint

.github/workflows/format.yaml

@@ -1,23 +0,0 @@
-name: Prettier Check
-
-on:
-  pull_request:
-    branches-ignore: [ wip/*, draft/*, temp/* ]
-
-jobs:
-  prettier:
-    runs-on: ubuntu-latest
-
-    steps:
-    - uses: actions/checkout@v4
-
-    - name: Use Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: 'lts/*'
-
-    - name: Install dependencies
-      run: npm ci
-
-    - name: Run Prettier check
-      run: npm run format:check

.github/workflows/lint-and-format.yaml

@@ -0,0 +1,82 @@
+name: Lint and Format
+
+on:
+  pull_request:
+    branches-ignore: [wip/*, draft/*, temp/*]
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  lint-and-format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout PR
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          ref: ${{ github.event.pull_request.head.sha }}
+          fetch-depth: 0
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run ESLint with auto-fix
+        run: npm run lint:fix
+
+      - name: Run Prettier with auto-format
+        run: npm run format
+
+      - name: Check for changes
+        id: verify-changed-files
+        run: |
+          if [ -n "$(git status --porcelain)" ]; then
+            echo "changed=true" >> $GITHUB_OUTPUT
+          else
+            echo "changed=false" >> $GITHUB_OUTPUT  
+          fi
+
+      - name: Commit changes
+        if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name == github.repository
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git add .
+          git commit -m "[auto-fix] Apply ESLint and Prettier fixes"
+          git push
+
+      - name: Final validation
+        run: |
+          npm run lint
+          npm run format:check
+
+      - name: Comment on PR about auto-fix
+        if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name == github.repository
+        uses: actions/github-script@v7
+        with:
+          script: |
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: '## 🔧 Auto-fixes Applied\n\nThis PR has been automatically updated to fix linting and formatting issues.\n\n**⚠️ Important**: Your local branch is now behind. Run `git pull` before making additional changes to avoid conflicts.\n\n### Changes made:\n- ESLint auto-fixes\n- Prettier formatting'
+            })
+
+      - name: Comment on PR about manual fix needed
+        if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name != github.repository
+        uses: actions/github-script@v7
+        with:
+          script: |
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: '## ⚠️ Linting/Formatting Issues Found\n\nThis PR has linting or formatting issues that need to be fixed.\n\n**Since this PR is from a fork, auto-fix cannot be applied automatically.**\n\n### Option 1: Set up pre-commit hooks (recommended)\nRun this once to automatically format code on every commit:\n```bash\nnpm run prepare\n```\n\n### Option 2: Fix manually\nRun these commands and push the changes:\n```bash\nnpm run lint:fix\nnpm run format\n```\n\nSee [CONTRIBUTING.md](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/CONTRIBUTING.md#git-pre-commit-hooks) for more details.'
+            })

.github/workflows/test-ui.yaml

@@ -4,7 +4,7 @@ on:
   push:
     branches: [main, master, core/*, desktop/*]
   pull_request:
-    branches-ignore: [wip/*, draft/*, temp/*]
+    branches-ignore: [wip/*, draft/*, temp/*, vue-nodes-migration]
 
 jobs:
   setup:
@@ -60,7 +60,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        browser: [chromium, chromium-2x, mobile-chrome]
+        browser: [chromium, chromium-2x, chromium-0.5x, mobile-chrome]
     steps:
       - name: Wait for cache propagation
         run: sleep 10

.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@271a8d0340265f705b14b6d32b9829c1cb33d45e
-        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-manager-types.yaml

@@ -3,6 +3,11 @@ name: Update ComfyUI-Manager API Types
 on:
   # Manual trigger
   workflow_dispatch:
+    inputs:
+      target_branch:
+        description: 'Target branch for the PR'
+        required: true
+        default: 'main'
 
 jobs:
   update-manager-types:
@@ -70,7 +75,7 @@ jobs:
 
       - name: Create Pull Request
         if: steps.check-changes.outputs.changed == 'true'
-        uses: peter-evans/create-pull-request@v7
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: '[chore] Update ComfyUI-Manager API types from ComfyUI-Manager@${{ steps.manager-info.outputs.commit }}'
@@ -85,7 +90,7 @@ jobs:
 
             These types are automatically generated using openapi-typescript.
           branch: update-manager-types-${{ steps.manager-info.outputs.commit }}
-          base: main
+          base: ${{ inputs.target_branch }}
           labels: Manager
           delete-branch: true
           add-paths: |

.gitignore

@@ -11,6 +11,8 @@ node_modules
 dist
 dist-ssr
 *.local
+# Claude configuration
+.claude/*.local.json
 
 # Editor directories and files
 .vscode/*
@@ -39,6 +41,7 @@ tests-ui/workflows/examples
 /blob-report/
 /playwright/.cache/
 browser_tests/**/*-win32.png
+browser_tests/**/*-darwin.png
 
 .env
 

.husky/pre-commit

@@ -1,9 +1,4 @@
-if [[ "$OS" == "Windows_NT" ]]; then
-  npx.cmd lint-staged
-  # Check for unused i18n keys in staged files
-  npx.cmd tsx scripts/check-unused-i18n-keys.ts
-else
-  npx lint-staged
-  # Check for unused i18n keys in staged files
-  npx tsx scripts/check-unused-i18n-keys.ts
-fi
+#!/usr/bin/env bash
+
+npx lint-staged
+npx tsx scripts/check-unused-i18n-keys.ts

.mcp.json

@@ -3,6 +3,10 @@
     "playwright": {
       "command": "npx",
       "args": ["-y", "@executeautomation/playwright-mcp-server"]
+    },
+    "context7": {
+      "command": "npx",
+      "args": ["-y", "@upstash/context7-mcp"]
     }
   }
 }

AGENTS.md

@@ -0,0 +1,40 @@
+# Repository Guidelines
+
+## Project Structure & Module Organization
+- Source: `src/` (Vue 3 + TypeScript). Key areas: `components/`, `views/`, `stores/` (Pinia), `composables/`, `services/`, `utils/`, `assets/`, `locales/`.
+- Routing/i18n/entry: `src/router.ts`, `src/i18n.ts`, `src/main.ts`.
+- Tests: unit/component in `tests-ui/` and `src/components/**/*.{test,spec}.ts`; E2E in `browser_tests/`.
+- Public assets: `public/`. Build output: `dist/`.
+- Config: `vite.config.mts`, `vitest.config.ts`, `playwright.config.ts`, `eslint.config.js`, `.prettierrc`.
+
+## Build, Test, and Development Commands
+- `npm run dev`: Start Vite dev server.
+- `npm run dev:electron`: Dev server with Electron API mocks.
+- `npm run build`: Type-check then production build to `dist/`.
+- `npm run preview`: Preview the production build locally.
+- `npm run test:unit`: Run Vitest unit tests (`tests-ui/`).
+- `npm run test:component`: Run component tests (`src/components/`).
+- `npm run test:browser`: Run Playwright E2E tests (`browser_tests/`).
+- `npm run lint` / `npm run lint:fix`: Lint (ESLint). `npm run format` / `format:check`: Prettier.
+- `npm run typecheck`: Vue TSC type checking.
+
+## Coding Style & Naming Conventions
+- Language: TypeScript, Vue SFCs (`.vue`). Indent 2 spaces; single quotes; no semicolons; width 80 (see `.prettierrc`).
+- Imports: sorted/grouped by plugin; run `npm run format` before committing.
+- ESLint: Vue + TS rules; no floating promises; unused imports disallowed; i18n raw text restrictions in templates.
+- Naming: Vue components in PascalCase (e.g., `MenuHamburger.vue`); composables `useXyz.ts`; Pinia stores `*Store.ts`.
+
+## Testing Guidelines
+- Frameworks: Vitest (unit/component, happy-dom) and Playwright (E2E).
+- Test files: `**/*.{test,spec}.{ts,tsx,js}` under `tests-ui/`, `src/components/`, and `src/lib/litegraph/test/`.
+- Coverage: text/json/html reporters enabled; aim to cover critical logic and new features.
+- Playwright: place tests in `browser_tests/`; optional tags like `@mobile`, `@2x` are respected by config.
+
+## Commit & Pull Request Guidelines
+- Commits: Prefer Conventional Commits (e.g., `feat(ui): add sidebar`), `refactor(litegraph): …`. Use `[skip ci]` for locale-only updates when appropriate.
+- PRs: Include clear description, linked issues (`Fixes #123`), and screenshots/GIFs for UI changes. Add/adjust tests and i18n strings when applicable.
+- Quality gates: `npm run lint`, `npm run typecheck`, and relevant tests must pass. Keep PRs focused and small.
+
+## Security & Configuration Tips
+- Secrets: Use `.env` (see `.env_example`); do not commit secrets.
+- Backend: Dev server expects ComfyUI backend at `localhost:8188` by default; configure via `.env`.

CLAUDE.md

@@ -1,58 +1,61 @@
-- use `npm run` to see what commands are available
-- For component communication, prefer Vue's event-based pattern (emit/@event-name) for state changes and notifications; use defineExpose with refs only for imperative operations that need direct control (like form.validate(), modal.open(), or editor.focus()); events promote loose coupling and are better for reusable components, while exposed methods are acceptable for tightly-coupled component pairs or when wrapping third-party libraries that require imperative APIs
-- After making code changes, follow this general process: (1) Create unit tests, component tests, browser tests (if appropriate for each), (2) run unit tests, component tests, and browser tests until passing, (3) run typecheck, lint, format (with prettier) -- you can use `npm run` command to see the scripts available, (4) check if any READMEs (including nested) or documentation needs to be updated, (5) Decide whether the changes are worth adding new content to the external documentation for (or would requires changes to the external documentation) at https://docs.comfy.org, then present your suggestion
-- When referencing PrimeVue, you can get all the docs here: https://primevue.org. Do this instead of making up or inferring names of Components
-- When trying to set tailwind classes for dark theme, use "dark-theme:" prefix rather than "dark:"
-- Never add lines to PR descriptions or commit messages that say "Generated with Claude Code"
-- When making PR names and commit messages, if you are going to add a prefix like "docs:", "feat:", "bugfix:", use square brackets around the prefix term and do not use a colon (e.g., should be "[docs]" rather than "docs:").
-- When I reference GitHub Repos related to Comfy-Org, you should proactively fetch or read the associated information in the repo. To do so, you should exhaust all options: (1) Check if we have a local copy of the repo, (2) Use the GitHub API to fetch the information; you may want to do this IN ADDITION to the other options, especially for reading specific branches/PRs/comments/reviews/metadata, and (3) curl the GitHub website and parse the html or json responses
-- For information about ComfyUI, ComfyUI_frontend, or ComfyUI-Manager, you can web search or download these wikis: https://deepwiki.com/Comfy-Org/ComfyUI-Manager, https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview, https://deepwiki.com/comfyanonymous/ComfyUI/2-core-architecture
-- If a question/project is related to Comfy-Org, Comfy, or ComfyUI ecosystem, you should proactively use the Comfy docs to answer the question. The docs may be referenced with URLs like https://docs.comfy.org
-- When operating inside a repo, check for README files at key locations in the repo detailing info about the contents of that folder. E.g., top-level key folders like tests-ui, browser_tests, composables, extensions/core, stores, services often have their own README.md files. When writing code, make sure to frequently reference these README files to understand the overall architecture and design of the project. Pay close attention to the snippets to learn particular patterns that seem to be there for a reason, as you should emulate those.
-- Prefer running single tests, and not the whole test suite, for performance
-- If using a lesser known or complex CLI tool, run the --help to see the documentation before deciding what to run, even if just for double-checking or verifying things.
-- IMPORTANT: the most important goal when writing code is to create clean, best-practices, sustainable, and scalable public APIs and interfaces. Our app is used by thousands of users and we have thousands of mods/extensions that are constantly changing and updating; and we are also always updating. That's why it is IMPORTANT that we design systems and write code that follows practices of domain-driven design, object-oriented design, and design patterns (such that you can assure stability while allowing for all components around you to change and evolve). We ABSOLUTELY prioritize clean APIs and public interfaces that clearly define and restrict how/what the mods/extensions can access.
-- If any of these technologies are referenced, you can proactively read their docs at these locations: https://primevue.org/theming, https://primevue.org/forms/, https://www.electronjs.org/docs/latest/api/browser-window, https://vitest.dev/guide/browser/, https://atlassian.design/components/pragmatic-drag-and-drop/core-package/drop-targets/, https://playwright.dev/docs/api/class-test, https://playwright.dev/docs/api/class-electron, https://www.algolia.com/doc/api-reference/rest-api/, https://pyav.org/docs/develop/cookbook/basics.html
-- IMPORTANT: Never add Co-Authored by Claude or any reference to Claude or Claude Code in commit messages, PR descriptions, titles, or any documentation whatsoever
-- The npm script to type check is called "typecheck" NOT "type check"
-- Use the Vue 3 Composition API instead of the Options API when writing Vue components. An exception is when overriding or extending a PrimeVue component for compatibility, you may use the Options API.
-- when we are solving an issue we know the link/number for, we should add "Fixes #n" (where n is the issue number) to the PR description.
-- Never write css if you can accomplish the same thing with tailwind utility classes
-- 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. Do not define a `props` variable; instead, destructure props. Since vue 3.5, destructuring props does not strip them of reactivity.
-- Use Tailwind CSS for styling
-- Leverage VueUse functions for performance-enhancing styles
-- Use lodash for utility functions
-- Implement proper props and emits definitions
-- Utilize Vue 3's Teleport component when needed
-- Use Suspense for async components
-- Implement proper error handling
-- Follow Vue 3 style guide and naming conventions
-- IMPORTANT: Use vue-i18n for ALL user-facing strings - no hard-coded text in services/utilities. Place new translation entries in src/locales/en/main.json
-- Avoid using `@ts-expect-error` to work around type issues. We needed to employ it to migrate to TypeScript, but it should not be viewed as an accepted practice or standard.
-- DO NOT use deprecated PrimeVue components. Use these replacements instead:
-  * `Dropdown` → Use `Select` (import from 'primevue/select')
-  * `OverlayPanel` → Use `Popover` (import from 'primevue/popover') 
-  * `Calendar` → Use `DatePicker` (import from 'primevue/datepicker')
-  * `InputSwitch` → Use `ToggleSwitch` (import from 'primevue/toggleswitch')
-  * `Sidebar` → Use `Drawer` (import from 'primevue/drawer')
-  * `Chips` → Use `AutoComplete` with multiple enabled and typeahead disabled
-  * `TabMenu` → Use `Tabs` without panels
-  * `Steps` → Use `Stepper` without panels
-  * `InlineMessage` → Use `Message` component
-* Use `api.apiURL()` for all backend API calls and routes
-  - Actual API endpoints like /prompt, /queue, /view, etc.
-  - Image previews: `api.apiURL('/view?...')`
-  - Any backend-generated content or dynamic routes
-* Use `api.fileURL()` for static files served from the public folder:
-  - Templates: `api.fileURL('/templates/default.json')`
-  - Extensions: `api.fileURL(extensionPath)` for loading JS modules
-  - Any static assets that exist in the public directory
-- When implementing code that outputs raw HTML (e.g., using v-html directive), always ensure dynamic content has been properly sanitized with DOMPurify or validated through trusted sources. Prefer Vue templates over v-html when possible.
-- For any async operations (API calls, timers, etc), implement cleanup/cancellation in component unmount to prevent memory leaks
-- Extract complex template conditionals into separate components or computed properties
-- Error messages should be actionable and user-friendly (e.g., "Failed to load data. Please refresh the page." instead of "Unknown error")
+# ComfyUI Frontend Project Guidelines
+
+## Quick Commands
+
+- `npm run`: See all available commands
+- `npm run typecheck`: Type checking
+- `npm run lint`: Linting
+- `npm run format`: Prettier formatting
+- `npm run test:component`: Run component tests with browser environment
+- `npm run test:unit`: Run all unit tests
+- `npm run test:unit -- tests-ui/tests/example.test.ts`: Run single test file
+
+## Development Workflow
+
+1. Make code changes
+2. Run tests (see subdirectory CLAUDE.md files)
+3. Run typecheck, lint, format
+4. Check README updates
+5. Consider docs.comfy.org updates
+
+## Git Conventions
+
+- Use [prefix] format: [feat], [bugfix], [docs]
+- Add "Fixes #n" to PR descriptions
+- Never mention Claude/AI in commits
+
+## External Resources
+
+- PrimeVue docs: <https://primevue.org>
+- ComfyUI docs: <https://docs.comfy.org>
+- Electron: <https://www.electronjs.org/docs/latest/>
+- Wiki: <https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview>
+
+## Project Philosophy
+
+- Clean, stable public APIs
+- Domain-driven design
+- Thousands of users and extensions
+- Prioritize clean interfaces that restrict extension access
+
+## Repository Navigation
+
+- Check README files in key folders (tests-ui, browser_tests, composables, etc.)
+- Prefer running single tests for performance
+- Use --help for unfamiliar CLI tools
+
+## GitHub Integration
+
+When referencing Comfy-Org repos:
+
+1. Check for local copy
+2. Use GitHub API for branches/PRs/metadata
+3. Curl GitHub website if needed
+
+## Common Pitfalls
+
+- NEVER use `any` type - use proper TypeScript types
+- NEVER use `as any` type assertions - fix the underlying type issue
+- NEVER use `--no-verify` flag when committing
+- NEVER delete or disable tests to make them pass
+- NEVER circumvent quality checks

CONTRIBUTING.md

@@ -0,0 +1,333 @@
+# Contributing to ComfyUI Frontend
+
+We're building this frontend together and would love your help — no matter how you'd like to pitch in! You don't need to write code to make a difference.
+
+## Ways to Contribute
+
+- **Pull Requests:** Add features, fix bugs, or improve code health. Browse [issues](https://github.com/Comfy-Org/ComfyUI_frontend/issues) for inspiration. Look for the `Good first issue` label if you're new to the project.
+- **Vote on Features:** Give a 👍 to the feature requests you care about to help us prioritize.
+- **Verify Bugs:** Try reproducing reported issues and share your results (even if the bug doesn't occur!).
+- **Community Support:** Hop into our [Discord](https://discord.com/invite/comfyorg) to answer questions or get help.
+- **Share & Advocate:** Tell your friends, tweet about us, or share tips to support the project.
+
+Have another idea? Drop into Discord or open an issue, and let's chat!
+
+## Development Setup
+
+### Prerequisites & Technology Stack
+
+- **Required Software**:
+  - Node.js (v16 or later; v20/v22 strongly recommended) and npm
+  - Git for version control
+  - A running ComfyUI backend instance
+  
+- **Tech Stack**:
+  - [Vue 3.5 Composition API](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 (integrated in src/lib) for node editor
+  - [zod](https://zod.dev/) for schema validation
+  - [vue-i18n](https://github.com/intlify/vue-i18n) for internationalization
+
+### Initial Setup
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/Comfy-Org/ComfyUI_frontend.git
+   cd ComfyUI_frontend
+   ```
+
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+3. Configure environment (optional):
+   Create a `.env` file in the project root based on the provided [.env.example](.env.example) file.
+
+   **Note about ports**: By default, the dev server expects the ComfyUI backend at `localhost:8188`. If your ComfyUI instance runs on a different port, update this in your `.env` file.
+
+### Dev Server Configuration
+
+To launch ComfyUI and have it connect to your development server:
+
+```bash
+python main.py --port 8188
+```
+
+### Git pre-commit hooks
+
+Run `npm run prepare` to install Git pre-commit hooks. Currently, the pre-commit hook is used to auto-format code on commit.
+
+### Dev Server
+
+Note: The dev server will NOT load any extension from the ComfyUI server. Only core extensions will be loaded.
+
+- 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.
+
+## Development Workflow
+
+### Architecture Decision Records
+
+We document significant architectural decisions using ADRs (Architecture Decision Records). See [docs/adr/](docs/adr/) for all ADRs and the template for creating new ones.
+
+### Backporting Changes to Release Branches
+
+When you fix a bug that affects a version in feature freeze, we use an automated backport process to apply the fix to the release candidate branch.
+
+#### Real Example
+
+- Subgraphs feature was released in v1.24
+- While developing v1.25, we discovered a bug in subgraphs
+- v1.24 is in feature freeze (only accepting bug fixes, no new features)
+- The fix needs to be applied to both main (v1.25) and the v1.24 release candidate
+
+#### How to Backport Your Fix
+
+1. Create your PR fixing the bug on `main` branch as usual
+2. Before merging, add these labels to your PR:
+   - `needs-backport` - triggers the automated backport workflow
+   - `1.24` - targets the `core/1.24` release candidate branch
+   
+3. Merge your PR normally
+4. The automated workflow will:
+   - Create a new branch from `core/1.24`
+   - Apply your changes to that branch
+   - Open a new PR to `core/1.24`
+   - Comment on your original PR with a link to the backport PR
+
+#### When to Use Backporting
+
+- Bug fixes for features already released
+- Security fixes
+- Critical issues affecting existing functionality
+- Never for new features (these wait for the next release cycle)
+
+#### Handling Conflicts
+
+If the automated cherry-pick fails due to conflicts, the workflow will comment on your PR with:
+- The list of conflicting files
+- Instructions to manually cherry-pick to the release candidate branch
+
+See [PR #4616](https://github.com/Comfy-Org/ComfyUI_frontend/pull/4616) for the actual subgraph bugfix that was backported from v1.25 to v1.24.
+
+## Code Editor Configuration
+
+### Recommended Setup
+
+This project includes `.vscode/launch.json.default` and `.vscode/settings.json.default` files with recommended launch and workspace settings for editors that use the `.vscode` directory (e.g., VS Code, Cursor, etc.).
+
+We've also included a list of recommended extensions in `.vscode/extensions.json`. Your editor should detect this file and show a human friendly list in the Extensions panel, linking each entry to its marketplace page.
+
+### MCP Integrations
+
+#### Playwright Browser Automation
+
+The Playwright MCP server enables LLM coding assistants (like Copilot, Claude Code, etc.) to control and inspect web browsers programmatically. This allows assistants to navigate websites, take screenshots, and interact with web pages on your behalf.
+
+For ComfyUI_frontend development, you can ask coding assistants to use Playwright screenshots to continuously verify that your code changes produce the expected visual results.
+
+##### Setup for Claude Code
+
+After installing dependencies with `npm i`, the Playwright MCP server will be automatically available when you start Claude Code locally.
+
+Here's how Claude Code can use the Playwright MCP server to inspect the interface of the local development server (assuming you're running the dev server at `localhost:5173`):
+
+```
+> navigate to localhost:5173 and take a screenshot.
+   tell me the items in the menubar
+
+● I'll navigate to localhost:5173 and take a
+  screenshot to see the menubar items.
+
+● playwright:playwright_navigate (MCP)(url:       …
+                                      "http://local
+                                      host:5173")
+  ⎿  Navigated to http://localhost:5173
+
+● playwright:playwright_screenshot (MCP)(name: "lo…
+                                        alhost_5173
+                                        _menubar")
+
+  ⎿ Screenshot saved to: ../../../Downloads/localho
+    st_5173_menubar-2025-05-30T17-23-00-942Z.png
+  ⎿  Screenshot also stored in memory with name:
+     'localhost_5173_menubar'
+
+● Read(../../../Downloads/localhost_5173_menubar-2…
+      25-05-30T17-23-00-942Z.png)
+  ⎿  Read image (94.3KB)
+
+● Based on the screenshot, I can see the menubar at
+   the top of the ComfyUI interface contains the
+  following items:
+
+  Main Menubar Items:
+  - Workflow - Menu for workflow-related actions
+  - Edit - Menu for editing operations
+  - Help - Menu for help and documentation
+
+  Additional UI Elements:
+  - ComfyUI Logo - On the far left
+  - Workflow Tab - Shows "Unsaved Workflow" with a
+  dropdown and close button
+  - Layout Controls - On the far right (grid view
+  and hamburger menu icons)
+
+  The interface shows a typical ComfyUI workflow
+  graph with nodes like "Load Checkpoint", "CLIP
+  Text Encode (Prompt)", "KSampler", and "Empty
+  Latent Image" connected with colored cables.
+```
+
+## Testing
+
+### Unit Tests
+
+- `npm i` to install all dependencies
+- `npm run test:unit` to execute all unit tests
+
+### Component Tests
+
+Component tests verify Vue components in `src/components/`.
+
+- `npm run test:component` to execute all component tests
+
+### Playwright Tests
+
+Playwright tests verify the whole app. See [browser_tests/README.md](browser_tests/README.md) for details.
+
+### Running All Tests
+
+Before submitting a PR, ensure all tests pass:
+
+```bash
+npm run test:unit
+npm run test:component
+npm run test:browser
+npm run typecheck
+npm run lint
+npm run format
+```
+
+## Code Style Guidelines
+
+### TypeScript
+- Use TypeScript for all new code
+- Avoid `any` types - use proper type definitions
+- Never use `@ts-expect-error` - fix the underlying type issue
+
+### Vue 3 Patterns
+- Use Composition API for all components
+- Follow Vue 3.5+ patterns (props destructuring is reactive)
+- Use `<script setup>` syntax
+
+### Styling
+- Use Tailwind CSS classes instead of custom CSS
+- Follow the existing dark theme pattern: `dark-theme:` prefix (not `dark:`)
+
+### Internationalization
+- All user-facing strings must use vue-i18n
+- Add translations to `src/locales/en/main.json`
+- Use translation keys: `const { t } = useI18n(); t('key.path')`
+
+## Icons
+
+The project supports three types of icons, all with automatic imports (no manual imports needed):
+
+1. **PrimeIcons** - Built-in PrimeVue icons using CSS classes: `<i class="pi pi-plus" />`
+2. **Iconify Icons** - 200,000+ icons from various libraries: `<i-lucide:settings />`, `<i-mdi:folder />`
+3. **Custom Icons** - Your own SVG icons: `<i-comfy:workflow />`
+
+Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `src/assets/icons/custom/`.
+
+For detailed instructions and code examples, see [src/assets/icons/README.md](src/assets/icons/README.md).
+
+## Working with litegraph.js
+
+Since Aug 5, 2025, litegraph.js is now integrated directly into this repository. It was merged using git subtree to preserve the complete commit history ([PR #4667](https://github.com/Comfy-Org/ComfyUI_frontend/pull/4667), [ADR](docs/adr/0001-merge-litegraph-into-frontend.md)).
+
+### Important Notes
+
+- **Issue References**: Commits from the original litegraph repository may contain issue/PR numbers (e.g., #4667) that refer to issues/PRs in the original litegraph.js repository, not this one.
+- **File Paths**: When viewing historical commits, file paths may show the original structure before the subtree merge. In those cases, just consider the paths relative to the new litegraph folder.
+- **Contributing**: All litegraph modifications should now be made directly in this repository.
+
+The original litegraph repository (https://github.com/Comfy-Org/litegraph.js) is now archived.
+
+## Submitting Changes
+
+### Pull Request Process
+
+1. Ensure your branch is up to date with main
+2. Run all tests and ensure they pass
+3. Create a pull request with a clear title and description
+4. Use conventional commit format for PR titles:
+   - `[feat]` for new features
+   - `[fix]` for bug fixes
+   - `[docs]` for documentation
+   - `[refactor]` for code refactoring
+   - `[test]` for test additions/changes
+   - `[chore]` for maintenance tasks
+
+### PR Description Template
+
+```
+## Description
+Brief description of the changes
+
+## Type of Change
+- [ ] Bug fix
+- [ ] New feature
+- [ ] Breaking change
+- [ ] Documentation update
+
+## Testing
+- [ ] Unit tests pass
+- [ ] Component tests pass
+- [ ] Browser tests pass (if applicable)
+- [ ] Manual testing completed
+
+## Screenshots (if applicable)
+Add screenshots for UI changes
+```
+
+### Review Process
+
+1. All PRs require at least one review
+2. Address review feedback promptly
+3. Keep PRs focused - one feature/fix per PR
+4. Large features should be discussed in an issue first
+
+## Questions?
+
+If you have questions about contributing:
+- Check existing issues and discussions
+- Ask in our [Discord](https://discord.com/invite/comfyorg)
+- Open a new issue for clarification
+
+Thank you for contributing to ComfyUI Frontend!

README.md

@@ -512,196 +512,18 @@ The selection toolbox will display the command button when items are selected:
 
 ## Contributing
 
-We're building this frontend together and would love your help — no matter how you'd like to pitch in! You don't need to write code to make a difference.
+We welcome contributions to ComfyUI Frontend! Please see our [Contributing Guide](CONTRIBUTING.md) for:
 
-Here are some ways to get involved:
-
-- **Pull Requests:** Add features, fix bugs, or improve code health. Browse [issues](https://github.com/Comfy-Org/ComfyUI_frontend/issues) for inspiration.
-- **Vote on Features:** Give a 👍 to the feature requests you care about to help us prioritize.
-- **Verify Bugs:** Try reproducing reported issues and share your results (even if the bug doesn't occur!).
-- **Community Support:** Hop into our [Discord](https://www.comfy.org/discord) to answer questions or get help.
-- **Share & Advocate:** Tell your friends, tweet about us, or share tips to support the project.
-
-Have another idea? Drop into Discord or open an issue, and let's chat!
+- Ways to contribute (code, documentation, testing, community support)
+- Development setup and workflow
+- Code style guidelines
+- Testing requirements
+- How to submit pull requests
+- Backporting fixes to release branches
 
 ## Development
 
-### Prerequisites & Technology Stack
-
-- **Required Software**:
-  - Node.js (v16 or later; v20/v22 strongly recommended) and npm
-  - Git for version control
-  - A running ComfyUI backend instance
-  
-- **Tech Stack**:
-  - [Vue 3](https://vuejs.org/) with [TypeScript](https://www.typescriptlang.org/)
-  - [Pinia](https://pinia.vuejs.org/) for state management
-  - [PrimeVue](https://primevue.org/) with [TailwindCSS](https://tailwindcss.com/) for UI
-  - [litegraph.js](https://github.com/Comfy-Org/litegraph.js) for node editor
-  - [zod](https://zod.dev/) for schema validation
-  - [vue-i18n](https://github.com/intlify/vue-i18n) for internationalization
-
-### Initial Setup
-
-1. Clone the repository:
-   ```bash
-   git clone https://github.com/Comfy-Org/ComfyUI_frontend.git
-   cd ComfyUI_frontend
-   ```
-
-2. Install dependencies:
-   ```bash
-   npm install
-   ```
-
-3. Configure environment (optional):
-   Create a `.env` file in the project root based on the provided [.env.example](.env.example) file.
-
-   **Note about ports**: By default, the dev server expects the ComfyUI backend at `localhost:8188`. If your ComfyUI instance runs on a different port, update this in your `.env` file.
-
-### Dev Server Configuration
-
-To launch ComfyUI and have it connect to your development server:
-
-```bash
-python main.py --port 8188
-```
-
-### Git pre-commit hooks
-
-Run `npm run prepare` to install Git pre-commit hooks. Currently, the pre-commit
-hook is used to auto-format code on commit.
-
-### Dev Server
-
-Note: The dev server will NOT load any extension from the ComfyUI server. Only
-core extensions will be loaded.
-
-- 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.
-
-### Recommended Code Editor Configuration
-
-This project includes `.vscode/launch.json.default` and `.vscode/settings.json.default` files with recommended launch and workspace settings for editors that use the `.vscode` directory (e.g., VS Code, Cursor, etc.).
-
-We've also included a list of recommended extensions in `.vscode/extensions.json`. Your editor should detect this file and show a human friendly list in the Extensions panel, linking each entry to its marketplace page.
-
-### Recommended MCP Integrations
-
-#### Playwright Browser Automation
-
-The Playwright MCP server enables LLM coding assistants (like Copilot, Claude Code, etc.) to control and inspect web browsers programmatically. This allows assistants to navigate websites, take screenshots, and interact with web pages on your behalf.
-
-For ComfyUI_frontend development, you can ask coding assistants to use Playwright screenshots to continuously verify that your code changes produce the expected visual results.
-
-##### Setup for Claude Code
-
-After installing dependencies with `npm i`, the Playwright MCP server will be automatically available when you start Claude Code locally.
-
-Here's how Claude Code can use the Playwright MCP server to inspect the interface of the local development server (assuming you're running the dev server at `localhost:5173`):
-
-
-```
-> navigate to localhost:5173 and take a screenshot.
-   tell me the items in the menubar
-
-● I'll navigate to localhost:5173 and take a
-  screenshot to see the menubar items.
-
-● playwright:playwright_navigate (MCP)(url:       …
-                                      "http://local
-                                      host:5173")
-  ⎿  Navigated to http://localhost:5173
-
-● playwright:playwright_screenshot (MCP)(name: "lo…
-                                        alhost_5173
-                                        _menubar")
-
-  ⎿ Screenshot saved to: ../../../Downloads/localho
-    st_5173_menubar-2025-05-30T17-23-00-942Z.png
-  ⎿  Screenshot also stored in memory with name:
-     'localhost_5173_menubar'
-
-● Read(../../../Downloads/localhost_5173_menubar-2…
-      25-05-30T17-23-00-942Z.png)
-  ⎿  Read image (94.3KB)
-
-● Based on the screenshot, I can see the menubar at
-   the top of the ComfyUI interface contains the
-  following items:
-
-  Main Menubar Items:
-  - Workflow - Menu for workflow-related actions
-  - Edit - Menu for editing operations
-  - Help - Menu for help and documentation
-
-  Additional UI Elements:
-  - ComfyUI Logo - On the far left
-  - Workflow Tab - Shows "Unsaved Workflow" with a
-  dropdown and close button
-  - Layout Controls - On the far right (grid view
-  and hamburger menu icons)
-
-  The interface shows a typical ComfyUI workflow
-  graph with nodes like "Load Checkpoint", "CLIP
-  Text Encode (Prompt)", "KSampler", and "Empty
-  Latent Image" connected with colored cables.
-```
-
-### Unit Test
-
-- `npm i` to install all dependencies
-- `npm run test:unit` to execute all unit tests.
-
-### Component Test
-
-Component test verifies Vue components in `src/components/`.
-
-- `npm run test:component` to execute all component tests.
-
-### Playwright Test
-
-Playwright test verifies the whole app. See <https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/browser_tests/README.md> for details.
-
-### Custom Icons
-
-The project supports custom SVG icons through the unplugin-icons system. Custom icons are stored in `src/assets/icons/custom/` and can be used as Vue components with the `i-comfy:` prefix.
-
-For detailed instructions on adding and using custom icons, see [src/assets/icons/README.md](src/assets/icons/README.md).
-
-### litegraph.js
-
-This repo is using litegraph package hosted on <https://github.com/Comfy-Org/litegraph.js>. Any changes to litegraph should be submitted in that repo instead.
-
-#### Test litegraph.js 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.
+For detailed development setup, testing procedures, and technical information, please refer to [CONTRIBUTING.md](CONTRIBUTING.md).
 
 ### i18n
 

browser_tests/CLAUDE.md

@@ -0,0 +1,17 @@
+# E2E Testing Guidelines
+
+## Browser Tests
+- Test user workflows
+- Use Playwright fixtures
+- Follow naming conventions
+
+## Best Practices
+- Check assets/ for test data
+- Prefer specific selectors
+- Test across viewports
+
+## Testing Process
+After code changes:
+1. Create browser tests as appropriate
+2. Run tests until passing
+3. Then run typecheck, lint, format

browser_tests/assets/missing_nodes_in_subgraph.json

@@ -0,0 +1,182 @@
+{
+  "id": "test-missing-nodes-in-subgraph",
+  "revision": 0,
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "KSampler",
+      "pos": [100, 100],
+      "size": [270, 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": []
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "KSampler"
+      },
+      "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
+    },
+    {
+      "id": 2,
+      "type": "subgraph-with-missing-node",
+      "pos": [400, 100],
+      "size": [144, 46],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "input1",
+          "type": "CONDITIONING",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "output1",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": {},
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "subgraph-with-missing-node",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 2,
+          "lastLinkId": 2,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Subgraph with Missing Node",
+        "inputNode": {
+          "id": -10,
+          "bounding": [100, 200, 120, 60]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [500, 200, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "input1-id",
+            "name": "input1",
+            "type": "CONDITIONING",
+            "linkIds": [1],
+            "pos": {
+              "0": 150,
+              "1": 220
+            }
+          }
+        ],
+        "outputs": [
+          {
+            "id": "output1-id",
+            "name": "output1",
+            "type": "LATENT",
+            "linkIds": [2],
+            "pos": {
+              "0": 520,
+              "1": 220
+            }
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 1,
+            "type": "MISSING_NODE_TYPE_IN_SUBGRAPH",
+            "pos": [250, 180],
+            "size": [200, 100],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "name": "input",
+                "type": "CONDITIONING",
+                "link": 1
+              }
+            ],
+            "outputs": [
+              {
+                "name": "output",
+                "type": "LATENT",
+                "links": [2]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "MISSING_NODE_TYPE_IN_SUBGRAPH"
+            },
+            "widgets_values": ["some", "widget", "values"]
+          }
+        ],
+        "links": [
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 1,
+            "target_slot": 0,
+            "type": "CONDITIONING"
+          },
+          {
+            "id": 2,
+            "origin_id": 1,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "LATENT"
+          }
+        ]
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [0, 0]
+    }
+  },
+  "version": 0.4
+}

browser_tests/fixtures/ComfyPage.ts

@@ -1,10 +1,10 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
 import type { APIRequestContext, Locator, Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 import { test as base } from '@playwright/test'
 import dotenv from 'dotenv'
 import * as fs from 'fs'
 
+import type { LGraphNode } from '../../src/lib/litegraph/src/litegraph'
 import type { NodeId } from '../../src/schemas/comfyWorkflowSchema'
 import type { KeyCombo } from '../../src/schemas/keyBindingSchema'
 import type { useWorkspaceStore } from '../../src/stores/workspaceStore'
@@ -767,8 +767,8 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
-  async rightClickCanvas() {
-    await this.page.mouse.click(10, 10, { button: 'right' })
+  async rightClickCanvas(x: number = 10, y: number = 10) {
+    await this.page.mouse.click(x, y, { button: 'right' })
     await this.nextFrame()
   }
 
@@ -786,6 +786,164 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
+  /**
+   * Core helper method for interacting with subgraph I/O slots.
+   * Handles both input/output slots and both right-click/double-click actions.
+   *
+   * @param slotType - 'input' or 'output'
+   * @param action - 'rightClick' or 'doubleClick'
+   * @param slotName - Optional specific slot name to target
+   * @private
+   */
+  private async interactWithSubgraphSlot(
+    slotType: 'input' | 'output',
+    action: 'rightClick' | 'doubleClick',
+    slotName?: string
+  ): Promise<void> {
+    const foundSlot = await this.page.evaluate(
+      async (params) => {
+        const { slotType, action, targetSlotName } = params
+        const app = window['app']
+        const currentGraph = app.canvas.graph
+
+        // Check if we're in a subgraph
+        if (currentGraph.constructor.name !== 'Subgraph') {
+          throw new Error(
+            'Not in a subgraph - this method only works inside subgraphs'
+          )
+        }
+
+        // Get the appropriate node and slots
+        const node =
+          slotType === 'input'
+            ? currentGraph.inputNode
+            : currentGraph.outputNode
+        const slots =
+          slotType === 'input' ? currentGraph.inputs : currentGraph.outputs
+
+        if (!node) {
+          throw new Error(`No ${slotType} node found in subgraph`)
+        }
+
+        if (!slots || slots.length === 0) {
+          throw new Error(`No ${slotType} slots found in subgraph`)
+        }
+
+        // Filter slots based on target name and action type
+        const slotsToTry = targetSlotName
+          ? slots.filter((slot) => slot.name === targetSlotName)
+          : action === 'rightClick'
+            ? slots
+            : [slots[0]] // Right-click tries all, double-click uses first
+
+        if (slotsToTry.length === 0) {
+          throw new Error(
+            targetSlotName
+              ? `${slotType} slot '${targetSlotName}' not found`
+              : `No ${slotType} slots available to try`
+          )
+        }
+
+        // Handle the interaction based on action type
+        if (action === 'rightClick') {
+          // Right-click: try each slot until one works
+          for (const slot of slotsToTry) {
+            if (!slot.pos) continue
+
+            const event = {
+              canvasX: slot.pos[0],
+              canvasY: slot.pos[1],
+              button: 2, // Right mouse button
+              preventDefault: () => {},
+              stopPropagation: () => {}
+            }
+
+            if (node.onPointerDown) {
+              node.onPointerDown(
+                event,
+                app.canvas.pointer,
+                app.canvas.linkConnector
+              )
+            }
+
+            // Wait briefly for menu to appear
+            await new Promise((resolve) => setTimeout(resolve, 100))
+
+            // Check if context menu appeared
+            const menuExists = document.querySelector('.litemenu-entry')
+            if (menuExists) {
+              return {
+                success: true,
+                slotName: slot.name,
+                x: slot.pos[0],
+                y: slot.pos[1]
+              }
+            }
+          }
+        } else if (action === 'doubleClick') {
+          // Double-click: use first slot with bounding rect center
+          const slot = slotsToTry[0]
+          if (!slot.boundingRect) {
+            throw new Error(`${slotType} slot bounding rect not found`)
+          }
+
+          const rect = slot.boundingRect
+          const testX = rect[0] + rect[2] / 2 // x + width/2
+          const testY = rect[1] + rect[3] / 2 // y + height/2
+
+          const event = {
+            canvasX: testX,
+            canvasY: testY,
+            button: 0, // Left mouse button
+            preventDefault: () => {},
+            stopPropagation: () => {}
+          }
+
+          if (node.onPointerDown) {
+            node.onPointerDown(
+              event,
+              app.canvas.pointer,
+              app.canvas.linkConnector
+            )
+
+            // Trigger double-click
+            if (app.canvas.pointer.onDoubleClick) {
+              app.canvas.pointer.onDoubleClick(event)
+            }
+          }
+
+          // Wait briefly for dialog to appear
+          await new Promise((resolve) => setTimeout(resolve, 200))
+
+          return { success: true, slotName: slot.name, x: testX, y: testY }
+        }
+
+        return { success: false }
+      },
+      { slotType, action, targetSlotName: slotName }
+    )
+
+    if (!foundSlot.success) {
+      const actionText =
+        action === 'rightClick' ? 'open context menu for' : 'double-click'
+      throw new Error(
+        slotName
+          ? `Could not ${actionText} ${slotType} slot '${slotName}'`
+          : `Could not find any ${slotType} slot to ${actionText}`
+      )
+    }
+
+    // Wait for the appropriate UI element to appear
+    if (action === 'rightClick') {
+      await this.page.waitForSelector('.litemenu-entry', {
+        state: 'visible',
+        timeout: 5000
+      })
+    } else {
+      await this.nextFrame()
+    }
+  }
+
   /**
    * Right-clicks on a subgraph input slot to open the context menu.
    * Must be called when inside a subgraph.
@@ -800,93 +958,7 @@ export class ComfyPage {
    * @returns Promise that resolves when the context menu appears
    */
   async rightClickSubgraphInputSlot(inputName?: string): Promise<void> {
-    const foundSlot = await this.page.evaluate(async (targetInputName) => {
-      const app = window['app']
-      const currentGraph = app.canvas.graph
-
-      // Check if we're in a subgraph
-      if (currentGraph.constructor.name !== 'Subgraph') {
-        throw new Error(
-          'Not in a subgraph - this method only works inside subgraphs'
-        )
-      }
-
-      // Get the input node
-      const inputNode = currentGraph.inputNode
-      if (!inputNode) {
-        throw new Error('No input node found in subgraph')
-      }
-
-      // Get available inputs
-      const inputs = currentGraph.inputs
-      if (!inputs || inputs.length === 0) {
-        throw new Error('No input slots found in subgraph')
-      }
-
-      // Filter to specific input if requested
-      const inputsToTry = targetInputName
-        ? inputs.filter((inp) => inp.name === targetInputName)
-        : inputs
-
-      if (inputsToTry.length === 0) {
-        throw new Error(
-          targetInputName
-            ? `Input slot '${targetInputName}' not found`
-            : 'No input slots available to try'
-        )
-      }
-
-      // Try right-clicking on each input slot position until one works
-      for (const input of inputsToTry) {
-        if (!input.pos) continue
-
-        const testX = input.pos[0]
-        const testY = input.pos[1]
-
-        // Create a right-click event at the input slot position
-        const rightClickEvent = {
-          canvasX: testX,
-          canvasY: testY,
-          button: 2, // Right mouse button
-          preventDefault: () => {},
-          stopPropagation: () => {}
-        }
-
-        // Trigger the input node's right-click handler
-        if (inputNode.onPointerDown) {
-          inputNode.onPointerDown(
-            rightClickEvent,
-            app.canvas.pointer,
-            app.canvas.linkConnector
-          )
-        }
-
-        // Wait briefly for menu to appear
-        await new Promise((resolve) => setTimeout(resolve, 100))
-
-        // Check if litegraph context menu appeared
-        const menuExists = document.querySelector('.litemenu-entry')
-        if (menuExists) {
-          return { success: true, inputName: input.name, x: testX, y: testY }
-        }
-      }
-
-      return { success: false }
-    }, inputName)
-
-    if (!foundSlot.success) {
-      throw new Error(
-        inputName
-          ? `Could not open context menu for input slot '${inputName}'`
-          : 'Could not find any input slot position to right-click'
-      )
-    }
-
-    // Wait for the litegraph context menu to be visible
-    await this.page.waitForSelector('.litemenu-entry', {
-      state: 'visible',
-      timeout: 5000
-    })
+    return this.interactWithSubgraphSlot('input', 'rightClick', inputName)
   }
 
   /**
@@ -900,93 +972,31 @@ export class ComfyPage {
    * @returns Promise that resolves when the context menu appears
    */
   async rightClickSubgraphOutputSlot(outputName?: string): Promise<void> {
-    const foundSlot = await this.page.evaluate(async (targetOutputName) => {
-      const app = window['app']
-      const currentGraph = app.canvas.graph
+    return this.interactWithSubgraphSlot('output', 'rightClick', outputName)
+  }
 
-      // Check if we're in a subgraph
-      if (currentGraph.constructor.name !== 'Subgraph') {
-        throw new Error(
-          'Not in a subgraph - this method only works inside subgraphs'
-        )
-      }
+  /**
+   * Double-clicks on a subgraph input slot to rename it.
+   * Must be called when inside a subgraph.
+   *
+   * @param inputName Optional name of the specific input slot to target (e.g., 'text').
+   *                  If not provided, tries the first available input slot.
+   * @returns Promise that resolves when the rename dialog appears
+   */
+  async doubleClickSubgraphInputSlot(inputName?: string): Promise<void> {
+    return this.interactWithSubgraphSlot('input', 'doubleClick', inputName)
+  }
 
-      // Get the output node
-      const outputNode = currentGraph.outputNode
-      if (!outputNode) {
-        throw new Error('No output node found in subgraph')
-      }
-
-      // Get available outputs
-      const outputs = currentGraph.outputs
-      if (!outputs || outputs.length === 0) {
-        throw new Error('No output slots found in subgraph')
-      }
-
-      // Filter to specific output if requested
-      const outputsToTry = targetOutputName
-        ? outputs.filter((out) => out.name === targetOutputName)
-        : outputs
-
-      if (outputsToTry.length === 0) {
-        throw new Error(
-          targetOutputName
-            ? `Output slot '${targetOutputName}' not found`
-            : 'No output slots available to try'
-        )
-      }
-
-      // Try right-clicking on each output slot position until one works
-      for (const output of outputsToTry) {
-        if (!output.pos) continue
-
-        const testX = output.pos[0]
-        const testY = output.pos[1]
-
-        // Create a right-click event at the output slot position
-        const rightClickEvent = {
-          canvasX: testX,
-          canvasY: testY,
-          button: 2, // Right mouse button
-          preventDefault: () => {},
-          stopPropagation: () => {}
-        }
-
-        // Trigger the output node's right-click handler
-        if (outputNode.onPointerDown) {
-          outputNode.onPointerDown(
-            rightClickEvent,
-            app.canvas.pointer,
-            app.canvas.linkConnector
-          )
-        }
-
-        // Wait briefly for menu to appear
-        await new Promise((resolve) => setTimeout(resolve, 100))
-
-        // Check if litegraph context menu appeared
-        const menuExists = document.querySelector('.litemenu-entry')
-        if (menuExists) {
-          return { success: true, outputName: output.name, x: testX, y: testY }
-        }
-      }
-
-      return { success: false }
-    }, outputName)
-
-    if (!foundSlot.success) {
-      throw new Error(
-        outputName
-          ? `Could not open context menu for output slot '${outputName}'`
-          : 'Could not find any output slot position to right-click'
-      )
-    }
-
-    // Wait for the litegraph context menu to be visible
-    await this.page.waitForSelector('.litemenu-entry', {
-      state: 'visible',
-      timeout: 5000
-    })
+  /**
+   * Double-clicks on a subgraph output slot to rename it.
+   * Must be called when inside a subgraph.
+   *
+   * @param outputName Optional name of the specific output slot to target.
+   *                   If not provided, tries the first available output slot.
+   * @returns Promise that resolves when the rename dialog appears
+   */
+  async doubleClickSubgraphOutputSlot(outputName?: string): Promise<void> {
+    return this.interactWithSubgraphSlot('output', 'doubleClick', outputName)
   }
 
   /**

browser_tests/tests/bottomPanelShortcuts.spec.ts

@@ -0,0 +1,280 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Bottom Panel Shortcuts', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+  })
+
+  test('should toggle shortcuts panel visibility', async ({ comfyPage }) => {
+    // Initially shortcuts panel should be hidden
+    await expect(comfyPage.page.locator('.bottom-panel')).not.toBeVisible()
+
+    // Click shortcuts toggle button in sidebar
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Shortcuts panel should now be visible
+    await expect(comfyPage.page.locator('.bottom-panel')).toBeVisible()
+
+    // Click toggle button again to hide
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Panel should be hidden again
+    await expect(comfyPage.page.locator('.bottom-panel')).not.toBeVisible()
+  })
+
+  test('should display essentials shortcuts tab', async ({ comfyPage }) => {
+    // Open shortcuts panel
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Essentials tab should be visible and active by default
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /Essential/i })
+    ).toBeVisible()
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /Essential/i })
+    ).toHaveAttribute('aria-selected', 'true')
+
+    // Should display shortcut categories
+    await expect(
+      comfyPage.page.locator('.subcategory-title').first()
+    ).toBeVisible()
+
+    // Should display some keyboard shortcuts
+    await expect(comfyPage.page.locator('.key-badge').first()).toBeVisible()
+
+    // Should have workflow, node, and queue sections
+    await expect(
+      comfyPage.page.getByRole('heading', { name: 'Workflow' })
+    ).toBeVisible()
+    await expect(
+      comfyPage.page.getByRole('heading', { name: 'Node' })
+    ).toBeVisible()
+    await expect(
+      comfyPage.page.getByRole('heading', { name: 'Queue' })
+    ).toBeVisible()
+  })
+
+  test('should display view controls shortcuts tab', async ({ comfyPage }) => {
+    // Open shortcuts panel
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Click view controls tab
+    await comfyPage.page.getByRole('tab', { name: /View Controls/i }).click()
+
+    // View controls tab should be active
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /View Controls/i })
+    ).toHaveAttribute('aria-selected', 'true')
+
+    // Should display view controls shortcuts
+    await expect(comfyPage.page.locator('.key-badge').first()).toBeVisible()
+
+    // Should have view and panel controls sections
+    await expect(
+      comfyPage.page.getByRole('heading', { name: 'View' })
+    ).toBeVisible()
+    await expect(
+      comfyPage.page.getByRole('heading', { name: 'Panel Controls' })
+    ).toBeVisible()
+  })
+
+  test('should switch between shortcuts tabs', async ({ comfyPage }) => {
+    // Open shortcuts panel
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Essentials should be active initially
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /Essential/i })
+    ).toHaveAttribute('aria-selected', 'true')
+
+    // Click view controls tab
+    await comfyPage.page.getByRole('tab', { name: /View Controls/i }).click()
+
+    // View controls should now be active
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /View Controls/i })
+    ).toHaveAttribute('aria-selected', 'true')
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /Essential/i })
+    ).not.toHaveAttribute('aria-selected', 'true')
+
+    // Switch back to essentials
+    await comfyPage.page.getByRole('tab', { name: /Essential/i }).click()
+
+    // Essentials should be active again
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /Essential/i })
+    ).toHaveAttribute('aria-selected', 'true')
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /View Controls/i })
+    ).not.toHaveAttribute('aria-selected', 'true')
+  })
+
+  test('should display formatted keyboard shortcuts', async ({ comfyPage }) => {
+    // Open shortcuts panel
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Wait for shortcuts to load
+    await comfyPage.page.waitForSelector('.key-badge')
+
+    // Check for common formatted keys
+    const keyBadges = comfyPage.page.locator('.key-badge')
+    const count = await keyBadges.count()
+    expect(count).toBeGreaterThanOrEqual(1)
+
+    // Should show formatted modifier keys
+    const badgeText = await keyBadges.allTextContents()
+    const hasModifiers = badgeText.some((text) =>
+      ['Ctrl', 'Cmd', 'Shift', 'Alt'].includes(text)
+    )
+    expect(hasModifiers).toBeTruthy()
+  })
+
+  test('should maintain panel state when switching to terminal', async ({
+    comfyPage
+  }) => {
+    // Open shortcuts panel first
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+    await expect(comfyPage.page.locator('.bottom-panel')).toBeVisible()
+
+    // Open terminal panel (should switch panels)
+    await comfyPage.page
+      .locator('button[aria-label*="Toggle Bottom Panel"]')
+      .click()
+
+    // Panel should still be visible but showing terminal content
+    await expect(comfyPage.page.locator('.bottom-panel')).toBeVisible()
+
+    // Switch back to shortcuts
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Should show shortcuts content again
+    await expect(
+      comfyPage.page.locator('[id*="tab_shortcuts-essentials"]')
+    ).toBeVisible()
+  })
+
+  test('should handle keyboard navigation', async ({ comfyPage }) => {
+    // Open shortcuts panel
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Focus the first tab
+    await comfyPage.page.getByRole('tab', { name: /Essential/i }).focus()
+
+    // Use arrow keys to navigate between tabs
+    await comfyPage.page.keyboard.press('ArrowRight')
+
+    // View controls tab should now have focus
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /View Controls/i })
+    ).toBeFocused()
+
+    // Press Enter to activate the tab
+    await comfyPage.page.keyboard.press('Enter')
+
+    // Tab should be selected
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /View Controls/i })
+    ).toHaveAttribute('aria-selected', 'true')
+  })
+
+  test('should close panel by clicking shortcuts button again', async ({
+    comfyPage
+  }) => {
+    // Open shortcuts panel
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+    await expect(comfyPage.page.locator('.bottom-panel')).toBeVisible()
+
+    // Click shortcuts button again to close
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Panel should be hidden
+    await expect(comfyPage.page.locator('.bottom-panel')).not.toBeVisible()
+  })
+
+  test('should display shortcuts in organized columns', async ({
+    comfyPage
+  }) => {
+    // Open shortcuts panel
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Should have 3-column grid layout
+    await expect(comfyPage.page.locator('.md\\:grid-cols-3')).toBeVisible()
+
+    // Should have multiple subcategory sections
+    const subcategoryTitles = comfyPage.page.locator('.subcategory-title')
+    const titleCount = await subcategoryTitles.count()
+    expect(titleCount).toBeGreaterThanOrEqual(2)
+  })
+
+  test('should open shortcuts panel with Ctrl+Shift+K', async ({
+    comfyPage
+  }) => {
+    // Initially shortcuts panel should be hidden
+    await expect(comfyPage.page.locator('.bottom-panel')).not.toBeVisible()
+
+    // Press Ctrl+Shift+K to open shortcuts panel
+    await comfyPage.page.keyboard.press('Control+Shift+KeyK')
+
+    // Shortcuts panel should now be visible
+    await expect(comfyPage.page.locator('.bottom-panel')).toBeVisible()
+
+    // Should show essentials tab by default
+    await expect(
+      comfyPage.page.getByRole('tab', { name: /Essential/i })
+    ).toHaveAttribute('aria-selected', 'true')
+  })
+
+  test('should open settings dialog when clicking manage shortcuts button', async ({
+    comfyPage
+  }) => {
+    // Open shortcuts panel
+    await comfyPage.page
+      .locator('button[aria-label*="Keyboard Shortcuts"]')
+      .click()
+
+    // Manage shortcuts button should be visible
+    await expect(
+      comfyPage.page.getByRole('button', { name: /Manage Shortcuts/i })
+    ).toBeVisible()
+
+    // Click manage shortcuts button
+    await comfyPage.page
+      .getByRole('button', { name: /Manage Shortcuts/i })
+      .click()
+
+    // Settings dialog should open with keybinding tab
+    await expect(comfyPage.page.getByRole('dialog')).toBeVisible()
+
+    // Should show keybinding settings (check for keybinding-related content)
+    await expect(
+      comfyPage.page.getByRole('option', { name: 'Keybinding' })
+    ).toBeVisible()
+  })
+})

browser_tests/tests/commandSearchBox.spec.ts

@@ -0,0 +1,161 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../fixtures/ComfyPage'
+
+test.describe('Command search box', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.NodeSearchBoxImpl', 'default')
+  })
+
+  test('Can trigger command mode with ">" prefix', async ({ comfyPage }) => {
+    await comfyPage.doubleClickCanvas()
+    await expect(comfyPage.searchBox.input).toHaveCount(1)
+
+    // Type ">" to enter command mode
+    await comfyPage.searchBox.input.fill('>')
+
+    // Verify filter button is hidden in command mode
+    const filterButton = comfyPage.page.locator('.filter-button')
+    await expect(filterButton).not.toBeVisible()
+
+    // Verify placeholder text changes
+    await expect(comfyPage.searchBox.input).toHaveAttribute(
+      'placeholder',
+      expect.stringContaining('Search Commands')
+    )
+  })
+
+  test('Shows command list when entering command mode', async ({
+    comfyPage
+  }) => {
+    await comfyPage.doubleClickCanvas()
+    await comfyPage.searchBox.input.fill('>')
+
+    // Wait for dropdown to appear
+    await comfyPage.searchBox.dropdown.waitFor({ state: 'visible' })
+
+    // Check that commands are shown
+    const firstItem = comfyPage.searchBox.dropdown.locator('li').first()
+    await expect(firstItem).toBeVisible()
+
+    // Verify it shows a command item with icon
+    const commandIcon = firstItem.locator('.item-icon')
+    await expect(commandIcon).toBeVisible()
+  })
+
+  test('Can search and filter commands', async ({ comfyPage }) => {
+    await comfyPage.doubleClickCanvas()
+    await comfyPage.searchBox.input.fill('>save')
+
+    await comfyPage.searchBox.dropdown.waitFor({ state: 'visible' })
+    await comfyPage.page.waitForTimeout(500) // Wait for search to complete
+
+    // Get all visible command items
+    const items = comfyPage.searchBox.dropdown.locator('li')
+    const count = await items.count()
+
+    // Should have filtered results
+    expect(count).toBeGreaterThan(0)
+    expect(count).toBeLessThan(10) // Should be filtered, not showing all
+
+    // Verify first result contains "save"
+    const firstLabel = await items.first().locator('.item-label').textContent()
+    expect(firstLabel?.toLowerCase()).toContain('save')
+  })
+
+  test('Shows keybindings for commands that have them', async ({
+    comfyPage
+  }) => {
+    await comfyPage.doubleClickCanvas()
+    await comfyPage.searchBox.input.fill('>undo')
+
+    await comfyPage.searchBox.dropdown.waitFor({ state: 'visible' })
+    await comfyPage.page.waitForTimeout(500)
+
+    // Find the undo command
+    const undoItem = comfyPage.searchBox.dropdown
+      .locator('li')
+      .filter({ hasText: 'Undo' })
+      .first()
+
+    // Check if keybinding is shown (if configured)
+    const keybinding = undoItem.locator('.item-keybinding')
+    const keybindingCount = await keybinding.count()
+
+    // Keybinding might or might not be present depending on configuration
+    if (keybindingCount > 0) {
+      await expect(keybinding).toBeVisible()
+    }
+  })
+
+  test('Executes command on selection', async ({ comfyPage }) => {
+    await comfyPage.doubleClickCanvas()
+    await comfyPage.searchBox.input.fill('>new blank')
+
+    await comfyPage.searchBox.dropdown.waitFor({ state: 'visible' })
+    await comfyPage.page.waitForTimeout(500)
+
+    // Count nodes before
+    const nodesBefore = await comfyPage.page
+      .locator('.litegraph.litenode')
+      .count()
+
+    // Select the new blank workflow command
+    const newBlankItem = comfyPage.searchBox.dropdown
+      .locator('li')
+      .filter({ hasText: 'New Blank Workflow' })
+      .first()
+    await newBlankItem.click()
+
+    // Search box should close
+    await expect(comfyPage.searchBox.input).not.toBeVisible()
+
+    // Verify workflow was cleared (no nodes)
+    const nodesAfter = await comfyPage.page
+      .locator('.litegraph.litenode')
+      .count()
+    expect(nodesAfter).toBe(0)
+  })
+
+  test('Returns to node search when removing ">"', async ({ comfyPage }) => {
+    await comfyPage.doubleClickCanvas()
+
+    // Enter command mode
+    await comfyPage.searchBox.input.fill('>')
+    await expect(comfyPage.page.locator('.filter-button')).not.toBeVisible()
+
+    // Return to node search by filling with empty string to trigger search
+    await comfyPage.searchBox.input.fill('')
+
+    // Small wait for UI update
+    await comfyPage.page.waitForTimeout(200)
+
+    // Filter button should be visible again
+    await expect(comfyPage.page.locator('.filter-button')).toBeVisible()
+
+    // Placeholder should change back
+    await expect(comfyPage.searchBox.input).toHaveAttribute(
+      'placeholder',
+      expect.stringContaining('Search Nodes')
+    )
+  })
+
+  test('Command search is case insensitive', async ({ comfyPage }) => {
+    await comfyPage.doubleClickCanvas()
+
+    // Search with lowercase
+    await comfyPage.searchBox.input.fill('>SAVE')
+    await comfyPage.searchBox.dropdown.waitFor({ state: 'visible' })
+    await comfyPage.page.waitForTimeout(500)
+
+    // Should find save commands
+    const items = comfyPage.searchBox.dropdown.locator('li')
+    const count = await items.count()
+    expect(count).toBeGreaterThan(0)
+
+    // Verify it found save-related commands
+    const firstLabel = await items.first().locator('.item-label').textContent()
+    expect(firstLabel?.toLowerCase()).toContain('save')
+  })
+})

browser_tests/tests/dialog.spec.ts

@@ -13,6 +13,21 @@ test.describe('Load workflow warning', () => {
     const missingNodesWarning = comfyPage.page.locator('.comfy-missing-nodes')
     await expect(missingNodesWarning).toBeVisible()
   })
+
+  test('Should display a warning when loading a workflow with missing nodes in subgraphs', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('missing_nodes_in_subgraph')
+
+    // 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()
+
+    // Verify the missing node text includes subgraph context
+    const warningText = await missingNodesWarning.textContent()
+    expect(warningText).toContain('MISSING_NODE_TYPE_IN_SUBGRAPH')
+    expect(warningText).toContain('in subgraph')
+  })
 })
 
 test('Does not report warning on undo/redo', async ({ comfyPage }) => {
@@ -369,7 +384,7 @@ test.describe('Signin dialog', () => {
     await textBox.press('Control+c')
 
     await comfyPage.page.evaluate(() => {
-      window['app'].extensionManager.dialog.showSignInDialog()
+      void window['app'].extensionManager.dialog.showSignInDialog()
     })
 
     const input = comfyPage.page.locator('#comfy-org-sign-in-password')

browser_tests/tests/interaction.spec.ts

@@ -1,4 +1,4 @@
-import { expect } from '@playwright/test'
+import { Locator, expect } from '@playwright/test'
 import { Position } from '@vueuse/core'
 
 import {
@@ -767,6 +767,17 @@ test.describe('Viewport settings', () => {
     comfyPage,
     comfyMouse
   }) => {
+    const changeTab = async (tab: Locator) => {
+      await tab.click()
+      await comfyPage.nextFrame()
+      await comfyMouse.move(comfyPage.emptySpace)
+
+      // If tooltip is visible, wait for it to hide
+      await expect(
+        comfyPage.page.locator('.workflow-popover-fade')
+      ).toHaveCount(0)
+    }
+
     // Screenshot the canvas element
     await comfyPage.setSetting('Comfy.Graph.CanvasMenu', true)
     const toggleButton = comfyPage.page.getByTestId('toggle-minimap-button')
@@ -794,15 +805,13 @@ test.describe('Viewport settings', () => {
     const tabB = comfyPage.menu.topbar.getWorkflowTab('Workflow B')
 
     // Go back to Workflow A
-    await tabA.click()
-    await comfyPage.nextFrame()
+    await changeTab(tabA)
     expect((await comfyPage.canvas.screenshot()).toString('base64')).toBe(
       screenshotA
     )
 
     // And back to Workflow B
-    await tabB.click()
-    await comfyPage.nextFrame()
+    await changeTab(tabB)
     expect((await comfyPage.canvas.screenshot()).toString('base64')).toBe(
       screenshotB
     )

browser_tests/tests/rerouteNode.spec.ts

@@ -48,7 +48,9 @@ test.describe('LiteGraph Native Reroute Node', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('native_reroute.png')
   })
 
-  test('Can add reroute by alt clicking on link', async ({ comfyPage }) => {
+  test('@2x @0.5x Can add reroute by alt clicking on link', async ({
+    comfyPage
+  }) => {
     const loadCheckpointNode = (
       await comfyPage.getNodeRefsByTitle('Load Checkpoint')
     )[0]

browser_tests/tests/subgraph-rename-dialog.spec.ts

@@ -0,0 +1,157 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+// Constants
+const INITIAL_NAME = 'initial_slot_name'
+const RENAMED_NAME = 'renamed_slot_name'
+const SECOND_RENAMED_NAME = 'second_renamed_name'
+
+// Common selectors
+const SELECTORS = {
+  promptDialog: '.graphdialog input'
+} as const
+
+test.describe('Subgraph Slot Rename Dialog', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+  })
+
+  test('Shows current slot label (not stale) in rename dialog', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('basic-subgraph')
+
+    const subgraphNode = await comfyPage.getNodeRefById('2')
+    await subgraphNode.navigateIntoSubgraph()
+
+    // Get initial slot label
+    const initialInputLabel = await comfyPage.page.evaluate(() => {
+      const graph = window['app'].canvas.graph
+      return graph.inputs?.[0]?.label || graph.inputs?.[0]?.name || null
+    })
+
+    // First rename
+    await comfyPage.rightClickSubgraphInputSlot(initialInputLabel)
+    await comfyPage.clickLitegraphContextMenuItem('Rename Slot')
+
+    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+      state: 'visible'
+    })
+
+    // Clear and enter new name
+    await comfyPage.page.fill(SELECTORS.promptDialog, '')
+    await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_NAME)
+    await comfyPage.page.keyboard.press('Enter')
+
+    // Wait for dialog to close
+    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+      state: 'hidden'
+    })
+
+    // Force re-render
+    await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+    await comfyPage.nextFrame()
+
+    // Verify the rename worked
+    const afterFirstRename = await comfyPage.page.evaluate(() => {
+      const graph = window['app'].canvas.graph
+      const slot = graph.inputs?.[0]
+      return {
+        label: slot?.label || null,
+        name: slot?.name || null,
+        displayName: slot?.displayName || slot?.label || slot?.name || null
+      }
+    })
+    expect(afterFirstRename.label).toBe(RENAMED_NAME)
+
+    // Now rename again - this is where the bug would show
+    // We need to use the index-based approach since the method looks for slot.name
+    await comfyPage.rightClickSubgraphInputSlot()
+    await comfyPage.clickLitegraphContextMenuItem('Rename Slot')
+
+    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+      state: 'visible'
+    })
+
+    // Get the current value in the prompt dialog
+    const dialogValue = await comfyPage.page.inputValue(SELECTORS.promptDialog)
+
+    // This should show the current label (RENAMED_NAME), not the original name
+    expect(dialogValue).toBe(RENAMED_NAME)
+    expect(dialogValue).not.toBe(afterFirstRename.name) // Should not show the original slot.name
+
+    // Complete the second rename to ensure everything still works
+    await comfyPage.page.fill(SELECTORS.promptDialog, '')
+    await comfyPage.page.fill(SELECTORS.promptDialog, SECOND_RENAMED_NAME)
+    await comfyPage.page.keyboard.press('Enter')
+
+    // Wait for dialog to close
+    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+      state: 'hidden'
+    })
+
+    // Force re-render
+    await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+    await comfyPage.nextFrame()
+
+    // Verify the second rename worked
+    const afterSecondRename = await comfyPage.page.evaluate(() => {
+      const graph = window['app'].canvas.graph
+      return graph.inputs?.[0]?.label || null
+    })
+    expect(afterSecondRename).toBe(SECOND_RENAMED_NAME)
+  })
+
+  test('Shows current output slot label in rename dialog', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('basic-subgraph')
+
+    const subgraphNode = await comfyPage.getNodeRefById('2')
+    await subgraphNode.navigateIntoSubgraph()
+
+    // Get initial output slot label
+    const initialOutputLabel = await comfyPage.page.evaluate(() => {
+      const graph = window['app'].canvas.graph
+      return graph.outputs?.[0]?.label || graph.outputs?.[0]?.name || null
+    })
+
+    // First rename
+    await comfyPage.rightClickSubgraphOutputSlot(initialOutputLabel)
+    await comfyPage.clickLitegraphContextMenuItem('Rename Slot')
+
+    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+      state: 'visible'
+    })
+
+    // Clear and enter new name
+    await comfyPage.page.fill(SELECTORS.promptDialog, '')
+    await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_NAME)
+    await comfyPage.page.keyboard.press('Enter')
+
+    // Wait for dialog to close
+    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+      state: 'hidden'
+    })
+
+    // Force re-render
+    await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+    await comfyPage.nextFrame()
+
+    // Now rename again to check for stale content
+    // We need to use the index-based approach since the method looks for slot.name
+    await comfyPage.rightClickSubgraphOutputSlot()
+    await comfyPage.clickLitegraphContextMenuItem('Rename Slot')
+
+    await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+      state: 'visible'
+    })
+
+    // Get the current value in the prompt dialog
+    const dialogValue = await comfyPage.page.inputValue(SELECTORS.promptDialog)
+
+    // This should show the current label (RENAMED_NAME), not the original name
+    expect(dialogValue).toBe(RENAMED_NAME)
+  })
+})

browser_tests/tests/subgraph.spec.ts

@@ -155,6 +155,182 @@ test.describe('Subgraph Operations', () => {
       expect(newInputName).toBe(RENAMED_INPUT_NAME)
       expect(newInputName).not.toBe(initialInputLabel)
     })
+
+    test('Can rename input slots via double-click', async ({ comfyPage }) => {
+      await comfyPage.loadWorkflow('basic-subgraph')
+
+      const subgraphNode = await comfyPage.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialInputLabel = await comfyPage.page.evaluate(() => {
+        const graph = window['app'].canvas.graph
+        return graph.inputs?.[0]?.label || null
+      })
+
+      await comfyPage.doubleClickSubgraphInputSlot(initialInputLabel)
+
+      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+        state: 'visible'
+      })
+      await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_INPUT_NAME)
+      await comfyPage.page.keyboard.press('Enter')
+
+      // Force re-render
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      const newInputName = await comfyPage.page.evaluate(() => {
+        const graph = window['app'].canvas.graph
+        return graph.inputs?.[0]?.label || null
+      })
+
+      expect(newInputName).toBe(RENAMED_INPUT_NAME)
+      expect(newInputName).not.toBe(initialInputLabel)
+    })
+
+    test('Can rename output slots via double-click', async ({ comfyPage }) => {
+      await comfyPage.loadWorkflow('basic-subgraph')
+
+      const subgraphNode = await comfyPage.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialOutputLabel = await comfyPage.page.evaluate(() => {
+        const graph = window['app'].canvas.graph
+        return graph.outputs?.[0]?.label || null
+      })
+
+      await comfyPage.doubleClickSubgraphOutputSlot(initialOutputLabel)
+
+      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+        state: 'visible'
+      })
+      const renamedOutputName = 'renamed_output'
+      await comfyPage.page.fill(SELECTORS.promptDialog, renamedOutputName)
+      await comfyPage.page.keyboard.press('Enter')
+
+      // Force re-render
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      const newOutputName = await comfyPage.page.evaluate(() => {
+        const graph = window['app'].canvas.graph
+        return graph.outputs?.[0]?.label || null
+      })
+
+      expect(newOutputName).toBe(renamedOutputName)
+      expect(newOutputName).not.toBe(initialOutputLabel)
+    })
+
+    test('Right-click context menu still works alongside double-click', async ({
+      comfyPage
+    }) => {
+      await comfyPage.loadWorkflow('basic-subgraph')
+
+      const subgraphNode = await comfyPage.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialInputLabel = await comfyPage.page.evaluate(() => {
+        const graph = window['app'].canvas.graph
+        return graph.inputs?.[0]?.label || null
+      })
+
+      // Test that right-click still works for renaming
+      await comfyPage.rightClickSubgraphInputSlot(initialInputLabel)
+      await comfyPage.clickLitegraphContextMenuItem('Rename Slot')
+
+      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+        state: 'visible'
+      })
+      const rightClickRenamedName = 'right_click_renamed'
+      await comfyPage.page.fill(SELECTORS.promptDialog, rightClickRenamedName)
+      await comfyPage.page.keyboard.press('Enter')
+
+      // Force re-render
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      const newInputName = await comfyPage.page.evaluate(() => {
+        const graph = window['app'].canvas.graph
+        return graph.inputs?.[0]?.label || null
+      })
+
+      expect(newInputName).toBe(rightClickRenamedName)
+      expect(newInputName).not.toBe(initialInputLabel)
+    })
+
+    test('Can double-click on slot label text to rename', async ({
+      comfyPage
+    }) => {
+      await comfyPage.loadWorkflow('basic-subgraph')
+
+      const subgraphNode = await comfyPage.getNodeRefById('2')
+      await subgraphNode.navigateIntoSubgraph()
+
+      const initialInputLabel = await comfyPage.page.evaluate(() => {
+        const graph = window['app'].canvas.graph
+        return graph.inputs?.[0]?.label || null
+      })
+
+      // Use direct pointer event approach to double-click on label
+      await comfyPage.page.evaluate(() => {
+        const app = window['app']
+        const graph = app.canvas.graph
+        const input = graph.inputs?.[0]
+
+        if (!input?.labelPos) {
+          throw new Error('Could not get label position for testing')
+        }
+
+        // Use labelPos for more precise clicking on the text
+        const testX = input.labelPos[0]
+        const testY = input.labelPos[1]
+
+        const leftClickEvent = {
+          canvasX: testX,
+          canvasY: testY,
+          button: 0, // Left mouse button
+          preventDefault: () => {},
+          stopPropagation: () => {}
+        }
+
+        const inputNode = graph.inputNode
+        if (inputNode?.onPointerDown) {
+          inputNode.onPointerDown(
+            leftClickEvent,
+            app.canvas.pointer,
+            app.canvas.linkConnector
+          )
+
+          // Trigger double-click if pointer has the handler
+          if (app.canvas.pointer.onDoubleClick) {
+            app.canvas.pointer.onDoubleClick(leftClickEvent)
+          }
+        }
+      })
+
+      // Wait for dialog to appear
+      await comfyPage.page.waitForTimeout(200)
+      await comfyPage.nextFrame()
+
+      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
+        state: 'visible'
+      })
+      const labelClickRenamedName = 'label_click_renamed'
+      await comfyPage.page.fill(SELECTORS.promptDialog, labelClickRenamedName)
+      await comfyPage.page.keyboard.press('Enter')
+
+      // Force re-render
+      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+      await comfyPage.nextFrame()
+
+      const newInputName = await comfyPage.page.evaluate(() => {
+        const graph = window['app'].canvas.graph
+        return graph.inputs?.[0]?.label || null
+      })
+
+      expect(newInputName).toBe(labelClickRenamedName)
+      expect(newInputName).not.toBe(initialInputLabel)
+    })
   })
 
   test.describe('Subgraph Creation and Deletion', () => {
@@ -196,6 +372,68 @@ test.describe('Subgraph Operations', () => {
       const deletedNode = await comfyPage.getNodeRefById('2')
       expect(await deletedNode.exists()).toBe(false)
     })
+
+    test.describe('Subgraph copy and paste', () => {
+      test('Can copy subgraph node by dragging + alt', async ({
+        comfyPage
+      }) => {
+        await comfyPage.loadWorkflow('basic-subgraph')
+
+        const subgraphNode = await comfyPage.getNodeRefById('2')
+
+        // Get position of subgraph node
+        const subgraphPos = await subgraphNode.getPosition()
+
+        // Alt + Click on the subgraph node
+        await comfyPage.page.mouse.move(subgraphPos.x + 16, subgraphPos.y + 16)
+        await comfyPage.page.keyboard.down('Alt')
+        await comfyPage.page.mouse.down()
+        await comfyPage.nextFrame()
+
+        // Drag slightly to trigger the copy
+        await comfyPage.page.mouse.move(subgraphPos.x + 64, subgraphPos.y + 64)
+        await comfyPage.page.mouse.up()
+        await comfyPage.page.keyboard.up('Alt')
+
+        // Find all subgraph nodes
+        const subgraphNodes =
+          await comfyPage.getNodeRefsByTitle(NEW_SUBGRAPH_TITLE)
+
+        // Expect a second subgraph node to be created (2 total)
+        expect(subgraphNodes.length).toBe(2)
+      })
+
+      test('Copying subgraph node by dragging + alt creates a new subgraph node with unique type', async ({
+        comfyPage
+      }) => {
+        await comfyPage.loadWorkflow('basic-subgraph')
+
+        const subgraphNode = await comfyPage.getNodeRefById('2')
+
+        // Get position of subgraph node
+        const subgraphPos = await subgraphNode.getPosition()
+
+        // Alt + Click on the subgraph node
+        await comfyPage.page.mouse.move(subgraphPos.x + 16, subgraphPos.y + 16)
+        await comfyPage.page.keyboard.down('Alt')
+        await comfyPage.page.mouse.down()
+        await comfyPage.nextFrame()
+
+        // Drag slightly to trigger the copy
+        await comfyPage.page.mouse.move(subgraphPos.x + 64, subgraphPos.y + 64)
+        await comfyPage.page.mouse.up()
+        await comfyPage.page.keyboard.up('Alt')
+
+        // Find all subgraph nodes and expect all unique IDs
+        const subgraphNodes =
+          await comfyPage.getNodeRefsByTitle(NEW_SUBGRAPH_TITLE)
+
+        // Expect the second subgraph node to have a unique type
+        const nodeType1 = await subgraphNodes[0].getType()
+        const nodeType2 = await subgraphNodes[1].getType()
+        expect(nodeType1).not.toBe(nodeType2)
+      })
+    })
   })
 
   test.describe('Operations Inside Subgraphs', () => {

browser_tests/tests/workflowTabThumbnail.spec.ts

@@ -0,0 +1,155 @@
+import { expect } from '@playwright/test'
+
+import { type ComfyPage, comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Workflow Tab Thumbnails', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setSetting('Comfy.Workflow.WorkflowTabsPosition', 'Topbar')
+    await comfyPage.setup()
+  })
+
+  async function getTab(comfyPage: ComfyPage, index: number) {
+    const tab = comfyPage.page
+      .locator(`.workflow-tabs .p-togglebutton`)
+      .nth(index)
+    return tab
+  }
+
+  async function getTabPopover(
+    comfyPage: ComfyPage,
+    index: number,
+    name?: string
+  ) {
+    const tab = await getTab(comfyPage, index)
+    await tab.hover()
+
+    const popover = comfyPage.page.locator('.workflow-popover-fade')
+    await expect(popover).toHaveCount(1)
+    await expect(popover).toBeVisible({ timeout: 500 })
+    if (name) {
+      await expect(popover).toContainText(name)
+    }
+    return popover
+  }
+
+  async function getTabThumbnailImage(
+    comfyPage: ComfyPage,
+    index: number,
+    name?: string
+  ) {
+    const popover = await getTabPopover(comfyPage, index, name)
+    const thumbnailImg = popover.locator('.workflow-preview-thumbnail img')
+    return thumbnailImg
+  }
+
+  async function getNodeThumbnailBase64(comfyPage: ComfyPage, index: number) {
+    const thumbnailImg = await getTabThumbnailImage(comfyPage, index)
+    const src = (await thumbnailImg.getAttribute('src'))!
+
+    // Convert blob to base64, need to execute a script to get the base64
+    const base64 = await comfyPage.page.evaluate(async (src: string) => {
+      const blob = await fetch(src).then((res) => res.blob())
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onloadend = () => resolve(reader.result)
+        reader.onerror = reject
+        reader.readAsDataURL(blob)
+      })
+    }, src)
+    return base64
+  }
+
+  test('Should show thumbnail when hovering over a non-active tab', async ({
+    comfyPage
+  }) => {
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Workflow', 'New'])
+    const thumbnailImg = await getTabThumbnailImage(
+      comfyPage,
+      0,
+      'Unsaved Workflow'
+    )
+    await expect(thumbnailImg).toBeVisible()
+  })
+
+  test('Should not show thumbnail for active tab', async ({ comfyPage }) => {
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Workflow', 'New'])
+    const thumbnailImg = await getTabThumbnailImage(
+      comfyPage,
+      1,
+      'Unsaved Workflow (2)'
+    )
+    await expect(thumbnailImg).not.toBeVisible()
+  })
+
+  async function addNode(comfyPage: ComfyPage, category: string, node: string) {
+    const canvasArea = await comfyPage.canvas.boundingBox()
+
+    await comfyPage.page.mouse.move(
+      canvasArea!.x + canvasArea!.width - 100,
+      100
+    )
+    await comfyPage.delay(300) // Wait for the popover to hide
+
+    await comfyPage.rightClickCanvas(200, 200)
+    await comfyPage.page.getByText('Add Node').click()
+    await comfyPage.nextFrame()
+    await comfyPage.page.getByText(category).click()
+    await comfyPage.nextFrame()
+    await comfyPage.page.getByText(node).click()
+    await comfyPage.nextFrame()
+  }
+
+  test('Thumbnail should update when switching tabs', async ({ comfyPage }) => {
+    // Wait for initial workflow to load
+    await comfyPage.nextFrame()
+
+    // Create a new workflow (tab 1) which will be empty
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Workflow', 'New'])
+    await comfyPage.nextFrame()
+
+    // Now we have two tabs: tab 0 (default workflow with nodes) and tab 1 (empty)
+    // Tab 1 is currently active, so we can only get thumbnail for tab 0
+
+    // Step 1: Different tabs should show different previews
+    const tab0ThumbnailWithNodes = await getNodeThumbnailBase64(comfyPage, 0)
+
+    // Add a node to tab 1 (current active tab)
+    await addNode(comfyPage, 'loaders', 'Load Checkpoint')
+    await comfyPage.nextFrame()
+
+    // Switch to tab 0 so we can get tab 1's thumbnail
+    await (await getTab(comfyPage, 0)).click()
+    await comfyPage.nextFrame()
+
+    const tab1ThumbnailWithNode = await getNodeThumbnailBase64(comfyPage, 1)
+
+    // The thumbnails should be different
+    expect(tab0ThumbnailWithNodes).not.toBe(tab1ThumbnailWithNode)
+
+    // Step 2: Switching without changes shouldn't update thumbnail
+    const tab1ThumbnailBefore = await getNodeThumbnailBase64(comfyPage, 1)
+
+    // Switch to tab 1 and back to tab 0 without making changes
+    await (await getTab(comfyPage, 1)).click()
+    await comfyPage.nextFrame()
+    await (await getTab(comfyPage, 0)).click()
+    await comfyPage.nextFrame()
+
+    const tab1ThumbnailAfter = await getNodeThumbnailBase64(comfyPage, 1)
+    expect(tab1ThumbnailBefore).toBe(tab1ThumbnailAfter)
+
+    // Step 3: Adding another node should cause thumbnail to change
+    // We're on tab 0, add a node
+    await addNode(comfyPage, 'loaders', 'Load VAE')
+    await comfyPage.nextFrame()
+
+    // Switch to tab 1 and back to update tab 0's thumbnail
+    await (await getTab(comfyPage, 1)).click()
+
+    const tab0ThumbnailAfterNewNode = await getNodeThumbnailBase64(comfyPage, 0)
+
+    // The thumbnail should have changed after adding a node
+    expect(tab0ThumbnailWithNodes).not.toBe(tab0ThumbnailAfterNewNode)
+  })
+})

docs/FEATURE_FLAGS.md

@@ -0,0 +1,362 @@
+# ComfyUI Feature Flags System
+
+## Overview
+
+The ComfyUI feature flags system enables capability negotiation between frontend and backend, allowing both sides to communicate their supported features and adapt behavior accordingly. This ensures backward compatibility while enabling progressive enhancement of features.
+
+## System Architecture
+
+### High-Level Flow
+
+```mermaid
+sequenceDiagram
+    participant Frontend
+    participant WebSocket
+    participant Backend
+    participant FeatureFlags Module
+
+    Frontend->>WebSocket: Connect
+    WebSocket-->>Frontend: Connection established
+    
+    Note over Frontend: First message must be feature flags
+    Frontend->>WebSocket: Send client feature flags
+    WebSocket->>Backend: Receive feature flags
+    Backend->>FeatureFlags Module: Store client capabilities
+    
+    Backend->>FeatureFlags Module: Get server features
+    FeatureFlags Module-->>Backend: Return server capabilities
+    Backend->>WebSocket: Send server feature flags
+    WebSocket-->>Frontend: Receive server features
+    
+    Note over Frontend,Backend: Both sides now know each other's capabilities
+    
+    Frontend->>Frontend: Store server features
+    Frontend->>Frontend: Components use useFeatureFlags()
+```
+
+### Component Architecture
+
+```mermaid
+graph TB
+    subgraph Frontend
+        A[clientFeatureFlags.json] --> B[api.ts]
+        B --> C[WebSocket Handler]
+        D[useFeatureFlags composable] --> B
+        E[Vue Components] --> D
+    end
+    
+    subgraph Backend
+        F[feature_flags.py] --> G[SERVER_FEATURE_FLAGS]
+        H[server.py WebSocket] --> F
+        I[Feature Consumers] --> F
+    end
+    
+    C <--> H
+    
+    style A fill:#f9f,stroke:#333,stroke-width:2px
+    style G fill:#f9f,stroke:#333,stroke-width:2px
+    style D fill:#9ff,stroke:#333,stroke-width:2px
+```
+
+## Feature Flag Structure
+
+Feature flags are organized as a flat dictionary at the top level, with extensions nested under an `extension` object:
+
+### Naming Convention
+
+- **Core features**: Top-level keys (e.g., `"async_execution"`, `"supports_batch_queue"`)
+- **Client features**: Top-level keys (e.g., `"supports_preview_metadata"`)
+- **Extensions**: Nested under `"extension"` object (e.g., `extension.manager`)
+
+### Structure Example
+
+```json
+{
+  "async_execution": true,
+  "supports_batch_queue": false,
+  "supports_preview_metadata": true,
+  "supports_websocket_v2": false,
+  "max_upload_size": 104857600,
+  "extension": {
+    "manager": {
+      "supports_v4": true,
+      "supports_ai_search": false
+    }
+  }
+}
+```
+
+## Implementation Details
+
+### Backend Implementation
+
+```mermaid
+classDiagram
+    class FeatureFlagsModule {
+        +SERVER_FEATURE_FLAGS: Dict
+        +get_server_features() Dict
+        +supports_feature(sockets_metadata, sid, feature_name) bool
+        +get_connection_feature(sockets_metadata, sid, feature_name, default) Any
+    }
+    
+    class PromptServer {
+        -sockets_metadata: Dict
+        +websocket_handler()
+        +send()
+    }
+    
+    class FeatureConsumer {
+        <<interface>>
+        +check_feature()
+        +use_feature()
+    }
+    
+    PromptServer --> FeatureFlagsModule
+    FeatureConsumer --> FeatureFlagsModule
+```
+
+### Frontend Implementation
+
+The `useFeatureFlags` composable provides reactive access to feature flags, meaning components will automatically update when feature flags change (e.g., during WebSocket reconnection).
+
+```mermaid
+classDiagram
+    class ComfyApi {
+        +serverFeatureFlags: Record~string, unknown~
+        +getClientFeatureFlags() Record
+        +serverSupportsFeature(name) boolean
+        +getServerFeature(name, default) T
+    }
+    
+    class useFeatureFlags {
+        +serverSupports(name) boolean
+        +getServerFeature(name, default) T
+        +createServerFeatureFlag(name) ComputedRef
+        +extension: ExtensionFlags
+    }
+    
+    class VueComponent {
+        <<component>>
+        +setup()
+    }
+    
+    ComfyApi <-- useFeatureFlags
+    VueComponent --> useFeatureFlags
+```
+
+## Examples
+
+### 1. Preview Metadata Support
+
+```mermaid
+graph LR
+    A[Preview Generation] --> B{supports_preview_metadata?}
+    B -->|Yes| C[Send metadata with preview]
+    B -->|No| D[Send preview only]
+    
+    C --> E[Enhanced preview with node info]
+    D --> F[Basic preview image]
+```
+
+**Backend Usage:**
+```python
+# Check if client supports preview metadata
+if feature_flags.supports_feature(
+    self.server_instance.sockets_metadata,
+    self.server_instance.client_id,
+    "supports_preview_metadata"
+):
+    # Send enhanced preview with metadata
+    metadata = {
+        "node_id": node_id,
+        "prompt_id": prompt_id,
+        "display_node_id": display_node_id,
+        "parent_node_id": parent_node_id,
+        "real_node_id": real_node_id,
+    }
+    self.server_instance.send_sync(
+        BinaryEventTypes.PREVIEW_IMAGE_WITH_METADATA,
+        (image, metadata),
+        self.server_instance.client_id,
+    )
+```
+
+### 2. Max Upload Size
+
+```mermaid
+graph TB
+    A[Client File Upload] --> B[Check max_upload_size]
+    B --> C{File size OK?}
+    C -->|Yes| D[Upload file]
+    C -->|No| E[Show error]
+    
+    F[Backend] --> G[Set from CLI args]
+    G --> H[Convert MB to bytes]
+    H --> I[Include in feature flags]
+```
+
+**Backend Configuration:**
+```python
+# In feature_flags.py
+SERVER_FEATURE_FLAGS = {
+    "supports_preview_metadata": True,
+    "max_upload_size": args.max_upload_size * 1024 * 1024,  # Convert MB to bytes
+}
+```
+
+**Frontend Usage:**
+```typescript
+const { getServerFeature } = useFeatureFlags()
+const maxUploadSize = getServerFeature('max_upload_size', 100 * 1024 * 1024) // Default 100MB
+```
+
+## Using Feature Flags
+
+### Frontend Access Patterns
+
+1. **Direct API access:**
+```typescript
+// Check boolean feature
+if (api.serverSupportsFeature('supports_preview_metadata')) {
+    // Feature is supported
+}
+
+// Get feature value with default
+const maxSize = api.getServerFeature('max_upload_size', 100 * 1024 * 1024)
+```
+
+2. **Using the composable (recommended for reactive components):**
+```typescript
+const { serverSupports, getServerFeature, extension } = useFeatureFlags()
+
+// Check feature support
+if (serverSupports('supports_preview_metadata')) {
+    // Use enhanced previews
+}
+
+// Use reactive convenience properties (automatically update if flags change)
+if (extension.manager.supportsV4.value) {
+    // Use V4 manager API
+}
+```
+
+3. **Reactive usage in templates:**
+```vue
+<template>
+  <div v-if="featureFlags.extension.manager.supportsV4">
+    <!-- V4-specific UI -->
+  </div>
+  <div v-else>
+    <!-- Legacy UI -->
+  </div>
+</template>
+
+<script setup>
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+const featureFlags = useFeatureFlags()
+</script>
+```
+
+### Backend Access Patterns
+
+```python
+# Check if a specific client supports a feature
+if feature_flags.supports_feature(
+    sockets_metadata, 
+    client_id, 
+    "supports_preview_metadata"
+):
+    # Client supports this feature
+    
+# Get feature value with default
+max_size = feature_flags.get_connection_feature(
+    sockets_metadata,
+    client_id,
+    "max_upload_size",
+    100 * 1024 * 1024  # Default 100MB
+)
+```
+
+## Adding New Feature Flags
+
+### Backend
+
+1. **For server capabilities**, add to `SERVER_FEATURE_FLAGS` in `comfy_api/feature_flags.py`:
+```python
+SERVER_FEATURE_FLAGS = {
+    "supports_preview_metadata": True,
+    "max_upload_size": args.max_upload_size * 1024 * 1024,
+    "your_new_feature": True,  # Add your flag
+}
+```
+
+2. **Use in your code:**
+```python
+if feature_flags.supports_feature(sockets_metadata, sid, "your_new_feature"):
+    # Feature-specific code
+```
+
+### Frontend
+
+1. **For client capabilities**, add to `src/config/clientFeatureFlags.json`:
+```json
+{
+    "supports_preview_metadata": false,
+    "your_new_feature": true
+}
+```
+
+2. **For extension features**, update the composable to add convenience accessors:
+```typescript
+// In useFeatureFlags.ts
+const extension = {
+    manager: {
+        supportsV4: computed(() => getServerFeature('extension.manager.supports_v4', false))
+    },
+    yourExtension: {
+        supportsNewFeature: computed(() => getServerFeature('extension.yourExtension.supports_new_feature', false))
+    }
+}
+
+return {
+    // ... existing returns
+    extension
+}
+```
+
+## Testing Feature Flags
+
+```mermaid
+graph LR
+    A[Test Scenarios] --> B[Both support feature]
+    A --> C[Only frontend supports]
+    A --> D[Only backend supports]
+    A --> E[Neither supports]
+    
+    B --> F[Feature enabled]
+    C --> G[Feature disabled]
+    D --> H[Feature disabled]
+    E --> I[Feature disabled]
+```
+
+Test your feature flags with different combinations:
+- Frontend with flag + Backend with flag = Feature works
+- Frontend with flag + Backend without = Graceful degradation
+- Frontend without + Backend with flag = No feature usage
+- Neither has flag = Default behavior
+
+### Example Test
+
+```typescript
+// In tests-ui/tests/api.featureFlags.test.ts
+it('should handle preview metadata based on feature flag', () => {
+    // Mock server supports feature
+    api.serverFeatureFlags = { supports_preview_metadata: true }
+    
+    expect(api.serverSupportsFeature('supports_preview_metadata')).toBe(true)
+    
+    // Mock server doesn't support feature
+    api.serverFeatureFlags = {}
+    
+    expect(api.serverSupportsFeature('supports_preview_metadata')).toBe(false)
+})

docs/adr/0001-merge-litegraph-into-frontend.md

@@ -0,0 +1,65 @@
+# 1. Merge LiteGraph.js into ComfyUI Frontend
+
+Date: 2025-08-05
+
+## Status
+
+Accepted
+
+## Context
+
+ComfyUI's frontend architecture currently depends on a forked version of litegraph.js maintained as a separate package (@comfyorg/litegraph). This separation has created several architectural and operational challenges:
+
+**Architectural Issues:**
+- The current split creates a distributed monolith where both packages handle rendering, user interactions, and data models without clear separation of responsibilities
+- Both frontend and litegraph manipulate the same data structures, forcing tight coupling across the frontend's data model, views, and business logic
+- The lack of clear boundaries prevents implementation of modern architectural patterns like MVC or event-sourcing
+
+**Operational Issues:**
+- ComfyUI is the only known user of the @comfyorg/litegraph fork
+- Managing separate repositories significantly slows developer velocity due to coordination overhead
+- Version mismatches between frontend and litegraph cause recurring issues
+- No upstream contributions to consider (original litegraph.js is no longer maintained)
+
+**Future Requirements:**
+The following planned features are blocked by the current architecture:
+- Multiplayer collaboration requiring CRDT-based state management
+- Cloud-based backend support
+- Alternative rendering backends
+- Improved undo/redo system
+- Clear API versioning and compatibility layers
+
+## Decision
+
+We will merge litegraph.js directly into the ComfyUI frontend repository using git subtree to preserve the complete commit history.
+
+The merge will:
+1. Move litegraph source to `src/lib/litegraph/`
+2. Update all import paths from `@comfyorg/litegraph` to `@/lib/litegraph`
+3. Remove the npm dependency on `@comfyorg/litegraph`
+4. Preserve the full git history using subtree merge
+
+This integration is the first step toward restructuring the application along clear Model-View-Controller boundaries, with state mutations going through a single CRDT-mediated access point.
+
+## Consequences
+
+### Positive
+
+- **Enables architectural refactoring**: Direct integration allows restructuring along proper MVC boundaries
+- **Unblocks new features**: Multiplayer, cloud features, and improved undo/redo can now be implemented
+- **Faster development**: Eliminates overhead of coordinating changes across two tightly-coupled packages
+- **Better developer experience**: No more version mismatch issues or cross-repository debugging
+- **Simplified maintenance**: One less repository to maintain, release, and version
+
+### Negative
+
+- **Larger repository**: The frontend repository will increase in size
+- **Loss of versioning**: No more semantic versioning for litegraph changes
+- **Maintenance responsibility**: Must maintain litegraph code directly
+- **Historical references**: Past commit messages may reference issues from the original litegraph repository
+
+## Notes
+
+- Git subtree was chosen over submodules to provide a cleaner developer experience
+- The original litegraph repository will be archived after the merge
+- Future litegraph improvements will be made directly in the frontend repository

docs/adr/README.md

@@ -0,0 +1,79 @@
+# Architecture Decision Records
+
+This directory contains Architecture Decision Records (ADRs) for the ComfyUI Frontend project.
+
+## What is an ADR?
+
+An Architecture Decision Record captures an important architectural decision made along with its context and consequences. ADRs help future developers understand why certain decisions were made and provide a historical record of the project's evolution.
+
+## ADR Index
+
+| ADR | Title | Status | Date |
+|-----|-------|--------|------|
+| [0001](0001-merge-litegraph-into-frontend.md) | Merge LiteGraph.js into ComfyUI Frontend | Accepted | 2025-08-05 |
+
+## Creating a New ADR
+
+1. Copy the template below
+2. Name it with the next number in sequence: `NNNN-descriptive-title.md`
+3. Fill in all sections
+4. Update this index
+5. Submit as part of your PR
+
+## ADR Template
+
+```markdown
+# N. Title
+
+Date: YYYY-MM-DD
+
+## Status
+
+[Proposed | Accepted | Rejected | Deprecated | Superseded by [ADR-NNNN](NNNN-title.md)]
+
+## Context
+
+Describe the issue that motivated this decision and any context that influences or constrains the decision.
+
+- What is the problem?
+- Why does it need to be solved?
+- What forces are at play (technical, business, team)?
+
+## Decision
+
+Describe the decision that was made and the key points that led to it.
+
+- What are we going to do?
+- How will we do it?
+- What alternatives were considered?
+
+## Consequences
+
+### Positive
+
+- What becomes easier or better?
+- What opportunities does this create?
+
+### Negative
+
+- What becomes harder or worse?
+- What risks are we accepting?
+- What technical debt might we incur?
+
+## Notes
+
+Optional section for additional information, references, or clarifications.
+```
+
+## ADR Status Values
+
+- **Proposed**: The decision is being discussed
+- **Accepted**: The decision has been agreed upon
+- **Rejected**: The decision was not accepted
+- **Deprecated**: The decision is no longer relevant
+- **Superseded**: The decision has been replaced by another ADR
+
+## Further Reading
+
+- [Documenting Architecture Decisions](https://cognitect.com/blog/2011/11/15/documenting-architecture-decisions) by Michael Nygard
+- [Architecture Decision Records](https://adr.github.io/) - Collection of ADR resources

package-lock.json

@@ -1,18 +1,17 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.25.3",
+  "version": "1.26.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@comfyorg/comfyui-frontend",
-      "version": "1.25.3",
+      "version": "1.26.1",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
         "@comfyorg/comfyui-electron-types": "^0.4.43",
-        "@comfyorg/litegraph": "^0.16.20",
         "@primevue/forms": "^4.2.5",
         "@primevue/themes": "^4.2.5",
         "@sentry/vue": "^8.48.0",
@@ -976,12 +975,6 @@
       "integrity": "sha512-o6WFbYn9yAkGbkOwvhPF7pbKDvN0occZ21Tfyhya8CIsIqKpTHLft0aOqo4yhSh+kTxN16FYjsfrTH5Olk4WuA==",
       "license": "GPL-3.0-only"
     },
-    "node_modules/@comfyorg/litegraph": {
-      "version": "0.16.20",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.16.20.tgz",
-      "integrity": "sha512-8iUBhKYkr9qV6vWxC3C9Wea9K7iHwyDHxxN6OrhE9sySYfUA14XuNpVMaC8eVUaIm5KBOSmr/Q1J2XVHsHEISg==",
-      "license": "MIT"
-    },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.25.3",
+  "version": "1.26.1",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -78,7 +78,6 @@
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "^0.4.43",
-    "@comfyorg/litegraph": "^0.16.20",
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
     "@sentry/vue": "^8.48.0",

playwright.config.ts

@@ -49,6 +49,13 @@ export default defineConfig({
       grep: /@2x/ // Run all tests tagged with @2x
     },
 
+    {
+      name: 'chromium-0.5x',
+      use: { ...devices['Desktop Chrome'], deviceScaleFactor: 0.5 },
+      timeout: 15000,
+      grep: /@0.5x/ // Run all tests tagged with @0.5x
+    },
+
     // {
     //   name: 'firefox',
     //   use: { ...devices['Desktop Firefox'] },

scripts/prepare-types.js

@@ -16,9 +16,7 @@ const typesPackage = {
   homepage: mainPackage.homepage,
   description: `TypeScript definitions for ${mainPackage.name}`,
   license: mainPackage.license,
-  dependencies: {
-    '@comfyorg/litegraph': mainPackage.dependencies['@comfyorg/litegraph']
-  },
+  dependencies: {},
   peerDependencies: {
     vue: mainPackage.dependencies.vue,
     zod: mainPackage.dependencies.zod

src/CLAUDE.md

@@ -0,0 +1,57 @@
+# Source Code Guidelines
+
+## Service Layer
+
+### API Calls
+
+- Use `api.apiURL()` for backend endpoints
+- Use `api.fileURL()` for static files
+
+#### ✅ Correct Usage
+```typescript
+// Backend API call
+const response = await api.get(api.apiURL('/prompt'))
+
+// Static file
+const template = await fetch(api.fileURL('/templates/default.json'))
+```
+
+#### ❌ Incorrect Usage
+```typescript
+// WRONG - Direct URL construction
+const response = await fetch('/api/prompt')
+const template = await fetch('/templates/default.json')
+```
+
+### Error Handling
+
+- User-friendly and actionable messages
+- Proper error propagation
+
+### Security
+
+- Sanitize HTML with DOMPurify
+- Validate trusted sources
+- Never log secrets
+
+## State Management (Stores)
+
+### Store Design
+
+- Follow domain-driven design
+- Clear public interfaces
+- Restrict extension access
+
+### Best Practices
+
+- Use TypeScript for type safety
+- Implement proper error handling
+- Clean up subscriptions
+- Avoid @ts-expect-error
+
+## General Guidelines
+
+- Use lodash for utility functions
+- Implement proper TypeScript types
+- Follow Vue 3 composition API style guide
+- Use vue-i18n for ALL user-facing strings in `src/locales/en/main.json`

src/assets/icons/README.md

@@ -1,53 +1,148 @@
-# ComfyUI Custom Icons Guide
+# ComfyUI Icons Guide
 
-This guide explains how to add and use custom SVG icons in the ComfyUI frontend.
+ComfyUI supports three types of icons that can be used throughout the interface. All icons are automatically imported - no manual imports needed!
 
-## Overview
+## Quick Start - Code Examples
 
-ComfyUI uses a hybrid icon system that supports:
-- **PrimeIcons** - Legacy icon library (CSS classes like `pi pi-plus`)
-- **Iconify** - Modern icon system with 200,000+ icons
-- **Custom Icons** - Your own SVG icons
-
-Custom icons are powered by [unplugin-icons](https://github.com/unplugin/unplugin-icons) and integrate seamlessly with Vue's component system.
-
-## Quick Start
-
-### 1. Add Your SVG Icon
-
-Place your SVG file in the `custom/` directory:
-```
-src/assets/icons/custom/
-└── your-icon.svg
-```
-
-### 2. Use in Components
+### 1. PrimeIcons
 
 ```vue
 <template>
-  <!-- Use as a Vue component -->
-  <i-comfy:your-icon />
-  
-  <!-- In a PrimeVue button -->
-  <Button>
+  <!-- Basic usage -->
+  <i class="pi pi-plus" />
+  <i class="pi pi-cog" />
+  <i class="pi pi-check text-green-500" />
+
+  <!-- In PrimeVue components -->
+  <button icon="pi pi-save" label="Save" />
+  <button icon="pi pi-times" severity="danger" />
+</template>
+```
+
+[Browse all PrimeIcons →](https://primevue.org/icons/#list)
+
+### 2. Iconify Icons (Recommended)
+
+```vue
+<template>
+  <!-- Primary icon set: Lucide -->
+  <i-lucide:download />
+  <i-lucide:settings />
+  <i-lucide:workflow class="text-2xl" />
+
+  <!-- Other popular icon sets -->
+  <i-mdi:folder-open />
+  <!-- Material Design Icons -->
+  <i-heroicons:document-text />
+  <!-- Heroicons -->
+  <i-tabler:brand-github />
+  <!-- Tabler Icons -->
+  <i-carbon:cloud-upload />
+  <!-- Carbon Icons -->
+
+  <!-- With styling -->
+  <i-lucide:save class="w-6 h-6 text-blue-500" />
+</template>
+```
+
+[Browse 200,000+ icons →](https://icon-sets.iconify.design/)
+
+### 3. Custom Icons
+
+```vue
+<template>
+  <!-- Your custom SVG icons from src/assets/icons/custom/ -->
+  <i-comfy:workflow />
+  <i-comfy:node-tree />
+  <i-comfy:my-custom-icon class="text-xl" />
+
+  <!-- In PrimeVue button -->
+  <Button severity="secondary">
     <template #icon>
-      <i-comfy:your-icon />
+      <i-comfy:workflow />
     </template>
   </Button>
 </template>
 ```
 
-## SVG Requirements
+## Icon Usage Patterns
 
-### File Naming
-- Use kebab-case: `workflow-icon.svg`, `node-tree.svg`
-- Avoid special characters and spaces
-- The filename becomes the icon name
+### In Buttons
+
+```vue
+<template>
+  <!-- PrimeIcon in button (simple) -->
+  <Button icon="pi pi-check" label="Confirm" />
+
+  <!-- Iconify/Custom in button (template) -->
+  <Button>
+    <template #icon>
+      <i-lucide:save />
+    </template>
+    Save File
+  </Button>
+</template>
+```
+
+### Conditional Icons
+
+```vue
+<template>
+  <i-lucide:eye v-if="isVisible" />
+  <i-lucide:eye-off v-else />
+
+  <!-- Or with ternary -->
+  <component :is="isLocked ? 'i-lucide:lock' : 'i-lucide:lock-open'" />
+</template>
+```
+
+### With Tooltips
+
+```vue
+<template>
+  <i-lucide:info
+    v-tooltip="'Click for more information'"
+    class="cursor-pointer"
+  />
+</template>
+```
+
+## Using Iconify Icons
+
+### Finding Icons
+
+1. Visit [Iconify Icon Sets](https://icon-sets.iconify.design/)
+2. Search or browse collections
+3. Click on any icon to get its name
+4. Use with `i-[collection]:[icon-name]` format
+
+### Popular Collections
+
+- **Lucide** (`i-lucide:`) - Our primary icon set, clean and consistent
+- **Material Design Icons** (`i-mdi:`) - Comprehensive Material Design icons
+- **Heroicons** (`i-heroicons:`) - Beautiful hand-crafted SVG icons
+- **Tabler** (`i-tabler:`) - 3000+ free SVG icons
+- **Carbon** (`i-carbon:`) - IBM's design system icons
+
+## Adding Custom Icons
+
+### 1. Add Your SVG
+
+Place your SVG file in `src/assets/icons/custom/`:
+
+```
+src/assets/icons/custom/
+├── workflow-duplicate.svg
+├── node-preview.svg
+└── your-icon.svg
+```
+
+### 2. SVG Format Requirements
 
-### SVG Format
 ```xml
 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path d="..." />
+  <!-- Use currentColor for theme compatibility -->
+  <path fill="currentColor" d="..." />
 </svg>
 ```
 
@@ -57,59 +152,98 @@ src/assets/icons/custom/
 - Use `currentColor` for theme-aware icons
 - Keep SVGs optimized and simple
 
-### Color Theming
+### 3. Use Immediately
 
-For icons that adapt to the current theme, use `currentColor`:
+```vue
+<template>
+  <i-comfy:your-icon />
+</template>
+```
+
+No imports needed - icons are auto-discovered!
+
+## Icon Guidelines
+
+### Naming Conventions
+
+- **Files**: `kebab-case.svg` (workflow-icon.svg)
+- **Usage**: `<i-comfy:workflow-icon />`
+
+### Size & Styling
+
+```vue
+<template>
+  <!-- Size with Tailwind classes -->
+  <i-lucide:plus class="w-4 h-4" />
+  <!-- 16px -->
+  <i-lucide:plus class="w-6 h-6" />
+  <!-- 24px (default) -->
+  <i-lucide:plus class="w-8 h-8" />
+  <!-- 32px -->
+
+  <!-- Or text size -->
+  <i-lucide:plus class="text-sm" />
+  <i-lucide:plus class="text-2xl" />
+
+  <!-- Colors -->
+  <i-lucide:check class="text-green-500" />
+  <i-lucide:x class="text-red-500" />
+</template>
+```
+
+### Theme Compatibility
+
+Always use `currentColor` in SVGs for automatic theme adaptation:
 
 ```xml
-<!-- ✅ Good: Uses currentColor -->
+<!-- ✅ Good: Adapts to light/dark theme -->
 <svg viewBox="0 0 24 24">
-  <path stroke="currentColor" fill="none" d="..." />
+  <path fill="currentColor" d="..." />
 </svg>
 
-<!-- ❌ Bad: Hardcoded colors -->
+<!-- ❌ Bad: Fixed colors -->
 <svg viewBox="0 0 24 24">
-  <path stroke="white" fill="black" d="..." />
+  <path fill="#000000" d="..." />
 </svg>
 ```
 
-## Usage Examples
+## Migration Guide
+
+### From PrimeIcons to Iconify/Custom
 
-### Basic Icon
 ```vue
-<i-comfy:workflow />
+<template>
+  <!-- Before -->
+  <Button icon="pi pi-download" />
+
+  <!-- After -->
+  <Button>
+    <template #icon>
+      <i-lucide:download />
+    </template>
+  </Button>
+</template>
 ```
 
-### With Classes
-```vue
-<i-comfy:workflow class="text-2xl text-blue-500" />
-```
+### From Inline SVG to Custom Icon
 
-### In Buttons
 ```vue
-<Button severity="secondary" text>
-  <template #icon>
-    <i-comfy:workflow />
-  </template>
-</Button>
-```
+<template>
+  <!-- Before: Inline SVG -->
+  <svg class="w-6 h-6" viewBox="0 0 24 24">
+    <path d="..." />
+  </svg>
 
-### Conditional Icons
-```vue
-<template #icon>
-  <i-comfy:workflow v-if="isWorkflow" />
-  <i-comfy:node v-else />
+  <!-- After: Save as custom/my-icon.svg and use -->
+  <i-comfy:my-icon class="w-6 h-6" />
 </template>
 ```
 
 ## Technical Details
 
-### How It Works
+### Auto-Import System
 
-1. **unplugin-icons** automatically discovers SVG files in `custom/`
-2. During build, SVGs are converted to Vue components
-3. Components are tree-shaken - only used icons are bundled
-4. The `i-` prefix and `comfy:` namespace identify custom icons
+Icons are automatically imported using `unplugin-icons` - no manual imports needed! Just use the icon component directly.
 
 ### Configuration
 
@@ -119,17 +253,18 @@ The icon system is configured in `vite.config.mts`:
 Icons({
   compiler: 'vue3',
   customCollections: {
-    'comfy': FileSystemIconLoader('src/assets/icons/custom'),
+    comfy: FileSystemIconLoader('src/assets/icons/custom')
   }
 })
 ```
 
 ### TypeScript Support
 
-Icons are automatically typed. If TypeScript doesn't recognize a new icon:
-1. Restart your dev server
-2. Check that the SVG file is valid
-3. Ensure the filename follows kebab-case convention
+Icons are fully typed. If TypeScript doesn't recognize a new custom icon:
+
+1. Restart the dev server
+2. Ensure the SVG file is valid
+3. Check filename follows kebab-case
 
 ## Troubleshooting
 
@@ -157,22 +292,6 @@ Icons are automatically typed. If TypeScript doesn't recognize a new icon:
 4. **Theme support**: Always use `currentColor` for adaptable icons
 5. **Test both themes**: Verify icons look good in light and dark modes
 
-## Migration from PrimeIcons
-
-When replacing a PrimeIcon with a custom icon:
-
-```vue
-<!-- Before: PrimeIcon -->
-<Button icon="pi pi-box" />
-
-<!-- After: Custom icon -->
-<Button>
-  <template #icon>
-    <i-comfy:workflow />
-  </template>
-</Button>
-```
-
 ## Adding Icon Collections
 
 To add an entire icon set from npm:
@@ -181,4 +300,11 @@ To add an entire icon set from npm:
 2. Configure in `vite.config.mts`
 3. Use with the appropriate prefix
 
-See the [unplugin-icons documentation](https://github.com/unplugin/unplugin-icons) for details.
+See the [unplugin-icons documentation](https://github.com/unplugin/unplugin-icons) for details.
+
+## Resources
+
+- [PrimeIcons List](https://primevue.org/icons/#list)
+- [Iconify Icon Browser](https://icon-sets.iconify.design/)
+- [Lucide Icons](https://lucide.dev/icons/)
+- [unplugin-icons docs](https://github.com/unplugin/unplugin-icons)

src/components/CLAUDE.md

@@ -0,0 +1,45 @@
+# Component Guidelines
+
+## Vue 3 Composition API
+
+- Use setup() function
+- Destructure props (Vue 3.5 style)
+- Use ref/reactive for state
+- Implement computed() for derived state
+- Use provide/inject for dependency injection
+
+## Component Communication
+
+- Prefer `emit/@event-name` for state changes
+- Use `defineExpose` only for imperative operations (`form.validate()`, `modal.open()`)
+- Events promote loose coupling
+
+## UI Framework
+
+- Deprecated PrimeVue component replacements:
+  - Dropdown → Select
+  - OverlayPanel → Popover
+  - Calendar → DatePicker
+  - InputSwitch → ToggleSwitch
+  - Sidebar → Drawer
+  - Chips → AutoComplete with multiple enabled
+  - TabMenu → Tabs without panels
+  - Steps → Stepper without panels
+  - InlineMessage → Message
+
+## Styling
+
+- Use Tailwind CSS only (no custom CSS)
+- Dark theme: use "dark-theme:" prefix
+- For common operations, try to use existing VueUse composables that automatically handle effect scope
+  - Example: Use `useElementHover` instead of manually managing mouseover/mouseout event listeners
+  - Example: Use `useIntersectionObserver` for visibility detection instead of custom scroll handlers
+
+## Best Practices
+
+- Extract complex conditionals to computed
+- Implement cleanup for async operations
+- Use vue-i18n for ALL UI strings
+- Use lifecycle hooks: onMounted, onUpdated
+- Use Teleport/Suspense when needed
+- Proper props and emits definitions

src/components/bottomPanel/BottomPanel.vue

@@ -11,18 +11,33 @@
               class="p-3 border-none"
             >
               <span class="font-bold">
-                {{ tab.title.toUpperCase() }}
+                {{
+                  shouldCapitalizeTab(tab.id)
+                    ? tab.title.toUpperCase()
+                    : tab.title
+                }}
               </span>
             </Tab>
           </div>
-          <Button
-            class="justify-self-end"
-            icon="pi pi-times"
-            severity="secondary"
-            size="small"
-            text
-            @click="bottomPanelStore.bottomPanelVisible = false"
-          />
+          <div class="flex items-center gap-2">
+            <Button
+              v-if="isShortcutsTabActive"
+              :label="$t('shortcuts.manageShortcuts')"
+              icon="pi pi-cog"
+              severity="secondary"
+              size="small"
+              text
+              @click="openKeybindingSettings"
+            />
+            <Button
+              class="justify-self-end"
+              icon="pi pi-times"
+              severity="secondary"
+              size="small"
+              text
+              @click="closeBottomPanel"
+            />
+          </div>
         </div>
       </TabList>
     </Tabs>
@@ -44,9 +59,32 @@ import Button from 'primevue/button'
 import Tab from 'primevue/tab'
 import TabList from 'primevue/tablist'
 import Tabs from 'primevue/tabs'
+import { computed } from 'vue'
 
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
+import { useDialogService } from '@/services/dialogService'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 
 const bottomPanelStore = useBottomPanelStore()
+const dialogService = useDialogService()
+
+const isShortcutsTabActive = computed(() => {
+  const activeTabId = bottomPanelStore.activeBottomPanelTabId
+  return (
+    activeTabId === 'shortcuts-essentials' ||
+    activeTabId === 'shortcuts-view-controls'
+  )
+})
+
+const shouldCapitalizeTab = (tabId: string): boolean => {
+  return tabId !== 'shortcuts-essentials' && tabId !== 'shortcuts-view-controls'
+}
+
+const openKeybindingSettings = async () => {
+  dialogService.showSettingsDialog('keybinding')
+}
+
+const closeBottomPanel = () => {
+  bottomPanelStore.activePanel = null
+}
 </script>

src/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="h-full flex flex-col p-4">
+    <div class="flex-1 min-h-0 overflow-auto">
+      <ShortcutsList
+        :commands="essentialsCommands"
+        :subcategories="essentialsSubcategories"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import {
+  ESSENTIALS_CONFIG,
+  useCommandSubcategories
+} from '@/composables/bottomPanelTabs/useCommandSubcategories'
+import { useCommandStore } from '@/stores/commandStore'
+
+import ShortcutsList from './ShortcutsList.vue'
+
+const commandStore = useCommandStore()
+
+const essentialsCommands = computed(() =>
+  commandStore.commands.filter((cmd) => cmd.category === 'essentials')
+)
+
+const { subcategories: essentialsSubcategories } = useCommandSubcategories(
+  essentialsCommands,
+  ESSENTIALS_CONFIG
+)
+</script>

src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="shortcuts-list flex justify-center">
+    <div class="grid gap-4 md:gap-24 h-full grid-cols-1 md:grid-cols-3 w-[90%]">
+      <div
+        v-for="(subcategoryCommands, subcategory) in filteredSubcategories"
+        :key="subcategory"
+        class="flex flex-col"
+      >
+        <h3
+          class="subcategory-title text-xs font-bold uppercase tracking-wide text-surface-600 dark-theme:text-surface-400 mb-4"
+        >
+          {{ getSubcategoryTitle(subcategory) }}
+        </h3>
+
+        <div class="flex flex-col gap-1">
+          <div
+            v-for="command in subcategoryCommands"
+            :key="command.id"
+            class="shortcut-item flex justify-between items-center py-2 rounded hover:bg-surface-100 dark-theme:hover:bg-surface-700 transition-colors duration-200"
+          >
+            <div class="shortcut-info flex-grow pr-4">
+              <div class="shortcut-name text-sm font-medium">
+                {{ command.getTranslatedLabel() }}
+              </div>
+            </div>
+
+            <div class="keybinding-display flex-shrink-0">
+              <div
+                class="keybinding-combo flex gap-1"
+                :aria-label="`Keyboard shortcut: ${command.keybinding!.combo.getKeySequences().join(' + ')}`"
+              >
+                <span
+                  v-for="key in command.keybinding!.combo.getKeySequences()"
+                  :key="key"
+                  class="key-badge px-2 py-1 text-xs font-mono bg-surface-200 dark-theme:bg-surface-600 rounded border min-w-6 text-center"
+                >
+                  {{ formatKey(key) }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { ComfyCommandImpl } from '@/stores/commandStore'
+
+const { t } = useI18n()
+
+const { subcategories } = defineProps<{
+  commands: ComfyCommandImpl[]
+  subcategories: Record<string, ComfyCommandImpl[]>
+}>()
+
+const filteredSubcategories = computed(() => {
+  const result: Record<string, ComfyCommandImpl[]> = {}
+
+  for (const [subcategory, commands] of Object.entries(subcategories)) {
+    result[subcategory] = commands.filter((cmd) => !!cmd.keybinding)
+  }
+
+  return result
+})
+
+const getSubcategoryTitle = (subcategory: string): string => {
+  const titleMap: Record<string, string> = {
+    workflow: t('shortcuts.subcategories.workflow'),
+    node: t('shortcuts.subcategories.node'),
+    queue: t('shortcuts.subcategories.queue'),
+    view: t('shortcuts.subcategories.view'),
+    'panel-controls': t('shortcuts.subcategories.panelControls')
+  }
+
+  return titleMap[subcategory] || subcategory
+}
+
+const formatKey = (key: string): string => {
+  const keyMap: Record<string, string> = {
+    Control: 'Ctrl',
+    Meta: 'Cmd',
+    ArrowUp: '↑',
+    ArrowDown: '↓',
+    ArrowLeft: '←',
+    ArrowRight: '→',
+    Backspace: '⌫',
+    Delete: '⌦',
+    Enter: '↵',
+    Escape: 'Esc',
+    Tab: '⇥',
+    ' ': 'Space'
+  }
+
+  return keyMap[key] || key
+}
+</script>
+
+<style scoped>
+.subcategory-title {
+  color: var(--p-text-muted-color);
+}
+
+.key-badge {
+  background-color: var(--p-surface-200);
+  border: 1px solid var(--p-surface-300);
+  min-width: 1.5rem;
+  text-align: center;
+}
+
+.dark-theme .key-badge {
+  background-color: var(--p-surface-600);
+  border-color: var(--p-surface-500);
+}
+</style>

src/components/bottomPanel/tabs/shortcuts/ViewControlsPanel.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="h-full flex flex-col p-4">
+    <div class="flex-1 min-h-0 overflow-auto">
+      <ShortcutsList
+        :commands="viewControlsCommands"
+        :subcategories="viewControlsSubcategories"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import {
+  VIEW_CONTROLS_CONFIG,
+  useCommandSubcategories
+} from '@/composables/bottomPanelTabs/useCommandSubcategories'
+import { useCommandStore } from '@/stores/commandStore'
+
+import ShortcutsList from './ShortcutsList.vue'
+
+const commandStore = useCommandStore()
+
+const viewControlsCommands = computed(() =>
+  commandStore.commands.filter((cmd) => cmd.category === 'view-controls')
+)
+
+const { subcategories: viewControlsSubcategories } = useCommandSubcategories(
+  viewControlsCommands,
+  VIEW_CONTROLS_CONFIG
+)
+</script>

src/components/common/LazyImage.vue

@@ -0,0 +1,124 @@
+<template>
+  <div
+    ref="containerRef"
+    class="relative overflow-hidden w-full h-full flex items-center justify-center"
+  >
+    <Skeleton
+      v-if="!isImageLoaded"
+      width="100%"
+      height="100%"
+      class="absolute inset-0"
+    />
+    <img
+      v-show="isImageLoaded"
+      ref="imageRef"
+      :src="cachedSrc"
+      :alt="alt"
+      draggable="false"
+      :class="imageClass"
+      :style="imageStyle"
+      @load="onImageLoad"
+      @error="onImageError"
+    />
+    <div
+      v-if="hasError"
+      class="absolute inset-0 flex items-center justify-center bg-surface-50 dark-theme:bg-surface-800 text-muted"
+    >
+      <i class="pi pi-image text-2xl" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Skeleton from 'primevue/skeleton'
+import { computed, onUnmounted, ref, watch } from 'vue'
+
+import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
+import { useMediaCache } from '@/services/mediaCacheService'
+
+const {
+  src,
+  alt = '',
+  imageClass = '',
+  imageStyle,
+  rootMargin = '300px'
+} = defineProps<{
+  src: string
+  alt?: string
+  imageClass?: string | string[] | Record<string, boolean>
+  imageStyle?: Record<string, any>
+  rootMargin?: string
+}>()
+
+const containerRef = ref<HTMLElement | null>(null)
+const imageRef = ref<HTMLImageElement | null>(null)
+const isIntersecting = ref(false)
+const isImageLoaded = ref(false)
+const hasError = ref(false)
+const cachedSrc = ref<string | undefined>(undefined)
+
+const { getCachedMedia, acquireUrl, releaseUrl } = useMediaCache()
+
+// Use intersection observer to detect when the image container comes into view
+useIntersectionObserver(
+  containerRef,
+  (entries) => {
+    const entry = entries[0]
+    isIntersecting.value = entry?.isIntersecting ?? false
+  },
+  {
+    rootMargin,
+    threshold: 0.1
+  }
+)
+
+// Only start loading the image when it's in view
+const shouldLoad = computed(() => isIntersecting.value)
+
+watch(
+  shouldLoad,
+  async (shouldLoad) => {
+    if (shouldLoad && src && !cachedSrc.value && !hasError.value) {
+      try {
+        const cachedMedia = await getCachedMedia(src)
+        if (cachedMedia.error) {
+          hasError.value = true
+        } else if (cachedMedia.objectUrl) {
+          const acquiredUrl = acquireUrl(src)
+          cachedSrc.value = acquiredUrl || cachedMedia.objectUrl
+        } else {
+          cachedSrc.value = src
+        }
+      } catch (error) {
+        console.warn('Failed to load cached media:', error)
+        cachedSrc.value = src
+      }
+    } else if (!shouldLoad) {
+      if (cachedSrc.value?.startsWith('blob:')) {
+        releaseUrl(src)
+      }
+      // Hide image when out of view
+      isImageLoaded.value = false
+      cachedSrc.value = undefined
+      hasError.value = false
+    }
+  },
+  { immediate: true }
+)
+
+const onImageLoad = () => {
+  isImageLoaded.value = true
+  hasError.value = false
+}
+
+const onImageError = () => {
+  hasError.value = true
+  isImageLoaded.value = false
+}
+
+onUnmounted(() => {
+  if (cachedSrc.value?.startsWith('blob:')) {
+    releaseUrl(src)
+  }
+})
+</script>

src/components/dialog/content/MissingCoreNodesMessage.vue

@@ -42,11 +42,11 @@
 </template>
 
 <script setup lang="ts">
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { whenever } from '@vueuse/core'
 import Message from 'primevue/message'
 import { computed, ref } from 'vue'
 
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import { compareVersions } from '@/utils/formatUtil'
 

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -139,7 +139,6 @@ import Message from 'primevue/message'
 import Tag from 'primevue/tag'
 import { useToast } from 'primevue/usetoast'
 import { computed, ref, watchEffect } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import SearchBox from '@/components/common/SearchBox.vue'
 import { useKeybindingService } from '@/services/keybindingService'
@@ -149,7 +148,6 @@ import {
   KeybindingImpl,
   useKeybindingStore
 } from '@/stores/keybindingStore'
-import { normalizeI18nKey } from '@/utils/formatUtil'
 
 import PanelTemplate from './PanelTemplate.vue'
 import KeyComboDisplay from './keybinding/KeyComboDisplay.vue'
@@ -161,7 +159,6 @@ const filters = ref({
 const keybindingStore = useKeybindingStore()
 const keybindingService = useKeybindingService()
 const commandStore = useCommandStore()
-const { t } = useI18n()
 
 interface ICommandData {
   id: string
@@ -173,10 +170,7 @@ interface ICommandData {
 const commandsData = computed<ICommandData[]>(() => {
   return Object.values(commandStore.commands).map((command) => ({
     id: command.id,
-    label: t(
-      `commands.${normalizeI18nKey(command.id)}.label`,
-      command.label ?? ''
-    ),
+    label: command.getTranslatedLabel(),
     keybinding: keybindingStore.getKeybindingByCommandId(command.id),
     source: command.source
   }))

src/components/graph/GraphCanvas.vue

@@ -49,7 +49,6 @@
 </template>
 
 <script setup lang="ts">
-import type { LGraphNode } from '@comfyorg/litegraph'
 import { useEventListener, whenever } from '@vueuse/core'
 import { computed, onMounted, ref, watch, watchEffect } from 'vue'
 
@@ -78,6 +77,7 @@ import { useWorkflowAutoSave } from '@/composables/useWorkflowAutoSave'
 import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
 import { i18n, t } from '@/i18n'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { UnauthorizedError, api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'

src/components/graph/GraphCanvasMenu.vue

@@ -58,7 +58,7 @@
       @click="() => commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')"
     />
     <Button
-      v-tooltip.left="t('graphCanvasMenu.toggleMinimap') + ' (Alt + m)'"
+      v-tooltip.left="minimapTooltip"
       severity="secondary"
       :icon="'pi pi-map'"
       :aria-label="$t('graphCanvasMenu.toggleMinimap')"
@@ -70,24 +70,33 @@
 </template>
 
 <script setup lang="ts">
-import { LiteGraph } from '@comfyorg/litegraph'
 import Button from 'primevue/button'
 import ButtonGroup from 'primevue/buttongroup'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
+import { useKeybindingStore } from '@/stores/keybindingStore'
 import { useSettingStore } from '@/stores/settingStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
+const keybindingStore = useKeybindingStore()
 const settingStore = useSettingStore()
 const canvasInteractions = useCanvasInteractions()
 
 const minimapVisible = computed(() => settingStore.get('Comfy.Minimap.Visible'))
+const minimapTooltip = computed(() => {
+  const baseText = t('graphCanvasMenu.toggleMinimap')
+  const keybinding = keybindingStore.getKeybindingByCommandId(
+    'Comfy.Canvas.ToggleMinimap'
+  )
+  return keybinding ? `${baseText} (${keybinding.combo.toString()})` : baseText
+})
 const linkHidden = computed(
   () => settingStore.get('Comfy.LinkRenderMode') === LiteGraph.HIDDEN_LINK
 )

src/components/graph/MiniMap.vue

@@ -2,12 +2,16 @@
   <div
     v-if="visible && initialized"
     ref="containerRef"
-    class="litegraph-minimap absolute bottom-[20px] right-[90px] z-[1000]"
+    class="litegraph-minimap absolute right-[90px] z-[1000]"
+    :class="{
+      'bottom-[20px]': !bottomPanelStore.bottomPanelVisible,
+      'bottom-[280px]': bottomPanelStore.bottomPanelVisible
+    }"
     :style="containerStyles"
-    @mousedown="handleMouseDown"
-    @mousemove="handleMouseMove"
-    @mouseup="handleMouseUp"
-    @mouseleave="handleMouseUp"
+    @pointerdown="handlePointerDown"
+    @pointermove="handlePointerMove"
+    @pointerup="handlePointerUp"
+    @pointerleave="handlePointerUp"
     @wheel="handleWheel"
   >
     <canvas
@@ -25,9 +29,11 @@ import { onMounted, onUnmounted, watch } from 'vue'
 
 import { useMinimap } from '@/composables/useMinimap'
 import { useCanvasStore } from '@/stores/graphStore'
+import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 
 const minimap = useMinimap()
 const canvasStore = useCanvasStore()
+const bottomPanelStore = useBottomPanelStore()
 
 const {
   initialized,
@@ -40,9 +46,9 @@ const {
   height,
   init,
   destroy,
-  handleMouseDown,
-  handleMouseMove,
-  handleMouseUp,
+  handlePointerDown,
+  handlePointerMove,
+  handlePointerUp,
   handleWheel
 } = minimap
 

src/components/graph/NodeTooltip.vue

@@ -10,15 +10,15 @@
 </template>
 
 <script setup lang="ts">
-import {
-  LiteGraph,
-  isOverNodeInput,
-  isOverNodeOutput
-} from '@comfyorg/litegraph'
 import { useEventListener } from '@vueuse/core'
 import { nextTick, ref } from 'vue'
 
 import { st } from '@/i18n'
+import {
+  LiteGraph,
+  isOverNodeInput,
+  isOverNodeOutput
+} from '@/lib/litegraph/src/litegraph'
 import { app as comfyApp } from '@/scripts/app'
 import { isDOMWidget } from '@/scripts/domWidget'
 import { useNodeDefStore } from '@/stores/nodeDefStore'

src/components/graph/SelectionOverlay.vue

@@ -13,13 +13,14 @@
 </template>
 
 <script setup lang="ts">
-import { createBounds } from '@comfyorg/litegraph'
 import { whenever } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { provide, readonly, ref, watch } from 'vue'
 
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
 import { useAbsolutePosition } from '@/composables/element/useAbsolutePosition'
+import { createBounds } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/stores/graphStore'
+import { SelectionOverlayInjectionKey } from '@/types/selectionOverlayTypes'
 
 const canvasStore = useCanvasStore()
 const { style, updatePosition } = useAbsolutePosition()
@@ -27,6 +28,13 @@ const { getSelectableItems } = useSelectedLiteGraphItems()
 
 const visible = ref(false)
 const showBorder = ref(false)
+// Increment counter to notify child components of position/visibility change
+// This does not include viewport changes.
+const overlayUpdateCount = ref(0)
+provide(SelectionOverlayInjectionKey, {
+  visible: readonly(visible),
+  updateCount: readonly(overlayUpdateCount)
+})
 
 const positionSelectionOverlay = () => {
   const selectableItems = getSelectableItems()
@@ -52,6 +60,7 @@ whenever(
   () => {
     requestAnimationFrame(() => {
       positionSelectionOverlay()
+      overlayUpdateCount.value++
       canvasStore.getCanvas().state.selectionChanged = false
     })
   },
@@ -71,6 +80,7 @@ watch(
       requestAnimationFrame(() => {
         visible.value = true
         positionSelectionOverlay()
+        overlayUpdateCount.value++
       })
     } else {
       // Selection change update to visible state is delayed by a frame. Here
@@ -78,6 +88,7 @@ watch(
       // the initial selection and dragging happens at the same time.
       requestAnimationFrame(() => {
         visible.value = false
+        overlayUpdateCount.value++
       })
     }
   }

src/components/graph/SelectionToolbox.vue

@@ -1,6 +1,7 @@
 <template>
   <Panel
     class="selection-toolbox absolute left-1/2 rounded-lg"
+    :class="{ 'animate-slide-up': shouldAnimate }"
     :pt="{
       header: 'hidden',
       content: 'p-0 flex flex-row'
@@ -15,7 +16,7 @@
     <MaskEditorButton />
     <ConvertToSubgraphButton />
     <DeleteButton />
-    <RefreshButton />
+    <RefreshSelectionButton />
     <ExtensionCommandButton
       v-for="command in extensionToolboxCommands"
       :key="command.id"
@@ -27,7 +28,7 @@
 
 <script setup lang="ts">
 import Panel from 'primevue/panel'
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 
 import BypassButton from '@/components/graph/selectionToolbox/BypassButton.vue'
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
@@ -39,17 +40,25 @@ import ExtensionCommandButton from '@/components/graph/selectionToolbox/Extensio
 import HelpButton from '@/components/graph/selectionToolbox/HelpButton.vue'
 import MaskEditorButton from '@/components/graph/selectionToolbox/MaskEditorButton.vue'
 import PinButton from '@/components/graph/selectionToolbox/PinButton.vue'
-import RefreshButton from '@/components/graph/selectionToolbox/RefreshButton.vue'
+import RefreshSelectionButton from '@/components/graph/selectionToolbox/RefreshSelectionButton.vue'
+import { useRetriggerableAnimation } from '@/composables/element/useRetriggerableAnimation'
 import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useExtensionService } from '@/services/extensionService'
 import { type ComfyCommandImpl, useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
+import { SelectionOverlayInjectionKey } from '@/types/selectionOverlayTypes'
 
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const extensionService = useExtensionService()
 const canvasInteractions = useCanvasInteractions()
 
+const selectionOverlayState = inject(SelectionOverlayInjectionKey)
+const { shouldAnimate } = useRetriggerableAnimation(
+  selectionOverlayState?.updateCount,
+  { animateOnMount: true }
+)
+
 const extensionToolboxCommands = computed<ComfyCommandImpl[]>(() => {
   const commandIds = new Set<string>(
     canvasStore.selectedItems
@@ -71,4 +80,20 @@ const extensionToolboxCommands = computed<ComfyCommandImpl[]>(() => {
 .selection-toolbox {
   transform: translateX(-50%) translateY(-120%);
 }
+
+/* Slide up animation using CSS animation */
+@keyframes slideUp {
+  from {
+    transform: translateX(-50%) translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(-50%) translateY(-120%);
+    opacity: 1;
+  }
+}
+
+.animate-slide-up {
+  animation: slideUp 0.3s ease-out;
+}
 </style>

src/components/graph/TitleEditor.vue

@@ -13,13 +13,17 @@
 </template>
 
 <script setup lang="ts">
-import { LGraphGroup, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
-import type { LiteGraphCanvasEvent } from '@comfyorg/litegraph'
 import { useEventListener } from '@vueuse/core'
 import { type CSSProperties, computed, ref, watch } from 'vue'
 
 import EditableText from '@/components/common/EditableText.vue'
 import { useAbsolutePosition } from '@/composables/element/useAbsolutePosition'
+import {
+  LGraphGroup,
+  LGraphNode,
+  LiteGraph
+} from '@/lib/litegraph/src/litegraph'
+import type { LiteGraphCanvasEvent } from '@/lib/litegraph/src/litegraph'
 import { app } from '@/scripts/app'
 import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
 import { useSettingStore } from '@/stores/settingStore'

src/components/graph/selectionToolbox/ColorPickerButton.spec.ts

@@ -11,8 +11,8 @@ import { useCanvasStore } from '@/stores/graphStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
 
 // Mock the litegraph module
-vi.mock('@comfyorg/litegraph', async () => {
-  const actual = await vi.importActual('@comfyorg/litegraph')
+vi.mock('@/lib/litegraph/src/litegraph', async () => {
+  const actual = await vi.importActual('@/lib/litegraph/src/litegraph')
   return {
     ...actual,
     LGraphCanvas: {

src/components/graph/selectionToolbox/ColorPickerButton.vue

@@ -44,13 +44,17 @@
 </template>
 
 <script setup lang="ts">
-import type { ColorOption as CanvasColorOption } from '@comfyorg/litegraph'
-import { LGraphCanvas, LiteGraph, isColorable } from '@comfyorg/litegraph'
 import Button from 'primevue/button'
 import SelectButton from 'primevue/selectbutton'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import type { ColorOption as CanvasColorOption } from '@/lib/litegraph/src/litegraph'
+import {
+  LGraphCanvas,
+  LiteGraph,
+  isColorable
+} from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'

src/components/graph/selectionToolbox/ExecuteButton.vue

@@ -19,11 +19,11 @@
 </template>
 
 <script setup lang="ts">
-import type { LGraphNode } from '@comfyorg/litegraph'
 import Button from 'primevue/button'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { isLGraphNode } from '@/utils/litegraphUtil'

src/components/graph/widgets/TextPreviewWidget.vue

@@ -12,10 +12,10 @@
 </template>
 
 <script setup lang="ts">
-import { NodeId } from '@comfyorg/litegraph'
 import Skeleton from 'primevue/skeleton'
 import { computed, onMounted, ref, watch } from 'vue'
 
+import { NodeId } from '@/lib/litegraph/src/litegraph'
 import { useExecutionStore } from '@/stores/executionStore'
 import { linkifyHtml, nl2br } from '@/utils/formatUtil'
 

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -188,16 +188,13 @@ const showVersionUpdates = computed(() =>
   settingStore.get('Comfy.Notification.ShowVersionUpdates')
 )
 
-const moreMenuItem = computed(() =>
-  menuItems.value.find((item) => item.key === 'more')
-)
-
-const menuItems = computed<MenuItem[]>(() => {
-  const moreItems: MenuItem[] = [
+const moreItems = computed<MenuItem[]>(() => {
+  const allMoreItems: MenuItem[] = [
     {
       key: 'desktop-guide',
       type: 'item',
       label: t('helpCenter.desktopUserGuide'),
+      visible: isElectron(),
       action: () => {
         openExternalLink(EXTERNAL_LINKS.DESKTOP_GUIDE)
         emit('close')
@@ -230,6 +227,19 @@ const menuItems = computed<MenuItem[]>(() => {
     }
   ]
 
+  // Filter for visible items only
+  return allMoreItems.filter((item) => item.visible !== false)
+})
+
+const hasVisibleMoreItems = computed(() => {
+  return !!moreItems.value.length
+})
+
+const moreMenuItem = computed(() =>
+  menuItems.value.find((item) => item.key === 'more')
+)
+
+const menuItems = computed<MenuItem[]>(() => {
   return [
     {
       key: 'docs',
@@ -276,8 +286,9 @@ const menuItems = computed<MenuItem[]>(() => {
       type: 'item',
       icon: '',
       label: t('helpCenter.more'),
+      visible: hasVisibleMoreItems.value,
       action: () => {}, // No action for more item
-      items: moreItems
+      items: moreItems.value
     }
   ]
 })

src/components/load3d/Load3DScene.vue

@@ -5,7 +5,6 @@
 </template>
 
 <script setup lang="ts">
-import { LGraphNode } from '@comfyorg/litegraph'
 import { onMounted, onUnmounted, ref, toRaw, watch } from 'vue'
 
 import LoadingOverlay from '@/components/load3d/LoadingOverlay.vue'
@@ -17,6 +16,7 @@ import {
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useLoad3dService } from '@/services/load3dService'
 

src/components/load3d/controls/RecordingControls.vue

@@ -75,11 +75,11 @@
 </template>
 
 <script setup lang="ts">
-import { LGraphNode } from '@comfyorg/litegraph'
 import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
 
 import { t } from '@/i18n'
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useLoad3dService } from '@/services/load3dService'
 
 const vTooltip = Tooltip

src/components/node/NodePreview.spec.ts

@@ -1,11 +1,12 @@
 import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
-import { beforeAll, describe, expect, it } from 'vitest'
+import { beforeAll, describe, expect, it, vi } from 'vitest'
 import { createApp } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import * as markdownRendererUtil from '@/utils/markdownRendererUtil'
 
 import NodePreview from './NodePreview.vue'
 
@@ -129,4 +130,164 @@ describe('NodePreview', () => {
 
     expect(headdot.classes()).toContain('pr-3')
   })
+
+  describe('Description Rendering', () => {
+    it('renders plain text description as HTML', () => {
+      const plainTextNodeDef: ComfyNodeDefV2 = {
+        ...mockNodeDef,
+        description: 'This is a plain text description'
+      }
+
+      const wrapper = mountComponent(plainTextNodeDef)
+      const description = wrapper.find('._sb_description')
+
+      expect(description.exists()).toBe(true)
+      expect(description.html()).toContain('This is a plain text description')
+    })
+
+    it('renders markdown description with formatting', () => {
+      const markdownNodeDef: ComfyNodeDefV2 = {
+        ...mockNodeDef,
+        description: '**Bold text** and *italic text* with `code`'
+      }
+
+      const wrapper = mountComponent(markdownNodeDef)
+      const description = wrapper.find('._sb_description')
+
+      expect(description.exists()).toBe(true)
+      expect(description.html()).toContain('<strong>Bold text</strong>')
+      expect(description.html()).toContain('<em>italic text</em>')
+      expect(description.html()).toContain('<code>code</code>')
+    })
+
+    it('does not render description element when description is empty', () => {
+      const noDescriptionNodeDef: ComfyNodeDefV2 = {
+        ...mockNodeDef,
+        description: ''
+      }
+
+      const wrapper = mountComponent(noDescriptionNodeDef)
+      const description = wrapper.find('._sb_description')
+
+      expect(description.exists()).toBe(false)
+    })
+
+    it('does not render description element when description is undefined', () => {
+      const { description, ...nodeDefWithoutDescription } = mockNodeDef
+      const wrapper = mountComponent(
+        nodeDefWithoutDescription as ComfyNodeDefV2
+      )
+      const descriptionElement = wrapper.find('._sb_description')
+
+      expect(descriptionElement.exists()).toBe(false)
+    })
+
+    it('calls renderMarkdownToHtml utility function', () => {
+      const spy = vi.spyOn(markdownRendererUtil, 'renderMarkdownToHtml')
+      const testDescription = 'Test **markdown** description'
+
+      const nodeDefWithDescription: ComfyNodeDefV2 = {
+        ...mockNodeDef,
+        description: testDescription
+      }
+
+      mountComponent(nodeDefWithDescription)
+
+      expect(spy).toHaveBeenCalledWith(testDescription)
+      spy.mockRestore()
+    })
+
+    it('handles potentially unsafe markdown content safely', () => {
+      const unsafeNodeDef: ComfyNodeDefV2 = {
+        ...mockNodeDef,
+        description:
+          'Safe **markdown** content <script>alert("xss")</script> with `code` blocks'
+      }
+
+      const wrapper = mountComponent(unsafeNodeDef)
+      const description = wrapper.find('._sb_description')
+
+      // The description should still exist because there's safe content
+      if (description.exists()) {
+        // Should not contain script tags (sanitized by DOMPurify)
+        expect(description.html()).not.toContain('<script>')
+        expect(description.html()).not.toContain('alert("xss")')
+        // Should contain the safe markdown content rendered as HTML
+        expect(description.html()).toContain('<strong>markdown</strong>')
+        expect(description.html()).toContain('<code>code</code>')
+      } else {
+        // If DOMPurify removes everything, that's also acceptable for security
+        expect(description.exists()).toBe(false)
+      }
+    })
+
+    it('handles markdown with line breaks', () => {
+      const multilineNodeDef: ComfyNodeDefV2 = {
+        ...mockNodeDef,
+        description: 'Line 1\n\nLine 3 after empty line'
+      }
+
+      const wrapper = mountComponent(multilineNodeDef)
+      const description = wrapper.find('._sb_description')
+
+      expect(description.exists()).toBe(true)
+      // Should contain paragraph tags for proper line break handling
+      expect(description.html()).toContain('<p>')
+    })
+
+    it('handles markdown lists', () => {
+      const listNodeDef: ComfyNodeDefV2 = {
+        ...mockNodeDef,
+        description: '- Item 1\n- Item 2\n- Item 3'
+      }
+
+      const wrapper = mountComponent(listNodeDef)
+      const description = wrapper.find('._sb_description')
+
+      expect(description.exists()).toBe(true)
+      expect(description.html()).toContain('<ul>')
+      expect(description.html()).toContain('<li>')
+    })
+
+    it('applies correct styling classes to description', () => {
+      const wrapper = mountComponent()
+      const description = wrapper.find('._sb_description')
+
+      expect(description.classes()).toContain('_sb_description')
+    })
+
+    it('uses v-html directive for rendered content', () => {
+      const htmlNodeDef: ComfyNodeDefV2 = {
+        ...mockNodeDef,
+        description: 'Content with **bold** text'
+      }
+
+      const wrapper = mountComponent(htmlNodeDef)
+      const description = wrapper.find('._sb_description')
+
+      // The component should render the HTML, not escape it
+      expect(description.html()).toContain('<strong>bold</strong>')
+      expect(description.html()).not.toContain('&lt;strong&gt;')
+    })
+
+    it('prevents XSS attacks by sanitizing dangerous HTML elements', () => {
+      const maliciousNodeDef: ComfyNodeDefV2 = {
+        ...mockNodeDef,
+        description:
+          'Normal text <img src="x" onerror="alert(\'XSS\')" /> and **bold** text'
+      }
+
+      const wrapper = mountComponent(maliciousNodeDef)
+      const description = wrapper.find('._sb_description')
+
+      if (description.exists()) {
+        // Should not contain dangerous event handlers
+        expect(description.html()).not.toContain('onerror')
+        expect(description.html()).not.toContain('alert(')
+        // Should still contain safe markdown content
+        expect(description.html()).toContain('<strong>bold</strong>')
+        // May or may not contain img tag depending on DOMPurify config
+      }
+    })
+  })
 })

src/components/node/NodePreview.vue

@@ -70,15 +70,14 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
       </div>
     </div>
     <div
-      v-if="nodeDef.description"
+      v-if="renderedDescription"
       class="_sb_description"
       :style="{
         color: litegraphColors.WIDGET_SECONDARY_TEXT_COLOR,
         backgroundColor: litegraphColors.WIDGET_BGCOLOR
       }"
-    >
-      {{ nodeDef.description }}
-    </div>
+      v-html="renderedDescription"
+    />
   </div>
 </template>
 
@@ -89,8 +88,9 @@ import { computed } from 'vue'
 import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useWidgetStore } from '@/stores/widgetStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
 
-const props = defineProps<{
+const { nodeDef } = defineProps<{
   nodeDef: ComfyNodeDefV2
 }>()
 
@@ -101,7 +101,12 @@ const litegraphColors = computed(
 
 const widgetStore = useWidgetStore()
 
-const nodeDef = props.nodeDef
+const { description } = nodeDef
+const renderedDescription = computed(() => {
+  if (!description) return ''
+  return renderMarkdownToHtml(description)
+})
+
 const allInputDefs = Object.values(nodeDef.inputs)
 const allOutputDefs = nodeDef.outputs
 const slotInputDefs = allInputDefs.filter(

src/components/searchbox/CommandSearchItem.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="flex items-center gap-3 px-3 py-2 w-full">
+    <span
+      class="flex-shrink-0 w-5 text-center text-muted item-icon"
+      :class="command.icon ?? 'pi pi-chevron-right'"
+    />
+
+    <span
+      class="flex-grow overflow-hidden text-ellipsis whitespace-nowrap item-label"
+    >
+      <span
+        v-html="highlightQuery(command.getTranslatedLabel(), currentQuery)"
+      />
+    </span>
+
+    <span
+      v-if="command.keybinding"
+      class="flex-shrink-0 text-xs px-1.5 py-0.5 border rounded font-mono keybinding-badge"
+    >
+      {{ command.keybinding.combo.toString() }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ComfyCommandImpl } from '@/stores/commandStore'
+import { highlightQuery } from '@/utils/formatUtil'
+
+const { command, currentQuery } = defineProps<{
+  command: ComfyCommandImpl
+  currentQuery: string
+}>()
+</script>
+
+<style scoped>
+:deep(.highlight) {
+  background-color: var(--p-primary-color);
+  color: var(--p-primary-contrast-color);
+  font-weight: bold;
+  border-radius: 0.25rem;
+  padding: 0 0.125rem;
+  margin: -0.125rem 0.125rem;
+}
+
+.keybinding-badge {
+  border-color: var(--p-content-border-color);
+  background-color: var(--p-content-hover-background);
+  color: var(--p-text-muted-color);
+}
+</style>

src/components/searchbox/NodeSearchBox.vue

@@ -3,7 +3,7 @@
     class="comfy-vue-node-search-container flex justify-center items-center w-full min-w-96"
   >
     <div
-      v-if="enableNodePreview"
+      v-if="enableNodePreview && !isCommandMode"
       class="comfy-vue-node-preview-container absolute left-[-350px] top-[50px]"
     >
       <NodePreview
@@ -14,6 +14,7 @@
     </div>
 
     <Button
+      v-if="!isCommandMode"
       icon="pi pi-filter"
       severity="secondary"
       class="filter-button z-10"
@@ -49,13 +50,24 @@
       auto-option-focus
       force-selection
       multiple
-      :option-label="'display_name'"
+      :option-label="getOptionLabel"
       @complete="search($event.query)"
-      @option-select="emit('addNode', $event.value)"
+      @option-select="onOptionSelect($event.value)"
       @focused-option-changed="setHoverSuggestion($event)"
+      @input="handleInput"
     >
       <template #option="{ option }">
-        <NodeSearchItem :node-def="option" :current-query="currentQuery" />
+        <!-- Command search item, Remove the '>' prefix from the query -->
+        <CommandSearchItem
+          v-if="isCommandMode"
+          :command="option"
+          :current-query="currentQuery.substring(1)"
+        />
+        <NodeSearchItem
+          v-else
+          :node-def="option"
+          :current-query="currentQuery"
+        />
       </template>
       <!-- FilterAndValue -->
       <template #chip="{ value }">
@@ -80,13 +92,16 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import NodePreview from '@/components/node/NodePreview.vue'
 import AutoCompletePlus from '@/components/primevueOverride/AutoCompletePlus.vue'
+import CommandSearchItem from '@/components/searchbox/CommandSearchItem.vue'
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import NodeSearchItem from '@/components/searchbox/NodeSearchItem.vue'
+import { CommandSearchService } from '@/services/commandSearchService'
+import { type ComfyCommandImpl, useCommandStore } from '@/stores/commandStore'
 import {
   ComfyNodeDefImpl,
   useNodeDefStore,
@@ -99,6 +114,7 @@ import SearchFilterChip from '../common/SearchFilterChip.vue'
 
 const settingStore = useSettingStore()
 const { t } = useI18n()
+const commandStore = useCommandStore()
 
 const enableNodePreview = computed(() =>
   settingStore.get('Comfy.NodeSearchBoxImpl.NodePreview')
@@ -111,18 +127,50 @@ const { filters, searchLimit = 64 } = defineProps<{
 
 const nodeSearchFilterVisible = ref(false)
 const inputId = `comfy-vue-node-search-box-input-${Math.random()}`
-const suggestions = ref<ComfyNodeDefImpl[]>([])
+const suggestions = ref<ComfyNodeDefImpl[] | ComfyCommandImpl[]>([])
 const hoveredSuggestion = ref<ComfyNodeDefImpl | null>(null)
 const currentQuery = ref('')
+const isCommandMode = ref(false)
+
+// Initialize command search service
+const commandSearchService = ref<CommandSearchService | null>(null)
+
 const placeholder = computed(() => {
+  if (isCommandMode.value) {
+    return t('g.searchCommands', 'Search commands') + '...'
+  }
   return filters.length === 0 ? t('g.searchNodes') + '...' : ''
 })
 
 const nodeDefStore = useNodeDefStore()
 const nodeFrequencyStore = useNodeFrequencyStore()
+
+// Initialize command search service with commands
+watch(
+  () => commandStore.commands,
+  (commands) => {
+    commandSearchService.value = new CommandSearchService(commands)
+  },
+  { immediate: true }
+)
+
 const search = (query: string) => {
-  const queryIsEmpty = query === '' && filters.length === 0
   currentQuery.value = query
+
+  // Check if we're in command mode (query starts with ">")
+  if (query.startsWith('>')) {
+    isCommandMode.value = true
+    if (commandSearchService.value) {
+      suggestions.value = commandSearchService.value.searchCommands(query, {
+        limit: searchLimit
+      })
+    }
+    return
+  }
+
+  // Normal node search mode
+  isCommandMode.value = false
+  const queryIsEmpty = query === '' && filters.length === 0
   suggestions.value = queryIsEmpty
     ? nodeFrequencyStore.topNodeDefs
     : [
@@ -132,7 +180,18 @@ const search = (query: string) => {
       ]
 }
 
-const emit = defineEmits(['addFilter', 'removeFilter', 'addNode'])
+const emit = defineEmits<{
+  (
+    e: 'addFilter',
+    filterAndValue: FuseFilterWithValue<ComfyNodeDefImpl, string>
+  ): void
+  (
+    e: 'removeFilter',
+    filterAndValue: FuseFilterWithValue<ComfyNodeDefImpl, string>
+  ): void
+  (e: 'addNode', nodeDef: ComfyNodeDefImpl): void
+  (e: 'executeCommand', command: ComfyCommandImpl): void
+}>()
 
 let inputElement: HTMLInputElement | null = null
 const reFocusInput = async () => {
@@ -160,11 +219,47 @@ const onRemoveFilter = async (
   await reFocusInput()
 }
 const setHoverSuggestion = (index: number) => {
-  if (index === -1) {
+  if (index === -1 || isCommandMode.value) {
     hoveredSuggestion.value = null
     return
   }
-  const value = suggestions.value[index]
+  const value = suggestions.value[index] as ComfyNodeDefImpl
   hoveredSuggestion.value = value
 }
+
+const onOptionSelect = (option: ComfyNodeDefImpl | ComfyCommandImpl) => {
+  if (isCommandMode.value) {
+    emit('executeCommand', option as ComfyCommandImpl)
+  } else {
+    emit('addNode', option as ComfyNodeDefImpl)
+  }
+}
+
+const getOptionLabel = (
+  option: ComfyNodeDefImpl | ComfyCommandImpl
+): string => {
+  if ('display_name' in option) {
+    return option.display_name
+  }
+  return option.label || option.id
+}
+
+/**
+ * Handles direct input changes on the AutoCompletePlus component.
+ * This ensures search mode switching works properly when users clear the input
+ * or modify it directly, as the @complete event may not always trigger.
+ *
+ * @param event - The input event from the AutoCompletePlus component
+ * @note Known issue on empty input complete state:
+ * https://github.com/Comfy-Org/ComfyUI_frontend/issues/4887
+ */
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const inputValue = target.value
+
+  // Trigger search to handle mode switching between node and command search
+  if (inputValue === '') {
+    search('')
+  }
+}
 </script>

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -26,6 +26,7 @@
           @add-filter="addFilter"
           @remove-filter="removeFilter"
           @add-node="addNode"
+          @execute-command="executeCommand"
         />
       </template>
     </Dialog>
@@ -33,19 +34,20 @@
 </template>
 
 <script setup lang="ts">
-import {
-  LGraphNode,
-  LiteGraph,
-  LiteGraphCanvasEvent
-} from '@comfyorg/litegraph'
-import { Point } from '@comfyorg/litegraph/dist/interfaces'
-import type { CanvasPointerEvent } from '@comfyorg/litegraph/dist/types/events'
 import { useEventListener } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import Dialog from 'primevue/dialog'
 import { computed, ref, toRaw, watch, watchEffect } from 'vue'
 
+import { Point } from '@/lib/litegraph/src/interfaces'
+import {
+  LGraphNode,
+  LiteGraph,
+  LiteGraphCanvasEvent
+} from '@/lib/litegraph/src/litegraph'
+import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 import { useLitegraphService } from '@/services/litegraphService'
+import { type ComfyCommandImpl, useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
@@ -62,6 +64,7 @@ let disconnectOnReset = false
 
 const settingStore = useSettingStore()
 const litegraphService = useLitegraphService()
+const commandStore = useCommandStore()
 
 const { visible } = storeToRefs(useSearchBoxStore())
 const dismissable = ref(true)
@@ -109,6 +112,14 @@ const addNode = (nodeDef: ComfyNodeDefImpl) => {
   window.requestAnimationFrame(closeDialog)
 }
 
+const executeCommand = async (command: ComfyCommandImpl) => {
+  // Close the dialog immediately
+  closeDialog()
+
+  // Execute the command
+  await commandStore.execute(command.id)
+}
+
 const newSearchBoxEnabled = computed(
   () => settingStore.get('Comfy.NodeSearchBoxImpl') === 'default'
 )

src/components/sidebar/SideToolbar.vue

@@ -16,6 +16,7 @@
         <SidebarLogoutIcon v-if="userStore.isMultiUserServer" />
         <SidebarHelpCenterIcon />
         <SidebarBottomPanelToggleButton />
+        <SidebarShortcutsToggleButton />
       </div>
     </nav>
   </teleport>
@@ -32,6 +33,7 @@ import { computed } from 'vue'
 
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPanelToggleButton.vue'
+import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
 import { useKeybindingStore } from '@/stores/keybindingStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useUserStore } from '@/stores/userStore'

src/components/sidebar/SidebarBottomPanelToggleButton.vue

@@ -1,7 +1,7 @@
 <template>
   <SidebarIcon
     :tooltip="$t('menu.toggleBottomPanel')"
-    :selected="bottomPanelStore.bottomPanelVisible"
+    :selected="bottomPanelStore.activePanel == 'terminal'"
     @click="bottomPanelStore.toggleBottomPanel"
   >
     <template #icon>

src/components/sidebar/SidebarShortcutsToggleButton.vue

@@ -0,0 +1,44 @@
+<template>
+  <SidebarIcon
+    :tooltip="
+      $t('shortcuts.keyboardShortcuts') +
+      ' (' +
+      formatKeySequence(command.keybinding!.combo.getKeySequences()) +
+      ')'
+    "
+    :selected="isShortcutsPanelVisible"
+    @click="toggleShortcutsPanel"
+  >
+    <template #icon>
+      <i-lucide:keyboard />
+    </template>
+  </SidebarIcon>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useCommandStore } from '@/stores/commandStore'
+import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
+
+import SidebarIcon from './SidebarIcon.vue'
+
+const bottomPanelStore = useBottomPanelStore()
+const command = useCommandStore().getCommand(
+  'Workspace.ToggleBottomPanel.Shortcuts'
+)
+
+const isShortcutsPanelVisible = computed(
+  () => bottomPanelStore.activePanel === 'shortcuts'
+)
+
+const toggleShortcutsPanel = () => {
+  bottomPanelStore.togglePanel('shortcuts')
+}
+
+const formatKeySequence = (sequences: string[]): string => {
+  return sequences
+    .map((seq) => seq.replace(/Control/g, 'Ctrl').replace(/Shift/g, 'Shift'))
+    .join(' + ')
+}
+</script>

src/components/templates/TemplateSearchBar.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="relative w-full p-4">
+    <div class="h-12 flex items-center gap-4 justify-between">
+      <div class="flex-1 max-w-md">
+        <AutoComplete
+          v-model.lazy="searchQuery"
+          :placeholder="$t('templateWorkflows.searchPlaceholder')"
+          :complete-on-focus="false"
+          :delay="200"
+          class="w-full"
+          :pt="{
+            pcInputText: {
+              root: {
+                class: 'w-full rounded-2xl'
+              }
+            },
+            loader: {
+              style: 'display: none'
+            }
+          }"
+          :show-empty-message="false"
+          @complete="() => {}"
+        />
+      </div>
+    </div>
+
+    <div class="flex items-center gap-4 mt-2">
+      <small
+        v-if="searchQuery && filteredCount !== null"
+        class="text-color-secondary"
+      >
+        {{ $t('g.resultsCount', { count: filteredCount }) }}
+      </small>
+      <Button
+        v-if="searchQuery"
+        text
+        size="small"
+        icon="pi pi-times"
+        :label="$t('g.clearFilters')"
+        @click="clearFilters"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AutoComplete from 'primevue/autocomplete'
+import Button from 'primevue/button'
+
+const { filteredCount } = defineProps<{
+  filteredCount?: number | null
+}>()
+
+const searchQuery = defineModel<string>('searchQuery', { default: '' })
+
+const emit = defineEmits<{
+  clearFilters: []
+}>()
+
+const clearFilters = () => {
+  searchQuery.value = ''
+  emit('clearFilters')
+}
+</script>

src/components/templates/TemplateWorkflowCardSkeleton.vue

@@ -0,0 +1,30 @@
+<template>
+  <Card
+    class="w-64 template-card rounded-2xl overflow-hidden shadow-elevation-2 dark-theme:bg-dark-elevation-1.5 h-full"
+    :pt="{
+      body: { class: 'p-0 h-full flex flex-col' }
+    }"
+  >
+    <template #header>
+      <div class="flex items-center justify-center">
+        <div class="relative overflow-hidden rounded-t-lg">
+          <Skeleton width="16rem" height="12rem" />
+        </div>
+      </div>
+    </template>
+    <template #content>
+      <div class="flex items-center px-4 py-3">
+        <div class="flex-1 flex flex-col">
+          <Skeleton width="80%" height="1.25rem" class="mb-2" />
+          <Skeleton width="100%" height="0.875rem" class="mb-1" />
+          <Skeleton width="90%" height="0.875rem" />
+        </div>
+      </div>
+    </template>
+  </Card>
+</template>
+
+<script setup lang="ts">
+import Card from 'primevue/card'
+import Skeleton from 'primevue/skeleton'
+</script>

src/components/templates/TemplateWorkflowView.spec.ts

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
 
 import TemplateWorkflowView from '@/components/templates/TemplateWorkflowView.vue'
 import { TemplateInfo } from '@/types/workflowTemplateTypes'
@@ -53,10 +54,46 @@ vi.mock('@/components/templates/TemplateWorkflowList.vue', () => ({
   }
 }))
 
+vi.mock('@/components/templates/TemplateSearchBar.vue', () => ({
+  default: {
+    template: '<div class="mock-search-bar"></div>',
+    props: ['searchQuery', 'filteredCount'],
+    emits: ['update:searchQuery', 'clearFilters']
+  }
+}))
+
+vi.mock('@/components/templates/TemplateWorkflowCardSkeleton.vue', () => ({
+  default: {
+    template: '<div class="mock-skeleton"></div>'
+  }
+}))
+
 vi.mock('@vueuse/core', () => ({
   useLocalStorage: () => 'grid'
 }))
 
+vi.mock('@/composables/useIntersectionObserver', () => ({
+  useIntersectionObserver: vi.fn()
+}))
+
+vi.mock('@/composables/useLazyPagination', () => ({
+  useLazyPagination: (items: any) => ({
+    paginatedItems: items,
+    isLoading: { value: false },
+    hasMoreItems: { value: false },
+    loadNextPage: vi.fn(),
+    reset: vi.fn()
+  })
+}))
+
+vi.mock('@/composables/useTemplateFiltering', () => ({
+  useTemplateFiltering: (templates: any) => ({
+    searchQuery: { value: '' },
+    filteredTemplates: templates,
+    filteredCount: { value: templates.value?.length || 0 }
+  })
+}))
+
 describe('TemplateWorkflowView', () => {
   const createTemplate = (name: string): TemplateInfo => ({
     name,
@@ -67,6 +104,18 @@ describe('TemplateWorkflowView', () => {
   })
 
   const mountView = (props = {}) => {
+    const i18n = createI18n({
+      legacy: false,
+      locale: 'en',
+      messages: {
+        en: {
+          templateWorkflows: {
+            loadingMore: 'Loading more...'
+          }
+        }
+      }
+    })
+
     return mount(TemplateWorkflowView, {
       props: {
         title: 'Test Templates',
@@ -79,6 +128,9 @@ describe('TemplateWorkflowView', () => {
         ],
         loading: null,
         ...props
+      },
+      global: {
+        plugins: [i18n]
       }
     })
   }

src/components/templates/TemplateWorkflowView.vue

@@ -1,24 +1,31 @@
 <template>
   <DataView
-    :value="templates"
+    :value="displayTemplates"
     :layout="layout"
     data-key="name"
     :lazy="true"
-    pt:root="h-full grid grid-rows-[auto_1fr]"
+    pt:root="h-full grid grid-rows-[auto_1fr_auto]"
     pt:content="p-2 overflow-auto"
   >
     <template #header>
-      <div class="flex justify-between items-center">
-        <h2 class="text-lg">{{ title }}</h2>
-        <SelectButton
-          v-model="layout"
-          :options="['grid', 'list']"
-          :allow-empty="false"
-        >
-          <template #option="{ option }">
-            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
-          </template>
-        </SelectButton>
+      <div class="flex flex-col">
+        <div class="flex justify-between items-center mb-4">
+          <h2 class="text-lg">{{ title }}</h2>
+          <SelectButton
+            v-model="layout"
+            :options="['grid', 'list']"
+            :allow-empty="false"
+          >
+            <template #option="{ option }">
+              <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
+            </template>
+          </SelectButton>
+        </div>
+        <TemplateSearchBar
+          v-model:search-query="searchQuery"
+          :filtered-count="filteredCount"
+          @clear-filters="() => reset()"
+        />
       </div>
     </template>
 
@@ -33,18 +40,35 @@
     </template>
 
     <template #grid="{ items }">
-      <div
-        class="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-x-4 gap-y-8 px-4 justify-items-center"
-      >
-        <TemplateWorkflowCard
-          v-for="template in items"
-          :key="template.name"
-          :source-module="sourceModule"
-          :template="template"
-          :loading="loading === template.name"
-          :category-title="categoryTitle"
-          @load-workflow="onLoadWorkflow"
-        />
+      <div>
+        <div
+          class="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-x-4 gap-y-8 px-4 justify-items-center"
+        >
+          <TemplateWorkflowCard
+            v-for="template in items"
+            :key="template.name"
+            :source-module="sourceModule"
+            :template="template"
+            :loading="loading === template.name"
+            :category-title="categoryTitle"
+            @load-workflow="onLoadWorkflow"
+          />
+          <TemplateWorkflowCardSkeleton
+            v-for="n in shouldUsePagination && isLoadingMore
+              ? skeletonCount
+              : 0"
+            :key="`skeleton-${n}`"
+          />
+        </div>
+        <div
+          v-if="shouldUsePagination && hasMoreTemplates"
+          ref="loadTrigger"
+          class="w-full h-4 flex justify-center items-center"
+        >
+          <div v-if="isLoadingMore" class="text-sm text-muted">
+            {{ t('templateWorkflows.loadingMore') }}
+          </div>
+        </div>
       </div>
     </template>
   </DataView>
@@ -54,12 +78,21 @@
 import { useLocalStorage } from '@vueuse/core'
 import DataView from 'primevue/dataview'
 import SelectButton from 'primevue/selectbutton'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import TemplateSearchBar from '@/components/templates/TemplateSearchBar.vue'
 import TemplateWorkflowCard from '@/components/templates/TemplateWorkflowCard.vue'
+import TemplateWorkflowCardSkeleton from '@/components/templates/TemplateWorkflowCardSkeleton.vue'
 import TemplateWorkflowList from '@/components/templates/TemplateWorkflowList.vue'
+import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
+import { useLazyPagination } from '@/composables/useLazyPagination'
+import { useTemplateFiltering } from '@/composables/useTemplateFiltering'
 import type { TemplateInfo } from '@/types/workflowTemplateTypes'
 
-defineProps<{
+const { t } = useI18n()
+
+const { title, sourceModule, categoryTitle, loading, templates } = defineProps<{
   title: string
   sourceModule: string
   categoryTitle: string
@@ -72,6 +105,59 @@ const layout = useLocalStorage<'grid' | 'list'>(
   'grid'
 )
 
+const skeletonCount = 6
+const loadTrigger = ref<HTMLElement | null>(null)
+
+const templatesRef = computed(() => templates || [])
+
+const { searchQuery, filteredTemplates, filteredCount } =
+  useTemplateFiltering(templatesRef)
+
+// When searching, show all results immediately without pagination
+// When not searching, use lazy pagination
+const shouldUsePagination = computed(() => !searchQuery.value.trim())
+
+// Lazy pagination setup using filtered templates
+const {
+  paginatedItems: paginatedTemplates,
+  isLoading: isLoadingMore,
+  hasMoreItems: hasMoreTemplates,
+  loadNextPage,
+  reset
+} = useLazyPagination(filteredTemplates, {
+  itemsPerPage: 12
+})
+
+// Final templates to display
+const displayTemplates = computed(() => {
+  return shouldUsePagination.value
+    ? paginatedTemplates.value
+    : filteredTemplates.value
+})
+// Intersection observer for auto-loading (only when not searching)
+useIntersectionObserver(
+  loadTrigger,
+  (entries) => {
+    const entry = entries[0]
+    if (
+      entry?.isIntersecting &&
+      shouldUsePagination.value &&
+      hasMoreTemplates.value &&
+      !isLoadingMore.value
+    ) {
+      void loadNextPage()
+    }
+  },
+  {
+    rootMargin: '200px',
+    threshold: 0.1
+  }
+)
+
+watch([() => templates, searchQuery], () => {
+  reset()
+})
+
 const emit = defineEmits<{
   loadWorkflow: [name: string]
 }>()

src/components/templates/thumbnails/CompareSliderThumbnail.spec.ts

@@ -12,6 +12,15 @@ vi.mock('@/components/templates/thumbnails/BaseThumbnail.vue', () => ({
   }
 }))
 
+vi.mock('@/components/common/LazyImage.vue', () => ({
+  default: {
+    name: 'LazyImage',
+    template:
+      '<img :src="src" :alt="alt" :class="imageClass" :style="imageStyle" draggable="false" />',
+    props: ['src', 'alt', 'imageClass', 'imageStyle']
+  }
+}))
+
 vi.mock('@vueuse/core', () => ({
   useMouseInElement: () => ({
     elementX: ref(50),
@@ -35,23 +44,24 @@ describe('CompareSliderThumbnail', () => {
 
   it('renders both base and overlay images', () => {
     const wrapper = mountThumbnail()
-    const images = wrapper.findAll('img')
-    expect(images.length).toBe(2)
-    expect(images[0].attributes('src')).toBe('/base-image.jpg')
-    expect(images[1].attributes('src')).toBe('/overlay-image.jpg')
+    const lazyImages = wrapper.findAllComponents({ name: 'LazyImage' })
+    expect(lazyImages.length).toBe(2)
+    expect(lazyImages[0].props('src')).toBe('/base-image.jpg')
+    expect(lazyImages[1].props('src')).toBe('/overlay-image.jpg')
   })
 
   it('applies correct alt text to both images', () => {
     const wrapper = mountThumbnail({ alt: 'Custom Alt Text' })
-    const images = wrapper.findAll('img')
-    expect(images[0].attributes('alt')).toBe('Custom Alt Text')
-    expect(images[1].attributes('alt')).toBe('Custom Alt Text')
+    const lazyImages = wrapper.findAllComponents({ name: 'LazyImage' })
+    expect(lazyImages[0].props('alt')).toBe('Custom Alt Text')
+    expect(lazyImages[1].props('alt')).toBe('Custom Alt Text')
   })
 
   it('applies clip-path style to overlay image', () => {
     const wrapper = mountThumbnail()
-    const overlay = wrapper.findAll('img')[1]
-    expect(overlay.attributes('style')).toContain('clip-path')
+    const overlayLazyImage = wrapper.findAllComponents({ name: 'LazyImage' })[1]
+    const imageStyle = overlayLazyImage.props('imageStyle')
+    expect(imageStyle.clipPath).toContain('inset')
   })
 
   it('renders slider divider', () => {

src/components/templates/thumbnails/CompareSliderThumbnail.vue

@@ -1,24 +1,24 @@
 <template>
   <BaseThumbnail :is-hovered="isHovered">
-    <img
+    <LazyImage
       :src="baseImageSrc"
       :alt="alt"
-      :class="
+      :image-class="
         isVideoType
           ? 'w-full h-full object-cover'
           : 'max-w-full max-h-64 object-contain'
       "
     />
     <div ref="containerRef" class="absolute inset-0">
-      <img
+      <LazyImage
         :src="overlayImageSrc"
         :alt="alt"
-        :class="
+        :image-class="
           isVideoType
             ? 'w-full h-full object-cover'
             : 'max-w-full max-h-64 object-contain'
         "
-        :style="{
+        :image-style="{
           clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`
         }"
       />
@@ -36,6 +36,7 @@
 import { useMouseInElement } from '@vueuse/core'
 import { ref, watch } from 'vue'
 
+import LazyImage from '@/components/common/LazyImage.vue'
 import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
 
 const SLIDER_START_POSITION = 50

src/components/templates/thumbnails/DefaultThumbnail.spec.ts

@@ -11,6 +11,15 @@ vi.mock('@/components/templates/thumbnails/BaseThumbnail.vue', () => ({
   }
 }))
 
+vi.mock('@/components/common/LazyImage.vue', () => ({
+  default: {
+    name: 'LazyImage',
+    template:
+      '<img :src="src" :alt="alt" :class="imageClass" :style="imageStyle" draggable="false" />',
+    props: ['src', 'alt', 'imageClass', 'imageStyle']
+  }
+}))
+
 describe('DefaultThumbnail', () => {
   const mountThumbnail = (props = {}) => {
     return mount(DefaultThumbnail, {
@@ -25,9 +34,9 @@ describe('DefaultThumbnail', () => {
 
   it('renders image with correct src and alt', () => {
     const wrapper = mountThumbnail()
-    const img = wrapper.find('img')
-    expect(img.attributes('src')).toBe('/test-image.jpg')
-    expect(img.attributes('alt')).toBe('Test Image')
+    const lazyImage = wrapper.findComponent({ name: 'LazyImage' })
+    expect(lazyImage.props('src')).toBe('/test-image.jpg')
+    expect(lazyImage.props('alt')).toBe('Test Image')
   })
 
   it('applies scale transform when hovered', () => {
@@ -35,35 +44,43 @@ describe('DefaultThumbnail', () => {
       isHovered: true,
       hoverZoom: 10
     })
-    const img = wrapper.find('img')
-    expect(img.attributes('style')).toContain('scale(1.1)')
+    const lazyImage = wrapper.findComponent({ name: 'LazyImage' })
+    expect(lazyImage.props('imageStyle')).toEqual({ transform: 'scale(1.1)' })
   })
 
   it('does not apply scale transform when not hovered', () => {
     const wrapper = mountThumbnail({
       isHovered: false
     })
-    const img = wrapper.find('img')
-    expect(img.attributes('style')).toBeUndefined()
+    const lazyImage = wrapper.findComponent({ name: 'LazyImage' })
+    expect(lazyImage.props('imageStyle')).toBeUndefined()
   })
 
   it('applies video styling for video type', () => {
     const wrapper = mountThumbnail({
       isVideo: true
     })
-    const img = wrapper.find('img')
-    expect(img.classes()).toContain('w-full')
-    expect(img.classes()).toContain('h-full')
-    expect(img.classes()).toContain('object-cover')
+    const lazyImage = wrapper.findComponent({ name: 'LazyImage' })
+    const imageClass = lazyImage.props('imageClass')
+    const classString = Array.isArray(imageClass)
+      ? imageClass.join(' ')
+      : imageClass
+    expect(classString).toContain('w-full')
+    expect(classString).toContain('h-full')
+    expect(classString).toContain('object-cover')
   })
 
   it('applies image styling for non-video type', () => {
     const wrapper = mountThumbnail({
       isVideo: false
     })
-    const img = wrapper.find('img')
-    expect(img.classes()).toContain('max-w-full')
-    expect(img.classes()).toContain('object-contain')
+    const lazyImage = wrapper.findComponent({ name: 'LazyImage' })
+    const imageClass = lazyImage.props('imageClass')
+    const classString = Array.isArray(imageClass)
+      ? imageClass.join(' ')
+      : imageClass
+    expect(classString).toContain('max-w-full')
+    expect(classString).toContain('object-contain')
   })
 
   it('applies correct styling for webp images', () => {
@@ -71,8 +88,12 @@ describe('DefaultThumbnail', () => {
       src: '/test-video.webp',
       isVideo: true
     })
-    const img = wrapper.find('img')
-    expect(img.classes()).toContain('object-cover')
+    const lazyImage = wrapper.findComponent({ name: 'LazyImage' })
+    const imageClass = lazyImage.props('imageClass')
+    const classString = Array.isArray(imageClass)
+      ? imageClass.join(' ')
+      : imageClass
+    expect(classString).toContain('object-cover')
   })
 
   it('image is not draggable', () => {
@@ -83,11 +104,15 @@ describe('DefaultThumbnail', () => {
 
   it('applies transition classes', () => {
     const wrapper = mountThumbnail()
-    const img = wrapper.find('img')
-    expect(img.classes()).toContain('transform-gpu')
-    expect(img.classes()).toContain('transition-transform')
-    expect(img.classes()).toContain('duration-300')
-    expect(img.classes()).toContain('ease-out')
+    const lazyImage = wrapper.findComponent({ name: 'LazyImage' })
+    const imageClass = lazyImage.props('imageClass')
+    const classString = Array.isArray(imageClass)
+      ? imageClass.join(' ')
+      : imageClass
+    expect(classString).toContain('transform-gpu')
+    expect(classString).toContain('transition-transform')
+    expect(classString).toContain('duration-300')
+    expect(classString).toContain('ease-out')
   })
 
   it('passes correct props to BaseThumbnail', () => {

src/components/templates/thumbnails/DefaultThumbnail.vue

@@ -1,25 +1,23 @@
 <template>
   <BaseThumbnail :hover-zoom="hoverZoom" :is-hovered="isHovered">
-    <div class="overflow-hidden w-full h-full flex items-center justify-center">
-      <img
-        :src="src"
-        :alt="alt"
-        draggable="false"
-        :class="[
-          'transform-gpu transition-transform duration-300 ease-out',
-          isVideoType
-            ? 'w-full h-full object-cover'
-            : 'max-w-full max-h-64 object-contain'
-        ]"
-        :style="
-          isHovered ? { transform: `scale(${1 + hoverZoom / 100})` } : undefined
-        "
-      />
-    </div>
+    <LazyImage
+      :src="src"
+      :alt="alt"
+      :image-class="[
+        'transform-gpu transition-transform duration-300 ease-out',
+        isVideoType
+          ? 'w-full h-full object-cover'
+          : 'max-w-full max-h-64 object-contain'
+      ]"
+      :image-style="
+        isHovered ? { transform: `scale(${1 + hoverZoom / 100})` } : undefined
+      "
+    />
   </BaseThumbnail>
 </template>
 
 <script setup lang="ts">
+import LazyImage from '@/components/common/LazyImage.vue'
 import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
 
 const { src, isVideo } = defineProps<{

src/components/templates/thumbnails/HoverDissolveThumbnail.spec.ts

@@ -11,6 +11,15 @@ vi.mock('@/components/templates/thumbnails/BaseThumbnail.vue', () => ({
   }
 }))
 
+vi.mock('@/components/common/LazyImage.vue', () => ({
+  default: {
+    name: 'LazyImage',
+    template:
+      '<img :src="src" :alt="alt" :class="imageClass" :style="imageStyle" draggable="false" />',
+    props: ['src', 'alt', 'imageClass', 'imageStyle']
+  }
+}))
+
 describe('HoverDissolveThumbnail', () => {
   const mountThumbnail = (props = {}) => {
     return mount(HoverDissolveThumbnail, {
@@ -27,31 +36,39 @@ describe('HoverDissolveThumbnail', () => {
 
   it('renders both base and overlay images', () => {
     const wrapper = mountThumbnail()
-    const images = wrapper.findAll('img')
-    expect(images.length).toBe(2)
-    expect(images[0].attributes('src')).toBe('/base-image.jpg')
-    expect(images[1].attributes('src')).toBe('/overlay-image.jpg')
+    const lazyImages = wrapper.findAllComponents({ name: 'LazyImage' })
+    expect(lazyImages.length).toBe(2)
+    expect(lazyImages[0].props('src')).toBe('/base-image.jpg')
+    expect(lazyImages[1].props('src')).toBe('/overlay-image.jpg')
   })
 
   it('applies correct alt text to both images', () => {
     const wrapper = mountThumbnail({ alt: 'Custom Alt Text' })
-    const images = wrapper.findAll('img')
-    expect(images[0].attributes('alt')).toBe('Custom Alt Text')
-    expect(images[1].attributes('alt')).toBe('Custom Alt Text')
+    const lazyImages = wrapper.findAllComponents({ name: 'LazyImage' })
+    expect(lazyImages[0].props('alt')).toBe('Custom Alt Text')
+    expect(lazyImages[1].props('alt')).toBe('Custom Alt Text')
   })
 
   it('makes overlay image visible when hovered', () => {
     const wrapper = mountThumbnail({ isHovered: true })
-    const overlayImage = wrapper.findAll('img')[1]
-    expect(overlayImage.classes()).toContain('opacity-100')
-    expect(overlayImage.classes()).not.toContain('opacity-0')
+    const overlayLazyImage = wrapper.findAllComponents({ name: 'LazyImage' })[1]
+    const imageClass = overlayLazyImage.props('imageClass')
+    const classString = Array.isArray(imageClass)
+      ? imageClass.join(' ')
+      : imageClass
+    expect(classString).toContain('opacity-100')
+    expect(classString).not.toContain('opacity-0')
   })
 
   it('makes overlay image hidden when not hovered', () => {
     const wrapper = mountThumbnail({ isHovered: false })
-    const overlayImage = wrapper.findAll('img')[1]
-    expect(overlayImage.classes()).toContain('opacity-0')
-    expect(overlayImage.classes()).not.toContain('opacity-100')
+    const overlayLazyImage = wrapper.findAllComponents({ name: 'LazyImage' })[1]
+    const imageClass = overlayLazyImage.props('imageClass')
+    const classString = Array.isArray(imageClass)
+      ? imageClass.join(' ')
+      : imageClass
+    expect(classString).toContain('opacity-0')
+    expect(classString).not.toContain('opacity-100')
   })
 
   it('passes isHovered prop to BaseThumbnail', () => {
@@ -62,21 +79,33 @@ describe('HoverDissolveThumbnail', () => {
 
   it('applies transition classes to overlay image', () => {
     const wrapper = mountThumbnail()
-    const overlayImage = wrapper.findAll('img')[1]
-    expect(overlayImage.classes()).toContain('transition-opacity')
-    expect(overlayImage.classes()).toContain('duration-300')
+    const overlayLazyImage = wrapper.findAllComponents({ name: 'LazyImage' })[1]
+    const imageClass = overlayLazyImage.props('imageClass')
+    const classString = Array.isArray(imageClass)
+      ? imageClass.join(' ')
+      : imageClass
+    expect(classString).toContain('transition-opacity')
+    expect(classString).toContain('duration-300')
   })
 
   it('applies correct positioning to both images', () => {
     const wrapper = mountThumbnail()
-    const images = wrapper.findAll('img')
+    const lazyImages = wrapper.findAllComponents({ name: 'LazyImage' })
 
     // Check base image
-    expect(images[0].classes()).toContain('absolute')
-    expect(images[0].classes()).toContain('inset-0')
+    const baseImageClass = lazyImages[0].props('imageClass')
+    const baseClassString = Array.isArray(baseImageClass)
+      ? baseImageClass.join(' ')
+      : baseImageClass
+    expect(baseClassString).toContain('absolute')
+    expect(baseClassString).toContain('inset-0')
 
     // Check overlay image
-    expect(images[1].classes()).toContain('absolute')
-    expect(images[1].classes()).toContain('inset-0')
+    const overlayImageClass = lazyImages[1].props('imageClass')
+    const overlayClassString = Array.isArray(overlayImageClass)
+      ? overlayImageClass.join(' ')
+      : overlayImageClass
+    expect(overlayClassString).toContain('absolute')
+    expect(overlayClassString).toContain('inset-0')
   })
 })

src/components/templates/thumbnails/HoverDissolveThumbnail.vue

@@ -1,37 +1,23 @@
 <template>
   <BaseThumbnail :is-hovered="isHovered">
     <div class="relative w-full h-full">
-      <img
-        :src="baseImageSrc"
-        :alt="alt"
-        draggable="false"
-        class="absolute inset-0"
-        :class="
-          isVideoType
-            ? 'w-full h-full object-cover'
-            : 'max-w-full max-h-64 object-contain'
-        "
-      />
-      <img
+      <LazyImage :src="baseImageSrc" :alt="alt" :image-class="baseImageClass" />
+      <LazyImage
         :src="overlayImageSrc"
         :alt="alt"
-        draggable="false"
-        class="absolute inset-0 transition-opacity duration-300"
-        :class="[
-          isVideoType
-            ? 'w-full h-full object-cover'
-            : 'max-w-full max-h-64 object-contain',
-          { 'opacity-100': isHovered, 'opacity-0': !isHovered }
-        ]"
+        :image-class="overlayImageClass"
       />
     </div>
   </BaseThumbnail>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+
+import LazyImage from '@/components/common/LazyImage.vue'
 import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
 
-const { baseImageSrc, overlayImageSrc, isVideo } = defineProps<{
+const { baseImageSrc, overlayImageSrc, isVideo, isHovered } = defineProps<{
   baseImageSrc: string
   overlayImageSrc: string
   alt: string
@@ -44,4 +30,17 @@ const isVideoType =
   baseImageSrc?.toLowerCase().endsWith('.webp') ||
   overlayImageSrc?.toLowerCase().endsWith('.webp') ||
   false
+
+const baseImageClass = computed(() => {
+  return `absolute inset-0 ${isVideoType ? 'w-full h-full object-cover' : 'max-w-full max-h-64 object-contain'}`
+})
+
+const overlayImageClass = computed(() => {
+  const baseClasses = 'absolute inset-0 transition-opacity duration-300'
+  const sizeClasses = isVideoType
+    ? 'w-full h-full object-cover'
+    : 'max-w-full max-h-64 object-contain'
+  const opacityClasses = isHovered ? 'opacity-100' : 'opacity-0'
+  return `${baseClasses} ${sizeClasses} ${opacityClasses}`
+})
 </script>

src/components/topbar/WorkflowTab.vue

@@ -1,13 +1,13 @@
 <template>
-  <div ref="workflowTabRef" class="flex p-2 gap-2 workflow-tab" v-bind="$attrs">
-    <span
-      v-tooltip.bottom="{
-        value: workflowOption.workflow.key,
-        class: 'workflow-tab-tooltip',
-        showDelay: 512
-      }"
-      class="workflow-label text-sm max-w-[150px] min-w-[30px] truncate inline-block"
-    >
+  <div
+    ref="workflowTabRef"
+    class="flex p-2 gap-2 workflow-tab"
+    v-bind="$attrs"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @click="handleClick"
+  >
+    <span class="workflow-label text-sm max-w-[150px] truncate inline-block">
       {{ workflowOption.workflow.filename }}
     </span>
     <div class="relative">
@@ -22,23 +22,33 @@
       />
     </div>
   </div>
+
+  <WorkflowTabPopover
+    ref="popoverRef"
+    :workflow-filename="workflowOption.workflow.filename"
+    :thumbnail-url="thumbnailUrl"
+    :is-active-tab="isActiveTab"
+  />
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { computed, ref } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import {
   usePragmaticDraggable,
   usePragmaticDroppable
 } from '@/composables/usePragmaticDragAndDrop'
+import { useWorkflowThumbnail } from '@/composables/useWorkflowThumbnail'
 import { useWorkflowService } from '@/services/workflowService'
 import { useSettingStore } from '@/stores/settingStore'
 import { ComfyWorkflow } from '@/stores/workflowStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
+import WorkflowTabPopover from './WorkflowTabPopover.vue'
+
 interface WorkflowOption {
   value: string
   workflow: ComfyWorkflow
@@ -55,6 +65,8 @@ const workspaceStore = useWorkspaceStore()
 const workflowStore = useWorkflowStore()
 const settingStore = useSettingStore()
 const workflowTabRef = ref<HTMLElement | null>(null)
+const popoverRef = ref<InstanceType<typeof WorkflowTabPopover> | null>(null)
+const workflowThumbnail = useWorkflowThumbnail()
 
 // Use computed refs to cache autosave settings
 const autoSaveSetting = computed(() =>
@@ -90,6 +102,27 @@ const shouldShowStatusIndicator = computed(() => {
   return false
 })
 
+const isActiveTab = computed(() => {
+  return workflowStore.activeWorkflow?.key === props.workflowOption.workflow.key
+})
+
+const thumbnailUrl = computed(() => {
+  return workflowThumbnail.getThumbnail(props.workflowOption.workflow.key)
+})
+
+// Event handlers that delegate to the popover component
+const handleMouseEnter = (event: Event) => {
+  popoverRef.value?.showPopover(event)
+}
+
+const handleMouseLeave = () => {
+  popoverRef.value?.hidePopover()
+}
+
+const handleClick = (event: Event) => {
+  popoverRef.value?.togglePopover(event)
+}
+
 const closeWorkflows = async (options: WorkflowOption[]) => {
   for (const opt of options) {
     if (
@@ -135,6 +168,10 @@ usePragmaticDroppable(tabGetter, {
     }
   }
 })
+
+onUnmounted(() => {
+  popoverRef.value?.hidePopover()
+})
 </script>
 
 <style scoped>

src/components/topbar/WorkflowTabPopover.vue

@@ -0,0 +1,229 @@
+<template>
+  <div
+    ref="positionRef"
+    class="absolute left-1/2 -translate-x-1/2"
+    :class="positions.positioner"
+  ></div>
+  <Popover
+    ref="popoverRef"
+    append-to="body"
+    :pt="{
+      root: {
+        class: 'workflow-popover-fade fit-content ' + positions.root,
+        'data-popover-id': id,
+        style: {
+          transform: positions.active
+        }
+      }
+    }"
+    @mouseenter="cancelHidePopover"
+    @mouseleave="hidePopover"
+  >
+    <div class="workflow-preview-content">
+      <div
+        v-if="thumbnailUrl && !isActiveTab"
+        class="workflow-preview-thumbnail relative"
+      >
+        <img
+          :src="thumbnailUrl"
+          class="block h-[200px] object-cover rounded-lg p-2"
+          :style="{ width: `${POPOVER_WIDTH}px` }"
+        />
+      </div>
+      <div class="workflow-preview-footer">
+        <span class="workflow-preview-name">{{ workflowFilename }}</span>
+      </div>
+    </div>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import Popover from 'primevue/popover'
+import { computed, nextTick, ref, toRefs, useId } from 'vue'
+
+import { useSettingStore } from '@/stores/settingStore'
+
+const POPOVER_WIDTH = 250
+
+interface Props {
+  workflowFilename: string
+  thumbnailUrl?: string
+  isActiveTab: boolean
+}
+
+const props = defineProps<Props>()
+const { thumbnailUrl, isActiveTab } = toRefs(props)
+
+const settingStore = useSettingStore()
+const positions = computed<{
+  positioner: string
+  root?: string
+  active?: string
+}>(() => {
+  if (
+    settingStore.get('Comfy.Workflow.WorkflowTabsPosition') === 'Topbar' &&
+    settingStore.get('Comfy.UseNewMenu') === 'Bottom'
+  ) {
+    return {
+      positioner: 'top-0',
+      root: 'p-popover-flipped',
+      active: isActiveTab.value ? 'translateY(-100%)' : undefined
+    }
+  }
+
+  return {
+    positioner: 'bottom-0'
+  }
+})
+
+const popoverRef = ref<InstanceType<typeof Popover> | null>(null)
+const positionRef = ref<HTMLElement | null>(null)
+let hideTimeout: ReturnType<typeof setTimeout> | null = null
+let showTimeout: ReturnType<typeof setTimeout> | null = null
+const id = useId()
+
+const showPopover = (event: Event) => {
+  // Clear any existing timeouts
+  if (hideTimeout) {
+    clearTimeout(hideTimeout)
+    hideTimeout = null
+  }
+  if (showTimeout) {
+    clearTimeout(showTimeout)
+    showTimeout = null
+  }
+
+  // Show popover after a short delay
+  showTimeout = setTimeout(async () => {
+    if (popoverRef.value && positionRef.value) {
+      popoverRef.value.show(event, positionRef.value)
+      await nextTick()
+      // PrimeVue has a bug where when the tabs are scrolled, it positions the element incorrectly
+      // Manually set the position to the middle of the tab and prevent it from going off the left/right edge
+      const el = document.querySelector(
+        `.workflow-popover-fade[data-popover-id="${id}"]`
+      ) as HTMLElement
+      if (el) {
+        const middle = positionRef.value!.getBoundingClientRect().left
+        const popoverWidth = el.getBoundingClientRect().width
+        const halfWidth = popoverWidth / 2
+        let pos = middle - halfWidth
+        let shift = 0
+
+        // Calculate shift when clamping is needed
+        if (pos < 0) {
+          shift = pos - 8 // Negative shift to move arrow left
+          pos = 8
+        } else if (pos + popoverWidth > window.innerWidth) {
+          const newPos = window.innerWidth - popoverWidth - 16
+          shift = pos - newPos // Positive shift to move arrow right
+          pos = newPos
+        }
+
+        if (shift + halfWidth < 0) {
+          shift = -halfWidth + 24
+        }
+
+        el.style.left = `${pos}px`
+        el.style.setProperty('--shift', `${shift}px`)
+      }
+    }
+  }, 200) // 200ms delay before showing
+}
+
+const cancelHidePopover = () => {
+  // Temporarily disable this functionality until we need the popover to be interactive:
+  /*
+  if (hideTimeout) {
+    clearTimeout(hideTimeout)
+    hideTimeout = null
+  }
+  */
+}
+
+const hidePopover = () => {
+  // Clear show timeout if mouse leaves before popover appears
+  if (showTimeout) {
+    clearTimeout(showTimeout)
+    showTimeout = null
+  }
+
+  hideTimeout = setTimeout(() => {
+    if (popoverRef.value) {
+      popoverRef.value.hide()
+    }
+  }, 100) // Minimal delay to allow moving to popover
+}
+
+const togglePopover = (event: Event) => {
+  if (popoverRef.value) {
+    popoverRef.value.toggle(event)
+  }
+}
+
+defineExpose({
+  showPopover,
+  hidePopover,
+  togglePopover
+})
+</script>
+
+<style scoped>
+.workflow-preview-content {
+  @apply flex flex-col rounded-xl overflow-hidden;
+  max-width: var(--popover-width);
+  background-color: var(--comfy-menu-secondary-bg);
+  color: var(--fg-color);
+}
+
+.workflow-preview-thumbnail {
+  @apply relative p-2;
+}
+
+.workflow-preview-thumbnail img {
+  @apply shadow-md;
+  background-color: color-mix(
+    in srgb,
+    var(--comfy-menu-secondary-bg) 70%,
+    black
+  );
+}
+
+.dark-theme .workflow-preview-thumbnail img {
+  @apply shadow-lg;
+}
+
+.workflow-preview-footer {
+  @apply pt-1 pb-2 px-3;
+}
+
+.workflow-preview-name {
+  @apply block text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap;
+  color: var(--fg-color);
+}
+</style>
+
+<style>
+.workflow-popover-fade {
+  --p-popover-background: transparent;
+  --p-popover-content-padding: 0;
+  @apply bg-transparent rounded-xl shadow-lg;
+  transition: opacity 0.15s ease-out !important;
+}
+
+.workflow-popover-fade.p-popover-flipped {
+  @apply -translate-y-full;
+}
+
+.dark-theme .workflow-popover-fade {
+  @apply shadow-2xl;
+}
+
+.workflow-popover-fade.p-popover:after,
+.workflow-popover-fade.p-popover:before {
+  --p-popover-border-color: var(--comfy-menu-secondary-bg);
+  left: 50%;
+  transform: translateX(calc(-50% + var(--shift)));
+  margin-left: 0;
+}
+</style>

src/composables/bottomPanelTabs/useCommandSubcategories.ts

@@ -0,0 +1,78 @@
+import { type ComputedRef, computed } from 'vue'
+
+import { type ComfyCommandImpl } from '@/stores/commandStore'
+
+export type SubcategoryRule = {
+  pattern: string | RegExp
+  subcategory: string
+}
+
+export type SubcategoryConfig = {
+  defaultSubcategory: string
+  rules: SubcategoryRule[]
+}
+
+/**
+ * Composable for grouping commands by subcategory based on configurable rules
+ */
+export function useCommandSubcategories(
+  commands: ComputedRef<ComfyCommandImpl[]>,
+  config: SubcategoryConfig
+) {
+  const subcategories = computed(() => {
+    const result: Record<string, ComfyCommandImpl[]> = {}
+
+    for (const command of commands.value) {
+      let subcategory = config.defaultSubcategory
+
+      // Find the first matching rule
+      for (const rule of config.rules) {
+        const matches =
+          typeof rule.pattern === 'string'
+            ? command.id.includes(rule.pattern)
+            : rule.pattern.test(command.id)
+
+        if (matches) {
+          subcategory = rule.subcategory
+          break
+        }
+      }
+
+      if (!result[subcategory]) {
+        result[subcategory] = []
+      }
+      result[subcategory].push(command)
+    }
+
+    return result
+  })
+
+  return {
+    subcategories
+  }
+}
+
+/**
+ * Predefined configuration for view controls subcategories
+ */
+export const VIEW_CONTROLS_CONFIG: SubcategoryConfig = {
+  defaultSubcategory: 'view',
+  rules: [
+    { pattern: 'Zoom', subcategory: 'view' },
+    { pattern: 'Fit', subcategory: 'view' },
+    { pattern: 'Panel', subcategory: 'panel-controls' },
+    { pattern: 'Sidebar', subcategory: 'panel-controls' }
+  ]
+}
+
+/**
+ * Predefined configuration for essentials subcategories
+ */
+export const ESSENTIALS_CONFIG: SubcategoryConfig = {
+  defaultSubcategory: 'workflow',
+  rules: [
+    { pattern: 'Workflow', subcategory: 'workflow' },
+    { pattern: 'Node', subcategory: 'node' },
+    { pattern: 'Queue', subcategory: 'queue' }
+  ]
+}

src/composables/bottomPanelTabs/useShortcutsTab.ts

@@ -0,0 +1,27 @@
+import { markRaw } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import EssentialsPanel from '@/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue'
+import ViewControlsPanel from '@/components/bottomPanel/tabs/shortcuts/ViewControlsPanel.vue'
+import { BottomPanelExtension } from '@/types/extensionTypes'
+
+export const useShortcutsTab = (): BottomPanelExtension[] => {
+  const { t } = useI18n()
+
+  return [
+    {
+      id: 'shortcuts-essentials',
+      title: t('shortcuts.essentials'),
+      component: markRaw(EssentialsPanel),
+      type: 'vue',
+      targetPanel: 'shortcuts'
+    },
+    {
+      id: 'shortcuts-view-controls',
+      title: t('shortcuts.viewControls'),
+      component: markRaw(ViewControlsPanel),
+      type: 'vue',
+      targetPanel: 'shortcuts'
+    }
+  ]
+}

src/composables/canvas/useCanvasTransformSync.ts

@@ -1,6 +1,6 @@
-import { LGraphCanvas } from '@comfyorg/litegraph'
 import { onUnmounted, ref } from 'vue'
 
+import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/stores/graphStore'
 
 interface CanvasTransformSyncOptions {

src/composables/canvas/useSelectedLiteGraphItems.ts

@@ -1,6 +1,15 @@
-import { Positionable, Reroute } from '@comfyorg/litegraph'
-
+import {
+  LGraphEventMode,
+  LGraphNode,
+  Positionable,
+  Reroute
+} from '@/lib/litegraph/src/litegraph'
+import { app } from '@/scripts/app'
 import { useCanvasStore } from '@/stores/graphStore'
+import {
+  collectFromNodes,
+  traverseNodesDepthFirst
+} from '@/utils/graphTraversalUtil'
 
 /**
  * Composable for handling selected LiteGraph items filtering and operations.
@@ -61,11 +70,92 @@ export function useSelectedLiteGraphItems() {
     return getSelectableItems().size > 1
   }
 
+  /**
+   * Get only the selected nodes (LGraphNode instances) from the canvas.
+   * This filters out other types of selected items like groups or reroutes.
+   * If a selected node is a subgraph, this also includes all nodes within it.
+   * @returns Array of selected LGraphNode instances and their descendants.
+   */
+  const getSelectedNodes = (): LGraphNode[] => {
+    const selectedNodes = app.canvas.selected_nodes
+    if (!selectedNodes) return []
+
+    // Convert selected_nodes object to array, preserving order
+    const nodeArray: LGraphNode[] = []
+    for (const i in selectedNodes) {
+      nodeArray.push(selectedNodes[i])
+    }
+
+    // Check if any selected nodes are subgraphs
+    const hasSubgraphs = nodeArray.some(
+      (node) => node.isSubgraphNode?.() && node.subgraph
+    )
+
+    // If no subgraphs, just return the array directly to preserve order
+    if (!hasSubgraphs) {
+      return nodeArray
+    }
+
+    // Use collectFromNodes to get all nodes including those in subgraphs
+    return collectFromNodes(nodeArray)
+  }
+
+  /**
+   * Toggle the execution mode of all selected nodes with unified subgraph behavior.
+   *
+   * Top-level behavior (selected nodes): Standard toggle logic
+   * - If the selected node is already in the specified mode → set to ALWAYS
+   * - Otherwise → set to the specified mode
+   *
+   * Subgraph behavior (children of selected subgraph nodes): Unified state application
+   * - All children inherit the same mode that their parent subgraph node was set to
+   * - This creates predictable behavior: if you toggle a subgraph to "mute",
+   *   ALL nodes inside become muted, regardless of their previous individual states
+   *
+   * @param mode - The LGraphEventMode to toggle to (e.g., NEVER for mute, BYPASS for bypass)
+   */
+  const toggleSelectedNodesMode = (mode: LGraphEventMode): void => {
+    const selectedNodes = app.canvas.selected_nodes
+    if (!selectedNodes) return
+
+    // Convert selected_nodes object to array
+    const selectedNodeArray: LGraphNode[] = []
+    for (const i in selectedNodes) {
+      selectedNodeArray.push(selectedNodes[i])
+    }
+
+    // Process each selected node independently to determine its target state and apply to children
+    selectedNodeArray.forEach((selectedNode) => {
+      // Apply standard toggle logic to the selected node itself
+      const newModeForSelectedNode =
+        selectedNode.mode === mode ? LGraphEventMode.ALWAYS : mode
+
+      selectedNode.mode = newModeForSelectedNode
+
+      // If this selected node is a subgraph, apply the same mode uniformly to all its children
+      // This ensures predictable behavior: all children get the same state as their parent
+      if (selectedNode.isSubgraphNode?.() && selectedNode.subgraph) {
+        traverseNodesDepthFirst([selectedNode], {
+          visitor: (node) => {
+            // Skip the parent node since we already handled it above
+            if (node === selectedNode) return undefined
+
+            // Apply the parent's new mode to all children uniformly
+            node.mode = newModeForSelectedNode
+            return undefined
+          }
+        })
+      }
+    })
+  }
+
   return {
     isIgnoredItem,
     filterSelectableItems,
     getSelectableItems,
     hasSelectableItems,
-    hasMultipleSelectableItems
+    hasMultipleSelectableItems,
+    getSelectedNodes,
+    toggleSelectedNodesMode
   }
 }

src/composables/element/useAbsolutePosition.ts

@@ -1,7 +1,7 @@
-import type { Size, Vector2 } from '@comfyorg/litegraph'
 import { CSSProperties, ref, watch } from 'vue'
 
 import { useCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
+import type { Size, Vector2 } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useSettingStore } from '@/stores/settingStore'
 

src/composables/element/useCanvasPositionConversion.ts

@@ -1,6 +1,7 @@
-import type { LGraphCanvas, Vector2 } from '@comfyorg/litegraph'
 import { useElementBounding } from '@vueuse/core'
 
+import type { LGraphCanvas, Vector2 } from '@/lib/litegraph/src/litegraph'
+
 /**
  * Convert between canvas and client positions
  * @param canvasElement - The canvas element