[bugfix] Fix Vue node import path after refactoring

Update LGraphNode import path from old location to new domain-driven architecture path.

🤖 Generated with [Claude Code](https://claude.ai/code)

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

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

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

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

@@ -145,7 +145,7 @@ jobs:
             -d '{
               "required_status_checks": {
                 "strict": true,
-                "contexts": ["lint-and-format", "test", "playwright-tests"]
+                "contexts": ["build", "test"]
               },
               "enforce_admins": false,
               "required_pull_request_reviews": {

.github/workflows/eslint.yaml

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

.github/workflows/format.yaml

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

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

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

.github/workflows/test-ui.yaml

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

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

@@ -75,7 +75,7 @@ jobs:
 
       - name: Create Pull Request
         if: steps.check-changes.outputs.changed == 'true'
-        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
+        uses: peter-evans/create-pull-request@v7
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: '[chore] Update ComfyUI-Manager API types from ComfyUI-Manager@${{ steps.manager-info.outputs.commit }}'

.gitignore

@@ -41,7 +41,6 @@ tests-ui/workflows/examples
 /blob-report/
 /playwright/.cache/
 browser_tests/**/*-win32.png
-browser_tests/**/*-darwin.png
 
 .env
 

AGENTS.md

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

CONTRIBUTING.md

@@ -1,333 +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')`
-
-## Icons
-
-The project supports three types of icons, all with automatic imports (no manual imports needed):
-
-1. **PrimeIcons** - Built-in PrimeVue icons using CSS classes: `<i class="pi pi-plus" />`
-2. **Iconify Icons** - 200,000+ icons from various libraries: `<i-lucide:settings />`, `<i-mdi:folder />`
-3. **Custom Icons** - Your own SVG icons: `<i-comfy:workflow />`
-
-Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `src/assets/icons/custom/`.
-
-For detailed instructions and code examples, see [src/assets/icons/README.md](src/assets/icons/README.md).
-
-## Working with litegraph.js
-
-Since Aug 5, 2025, litegraph.js is now integrated directly into this repository. It was merged using git subtree to preserve the complete commit history ([PR #4667](https://github.com/Comfy-Org/ComfyUI_frontend/pull/4667), [ADR](docs/adr/0001-merge-litegraph-into-frontend.md)).
-
-### Important Notes
-
-- **Issue References**: Commits from the original litegraph repository may contain issue/PR numbers (e.g., #4667) that refer to issues/PRs in the original litegraph.js repository, not this one.
-- **File Paths**: When viewing historical commits, file paths may show the original structure before the subtree merge. In those cases, just consider the paths relative to the new litegraph folder.
-- **Contributing**: All litegraph modifications should now be made directly in this repository.
-
-The original litegraph repository (https://github.com/Comfy-Org/litegraph.js) is now archived.
-
-## Submitting Changes
-
-### Pull Request Process
-
-1. Ensure your branch is up to date with main
-2. Run all tests and ensure they pass
-3. Create a pull request with a clear title and description
-4. Use conventional commit format for PR titles:
-   - `[feat]` for new features
-   - `[fix]` for bug fixes
-   - `[docs]` for documentation
-   - `[refactor]` for code refactoring
-   - `[test]` for test additions/changes
-   - `[chore]` for maintenance tasks
-
-### PR Description Template
-
-```
-## Description
-Brief description of the changes
-
-## Type of Change
-- [ ] Bug fix
-- [ ] New feature
-- [ ] Breaking change
-- [ ] Documentation update
-
-## Testing
-- [ ] Unit tests pass
-- [ ] Component tests pass
-- [ ] Browser tests pass (if applicable)
-- [ ] Manual testing completed
-
-## Screenshots (if applicable)
-Add screenshots for UI changes
-```
-
-### Review Process
-
-1. All PRs require at least one review
-2. Address review feedback promptly
-3. Keep PRs focused - one feature/fix per PR
-4. Large features should be discussed in an issue first
-
-## Questions?
-
-If you have questions about contributing:
-- Check existing issues and discussions
-- Ask in our [Discord](https://discord.com/invite/comfyorg)
-- Open a new issue for clarification
-
-Thank you for contributing to ComfyUI Frontend!

README.md

@@ -4,6 +4,8 @@
 
 **Official front-end implementation of [ComfyUI](https://github.com/comfyanonymous/ComfyUI).**
 
+<!-- Testing automatic backport workflow -->
+
 [![Website][website-shield]][website-url]
 [![Discord][discord-shield]][discord-url]
 [![Matrix][matrix-shield]][matrix-url]
@@ -512,18 +514,201 @@ 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!
+
+### 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.
 
 ## 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
+
+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.
 
 ### i18n
 

browser_tests/fixtures/ComfyPage.ts

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

browser_tests/fixtures/utils/vueNodeFixtures.ts

@@ -0,0 +1,131 @@
+import type { Locator, Page } from '@playwright/test'
+
+import type { NodeReference } from './litegraphUtils'
+
+/**
+ * VueNodeFixture provides Vue-specific testing utilities for interacting with
+ * Vue node components. It bridges the gap between litegraph node references
+ * and Vue UI components.
+ */
+export class VueNodeFixture {
+  constructor(
+    private readonly nodeRef: NodeReference,
+    private readonly page: Page
+  ) {}
+
+  /**
+   * Get the node's header element using data-testid
+   */
+  async getHeader(): Promise<Locator> {
+    const nodeId = this.nodeRef.id
+    return this.page.locator(`[data-testid="node-header-${nodeId}"]`)
+  }
+
+  /**
+   * Get the node's title element
+   */
+  async getTitleElement(): Promise<Locator> {
+    const header = await this.getHeader()
+    return header.locator('[data-testid="node-title"]')
+  }
+
+  /**
+   * Get the current title text
+   */
+  async getTitle(): Promise<string> {
+    const titleElement = await this.getTitleElement()
+    return (await titleElement.textContent()) || ''
+  }
+
+  /**
+   * Set a new title by double-clicking and entering text
+   */
+  async setTitle(newTitle: string): Promise<void> {
+    const titleElement = await this.getTitleElement()
+    await titleElement.dblclick()
+
+    const input = (await this.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.fill(newTitle)
+    await input.press('Enter')
+  }
+
+  /**
+   * Cancel title editing
+   */
+  async cancelTitleEdit(): Promise<void> {
+    const titleElement = await this.getTitleElement()
+    await titleElement.dblclick()
+
+    const input = (await this.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.press('Escape')
+  }
+
+  /**
+   * Check if the title is currently being edited
+   */
+  async isEditingTitle(): Promise<boolean> {
+    const header = await this.getHeader()
+    const input = header.locator('[data-testid="node-title-input"]')
+    return await input.isVisible()
+  }
+
+  /**
+   * Get the collapse/expand button
+   */
+  async getCollapseButton(): Promise<Locator> {
+    const header = await this.getHeader()
+    return header.locator('[data-testid="node-collapse-button"]')
+  }
+
+  /**
+   * Toggle the node's collapsed state
+   */
+  async toggleCollapse(): Promise<void> {
+    const button = await this.getCollapseButton()
+    await button.click()
+  }
+
+  /**
+   * Get the collapse icon element
+   */
+  async getCollapseIcon(): Promise<Locator> {
+    const button = await this.getCollapseButton()
+    return button.locator('i')
+  }
+
+  /**
+   * Get the collapse icon's CSS classes
+   */
+  async getCollapseIconClass(): Promise<string> {
+    const icon = await this.getCollapseIcon()
+    return (await icon.getAttribute('class')) || ''
+  }
+
+  /**
+   * Check if the collapse button is visible
+   */
+  async isCollapseButtonVisible(): Promise<boolean> {
+    const button = await this.getCollapseButton()
+    return await button.isVisible()
+  }
+
+  /**
+   * Get the node's body/content element
+   */
+  async getBody(): Promise<Locator> {
+    const nodeId = this.nodeRef.id
+    return this.page.locator(`[data-testid="node-body-${nodeId}"]`)
+  }
+
+  /**
+   * Check if the node body is visible (not collapsed)
+   */
+  async isBodyVisible(): Promise<boolean> {
+    const body = await this.getBody()
+    return await body.isVisible()
+  }
+}

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/commandSearchBox.spec.ts

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

browser_tests/tests/interaction.spec.ts

@@ -1,4 +1,4 @@
-import { Locator, expect } from '@playwright/test'
+import { expect } from '@playwright/test'
 import { Position } from '@vueuse/core'
 
 import {
@@ -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/rerouteNode.spec.ts

@@ -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/subgraph-rename-dialog.spec.ts

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

browser_tests/tests/subgraph.spec.ts

@@ -155,182 +155,6 @@ test.describe('Subgraph Operations', () => {
       expect(newInputName).toBe(RENAMED_INPUT_NAME)
       expect(newInputName).not.toBe(initialInputLabel)
     })
-
-    test('Can rename input slots via double-click', async ({ comfyPage }) => {
-      await comfyPage.loadWorkflow('basic-subgraph')
-
-      const subgraphNode = await comfyPage.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialInputLabel = await comfyPage.page.evaluate(() => {
-        const graph = window['app'].canvas.graph
-        return graph.inputs?.[0]?.label || null
-      })
-
-      await comfyPage.doubleClickSubgraphInputSlot(initialInputLabel)
-
-      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-        state: 'visible'
-      })
-      await comfyPage.page.fill(SELECTORS.promptDialog, RENAMED_INPUT_NAME)
-      await comfyPage.page.keyboard.press('Enter')
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      const newInputName = await comfyPage.page.evaluate(() => {
-        const graph = window['app'].canvas.graph
-        return graph.inputs?.[0]?.label || null
-      })
-
-      expect(newInputName).toBe(RENAMED_INPUT_NAME)
-      expect(newInputName).not.toBe(initialInputLabel)
-    })
-
-    test('Can rename output slots via double-click', async ({ comfyPage }) => {
-      await comfyPage.loadWorkflow('basic-subgraph')
-
-      const subgraphNode = await comfyPage.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialOutputLabel = await comfyPage.page.evaluate(() => {
-        const graph = window['app'].canvas.graph
-        return graph.outputs?.[0]?.label || null
-      })
-
-      await comfyPage.doubleClickSubgraphOutputSlot(initialOutputLabel)
-
-      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-        state: 'visible'
-      })
-      const renamedOutputName = 'renamed_output'
-      await comfyPage.page.fill(SELECTORS.promptDialog, renamedOutputName)
-      await comfyPage.page.keyboard.press('Enter')
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      const newOutputName = await comfyPage.page.evaluate(() => {
-        const graph = window['app'].canvas.graph
-        return graph.outputs?.[0]?.label || null
-      })
-
-      expect(newOutputName).toBe(renamedOutputName)
-      expect(newOutputName).not.toBe(initialOutputLabel)
-    })
-
-    test('Right-click context menu still works alongside double-click', async ({
-      comfyPage
-    }) => {
-      await comfyPage.loadWorkflow('basic-subgraph')
-
-      const subgraphNode = await comfyPage.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialInputLabel = await comfyPage.page.evaluate(() => {
-        const graph = window['app'].canvas.graph
-        return graph.inputs?.[0]?.label || null
-      })
-
-      // Test that right-click still works for renaming
-      await comfyPage.rightClickSubgraphInputSlot(initialInputLabel)
-      await comfyPage.clickLitegraphContextMenuItem('Rename Slot')
-
-      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-        state: 'visible'
-      })
-      const rightClickRenamedName = 'right_click_renamed'
-      await comfyPage.page.fill(SELECTORS.promptDialog, rightClickRenamedName)
-      await comfyPage.page.keyboard.press('Enter')
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      const newInputName = await comfyPage.page.evaluate(() => {
-        const graph = window['app'].canvas.graph
-        return graph.inputs?.[0]?.label || null
-      })
-
-      expect(newInputName).toBe(rightClickRenamedName)
-      expect(newInputName).not.toBe(initialInputLabel)
-    })
-
-    test('Can double-click on slot label text to rename', async ({
-      comfyPage
-    }) => {
-      await comfyPage.loadWorkflow('basic-subgraph')
-
-      const subgraphNode = await comfyPage.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-
-      const initialInputLabel = await comfyPage.page.evaluate(() => {
-        const graph = window['app'].canvas.graph
-        return graph.inputs?.[0]?.label || null
-      })
-
-      // Use direct pointer event approach to double-click on label
-      await comfyPage.page.evaluate(() => {
-        const app = window['app']
-        const graph = app.canvas.graph
-        const input = graph.inputs?.[0]
-
-        if (!input?.labelPos) {
-          throw new Error('Could not get label position for testing')
-        }
-
-        // Use labelPos for more precise clicking on the text
-        const testX = input.labelPos[0]
-        const testY = input.labelPos[1]
-
-        const leftClickEvent = {
-          canvasX: testX,
-          canvasY: testY,
-          button: 0, // Left mouse button
-          preventDefault: () => {},
-          stopPropagation: () => {}
-        }
-
-        const inputNode = graph.inputNode
-        if (inputNode?.onPointerDown) {
-          inputNode.onPointerDown(
-            leftClickEvent,
-            app.canvas.pointer,
-            app.canvas.linkConnector
-          )
-
-          // Trigger double-click if pointer has the handler
-          if (app.canvas.pointer.onDoubleClick) {
-            app.canvas.pointer.onDoubleClick(leftClickEvent)
-          }
-        }
-      })
-
-      // Wait for dialog to appear
-      await comfyPage.page.waitForTimeout(200)
-      await comfyPage.nextFrame()
-
-      await comfyPage.page.waitForSelector(SELECTORS.promptDialog, {
-        state: 'visible'
-      })
-      const labelClickRenamedName = 'label_click_renamed'
-      await comfyPage.page.fill(SELECTORS.promptDialog, labelClickRenamedName)
-      await comfyPage.page.keyboard.press('Enter')
-
-      // Force re-render
-      await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
-      await comfyPage.nextFrame()
-
-      const newInputName = await comfyPage.page.evaluate(() => {
-        const graph = window['app'].canvas.graph
-        return graph.inputs?.[0]?.label || null
-      })
-
-      expect(newInputName).toBe(labelClickRenamedName)
-      expect(newInputName).not.toBe(initialInputLabel)
-    })
   })
 
   test.describe('Subgraph Creation and Deletion', () => {
@@ -372,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', () => {

browser_tests/tests/vueNodes/NodeHeader.spec.ts

@@ -0,0 +1,138 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../fixtures/ComfyPage'
+import { VueNodeFixture } from '../../fixtures/utils/vueNodeFixtures'
+
+test.describe('NodeHeader', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Enabled')
+    await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
+    await comfyPage.setSetting('Comfy.EnableTooltips', true)
+    await comfyPage.setup()
+    // Load single SaveImage node workflow (positioned below menu bar)
+    await comfyPage.loadWorkflow('single_save_image_node')
+  })
+
+  test('displays node title', async ({ comfyPage }) => {
+    // Get the single SaveImage node from the workflow
+    const nodes = await comfyPage.getNodeRefsByType('SaveImage')
+    expect(nodes.length).toBeGreaterThanOrEqual(1)
+
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    const title = await vueNode.getTitle()
+    expect(title).toBe('Save Image')
+
+    // Verify title is visible in the header
+    const header = await vueNode.getHeader()
+    await expect(header).toContainText('Save Image')
+  })
+
+  test('allows title renaming', async ({ comfyPage }) => {
+    // Get the single SaveImage node from the workflow
+    const nodes = await comfyPage.getNodeRefsByType('SaveImage')
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    // Test renaming with Enter
+    await vueNode.setTitle('My Custom Sampler')
+    const newTitle = await vueNode.getTitle()
+    expect(newTitle).toBe('My Custom Sampler')
+
+    // Verify the title is displayed
+    const header = await vueNode.getHeader()
+    await expect(header).toContainText('My Custom Sampler')
+
+    // Test cancel with Escape
+    const titleElement = await vueNode.getTitleElement()
+    await titleElement.dblclick()
+    await comfyPage.nextFrame()
+
+    // Type a different value but cancel
+    const input = (await vueNode.getHeader()).locator(
+      '[data-testid="node-title-input"]'
+    )
+    await input.fill('This Should Be Cancelled')
+    await input.press('Escape')
+    await comfyPage.nextFrame()
+
+    // Title should remain as the previously saved value
+    const titleAfterCancel = await vueNode.getTitle()
+    expect(titleAfterCancel).toBe('My Custom Sampler')
+  })
+
+  test('handles node collapsing', async ({ comfyPage }) => {
+    // Get the single SaveImage node from the workflow
+    const nodes = await comfyPage.getNodeRefsByType('SaveImage')
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    // Initially should not be collapsed
+    expect(await node.isCollapsed()).toBe(false)
+    const body = await vueNode.getBody()
+    await expect(body).toBeVisible()
+
+    // Collapse the node
+    await vueNode.toggleCollapse()
+    expect(await node.isCollapsed()).toBe(true)
+
+    // Verify node content is hidden
+    const collapsedSize = await node.getSize()
+    await expect(body).not.toBeVisible()
+
+    // Expand again
+    await vueNode.toggleCollapse()
+    expect(await node.isCollapsed()).toBe(false)
+    await expect(body).toBeVisible()
+
+    // Size should be restored
+    const expandedSize = await node.getSize()
+    expect(expandedSize.height).toBeGreaterThanOrEqual(collapsedSize.height)
+  })
+
+  test('shows collapse/expand icon state', async ({ comfyPage }) => {
+    // Get the single SaveImage node from the workflow
+    const nodes = await comfyPage.getNodeRefsByType('SaveImage')
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    // Check initial expanded state icon
+    let iconClass = await vueNode.getCollapseIconClass()
+    expect(iconClass).toContain('pi-chevron-down')
+
+    // Collapse and check icon
+    await vueNode.toggleCollapse()
+    iconClass = await vueNode.getCollapseIconClass()
+    expect(iconClass).toContain('pi-chevron-right')
+
+    // Expand and check icon
+    await vueNode.toggleCollapse()
+    iconClass = await vueNode.getCollapseIconClass()
+    expect(iconClass).toContain('pi-chevron-down')
+  })
+
+  test('preserves title when collapsing/expanding', async ({ comfyPage }) => {
+    // Get the single SaveImage node from the workflow
+    const nodes = await comfyPage.getNodeRefsByType('SaveImage')
+    const node = nodes[0]
+    const vueNode = new VueNodeFixture(node, comfyPage.page)
+
+    // Set custom title
+    await vueNode.setTitle('Test Sampler')
+    expect(await vueNode.getTitle()).toBe('Test Sampler')
+
+    // Collapse
+    await vueNode.toggleCollapse()
+    expect(await vueNode.getTitle()).toBe('Test Sampler')
+
+    // Expand
+    await vueNode.toggleCollapse()
+    expect(await vueNode.getTitle()).toBe('Test Sampler')
+
+    // Verify title is still displayed
+    const header = await vueNode.getHeader()
+    await expect(header).toContainText('Test Sampler')
+  })
+})

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(['Workflow', 'New'])
-    const thumbnailImg = await getTabThumbnailImage(
-      comfyPage,
-      0,
-      'Unsaved Workflow'
-    )
-    await expect(thumbnailImg).toBeVisible()
-  })
-
-  test('Should not show thumbnail for active tab', async ({ comfyPage }) => {
-    await comfyPage.menu.topbar.triggerTopbarCommand(['Workflow', 'New'])
-    const thumbnailImg = await getTabThumbnailImage(
-      comfyPage,
-      1,
-      'Unsaved Workflow (2)'
-    )
-    await expect(thumbnailImg).not.toBeVisible()
-  })
-
-  async function addNode(comfyPage: ComfyPage, category: string, node: string) {
-    const canvasArea = await comfyPage.canvas.boundingBox()
-
-    await comfyPage.page.mouse.move(
-      canvasArea!.x + canvasArea!.width - 100,
-      100
-    )
-    await comfyPage.delay(300) // Wait for the popover to hide
-
-    await comfyPage.rightClickCanvas(200, 200)
-    await comfyPage.page.getByText('Add Node').click()
-    await comfyPage.nextFrame()
-    await comfyPage.page.getByText(category).click()
-    await comfyPage.nextFrame()
-    await comfyPage.page.getByText(node).click()
-    await comfyPage.nextFrame()
-  }
-
-  test('Thumbnail should update when switching tabs', async ({ comfyPage }) => {
-    // Wait for initial workflow to load
-    await comfyPage.nextFrame()
-
-    // Create a new workflow (tab 1) which will be empty
-    await comfyPage.menu.topbar.triggerTopbarCommand(['Workflow', 'New'])
-    await comfyPage.nextFrame()
-
-    // Now we have two tabs: tab 0 (default workflow with nodes) and tab 1 (empty)
-    // Tab 1 is currently active, so we can only get thumbnail for tab 0
-
-    // Step 1: Different tabs should show different previews
-    const tab0ThumbnailWithNodes = await getNodeThumbnailBase64(comfyPage, 0)
-
-    // Add a node to tab 1 (current active tab)
-    await addNode(comfyPage, 'loaders', 'Load Checkpoint')
-    await comfyPage.nextFrame()
-
-    // Switch to tab 0 so we can get tab 1's thumbnail
-    await (await getTab(comfyPage, 0)).click()
-    await comfyPage.nextFrame()
-
-    const tab1ThumbnailWithNode = await getNodeThumbnailBase64(comfyPage, 1)
-
-    // The thumbnails should be different
-    expect(tab0ThumbnailWithNodes).not.toBe(tab1ThumbnailWithNode)
-
-    // Step 2: Switching without changes shouldn't update thumbnail
-    const tab1ThumbnailBefore = await getNodeThumbnailBase64(comfyPage, 1)
-
-    // Switch to tab 1 and back to tab 0 without making changes
-    await (await getTab(comfyPage, 1)).click()
-    await comfyPage.nextFrame()
-    await (await getTab(comfyPage, 0)).click()
-    await comfyPage.nextFrame()
-
-    const tab1ThumbnailAfter = await getNodeThumbnailBase64(comfyPage, 1)
-    expect(tab1ThumbnailBefore).toBe(tab1ThumbnailAfter)
-
-    // Step 3: Adding another node should cause thumbnail to change
-    // We're on tab 0, add a node
-    await addNode(comfyPage, 'loaders', 'Load VAE')
-    await comfyPage.nextFrame()
-
-    // Switch to tab 1 and back to update tab 0's thumbnail
-    await (await getTab(comfyPage, 1)).click()
-
-    const tab0ThumbnailAfterNewNode = await getNodeThumbnailBase64(comfyPage, 0)
-
-    // The thumbnail should have changed after adding a node
-    expect(tab0ThumbnailWithNodes).not.toBe(tab0ThumbnailAfterNewNode)
-  })
-})

