[test] Add failing tests to reproduce Firebase Auth network issue #4468

Add test cases that demonstrate the current problematic behavior where
Firebase Auth makes network requests when offline without graceful error
handling, causing toast error messages and degraded offline experience.

Tests reproduce:
- getIdToken() throwing auth/network-request-failed instead of returning null
- getAuthHeader() failing to fallback gracefully when Firebase token refresh fails

These tests currently pass by expecting the error to be thrown. After
implementing the fix, the tests should be updated to verify graceful
handling (returning null instead of throwing).

Related to issue #4468: Firebase Auth makes network requests when offline
without evicting token

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>

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

@@ -171,7 +171,53 @@ echo "Last stable release: $LAST_STABLE"
 
 ### Step 7: Analyze Dependency Updates
 
-1. **Check significant 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:**
    ```bash
    # Extract all dependency changes for major version bumps
    OTHER_DEP_CHANGES=""
@@ -348,14 +394,6 @@ 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

@@ -1,21 +0,0 @@
----
-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/workflows/backport.yaml

@@ -1,165 +0,0 @@
-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/create-release-candidate-branch.yaml

@@ -1,214 +0,0 @@
-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": ["build", "test"]
-              },
-              "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/update-litegraph.yaml

@@ -0,0 +1,43 @@
+name: Update Litegraph Dependency
+
+on:
+  workflow_dispatch:
+
+jobs:
+  update-litegraph:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Update litegraph
+        run: npm install @comfyorg/litegraph@latest
+
+      - name: Get new version
+        id: get-version
+        run: |
+          NEW_VERSION=$(node -e "console.log(JSON.parse(require('fs').readFileSync('./package-lock.json')).packages['node_modules/@comfyorg/litegraph'].version)")
+          echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@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,11 +3,6 @@ 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:
@@ -90,7 +85,7 @@ jobs:
 
             These types are automatically generated using openapi-typescript.
           branch: update-manager-types-${{ steps.manager-info.outputs.commit }}
-          base: ${{ inputs.target_branch }}
+          base: main
           labels: Manager
           delete-branch: true
           add-paths: |

.i18nrc.cjs

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

CLAUDE.md

@@ -6,9 +6,6 @@
 - `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
 
@@ -51,11 +48,3 @@ 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

@@ -1,327 +0,0 @@
-# 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')`
-
-## 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).
-
-## 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

@@ -75,7 +75,7 @@ The development of successive minor versions overlaps. For example, while versio
   <summary>v1.5: Native translation (i18n)</summary>
 
   ComfyUI now includes built-in translation support, replacing the need for third-party translation extensions. Select your language
-  in `Comfy > Locale > Language` to translate the interface into English, Chinese (Simplified), Russian, Japanese, Korean, or Arabic. This native
+  in `Comfy > Locale > Language` to translate the interface into English, Chinese (Simplified), Russian, Japanese, or Korean. This native
   implementation offers better performance, reliability, and maintainability compared to previous solutions.<br>
 
   More details available here: https://blog.comfy.org/p/native-localization-support-i18n
@@ -512,18 +512,196 @@ The selection toolbox will display the command button when items are selected:
 
 ## Contributing
 
-We welcome contributions to ComfyUI Frontend! Please see our [Contributing Guide](CONTRIBUTING.md) for:
+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 (code, documentation, testing, community support)
-- Development setup and workflow
-- Code style guidelines
-- Testing requirements
-- How to submit pull requests
-- Backporting fixes to release branches
+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!
 
 ## Development
 