docs/FEATURE_FLAGS.md

@@ -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/0002-crdt-based-layout-system.md

@@ -0,0 +1,111 @@
+# 2. CRDT-Based Layout System
+
+Date: 2024-08-16
+
+## Status
+
+Accepted
+
+## Context
+
+ComfyUI's node graph editor faces fundamental architectural limitations that prevent us from achieving our product goals:
+
+### The Problem
+
+In the current system, each node manages its own position directly within LiteGraph. This creates several critical issues:
+
+1. **Performance Degradation**: Every UI update requires traversing the entire graph to detect changes. With graphs containing 100+ nodes, this polling-based approach causes visible lag during interactions.
+
+2. **Snap-Back Hell**: Multiple systems (LiteGraph canvas, Vue widgets, drag handlers) fight over node positions. Users experience frustrating "snap-back" where nodes jump between positions during drag operations.
+
+3. **No Collaboration Path**: Direct mutation of node positions makes real-time collaboration impossible. There's no way to merge concurrent edits from multiple users without conflicts.
+
+4. **Limited Renderer Options**: Position data is tightly coupled to LiteGraph's canvas renderer, blocking us from implementing WebGL rendering for large graphs or accessibility-focused DOM rendering.
+
+5. **Missing Features**: Without a proper event system, we can't implement undo/redo, animation systems, or viewport culling efficiently.
+
+### Why Now?
+
+- User complaints about performance with large workflows are increasing
+- The AI art community expects real-time collaboration (see Figma, Miro)
+- Accessibility requirements demand alternative rendering modes
+- The technical debt is compounding with each new feature
+
+## Decision
+
+We will implement a centralized layout tree using CRDT (Conflict-free Replicated Data Types) as the single source of truth for all spatial data.
+
+### Key Design Choices
+
+1. **CRDT-Based Layout Tree**: Use Yjs to maintain a centralized tree structure that owns all node positions, sizes, and spatial relationships.
+
+2. **Command Pattern**: Every position change is an explicit command/operation rather than direct mutation. This enables:
+   - Precise operation history for undo/redo
+   - Automatic conflict resolution for concurrent edits
+   - Event stream for observers without polling
+
+3. **Unidirectional Data Flow**: 
+   ```
+   User Input → Layout Commands → CRDT Tree → Renderers
+   ```
+   LiteGraph becomes a pure renderer that receives position updates, never mutates them.
+
+4. **Spatial Indexing**: The tree structure naturally supports a QuadTree spatial index for O(log n) viewport queries instead of O(n) full scans.
+
+### Why CRDT?
+
+CRDTs solve our core problems elegantly:
+- **Local-First**: Works perfectly for single-user while being collaboration-ready
+- **Automatic Conflict Resolution**: No more snap-back from competing updates
+- **Event-Driven**: Changes propagate through observers, not polling
+- **Memory Efficient**: Only changed portions of the tree are updated
+
+### Implementation Approach
+
+Phase 1: Build alongside existing system
+- Layout tree observes LiteGraph changes initially
+- Gradually migrate interactions to command pattern
+- Maintain full backwards compatibility
+
+Phase 2: Invert control
+- Layout tree becomes source of truth
+- LiteGraph receives updates via one-way sync
+- Enable alternative renderers
+
+## Consequences
+
+### Positive
+
+- **10x Performance**: Viewport culling and spatial indexing eliminate full graph traversals
+- **Multiplayer Ready**: CRDT foundation enables real-time collaboration without architecture changes
+- **Undo/Redo**: Command pattern makes history trivial to implement
+- **Renderer Flexibility**: Clean separation allows WebGL, DOM, or hybrid rendering
+- **Developer Experience**: Clear data flow and event system simplify debugging
+
+### Negative
+
+- **Learning Curve**: Team needs to understand CRDT concepts and command pattern
+- **Migration Complexity**: Existing code must be carefully migrated to new system
+- **Initial Memory Overhead**: ~30KB for Yjs library + operation history storage
+
+### Mitigations
+
+- Provide clear migration guides and examples
+- Build compatibility layer for gradual migration
+- Implement operation history pruning for long-running sessions
+
+## Notes
+
+This architecture aligns with modern state management patterns seen in Figma, Linear, and other collaborative tools. The investment in CRDT infrastructure pays dividends across multiple feature areas and positions ComfyUI as a modern, collaborative AI workflow tool.
+
+The command pattern also opens doors for:
+- Macro recording and playback
+- Automated testing of UI interactions  
+- Remote control via API
+- AI-assisted layout optimization
+
+## References
+
+- [Yjs Documentation](https://docs.yjs.dev/)
+- [CRDTs: The Hard Parts](https://martin.kleppmann.com/2020/07/06/crdt-hard-parts-hydra.html)
+- [Figma's Multiplayer Technology](https://www.figma.com/blog/how-figmas-multiplayer-technology-works/)

docs/adr/README.md

@@ -11,6 +11,7 @@ An Architecture Decision Record captures an important architectural decision mad
 | ADR | Title | Status | Date |
 |-----|-------|--------|------|
 | [0001](0001-merge-litegraph-into-frontend.md) | Merge LiteGraph.js into ComfyUI Frontend | Accepted | 2025-08-05 |
+| [0002](0002-crdt-based-layout-system.md) | CRDT-Based Layout System | Accepted | 2024-08-16 |
 
 ## Creating a New ADR
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.26.1",
+  "version": "1.25.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@comfyorg/comfyui-frontend",
-      "version": "1.26.1",
+      "version": "1.25.5",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
@@ -28,6 +28,7 @@
         "@xterm/xterm": "^5.5.0",
         "algoliasearch": "^5.21.0",
         "axios": "^1.8.2",
+        "chart.js": "^4.5.0",
         "dompurify": "^3.2.5",
         "dotenv": "^16.4.5",
         "extendable-media-recorder": "^9.2.27",
@@ -48,6 +49,7 @@
         "vue-i18n": "^9.14.3",
         "vue-router": "^4.4.3",
         "vuefire": "^3.2.1",
+        "yjs": "^13.6.27",
         "zod": "^3.23.8",
         "zod-validation-error": "^3.3.0"
       },
@@ -2745,6 +2747,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
     "node_modules/@langchain/core": {
       "version": "0.2.36",
       "resolved": "https://registry.npmjs.org/@langchain/core/-/core-0.2.36.tgz",
@@ -6321,6 +6329,18 @@
         "node": "*"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
+      "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/check-error": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
@@ -10084,6 +10104,15 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/isomorphic.js": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz",
+      "integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==",
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/jackspeak": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz",
@@ -10887,6 +10916,26 @@
       "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
       "dev": true
     },
+    "node_modules/lib0": {
+      "version": "0.2.114",
+      "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.114.tgz",
+      "integrity": "sha512-gcxmNFzA4hv8UYi8j43uPlQ7CGcyMJ2KQb5kZASw6SnAKAf10hK12i2fjrS3Cl/ugZa5Ui6WwIu1/6MIXiHttQ==",
+      "dependencies": {
+        "isomorphic.js": "^0.2.4"
+      },
+      "bin": {
+        "0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js",
+        "0gentesthtml": "bin/gentesthtml.js",
+        "0serve": "bin/0serve.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/lie": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
@@ -17898,6 +17947,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/yjs": {
+      "version": "13.6.27",
+      "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.27.tgz",
+      "integrity": "sha512-OIDwaflOaq4wC6YlPBy2L6ceKeKuF7DeTxx+jPzv1FHn9tCZ0ZwSRnUBxD05E3yed46fv/FWJbvR+Ud7x0L7zw==",
+      "dependencies": {
+        "lib0": "^0.2.99"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=8.0.0"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/yn": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.26.1",
+  "version": "1.25.5",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -94,6 +94,7 @@
     "@xterm/xterm": "^5.5.0",
     "algoliasearch": "^5.21.0",
     "axios": "^1.8.2",
+    "chart.js": "^4.5.0",
     "dompurify": "^3.2.5",
     "dotenv": "^16.4.5",
     "extendable-media-recorder": "^9.2.27",
@@ -114,6 +115,7 @@
     "vue-i18n": "^9.14.3",
     "vue-router": "^4.4.3",
     "vuefire": "^3.2.1",
+    "yjs": "^13.6.27",
     "zod": "^3.23.8",
     "zod-validation-error": "^3.3.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'] },

src/assets/css/style.css

@@ -5,6 +5,7 @@
   @tailwind utilities;
 }
 
+
 :root {
   --fg-color: #000;
   --bg-color: #fff;
@@ -134,6 +135,188 @@ body {
   border: thin solid;
 }
 
+/* Shared markdown content styling for consistent rendering across components */
+.comfy-markdown-content {
+  /* Typography */
+  font-size: 0.875rem; /* text-sm */
+  line-height: 1.6;
+  word-wrap: break-word;
+}
+
+/* Headings */
+.comfy-markdown-content h1 {
+  font-size: 22px; /* text-[22px] */
+  font-weight: 700; /* font-bold */
+  margin-top: 2rem; /* mt-8 */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+.comfy-markdown-content h1:first-child {
+  margin-top: 0; /* first:mt-0 */
+}
+
+.comfy-markdown-content h2 {
+  font-size: 18px; /* text-[18px] */
+  font-weight: 700; /* font-bold */
+  margin-top: 2rem; /* mt-8 */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+.comfy-markdown-content h2:first-child {
+  margin-top: 0; /* first:mt-0 */
+}
+
+.comfy-markdown-content h3 {
+  font-size: 16px; /* text-[16px] */
+  font-weight: 700; /* font-bold */
+  margin-top: 2rem; /* mt-8 */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+.comfy-markdown-content h3:first-child {
+  margin-top: 0; /* first:mt-0 */
+}
+
+.comfy-markdown-content h4,
+.comfy-markdown-content h5,
+.comfy-markdown-content h6 {
+  margin-top: 2rem; /* mt-8 */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+.comfy-markdown-content h4:first-child,
+.comfy-markdown-content h5:first-child,
+.comfy-markdown-content h6:first-child {
+  margin-top: 0; /* first:mt-0 */
+}
+
+/* Paragraphs */
+.comfy-markdown-content p {
+  margin: 0 0 0.5em;
+}
+
+.comfy-markdown-content p:last-child {
+  margin-bottom: 0;
+}
+
+/* First child reset */
+.comfy-markdown-content *:first-child {
+  margin-top: 0; /* mt-0 */
+}
+
+/* Lists */
+.comfy-markdown-content ul,
+.comfy-markdown-content ol {
+  padding-left: 2rem; /* pl-8 */
+  margin: 0.5rem 0; /* my-2 */
+}
+
+/* Nested lists */
+.comfy-markdown-content ul ul,
+.comfy-markdown-content ol ol,
+.comfy-markdown-content ul ol,
+.comfy-markdown-content ol ul {
+  padding-left: 1.5rem; /* pl-6 */
+  margin: 0.5rem 0; /* my-2 */
+}
+
+.comfy-markdown-content li {
+  margin: 0.5rem 0; /* my-2 */
+}
+
+/* Code */
+.comfy-markdown-content code {
+  color: var(--code-text-color);
+  background-color: var(--code-bg-color);
+  border-radius: 0.25rem; /* rounded */
+  padding: 0.125rem 0.375rem; /* px-1.5 py-0.5 */
+  font-family: monospace;
+}
+
+.comfy-markdown-content pre {
+  background-color: var(--code-block-bg-color);
+  border-radius: 0.25rem; /* rounded */
+  padding: 1rem; /* p-4 */
+  margin: 1rem 0; /* my-4 */
+  overflow-x: auto; /* overflow-x-auto */
+}
+
+.comfy-markdown-content pre code {
+  background-color: transparent; /* bg-transparent */
+  padding: 0; /* p-0 */
+  color: var(--p-text-color);
+}
+
+/* Tables */
+.comfy-markdown-content table {
+  width: 100%; /* w-full */
+  border-collapse: collapse; /* border-collapse */
+}
+
+.comfy-markdown-content th,
+.comfy-markdown-content td {
+  padding: 0.5rem; /* px-2 py-2 */
+}
+
+.comfy-markdown-content th {
+  color: var(--fg-color);
+}
+
+.comfy-markdown-content td {
+  color: var(--drag-text);
+}
+
+.comfy-markdown-content tr {
+  border-bottom: 1px solid var(--content-bg);
+}
+
+.comfy-markdown-content tr:last-child {
+  border-bottom: none;
+}
+
+.comfy-markdown-content thead {
+  border-bottom: 1px solid var(--p-text-color);
+}
+
+/* Links */
+.comfy-markdown-content a {
+  color: var(--drag-text);
+  text-decoration: underline;
+}
+
+/* Media */
+.comfy-markdown-content img,
+.comfy-markdown-content video {
+  max-width: 100%; /* max-w-full */
+  height: auto; /* h-auto */
+  display: block; /* block */
+  margin-bottom: 1rem; /* mb-4 */
+}
+
+/* Blockquotes */
+.comfy-markdown-content blockquote {
+  border-left: 3px solid var(--p-primary-color, var(--primary-bg));
+  padding-left: 0.75em;
+  margin: 0.5em 0;
+  opacity: 0.8;
+}
+
+/* Horizontal rule */
+.comfy-markdown-content hr {
+  border: none;
+  border-top: 1px solid var(--p-border-color, var(--border-color));
+  margin: 1em 0;
+}
+
+/* Strong and emphasis */
+.comfy-markdown-content strong {
+  font-weight: bold;
+}
+
+.comfy-markdown-content em {
+  font-style: italic;
+}
+
 .comfy-modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
@@ -637,3 +820,92 @@ audio.comfy-audio.empty-audio-widget {
   width: calc(100vw - env(titlebar-area-width, 100vw));
 }
 /* End of [Desktop] Electron window specific styles */
+
+/* Vue Node LOD (Level of Detail) System */
+/* These classes control rendering detail based on zoom level */
+
+/* Minimal LOD (zoom <= 0.4) - Title only for performance */
+.lg-node--lod-minimal {
+  min-height: 32px;
+  transition: min-height 0.2s ease;
+  /* Performance optimizations */
+  text-shadow: none;
+  backdrop-filter: none;
+}
+
+.lg-node--lod-minimal .lg-node-body {
+  display: none !important;
+}
+
+/* Reduced LOD (0.4 < zoom <= 0.8) - Essential widgets, simplified styling */
+.lg-node--lod-reduced {
+  transition: opacity 0.1s ease;
+  /* Performance optimizations */
+  text-shadow: none;
+}
+
+.lg-node--lod-reduced .lg-widget-label,
+.lg-node--lod-reduced .lg-slot-label {
+  display: none;
+}
+
+.lg-node--lod-reduced .lg-slot {
+  opacity: 0.6;
+  font-size: 0.75rem;
+}
+
+.lg-node--lod-reduced .lg-widget {
+  margin: 2px 0;
+  font-size: 0.875rem;
+}
+
+/* Full LOD (zoom > 0.8) - Complete detail rendering */
+.lg-node--lod-full {
+  /* Uses default styling - no overrides needed */
+}
+
+/* Smooth transitions between LOD levels */
+.lg-node {
+  transition: min-height 0.2s ease;
+  /* Disable text selection on all nodes */
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.lg-node .lg-slot,
+.lg-node .lg-widget {
+  transition: opacity 0.1s ease, font-size 0.1s ease;
+}
+
+/* Performance optimization during canvas interaction */
+.transform-pane--interacting .lg-node * {
+  transition: none !important;
+}
+
+.transform-pane--interacting .lg-node {
+  will-change: transform;
+}
+
+/* Global performance optimizations for LOD */
+.lg-node--lod-minimal,
+.lg-node--lod-reduced {
+  /* Remove ALL expensive paint effects */
+  box-shadow: none !important;
+  filter: none !important;
+  backdrop-filter: none !important;
+  text-shadow: none !important;
+  -webkit-mask-image: none !important;
+  mask-image: none !important;
+  clip-path: none !important;
+}
+
+/* Reduce paint complexity for minimal LOD */
+.lg-node--lod-minimal {
+  /* Skip complex borders */
+  border-radius: 0 !important;
+  /* Use solid colors only */
+  background-image: none !important;
+}
+

src/assets/icons/README.md

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

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,119 +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">
-                {{ command.getTranslatedLabel() }}
-              </div>
-            </div>
-
-            <div class="keybinding-display flex-shrink-0">
-              <div
-                class="keybinding-combo flex gap-1"
-                :aria-label="`Keyboard shortcut: ${command.keybinding!.combo.getKeySequences().join(' + ')}`"
-              >
-                <span
-                  v-for="key in command.keybinding!.combo.getKeySequences()"
-                  :key="key"
-                  class="key-badge px-2 py-1 text-xs font-mono bg-surface-200 dark-theme:bg-surface-600 rounded border min-w-6 text-center"
-                >
-                  {{ formatKey(key) }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import type { ComfyCommandImpl } from '@/stores/commandStore'
-
-const { t } = useI18n()
-
-const { subcategories } = defineProps<{
-  commands: ComfyCommandImpl[]
-  subcategories: Record<string, ComfyCommandImpl[]>
-}>()
-
-const filteredSubcategories = computed(() => {
-  const result: Record<string, ComfyCommandImpl[]> = {}
-
-  for (const [subcategory, commands] of Object.entries(subcategories)) {
-    result[subcategory] = commands.filter((cmd) => !!cmd.keybinding)
-  }
-
-  return result
-})
-
-const getSubcategoryTitle = (subcategory: string): string => {
-  const titleMap: Record<string, string> = {
-    workflow: t('shortcuts.subcategories.workflow'),
-    node: t('shortcuts.subcategories.node'),
-    queue: t('shortcuts.subcategories.queue'),
-    view: t('shortcuts.subcategories.view'),
-    'panel-controls': t('shortcuts.subcategories.panelControls')
-  }
-
-  return titleMap[subcategory] || subcategory
-}
-
-const formatKey = (key: string): string => {
-  const keyMap: Record<string, string> = {
-    Control: 'Ctrl',
-    Meta: 'Cmd',
-    ArrowUp: '↑',
-    ArrowDown: '↓',
-    ArrowLeft: '←',
-    ArrowRight: '→',
-    Backspace: '⌫',
-    Delete: '⌦',
-    Enter: '↵',
-    Escape: 'Esc',
-    Tab: '⇥',
-    ' ': 'Space'
-  }
-
-  return keyMap[key] || key
-}
-</script>
-
-<style scoped>
-.subcategory-title {
-  color: var(--p-text-muted-color);
-}
-
-.key-badge {
-  background-color: var(--p-surface-200);
-  border: 1px solid var(--p-surface-300);
-  min-width: 1.5rem;
-  text-align: center;
-}
-
-.dark-theme .key-badge {
-  background-color: var(--p-surface-600);
-  border-color: var(--p-surface-500);
-}
-</style>

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

@@ -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/common/EditableText.spec.ts

@@ -68,4 +68,73 @@ describe('EditableText', () => {
     // @ts-expect-error fixme ts strict error
     expect(wrapper.emitted('edit')[0]).toEqual(['Test Text'])
   })
+
+  it('cancels editing on escape key', async () => {
+    const wrapper = mountComponent({
+      modelValue: 'Original Text',
+      isEditing: true
+    })
+
+    // Change the input value
+    await wrapper.findComponent(InputText).setValue('Modified Text')
+
+    // Press escape
+    await wrapper.findComponent(InputText).trigger('keyup.escape')
+
+    // Should emit cancel event
+    expect(wrapper.emitted('cancel')).toBeTruthy()
+
+    // Should NOT emit edit event
+    expect(wrapper.emitted('edit')).toBeFalsy()
+
+    // Input value should be reset to original
+    expect(wrapper.findComponent(InputText).props()['modelValue']).toBe(
+      'Original Text'
+    )
+  })
+
+  it('does not save changes when escape is pressed and blur occurs', async () => {
+    const wrapper = mountComponent({
+      modelValue: 'Original Text',
+      isEditing: true
+    })
+
+    // Change the input value
+    await wrapper.findComponent(InputText).setValue('Modified Text')
+
+    // Press escape (which triggers blur internally)
+    await wrapper.findComponent(InputText).trigger('keyup.escape')
+
+    // Manually trigger blur to simulate the blur that happens after escape
+    await wrapper.findComponent(InputText).trigger('blur')
+
+    // Should emit cancel but not edit
+    expect(wrapper.emitted('cancel')).toBeTruthy()
+    expect(wrapper.emitted('edit')).toBeFalsy()
+  })
+
+  it('saves changes on enter but not on escape', async () => {
+    // Test Enter key saves changes
+    const enterWrapper = mountComponent({
+      modelValue: 'Original Text',
+      isEditing: true
+    })
+    await enterWrapper.findComponent(InputText).setValue('Saved Text')
+    await enterWrapper.findComponent(InputText).trigger('keyup.enter')
+    // Trigger blur that happens after enter
+    await enterWrapper.findComponent(InputText).trigger('blur')
+    expect(enterWrapper.emitted('edit')).toBeTruthy()
+    // @ts-expect-error fixme ts strict error
+    expect(enterWrapper.emitted('edit')[0]).toEqual(['Saved Text'])
+
+    // Test Escape key cancels changes with a fresh wrapper
+    const escapeWrapper = mountComponent({
+      modelValue: 'Original Text',
+      isEditing: true
+    })
+    await escapeWrapper.findComponent(InputText).setValue('Cancelled Text')
+    await escapeWrapper.findComponent(InputText).trigger('keyup.escape')
+    expect(escapeWrapper.emitted('cancel')).toBeTruthy()
+    expect(escapeWrapper.emitted('edit')).toBeFalsy()
+  })
 })

src/components/common/EditableText.vue

@@ -14,10 +14,12 @@
       fluid
       :pt="{
         root: {
-          onBlur: finishEditing
+          onBlur: finishEditing,
+          ...inputAttrs
         }
       }"
       @keyup.enter="blurInputElement"
+      @keyup.escape="cancelEditing"
       @click.stop
     />
   </div>
@@ -27,21 +29,41 @@
 import InputText from 'primevue/inputtext'
 import { nextTick, ref, watch } from 'vue'
 
-const { modelValue, isEditing = false } = defineProps<{
+const {
+  modelValue,
+  isEditing = false,
+  inputAttrs = {}
+} = defineProps<{
   modelValue: string
   isEditing?: boolean
+  inputAttrs?: Record<string, any>
 }>()
 
-const emit = defineEmits(['update:modelValue', 'edit'])
+const emit = defineEmits(['update:modelValue', 'edit', 'cancel'])
 const inputValue = ref<string>(modelValue)
 const inputRef = ref<InstanceType<typeof InputText> | undefined>()
+const isCanceling = ref(false)
 
 const blurInputElement = () => {
   // @ts-expect-error - $el is an internal property of the InputText component
   inputRef.value?.$el.blur()
 }
 const finishEditing = () => {
-  emit('edit', inputValue.value)
+  // Don't save if we're canceling
+  if (!isCanceling.value) {
+    emit('edit', inputValue.value)
+  }
+  isCanceling.value = false
+}
+const cancelEditing = () => {
+  // Set canceling flag to prevent blur from saving
+  isCanceling.value = true
+  // Reset to original value
+  inputValue.value = modelValue
+  // Emit cancel event
+  emit('cancel')
+  // Blur the input to exit edit mode
+  blurInputElement()
 }
 watch(
   () => isEditing,

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/setting/KeybindingPanel.vue

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

src/components/graph/GraphCanvas.vue

@@ -34,6 +34,55 @@
     class="w-full h-full touch-none"
   />
 
+  <!-- TransformPane for Vue node rendering (development) -->
+  <TransformPane
+    v-if="transformPaneEnabled && canvasStore.canvas && comfyAppReady"
+    :canvas="canvasStore.canvas as LGraphCanvas"
+    :viewport="canvasViewport"
+    :show-debug-overlay="showPerformanceOverlay"
+    @raf-status-change="rafActive = $event"
+    @transform-update="handleTransformUpdate"
+  >
+    <!-- Vue nodes rendered based on graph nodes -->
+    <VueGraphNode
+      v-for="nodeData in nodesToRender"
+      :key="nodeData.id"
+      :node-data="nodeData"
+      :position="nodePositions.get(nodeData.id)"
+      :size="nodeSizes.get(nodeData.id)"
+      :selected="nodeData.selected"
+      :readonly="false"
+      :executing="executionStore.executingNodeId === nodeData.id"
+      :error="
+        executionStore.lastExecutionError?.node_id === nodeData.id
+          ? 'Execution error'
+          : null
+      "
+      :zoom-level="canvasStore.canvas?.ds?.scale || 1"
+      :data-node-id="nodeData.id"
+      @node-click="handleNodeSelect"
+      @update:collapsed="handleNodeCollapse"
+      @update:title="handleNodeTitleUpdate"
+    />
+  </TransformPane>
+
+  <!-- Debug Panel (Development Only) -->
+  <VueNodeDebugPanel
+    v-if="debugPanelVisible"
+    v-model:debug-override-vue-nodes="debugOverrideVueNodes"
+    v-model:show-performance-overlay="showPerformanceOverlay"
+    :canvas-viewport="canvasViewport"
+    :vue-nodes-count="vueNodesCount"
+    :nodes-in-viewport="nodesInViewport"
+    :performance-metrics="performanceMetrics"
+    :current-f-p-s="currentFPS"
+    :last-transform-time="lastTransformTime"
+    :raf-active="rafActive"
+    :is-dev-mode-enabled="isDevModeEnabled"
+    :should-render-vue-nodes="shouldRenderVueNodes"
+    :transform-pane-enabled="transformPaneEnabled"
+  />
+
   <NodeTooltip v-if="tooltipEnabled" />
   <NodeSearchboxPopover />
 
@@ -44,13 +93,23 @@
     <SelectionOverlay v-if="selectionToolboxEnabled">
       <SelectionToolbox />
     </SelectionOverlay>
-    <DomWidgets />
+    <!-- Render legacy DOM widgets only when Vue nodes are disabled -->
+    <DomWidgets v-if="!shouldRenderVueNodes" />
   </template>
 </template>
 
 <script setup lang="ts">
 import { useEventListener, whenever } from '@vueuse/core'
-import { computed, onMounted, ref, watch, watchEffect } from 'vue'
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  shallowRef,
+  watch,
+  watchEffect
+} from 'vue'
 
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
 import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
@@ -61,14 +120,23 @@ import NodeTooltip from '@/components/graph/NodeTooltip.vue'
 import SelectionOverlay from '@/components/graph/SelectionOverlay.vue'
 import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
 import TitleEditor from '@/components/graph/TitleEditor.vue'
+import TransformPane from '@/components/graph/TransformPane.vue'
+import VueNodeDebugPanel from '@/components/graph/debug/VueNodeDebugPanel.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
+import { useTransformState } from '@/composables/element/useTransformState'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
+import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
+import type {
+  NodeState,
+  VueNodeData
+} from '@/composables/graph/useGraphNodeManager'
 import { useNodeBadge } from '@/composables/node/useNodeBadge'
 import { useCanvasDrop } from '@/composables/useCanvasDrop'
 import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
 import { useCopy } from '@/composables/useCopy'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
 import { useLitegraphSettings } from '@/composables/useLitegraphSettings'
 import { useMinimap } from '@/composables/useMinimap'
@@ -77,7 +145,11 @@ 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 type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { layoutStore } from '@/renderer/core/layout/store/LayoutStore'
+import { useLayout } from '@/renderer/core/layout/sync/useLayout'
+import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync'
+import VueGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
 import { UnauthorizedError, api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'
@@ -105,6 +177,7 @@ const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
 const executionStore = useExecutionStore()
 const toastStore = useToastStore()
+const { mutations: layoutMutations } = useLayout()
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )
@@ -123,6 +196,357 @@ const minimapRef = ref<InstanceType<typeof MiniMap>>()
 const minimapEnabled = computed(() => settingStore.get('Comfy.Minimap.Visible'))
 const minimap = useMinimap()
 
+// Feature flags
+const { shouldRenderVueNodes, isDevModeEnabled } = useFeatureFlags()
+
+// TransformPane enabled when Vue nodes are enabled OR debug override
+const debugOverrideVueNodes = ref(false)
+// Persist debug panel visibility in settings so core commands can toggle it
+const debugPanelVisible = computed({
+  get: () => settingStore.get('Comfy.VueNodes.DebugPanel.Visible') ?? false,
+  set: (v: boolean) => {
+    void settingStore.set('Comfy.VueNodes.DebugPanel.Visible', v)
+  }
+})
+const transformPaneEnabled = computed(
+  () => shouldRenderVueNodes.value || debugOverrideVueNodes.value
+)
+// Account for browser zoom/DPI scaling
+const getActualViewport = () => {
+  // Get the actual canvas element dimensions which account for zoom
+  const canvas = canvasRef.value
+  if (canvas) {
+    return {
+      width: canvas.clientWidth,
+      height: canvas.clientHeight
+    }
+  }
+  // Fallback to window dimensions
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight
+  }
+}
+
+const canvasViewport = ref(getActualViewport())
+
+// Debug metrics - use shallowRef for frequently updating values
+const vueNodesCount = shallowRef(0)
+const nodesInViewport = shallowRef(0)
+const currentFPS = shallowRef(0)
+const lastTransformTime = shallowRef(0)
+const rafActive = shallowRef(false)
+
+// Rendering options
+const showPerformanceOverlay = ref(false)
+
+// FPS tracking
+let lastTime = performance.now()
+let frameCount = 0
+let fpsRafId: number | null = null
+
+const updateFPS = () => {
+  frameCount++
+  const currentTime = performance.now()
+  if (currentTime >= lastTime + 1000) {
+    currentFPS.value = Math.round(
+      (frameCount * 1000) / (currentTime - lastTime)
+    )
+    frameCount = 0
+    lastTime = currentTime
+  }
+  if (transformPaneEnabled.value) {
+    fpsRafId = requestAnimationFrame(updateFPS)
+  }
+}
+
+// Start FPS tracking when TransformPane is enabled
+watch(transformPaneEnabled, (enabled) => {
+  if (enabled) {
+    fpsRafId = requestAnimationFrame(updateFPS)
+  } else {
+    // Stop FPS tracking
+    if (fpsRafId !== null) {
+      cancelAnimationFrame(fpsRafId)
+      fpsRafId = null
+    }
+  }
+})
+
+// Update viewport on resize
+useEventListener(window, 'resize', () => {
+  canvasViewport.value = getActualViewport()
+})
+
+// Also update when canvas is ready
+watch(canvasRef, () => {
+  if (canvasRef.value) {
+    canvasViewport.value = getActualViewport()
+  }
+})
+
+// Vue node lifecycle management - initialize after graph is ready
+let nodeManager: ReturnType<typeof useGraphNodeManager> | null = null
+let cleanupNodeManager: (() => void) | null = null
+const vueNodeData = ref<ReadonlyMap<string, VueNodeData>>(new Map())
+const nodeState = ref<ReadonlyMap<string, NodeState>>(new Map())
+const nodePositions = ref<ReadonlyMap<string, { x: number; y: number }>>(
+  new Map()
+)
+const nodeSizes = ref<ReadonlyMap<string, { width: number; height: number }>>(
+  new Map()
+)
+let detectChangesInRAF = () => {}
+const performanceMetrics = reactive({
+  frameTime: 0,
+  updateTime: 0,
+  nodeCount: 0,
+  culledCount: 0,
+  adaptiveQuality: false
+})
+
+// Initialize node manager when graph becomes available
+// Add a reactivity trigger to force computed re-evaluation
+const nodeDataTrigger = ref(0)
+
+const initializeNodeManager = () => {
+  if (!comfyApp.graph || nodeManager) return
+  nodeManager = useGraphNodeManager(comfyApp.graph)
+  cleanupNodeManager = nodeManager.cleanup
+  // Use the manager's reactive maps directly
+  vueNodeData.value = nodeManager.vueNodeData
+  nodeState.value = nodeManager.nodeState
+  nodePositions.value = nodeManager.nodePositions
+  nodeSizes.value = nodeManager.nodeSizes
+  detectChangesInRAF = nodeManager.detectChangesInRAF
+  Object.assign(performanceMetrics, nodeManager.performanceMetrics)
+
+  // Initialize layout system with existing nodes
+  const nodes = comfyApp.graph._nodes.map((node: any) => ({
+    id: node.id.toString(),
+    pos: node.pos,
+    size: node.size
+  }))
+  layoutStore.initializeFromLiteGraph(nodes)
+
+  // Initialize layout sync (one-way: Layout Store → LiteGraph)
+  const { startSync } = useLayoutSync()
+  startSync(canvasStore.canvas)
+
+  // Force computed properties to re-evaluate
+  nodeDataTrigger.value++
+}
+
+const disposeNodeManager = () => {
+  if (!nodeManager) return
+  try {
+    cleanupNodeManager?.()
+  } catch {
+    /* empty */
+  }
+  nodeManager = null
+  cleanupNodeManager = null
+  // Reset reactive maps to inert defaults
+  vueNodeData.value = new Map()
+  nodeState.value = new Map()
+  nodePositions.value = new Map()
+  nodeSizes.value = new Map()
+  // Reset metrics
+  performanceMetrics.frameTime = 0
+  performanceMetrics.updateTime = 0
+  performanceMetrics.nodeCount = 0
+  performanceMetrics.culledCount = 0
+}
+
+// Watch for transformPaneEnabled to gate the node manager lifecycle
+watch(
+  () => transformPaneEnabled.value && Boolean(comfyApp.graph),
+  (enabled) => {
+    if (enabled) {
+      initializeNodeManager()
+    } else {
+      disposeNodeManager()
+    }
+  },
+  { immediate: true }
+)
+
+// Transform state for viewport culling
+const { syncWithCanvas } = useTransformState()
+
+// Replace problematic computed property with proper reactive system
+const nodesToRender = computed(() => {
+  // Access performanceMetrics to trigger on RAF updates
+  void performanceMetrics.updateTime
+  // Access trigger to force re-evaluation after nodeManager initialization
+  void nodeDataTrigger.value
+
+  if (!comfyApp.graph || !transformPaneEnabled.value) {
+    return []
+  }
+
+  const allNodes = Array.from(vueNodeData.value.values())
+
+  // Apply viewport culling - check if node bounds intersect with viewport
+  if (nodeManager && canvasStore.canvas && comfyApp.canvas) {
+    const canvas = canvasStore.canvas
+    const manager = nodeManager
+
+    // Ensure transform is synced before checking visibility
+    syncWithCanvas(comfyApp.canvas)
+
+    const ds = canvas.ds
+
+    // Access transform time to make this reactive to transform changes
+    void lastTransformTime.value
+
+    // Work in screen space - viewport is simply the canvas element size
+    const viewport_width = canvas.canvas.width
+    const viewport_height = canvas.canvas.height
+
+    // Add margin that represents a constant distance in canvas space
+    // Convert canvas units to screen pixels by multiplying by scale
+    const canvasMarginDistance = 200 // Fixed margin in canvas units
+    const margin_x = canvasMarginDistance * ds.scale
+    const margin_y = canvasMarginDistance * ds.scale
+
+    const filtered = allNodes.filter((nodeData) => {
+      const node = manager.getNode(nodeData.id)
+      if (!node) return false
+
+      // Transform node position to screen space (same as DOM widgets)
+      const screen_x = (node.pos[0] + ds.offset[0]) * ds.scale
+      const screen_y = (node.pos[1] + ds.offset[1]) * ds.scale
+      const screen_width = node.size[0] * ds.scale
+      const screen_height = node.size[1] * ds.scale
+
+      // Check if node bounds intersect with expanded viewport (in screen space)
+      const isVisible = !(
+        screen_x + screen_width < -margin_x ||
+        screen_x > viewport_width + margin_x ||
+        screen_y + screen_height < -margin_y ||
+        screen_y > viewport_height + margin_y
+      )
+
+      return isVisible
+    })
+
+    return filtered
+  }
+
+  return allNodes
+})
+
+// Remove side effects from computed - use watchers instead
+watch(
+  () => vueNodeData.value.size,
+  (count) => {
+    vueNodesCount.value = count
+  },
+  { immediate: true }
+)
+
+watch(
+  () => nodesToRender.value.length,
+  (count) => {
+    nodesInViewport.value = count
+  }
+)
+
+// Update performance metrics when node counts change
+watch(
+  () => [vueNodeData.value.size, nodesToRender.value.length],
+  ([totalNodes, visibleNodes]) => {
+    performanceMetrics.nodeCount = totalNodes
+    performanceMetrics.culledCount = totalNodes - visibleNodes
+  }
+)
+
+// Integrate change detection with TransformPane RAF
+// Track previous transform to detect changes
+let lastScale = 1
+let lastOffsetX = 0
+let lastOffsetY = 0
+
+const handleTransformUpdate = (time: number) => {
+  lastTransformTime.value = time
+
+  // Sync transform state only when it changes (avoids reflows)
+  if (comfyApp.canvas?.ds) {
+    const currentScale = comfyApp.canvas.ds.scale
+    const currentOffsetX = comfyApp.canvas.ds.offset[0]
+    const currentOffsetY = comfyApp.canvas.ds.offset[1]
+
+    if (
+      currentScale !== lastScale ||
+      currentOffsetX !== lastOffsetX ||
+      currentOffsetY !== lastOffsetY
+    ) {
+      syncWithCanvas(comfyApp.canvas)
+      lastScale = currentScale
+      lastOffsetX = currentOffsetX
+      lastOffsetY = currentOffsetY
+    }
+  }
+
+  // Detect node changes during transform updates
+  detectChangesInRAF()
+
+  // Update performance metrics
+  performanceMetrics.frameTime = time
+
+  void nodesToRender.value.length
+}
+
+// Node event handlers
+const handleNodeSelect = (event: PointerEvent, nodeData: VueNodeData) => {
+  if (!canvasStore.canvas || !nodeManager) return
+
+  const node = nodeManager.getNode(nodeData.id)
+  if (!node) return
+
+  if (!event.ctrlKey && !event.metaKey) {
+    canvasStore.canvas.deselectAllNodes()
+  }
+
+  canvasStore.canvas.selectNode(node)
+
+  // Bring node to front when clicked (similar to LiteGraph behavior)
+  // Skip if node is pinned
+  if (!node.flags?.pinned) {
+    layoutMutations.setSource('vue')
+    layoutMutations.bringNodeToFront(nodeData.id)
+  }
+  node.selected = true
+
+  canvasStore.updateSelectedItems()
+}
+
+// Handle node collapse state changes
+const handleNodeCollapse = (nodeId: string, collapsed: boolean) => {
+  if (!nodeManager) return
+
+  const node = nodeManager.getNode(nodeId)
+  if (!node) return
+
+  // Use LiteGraph's collapse method if the state needs to change
+  const currentCollapsed = node.flags?.collapsed ?? false
+  if (currentCollapsed !== collapsed) {
+    node.collapse()
+  }
+}
+
+// Handle node title updates
+const handleNodeTitleUpdate = (nodeId: string, newTitle: string) => {
+  if (!nodeManager) return
+
+  const node = nodeManager.getNode(nodeId)
+  if (!node) return
+
+  // Update the node title in LiteGraph for persistence
+  node.title = newTitle
+}
+
 watchEffect(() => {
   nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
 })
@@ -274,7 +698,7 @@ const loadCustomNodesI18n = async () => {
       i18n.global.mergeLocaleMessage(locale, message)
     })
   } catch (error) {
-    console.error('Failed to load custom nodes i18n', error)
+    // Ignore i18n loading errors - not critical
   }
 }
 
@@ -291,6 +715,7 @@ onMounted(async () => {
   useCopy()
   usePaste()
   useWorkflowAutoSave()
+  useFeatureFlags() // This will automatically sync Vue nodes flag with LiteGraph
 
   comfyApp.vueAppReady = true
 
@@ -303,9 +728,6 @@ onMounted(async () => {
     await settingStore.loadSettingValues()
   } catch (error) {
     if (error instanceof UnauthorizedError) {
-      console.log(
-        'Failed loading user settings, user unauthorized, cleaning local Comfy.userId'
-      )
       localStorage.removeItem('Comfy.userId')
       localStorage.removeItem('Comfy.userName')
       window.location.reload()
@@ -330,6 +752,32 @@ onMounted(async () => {
 
   comfyAppReady.value = true
 
+  // Set up a one-time listener for when the first node is added
+  // This handles the case where Vue nodes are enabled but the graph starts empty
+  // TODO: Replace this with a reactive graph mutations observer when available
+  if (
+    transformPaneEnabled.value &&
+    comfyApp.graph &&
+    !nodeManager &&
+    comfyApp.graph._nodes.length === 0
+  ) {
+    const originalOnNodeAdded = comfyApp.graph.onNodeAdded
+    comfyApp.graph.onNodeAdded = function (node: any) {
+      // Restore original handler
+      comfyApp.graph.onNodeAdded = originalOnNodeAdded
+
+      // Initialize node manager if needed
+      if (transformPaneEnabled.value && !nodeManager) {
+        initializeNodeManager()
+      }
+
+      // Call original handler
+      if (originalOnNodeAdded) {
+        originalOnNodeAdded.call(this, node)
+      }
+    }
+  }
+
   comfyApp.canvas.onSelectionChange = useChainCallback(
     comfyApp.canvas.onSelectionChange,
     () => canvasStore.updateSelectedItems()
@@ -377,4 +825,18 @@ onMounted(async () => {
 
   emit('ready')
 })
+
+onUnmounted(() => {
+  // Clean up FPS tracking
+  if (fpsRafId !== null) {
+    cancelAnimationFrame(fpsRafId)
+    fpsRafId = null
+  }
+
+  // Clean up node manager
+  if (nodeManager) {
+    nodeManager.cleanup()
+    nodeManager = null
+  }
+})
 </script>

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')"
@@ -79,24 +79,15 @@ import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
-import { useKeybindingStore } from '@/stores/keybindingStore'
 import { useSettingStore } from '@/stores/settingStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
-const keybindingStore = useKeybindingStore()
 const settingStore = useSettingStore()
 const canvasInteractions = useCanvasInteractions()
 
 const minimapVisible = computed(() => settingStore.get('Comfy.Minimap.Visible'))
-const minimapTooltip = computed(() => {
-  const baseText = t('graphCanvasMenu.toggleMinimap')
-  const keybinding = keybindingStore.getKeybindingByCommandId(
-    'Comfy.Canvas.ToggleMinimap'
-  )
-  return keybinding ? `${baseText} (${keybinding.combo.toString()})` : baseText
-})
 const linkHidden = computed(
   () => settingStore.get('Comfy.LinkRenderMode') === LiteGraph.HIDDEN_LINK
 )

src/components/graph/MiniMap.vue

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

src/components/graph/SelectionOverlay.vue

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

src/components/graph/SelectionToolbox.vue

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

src/components/graph/TransformPane.spec.ts

@@ -0,0 +1,438 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import TransformPane from './TransformPane.vue'
+
+// Mock the transform state composable
+const mockTransformState = {
+  camera: ref({ x: 0, y: 0, z: 1 }),
+  transformStyle: ref({
+    transform: 'scale(1) translate(0px, 0px)',
+    transformOrigin: '0 0'
+  }),
+  syncWithCanvas: vi.fn(),
+  canvasToScreen: vi.fn(),
+  screenToCanvas: vi.fn(),
+  isNodeInViewport: vi.fn()
+}
+
+vi.mock('@/composables/element/useTransformState', () => ({
+  useTransformState: () => mockTransformState
+}))
+
+// Mock requestAnimationFrame/cancelAnimationFrame
+global.requestAnimationFrame = vi.fn((cb) => {
+  setTimeout(cb, 16)
+  return 1
+})
+global.cancelAnimationFrame = vi.fn()
+
+describe('TransformPane', () => {
+  let wrapper: ReturnType<typeof mount>
+  let mockCanvas: any
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+
+    // Create mock canvas with LiteGraph interface
+    mockCanvas = {
+      canvas: {
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn()
+      },
+      ds: {
+        offset: [0, 0],
+        scale: 1
+      }
+    }
+
+    // Reset mock transform state
+    mockTransformState.camera.value = { x: 0, y: 0, z: 1 }
+    mockTransformState.transformStyle.value = {
+      transform: 'scale(1) translate(0px, 0px)',
+      transformOrigin: '0 0'
+    }
+  })
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+    }
+  })
+
+  describe('component mounting', () => {
+    it('should mount successfully with minimal props', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      expect(wrapper.exists()).toBe(true)
+      expect(wrapper.find('.transform-pane').exists()).toBe(true)
+    })
+
+    it('should apply transform style from composable', () => {
+      mockTransformState.transformStyle.value = {
+        transform: 'scale(2) translate(100px, 50px)',
+        transformOrigin: '0 0'
+      }
+
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      const transformPane = wrapper.find('.transform-pane')
+      const style = transformPane.attributes('style')
+      expect(style).toContain('transform: scale(2) translate(100px, 50px)')
+    })
+
+    it('should render slot content', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        },
+        slots: {
+          default: '<div class="test-content">Test Node</div>'
+        }
+      })
+
+      expect(wrapper.find('.test-content').exists()).toBe(true)
+      expect(wrapper.find('.test-content').text()).toBe('Test Node')
+    })
+  })
+
+  describe('debug overlay', () => {
+    it('should not show debug overlay by default', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      expect(wrapper.find('.viewport-debug-overlay').exists()).toBe(false)
+    })
+
+    it('should show debug overlay when enabled', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas,
+          viewport: { width: 1920, height: 1080 },
+          showDebugOverlay: true
+        }
+      })
+
+      expect(wrapper.find('.viewport-debug-overlay').exists()).toBe(true)
+    })
+
+    it('should display viewport dimensions in debug overlay', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas,
+          viewport: { width: 1280, height: 720 },
+          showDebugOverlay: true
+        }
+      })
+
+      const debugOverlay = wrapper.find('.viewport-debug-overlay')
+      expect(debugOverlay.text()).toContain('Viewport: 1280x720')
+    })
+
+    it('should include device pixel ratio in debug overlay', () => {
+      // Mock device pixel ratio
+      Object.defineProperty(window, 'devicePixelRatio', {
+        writable: true,
+        value: 2
+      })
+
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas,
+          viewport: { width: 1920, height: 1080 },
+          showDebugOverlay: true
+        }
+      })
+
+      const debugOverlay = wrapper.find('.viewport-debug-overlay')
+      expect(debugOverlay.text()).toContain('DPR: 2')
+    })
+  })
+
+  describe('RAF synchronization', () => {
+    it('should start RAF sync on mount', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+
+      // Should emit RAF status change to true
+      expect(wrapper.emitted('rafStatusChange')).toBeTruthy()
+      expect(wrapper.emitted('rafStatusChange')?.[0]).toEqual([true])
+    })
+
+    it('should call syncWithCanvas during RAF updates', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+
+      // Allow RAF to execute
+      await new Promise((resolve) => setTimeout(resolve, 20))
+
+      expect(mockTransformState.syncWithCanvas).toHaveBeenCalledWith(mockCanvas)
+    })
+
+    it('should emit transform update timing', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+
+      // Allow RAF to execute
+      await new Promise((resolve) => setTimeout(resolve, 20))
+
+      expect(wrapper.emitted('transformUpdate')).toBeTruthy()
+      const updateEvent = wrapper.emitted('transformUpdate')?.[0]
+      expect(typeof updateEvent?.[0]).toBe('number')
+      expect(updateEvent?.[0]).toBeGreaterThanOrEqual(0)
+    })
+
+    it('should stop RAF sync on unmount', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+      wrapper.unmount()
+
+      expect(wrapper.emitted('rafStatusChange')).toBeTruthy()
+      const events = wrapper.emitted('rafStatusChange') as any[]
+      expect(events[events.length - 1]).toEqual([false])
+      expect(global.cancelAnimationFrame).toHaveBeenCalled()
+    })
+  })
+
+  describe('canvas event listeners', () => {
+    it('should add event listeners to canvas on mount', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+
+      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+        'wheel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+        'pointerdown',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+        'pointerup',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.addEventListener).toHaveBeenCalledWith(
+        'pointercancel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+    })
+
+    it('should remove event listeners on unmount', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      await nextTick()
+      wrapper.unmount()
+
+      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+        'wheel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+        'pointerdown',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+        'pointerup',
+        expect.any(Function),
+        expect.any(Object)
+      )
+      expect(mockCanvas.canvas.removeEventListener).toHaveBeenCalledWith(
+        'pointercancel',
+        expect.any(Function),
+        expect.any(Object)
+      )
+    })
+  })
+
+  describe('interaction state management', () => {
+    it('should apply interacting class during interactions', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      // Simulate interaction start by checking internal state
+      // Note: This tests the CSS class application logic
+      const transformPane = wrapper.find('.transform-pane')
+
+      // Initially should not have interacting class
+      expect(transformPane.classes()).not.toContain(
+        'transform-pane--interacting'
+      )
+    })
+
+    it('should handle pointer events for node delegation', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      const transformPane = wrapper.find('.transform-pane')
+
+      // Simulate pointer down - we can't test the exact delegation logic
+      // in unit tests due to vue-test-utils limitations, but we can verify
+      // the event handler is set up correctly
+      await transformPane.trigger('pointerdown')
+
+      // The test passes if no errors are thrown during event handling
+      expect(transformPane.exists()).toBe(true)
+    })
+  })
+
+  describe('transform state integration', () => {
+    it('should provide transform utilities to child components', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      // The component should provide transform state via Vue's provide/inject
+      // This is tested indirectly through the composable integration
+      expect(mockTransformState.syncWithCanvas).toBeDefined()
+      expect(mockTransformState.canvasToScreen).toBeDefined()
+      expect(mockTransformState.screenToCanvas).toBeDefined()
+    })
+  })
+
+  describe('error handling', () => {
+    it('should handle null canvas gracefully', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: undefined
+        }
+      })
+
+      expect(wrapper.exists()).toBe(true)
+      expect(wrapper.find('.transform-pane').exists()).toBe(true)
+    })
+
+    it('should handle missing canvas properties', () => {
+      const incompleteCanvas = {} as any
+
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: incompleteCanvas
+        }
+      })
+
+      expect(wrapper.exists()).toBe(true)
+      // Should not throw errors during mount
+    })
+  })
+
+  describe('performance optimizations', () => {
+    it('should use contain CSS property for layout optimization', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        }
+      })
+
+      const transformPane = wrapper.find('.transform-pane')
+
+      // This test verifies the CSS contains the performance optimization
+      // Note: In JSDOM, computed styles might not reflect all CSS properties
+      expect(transformPane.element.className).toContain('transform-pane')
+    })
+
+    it('should disable pointer events on container but allow on children', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas
+        },
+        slots: {
+          default: '<div data-node-id="test">Test Node</div>'
+        }
+      })
+
+      const transformPane = wrapper.find('.transform-pane')
+
+      // The CSS should handle pointer events optimization
+      // This is primarily a CSS concern, but we verify the structure
+      expect(transformPane.exists()).toBe(true)
+      expect(wrapper.find('[data-node-id="test"]').exists()).toBe(true)
+    })
+  })
+
+  describe('viewport prop handling', () => {
+    it('should handle missing viewport prop', () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas,
+          showDebugOverlay: true
+        }
+      })
+
+      // Should not crash when viewport is undefined
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should update debug overlay when viewport changes', async () => {
+      wrapper = mount(TransformPane, {
+        props: {
+          canvas: mockCanvas,
+          viewport: { width: 800, height: 600 },
+          showDebugOverlay: true
+        }
+      })
+
+      expect(wrapper.text()).toContain('800x600')
+
+      await wrapper.setProps({
+        viewport: { width: 1920, height: 1080 }
+      })
+
+      expect(wrapper.text()).toContain('1920x1080')
+    })
+  })
+})

src/components/graph/TransformPane.vue

@@ -0,0 +1,137 @@
+<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+<template>
+  <div
+    class="transform-pane"
+    :class="{ 'transform-pane--interacting': isInteracting }"
+    :style="transformStyle"
+    @pointerdown="handlePointerDown"
+  >
+    <!-- Vue nodes will be rendered here -->
+    <slot />
+
+    <!-- DEV ONLY: Viewport bounds visualization -->
+    <div
+      v-if="props.showDebugOverlay"
+      class="viewport-debug-overlay"
+      :style="{
+        position: 'absolute',
+        left: '10px',
+        top: '10px',
+        border: '2px solid red',
+        width: (props.viewport?.width || 0) - 20 + 'px',
+        height: (props.viewport?.height || 0) - 20 + 'px',
+        pointerEvents: 'none',
+        opacity: 0.5
+      }"
+    >
+      <div
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          background: red;
+          color: white;
+          padding: 2px 5px;
+          font-size: 10px;
+        "
+      >
+        Viewport: {{ props.viewport?.width }}x{{ props.viewport?.height }} DPR:
+        {{ devicePixelRatio }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+
+import { useTransformState } from '@/composables/element/useTransformState'
+import { useCanvasTransformSync } from '@/composables/graph/useCanvasTransformSync'
+import { useTransformSettling } from '@/composables/graph/useTransformSettling'
+import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+
+interface TransformPaneProps {
+  canvas?: LGraphCanvas
+  viewport?: { width: number; height: number }
+  showDebugOverlay?: boolean
+}
+
+const props = defineProps<TransformPaneProps>()
+
+// Get device pixel ratio for display
+const devicePixelRatio = window.devicePixelRatio || 1
+
+// Transform state management
+const {
+  camera,
+  transformStyle,
+  syncWithCanvas,
+  canvasToScreen,
+  screenToCanvas,
+  isNodeInViewport
+} = useTransformState()
+
+// Transform settling detection for re-rasterization optimization
+const canvasElement = computed(() => props.canvas?.canvas)
+const { isTransforming } = useTransformSettling(canvasElement, {
+  settleDelay: 200,
+  trackPan: true
+})
+
+// Use isTransforming for the CSS class (aliased for clarity)
+const isInteracting = isTransforming
+
+// Provide transform utilities to child components
+provide('transformState', {
+  camera,
+  canvasToScreen,
+  screenToCanvas,
+  isNodeInViewport
+})
+
+// Event delegation for node interactions
+const handlePointerDown = (event: PointerEvent) => {
+  const target = event.target as HTMLElement
+  const nodeElement = target.closest('[data-node-id]')
+
+  if (nodeElement) {
+    // TODO: Emit event for node interaction
+    // Node interaction with nodeId will be handled in future implementation
+  }
+}
+
+// Canvas transform synchronization
+const emit = defineEmits<{
+  rafStatusChange: [active: boolean]
+  transformUpdate: [time: number]
+}>()
+
+useCanvasTransformSync(props.canvas, syncWithCanvas, {
+  onStart: () => emit('rafStatusChange', true),
+  onUpdate: (duration) => emit('transformUpdate', duration),
+  onStop: () => emit('rafStatusChange', false)
+})
+</script>
+
+<style scoped>
+.transform-pane {
+  position: absolute;
+  inset: 0;
+  contain: layout style paint;
+  transform-origin: 0 0;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.transform-pane--interacting {
+  will-change: transform;
+}
+
+/* Allow pointer events on nodes */
+.transform-pane :deep([data-node-id]) {
+  pointer-events: auto;
+}
+</style>

src/components/graph/debug/QuadTreeDebugSection.vue

@@ -0,0 +1,112 @@
+<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+<template>
+  <div class="pt-2 border-t border-surface-200 dark-theme:border-surface-700">
+    <h4 class="font-semibold mb-1">QuadTree Spatial Index</h4>
+
+    <!-- Enable/Disable Toggle -->
+    <div class="mb-2">
+      <label class="flex items-center gap-2">
+        <input
+          :checked="enabled"
+          type="checkbox"
+          @change="$emit('toggle', ($event.target as HTMLInputElement).checked)"
+        />
+        <span>Enable Spatial Indexing</span>
+      </label>
+    </div>
+
+    <!-- Status Message -->
+    <p v-if="!enabled" class="text-muted text-xs italic">
+      {{ statusMessage }}
+    </p>
+
+    <!-- Metrics when enabled -->
+    <template v-if="enabled && metrics">
+      <p class="text-muted">Strategy: {{ strategy }}</p>
+      <p class="text-muted">Total Nodes: {{ metrics.totalNodes }}</p>
+      <p class="text-muted">Visible Nodes: {{ metrics.visibleNodes }}</p>
+      <p class="text-muted">Query Time: {{ metrics.queryTime.toFixed(2) }}ms</p>
+      <p class="text-muted">Tree Depth: {{ metrics.treeDepth }}</p>
+      <p class="text-muted">Culling Efficiency: {{ cullingEfficiency }}</p>
+      <p class="text-muted">Rebuilds: {{ metrics.rebuildCount }}</p>
+
+      <!-- Show debug visualization toggle -->
+      <div class="mt-2">
+        <label class="flex items-center gap-2">
+          <input
+            :checked="showVisualization"
+            type="checkbox"
+            @change="
+              $emit(
+                'toggle-visualization',
+                ($event.target as HTMLInputElement).checked
+              )
+            "
+          />
+          <span>Show QuadTree Boundaries</span>
+        </label>
+      </div>
+    </template>
+
+    <!-- Performance Comparison -->
+    <template v-if="enabled && performanceComparison">
+      <div class="mt-2 text-xs">
+        <p class="text-muted font-semibold">Performance vs Linear:</p>
+        <p class="text-muted">Speedup: {{ performanceComparison.speedup }}x</p>
+        <p class="text-muted">
+          Break-even: ~{{ performanceComparison.breakEvenNodeCount }} nodes
+        </p>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  enabled: boolean
+  metrics?: {
+    totalNodes: number
+    visibleNodes: number
+    queryTime: number
+    treeDepth: number
+    rebuildCount: number
+  }
+  strategy?: string
+  threshold?: number
+  showVisualization?: boolean
+  performanceComparison?: {
+    speedup: number
+    breakEvenNodeCount: number
+  }
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  metrics: undefined,
+  strategy: 'quadtree',
+  threshold: 100,
+  showVisualization: false,
+  performanceComparison: undefined
+})
+
+defineEmits<{
+  toggle: [enabled: boolean]
+  'toggle-visualization': [show: boolean]
+}>()
+
+const statusMessage = computed(() => {
+  if (!props.enabled && props.metrics) {
+    return `Disabled (threshold: ${props.threshold} nodes, current: ${props.metrics.totalNodes})`
+  }
+  return `Spatial indexing will enable at ${props.threshold}+ nodes`
+})
+
+const cullingEfficiency = computed(() => {
+  if (!props.metrics || props.metrics.totalNodes === 0) return 'N/A'
+
+  const culled = props.metrics.totalNodes - props.metrics.visibleNodes
+  const percentage = ((culled / props.metrics.totalNodes) * 100).toFixed(1)
+  return `${culled} nodes (${percentage}%)`
+})
+</script>