-For detailed development setup, testing procedures, and technical information, please refer to [CONTRIBUTING.md](CONTRIBUTING.md).
+### 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.
 
 ### i18n
 

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(x: number = 10, y: number = 10) {
-    await this.page.mouse.click(x, y, { button: 'right' })
+  async rightClickCanvas() {
+    await this.page.mouse.click(10, 10, { button: 'right' })
     await this.nextFrame()
   }
 

browser_tests/fixtures/components/Topbar.ts

@@ -50,7 +50,7 @@ export class Topbar {
     workflowName: string,
     command: 'Save' | 'Save As' | 'Export'
   ) {
-    await this.triggerTopbarCommand(['File', command])
+    await this.triggerTopbarCommand(['Workflow', command])
     await this.getSaveDialog().fill(workflowName)
     await this.page.keyboard.press('Enter')
 
@@ -72,8 +72,8 @@ export class Topbar {
   }
 
   async triggerTopbarCommand(path: string[]) {
-    if (path.length < 1) {
-      throw new Error('Path cannot be empty')
+    if (path.length < 2) {
+      throw new Error('Path is too short')
     }
 
     const menu = await this.openTopbarMenu()
@@ -85,13 +85,6 @@ export class Topbar {
       .locator('.p-tieredmenu-item')
       .filter({ has: topLevelMenuItem })
     await topLevelMenu.waitFor({ state: 'visible' })
-
-    // Handle top-level commands (like "New")
-    if (path.length === 1) {
-      await topLevelMenuItem.click()
-      return
-    }
-
     await topLevelMenu.hover()
 
     let currentMenu = topLevelMenu

browser_tests/tests/bottomPanelShortcuts.spec.ts

@@ -1,280 +0,0 @@
-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/groupNode.spec.ts

@@ -17,11 +17,11 @@ test.describe('Group Node', () => {
       await libraryTab.open()
     })
 
-    test('Is added to node library sidebar', async ({ comfyPage }) => {
+    test.skip('Is added to node library sidebar', async ({ comfyPage }) => {
       expect(await libraryTab.getFolder('group nodes').count()).toBe(1)
     })
 
-    test('Can be added to canvas using node library sidebar', async ({
+    test.skip('Can be added to canvas using node library sidebar', async ({
       comfyPage
     }) => {
       const initialNodeCount = await comfyPage.getGraphNodesCount()
@@ -34,7 +34,7 @@ test.describe('Group Node', () => {
       expect(await comfyPage.getGraphNodesCount()).toBe(initialNodeCount + 1)
     })
 
-    test('Can be bookmarked and unbookmarked', async ({ comfyPage }) => {
+    test.skip('Can be bookmarked and unbookmarked', async ({ comfyPage }) => {
       await libraryTab.getFolder(groupNodeCategory).click()
       await libraryTab
         .getNode(groupNodeName)
@@ -61,7 +61,7 @@ test.describe('Group Node', () => {
       ).toHaveLength(0)
     })
 
-    test('Displays preview on bookmark hover', async ({ comfyPage }) => {
+    test.skip('Displays preview on bookmark hover', async ({ comfyPage }) => {
       await libraryTab.getFolder(groupNodeCategory).click()
       await libraryTab
         .getNode(groupNodeName)
@@ -95,7 +95,7 @@ test.describe('Group Node', () => {
     )
   })
 
-  test('Displays tooltip on title hover', async ({ comfyPage }) => {
+  test.skip('Displays tooltip on title hover', async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.EnableTooltips', true)
     await comfyPage.convertAllNodesToGroupNode('Group Node')
     await comfyPage.page.mouse.move(47, 173)
@@ -104,7 +104,7 @@ test.describe('Group Node', () => {
     await expect(comfyPage.page.locator('.node-tooltip')).toBeVisible()
   })
 
-  test('Manage group opens with the correct group selected', async ({
+  test.skip('Manage group opens with the correct group selected', async ({
     comfyPage
   }) => {
     const makeGroup = async (name, type1, type2) => {
@@ -165,7 +165,7 @@ test.describe('Group Node', () => {
     expect(visibleInputCount).toBe(2)
   })
 
-  test('Reconnects inputs after configuration changed via manage dialog save', async ({
+  test.skip('Reconnects inputs after configuration changed via manage dialog save', async ({
     comfyPage
   }) => {
     const expectSingleNode = async (type: string) => {
@@ -268,7 +268,10 @@ test.describe('Group Node', () => {
       await comfyPage.setSetting('Comfy.ConfirmClear', false)
 
       // Clear workflow
-      await comfyPage.executeCommand('Comfy.ClearWorkflow')
+      await comfyPage.menu.topbar.triggerTopbarCommand([
+        'Edit',
+        'Clear Workflow'
+      ])
 
       await comfyPage.ctrlV()
       await verifyNodeLoaded(comfyPage, 1)
@@ -277,7 +280,7 @@ test.describe('Group Node', () => {
     test('Copies and pastes group node into a newly created blank workflow', async ({
       comfyPage
     }) => {
-      await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
+      await comfyPage.menu.topbar.triggerTopbarCommand(['Workflow', 'New'])
       await comfyPage.ctrlV()
       await verifyNodeLoaded(comfyPage, 1)
     })
@@ -293,7 +296,7 @@ test.describe('Group Node', () => {
     test('Serializes group node after copy and paste across workflows', async ({
       comfyPage
     }) => {
-      await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
+      await comfyPage.menu.topbar.triggerTopbarCommand(['Workflow', 'New'])
       await comfyPage.ctrlV()
       const currentGraphState = await comfyPage.page.evaluate(() =>
         window['app'].graph.serialize()

browser_tests/tests/interaction.spec.ts

@@ -1,4 +1,4 @@
-import { Locator, expect } from '@playwright/test'
+import { expect } from '@playwright/test'
 import { Position } from '@vueuse/core'
 
 import {
@@ -684,7 +684,7 @@ test.describe('Load workflow', () => {
       workflowA = generateUniqueFilename()
       await comfyPage.menu.topbar.saveWorkflow(workflowA)
       workflowB = generateUniqueFilename()
-      await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
+      await comfyPage.menu.topbar.triggerTopbarCommand(['Workflow', 'New'])
       await comfyPage.menu.topbar.saveWorkflow(workflowB)
 
       // Wait for localStorage to persist the workflow paths before reloading
@@ -767,17 +767,6 @@ 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')
@@ -805,13 +794,15 @@ test.describe('Viewport settings', () => {
     const tabB = comfyPage.menu.topbar.getWorkflowTab('Workflow B')
 
     // Go back to Workflow A
-    await changeTab(tabA)
+    await tabA.click()
+    await comfyPage.nextFrame()
     expect((await comfyPage.canvas.screenshot()).toString('base64')).toBe(
       screenshotA
     )
 
     // And back to Workflow B
-    await changeTab(tabB)
+    await tabB.click()
+    await comfyPage.nextFrame()
     expect((await comfyPage.canvas.screenshot()).toString('base64')).toBe(
       screenshotB
     )

browser_tests/tests/menu.spec.ts

@@ -75,7 +75,7 @@ test.describe('Menu', () => {
 
     test('Displays keybinding next to item', async ({ comfyPage }) => {
       await comfyPage.menu.topbar.openTopbarMenu()
-      const workflowMenuItem = comfyPage.menu.topbar.getMenuItem('File')
+      const workflowMenuItem = comfyPage.menu.topbar.getMenuItem('Workflow')
       await workflowMenuItem.hover()
       const exportTag = comfyPage.page.locator('.keybinding-tag', {
         hasText: 'Ctrl + s'

browser_tests/tests/minimap.spec.ts

@@ -24,14 +24,8 @@ test.describe('Minimap', () => {
     const minimapViewport = minimapContainer.locator('.minimap-viewport')
     await expect(minimapViewport).toBeVisible()
 
-    await expect(minimapContainer).toHaveCSS('position', 'relative')
-
-    // position and z-index validation moved to the parent container of the minimap
-    const minimapMainContainer = comfyPage.page.locator(
-      '.minimap-main-container'
-    )
-    await expect(minimapMainContainer).toHaveCSS('position', 'absolute')
-    await expect(minimapMainContainer).toHaveCSS('z-index', '1000')
+    await expect(minimapContainer).toHaveCSS('position', 'absolute')
+    await expect(minimapContainer).toHaveCSS('z-index', '1000')
   })
 
   test('Validate minimap toggle button state', async ({ comfyPage }) => {

browser_tests/tests/rerouteNode.spec.ts

@@ -18,7 +18,7 @@ test.describe('Reroute Node', () => {
       [workflowName]: workflowName
     })
     await comfyPage.setup()
-    await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
+    await comfyPage.menu.topbar.triggerTopbarCommand(['Workflow', 'New'])
 
     // Insert the workflow
     const workflowsTab = comfyPage.menu.workflowsTab
@@ -48,9 +48,7 @@ test.describe('LiteGraph Native Reroute Node', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('native_reroute.png')
   })
 
-  test('@2x @0.5x Can add reroute by alt clicking on link', async ({
-    comfyPage
-  }) => {
+  test('Can add reroute by alt clicking on link', async ({ comfyPage }) => {
     const loadCheckpointNode = (
       await comfyPage.getNodeRefsByTitle('Load Checkpoint')
     )[0]

browser_tests/tests/rightClickMenu.spec.ts

@@ -24,11 +24,11 @@ test.describe('Canvas Right Click Menu', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('add-group-group-added.png')
   })
 
-  test('Can convert to group node', async ({ comfyPage }) => {
+  test.skip('Can convert to group node', async ({ comfyPage }) => {
     await comfyPage.select2Nodes()
     await expect(comfyPage.canvas).toHaveScreenshot('selected-2-nodes.png')
     await comfyPage.rightClickCanvas()
-    await comfyPage.clickContextMenuItem('Convert to Group Node (Deprecated)')
+    await comfyPage.clickContextMenuItem('Convert to Group Node')
     await comfyPage.promptDialogInput.fill('GroupNode2CLIP')
     await comfyPage.page.keyboard.press('Enter')
     await comfyPage.promptDialogInput.waitFor({ state: 'hidden' })

browser_tests/tests/subgraph.spec.ts

@@ -196,68 +196,6 @@ 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', () => {
@@ -528,103 +466,4 @@ test.describe('Subgraph Operations', () => {
       expect(finalCount).toBe(parentCount)
     })
   })
-
-  test.describe('Navigation Hotkeys', () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-    })
-
-    test('Navigation hotkey can be customized', async ({ comfyPage }) => {
-      await comfyPage.loadWorkflow('basic-subgraph')
-      await comfyPage.nextFrame()
-
-      // Change the Exit Subgraph keybinding from Escape to Alt+Q
-      await comfyPage.setSetting('Comfy.Keybinding.NewBindings', [
-        {
-          commandId: 'Comfy.Graph.ExitSubgraph',
-          combo: {
-            key: 'q',
-            ctrl: false,
-            alt: true,
-            shift: false
-          }
-        }
-      ])
-
-      await comfyPage.setSetting('Comfy.Keybinding.UnsetBindings', [
-        {
-          commandId: 'Comfy.Graph.ExitSubgraph',
-          combo: {
-            key: 'Escape',
-            ctrl: false,
-            alt: false,
-            shift: false
-          }
-        }
-      ])
-
-      // Reload the page
-      await comfyPage.page.reload()
-      await comfyPage.page.waitForTimeout(1024)
-
-      // Navigate into subgraph
-      const subgraphNode = await comfyPage.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb)
-
-      // Verify we're in a subgraph
-      expect(await isInSubgraph(comfyPage)).toBe(true)
-
-      // Test that Escape no longer exits subgraph
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-      if (!(await isInSubgraph(comfyPage))) {
-        throw new Error('Not in subgraph')
-      }
-
-      // Test that Alt+Q now exits subgraph
-      await comfyPage.page.keyboard.press('Alt+q')
-      await comfyPage.nextFrame()
-      expect(await isInSubgraph(comfyPage)).toBe(false)
-    })
-
-    test('Escape prioritizes closing dialogs over exiting subgraph', async ({
-      comfyPage
-    }) => {
-      await comfyPage.loadWorkflow('basic-subgraph')
-      await comfyPage.nextFrame()
-
-      const subgraphNode = await comfyPage.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb)
-
-      // Verify we're in a subgraph
-      if (!(await isInSubgraph(comfyPage))) {
-        throw new Error('Not in subgraph')
-      }
-
-      // Open settings dialog using hotkey
-      await comfyPage.page.keyboard.press('Control+,')
-      await comfyPage.page.waitForSelector('.settings-container', {
-        state: 'visible'
-      })
-
-      // Press Escape - should close dialog, not exit subgraph
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-
-      // Dialog should be closed
-      await expect(
-        comfyPage.page.locator('.settings-container')
-      ).not.toBeVisible()
-
-      // Should still be in subgraph
-      expect(await isInSubgraph(comfyPage)).toBe(true)
-
-      // Press Escape again - now should exit subgraph
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-      expect(await isInSubgraph(comfyPage)).toBe(false)
-    })
-  })
 })

browser_tests/tests/workflowTabThumbnail.spec.ts

@@ -1,155 +0,0 @@
-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(['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(['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(['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

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

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

@@ -1,79 +0,0 @@
-# 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,17 +1,18 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.25.5",
+  "version": "1.25.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@comfyorg/comfyui-frontend",
-      "version": "1.25.5",
+      "version": "1.25.4",
       "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.17.1",
         "@primevue/forms": "^4.2.5",
         "@primevue/themes": "^4.2.5",
         "@sentry/vue": "^8.48.0",
@@ -975,6 +976,12 @@
       "integrity": "sha512-o6WFbYn9yAkGbkOwvhPF7pbKDvN0occZ21Tfyhya8CIsIqKpTHLft0aOqo4yhSh+kTxN16FYjsfrTH5Olk4WuA==",
       "license": "GPL-3.0-only"
     },
+    "node_modules/@comfyorg/litegraph": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.17.1.tgz",
+      "integrity": "sha512-SaDDWFvoH1bCfibvZjtX0JoLvFTJw2MUOWzrjyeuWVs00JpxiJ1I5f6oH/AO8lJqKdASWBVPzpC9zPMG45w4IQ==",
+      "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.9",
+  "version": "1.25.4",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -78,6 +78,7 @@
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "^0.4.43",
+    "@comfyorg/litegraph": "^0.17.1",
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
     "@sentry/vue": "^8.48.0",

playwright.config.ts

@@ -49,13 +49,6 @@ 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,7 +16,9 @@ const typesPackage = {
   homepage: mainPackage.homepage,
   description: `TypeScript definitions for ${mainPackage.name}`,
   license: mainPackage.license,
-  dependencies: {},
+  dependencies: {
+    '@comfyorg/litegraph': mainPackage.dependencies['@comfyorg/litegraph']
+  },
   peerDependencies: {
     vue: mainPackage.dependencies.vue,
     zod: mainPackage.dependencies.zod

src/CLAUDE.md

@@ -6,22 +6,9 @@
 
 - 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')
-```
+- Examples:
+  - Backend: `api.apiURL('/prompt')`
+  - Static: `api.fileURL('/templates/default.json')`
 
 ### Error Handling
 

src/assets/icons/custom/ai-model.svg

@@ -1,6 +0,0 @@
-<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.91396 12.7428L5.41396 10.7428C5.57175 10.1116 5.09439 9.50024 4.44382 9.50024H2.50538C2.04651 9.50024 1.64652 9.81253 1.53523 10.2577L1.03523 12.2577C0.877446 12.8888 1.3548 13.5002 2.00538 13.5002H3.94382C4.40269 13.5002 4.80267 13.1879 4.91396 12.7428Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
-<path d="M5.91396 6.74277L6.41396 4.74277C6.57175 4.11163 6.09439 3.50024 5.44382 3.50024H3.50538C3.04651 3.50024 2.64652 3.81253 2.53523 4.2577L2.03523 6.2577C1.87745 6.88885 2.3548 7.50024 3.00538 7.50024H4.94382C5.40269 7.50024 5.80267 7.18794 5.91396 6.74277Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
-<path d="M10.914 12.7428L11.414 10.7428C11.5718 10.1116 11.0944 9.50024 10.4438 9.50024H8.50538C8.04651 9.50024 7.64652 9.81253 7.53523 10.2577L7.03523 12.2577C6.87745 12.8888 7.3548 13.5002 8.00538 13.5002H9.94382C10.4027 13.5002 10.8027 13.1879 10.914 12.7428Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
-<path d="M12.2342 5.46739L11.5287 7.11354C11.4248 7.35597 11.0811 7.35597 10.9772 7.11354L10.2717 5.46739C10.2414 5.39659 10.185 5.34017 10.1141 5.30983L8.468 4.60433C8.22557 4.50044 8.22557 4.15675 8.468 4.05285L10.1141 3.34736C10.185 3.31701 10.2414 3.26059 10.2717 3.18979L10.9772 1.54364C11.0811 1.30121 11.4248 1.30121 11.5287 1.54364L12.2342 3.18979C12.2645 3.26059 12.3209 3.31701 12.3918 3.34736L14.0379 4.05285C14.2803 4.15675 14.2803 4.50044 14.0379 4.60433L12.3918 5.30983C12.3209 5.34017 12.2645 5.39659 12.2342 5.46739Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
-</svg>

src/assets/icons/custom/node.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.6667 10L10.598 10.2577C10.4812 10.6954 10.0848 11 9.63172 11H5.30161C4.64458 11 4.16608 10.3772 4.33538 9.74234L5.40204 5.74234C5.51878 5.30458 5.91523 5 6.36828 5H10.8286C11.4199 5 11.8505 5.56051 11.6982 6.13185L11.6736 6.22389M14 8H10M4.5 8H2" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
-</svg>

src/assets/icons/custom/template.svg

@@ -1,5 +0,0 @@
-<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.1894 6.24254L13.6894 4.24254C13.8471 3.61139 13.3698 3 12.7192 3H3.78077C3.3219 3 2.92192 3.3123 2.81062 3.75746L2.31062 5.75746C2.15284 6.38861 2.63019 7 3.28077 7H12.2192C12.6781 7 13.0781 6.6877 13.1894 6.24254Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
-<path d="M13.1894 12.2425L13.6894 10.2425C13.8471 9.61139 13.3698 9 12.7192 9H8.78077C8.3219 9 7.92192 9.3123 7.81062 9.75746L7.31062 11.7575C7.15284 12.3886 7.6302 13 8.28077 13H12.2192C12.6781 13 13.0781 12.6877 13.1894 12.2425Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
-<path d="M5.18936 12.2425L5.68936 10.2425C5.84714 9.61139 5.36978 9 4.71921 9H3.78077C3.3219 9 2.92192 9.3123 2.81062 9.75746L2.31062 11.7575C2.15284 12.3886 2.6302 13 3.28077 13H4.21921C4.67808 13 5.07806 12.6877 5.18936 12.2425Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
-</svg>

src/components/bottomPanel/BottomPanel.vue

@@ -11,33 +11,18 @@
               class="p-3 border-none"
             >
               <span class="font-bold">
-                {{
-                  shouldCapitalizeTab(tab.id)
-                    ? tab.title.toUpperCase()
-                    : tab.title
-                }}
+                {{ tab.title.toUpperCase() }}
               </span>
             </Tab>
           </div>
-          <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>
+          <Button
+            class="justify-self-end"
+            icon="pi pi-times"
+            severity="secondary"
+            size="small"
+            text
+            @click="bottomPanelStore.bottomPanelVisible = false"
+          />
         </div>
       </TabList>
     </Tabs>
@@ -59,32 +44,9 @@ 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

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

@@ -1,120 +0,0 @@
-<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">
-                {{ t(`commands.${normalizeI18nKey(command.id)}.label`) }}
-              </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'
-import { normalizeI18nKey } from '@/utils/formatUtil'
-
-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

@@ -1,33 +0,0 @@
-<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/breadcrumb/SubgraphBreadcrumb.vue

@@ -32,6 +32,7 @@
 </template>
 
 <script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
 import Breadcrumb from 'primevue/breadcrumb'
 import type { MenuItem } from 'primevue/menuitem'
 import { computed, onUpdated, ref, watch } from 'vue'
@@ -97,6 +98,18 @@ const home = computed(() => ({
   }
 }))
 
+// Escape exits from the current subgraph.
+useEventListener(document, 'keydown', (event) => {
+  if (event.key === 'Escape') {
+    const canvas = useCanvasStore().getCanvas()
+    if (!canvas.graph) throw new TypeError('Canvas has no graph')
+
+    canvas.setGraph(
+      navigationStore.navigationStack.at(-2) ?? canvas.graph.rootGraph
+    )
+  }
+})
+
 // Check for overflow on breadcrumb items and collapse/expand the breadcrumb to fit
 let overflowObserver: ReturnType<typeof useOverflowObserver> | undefined
 watch(breadcrumbElement, (el) => {

src/components/common/LazyImage.vue

@@ -1,124 +0,0 @@
-<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/graph/GraphCanvas.vue

@@ -49,6 +49,7 @@
 </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'
 
@@ -77,7 +78,6 @@ 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="minimapTooltip"
+      v-tooltip.left="t('graphCanvasMenu.toggleMinimap') + ' (Alt + m)'"
       severity="secondary"
       :icon="'pi pi-map'"
       :aria-label="$t('graphCanvasMenu.toggleMinimap')"
@@ -70,33 +70,24 @@
 </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

@@ -1,66 +1,31 @@
 <template>
   <div
     v-if="visible && initialized"
-    class="minimap-main-container flex absolute bottom-[20px] right-[90px] z-[1000]"
+    ref="containerRef"
+    class="litegraph-minimap absolute bottom-[20px] right-[90px] z-[1000]"
+    :style="containerStyles"
+    @mousedown="handleMouseDown"
+    @mousemove="handleMouseMove"
+    @mouseup="handleMouseUp"
+    @mouseleave="handleMouseUp"
+    @wheel="handleWheel"
   >
-    <MiniMapPanel
-      v-if="showOptionsPanel"
-      :panel-styles="panelStyles"
-      :node-colors="nodeColors"
-      :show-links="showLinks"
-      :show-groups="showGroups"
-      :render-bypass="renderBypass"
-      :render-error="renderError"
-      @update-option="updateOption"
+    <canvas
+      ref="canvasRef"
+      :width="width"
+      :height="height"
+      class="minimap-canvas"
     />
-
-    <div
-      ref="containerRef"
-      class="litegraph-minimap relative"
-      :style="containerStyles"
-    >
-      <Button
-        class="absolute z-10"
-        size="small"
-        text
-        severity="secondary"
-        @click.stop="toggleOptionsPanel"
-      >
-        <template #icon>
-          <i-lucide:settings-2 />
-        </template>
-      </Button>
-
-      <canvas
-        ref="canvasRef"
-        :width="width"
-        :height="height"
-        class="minimap-canvas"
-      />
-
-      <div class="minimap-viewport" :style="viewportStyles" />
-
-      <div
-        class="absolute inset-0"
-        @pointerdown="handlePointerDown"
-        @pointermove="handlePointerMove"
-        @pointerup="handlePointerUp"
-        @pointerleave="handlePointerUp"
-        @wheel="handleWheel"
-      />
-    </div>
+    <div class="minimap-viewport" :style="viewportStyles" />
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { onMounted, onUnmounted, watch } from 'vue'
 
 import { useMinimap } from '@/composables/useMinimap'
 import { useCanvasStore } from '@/stores/graphStore'
 
-import MiniMapPanel from './MiniMapPanel.vue'
-
 const minimap = useMinimap()
 const canvasStore = useCanvasStore()
 
@@ -73,27 +38,14 @@ const {
   viewportStyles,
   width,
   height,
-  panelStyles,
-  nodeColors,
-  showLinks,
-  showGroups,
-  renderBypass,
-  renderError,
-  updateOption,
   init,
   destroy,
-  handlePointerDown,
-  handlePointerMove,
-  handlePointerUp,
+  handleMouseDown,
+  handleMouseMove,
+  handleMouseUp,
   handleWheel
 } = minimap
 
-const showOptionsPanel = ref(false)
-
-const toggleOptionsPanel = () => {
-  showOptionsPanel.value = !showOptionsPanel.value
-}
-
 watch(
   () => canvasStore.canvas,
   async (canvas) => {

src/components/graph/MiniMapPanel.vue

@@ -1,97 +0,0 @@
-<template>
-  <div
-    class="minimap-panel p-3 mr-2 flex flex-col gap-3 text-sm"
-    :style="panelStyles"
-  >
-    <div class="flex items-center gap-2">
-      <Checkbox
-        input-id="node-colors"
-        name="node-colors"
-        :model-value="nodeColors"
-        binary
-        @update:model-value="
-          (value) => $emit('updateOption', 'Comfy.Minimap.NodeColors', value)
-        "
-      />
-      <i-lucide:palette />
-      <label for="node-colors">{{ $t('minimap.nodeColors') }}</label>
-    </div>
-
-    <div class="flex items-center gap-2">
-      <Checkbox
-        input-id="show-links"
-        name="show-links"
-        :model-value="showLinks"
-        binary
-        @update:model-value="
-          (value) => $emit('updateOption', 'Comfy.Minimap.ShowLinks', value)
-        "
-      />
-      <i-lucide:route />
-      <label for="show-links">{{ $t('minimap.showLinks') }}</label>
-    </div>
-
-    <div class="flex items-center gap-2">
-      <Checkbox
-        input-id="show-groups"
-        name="show-groups"
-        :model-value="showGroups"
-        binary
-        @update:model-value="
-          (value) => $emit('updateOption', 'Comfy.Minimap.ShowGroups', value)
-        "
-      />
-      <i-lucide:frame />
-      <label for="show-groups">{{ $t('minimap.showGroups') }}</label>
-    </div>
-
-    <div class="flex items-center gap-2">
-      <Checkbox
-        input-id="render-bypass"
-        name="render-bypass"
-        :model-value="renderBypass"
-        binary
-        @update:model-value="
-          (value) =>
-            $emit('updateOption', 'Comfy.Minimap.RenderBypassState', value)
-        "
-      />
-      <i-lucide:circle-slash-2 />
-      <label for="render-bypass">{{ $t('minimap.renderBypassState') }}</label>
-    </div>
-
-    <div class="flex items-center gap-2">
-      <Checkbox
-        input-id="render-error"
-        name="render-error"
-        :model-value="renderError"
-        binary
-        @update:model-value="
-          (value) =>
-            $emit('updateOption', 'Comfy.Minimap.RenderErrorState', value)
-        "
-      />
-      <i-lucide:message-circle-warning />
-      <label for="render-error">{{ $t('minimap.renderErrorState') }}</label>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Checkbox from 'primevue/checkbox'
-
-import { MinimapOptionKey } from '@/composables/useMinimap'
-
-defineProps<{
-  panelStyles: any
-  nodeColors: boolean
-  showLinks: boolean
-  showGroups: boolean
-  renderBypass: boolean
-  renderError: boolean
-}>()
-
-defineEmits<{
-  updateOption: [key: MinimapOptionKey, value: boolean]
-}>()
-</script>

src/components/graph/NodeTooltip.vue

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

src/components/graph/SelectionOverlay.vue

@@ -13,12 +13,12 @@
 </template>
 
 <script setup lang="ts">
+import { createBounds } from '@comfyorg/litegraph'
 import { whenever } from '@vueuse/core'
 import { 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'
 
 const canvasStore = useCanvasStore()

src/components/graph/SelectionToolbox.vue

@@ -15,7 +15,7 @@
     <MaskEditorButton />
     <ConvertToSubgraphButton />
     <DeleteButton />
-    <RefreshSelectionButton />
+    <RefreshButton />
     <ExtensionCommandButton
       v-for="command in extensionToolboxCommands"
       :key="command.id"
@@ -39,7 +39,7 @@ 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 RefreshSelectionButton from '@/components/graph/selectionToolbox/RefreshSelectionButton.vue'
+import RefreshButton from '@/components/graph/selectionToolbox/RefreshButton.vue'
 import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useExtensionService } from '@/services/extensionService'
 import { type ComfyCommandImpl, useCommandStore } from '@/stores/commandStore'

src/components/graph/TitleEditor.vue

@@ -13,17 +13,13 @@
 </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('@/lib/litegraph/src/litegraph', async () => {
-  const actual = await vi.importActual('@/lib/litegraph/src/litegraph')
+vi.mock('@comfyorg/litegraph', async () => {
+  const actual = await vi.importActual('@comfyorg/litegraph')
   return {
     ...actual,
     LGraphCanvas: {

src/components/graph/selectionToolbox/ColorPickerButton.vue

@@ -44,17 +44,13 @@
 </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/ConvertToSubgraphButton.vue

@@ -1,20 +1,6 @@
 <template>
   <Button
-    v-if="isUnpackVisible"
-    v-tooltip.top="{
-      value: t('commands.Comfy_Graph_UnpackSubgraph.label'),
-      showDelay: 1000
-    }"
-    severity="secondary"
-    text
-    @click="() => commandStore.execute('Comfy.Graph.UnpackSubgraph')"
-  >
-    <template #icon>
-      <i-lucide:expand />
-    </template>
-  </Button>
-  <Button
-    v-else-if="isConvertVisible"
+    v-show="isVisible"
     v-tooltip.top="{
       value: t('commands.Comfy_Graph_ConvertToSubgraph.label'),
       showDelay: 1000
@@ -34,7 +20,6 @@ import Button from 'primevue/button'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
 
@@ -42,13 +27,7 @@ const { t } = useI18n()
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 
-const isUnpackVisible = computed(() => {
-  return (
-    canvasStore.selectedItems?.length === 1 &&
-    canvasStore.selectedItems[0] instanceof SubgraphNode
-  )
-})
-const isConvertVisible = computed(() => {
+const isVisible = computed(() => {
   return (
     canvasStore.groupSelected ||
     canvasStore.rerouteSelected ||

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/load3d/Load3DScene.vue

@@ -5,6 +5,7 @@
 </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'
@@ -16,7 +17,6 @@ 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,12 +1,11 @@
 import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
-import { beforeAll, describe, expect, it, vi } from 'vitest'
+import { beforeAll, describe, expect, it } 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'
 
@@ -130,164 +129,4 @@ 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,14 +70,15 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
       </div>
     </div>
     <div
-      v-if="renderedDescription"
+      v-if="nodeDef.description"
       class="_sb_description"
       :style="{
         color: litegraphColors.WIDGET_SECONDARY_TEXT_COLOR,
         backgroundColor: litegraphColors.WIDGET_BGCOLOR
       }"
-      v-html="renderedDescription"
-    />
+    >
+      {{ nodeDef.description }}
+    </div>
   </div>
 </template>
 
@@ -88,9 +89,8 @@ 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 { nodeDef } = defineProps<{
+const props = defineProps<{
   nodeDef: ComfyNodeDefV2
 }>()
 
@@ -101,12 +101,7 @@ const litegraphColors = computed(
 
 const widgetStore = useWidgetStore()
 
-const { description } = nodeDef
-const renderedDescription = computed(() => {
-  if (!description) return ''
-  return renderMarkdownToHtml(description)
-})
-
+const nodeDef = props.nodeDef
 const allInputDefs = Object.values(nodeDef.inputs)
 const allOutputDefs = nodeDef.outputs
 const slotInputDefs = allInputDefs.filter(

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -33,18 +33,18 @@
 </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 { useCanvasStore } from '@/stores/graphStore'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'

src/components/sidebar/SideToolbar.vue

@@ -8,18 +8,14 @@
         :icon-badge="tab.iconBadge"
         :tooltip="tab.tooltip"
         :tooltip-suffix="getTabTooltipSuffix(tab)"
-        :label="tab.label || tab.title"
-        :is-small="isSmall"
         :selected="tab.id === selectedTab?.id"
         :class="tab.id + '-tab-button'"
         @click="onTabClick(tab)"
       />
-      <SidebarTemplatesButton />
       <div class="side-tool-bar-end">
         <SidebarLogoutIcon v-if="userStore.isMultiUserServer" />
         <SidebarHelpCenterIcon />
         <SidebarBottomPanelToggleButton />
-        <SidebarShortcutsToggleButton />
       </div>
     </nav>
   </teleport>
@@ -36,7 +32,6 @@ 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'
@@ -46,7 +41,6 @@ import type { SidebarTabExtension } from '@/types/extensionTypes'
 import SidebarHelpCenterIcon from './SidebarHelpCenterIcon.vue'
 import SidebarIcon from './SidebarIcon.vue'
 import SidebarLogoutIcon from './SidebarLogoutIcon.vue'
-import SidebarTemplatesButton from './SidebarTemplatesButton.vue'
 
 const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()
@@ -90,7 +84,7 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
   box-shadow: var(--bar-shadow);
 
   --sidebar-width: 4rem;
-  --sidebar-icon-size: 1rem;
+  --sidebar-icon-size: 1.5rem;
 }
 
 .side-tool-bar-container.small-sidebar {

src/components/sidebar/SidebarBottomPanelToggleButton.vue

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

src/components/sidebar/SidebarHelpCenterIcon.vue

@@ -58,12 +58,11 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 import HelpCenterMenuContent from '@/components/helpcenter/HelpCenterMenuContent.vue'
 import ReleaseNotificationToast from '@/components/helpcenter/ReleaseNotificationToast.vue'
 import WhatsNewPopup from '@/components/helpcenter/WhatsNewPopup.vue'
-import { useHelpCenterStore } from '@/stores/helpCenterStore'
 import { useReleaseStore } from '@/stores/releaseStore'
 import { useSettingStore } from '@/stores/settingStore'
 
@@ -71,9 +70,8 @@ import SidebarIcon from './SidebarIcon.vue'
 
 const settingStore = useSettingStore()
 const releaseStore = useReleaseStore()
-const helpCenterStore = useHelpCenterStore()
 const { shouldShowRedDot } = storeToRefs(releaseStore)
-const { isVisible: isHelpCenterVisible } = storeToRefs(helpCenterStore)
+const isHelpCenterVisible = ref(false)
 
 const sidebarLocation = computed(() =>
   settingStore.get('Comfy.Sidebar.Location')
@@ -82,11 +80,11 @@ const sidebarLocation = computed(() =>
 const sidebarSize = computed(() => settingStore.get('Comfy.Sidebar.Size'))
 
 const toggleHelpCenter = () => {
-  helpCenterStore.toggle()
+  isHelpCenterVisible.value = !isHelpCenterVisible.value
 }
 
 const closeHelpCenter = () => {
-  helpCenterStore.hide()
+  isHelpCenterVisible.value = false
 }
 
 // Initialize release store on mount
@@ -132,7 +130,6 @@ onMounted(async () => {
     opacity: 0;
     transform: translateY(20px);
   }
-
   to {
     opacity: 1;
     transform: translateY(0);

src/components/sidebar/SidebarIcon.vue

@@ -19,29 +19,12 @@
     @click="emit('click', $event)"
   >
     <template #icon>
-      <div class="side-bar-button-content">
-        <slot name="icon">
-          <OverlayBadge v-if="shouldShowBadge" :value="overlayValue">
-            <i
-              v-if="typeof icon === 'string'"
-              :class="icon + ' side-bar-button-icon'"
-            />
-            <component :is="icon" v-else class="side-bar-button-icon" />
-          </OverlayBadge>
-          <i
-            v-else-if="typeof icon === 'string'"
-            :class="icon + ' side-bar-button-icon'"
-          />
-          <component
-            :is="icon"
-            v-else-if="typeof icon === 'object'"
-            class="side-bar-button-icon"
-          />
-        </slot>
-        <span v-if="label && !isSmall" class="side-bar-button-label">{{
-          t(label)
-        }}</span>
-      </div>
+      <slot name="icon">
+        <OverlayBadge v-if="shouldShowBadge" :value="overlayValue">
+          <i :class="icon + ' side-bar-button-icon'" />
+        </OverlayBadge>
+        <i v-else :class="icon + ' side-bar-button-icon'" />
+      </slot>
     </template>
   </Button>
 </template>
@@ -50,7 +33,6 @@
 import Button from 'primevue/button'
 import OverlayBadge from 'primevue/overlaybadge'
 import { computed } from 'vue'
-import type { Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
@@ -59,17 +41,13 @@ const {
   selected = false,
   tooltip = '',
   tooltipSuffix = '',
-  iconBadge = '',
-  label = '',
-  isSmall = false
+  iconBadge = ''
 } = defineProps<{
-  icon?: string | Component
+  icon?: string
   selected?: boolean
   tooltip?: string
   tooltipSuffix?: string
   iconBadge?: string | (() => string | null)
-  label?: string
-  isSmall?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -96,21 +74,8 @@ const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
 <style scoped>
 .side-bar-button {
   width: var(--sidebar-width);
-  height: calc(var(--sidebar-width) + 0.5rem);
-  border-radius: 0;
-}
-
-.side-tool-bar-end .side-bar-button {
   height: var(--sidebar-width);
-}
-
-.side-bar-button-content {
-  @apply flex flex-col items-center gap-2;
-}
-
-.side-bar-button-label {
-  @apply text-[10px] text-center whitespace-nowrap;
-  line-height: 1;
+  border-radius: 0;
 }
 
 .comfyui-body-left .side-bar-button.side-bar-button-selected,

src/components/sidebar/SidebarShortcutsToggleButton.vue

@@ -1,44 +0,0 @@
-<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/sidebar/SidebarTemplatesButton.vue

@@ -1,35 +0,0 @@
-<template>
-  <SidebarIcon
-    :icon="TemplateIcon"
-    :tooltip="$t('sideToolbar.templates')"
-    :label="$t('sideToolbar.labels.templates')"
-    :is-small="isSmall"
-    class="templates-tab-button"
-    @click="openTemplates"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed, defineAsyncComponent, markRaw } from 'vue'
-
-import { useCommandStore } from '@/stores/commandStore'
-import { useSettingStore } from '@/stores/settingStore'
-
-import SidebarIcon from './SidebarIcon.vue'
-
-// Import the custom template icon
-const TemplateIcon = markRaw(
-  defineAsyncComponent(() => import('virtual:icons/comfy/template'))
-)
-
-const settingStore = useSettingStore()
-const commandStore = useCommandStore()
-
-const isSmall = computed(
-  () => settingStore.get('Comfy.Sidebar.Size') === 'small'
-)
-
-const openTemplates = () => {
-  void commandStore.execute('Comfy.BrowseTemplates')
-}
-</script>

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -30,17 +30,10 @@
         />
         <Button
           v-tooltip.bottom="$t('sideToolbar.nodeLibraryTab.resetView')"
-          icon="pi pi-filter-slash"
-          text
-          severity="secondary"
-          @click="resetOrganization"
-        />
-        <Button
-          v-tooltip.bottom="$t('menu.refresh')"
           icon="pi pi-refresh"
           text
           severity="secondary"
-          @click="() => commandStore.execute('Comfy.RefreshNodeDefinitions')"
+          @click="resetOrganization"
         />
         <Popover ref="groupingPopover">
           <div class="flex flex-col gap-1 p-2">
@@ -146,7 +139,6 @@ import {
   DEFAULT_SORTING_ID,
   nodeOrganizationService
 } from '@/services/nodeOrganizationService'
-import { useCommandStore } from '@/stores/commandStore'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
 import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
@@ -163,7 +155,6 @@ import NodeBookmarkTreeExplorer from './nodeLibrary/NodeBookmarkTreeExplorer.vue
 const nodeDefStore = useNodeDefStore()
 const nodeBookmarkStore = useNodeBookmarkStore()
 const nodeHelpStore = useNodeHelpStore()
-const commandStore = useCommandStore()
 const expandedKeys = ref<Record<string, boolean>>({})
 const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
 

src/components/templates/TemplateSearchBar.vue

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

@@ -1,30 +0,0 @@
-<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,6 +1,5 @@
 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'
@@ -54,46 +53,10 @@ 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,
@@ -104,18 +67,6 @@ 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',
@@ -128,9 +79,6 @@ describe('TemplateWorkflowView', () => {
         ],
         loading: null,
         ...props
-      },
-      global: {
-        plugins: [i18n]
       }
     })
   }

src/components/templates/TemplateWorkflowView.vue

@@ -1,31 +1,24 @@
 <template>
   <DataView
-    :value="displayTemplates"
+    :value="templates"
     :layout="layout"
     data-key="name"
     :lazy="true"
-    pt:root="h-full grid grid-rows-[auto_1fr_auto]"
+    pt:root="h-full grid grid-rows-[auto_1fr]"
     pt:content="p-2 overflow-auto"
   >
     <template #header>
-      <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 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>
     </template>
 
@@ -40,35 +33,18 @@
     </template>
 
     <template #grid="{ items }">
-      <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
+        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>
     </template>
   </DataView>
@@ -78,21 +54,12 @@
 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'
 
-const { t } = useI18n()
-
-const { title, sourceModule, categoryTitle, loading, templates } = defineProps<{
+defineProps<{
   title: string
   sourceModule: string
   categoryTitle: string
@@ -105,59 +72,6 @@ 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,15 +12,6 @@ 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),
@@ -44,24 +35,23 @@ describe('CompareSliderThumbnail', () => {
 
   it('renders both base and overlay images', () => {
     const wrapper = mountThumbnail()
-    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')
+    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')
   })
 
   it('applies correct alt text to both images', () => {
     const wrapper = mountThumbnail({ alt: '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')
+    const images = wrapper.findAll('img')
+    expect(images[0].attributes('alt')).toBe('Custom Alt Text')
+    expect(images[1].attributes('alt')).toBe('Custom Alt Text')
   })
 
   it('applies clip-path style to overlay image', () => {
     const wrapper = mountThumbnail()
-    const overlayLazyImage = wrapper.findAllComponents({ name: 'LazyImage' })[1]
-    const imageStyle = overlayLazyImage.props('imageStyle')
-    expect(imageStyle.clipPath).toContain('inset')
+    const overlay = wrapper.findAll('img')[1]
+    expect(overlay.attributes('style')).toContain('clip-path')
   })
 
   it('renders slider divider', () => {

src/components/templates/thumbnails/CompareSliderThumbnail.vue

@@ -1,24 +1,24 @@
 <template>
   <BaseThumbnail :is-hovered="isHovered">
-    <LazyImage
+    <img
       :src="baseImageSrc"
       :alt="alt"
-      :image-class="
+      :class="
         isVideoType
           ? 'w-full h-full object-cover'
           : 'max-w-full max-h-64 object-contain'
       "
     />
     <div ref="containerRef" class="absolute inset-0">
-      <LazyImage
+      <img
         :src="overlayImageSrc"
         :alt="alt"
-        :image-class="
+        :class="
           isVideoType
             ? 'w-full h-full object-cover'
             : 'max-w-full max-h-64 object-contain'
         "
-        :image-style="{
+        :style="{
           clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`
         }"
       />
@@ -36,7 +36,6 @@
 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,15 +11,6 @@ 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, {
@@ -34,9 +25,9 @@ describe('DefaultThumbnail', () => {
 
   it('renders image with correct src and alt', () => {
     const wrapper = mountThumbnail()
-    const lazyImage = wrapper.findComponent({ name: 'LazyImage' })
-    expect(lazyImage.props('src')).toBe('/test-image.jpg')
-    expect(lazyImage.props('alt')).toBe('Test Image')
+    const img = wrapper.find('img')
+    expect(img.attributes('src')).toBe('/test-image.jpg')
+    expect(img.attributes('alt')).toBe('Test Image')
   })
 
   it('applies scale transform when hovered', () => {
@@ -44,43 +35,35 @@ describe('DefaultThumbnail', () => {
       isHovered: true,
       hoverZoom: 10
     })
-    const lazyImage = wrapper.findComponent({ name: 'LazyImage' })
-    expect(lazyImage.props('imageStyle')).toEqual({ transform: 'scale(1.1)' })
+    const img = wrapper.find('img')
+    expect(img.attributes('style')).toContain('scale(1.1)')
   })
 
   it('does not apply scale transform when not hovered', () => {
     const wrapper = mountThumbnail({
       isHovered: false
     })
-    const lazyImage = wrapper.findComponent({ name: 'LazyImage' })
-    expect(lazyImage.props('imageStyle')).toBeUndefined()
+    const img = wrapper.find('img')
+    expect(img.attributes('style')).toBeUndefined()
   })
 
   it('applies video styling for video type', () => {
     const wrapper = mountThumbnail({
       isVideo: true
     })
-    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')
+    const img = wrapper.find('img')
+    expect(img.classes()).toContain('w-full')
+    expect(img.classes()).toContain('h-full')
+    expect(img.classes()).toContain('object-cover')
   })
 
   it('applies image styling for non-video type', () => {
     const wrapper = mountThumbnail({
       isVideo: false
     })
-    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')
+    const img = wrapper.find('img')
+    expect(img.classes()).toContain('max-w-full')
+    expect(img.classes()).toContain('object-contain')
   })
 
   it('applies correct styling for webp images', () => {
@@ -88,12 +71,8 @@ describe('DefaultThumbnail', () => {
       src: '/test-video.webp',
       isVideo: true
     })
-    const lazyImage = wrapper.findComponent({ name: 'LazyImage' })
-    const imageClass = lazyImage.props('imageClass')
-    const classString = Array.isArray(imageClass)
-      ? imageClass.join(' ')
-      : imageClass
-    expect(classString).toContain('object-cover')
+    const img = wrapper.find('img')
+    expect(img.classes()).toContain('object-cover')
   })
 
   it('image is not draggable', () => {
@@ -104,15 +83,11 @@ describe('DefaultThumbnail', () => {
 
   it('applies transition classes', () => {
     const wrapper = mountThumbnail()
-    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')
+    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')
   })
 
   it('passes correct props to BaseThumbnail', () => {

src/components/templates/thumbnails/DefaultThumbnail.vue

@@ -1,23 +1,25 @@
 <template>
   <BaseThumbnail :hover-zoom="hoverZoom" :is-hovered="isHovered">
-    <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
-      "
-    />
+    <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>
   </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,15 +11,6 @@ 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, {
@@ -36,39 +27,31 @@ describe('HoverDissolveThumbnail', () => {
 
   it('renders both base and overlay images', () => {
     const wrapper = mountThumbnail()
-    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')
+    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')
   })
 
   it('applies correct alt text to both images', () => {
     const wrapper = mountThumbnail({ alt: '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')
+    const images = wrapper.findAll('img')
+    expect(images[0].attributes('alt')).toBe('Custom Alt Text')
+    expect(images[1].attributes('alt')).toBe('Custom Alt Text')
   })
 
   it('makes overlay image visible when hovered', () => {
     const wrapper = mountThumbnail({ isHovered: true })
-    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')
+    const overlayImage = wrapper.findAll('img')[1]
+    expect(overlayImage.classes()).toContain('opacity-100')
+    expect(overlayImage.classes()).not.toContain('opacity-0')
   })
 
   it('makes overlay image hidden when not hovered', () => {
     const wrapper = mountThumbnail({ isHovered: false })
-    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')
+    const overlayImage = wrapper.findAll('img')[1]
+    expect(overlayImage.classes()).toContain('opacity-0')
+    expect(overlayImage.classes()).not.toContain('opacity-100')
   })
 
   it('passes isHovered prop to BaseThumbnail', () => {
@@ -79,33 +62,21 @@ describe('HoverDissolveThumbnail', () => {
 
   it('applies transition classes to overlay image', () => {
     const wrapper = mountThumbnail()
-    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')
+    const overlayImage = wrapper.findAll('img')[1]
+    expect(overlayImage.classes()).toContain('transition-opacity')
+    expect(overlayImage.classes()).toContain('duration-300')
   })
 
   it('applies correct positioning to both images', () => {
     const wrapper = mountThumbnail()
-    const lazyImages = wrapper.findAllComponents({ name: 'LazyImage' })
+    const images = wrapper.findAll('img')
 
     // Check base image
-    const baseImageClass = lazyImages[0].props('imageClass')
-    const baseClassString = Array.isArray(baseImageClass)
-      ? baseImageClass.join(' ')
-      : baseImageClass
-    expect(baseClassString).toContain('absolute')
-    expect(baseClassString).toContain('inset-0')
+    expect(images[0].classes()).toContain('absolute')
+    expect(images[0].classes()).toContain('inset-0')
 
     // Check overlay image
-    const overlayImageClass = lazyImages[1].props('imageClass')
-    const overlayClassString = Array.isArray(overlayImageClass)
-      ? overlayImageClass.join(' ')
-      : overlayImageClass
-    expect(overlayClassString).toContain('absolute')
-    expect(overlayClassString).toContain('inset-0')
+    expect(images[1].classes()).toContain('absolute')
+    expect(images[1].classes()).toContain('inset-0')
   })
 })

src/components/templates/thumbnails/HoverDissolveThumbnail.vue

@@ -1,23 +1,37 @@
 <template>
   <BaseThumbnail :is-hovered="isHovered">
     <div class="relative w-full h-full">
-      <LazyImage :src="baseImageSrc" :alt="alt" :image-class="baseImageClass" />
-      <LazyImage
+      <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
         :src="overlayImageSrc"
         :alt="alt"
-        :image-class="overlayImageClass"
+        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 }
+        ]"
       />
     </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, isHovered } = defineProps<{
+const { baseImageSrc, overlayImageSrc, isVideo } = defineProps<{
   baseImageSrc: string
   overlayImageSrc: string
   alt: string
@@ -30,17 +44,4 @@ 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/CommandMenubar.vue

@@ -55,30 +55,9 @@
         v-bind="props.action"
         :href="item.url"
         target="_blank"
-        :class="typeof item.class === 'function' ? item.class() : item.class"
-        @mousedown="
-          isZoomCommand(item) ? handleZoomMouseDown(item, $event) : undefined
-        "
-        @click="isZoomCommand(item) ? handleZoomClick($event) : undefined"
       >
-        <i
-          v-if="hasActiveStateSiblings(item)"
-          class="p-menubar-item-icon pi pi-check text-sm"
-          :class="{ invisible: !item.comfyCommand?.active?.() }"
-        />
-        <span
-          v-else-if="
-            item.icon && item.comfyCommand?.id !== 'Comfy.NewBlankWorkflow'
-          "
-          class="p-menubar-item-icon"
-          :class="item.icon"
-        />
+        <span v-if="item.icon" class="p-menubar-item-icon" :class="item.icon" />
         <span class="p-menubar-item-label text-nowrap">{{ item.label }}</span>
-        <i
-          v-if="item.comfyCommand?.id === 'Comfy.NewBlankWorkflow'"
-          class="ml-auto"
-          :class="item.icon"
-        />
         <span
           v-if="item?.comfyCommand?.keybinding"
           class="ml-auto border border-surface rounded text-muted text-xs text-nowrap p-1 keybinding-tag"
@@ -115,7 +94,6 @@ import { useSettingStore } from '@/stores/settingStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { showNativeSystemMenu } from '@/utils/envUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'
-import { whileMouseDown } from '@/utils/mouseDownUtil'
 
 const colorPaletteStore = useColorPaletteStore()
 const menuItemsStore = useMenuItemStore()
@@ -185,22 +163,16 @@ const extraMenuItems: MenuItem[] = [
   },
   { separator: true },
   {
-    key: 'browse-templates',
-    label: t('menuLabels.Browse Templates'),
-    icon: 'pi pi-folder-open',
-    command: () => commandStore.execute('Comfy.BrowseTemplates')
+    key: 'manage-extensions',
+    label: t('menu.manageExtensions'),
+    icon: 'mdi mdi-puzzle-outline',
+    command: showManageExtensions
   },
   {
     key: 'settings',
     label: t('g.settings'),
     icon: 'mdi mdi-cog-outline',
     command: () => showSettings()
-  },
-  {
-    key: 'manage-extensions',
-    label: t('menu.manageExtensions'),
-    icon: 'mdi mdi-puzzle-outline',
-    command: showManageExtensions
   }
 ]
 
@@ -265,36 +237,6 @@ const onMenuShow = () => {
     }
   })
 }
-
-const isZoomCommand = (item: MenuItem) => {
-  return (
-    item.comfyCommand?.id === 'Comfy.Canvas.ZoomIn' ||
-    item.comfyCommand?.id === 'Comfy.Canvas.ZoomOut'
-  )
-}
-
-const handleZoomMouseDown = (item: MenuItem, event: MouseEvent) => {
-  if (item.comfyCommand) {
-    whileMouseDown(
-      event,
-      async () => {
-        await commandStore.execute(item.comfyCommand!.id)
-      },
-      50
-    )
-  }
-}
-
-const handleZoomClick = (event: MouseEvent) => {
-  event.preventDefault()
-  event.stopPropagation()
-  // Prevent the menu from closing for zoom commands
-  return false
-}
-
-const hasActiveStateSiblings = (item: MenuItem): boolean => {
-  return menuItemsStore.menuItemHasActiveStateChildren[item.parentPath]
-}
 </script>
 
 <style scoped>

src/components/topbar/WorkflowTab.vue

@@ -1,13 +1,13 @@
 <template>
-  <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">
+  <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"
+    >
       {{ workflowOption.workflow.filename }}
     </span>
     <div class="relative">
@@ -22,33 +22,23 @@
       />
     </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, onUnmounted, ref } from 'vue'
+import { computed, 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
@@ -65,8 +55,6 @@ 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(() =>
@@ -102,27 +90,6 @@ 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 (
@@ -168,10 +135,6 @@ usePragmaticDroppable(tabGetter, {
     }
   }
 })
-
-onUnmounted(() => {
-  popoverRef.value?.hidePopover()
-})
 </script>
 
 <style scoped>

src/components/topbar/WorkflowTabPopover.vue

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

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

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

@@ -3,7 +3,8 @@ import {
   LGraphNode,
   Positionable,
   Reroute
-} from '@/lib/litegraph/src/litegraph'
+} from '@comfyorg/litegraph'
+
 import { app } from '@/scripts/app'
 import { useCanvasStore } from '@/stores/graphStore'
 import {

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

src/composables/node/useNodeAnimatedImage.ts

@@ -1,5 +1,6 @@
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { IWidget } from '@/lib/litegraph/src/types/widgets'
+import type { LGraphNode } from '@comfyorg/litegraph'
+import type { IWidget } from '@comfyorg/litegraph/dist/types/widgets'
+
 import { ANIM_PREVIEW_WIDGET } from '@/scripts/app'
 import { createImageHost } from '@/scripts/ui/imagePreview'
 import { fitDimensionsToNodeWidth } from '@/utils/imageUtil'