src/components/graph/debug/QuadTreeVisualization.vue

@@ -0,0 +1,112 @@
+<template>
+  <svg
+    v-if="visible && debugInfo"
+    :width="svgSize.width"
+    :height="svgSize.height"
+    :style="svgStyle"
+    class="quadtree-visualization"
+  >
+    <!-- QuadTree boundaries -->
+    <g v-for="(node, index) in flattenedNodes" :key="`quad-${index}`">
+      <rect
+        :x="node.bounds.x"
+        :y="node.bounds.y"
+        :width="node.bounds.width"
+        :height="node.bounds.height"
+        :stroke="getDepthColor(node.depth)"
+        :stroke-width="getStrokeWidth(node.depth)"
+        fill="none"
+        :opacity="0.3 + node.depth * 0.05"
+      />
+    </g>
+
+    <!-- Viewport bounds (optional) -->
+    <rect
+      v-if="viewportBounds"
+      :x="viewportBounds.x"
+      :y="viewportBounds.y"
+      :width="viewportBounds.width"
+      :height="viewportBounds.height"
+      stroke="#00ff00"
+      stroke-width="3"
+      fill="none"
+      stroke-dasharray="10,5"
+      opacity="0.8"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import type { Bounds } from '@/utils/spatial/QuadTree'
+
+interface Props {
+  visible: boolean
+  debugInfo: any | null
+  transformStyle: any
+  viewportBounds?: Bounds
+}
+
+const props = defineProps<Props>()
+
+// Flatten the tree structure for rendering
+const flattenedNodes = computed(() => {
+  if (!props.debugInfo?.tree) return []
+
+  const nodes: any[] = []
+  const traverse = (node: any, depth = 0) => {
+    nodes.push({
+      bounds: node.bounds,
+      depth,
+      itemCount: node.itemCount,
+      divided: node.divided
+    })
+
+    if (node.children) {
+      node.children.forEach((child: any) => traverse(child, depth + 1))
+    }
+  }
+
+  traverse(props.debugInfo.tree)
+  return nodes
+})
+
+// SVG size (matches the transform pane size)
+const svgSize = ref({ width: 20000, height: 20000 })
+
+// Apply the same transform as the TransformPane
+const svgStyle = computed(() => ({
+  ...props.transformStyle,
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  pointerEvents: 'none'
+}))
+
+// Color based on depth
+const getDepthColor = (depth: number): string => {
+  const colors = [
+    '#ff6b6b', // Red
+    '#ffa500', // Orange
+    '#ffd93d', // Yellow
+    '#6bcf7f', // Green
+    '#4da6ff', // Blue
+    '#a78bfa' // Purple
+  ]
+  return colors[depth % colors.length]
+}
+
+// Stroke width based on depth
+const getStrokeWidth = (depth: number): number => {
+  return Math.max(0.5, 2 - depth * 0.3)
+}
+</script>
+
+<style scoped>
+.quadtree-visualization {
+  position: absolute;
+  overflow: visible;
+  z-index: 10; /* Above nodes but below UI */
+}
+</style>

src/components/graph/debug/VueNodeDebugPanel.vue

@@ -0,0 +1,165 @@
+<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+<template>
+  <!-- TransformPane Debug Controls -->
+  <div
+    class="fixed top-20 right-4 bg-surface-0 dark-theme:bg-surface-800 p-4 rounded-lg shadow-lg border border-surface-300 dark-theme:border-surface-600 z-50 pointer-events-auto w-80"
+    style="contain: layout style"
+  >
+    <h3 class="font-bold mb-2 text-sm">TransformPane Debug</h3>
+    <div class="space-y-2 text-xs">
+      <div>
+        <label class="flex items-center gap-2">
+          <input v-model="debugOverrideVueNodes" type="checkbox" />
+          <span>Enable TransformPane</span>
+        </label>
+      </div>
+
+      <!-- Canvas Metrics -->
+      <div
+        class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
+      >
+        <h4 class="font-semibold mb-1">Canvas State</h4>
+        <p class="text-muted">
+          Status: {{ canvasStore.canvas ? 'Ready' : 'Not Ready' }}
+        </p>
+        <p class="text-muted">
+          Viewport: {{ Math.round(canvasViewport.width) }}x{{
+            Math.round(canvasViewport.height)
+          }}
+        </p>
+        <template v-if="canvasStore.canvas?.ds">
+          <p class="text-muted">
+            Offset: ({{ Math.round(canvasStore.canvas.ds.offset[0]) }},
+            {{ Math.round(canvasStore.canvas.ds.offset[1]) }})
+          </p>
+          <p class="text-muted">
+            Scale: {{ canvasStore.canvas.ds.scale?.toFixed(3) || 1 }}
+          </p>
+        </template>
+      </div>
+
+      <!-- Node Metrics -->
+      <div
+        class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
+      >
+        <h4 class="font-semibold mb-1">Graph Metrics</h4>
+        <p class="text-muted">
+          Total Nodes: {{ comfyApp.graph?.nodes?.length || 0 }}
+        </p>
+        <p class="text-muted">
+          Selected Nodes: {{ canvasStore.canvas?.selectedItems?.size || 0 }}
+        </p>
+        <p class="text-muted">Vue Nodes Rendered: {{ vueNodesCount }}</p>
+        <p class="text-muted">Nodes in Viewport: {{ nodesInViewport }}</p>
+        <p class="text-muted">
+          Culled Nodes: {{ performanceMetrics.culledCount }}
+        </p>
+        <p class="text-muted">
+          Cull Percentage:
+          {{
+            Math.round(
+              ((vueNodesCount - nodesInViewport) / Math.max(vueNodesCount, 1)) *
+                100
+            )
+          }}%
+        </p>
+      </div>
+
+      <!-- Performance Metrics -->
+      <div
+        class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
+      >
+        <h4 class="font-semibold mb-1">Performance</h4>
+        <p v-memo="[currentFPS]" class="text-muted">FPS: {{ currentFPS }}</p>
+        <p v-memo="[Math.round(lastTransformTime)]" class="text-muted">
+          Transform Update: {{ Math.round(lastTransformTime) }}ms
+        </p>
+        <p
+          v-memo="[Math.round(performanceMetrics.updateTime)]"
+          class="text-muted"
+        >
+          Lifecycle Update: {{ Math.round(performanceMetrics.updateTime) }}ms
+        </p>
+        <p v-memo="[rafActive]" class="text-muted">
+          RAF Active: {{ rafActive ? 'Yes' : 'No' }}
+        </p>
+        <p v-memo="[performanceMetrics.adaptiveQuality]" class="text-muted">
+          Adaptive Quality:
+          {{ performanceMetrics.adaptiveQuality ? 'On' : 'Off' }}
+        </p>
+      </div>
+
+      <!-- Feature Flags Status -->
+      <div
+        v-if="isDevModeEnabled"
+        class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
+      >
+        <h4 class="font-semibold mb-1">Feature Flags</h4>
+        <p class="text-muted text-xs">
+          Vue Nodes: {{ shouldRenderVueNodes ? 'Enabled' : 'Disabled' }}
+        </p>
+        <p class="text-muted text-xs">
+          Dev Mode: {{ isDevModeEnabled ? 'Enabled' : 'Disabled' }}
+        </p>
+      </div>
+
+      <!-- Performance Options -->
+      <div
+        v-if="transformPaneEnabled"
+        class="pt-2 border-t border-surface-200 dark-theme:border-surface-700"
+      >
+        <h4 class="font-semibold mb-1">Debug Options</h4>
+        <label class="flex items-center gap-2">
+          <input v-model="showPerformanceOverlay" type="checkbox" />
+          <span>Show Performance Overlay</span>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { app as comfyApp } from '@/scripts/app'
+import { useCanvasStore } from '@/stores/graphStore'
+
+interface Props {
+  debugOverrideVueNodes: boolean
+  canvasViewport: { width: number; height: number }
+  vueNodesCount: number
+  nodesInViewport: number
+  performanceMetrics: {
+    culledCount: number
+    updateTime: number
+    adaptiveQuality: boolean
+  }
+  currentFPS: number
+  lastTransformTime: number
+  rafActive: boolean
+  isDevModeEnabled: boolean
+  shouldRenderVueNodes: boolean
+  transformPaneEnabled: boolean
+  showPerformanceOverlay: boolean
+}
+
+interface Emits {
+  (e: 'update:debugOverrideVueNodes', value: boolean): void
+  (e: 'update:showPerformanceOverlay', value: boolean): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const canvasStore = useCanvasStore()
+
+const debugOverrideVueNodes = computed({
+  get: () => props.debugOverrideVueNodes,
+  set: (value: boolean) => emit('update:debugOverrideVueNodes', value)
+})
+
+const showPerformanceOverlay = computed({
+  get: () => props.showPerformanceOverlay,
+  set: (value: boolean) => emit('update:showPerformanceOverlay', value)
+})
+</script>

src/components/graph/vueWidgets/WidgetButton.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-sm opacity-80">{{
+      widget.name
+    }}</label>
+    <Button
+      v-bind="filteredProps"
+      :disabled="readonly"
+      size="small"
+      @click="handleClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  BADGE_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+// Button widgets don't have a v-model value, they trigger actions
+const props = defineProps<{
+  widget: SimplifiedWidget<void>
+  readonly?: boolean
+}>()
+
+// Button specific excluded props
+const BUTTON_EXCLUDED_PROPS = [...BADGE_EXCLUDED_PROPS, 'iconClass'] as const
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, BUTTON_EXCLUDED_PROPS)
+)
+
+const handleClick = () => {
+  if (!props.readonly && props.widget.callback) {
+    props.widget.callback()
+  }
+}
+</script>

src/components/graph/vueWidgets/WidgetChart.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <div
+      class="p-4 border border-gray-300 dark-theme:border-gray-600 rounded max-h-[48rem]"
+    >
+      <Chart :type="chartType" :data="chartData" :options="chartOptions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ChartData } from 'chart.js'
+import Chart from 'primevue/chart'
+import { computed } from 'vue'
+
+import type { ChartInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+type ChartWidgetOptions = NonNullable<ChartInputSpec['options']>
+
+const value = defineModel<ChartData>({ required: true })
+
+const props = defineProps<{
+  widget: SimplifiedWidget<ChartData, ChartWidgetOptions>
+  readonly?: boolean
+}>()
+
+const chartType = computed(() => props.widget.options?.type ?? 'line')
+
+const chartData = computed(() => value.value || { labels: [], datasets: [] })
+
+const chartOptions = computed(() => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      labels: {
+        color: '#FFF',
+        usePointStyle: true,
+        pointStyle: 'circle'
+      }
+    }
+  },
+  scales: {
+    x: {
+      ticks: {
+        color: '#9FA2BD'
+      },
+      grid: {
+        display: true,
+        color: '#9FA2BD',
+        drawTicks: false,
+        drawOnChartArea: true,
+        drawBorder: false
+      },
+      border: {
+        display: true,
+        color: '#9FA2BD'
+      }
+    },
+    y: {
+      ticks: {
+        color: '#9FA2BD'
+      },
+      grid: {
+        display: false,
+        drawTicks: false,
+        drawOnChartArea: false,
+        drawBorder: false
+      },
+      border: {
+        display: true,
+        color: '#9FA2BD'
+      }
+    }
+  }
+}))
+</script>

src/components/graph/vueWidgets/WidgetColorPicker.vue

@@ -0,0 +1,52 @@
+<!-- Needs custom color picker for alpha support -->
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-sm opacity-80">{{
+      widget.name
+    }}</label>
+    <ColorPicker
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      inline
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ColorPicker from 'primevue/colorpicker'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  modelValue: string
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: '#000000',
+  emit
+})
+
+// ColorPicker specific excluded props include panel/overlay classes
+const COLOR_PICKER_EXCLUDED_PROPS = [...PANEL_EXCLUDED_PROPS] as const
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, COLOR_PICKER_EXCLUDED_PROPS)
+)
+</script>

src/components/graph/vueWidgets/WidgetFileUpload.vue

@@ -0,0 +1,324 @@
+<template>
+  <!-- Replace entire widget with image preview when image is loaded -->
+  <!-- Edge-to-edge: -mx-2 removes the parent's p-2 (8px) padding on each side -->
+  <div
+    v-if="hasImageFile"
+    class="relative -mx-2"
+    style="width: calc(100% + 1rem)"
+  >
+    <!-- Select section above image -->
+    <div class="flex items-center justify-between gap-4 mb-2 px-2">
+      <label
+        v-if="widget.name"
+        class="text-xs opacity-80 min-w-[4em] truncate"
+        >{{ widget.name }}</label
+      >
+      <!-- Group select and folder button together on the right -->
+      <div class="flex items-center gap-1">
+        <!-- TODO: finish once we finish value bindings with Litegraph -->
+        <Select
+          :model-value="selectedFile?.name"
+          :options="[selectedFile?.name || '']"
+          :disabled="true"
+          class="min-w-[8em] max-w-[20em] text-xs"
+          size="small"
+          :pt="{
+            option: 'text-xs'
+          }"
+        />
+        <Button
+          icon="pi pi-folder"
+          size="small"
+          class="!w-8 !h-8"
+          :disabled="readonly"
+          @click="triggerFileInput"
+        />
+      </div>
+    </div>
+
+    <!-- Image preview -->
+    <!-- TODO: change hardcoded colors when design system incorporated -->
+    <div class="relative group">
+      <img :src="imageUrl" :alt="selectedFile?.name" class="w-full h-auto" />
+      <!-- Darkening overlay on hover -->
+      <div
+        class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 pointer-events-none"
+      />
+      <!-- Control buttons in top right on hover -->
+      <div
+        v-if="!readonly"
+        class="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+      >
+        <!-- Edit button -->
+        <button
+          class="w-6 h-6 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none"
+          style="background-color: #262729"
+          @click="handleEdit"
+        >
+          <i class="pi pi-pencil text-white text-xs"></i>
+        </button>
+        <!-- Delete button -->
+        <button
+          class="w-6 h-6 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none"
+          style="background-color: #262729"
+          @click="clearFile"
+        >
+          <i class="pi pi-times text-white text-xs"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Audio preview when audio file is loaded -->
+  <div
+    v-else-if="hasAudioFile"
+    class="relative -mx-2"
+    style="width: calc(100% + 1rem)"
+  >
+    <!-- Select section above audio player -->
+    <div class="flex items-center justify-between gap-4 mb-2 px-2">
+      <label
+        v-if="widget.name"
+        class="text-xs opacity-80 min-w-[4em] truncate"
+        >{{ widget.name }}</label
+      >
+      <!-- Group select and folder button together on the right -->
+      <div class="flex items-center gap-1">
+        <Select
+          :model-value="selectedFile?.name"
+          :options="[selectedFile?.name || '']"
+          :disabled="true"
+          class="min-w-[8em] max-w-[20em] text-xs"
+          size="small"
+          :pt="{
+            option: 'text-xs'
+          }"
+        />
+        <Button
+          icon="pi pi-folder"
+          size="small"
+          class="!w-8 !h-8"
+          :disabled="readonly"
+          @click="triggerFileInput"
+        />
+      </div>
+    </div>
+
+    <!-- Audio player -->
+    <div class="relative group px-2">
+      <div
+        class="bg-[#1a1b1e] rounded-lg p-4 flex items-center gap-4"
+        style="border: 1px solid #262729"
+      >
+        <!-- Audio icon -->
+        <div class="flex-shrink-0">
+          <i class="pi pi-volume-up text-2xl opacity-60"></i>
+        </div>
+
+        <!-- File info and controls -->
+        <div class="flex-1">
+          <div class="text-sm font-medium mb-1">{{ selectedFile?.name }}</div>
+          <div class="text-xs opacity-60">
+            {{
+              selectedFile ? (selectedFile.size / 1024).toFixed(1) + ' KB' : ''
+            }}
+          </div>
+        </div>
+
+        <!-- Control buttons -->
+        <div v-if="!readonly" class="flex gap-1">
+          <!-- Delete button -->
+          <button
+            class="w-8 h-8 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none hover:bg-[#262729]"
+            @click="clearFile"
+          >
+            <i class="pi pi-times text-white text-sm"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Show normal file upload UI when no image or audio is loaded -->
+  <div
+    v-else
+    class="flex flex-col gap-1 w-full border border-solid p-1 rounded-lg"
+    :style="{ borderColor: '#262729' }"
+  >
+    <div
+      class="border border-dashed p-1 rounded-md transition-colors duration-200 hover:border-[#5B5E7D]"
+      :style="{ borderColor: '#262729' }"
+    >
+      <div class="flex flex-col items-center gap-2 w-full py-4">
+        <!-- Quick and dirty file type detection for testing -->
+        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+        <span class="text-xs opacity-60"> Drop your file or </span>
+        <div>
+          <Button
+            label="Browse Files"
+            size="small"
+            class="text-xs"
+            :disabled="readonly"
+            @click="triggerFileInput"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Hidden file input always available for both states -->
+  <input
+    ref="fileInputRef"
+    type="file"
+    class="hidden"
+    :accept="widget.options?.accept"
+    :multiple="false"
+    :disabled="readonly"
+    @change="handleFileChange"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Select from 'primevue/select'
+import { computed, onUnmounted, ref, watch } from 'vue'
+
+// import { useI18n } from 'vue-i18n' // Commented out for testing
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+// const { t } = useI18n() // Commented out for testing
+
+const props = defineProps<{
+  widget: SimplifiedWidget<File[] | null>
+  modelValue: File[] | null
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: File[] | null]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: null,
+  emit
+})
+
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
+// Since we only support single file, get the first file
+const selectedFile = computed(() => {
+  const files = localValue.value || []
+  return files.length > 0 ? files[0] : null
+})
+
+// Quick file type detection for testing
+const detectFileType = (file: File) => {
+  const type = file.type?.toLowerCase() || ''
+  const name = file.name?.toLowerCase() || ''
+
+  if (
+    type.startsWith('image/') ||
+    name.match(/\.(jpg|jpeg|png|gif|webp|svg)$/)
+  ) {
+    return 'image'
+  }
+  if (type.startsWith('video/') || name.match(/\.(mp4|webm|ogg|mov)$/)) {
+    return 'video'
+  }
+  if (type.startsWith('audio/') || name.match(/\.(mp3|wav|ogg|flac)$/)) {
+    return 'audio'
+  }
+  if (type === 'application/pdf' || name.endsWith('.pdf')) {
+    return 'pdf'
+  }
+  if (type.includes('zip') || name.match(/\.(zip|rar|7z|tar|gz)$/)) {
+    return 'archive'
+  }
+  return 'file'
+}
+
+// Check if we have an image file
+const hasImageFile = computed(() => {
+  return selectedFile.value && detectFileType(selectedFile.value) === 'image'
+})
+
+// Check if we have an audio file
+const hasAudioFile = computed(() => {
+  return selectedFile.value && detectFileType(selectedFile.value) === 'audio'
+})
+
+// Get image URL for preview
+const imageUrl = computed(() => {
+  if (hasImageFile.value && selectedFile.value) {
+    return URL.createObjectURL(selectedFile.value)
+  }
+  return ''
+})
+
+// // Get audio URL for playback
+// const audioUrl = computed(() => {
+//   if (hasAudioFile.value && selectedFile.value) {
+//     return URL.createObjectURL(selectedFile.value)
+//   }
+//   return ''
+// })
+
+// Clean up image URL when file changes
+watch(imageUrl, (newUrl, oldUrl) => {
+  if (oldUrl && oldUrl !== newUrl) {
+    URL.revokeObjectURL(oldUrl)
+  }
+})
+
+const triggerFileInput = () => {
+  fileInputRef.value?.click()
+}
+
+const handleFileChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (!props.readonly && target.files && target.files.length > 0) {
+    // Since we only support single file, take the first one
+    const file = target.files[0]
+
+    // Use the composable's onChange handler with an array
+    onChange([file])
+
+    // Reset input to allow selecting same file again
+    target.value = ''
+  }
+}
+
+const clearFile = () => {
+  // Clear the file
+  onChange(null)
+
+  // Reset file input
+  if (fileInputRef.value) {
+    fileInputRef.value.value = ''
+  }
+}
+
+const handleEdit = () => {
+  // TODO: hook up with maskeditor
+}
+
+// Clear file input when value is cleared externally
+watch(localValue, (newValue) => {
+  if (!newValue || newValue.length === 0) {
+    if (fileInputRef.value) {
+      fileInputRef.value.value = ''
+    }
+  }
+})
+
+// Clean up image URL on unmount
+onUnmounted(() => {
+  if (imageUrl.value) {
+    URL.revokeObjectURL(imageUrl.value)
+  }
+})
+</script>

src/components/graph/vueWidgets/WidgetGalleria.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <Galleria
+      v-model:activeIndex="activeIndex"
+      :value="galleryImages"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      :show-thumbnails="showThumbnails"
+      :show-nav-buttons="showNavButtons"
+      class="max-w-full"
+      :pt="{
+        thumbnails: {
+          class: 'overflow-hidden'
+        },
+        thumbnailContent: {
+          class: 'py-4 px-2'
+        },
+        thumbnailPrevButton: {
+          class: 'm-0'
+        },
+        thumbnailNextButton: {
+          class: 'm-0'
+        }
+      }"
+    >
+      <template #item="{ item }">
+        <img
+          :src="item.itemImageSrc || item.src || item"
+          :alt="item.alt || 'Gallery image'"
+          class="w-full h-auto max-h-64 object-contain"
+        />
+      </template>
+      <template #thumbnail="{ item }">
+        <div class="p-1 w-full h-full">
+          <img
+            :src="item.thumbnailImageSrc || item.src || item"
+            :alt="item.alt || 'Gallery thumbnail'"
+            class="w-full h-full object-cover rounded-lg"
+          />
+        </div>
+      </template>
+    </Galleria>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Galleria from 'primevue/galleria'
+import { computed, ref } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  GALLERIA_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+interface GalleryImage {
+  itemImageSrc?: string
+  thumbnailImageSrc?: string
+  src?: string
+  alt?: string
+}
+
+type GalleryValue = string[] | GalleryImage[]
+
+const value = defineModel<GalleryValue>({ required: true })
+
+const props = defineProps<{
+  widget: SimplifiedWidget<GalleryValue>
+  readonly?: boolean
+}>()
+
+const activeIndex = ref(0)
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, GALLERIA_EXCLUDED_PROPS)
+)
+
+const galleryImages = computed(() => {
+  if (!value.value || !Array.isArray(value.value)) return []
+
+  return value.value.map((item, index) => {
+    if (typeof item === 'string') {
+      return {
+        itemImageSrc: item,
+        thumbnailImageSrc: item,
+        alt: `Image ${index + 1}`
+      }
+    }
+    return item
+  })
+})
+
+const showThumbnails = computed(() => {
+  return (
+    props.widget.options?.showThumbnails !== false &&
+    galleryImages.value.length > 1
+  )
+})
+
+const showNavButtons = computed(() => {
+  return (
+    props.widget.options?.showNavButtons !== false &&
+    galleryImages.value.length > 1
+  )
+})
+</script>
+
+<style scoped>
+/* Ensure thumbnail container doesn't overflow */
+:deep(.p-galleria-thumbnails) {
+  overflow: hidden;
+}
+
+/* Constrain thumbnail items to prevent overlap */
+:deep(.p-galleria-thumbnail-item) {
+  flex-shrink: 0;
+}
+
+/* Ensure thumbnail wrapper maintains aspect ratio */
+:deep(.p-galleria-thumbnail) {
+  overflow: hidden;
+}
+</style>

src/components/graph/vueWidgets/WidgetImage.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <label v-if="widget.name" class="text-sm opacity-80">{{
+      widget.name
+    }}</label>
+    <Image v-bind="filteredProps" :src="widget.value" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Image from 'primevue/image'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  IMAGE_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+// Image widgets typically don't have v-model, they display a source URL/path
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  readonly?: boolean
+}>()
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, IMAGE_EXCLUDED_PROPS)
+)
+</script>

src/components/graph/vueWidgets/WidgetImageCompare.vue

@@ -0,0 +1,70 @@
+<template>
+  <ImageCompare
+    :tabindex="widget.options?.tabindex ?? 0"
+    :aria-label="widget.options?.ariaLabel"
+    :aria-labelledby="widget.options?.ariaLabelledby"
+    :pt="widget.options?.pt"
+    :pt-options="widget.options?.ptOptions"
+    :unstyled="widget.options?.unstyled"
+  >
+    <template #left>
+      <img
+        :src="beforeImage"
+        :alt="beforeAlt"
+        class="w-full h-full object-cover"
+      />
+    </template>
+    <template #right>
+      <img
+        :src="afterImage"
+        :alt="afterAlt"
+        class="w-full h-full object-cover"
+      />
+    </template>
+  </ImageCompare>
+</template>
+
+<script setup lang="ts">
+import ImageCompare from 'primevue/imagecompare'
+import { computed } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+interface ImageCompareValue {
+  before: string
+  after: string
+  beforeAlt?: string
+  afterAlt?: string
+  initialPosition?: number
+}
+
+// Image compare widgets typically don't have v-model, they display comparison
+const props = defineProps<{
+  widget: SimplifiedWidget<ImageCompareValue | string>
+  readonly?: boolean
+}>()
+
+const beforeImage = computed(() => {
+  const value = props.widget.value
+  return typeof value === 'string' ? value : value?.before || ''
+})
+
+const afterImage = computed(() => {
+  const value = props.widget.value
+  return typeof value === 'string' ? '' : value?.after || ''
+})
+
+const beforeAlt = computed(() => {
+  const value = props.widget.value
+  return typeof value === 'object' && value?.beforeAlt
+    ? value.beforeAlt
+    : 'Before image'
+})
+
+const afterAlt = computed(() => {
+  const value = props.widget.value
+  return typeof value === 'object' && value?.afterAlt
+    ? value.afterAlt
+    : 'After image'
+})
+</script>

src/components/graph/vueWidgets/WidgetInputText.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <InputText
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      size="small"
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import InputText from 'primevue/inputtext'
+import { computed } from 'vue'
+
+import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  INPUT_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  modelValue: string
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useStringWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS)
+)
+</script>

src/components/graph/vueWidgets/WidgetMarkdown.vue

@@ -0,0 +1,95 @@
+<template>
+  <div
+    class="widget-markdown relative w-full cursor-text"
+    @click="startEditing"
+  >
+    <!-- Display mode: Rendered markdown -->
+    <div
+      v-if="!isEditing"
+      class="comfy-markdown-content text-xs min-h-[60px] rounded-lg px-4 py-2 overflow-y-auto"
+      v-html="renderedHtml"
+    />
+
+    <!-- Edit mode: Textarea -->
+    <Textarea
+      v-else
+      ref="textareaRef"
+      v-model="localValue"
+      :disabled="readonly"
+      class="w-full text-xs"
+      size="small"
+      rows="6"
+      :pt="{
+        root: {
+          onBlur: handleBlur
+        }
+      }"
+      @update:model-value="onChange"
+      @click.stop
+      @keydown.stop
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Textarea from 'primevue/textarea'
+import { computed, nextTick, ref } from 'vue'
+
+import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  modelValue: string
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// State
+const isEditing = ref(false)
+const textareaRef = ref<InstanceType<typeof Textarea> | undefined>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useStringWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+// Computed
+const renderedHtml = computed(() => {
+  return renderMarkdownToHtml(localValue.value || '')
+})
+
+// Methods
+const startEditing = async () => {
+  if (props.readonly || isEditing.value) return
+
+  isEditing.value = true
+  await nextTick()
+
+  // Focus the textarea
+  // @ts-expect-error - $el is an internal property of the Textarea component
+  textareaRef.value?.$el?.focus()
+}
+
+const handleBlur = () => {
+  isEditing.value = false
+}
+</script>
+
+<style scoped>
+.widget-markdown {
+  background-color: var(--p-muted-color);
+  border: 1px solid var(--p-border-color);
+  border-radius: var(--p-border-radius);
+}
+
+.widget-markdown:hover:not(:has(textarea)) {
+  background-color: var(--p-content-hover-background);
+}
+</style>

src/components/graph/vueWidgets/WidgetMultiSelect.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <MultiSelect
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      size="small"
+      :pt="{
+        option: 'text-xs'
+      }"
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import MultiSelect from 'primevue/multiselect'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<any[]>
+  modelValue: any[]
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any[]]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: [],
+  emit
+})
+
+// MultiSelect specific excluded props include overlay styles
+const MULTISELECT_EXCLUDED_PROPS = [
+  ...PANEL_EXCLUDED_PROPS,
+  'overlayStyle'
+] as const
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, MULTISELECT_EXCLUDED_PROPS)
+)
+</script>

src/components/graph/vueWidgets/WidgetSelect.vue

@@ -0,0 +1,72 @@
+<template>
+  <div
+    class="flex items-center justify-between gap-4"
+    :style="{ height: widgetHeight + 'px' }"
+  >
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <Select
+      v-model="localValue"
+      :options="selectOptions"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      size="small"
+      :pt="{
+        option: 'text-xs'
+      }"
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Select from 'primevue/select'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+import { COMFY_VUE_NODE_DIMENSIONS } from '../../../lib/litegraph/src/litegraph'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string | number | undefined>
+  modelValue: string | number | undefined
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number | undefined]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: props.widget.options?.values?.[0] || '',
+  emit
+})
+
+// Get widget height from litegraph constants
+const widgetHeight = COMFY_VUE_NODE_DIMENSIONS.components.STANDARD_WIDGET_HEIGHT
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, PANEL_EXCLUDED_PROPS)
+)
+
+// Extract select options from widget options
+const selectOptions = computed(() => {
+  const options = props.widget.options
+
+  if (options?.values && Array.isArray(options.values)) {
+    return options.values
+  }
+
+  return []
+})
+</script>

src/components/graph/vueWidgets/WidgetSelectButton.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <SelectButton
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      :pt="{
+        pcToggleButton: {
+          label: 'text-xs'
+        }
+      }"
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import SelectButton from 'primevue/selectbutton'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  STANDARD_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<any>
+  modelValue: any
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: null,
+  emit
+})
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
+)
+</script>
+
+<style scoped>
+:deep(.p-selectbutton) {
+  border: 1px solid transparent;
+}
+
+:deep(.p-selectbutton:hover) {
+  border-color: currentColor;
+}
+</style>

src/components/graph/vueWidgets/WidgetSlider.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="flex items-center gap-4" :style="{ height: widgetHeight + 'px' }">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <div class="flex items-center gap-2 flex-1 justify-end">
+      <Slider
+        v-model="localValue"
+        v-bind="filteredProps"
+        :disabled="readonly"
+        class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+        @update:model-value="onChange"
+      />
+      <InputText
+        v-model="inputDisplayValue"
+        :disabled="readonly"
+        type="number"
+        :min="widget.options?.min"
+        :max="widget.options?.max"
+        :step="stepValue"
+        class="w-[4em] text-center text-xs px-0"
+        size="small"
+        @blur="handleInputBlur"
+        @keydown="handleInputKeydown"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import InputText from 'primevue/inputtext'
+import Slider from 'primevue/slider'
+import { computed, ref, watch } from 'vue'
+
+import { useNumberWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  STANDARD_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+import { COMFY_VUE_NODE_DIMENSIONS } from '../../../lib/litegraph/src/litegraph'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<number>
+  modelValue: number
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useNumberWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+// Get widget height from litegraph constants
+const widgetHeight = COMFY_VUE_NODE_DIMENSIONS.components.STANDARD_WIDGET_HEIGHT
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
+)
+
+// Get the precision value for proper number formatting
+const precision = computed(() => {
+  const p = props.widget.options?.precision
+  // Treat negative or non-numeric precision as undefined
+  return typeof p === 'number' && p >= 0 ? p : undefined
+})
+
+// Calculate the step value based on precision or widget options
+const stepValue = computed(() => {
+  // If step is explicitly defined in options, use it
+  if (props.widget.options?.step !== undefined) {
+    return String(props.widget.options.step)
+  }
+  // Otherwise, derive from precision
+  if (precision.value !== undefined) {
+    if (precision.value === 0) {
+      return '1'
+    }
+    // For precision > 0, step = 1 / (10^precision)
+    // precision 1 → 0.1, precision 2 → 0.01, etc.
+    return (1 / Math.pow(10, precision.value)).toFixed(precision.value)
+  }
+  // Default to 'any' for unrestricted stepping
+  return 'any'
+})
+
+// Format a number according to the widget's precision
+const formatNumber = (value: number): string => {
+  if (precision.value === undefined) {
+    // No precision specified, return as-is
+    return String(value)
+  }
+  // Use toFixed to ensure correct decimal places
+  return value.toFixed(precision.value)
+}
+
+// Apply precision-based rounding to a number
+const applyPrecision = (value: number): number => {
+  if (precision.value === undefined) {
+    // No precision specified, return as-is
+    return value
+  }
+  if (precision.value === 0) {
+    // Integer precision
+    return Math.round(value)
+  }
+  // Round to the specified decimal places
+  const multiplier = Math.pow(10, precision.value)
+  return Math.round(value * multiplier) / multiplier
+}
+
+// Keep a separate display value for the input field
+const inputDisplayValue = ref(formatNumber(localValue.value))
+
+// Update display value when localValue changes from external sources
+watch(localValue, (newValue) => {
+  inputDisplayValue.value = formatNumber(newValue)
+})
+
+const handleInputBlur = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const value = target.value || '0'
+  const parsed = parseFloat(value)
+
+  if (!isNaN(parsed)) {
+    // Apply precision-based rounding
+    const roundedValue = applyPrecision(parsed)
+    onChange(roundedValue)
+    // Update display value with proper formatting
+    inputDisplayValue.value = formatNumber(roundedValue)
+  }
+}
+
+const handleInputKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter') {
+    const target = event.target as HTMLInputElement
+    const value = target.value || '0'
+    const parsed = parseFloat(value)
+
+    if (!isNaN(parsed)) {
+      // Apply precision-based rounding
+      const roundedValue = applyPrecision(parsed)
+      onChange(roundedValue)
+      // Update display value with proper formatting
+      inputDisplayValue.value = formatNumber(roundedValue)
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* Remove number input spinners */
+:deep(input[type='number']::-webkit-inner-spin-button),
+:deep(input[type='number']::-webkit-outer-spin-button) {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+:deep(input[type='number']) {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+</style>

src/components/graph/vueWidgets/WidgetTextarea.vue

@@ -0,0 +1,44 @@
+<template>
+  <Textarea
+    v-model="localValue"
+    v-bind="filteredProps"
+    :disabled="readonly"
+    class="w-full text-xs"
+    size="small"
+    rows="3"
+    @update:model-value="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import Textarea from 'primevue/textarea'
+import { computed } from 'vue'
+
+import { useStringWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  INPUT_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string>
+  modelValue: string
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useStringWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, INPUT_EXCLUDED_PROPS)
+)
+</script>

src/components/graph/vueWidgets/WidgetToggleSwitch.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <ToggleSwitch
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ToggleSwitch from 'primevue/toggleswitch'
+import { computed } from 'vue'
+
+import { useBooleanWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  STANDARD_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<boolean>
+  modelValue: boolean
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useBooleanWidgetValue(
+  props.widget,
+  props.modelValue,
+  emit
+)
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
+)
+</script>
+
+<style scoped>
+:deep(.p-toggleswitch .p-toggleswitch-slider) {
+  border: 1px solid transparent;
+}
+
+:deep(.p-toggleswitch:hover .p-toggleswitch-slider) {
+  border-color: currentColor;
+}
+</style>

src/components/graph/vueWidgets/WidgetTreeSelect.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="flex items-center justify-between gap-4">
+    <label v-if="widget.name" class="text-xs opacity-80 min-w-[4em] truncate">{{
+      widget.name
+    }}</label>
+    <TreeSelect
+      v-model="localValue"
+      v-bind="filteredProps"
+      :disabled="readonly"
+      class="flex-grow min-w-[8em] max-w-[20em] text-xs"
+      size="small"
+      @update:model-value="onChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import TreeSelect from 'primevue/treeselect'
+import { computed } from 'vue'
+
+import { useWidgetValue } from '@/composables/graph/useWidgetValue'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import {
+  PANEL_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<any>
+  modelValue: any
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+// Use the composable for consistent widget value handling
+const { localValue, onChange } = useWidgetValue({
+  widget: props.widget,
+  modelValue: props.modelValue,
+  defaultValue: null,
+  emit
+})
+
+// TreeSelect specific excluded props
+const TREE_SELECT_EXCLUDED_PROPS = [
+  ...PANEL_EXCLUDED_PROPS,
+  'inputClass',
+  'inputStyle'
+] as const
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, TREE_SELECT_EXCLUDED_PROPS)
+)
+</script>

src/components/helpcenter/HelpCenterMenuContent.vue

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

src/components/searchbox/CommandSearchItem.vue

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

src/components/searchbox/NodeSearchBox.vue

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

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -26,7 +26,6 @@
           @add-filter="addFilter"
           @remove-filter="removeFilter"
           @add-node="addNode"
-          @execute-command="executeCommand"
         />
       </template>
     </Dialog>
@@ -47,7 +46,6 @@ import {
 } from '@/lib/litegraph/src/litegraph'
 import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 import { useLitegraphService } from '@/services/litegraphService'
-import { type ComfyCommandImpl, useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
@@ -64,7 +62,6 @@ let disconnectOnReset = false
 
 const settingStore = useSettingStore()
 const litegraphService = useLitegraphService()
-const commandStore = useCommandStore()
 
 const { visible } = storeToRefs(useSearchBoxStore())
 const dismissable = ref(true)
@@ -112,14 +109,6 @@ const addNode = (nodeDef: ComfyNodeDefImpl) => {
   window.requestAnimationFrame(closeDialog)
 }
 
-const executeCommand = async (command: ComfyCommandImpl) => {
-  // Close the dialog immediately
-  closeDialog()
-
-  // Execute the command
-  await commandStore.execute(command.id)
-}
-
 const newSearchBoxEnabled = computed(
   () => settingStore.get('Comfy.NodeSearchBoxImpl') === 'default'
 )

src/components/sidebar/SideToolbar.vue

@@ -16,7 +16,6 @@
         <SidebarLogoutIcon v-if="userStore.isMultiUserServer" />
         <SidebarHelpCenterIcon />
         <SidebarBottomPanelToggleButton />
-        <SidebarShortcutsToggleButton />
       </div>
     </nav>
   </teleport>
@@ -33,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'

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/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/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/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/element/useRetriggerableAnimation.ts

@@ -1,80 +0,0 @@
-import { onMounted, ref, watch } from 'vue'
-import type { Ref, WatchSource } from 'vue'
-
-/**
- * A composable that manages retriggerable CSS animations.
- * Provides a boolean ref that can be toggled to restart CSS animations.
- *
- * @param trigger - Optional reactive source that triggers the animation when it changes
- * @param options - Configuration options
- * @returns An object containing the animation state ref
- *
- * @example
- * ```vue
- * <template>
- *   <div :class="{ 'animate-slide-up': shouldAnimate }">
- *     Content
- *   </div>
- * </template>
- *
- * <script setup>
- * const { shouldAnimate } = useRetriggerableAnimation(someReactiveTrigger)
- * </script>
- * ```
- */
-export function useRetriggerableAnimation<T = any>(
-  trigger?: WatchSource<T> | Ref<T>,
-  options: {
-    animateOnMount?: boolean
-    animationDelay?: number
-  } = {}
-) {
-  const { animateOnMount = true, animationDelay = 0 } = options
-
-  const shouldAnimate = ref(false)
-
-  /**
-   * Retriggers the animation by removing and re-adding the animation class
-   */
-  const retriggerAnimation = () => {
-    // Remove animation class
-    shouldAnimate.value = false
-    // Force browser reflow to ensure the class removal is processed
-    void document.body.offsetHeight
-    // Re-add animation class in the next frame
-    requestAnimationFrame(() => {
-      if (animationDelay > 0) {
-        setTimeout(() => {
-          shouldAnimate.value = true
-        }, animationDelay)
-      } else {
-        shouldAnimate.value = true
-      }
-    })
-  }
-
-  // Trigger animation on mount if requested
-  if (animateOnMount) {
-    onMounted(() => {
-      if (animationDelay > 0) {
-        setTimeout(() => {
-          shouldAnimate.value = true
-        }, animationDelay)
-      } else {
-        shouldAnimate.value = true
-      }
-    })
-  }
-
-  // Watch for trigger changes to retrigger animation
-  if (trigger) {
-    watch(trigger, () => {
-      retriggerAnimation()
-    })
-  }
-
-  return {
-    shouldAnimate,
-    retriggerAnimation
-  }
-}

src/composables/element/useTransformState.ts

@@ -0,0 +1,242 @@
+/**
+ * Composable for managing transform state synchronized with LiteGraph canvas
+ *
+ * This composable is a critical part of the hybrid rendering architecture that
+ * allows Vue components to render in perfect alignment with LiteGraph's canvas.
+ *
+ * ## Core Concept
+ *
+ * LiteGraph uses a canvas for rendering connections, grid, and handling interactions.
+ * Vue components need to render nodes on top of this canvas. The challenge is
+ * synchronizing the coordinate systems:
+ *
+ * - LiteGraph: Uses canvas coordinates with its own transform matrix
+ * - Vue/DOM: Uses screen coordinates with CSS transforms
+ *
+ * ## Solution: Transform Container Pattern
+ *
+ * Instead of transforming individual nodes (O(n) complexity), we:
+ * 1. Mirror LiteGraph's transform matrix to a single CSS container
+ * 2. Place all Vue nodes as children with simple absolute positioning
+ * 3. Achieve O(1) transform updates regardless of node count
+ *
+ * ## Coordinate Systems
+ *
+ * - **Canvas coordinates**: LiteGraph's internal coordinate system
+ * - **Screen coordinates**: Browser's viewport coordinate system
+ * - **Transform sync**: camera.x/y/z mirrors canvas.ds.offset/scale
+ *
+ * ## Performance Benefits
+ *
+ * - GPU acceleration via CSS transforms
+ * - No layout thrashing (only transform changes)
+ * - Efficient viewport culling calculations
+ * - Scales to 1000+ nodes while maintaining 60 FPS
+ *
+ * @example
+ * ```typescript
+ * const { camera, transformStyle, canvasToScreen } = useTransformState()
+ *
+ * // In template
+ * <div :style="transformStyle">
+ *   <NodeComponent
+ *     v-for="node in nodes"
+ *     :style="{ left: node.x + 'px', top: node.y + 'px' }"
+ *   />
+ * </div>
+ *
+ * // Convert coordinates
+ * const screenPos = canvasToScreen({ x: nodeX, y: nodeY })
+ * ```
+ */
+import { computed, reactive, readonly } from 'vue'
+
+import type { LGraphCanvas } from '../../lib/litegraph/src/litegraph'
+
+export interface Point {
+  x: number
+  y: number
+}
+
+export interface Camera {
+  x: number
+  y: number
+  z: number // scale/zoom
+}
+
+export const useTransformState = () => {
+  // Reactive state mirroring LiteGraph's canvas transform
+  const camera = reactive<Camera>({
+    x: 0,
+    y: 0,
+    z: 1
+  })
+
+  // Computed transform string for CSS
+  const transformStyle = computed(() => ({
+    transform: `scale(${camera.z}) translate(${camera.x}px, ${camera.y}px)`,
+    transformOrigin: '0 0'
+  }))
+
+  /**
+   * Synchronizes Vue's reactive camera state with LiteGraph's canvas transform
+   *
+   * Called every frame via RAF to ensure Vue components stay aligned with canvas.
+   * This is the heart of the hybrid rendering system - it bridges the gap between
+   * LiteGraph's canvas transforms and Vue's reactive system.
+   *
+   * @param canvas - LiteGraph canvas instance with DragAndScale (ds) transform state
+   */
+  const syncWithCanvas = (canvas: LGraphCanvas) => {
+    if (!canvas || !canvas.ds) return
+
+    // Mirror LiteGraph's transform state to Vue's reactive state
+    // ds.offset = pan offset, ds.scale = zoom level
+    camera.x = canvas.ds.offset[0]
+    camera.y = canvas.ds.offset[1]
+    camera.z = canvas.ds.scale || 1
+  }
+
+  /**
+   * Converts canvas coordinates to screen coordinates
+   *
+   * Applies the same transform that LiteGraph uses for rendering.
+   * Essential for positioning Vue components to align with canvas elements.
+   *
+   * Formula: screen = canvas * scale + offset
+   *
+   * @param point - Point in canvas coordinate system
+   * @returns Point in screen coordinate system
+   */
+  const canvasToScreen = (point: Point): Point => {
+    return {
+      x: point.x * camera.z + camera.x,
+      y: point.y * camera.z + camera.y
+    }
+  }
+
+  /**
+   * Converts screen coordinates to canvas coordinates
+   *
+   * Inverse of canvasToScreen. Useful for hit testing and converting
+   * mouse events back to canvas space.
+   *
+   * Formula: canvas = (screen - offset) / scale
+   *
+   * @param point - Point in screen coordinate system
+   * @returns Point in canvas coordinate system
+   */
+  const screenToCanvas = (point: Point): Point => {
+    return {
+      x: (point.x - camera.x) / camera.z,
+      y: (point.y - camera.y) / camera.z
+    }
+  }
+
+  // Get node's screen bounds for culling
+  const getNodeScreenBounds = (
+    pos: ArrayLike<number>,
+    size: ArrayLike<number>
+  ): DOMRect => {
+    const topLeft = canvasToScreen({ x: pos[0], y: pos[1] })
+    const width = size[0] * camera.z
+    const height = size[1] * camera.z
+
+    return new DOMRect(topLeft.x, topLeft.y, width, height)
+  }
+
+  // Helper: Calculate zoom-adjusted margin for viewport culling
+  const calculateAdjustedMargin = (baseMargin: number): number => {
+    if (camera.z < 0.1) return Math.min(baseMargin * 5, 2.0)
+    if (camera.z > 3.0) return Math.max(baseMargin * 0.5, 0.05)
+    return baseMargin
+  }
+
+  // Helper: Check if node is too small to be visible at current zoom
+  const isNodeTooSmall = (nodeSize: ArrayLike<number>): boolean => {
+    const nodeScreenSize = Math.max(nodeSize[0], nodeSize[1]) * camera.z
+    return nodeScreenSize < 4
+  }
+
+  // Helper: Calculate expanded viewport bounds with margin
+  const getExpandedViewportBounds = (
+    viewport: { width: number; height: number },
+    margin: number
+  ) => {
+    const marginX = viewport.width * margin
+    const marginY = viewport.height * margin
+    return {
+      left: -marginX,
+      right: viewport.width + marginX,
+      top: -marginY,
+      bottom: viewport.height + marginY
+    }
+  }
+
+  // Helper: Test if node intersects with viewport bounds
+  const testViewportIntersection = (
+    screenPos: { x: number; y: number },
+    nodeSize: ArrayLike<number>,
+    bounds: { left: number; right: number; top: number; bottom: number }
+  ): boolean => {
+    const nodeRight = screenPos.x + nodeSize[0] * camera.z
+    const nodeBottom = screenPos.y + nodeSize[1] * camera.z
+
+    return !(
+      nodeRight < bounds.left ||
+      screenPos.x > bounds.right ||
+      nodeBottom < bounds.top ||
+      screenPos.y > bounds.bottom
+    )
+  }
+
+  // Check if node is within viewport with frustum and size-based culling
+  const isNodeInViewport = (
+    nodePos: ArrayLike<number>,
+    nodeSize: ArrayLike<number>,
+    viewport: { width: number; height: number },
+    margin: number = 0.2
+  ): boolean => {
+    // Early exit for tiny nodes
+    if (isNodeTooSmall(nodeSize)) return false
+
+    const screenPos = canvasToScreen({ x: nodePos[0], y: nodePos[1] })
+    const adjustedMargin = calculateAdjustedMargin(margin)
+    const bounds = getExpandedViewportBounds(viewport, adjustedMargin)
+
+    return testViewportIntersection(screenPos, nodeSize, bounds)
+  }
+
+  // Get viewport bounds in canvas coordinates (for spatial index queries)
+  const getViewportBounds = (
+    viewport: { width: number; height: number },
+    margin: number = 0.2
+  ) => {
+    const marginX = viewport.width * margin
+    const marginY = viewport.height * margin
+
+    const topLeft = screenToCanvas({ x: -marginX, y: -marginY })
+    const bottomRight = screenToCanvas({
+      x: viewport.width + marginX,
+      y: viewport.height + marginY
+    })
+
+    return {
+      x: topLeft.x,
+      y: topLeft.y,
+      width: bottomRight.x - topLeft.x,
+      height: bottomRight.y - topLeft.y
+    }
+  }
+
+  return {
+    camera: readonly(camera),
+    transformStyle,
+    syncWithCanvas,
+    canvasToScreen,
+    screenToCanvas,
+    getNodeScreenBounds,
+    isNodeInViewport,
+    getViewportBounds
+  }
+}

src/composables/graph/README.md

@@ -0,0 +1,211 @@
+# Graph Composables - Reactive Layout System
+
+This directory contains composables for the reactive layout system, enabling Vue nodes to handle their own interactions while maintaining synchronization with LiteGraph.
+
+## Composable Architecture
+
+```mermaid
+graph TB
+    subgraph "Composables"
+        URL[useReactiveLayout<br/>- Singleton Management<br/>- Service Access]
+        UVNI[useVueNodeInteraction<br/>- Node Dragging<br/>- CSS Transforms]
+        ULGS[useLiteGraphSync<br/>- Bidirectional Sync<br/>- Position Updates]
+    end
+
+    subgraph "Services"
+        LT[ReactiveLayoutTree]
+        HT[ReactiveHitTester]
+    end
+
+    subgraph "Components"
+        GC[GraphCanvas]
+        VN[Vue Nodes]
+        TP[TransformPane]
+    end
+
+    URL --> LT
+    URL --> HT
+    UVNI --> URL
+    ULGS --> URL
+    
+    GC --> ULGS
+    VN --> UVNI
+    TP --> URL
+</mermaid>
+
+## Interaction Flow
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant VueNode
+    participant UVNI as useVueNodeInteraction
+    participant LT as LayoutTree
+    participant LG as LiteGraph
+
+    User->>VueNode: pointerdown
+    VueNode->>UVNI: startDrag(event)
+    UVNI->>UVNI: Set drag state
+    UVNI->>UVNI: Capture pointer
+    
+    User->>VueNode: pointermove
+    VueNode->>UVNI: handleDrag(event)
+    UVNI->>UVNI: Calculate delta
+    UVNI->>VueNode: Update CSS transform
+    Note over VueNode: Visual feedback only
+    
+    User->>VueNode: pointerup
+    VueNode->>UVNI: endDrag(event)
+    UVNI->>LT: updateNodePosition(finalPos)
+    LT->>LG: Trigger reactive sync
+    LG->>LG: Update canvas
+```
+
+## useReactiveLayout
+
+Singleton management for the reactive layout system.
+
+```mermaid
+classDiagram
+    class useReactiveLayout {
+        +layoutTree: ComputedRef~ReactiveLayoutTree~
+        +hitTester: ComputedRef~ReactiveHitTester~
+        +nodePositions: ComputedRef~Map~
+        +nodeBounds: ComputedRef~Map~
+        +selectedNodes: ComputedRef~Set~
+        -initialize(): void
+    }
+
+    class Singleton {
+        <<pattern>>
+        Shared across all components
+    }
+
+    useReactiveLayout --> Singleton : implements
+```
+
+## useVueNodeInteraction
+
+Handles individual node interactions with CSS transforms.
+
+```mermaid
+flowchart LR
+    subgraph "Drag State"
+        DS[isDragging<br/>dragDelta<br/>dragStartPos]
+    end
+    
+    subgraph "Event Handlers"
+        SD[startDrag]
+        HD[handleDrag]
+        ED[endDrag]
+    end
+    
+    subgraph "Computed Styles"
+        NS[nodeStyle<br/>- position<br/>- dimensions<br/>- z-index]
+        DGS[dragStyle<br/>- transform<br/>- transition]
+    end
+    
+    SD --> DS
+    HD --> DS
+    ED --> DS
+    
+    DS --> NS
+    DS --> DGS
+```
+
+### Transform Calculation
+
+```mermaid
+graph TB
+    subgraph "Mouse Delta"
+        MD[event.clientX/Y - startMouse]
+    end
+    
+    subgraph "Canvas Transform"
+        CT[screenToCanvas conversion]
+    end
+    
+    subgraph "Drag Delta"
+        DD[Canvas-space delta]
+    end
+    
+    subgraph "CSS Transform"
+        CSS[translate(deltaX, deltaY)]
+    end
+    
+    MD --> CT
+    CT --> DD
+    DD --> CSS
+```
+
+## useLiteGraphSync
+
+Bidirectional synchronization between LiteGraph and the reactive layout tree.
+
+```mermaid
+stateDiagram-v2
+    [*] --> Initialize
+    
+    Initialize --> SyncFromLiteGraph
+    SyncFromLiteGraph --> WatchLayoutTree
+    
+    state WatchLayoutTree {
+        [*] --> Listening
+        Listening --> PositionChanged: Layout tree update
+        PositionChanged --> UpdateLiteGraph
+        UpdateLiteGraph --> TriggerRedraw
+        TriggerRedraw --> Listening
+    }
+    
+    state SyncFromLiteGraph {
+        [*] --> ReadNodes
+        ReadNodes --> UpdateLayoutTree
+        UpdateLayoutTree --> [*]
+    }
+```
+
+## Integration Example
+
+```typescript
+// In GraphCanvas.vue
+const { initializeSync } = useLiteGraphSync()
+onMounted(() => {
+  initializeSync() // Start bidirectional sync
+})
+
+// In LGraphNode.vue
+const {
+  isDragging,
+  startDrag,
+  handleDrag,
+  endDrag,
+  dragStyle,
+  updatePosition
+} = useVueNodeInteraction(props.nodeData.id)
+
+// Template
+<div
+  :style="[
+    {
+      transform: `translate(${position.x}px, ${position.y}px)`,
+      // ... other styles
+    },
+    dragStyle // Applied during drag
+  ]"
+  @pointerdown="handlePointerDown"
+  @pointermove="handlePointerMove"
+  @pointerup="handlePointerUp"
+>
+```
+
+## Performance Considerations
+
+1. **CSS Transforms During Drag**: No layout recalculation, GPU accelerated
+2. **Batch Position Updates**: Layout tree updates trigger single LiteGraph sync
+3. **Reactive Efficiency**: Vue's computed properties cache results
+4. **Spatial Indexing**: QuadTree integration for fast hit testing
+
+## Future Migration Path
+
+Currently: Vue nodes use CSS transforms, commit to layout tree on drag end
+Future: Each renderer owns complete interaction handling and layout state

src/composables/graph/useCanvasTransformSync.ts

@@ -0,0 +1,115 @@
+import { onUnmounted, ref } from 'vue'
+
+import type { LGraphCanvas } from '../../lib/litegraph/src/litegraph'
+
+export interface CanvasTransformSyncOptions {
+  /**
+   * Whether to automatically start syncing when canvas is available
+   * @default true
+   */
+  autoStart?: boolean
+}
+
+export interface CanvasTransformSyncCallbacks {
+  /**
+   * Called when sync starts
+   */
+  onStart?: () => void
+  /**
+   * Called after each sync update with timing information
+   */
+  onUpdate?: (duration: number) => void
+  /**
+   * Called when sync stops
+   */
+  onStop?: () => void
+}
+
+/**
+ * Manages requestAnimationFrame-based synchronization with LiteGraph canvas transforms.
+ *
+ * This composable provides a clean way to sync Vue transform state with LiteGraph canvas
+ * on every frame. It handles RAF lifecycle management, provides performance timing,
+ * and ensures proper cleanup.
+ *
+ * The sync function typically reads canvas.ds (draw state) properties like offset and scale
+ * to keep Vue components aligned with the canvas coordinate system.
+ *
+ * @example
+ * ```ts
+ * const { isActive, startSync, stopSync } = useCanvasTransformSync(
+ *   canvas,
+ *   (canvas) => syncWithCanvas(canvas),
+ *   {
+ *     onStart: () => emit('rafStatusChange', true),
+ *     onUpdate: (time) => emit('transformUpdate', time),
+ *     onStop: () => emit('rafStatusChange', false)
+ *   }
+ * )
+ * ```
+ */
+export function useCanvasTransformSync(
+  canvas: LGraphCanvas | undefined | null,
+  syncFn: (canvas: LGraphCanvas) => void,
+  callbacks: CanvasTransformSyncCallbacks = {},
+  options: CanvasTransformSyncOptions = {}
+) {
+  const { autoStart = true } = options
+  const { onStart, onUpdate, onStop } = callbacks
+
+  const isActive = ref(false)
+  let rafId: number | null = null
+
+  const startSync = () => {
+    if (isActive.value || !canvas) return
+
+    isActive.value = true
+    onStart?.()
+
+    const sync = () => {
+      if (!isActive.value || !canvas) return
+
+      try {
+        const startTime = performance.now()
+        syncFn(canvas)
+        const endTime = performance.now()
+
+        onUpdate?.(endTime - startTime)
+      } catch (error) {
+        console.warn('Canvas transform sync error:', error)
+      }
+
+      rafId = requestAnimationFrame(sync)
+    }
+
+    sync()
+  }
+
+  const stopSync = () => {
+    if (!isActive.value) return
+
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId)
+      rafId = null
+    }
+
+    isActive.value = false
+    onStop?.()
+  }
+
+  // Auto-start if canvas is available and autoStart is enabled
+  if (autoStart && canvas) {
+    startSync()
+  }
+
+  // Clean up on unmount
+  onUnmounted(() => {
+    stopSync()
+  })
+
+  return {
+    isActive,
+    startSync,
+    stopSync
+  }
+}

src/composables/graph/useEventForwarding.ts

@@ -0,0 +1,186 @@
+import { useCanvasStore } from '@/stores/graphStore'
+
+import type { LGraphCanvas } from '../../lib/litegraph/src/litegraph'
+
+export function useEventForwarding() {
+  const canvasStore = useCanvasStore()
+
+  // Track active drag operation
+  let isDragging = false
+  let dragCleanup: (() => void) | null = null
+  // Store last known position for escape key handling
+  const lastPointerPosition = { x: 0, y: 0 }
+
+  function createSyntheticPointerEvent(
+    originalEvent: PointerEvent,
+    eventType: string
+  ): PointerEvent {
+    // Only copy properties that LiteGraph actually uses
+    return new PointerEvent(eventType, {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+      // Position properties
+      clientX: originalEvent.clientX,
+      clientY: originalEvent.clientY,
+      // Modifier keys
+      ctrlKey: originalEvent.ctrlKey,
+      shiftKey: originalEvent.shiftKey,
+      altKey: originalEvent.altKey,
+      metaKey: originalEvent.metaKey,
+      // Button state
+      button: originalEvent.button,
+      buttons: originalEvent.buttons,
+      // Pointer tracking
+      pointerId: originalEvent.pointerId,
+      isPrimary: originalEvent.isPrimary,
+      pointerType: originalEvent.pointerType
+    })
+  }
+
+  function forwardPointerEvent(
+    originalEvent: PointerEvent,
+    eventType: 'down' | 'move' | 'up'
+  ) {
+    const canvas: LGraphCanvas | null = canvasStore.getCanvas()
+    if (!canvas) {
+      console.warn('No canvas available for event forwarding')
+      return
+    }
+
+    // Prevent original event from bubbling to canvas
+    originalEvent.stopPropagation()
+    originalEvent.preventDefault()
+
+    // Create synthetic event
+    const syntheticEvent = createSyntheticPointerEvent(
+      originalEvent,
+      `pointer${eventType}`
+    )
+
+    // Create a mutable copy of the event for LiteGraph to modify
+    const mutableEvent = syntheticEvent as PointerEvent & {
+      canvasX?: number
+      canvasY?: number
+      deltaX?: number
+      deltaY?: number
+      safeOffsetX?: number
+      safeOffsetY?: number
+    }
+
+    // Let LiteGraph adjust coordinates to graph space
+    // Using 'as any' to bypass TypeScript assertion limitations
+    ;(canvas.adjustMouseEvent as any)(mutableEvent)
+
+    // Forward to appropriate handler
+    switch (eventType) {
+      case 'down':
+        canvas.processMouseDown(mutableEvent)
+        break
+      case 'move':
+        canvas.processMouseMove(mutableEvent)
+        break
+      case 'up':
+        canvas.processMouseUp(mutableEvent)
+        break
+    }
+  }
+
+  // Pre-create event handlers to avoid recreating on each pointerdown
+  const handlePointerMove = (e: PointerEvent) => {
+    if (!isDragging) return
+    // Update last known position
+    lastPointerPosition.x = e.clientX
+    lastPointerPosition.y = e.clientY
+    forwardPointerEvent(e, 'move')
+  }
+
+  const handlePointerUp = (e: PointerEvent) => {
+    if (!isDragging) return
+
+    isDragging = false
+    forwardPointerEvent(e, 'up')
+
+    // Clean up listeners
+    if (dragCleanup) {
+      dragCleanup()
+      dragCleanup = null
+    }
+  }
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    // Handle escape key to cancel drag
+    if (e.key === 'Escape' && isDragging) {
+      isDragging = false
+
+      // Create minimal synthetic cancel event
+      const cancelEvent = new PointerEvent('pointerup', {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+        // Use last known position from the current drag operation
+        clientX: lastPointerPosition.x,
+        clientY: lastPointerPosition.y,
+        button: 0,
+        buttons: 0
+      })
+
+      const canvas: LGraphCanvas | null = canvasStore.getCanvas()
+      if (canvas) {
+        const mutableCancelEvent = cancelEvent as PointerEvent & {
+          canvasX?: number
+          canvasY?: number
+          deltaX?: number
+          deltaY?: number
+          safeOffsetX?: number
+          safeOffsetY?: number
+        }
+        ;(canvas.adjustMouseEvent as any)(mutableCancelEvent)
+        canvas.processMouseUp(mutableCancelEvent)
+      }
+
+      // Clean up
+      if (dragCleanup) {
+        dragCleanup()
+        dragCleanup = null
+      }
+    }
+  }
+
+  function handleSlotPointerDown(originalEvent: PointerEvent) {
+    // Forward the initial pointer down
+    forwardPointerEvent(originalEvent, 'down')
+
+    // Set up drag handling
+    isDragging = true
+    // Initialize last known position
+    lastPointerPosition.x = originalEvent.clientX
+    lastPointerPosition.y = originalEvent.clientY
+
+    // Add global listeners for drag handling
+    document.addEventListener('pointermove', handlePointerMove, true)
+    document.addEventListener('pointerup', handlePointerUp, true)
+    document.addEventListener('keydown', handleKeyDown, true)
+
+    // Store cleanup function
+    dragCleanup = () => {
+      document.removeEventListener('pointermove', handlePointerMove, true)
+      document.removeEventListener('pointerup', handlePointerUp, true)
+      document.removeEventListener('keydown', handleKeyDown, true)
+    }
+  }
+
+  // Cleanup on unmount
+  function cleanup() {
+    isDragging = false
+    if (dragCleanup) {
+      dragCleanup()
+      dragCleanup = null
+    }
+  }
+
+  return {
+    handleSlotPointerDown,
+    cleanup
+  }
+}