Revert "Add node slots to layout tree"

This reverts commit 460493a620.

.i18nrc.cjs

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

CONTRIBUTING.md

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

README.md

@@ -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]
@@ -75,7 +77,7 @@ The development of successive minor versions overlaps. For example, while versio
   <summary>v1.5: Native translation (i18n)</summary>
 
   ComfyUI now includes built-in translation support, replacing the need for third-party translation extensions. Select your language
-  in `Comfy > Locale > Language` to translate the interface into English, Chinese (Simplified), Russian, Japanese, Korean, or Arabic. This native
+  in `Comfy > Locale > Language` to translate the interface into English, Chinese (Simplified), Russian, Japanese, or Korean. This native
   implementation offers better performance, reliability, and maintainability compared to previous solutions.<br>
 
   More details available here: https://blog.comfy.org/p/native-localization-support-i18n
@@ -512,18 +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()
   }
 

browser_tests/fixtures/components/Topbar.ts

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

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

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

browser_tests/tests/interaction.spec.ts

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

browser_tests/tests/menu.spec.ts

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

browser_tests/tests/minimap.spec.ts

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

browser_tests/tests/rerouteNode.spec.ts

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

browser_tests/tests/rightClickMenu.spec.ts

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

browser_tests/tests/subgraph.spec.ts

@@ -196,68 +196,6 @@ test.describe('Subgraph Operations', () => {
       const deletedNode = await comfyPage.getNodeRefById('2')
       expect(await deletedNode.exists()).toBe(false)
     })
-
-    test.describe('Subgraph copy and paste', () => {
-      test('Can copy subgraph node by dragging + alt', async ({
-        comfyPage
-      }) => {
-        await comfyPage.loadWorkflow('basic-subgraph')
-
-        const subgraphNode = await comfyPage.getNodeRefById('2')
-
-        // Get position of subgraph node
-        const subgraphPos = await subgraphNode.getPosition()
-
-        // Alt + Click on the subgraph node
-        await comfyPage.page.mouse.move(subgraphPos.x + 16, subgraphPos.y + 16)
-        await comfyPage.page.keyboard.down('Alt')
-        await comfyPage.page.mouse.down()
-        await comfyPage.nextFrame()
-
-        // Drag slightly to trigger the copy
-        await comfyPage.page.mouse.move(subgraphPos.x + 64, subgraphPos.y + 64)
-        await comfyPage.page.mouse.up()
-        await comfyPage.page.keyboard.up('Alt')
-
-        // Find all subgraph nodes
-        const subgraphNodes =
-          await comfyPage.getNodeRefsByTitle(NEW_SUBGRAPH_TITLE)
-
-        // Expect a second subgraph node to be created (2 total)
-        expect(subgraphNodes.length).toBe(2)
-      })
-
-      test('Copying subgraph node by dragging + alt creates a new subgraph node with unique type', async ({
-        comfyPage
-      }) => {
-        await comfyPage.loadWorkflow('basic-subgraph')
-
-        const subgraphNode = await comfyPage.getNodeRefById('2')
-
-        // Get position of subgraph node
-        const subgraphPos = await subgraphNode.getPosition()
-
-        // Alt + Click on the subgraph node
-        await comfyPage.page.mouse.move(subgraphPos.x + 16, subgraphPos.y + 16)
-        await comfyPage.page.keyboard.down('Alt')
-        await comfyPage.page.mouse.down()
-        await comfyPage.nextFrame()
-
-        // Drag slightly to trigger the copy
-        await comfyPage.page.mouse.move(subgraphPos.x + 64, subgraphPos.y + 64)
-        await comfyPage.page.mouse.up()
-        await comfyPage.page.keyboard.up('Alt')
-
-        // Find all subgraph nodes and expect all unique IDs
-        const subgraphNodes =
-          await comfyPage.getNodeRefsByTitle(NEW_SUBGRAPH_TITLE)
-
-        // Expect the second subgraph node to have a unique type
-        const nodeType1 = await subgraphNodes[0].getType()
-        const nodeType2 = await subgraphNodes[1].getType()
-        expect(nodeType1).not.toBe(nodeType2)
-      })
-    })
   })
 
   test.describe('Operations Inside Subgraphs', () => {
@@ -528,103 +466,4 @@ test.describe('Subgraph Operations', () => {
       expect(finalCount).toBe(parentCount)
     })
   })
-
-  test.describe('Navigation Hotkeys', () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-    })
-
-    test('Navigation hotkey can be customized', async ({ comfyPage }) => {
-      await comfyPage.loadWorkflow('basic-subgraph')
-      await comfyPage.nextFrame()
-
-      // Change the Exit Subgraph keybinding from Escape to Alt+Q
-      await comfyPage.setSetting('Comfy.Keybinding.NewBindings', [
-        {
-          commandId: 'Comfy.Graph.ExitSubgraph',
-          combo: {
-            key: 'q',
-            ctrl: false,
-            alt: true,
-            shift: false
-          }
-        }
-      ])
-
-      await comfyPage.setSetting('Comfy.Keybinding.UnsetBindings', [
-        {
-          commandId: 'Comfy.Graph.ExitSubgraph',
-          combo: {
-            key: 'Escape',
-            ctrl: false,
-            alt: false,
-            shift: false
-          }
-        }
-      ])
-
-      // Reload the page
-      await comfyPage.page.reload()
-      await comfyPage.page.waitForTimeout(1024)
-
-      // Navigate into subgraph
-      const subgraphNode = await comfyPage.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb)
-
-      // Verify we're in a subgraph
-      expect(await isInSubgraph(comfyPage)).toBe(true)
-
-      // Test that Escape no longer exits subgraph
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-      if (!(await isInSubgraph(comfyPage))) {
-        throw new Error('Not in subgraph')
-      }
-
-      // Test that Alt+Q now exits subgraph
-      await comfyPage.page.keyboard.press('Alt+q')
-      await comfyPage.nextFrame()
-      expect(await isInSubgraph(comfyPage)).toBe(false)
-    })
-
-    test('Escape prioritizes closing dialogs over exiting subgraph', async ({
-      comfyPage
-    }) => {
-      await comfyPage.loadWorkflow('basic-subgraph')
-      await comfyPage.nextFrame()
-
-      const subgraphNode = await comfyPage.getNodeRefById('2')
-      await subgraphNode.navigateIntoSubgraph()
-      await comfyPage.page.waitForSelector(SELECTORS.breadcrumb)
-
-      // Verify we're in a subgraph
-      if (!(await isInSubgraph(comfyPage))) {
-        throw new Error('Not in subgraph')
-      }
-
-      // Open settings dialog using hotkey
-      await comfyPage.page.keyboard.press('Control+,')
-      await comfyPage.page.waitForSelector('.settings-container', {
-        state: 'visible'
-      })
-
-      // Press Escape - should close dialog, not exit subgraph
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-
-      // Dialog should be closed
-      await expect(
-        comfyPage.page.locator('.settings-container')
-      ).not.toBeVisible()
-
-      // Should still be in subgraph
-      expect(await isInSubgraph(comfyPage)).toBe(true)
-
-      // Press Escape again - now should exit subgraph
-      await comfyPage.page.keyboard.press('Escape')
-      await comfyPage.nextFrame()
-      expect(await isInSubgraph(comfyPage)).toBe(false)
-    })
-  })
 })

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

docs/FEATURE_FLAGS.md

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

docs/architecture/graph-architecture-evolution.md

@@ -0,0 +1,177 @@
+# Graph Architecture Evolution
+
+A visual journey through the architectural transformation of ComfyUI's graph system.
+
+---
+
+## Slide 1: Traditional LiteGraph Architecture
+
+```
+┌─────────────────────────────────────┐
+│           LiteGraph Node            │
+│  ┌─────────────────────────────┐    │
+│  │  • Data (inputs/outputs)    │    │
+│  │  • UI (position, size)      │    │
+│  │  • Rendering (draw methods) │    │
+│  │  • Interaction (mouse)      │    │
+│  │  • Business Logic           │    │
+│  └─────────────────────────────┘    │
+│                                     │
+│  Everything tightly coupled in      │
+│  a single monolithic structure      │
+└─────────────────────────────────────┘
+```
+
+**Problem**: All concerns mixed together - data, UI, rendering, and interaction are inseparable.
+
+---
+
+## Slide 2: Separation of Concerns
+
+```
+┌─────────────────────┐     ┌──────────────────────┐
+│   Graph Data Model  │     │    Layout Tree       │
+├─────────────────────┤     ├──────────────────────┤
+│ • Node connections  │     │ • Node positions     │
+│ • Input/output data │     │ • Node sizes         │
+│ • Execution state   │     │ • Z-index/stacking   │
+│ • Business logic    │     │ • Visibility states  │
+│                     │     │ • Bounds/spatial     │
+│ Pure data structure │     │ Pure UI structure    │
+│ No UI concepts      │     │ No business logic    │
+└─────────────────────┘     └──────────────────────┘
+```
+
+**Benefit**: Clean separation - graph logic vs presentation concerns.
+
+---
+
+## Slide 3: Multiple Renderer Support
+
+```
+                    Layout Tree
+                         │
+        ┌────────────────┼────────────────┐
+        ▼                ▼                ▼
+┌──────────────┐ ┌──────────────┐ ┌──────────────┐
+│ Canvas Render│ │  Vue Render  │ │ Three.js 3D  │
+├──────────────┤ ├──────────────┤ ├──────────────┤
+│              │ │              │ │              │
+│   [Canvas]   │ │ <Component>  │ │   [WebGL]    │
+│              │ │ </Component> │ │              │
+└──────────────┘ └──────────────┘ └──────────────┘
+
+        ┌────────────────┼────────────────┐
+        ▼                ▼                ▼
+┌──────────────┐ ┌──────────────┐ ┌──────────────┐
+│ Native iOS   │ │Native Android│ │   Terminal   │
+├──────────────┤ ├──────────────┤ ├──────────────┤
+│   UIKit      │ │   Compose    │ │    ASCII     │
+└──────────────┘ └──────────────┘ └──────────────┘
+```
+
+**Power**: Same layout tree, infinite rendering possibilities.
+
+---
+
+## Slide 4: Alternative UI Paradigms
+
+```
+         Graph Data Model
+                │
+                ├─────── With Layout Tree ─────► Traditional Node UI
+                │
+                └─────── Without Layout ───────┐
+                                               ▼
+                                    ┌──────────────────┐
+                                    │   Form-Based UI  │
+                                    ├──────────────────┤
+                                    │ ┌──────────────┐ │
+                                    │ │ Input Fields │ │
+                                    │ ├──────────────┤ │
+                                    │ │   Sliders    │ │
+                                    │ ├──────────────┤ │
+                                    │ │   Buttons    │ │
+                                    │ └──────────────┘ │
+                                    │                  │
+                                    │ Like Gradio/A1111│
+                                    └──────────────────┘
+```
+
+**Flexibility**: Renderers can interpret the graph data model however they want.
+
+---
+
+## Slide 5: Service Architecture
+
+```
+┌─────────────────────┐     ┌──────────────────────┐
+│  Graph Mutations    │     │  Layout Mutations    │
+│      Service        │     │      Service         │
+├─────────────────────┤     ├──────────────────────┤
+│ • addNode()         │     │ • moveNode()         │
+│ • connectNodes()    │     │ • resizeNode()       │
+│ • updateNodeData()  │     │ • bringToFront()     │
+│ • executeGraph()    │     │ • setVisibility()    │
+└──────┬──────────────┘     └──────┬───────────────┘
+       │                            │
+       ▼                            ▼
+┌─────────────────────┐     ┌──────────────────────┐
+│   Graph Gateway     │     │   Layout Gateway     │
+│   (Interface)       │     │   (Interface)        │
+└─────────────────────┘     └──────────────────────┘
+```
+
+**Clean APIs**: Well-defined interfaces for all operations.
+
+---
+
+## Slide 6: Deployment Flexibility
+
+```
+┌────────────────────────────────────────────────┐
+│                 Graph Data Model               │
+│                 Layout System                  │
+│                 Service Layer                  │
+└─────────────┬───────────┬───────────┬──────────┘
+              │           │           │
+     Local    │   Cloud   │   Native  │   Hybrid
+         ▼          ▼          ▼          ▼
+    ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
+    │Browser │ │  AWS   │ │  iOS   │ │Electron│
+    │        │ │Lambda  │ │  App   │ │   +    │
+    │  Yjs   │ │   +    │ │   +    │ │  Rust  │
+    │ CRDT   │ │GraphQL │ │ Swift  │ │Backend │
+    └────────┘ └────────┘ └────────┘ └────────┘
+
+    Because everything is behind interfaces, easily switch implementations without major development effort:
+    • Move graph execution to GPU cluster
+    • Run layout calculations in WebAssembly
+    • Store state in any database
+    • Sync across any network protocol
+```
+
+**Ultimate Flexibility**: Plug and play any component, deploy anywhere.
+
+---
+
+## Summary
+
+By separating concerns and defining clear interfaces:
+
+1. **Data Model** → Pure business logic, no UI
+2. **Layout Tree** → Pure spatial data, no logic  
+3. **Renderers** → Consume what they need
+4. **Services** → Clean mutation APIs
+5. **Gateways** → Swappable implementations, automatically map across differing API versions or schemas
+
+This architecture enables:
+- Multiple simultaneous renderers
+- Alternative UI paradigms  
+- Cloud/edge/native deployment
+- Real-time collaboration
+- Time-travel debugging
+- Performance optimization per layer
+- Better performance for state observers and undo/redo
+
+The key insight: **When you separate concerns properly, everything becomes possible.**

docs/architecture/layout-system.md

@@ -0,0 +1,146 @@
+# Layout System Architecture
+
+## Overview
+
+The Layout System provides a single source of truth for node positions, sizes, and spatial data in the ComfyUI frontend. It uses CRDT (Conflict-free Replicated Data Types) via Yjs to eliminate snap-back issues and ownership conflicts between LiteGraph and Vue components.
+
+## Architecture
+
+```
+┌─────────────────────┐     ┌────────────────────┐
+│   Layout Store      │────▶│  LiteGraph Canvas  │
+│   (CRDT/Yjs)       │     │    (One-way sync)  │
+└────────┬────────────┘     └────────────────────┘
+         │
+         │  Mutations API
+         │
+┌────────▼────────────┐
+│   Vue Components    │
+│  (Read + Mutate)    │
+└─────────────────────┘
+```
+
+## Key Components
+
+### 1. Layout Store (`/src/stores/layoutStore.ts`)
+- **Yjs-based CRDT implementation** for conflict-free operations
+- **Single source of truth** for all layout data
+- **Reactive state** with Vue `customRef` for shared write access
+- **Spatial queries** - find nodes at point or in bounds
+- **Operation history** - tracks all changes with actor/source
+
+### 2. Layout Mutations (`/src/services/layoutMutations.ts`)
+- **Clean API** for modifying layout state
+- **Source tracking** - identifies where changes originated (canvas/vue/external)
+- **Direct operations** - no queuing, CRDT handles consistency
+
+### 3. Vue Integration (`/src/composables/graph/useLayout.ts`)
+- **`useLayout()`** - Access store and mutations
+- **`useNodeLayout(nodeId)`** - Per-node reactive data and drag handlers
+- **`useLayoutSync()`** - One-way sync from Layout to LiteGraph
+
+## Usage Examples
+
+### Basic Node Access
+```typescript
+const { store, mutations } = useLayout()
+
+// Get reactive node layout
+const nodeRef = store.getNodeLayoutRef('node-123')
+const position = computed(() => nodeRef.value?.position ?? { x: 0, y: 0 })
+```
+
+### Vue Component Integration
+```vue
+<script setup>
+const {
+  position,
+  nodeStyle,
+  startDrag,
+  handleDrag,
+  endDrag
+} = useNodeLayout(props.nodeId)
+</script>
+
+<template>
+  <div
+    :style="nodeStyle"
+    @pointerdown="startDrag"
+    @pointermove="handleDrag"
+    @pointerup="endDrag"
+  >
+    <!-- Node content -->
+  </div>
+</template>
+```
+
+## Performance Optimizations
+
+### 1. **Spatial Query Caching**
+- Cache for `queryNodesInBounds` results
+- Cleared on any mutation for consistency
+
+### 2. **Direct Transform Updates**
+- CSS `transform: translate()` for GPU acceleration
+- No layout recalculation during dragging
+- Smooth 60fps performance
+
+### 3. **CSS Containment**
+- `contain: layout style paint` on nodes
+- Isolates rendering for better performance
+
+### 4. **One-Way Data Flow**
+- Layout → LiteGraph only
+- Prevents circular updates and conflicts
+- Source tracking avoids sync loops
+
+## CRDT Benefits
+
+Using Yjs even for single-user mode provides:
+- **Zero race conditions** between Vue and Canvas updates
+- **Built-in operation tracking** for debugging
+- **Future-proof** - ready for real-time collaboration
+- **Minimal overhead** - Yjs is optimized for local operations
+
+## Node Stacking/Z-Index
+
+Based on LiteGraph's implementation:
+- Nodes are rendered in array order (later = on top)
+- Clicking a node brings it to front via `bringToFront()`
+- Z-index in layout store tracks rendering order
+- TODO: Implement interaction-based stacking
+
+## API Reference
+
+### LayoutStore Methods
+- `getNodeLayoutRef(nodeId)` - Get reactive node layout
+- `getAllNodes()` - Get all nodes as reactive Map
+- `getNodesInBounds(bounds)` - Reactive spatial query
+- `queryNodeAtPoint(point)` - Non-reactive point query
+- `queryNodesInBounds(bounds)` - Non-reactive bounds query
+- `initializeFromLiteGraph(nodes)` - Initialize from existing graph
+
+### LayoutMutations Methods
+- `moveNode(nodeId, position)` - Update node position
+- `resizeNode(nodeId, size)` - Update node size
+- `setNodeZIndex(nodeId, zIndex)` - Update rendering order
+- `createNode(nodeId, layout)` - Add new node
+- `deleteNode(nodeId)` - Remove node
+- `setSource(source)` - Set mutation source
+- `setActor(actor)` - Set actor for CRDT
+
+## Future Enhancements
+
+- [ ] Interaction-based z-index updates
+- [ ] QuadTree integration for O(log n) spatial queries
+- [ ] Undo/redo via operation history
+- [ ] Real-time collaboration via Yjs network adapters
+- [ ] Performance metrics collection
+
+## Debug Mode
+
+Enable debug logging in development or via console:
+```javascript
+localStorage.setItem('layout-debug', 'true')
+location.reload()
+```

package-lock.json

@@ -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.25.9",
+  "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/adapters/layoutAdapter.ts

@@ -0,0 +1,82 @@
+/**
+ * Layout Adapter Interface
+ *
+ * Abstracts the underlying CRDT implementation to allow for different
+ * backends (Yjs, Automerge, etc.) and easier testing.
+ */
+import type { LayoutOperation } from '@/types/layoutOperations'
+import type { NodeId, NodeLayout } from '@/types/layoutTypes'
+
+/**
+ * Change event emitted by the adapter
+ */
+export interface AdapterChange {
+  /** Type of change */
+  type: 'set' | 'delete' | 'clear'
+  /** Affected node IDs */
+  nodeIds: NodeId[]
+  /** Actor who made the change */
+  actor?: string
+}
+
+/**
+ * Layout adapter interface for CRDT abstraction
+ */
+export interface LayoutAdapter {
+  /**
+   * Set a node's layout data
+   */
+  setNode(nodeId: NodeId, layout: NodeLayout): void
+
+  /**
+   * Get a node's layout data
+   */
+  getNode(nodeId: NodeId): NodeLayout | null
+
+  /**
+   * Delete a node
+   */
+  deleteNode(nodeId: NodeId): void
+
+  /**
+   * Get all nodes
+   */
+  getAllNodes(): Map<NodeId, NodeLayout>
+
+  /**
+   * Clear all nodes
+   */
+  clear(): void
+
+  /**
+   * Add an operation to the log
+   */
+  addOperation(operation: LayoutOperation): void
+
+  /**
+   * Get operations since a timestamp
+   */
+  getOperationsSince(timestamp: number): LayoutOperation[]
+
+  /**
+   * Get operations by a specific actor
+   */
+  getOperationsByActor(actor: string): LayoutOperation[]
+
+  /**
+   * Subscribe to changes
+   */
+  subscribe(callback: (change: AdapterChange) => void): () => void
+
+  /**
+   * Transaction support for atomic updates
+   */
+  transaction(fn: () => void, actor?: string): void
+
+  /**
+   * Network sync methods (for future use)
+   */
+  getStateVector(): Uint8Array
+  getStateAsUpdate(): Uint8Array
+  applyUpdate(update: Uint8Array): void
+}

src/adapters/mockLayoutAdapter.ts

@@ -0,0 +1,137 @@
+/**
+ * Mock Layout Adapter
+ *
+ * Simple in-memory implementation for testing without CRDT overhead.
+ */
+import type { LayoutOperation } from '@/types/layoutOperations'
+import type { NodeId, NodeLayout } from '@/types/layoutTypes'
+
+import type { AdapterChange, LayoutAdapter } from './layoutAdapter'
+
+/**
+ * Mock implementation for testing
+ */
+export class MockLayoutAdapter implements LayoutAdapter {
+  private nodes = new Map<NodeId, NodeLayout>()
+  private operations: LayoutOperation[] = []
+  private changeCallbacks = new Set<(change: AdapterChange) => void>()
+  private currentActor?: string
+
+  setNode(nodeId: NodeId, layout: NodeLayout): void {
+    this.nodes.set(nodeId, { ...layout })
+    this.notifyChange({
+      type: 'set',
+      nodeIds: [nodeId],
+      actor: this.currentActor
+    })
+  }
+
+  getNode(nodeId: NodeId): NodeLayout | null {
+    const layout = this.nodes.get(nodeId)
+    return layout ? { ...layout } : null
+  }
+
+  deleteNode(nodeId: NodeId): void {
+    const existed = this.nodes.delete(nodeId)
+    if (existed) {
+      this.notifyChange({
+        type: 'delete',
+        nodeIds: [nodeId],
+        actor: this.currentActor
+      })
+    }
+  }
+
+  getAllNodes(): Map<NodeId, NodeLayout> {
+    // Return a copy to prevent external mutations
+    const copy = new Map<NodeId, NodeLayout>()
+    for (const [id, layout] of this.nodes) {
+      copy.set(id, { ...layout })
+    }
+    return copy
+  }
+
+  clear(): void {
+    const nodeIds = Array.from(this.nodes.keys())
+    this.nodes.clear()
+    this.operations = []
+
+    if (nodeIds.length > 0) {
+      this.notifyChange({
+        type: 'clear',
+        nodeIds,
+        actor: this.currentActor
+      })
+    }
+  }
+
+  addOperation(operation: LayoutOperation): void {
+    this.operations.push({ ...operation })
+  }
+
+  getOperationsSince(timestamp: number): LayoutOperation[] {
+    return this.operations
+      .filter((op) => op.timestamp > timestamp)
+      .map((op) => ({ ...op }))
+  }
+
+  getOperationsByActor(actor: string): LayoutOperation[] {
+    return this.operations
+      .filter((op) => op.actor === actor)
+      .map((op) => ({ ...op }))
+  }
+
+  subscribe(callback: (change: AdapterChange) => void): () => void {
+    this.changeCallbacks.add(callback)
+    return () => this.changeCallbacks.delete(callback)
+  }
+
+  transaction(fn: () => void, actor?: string): void {
+    const previousActor = this.currentActor
+    this.currentActor = actor
+    try {
+      fn()
+    } finally {
+      this.currentActor = previousActor
+    }
+  }
+
+  // Mock network sync methods
+  getStateVector(): Uint8Array {
+    return new Uint8Array([1, 2, 3]) // Mock data
+  }
+
+  getStateAsUpdate(): Uint8Array {
+    // Simple serialization for testing
+    const json = JSON.stringify({
+      nodes: Array.from(this.nodes.entries()),
+      operations: this.operations
+    })
+    return new TextEncoder().encode(json)
+  }
+
+  applyUpdate(update: Uint8Array): void {
+    // Simple deserialization for testing
+    const json = new TextDecoder().decode(update)
+    const data = JSON.parse(json) as {
+      nodes: Array<[NodeId, NodeLayout]>
+      operations: LayoutOperation[]
+    }
+
+    this.nodes.clear()
+    for (const [id, layout] of data.nodes) {
+      this.nodes.set(id, layout)
+    }
+    this.operations = data.operations
+  }
+
+  private notifyChange(change: AdapterChange): void {
+    this.changeCallbacks.forEach((callback) => {
+      try {
+        callback(change)
+      } catch (error) {
+        console.error('Error in mock adapter change callback:', error)
+      }
+    })
+  }
+}

src/adapters/yjsLayoutAdapter.ts

@@ -0,0 +1,202 @@
+/**
+ * Yjs Layout Adapter
+ *
+ * Implements the LayoutAdapter interface using Yjs as the CRDT backend.
+ * Provides efficient local state management with future collaboration support.
+ */
+import * as Y from 'yjs'
+
+import type { LayoutOperation } from '@/types/layoutOperations'
+import type { Bounds, NodeId, NodeLayout, Point } from '@/types/layoutTypes'
+
+import type { AdapterChange, LayoutAdapter } from './layoutAdapter'
+
+/**
+ * Yjs implementation of the layout adapter
+ */
+export class YjsLayoutAdapter implements LayoutAdapter {
+  private ydoc: Y.Doc
+  private ynodes: Y.Map<Y.Map<unknown>>
+  private yoperations: Y.Array<LayoutOperation>
+  private changeCallbacks = new Set<(change: AdapterChange) => void>()
+
+  constructor() {
+    this.ydoc = new Y.Doc()
+    this.ynodes = this.ydoc.getMap('nodes')
+    this.yoperations = this.ydoc.getArray('operations')
+
+    // Set up change observation
+    this.ynodes.observe((event, transaction) => {
+      const change: AdapterChange = {
+        type: 'set', // Yjs doesn't distinguish set/delete in observe
+        nodeIds: [],
+        actor: transaction.origin as string | undefined
+      }
+
+      // Collect affected node IDs
+      event.changes.keys.forEach((changeType, key) => {
+        change.nodeIds.push(key)
+        if (changeType.action === 'delete') {
+          change.type = 'delete'
+        }
+      })
+
+      // Notify subscribers
+      this.notifyChange(change)
+    })
+  }
+
+  /**
+   * Set a node's layout data
+   */
+  setNode(nodeId: NodeId, layout: NodeLayout): void {
+    const ynode = this.layoutToYNode(layout)
+    this.ynodes.set(nodeId, ynode)
+  }
+
+  /**
+   * Get a node's layout data
+   */
+  getNode(nodeId: NodeId): NodeLayout | null {
+    const ynode = this.ynodes.get(nodeId)
+    return ynode ? this.yNodeToLayout(ynode) : null
+  }
+
+  /**
+   * Delete a node
+   */
+  deleteNode(nodeId: NodeId): void {
+    this.ynodes.delete(nodeId)
+  }
+
+  /**
+   * Get all nodes
+   */
+  getAllNodes(): Map<NodeId, NodeLayout> {
+    const result = new Map<NodeId, NodeLayout>()
+    for (const [nodeId] of this.ynodes) {
+      const ynode = this.ynodes.get(nodeId)
+      if (ynode) {
+        result.set(nodeId, this.yNodeToLayout(ynode))
+      }
+    }
+    return result
+  }
+
+  /**
+   * Clear all nodes
+   */
+  clear(): void {
+    this.ynodes.clear()
+  }
+
+  /**
+   * Add an operation to the log
+   */
+  addOperation(operation: LayoutOperation): void {
+    this.yoperations.push([operation])
+  }
+
+  /**
+   * Get operations since a timestamp
+   */
+  getOperationsSince(timestamp: number): LayoutOperation[] {
+    const operations: LayoutOperation[] = []
+    this.yoperations.forEach((op) => {
+      if (op && op.timestamp > timestamp) {
+        operations.push(op)
+      }
+    })
+    return operations
+  }
+
+  /**
+   * Get operations by a specific actor
+   */
+  getOperationsByActor(actor: string): LayoutOperation[] {
+    const operations: LayoutOperation[] = []
+    this.yoperations.forEach((op) => {
+      if (op && op.actor === actor) {
+        operations.push(op)
+      }
+    })
+    return operations
+  }
+
+  /**
+   * Subscribe to changes
+   */
+  subscribe(callback: (change: AdapterChange) => void): () => void {
+    this.changeCallbacks.add(callback)
+    return () => this.changeCallbacks.delete(callback)
+  }
+
+  /**
+   * Transaction support for atomic updates
+   */
+  transaction(fn: () => void, actor?: string): void {
+    this.ydoc.transact(fn, actor)
+  }
+
+  /**
+   * Get the current state vector for sync
+   */
+  getStateVector(): Uint8Array {
+    return Y.encodeStateVector(this.ydoc)
+  }
+
+  /**
+   * Get state as update for sending to peers
+   */
+  getStateAsUpdate(): Uint8Array {
+    return Y.encodeStateAsUpdate(this.ydoc)
+  }
+
+  /**
+   * Apply updates from remote peers
+   */
+  applyUpdate(update: Uint8Array): void {
+    Y.applyUpdate(this.ydoc, update)
+  }
+
+  /**
+   * Convert layout to Yjs structure
+   */
+  private layoutToYNode(layout: NodeLayout): Y.Map<unknown> {
+    const ynode = new Y.Map<unknown>()
+    ynode.set('id', layout.id)
+    ynode.set('position', layout.position)
+    ynode.set('size', layout.size)
+    ynode.set('zIndex', layout.zIndex)
+    ynode.set('visible', layout.visible)
+    ynode.set('bounds', layout.bounds)
+    return ynode
+  }
+
+  /**
+   * Convert Yjs structure to layout
+   */
+  private yNodeToLayout(ynode: Y.Map<unknown>): NodeLayout {
+    return {
+      id: ynode.get('id') as string,
+      position: ynode.get('position') as Point,
+      size: ynode.get('size') as { width: number; height: number },
+      zIndex: ynode.get('zIndex') as number,
+      visible: ynode.get('visible') as boolean,
+      bounds: ynode.get('bounds') as Bounds
+    }
+  }
+
+  /**
+   * Notify all change subscribers
+   */
+  private notifyChange(change: AdapterChange): void {
+    this.changeCallbacks.forEach((callback) => {
+      try {
+        callback(change)
+      } catch (error) {
+        console.error('Error in adapter change callback:', error)
+      }
+    })
+  }
+}

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/custom/ai-model.svg

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

src/assets/icons/custom/node.svg

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

src/assets/icons/custom/template.svg

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

src/components/bottomPanel/BottomPanel.vue

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

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

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

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

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

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

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

src/components/breadcrumb/SubgraphBreadcrumb.vue

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

src/components/common/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/graph/DomWidgets.vue

@@ -16,6 +16,7 @@ import { computed } from 'vue'
 
 import DomWidget from '@/components/graph/widgets/DomWidget.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useCanvasStore } from '@/stores/graphStore'
 
@@ -27,6 +28,9 @@ const updateWidgets = () => {
   const lgCanvas = canvasStore.canvas
   if (!lgCanvas) return
 
+  // Skip updating DOM widgets when Vue nodes mode is enabled
+  if (LiteGraph.vueNodesMode) return
+
   const lowQuality = lgCanvas.low_quality
   const currentGraph = lgCanvas.graph
 

src/components/graph/GraphCanvas.vue

@@ -34,6 +34,54 @@
     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-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 />
 
@@ -50,7 +98,16 @@
 
 <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 +118,26 @@ 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 VueGraphNode from '@/components/graph/vueNodes/LGraphNode.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 { useLayout } from '@/composables/graph/useLayout'
+import { useLayoutSync } from '@/composables/graph/useLayoutSync'
 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 +146,7 @@ import { useWorkflowAutoSave } from '@/composables/useWorkflowAutoSave'
 import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
 import { i18n, t } from '@/i18n'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { UnauthorizedError, api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'
@@ -88,6 +157,7 @@ import { useWorkflowService } from '@/services/workflowService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useCanvasStore } from '@/stores/graphStore'
+import { layoutStore } from '@/stores/layoutStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
@@ -105,6 +175,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 +194,330 @@ 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(true) // Default to true for development
+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
+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)
+
+  // 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++
+}
+
+// Watch for graph availability
+watch(
+  () => comfyApp.graph,
+  (graph) => {
+    if (graph) {
+      initializeNodeManager()
+    }
+  },
+  { 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 +669,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 +686,7 @@ onMounted(async () => {
   useCopy()
   usePaste()
   useWorkflowAutoSave()
+  useFeatureFlags() // This will automatically sync Vue nodes flag with LiteGraph
 
   comfyApp.vueAppReady = true
 
@@ -303,9 +699,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 +723,11 @@ onMounted(async () => {
 
   comfyAppReady.value = true
 
+  // Initialize node manager after setup is complete
+  if (comfyApp.graph) {
+    initializeNodeManager()
+  }
+
   comfyApp.canvas.onSelectionChange = useChainCallback(
     comfyApp.canvas.onSelectionChange,
     () => canvasStore.updateSelectedItems()
@@ -377,4 +775,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

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

src/components/graph/MiniMapPanel.vue

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

src/components/graph/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,133 @@
+<!-- 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;
+}
+
+.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/selectionToolbox/ConvertToSubgraphButton.vue

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

src/components/graph/vueNodes/InputSlot.vue

@@ -0,0 +1,84 @@
+<template>
+  <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
+  <div
+    v-else
+    class="lg-slot lg-slot--input flex items-center cursor-crosshair group"
+    :class="{
+      'opacity-70': readonly,
+      'lg-slot--connected': connected,
+      'lg-slot--compatible': compatible,
+      'lg-slot--dot-only': dotOnly,
+      'pr-2 hover:bg-black/5': !dotOnly
+    }"
+    :style="{
+      height: slotHeight + 'px'
+    }"
+    @pointerdown="handleClick"
+  >
+    <!-- Connection Dot -->
+    <div class="w-5 h-5 flex items-center justify-center group/slot">
+      <div
+        class="w-2 h-2 rounded-full bg-white transition-all duration-150 group-hover/slot:w-2.5 group-hover/slot:h-2.5 group-hover/slot:border-2 group-hover/slot:border-white"
+        :style="{
+          backgroundColor: slotColor
+        }"
+      />
+    </div>
+
+    <!-- Slot Name -->
+    <span v-if="!dotOnly" class="text-xs text-surface-700 whitespace-nowrap">
+      {{ slotData.name || `Input ${index}` }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onErrorCaptured, ref } from 'vue'
+
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import { getSlotColor } from '@/constants/slotColors'
+import {
+  COMFY_VUE_NODE_DIMENSIONS,
+  INodeSlot,
+  LGraphNode
+} from '@/lib/litegraph/src/litegraph'
+
+interface InputSlotProps {
+  node?: LGraphNode
+  slotData: INodeSlot
+  index: number
+  connected?: boolean
+  compatible?: boolean
+  readonly?: boolean
+  dotOnly?: boolean
+}
+
+const props = defineProps<InputSlotProps>()
+
+const emit = defineEmits<{
+  'slot-click': [event: PointerEvent]
+}>()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+
+// Get slot color based on type
+const slotColor = computed(() => getSlotColor(props.slotData.type))
+
+// Get slot height from litegraph constants
+const slotHeight = COMFY_VUE_NODE_DIMENSIONS.components.SLOT_HEIGHT
+
+// Handle click events
+const handleClick = (event: PointerEvent) => {
+  if (!props.readonly) {
+    emit('slot-click', event)
+  }
+}
+</script>

src/components/graph/vueNodes/LGraphNode.vue

@@ -0,0 +1,263 @@
+<template>
+  <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    ⚠️ Node Render Error
+  </div>
+  <div
+    v-else
+    :data-node-id="nodeData.id"
+    :class="[
+      'lg-node absolute border-2 rounded-lg',
+      'contain-layout contain-style contain-paint',
+      selected ? 'border-blue-500 ring-2 ring-blue-300' : 'border-gray-600',
+      executing ? 'animate-pulse' : '',
+      nodeData.mode === 4 ? 'opacity-50' : '', // bypassed
+      error ? 'border-red-500 bg-red-50' : '',
+      isDragging ? 'will-change-transform' : '',
+      lodCssClass,
+      'hover:border-green-500' // Debug: visual feedback on hover
+    ]"
+    :style="[
+      {
+        transform: `translate(${layoutPosition.x ?? position?.x ?? 0}px, ${(layoutPosition.y ?? position?.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`,
+        width: size ? `${size.width}px` : '200px',
+        height: size ? `${size.height}px` : 'auto',
+        backgroundColor: '#353535',
+        pointerEvents: 'auto'
+      },
+      dragStyle
+    ]"
+    @pointerdown="handlePointerDown"
+    @pointermove="handlePointerMove"
+    @pointerup="handlePointerUp"
+  >
+    <!-- Header only updates on title/color changes -->
+    <NodeHeader
+      v-memo="[nodeData.title, lodLevel, isCollapsed]"
+      :node-data="nodeData"
+      :readonly="readonly"
+      :lod-level="lodLevel"
+      :collapsed="isCollapsed"
+      @collapse="handleCollapse"
+      @update:title="handleTitleUpdate"
+    />
+
+    <!-- Node Body - rendered based on LOD level and collapsed state -->
+    <div
+      v-if="!isMinimalLOD && !isCollapsed"
+      class="flex flex-col gap-2"
+      :data-testid="`node-body-${nodeData.id}`"
+    >
+      <!-- Slots only rendered at full detail -->
+      <NodeSlots
+        v-if="shouldRenderSlots"
+        v-memo="[nodeData.inputs?.length, nodeData.outputs?.length, lodLevel]"
+        :node-data="nodeData"
+        :readonly="readonly"
+        :lod-level="lodLevel"
+        @slot-click="handleSlotClick"
+      />
+
+      <!-- Widgets rendered at reduced+ detail -->
+      <NodeWidgets
+        v-if="shouldRenderWidgets && nodeData.widgets?.length"
+        v-memo="[nodeData.widgets?.length, lodLevel]"
+        :node-data="nodeData"
+        :readonly="readonly"
+        :lod-level="lodLevel"
+      />
+
+      <!-- Custom content at reduced+ detail -->
+      <NodeContent
+        v-if="shouldRenderContent && hasCustomContent"
+        :node-data="nodeData"
+        :readonly="readonly"
+        :lod-level="lodLevel"
+      />
+    </div>
+
+    <!-- Progress bar for executing state -->
+    <div
+      v-if="executing && progress !== undefined"
+      class="absolute bottom-0 left-0 h-1 bg-primary-500 transition-all duration-300"
+      :style="{ width: `${progress * 100}%` }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import log from 'loglevel'
+import { computed, onErrorCaptured, ref, toRef, watch } from 'vue'
+
+// Import the VueNodeData type
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { LODLevel, useLOD } from '@/composables/graph/useLOD'
+import { useNodeLayout } from '@/composables/graph/useNodeLayout'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+
+import { LiteGraph } from '../../../lib/litegraph/src/litegraph'
+import NodeContent from './NodeContent.vue'
+import NodeHeader from './NodeHeader.vue'
+import NodeSlots from './NodeSlots.vue'
+import NodeWidgets from './NodeWidgets.vue'
+
+// Create logger for vue nodes
+const logger = log.getLogger('vue-nodes')
+// In dev mode, always show debug logs
+if (import.meta.env.DEV) {
+  logger.setLevel('debug')
+}
+
+// Extended props for main node component
+interface LGraphNodeProps {
+  nodeData: VueNodeData
+  position?: { x: number; y: number }
+  size?: { width: number; height: number }
+  readonly?: boolean
+  selected?: boolean
+  executing?: boolean
+  progress?: number
+  error?: string | null
+  zoomLevel?: number
+}
+
+const props = defineProps<LGraphNodeProps>()
+
+const emit = defineEmits<{
+  'node-click': [event: PointerEvent, nodeData: VueNodeData]
+  'slot-click': [
+    event: PointerEvent,
+    nodeData: VueNodeData,
+    slotIndex: number,
+    isInput: boolean
+  ]
+  'update:collapsed': [nodeId: string, collapsed: boolean]
+  'update:title': [nodeId: string, newTitle: string]
+}>()
+
+// LOD (Level of Detail) system based on zoom level
+const zoomRef = toRef(() => props.zoomLevel ?? 1)
+const {
+  lodLevel,
+  shouldRenderWidgets,
+  shouldRenderSlots,
+  shouldRenderContent,
+  lodCssClass
+} = useLOD(zoomRef)
+
+// Computed properties for template usage
+const isMinimalLOD = computed(() => lodLevel.value === LODLevel.MINIMAL)
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false // Prevent error propagation
+})
+
+// Use layout system for node position and dragging
+const {
+  position: layoutPosition,
+  startDrag,
+  handleDrag: handleLayoutDrag,
+  endDrag
+} = useNodeLayout(props.nodeData.id)
+
+// Debug layout position
+watch(
+  layoutPosition,
+  (newPos, oldPos) => {
+    logger.debug(`Layout position changed for node ${props.nodeData.id}:`, {
+      newPos,
+      oldPos,
+      layoutPositionValue: layoutPosition.value
+    })
+  },
+  { immediate: true, deep: true }
+)
+
+logger.debug(`LGraphNode mounted for ${props.nodeData.id}`, {
+  layoutPosition: layoutPosition.value,
+  propsPosition: props.position,
+  nodeDataId: props.nodeData.id
+})
+
+// Drag state for styling
+const isDragging = ref(false)
+const dragStyle = computed(() => ({
+  cursor: isDragging.value ? 'grabbing' : 'grab'
+}))
+
+// Track collapsed state
+const isCollapsed = ref(props.nodeData.flags?.collapsed ?? false)
+
+// Watch for external changes to the collapsed state
+watch(
+  () => props.nodeData.flags?.collapsed,
+  (newCollapsed) => {
+    if (newCollapsed !== undefined && newCollapsed !== isCollapsed.value) {
+      isCollapsed.value = newCollapsed
+    }
+  }
+)
+
+// Check if node has custom content
+const hasCustomContent = computed(() => {
+  // Currently all content is handled through widgets
+  // This remains false but provides extensibility point
+  return false
+})
+
+// Event handlers
+const handlePointerDown = (event: PointerEvent) => {
+  if (!props.nodeData) {
+    console.warn('LGraphNode: nodeData is null/undefined in handlePointerDown')
+    return
+  }
+
+  // Start drag using layout system
+  isDragging.value = true
+  startDrag(event)
+
+  // Emit node-click for selection handling in GraphCanvas
+  emit('node-click', event, props.nodeData)
+}
+
+const handlePointerMove = (event: PointerEvent) => {
+  if (isDragging.value) {
+    void handleLayoutDrag(event)
+  }
+}
+
+const handlePointerUp = (event: PointerEvent) => {
+  if (isDragging.value) {
+    isDragging.value = false
+    void endDrag(event)
+  }
+}
+
+const handleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value
+  // Emit event so parent can sync with LiteGraph if needed
+  emit('update:collapsed', props.nodeData.id, isCollapsed.value)
+}
+
+const handleSlotClick = (
+  event: PointerEvent,
+  slotIndex: number,
+  isInput: boolean
+) => {
+  if (!props.nodeData) {
+    console.warn('LGraphNode: nodeData is null/undefined in handleSlotClick')
+    return
+  }
+  emit('slot-click', event, props.nodeData, slotIndex, isInput)
+}
+
+const handleTitleUpdate = (newTitle: string) => {
+  emit('update:title', props.nodeData.id, newTitle)
+}
+</script>

src/components/graph/vueNodes/NodeContent.vue

@@ -0,0 +1,42 @@
+<template>
+  <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    ⚠️ Node Content Error
+  </div>
+  <div v-else class="lg-node-content">
+    <!-- Default slot for custom content -->
+    <slot>
+      <!-- This component serves as a placeholder for future extensibility -->
+      <!-- Currently all node content is rendered through the widget system -->
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onErrorCaptured, ref } from 'vue'
+
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import type { LODLevel } from '@/composables/graph/useLOD'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+
+import type { LGraphNode } from '../../../lib/litegraph/src/litegraph'
+
+interface NodeContentProps {
+  node?: LGraphNode // For backwards compatibility
+  nodeData?: VueNodeData // New clean data structure
+  readonly?: boolean
+  lodLevel?: LODLevel
+}
+
+defineProps<NodeContentProps>()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+</script>

src/components/graph/vueNodes/NodeHeader.vue

@@ -0,0 +1,149 @@
+<template>
+  <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    ⚠️ Node Header Error
+  </div>
+  <div
+    v-else
+    class="lg-node-header flex items-center justify-between p-2 rounded-t-lg cursor-move"
+    :data-testid="`node-header-${nodeInfo?.id || ''}`"
+    :style="{
+      backgroundColor: headerColor,
+      color: textColor
+    }"
+    @dblclick="handleDoubleClick"
+  >
+    <!-- Collapse/Expand Button -->
+    <button
+      v-show="!readonly"
+      class="bg-transparent border-transparent flex items-center"
+      data-testid="node-collapse-button"
+      @click.stop="handleCollapse"
+      @dblclick.stop
+    >
+      <i
+        :class="collapsed ? 'pi pi-chevron-right' : 'pi pi-chevron-down'"
+        class="text-xs leading-none relative top-[1px]"
+      ></i>
+    </button>
+
+    <!-- Node Title -->
+    <div class="text-sm font-medium truncate flex-1" data-testid="node-title">
+      <EditableText
+        :model-value="displayTitle"
+        :is-editing="isEditing"
+        :input-attrs="{ 'data-testid': 'node-title-input' }"
+        @edit="handleTitleEdit"
+        @cancel="handleTitleCancel"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onErrorCaptured, ref, watch } from 'vue'
+
+import EditableText from '@/components/common/EditableText.vue'
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import type { LODLevel } from '@/composables/graph/useLOD'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+
+import type { LGraphNode } from '../../../lib/litegraph/src/litegraph'
+
+interface NodeHeaderProps {
+  node?: LGraphNode // For backwards compatibility
+  nodeData?: VueNodeData // New clean data structure
+  readonly?: boolean
+  lodLevel?: LODLevel
+  collapsed?: boolean
+}
+
+const props = defineProps<NodeHeaderProps>()
+
+const emit = defineEmits<{
+  collapse: []
+  'update:title': [newTitle: string]
+}>()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+
+// Editing state
+const isEditing = ref(false)
+
+const nodeInfo = computed(() => props.nodeData || props.node)
+
+// Local state for title to provide immediate feedback
+const displayTitle = ref(nodeInfo.value?.title || 'Untitled')
+
+// Watch for external changes to the node title
+watch(
+  () => nodeInfo.value?.title,
+  (newTitle) => {
+    if (newTitle && newTitle !== displayTitle.value) {
+      displayTitle.value = newTitle
+    }
+  }
+)
+
+// Compute header color based on node color property or type
+const headerColor = computed(() => {
+  const info = nodeInfo.value
+  if (!info) return '#353535'
+
+  if (info.mode === 4) return '#666' // Bypassed
+  if (info.mode === 2) return '#444' // Muted
+  return '#353535' // Default
+})
+
+// Compute text color for contrast
+const textColor = computed(() => {
+  const color = headerColor.value
+  if (!color || color === '#353535' || color === '#444' || color === '#666') {
+    return '#fff'
+  }
+  const colorStr = String(color)
+  const rgb = parseInt(
+    colorStr.startsWith('#') ? colorStr.slice(1) : colorStr,
+    16
+  )
+  const r = (rgb >> 16) & 255
+  const g = (rgb >> 8) & 255
+  const b = rgb & 255
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000
+  return brightness > 128 ? '#000' : '#fff'
+})
+
+// Event handlers
+const handleCollapse = () => {
+  emit('collapse')
+}
+
+const handleDoubleClick = () => {
+  if (!props.readonly) {
+    isEditing.value = true
+  }
+}
+
+const handleTitleEdit = (newTitle: string) => {
+  isEditing.value = false
+  const trimmedTitle = newTitle.trim()
+  if (trimmedTitle && trimmedTitle !== displayTitle.value) {
+    // Emit for litegraph sync
+    emit('update:title', trimmedTitle)
+  }
+}
+
+const handleTitleCancel = () => {
+  isEditing.value = false
+  // Reset displayTitle to the current node title
+  displayTitle.value = nodeInfo.value?.title || 'Untitled'
+}
+</script>

src/components/graph/vueNodes/NodeSlots.vue

@@ -0,0 +1,140 @@
+<template>
+  <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    ⚠️ Node Slots Error
+  </div>
+  <div v-else class="lg-node-slots flex justify-between">
+    <div v-if="filteredInputs.length" class="flex flex-col">
+      <InputSlot
+        v-for="(input, index) in filteredInputs"
+        :key="`input-${index}`"
+        :slot-data="input"
+        :index="getActualInputIndex(input, index)"
+        :readonly="readonly"
+        @slot-click="
+          handleInputSlotClick(getActualInputIndex(input, index), $event)
+        "
+      />
+    </div>
+
+    <div v-if="filteredOutputs.length" class="flex flex-col ml-auto">
+      <OutputSlot
+        v-for="(output, index) in filteredOutputs"
+        :key="`output-${index}`"
+        :slot-data="output"
+        :index="index"
+        :readonly="readonly"
+        @slot-click="handleOutputSlotClick(index, $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onErrorCaptured, onUnmounted, ref } from 'vue'
+
+import { useEventForwarding } from '@/composables/graph/useEventForwarding'
+import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import type { LODLevel } from '@/composables/graph/useLOD'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import { isSlotObject } from '@/utils/typeGuardUtil'
+
+import type {
+  INodeSlot,
+  LGraphNode
+} from '../../../lib/litegraph/src/litegraph'
+import InputSlot from './InputSlot.vue'
+import OutputSlot from './OutputSlot.vue'
+
+interface NodeSlotsProps {
+  node?: LGraphNode // For backwards compatibility
+  nodeData?: VueNodeData // New clean data structure
+  readonly?: boolean
+  lodLevel?: LODLevel
+}
+
+const props = defineProps<NodeSlotsProps>()
+
+const nodeInfo = computed(() => props.nodeData || props.node)
+
+// Filter out input slots that have corresponding widgets
+const filteredInputs = computed(() => {
+  if (!nodeInfo.value?.inputs) return []
+
+  return nodeInfo.value.inputs
+    .filter((input) => {
+      // Check if this slot has a widget property (indicating it has a corresponding widget)
+      if (isSlotObject(input) && 'widget' in input && input.widget) {
+        // This slot has a widget, so we should not display it separately
+        return false
+      }
+      return true
+    })
+    .map((input) =>
+      isSlotObject(input)
+        ? input
+        : ({
+            name: typeof input === 'string' ? input : '',
+            type: 'any',
+            boundingRect: [0, 0, 0, 0] as [number, number, number, number]
+          } as INodeSlot)
+    )
+})
+
+// Outputs don't have widgets, so we don't need to filter them
+const filteredOutputs = computed(() => {
+  const outputs = nodeInfo.value?.outputs || []
+  return outputs.map((output) =>
+    isSlotObject(output)
+      ? output
+      : ({
+          name: typeof output === 'string' ? output : '',
+          type: 'any',
+          boundingRect: [0, 0, 0, 0] as [number, number, number, number]
+        } as INodeSlot)
+  )
+})
+
+// Get the actual index of an input slot in the node's inputs array
+// (accounting for filtered widget slots)
+const getActualInputIndex = (
+  input: INodeSlot,
+  filteredIndex: number
+): number => {
+  if (!nodeInfo.value?.inputs) return filteredIndex
+
+  // Find the actual index in the unfiltered inputs array
+  const actualIndex = nodeInfo.value.inputs.findIndex((i) => i === input)
+  return actualIndex !== -1 ? actualIndex : filteredIndex
+}
+
+// Set up event forwarding for slot interactions
+const { handleSlotPointerDown, cleanup } = useEventForwarding()
+
+// Handle input slot click
+const handleInputSlotClick = (_index: number, event: PointerEvent) => {
+  // Forward the event to LiteGraph for native slot handling
+  handleSlotPointerDown(event)
+}
+
+// Handle output slot click
+const handleOutputSlotClick = (_index: number, event: PointerEvent) => {
+  // Forward the event to LiteGraph for native slot handling
+  handleSlotPointerDown(event)
+}
+
+// Clean up event listeners on unmount
+onUnmounted(() => {
+  cleanup()
+})
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+</script>

src/components/graph/vueNodes/NodeWidgets.vue

@@ -0,0 +1,167 @@
+<template>
+  <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+  <div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
+    ⚠️ Node Widgets Error
+  </div>
+  <div v-else class="lg-node-widgets flex flex-col gap-2 pr-4">
+    <div
+      v-for="(widget, index) in processedWidgets"
+      :key="`widget-${index}-${widget.name}`"
+      class="lg-widget-container relative flex items-center group"
+    >
+      <!-- Widget Input Slot Dot -->
+      <div
+        class="opacity-0 group-hover:opacity-100 transition-opacity duration-150"
+      >
+        <InputSlot
+          :slot-data="{
+            name: widget.name,
+            type: widget.type,
+            boundingRect: [0, 0, 0, 0]
+          }"
+          :index="index"
+          :readonly="readonly"
+          :dot-only="true"
+          @slot-click="handleWidgetSlotClick($event, widget)"
+        />
+      </div>
+      <!-- Widget Component -->
+      <component
+        :is="widget.vueComponent"
+        :widget="widget.simplified"
+        :model-value="widget.value"
+        :readonly="readonly"
+        class="flex-1"
+        @update:model-value="widget.updateHandler"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onErrorCaptured, onUnmounted, ref } from 'vue'
+
+// Import widget components directly
+import WidgetInputText from '@/components/graph/vueWidgets/WidgetInputText.vue'
+import { widgetTypeToComponent } from '@/components/graph/vueWidgets/widgetRegistry'
+import { useEventForwarding } from '@/composables/graph/useEventForwarding'
+import type {
+  SafeWidgetData,
+  VueNodeData
+} from '@/composables/graph/useGraphNodeManager'
+import { LODLevel } from '@/composables/graph/useLOD'
+import {
+  ESSENTIAL_WIDGET_TYPES,
+  useWidgetRenderer
+} from '@/composables/graph/useWidgetRenderer'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
+
+import type { LGraphNode } from '../../../lib/litegraph/src/litegraph'
+import InputSlot from './InputSlot.vue'
+
+interface NodeWidgetsProps {
+  node?: LGraphNode
+  nodeData?: VueNodeData
+  readonly?: boolean
+  lodLevel?: LODLevel
+}
+
+const props = defineProps<NodeWidgetsProps>()
+
+// Set up event forwarding for slot interactions
+const { handleSlotPointerDown, cleanup } = useEventForwarding()
+
+// Use widget renderer composable
+const { getWidgetComponent, shouldRenderAsVue } = useWidgetRenderer()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+
+const nodeInfo = computed(() => props.nodeData || props.node)
+
+interface ProcessedWidget {
+  name: string
+  type: string
+  vueComponent: any
+  simplified: SimplifiedWidget
+  value: WidgetValue
+  updateHandler: (value: unknown) => void
+}
+
+const processedWidgets = computed((): ProcessedWidget[] => {
+  const info = nodeInfo.value
+  if (!info?.widgets) return []
+
+  const widgets = info.widgets as SafeWidgetData[]
+  const lodLevel = props.lodLevel
+  const result: ProcessedWidget[] = []
+
+  if (lodLevel === LODLevel.MINIMAL) {
+    return []
+  }
+
+  for (const widget of widgets) {
+    if (widget.options?.hidden) continue
+    if (widget.options?.canvasOnly) continue
+    if (!widget.type) continue
+    if (!shouldRenderAsVue(widget)) continue
+
+    if (
+      lodLevel === LODLevel.REDUCED &&
+      !ESSENTIAL_WIDGET_TYPES.has(widget.type)
+    )
+      continue
+
+    const componentName = getWidgetComponent(widget.type)
+    const vueComponent = widgetTypeToComponent[componentName] || WidgetInputText
+
+    const simplified: SimplifiedWidget = {
+      name: widget.name,
+      type: widget.type,
+      value: widget.value,
+      options: widget.options,
+      callback: widget.callback
+    }
+
+    const updateHandler = (value: unknown) => {
+      if (widget.callback) {
+        widget.callback(value)
+      }
+    }
+
+    result.push({
+      name: widget.name,
+      type: widget.type,
+      vueComponent,
+      simplified,
+      value: widget.value,
+      updateHandler
+    })
+  }
+
+  return result
+})
+
+// Handle widget slot click
+const handleWidgetSlotClick = (
+  event: PointerEvent,
+  _widget: ProcessedWidget
+) => {
+  // Forward the event to LiteGraph for native slot handling
+  handleSlotPointerDown(event)
+}
+
+// Clean up event listeners on unmount
+onUnmounted(() => {
+  cleanup()
+})
+</script>

src/components/graph/vueNodes/OutputSlot.vue

@@ -0,0 +1,87 @@
+<template>
+  <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
+  <div
+    v-else
+    class="lg-slot lg-slot--output flex items-center cursor-crosshair justify-end group"
+    :class="{
+      'opacity-70': readonly,
+      'lg-slot--connected': connected,
+      'lg-slot--compatible': compatible,
+      'lg-slot--dot-only': dotOnly,
+      'pl-2 hover:bg-black/5': !dotOnly,
+      'justify-center': dotOnly
+    }"
+    :style="{
+      height: slotHeight + 'px'
+    }"
+    @pointerdown="handleClick"
+  >
+    <!-- Slot Name -->
+    <span v-if="!dotOnly" class="text-xs text-surface-700 whitespace-nowrap">
+      {{ slotData.name || `Output ${index}` }}
+    </span>
+
+    <!-- Connection Dot -->
+    <div class="w-5 h-5 flex items-center justify-center group/slot">
+      <div
+        class="w-2 h-2 rounded-full bg-white transition-all duration-150 group-hover/slot:w-2.5 group-hover/slot:h-2.5 group-hover/slot:border-2 group-hover/slot:border-white"
+        :style="{
+          backgroundColor: slotColor
+        }"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onErrorCaptured, ref } from 'vue'
+
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import { getSlotColor } from '@/constants/slotColors'
+
+import type {
+  INodeSlot,
+  LGraphNode
+} from '../../../lib/litegraph/src/litegraph'
+import { COMFY_VUE_NODE_DIMENSIONS } from '../../../lib/litegraph/src/litegraph'
+
+interface OutputSlotProps {
+  node?: LGraphNode
+  slotData: INodeSlot
+  index: number
+  connected?: boolean
+  compatible?: boolean
+  readonly?: boolean
+  dotOnly?: boolean
+}
+
+const props = defineProps<OutputSlotProps>()
+
+const emit = defineEmits<{
+  'slot-click': [event: PointerEvent]
+}>()
+
+// Error boundary implementation
+const renderError = ref<string | null>(null)
+
+const { toastErrorHandler } = useErrorHandling()
+
+onErrorCaptured((error) => {
+  renderError.value = error.message
+  toastErrorHandler(error)
+  return false
+})
+
+// Get slot color based on type
+const slotColor = computed(() => getSlotColor(props.slotData.type))
+
+// Get slot height from litegraph constants
+const slotHeight = COMFY_VUE_NODE_DIMENSIONS.components.SLOT_HEIGHT
+
+// Handle click events
+const handleClick = (event: PointerEvent) => {
+  if (!props.readonly) {
+    emit('slot-click', event)
+  }
+}
+</script>

src/components/graph/vueNodes/widgets/LOD_IMPLEMENTATION_GUIDE.md

@@ -0,0 +1,295 @@
+# Level of Detail (LOD) Implementation Guide for Widgets
+
+## What is Level of Detail (LOD)?
+
+Level of Detail is a technique used to optimize performance by showing different amounts of detail based on how zoomed in the user is. Think of it like Google Maps - when you're zoomed out looking at the whole country, you only see major cities and highways. When you zoom in close, you see street names, building details, and restaurants.
+
+For ComfyUI nodes, this means:
+- **Zoomed out** (viewing many nodes): Show only essential controls, hide labels and descriptions
+- **Zoomed in** (focusing on specific nodes): Show all details, labels, help text, and visual polish
+
+## Why LOD Matters
+
+Without LOD optimization:
+- 1000+ nodes with full detail = browser lag and poor performance
+- Text that's too small to read still gets rendered (wasted work)
+- Visual effects that are invisible at distance still consume GPU
+
+With LOD optimization:
+- Smooth performance even with large node graphs
+- Battery life improvement on laptops
+- Better user experience across different zoom levels
+
+## How to Implement LOD in Your Widget
+
+### Step 1: Get the LOD Context
+
+Every widget component gets a `zoomLevel` prop. Use this to determine how much detail to show:
+
+```vue
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { useLOD } from '@/composables/graph/useLOD'
+
+const props = defineProps<{
+  widget: any
+  zoomLevel: number
+  // ... other props
+}>()
+
+// Get LOD information
+const { lodScore, lodLevel } = useLOD(toRef(() => props.zoomLevel))
+</script>
+```
+
+**Primary API:** Use `lodScore` (0-1) for granular control and smooth transitions  
+**Convenience API:** Use `lodLevel` ('minimal'|'reduced'|'full') for simple on/off decisions
+
+### Step 2: Choose What to Show at Different Zoom Levels
+
+#### Understanding the LOD Score
+- `lodScore` is a number from 0 to 1
+- 0 = completely zoomed out (show minimal detail)
+- 1 = fully zoomed in (show everything)
+- 0.5 = medium zoom (show some details)
+
+#### Understanding LOD Levels
+- `'minimal'` = zoom level 0.4 or below (very zoomed out)
+- `'reduced'` = zoom level 0.4 to 0.8 (medium zoom)
+- `'full'` = zoom level 0.8 or above (zoomed in close)
+
+### Step 3: Implement Your Widget's LOD Strategy
+
+Here's a complete example of a slider widget with LOD:
+
+```vue
+<template>
+  <div class="number-widget">
+    <!-- The main control always shows -->
+    <input 
+      v-model="value"
+      type="range"
+      :min="widget.min"
+      :max="widget.max"
+      class="widget-slider"
+    />
+    
+    <!-- Show label only when zoomed in enough to read it -->
+    <label 
+      v-if="showLabel"
+      class="widget-label"
+    >
+      {{ widget.name }}
+    </label>
+    
+    <!-- Show precise value only when fully zoomed in -->
+    <span 
+      v-if="showValue"
+      class="widget-value"
+    >
+      {{ formattedValue }}
+    </span>
+    
+    <!-- Show description only at full detail -->
+    <div 
+      v-if="showDescription && widget.description"
+      class="widget-description"
+    >
+      {{ widget.description }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { useLOD } from '@/composables/graph/useLOD'
+
+const props = defineProps<{
+  widget: any
+  zoomLevel: number
+}>()
+
+const { lodScore, lodLevel } = useLOD(toRef(() => props.zoomLevel))
+
+// Define when to show each element
+const showLabel = computed(() => {
+  // Show label when user can actually read it
+  return lodScore.value > 0.4  // Roughly 12px+ text size
+})
+
+const showValue = computed(() => {
+  // Show precise value only when zoomed in close
+  return lodScore.value > 0.7  // User is focused on this specific widget
+})
+
+const showDescription = computed(() => {
+  // Description only at full detail
+  return lodLevel.value === 'full'  // Maximum zoom level
+})
+
+// You can also use LOD for styling
+const widgetClasses = computed(() => {
+  const classes = ['number-widget']
+  
+  if (lodLevel.value === 'minimal') {
+    classes.push('widget--minimal')
+  }
+  
+  return classes
+})
+</script>
+
+<style scoped>
+/* Apply different styles based on LOD */
+.widget--minimal {
+  /* Simplified appearance when zoomed out */
+  .widget-slider {
+    height: 4px;  /* Thinner slider */
+    opacity: 0.9;
+  }
+}
+
+/* Normal styling */
+.widget-slider {
+  height: 8px;
+  transition: height 0.2s ease;
+}
+
+.widget-label {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+}
+
+.widget-value {
+  font-family: monospace;
+  font-size: 0.7rem;
+  color: var(--text-accent);
+}
+
+.widget-description {
+  font-size: 0.6rem;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+</style>
+```
+
+## Common LOD Patterns
+
+### Pattern 1: Essential vs. Nice-to-Have
+```typescript
+// Always show the main functionality
+const showMainControl = computed(() => true)
+
+// Granular control with lodScore
+const showLabels = computed(() => lodScore.value > 0.4)
+const labelOpacity = computed(() => Math.max(0.3, lodScore.value))
+
+// Simple control with lodLevel  
+const showExtras = computed(() => lodLevel.value === 'full')
+```
+
+### Pattern 2: Smooth Opacity Transitions
+```typescript
+// Gradually fade elements based on zoom
+const labelOpacity = computed(() => {
+  // Fade in from zoom 0.3 to 0.6
+  return Math.max(0, Math.min(1, (lodScore.value - 0.3) / 0.3))
+})
+```
+
+### Pattern 3: Progressive Detail
+```typescript
+const detailLevel = computed(() => {
+  if (lodScore.value < 0.3) return 'none'
+  if (lodScore.value < 0.6) return 'basic'
+  if (lodScore.value < 0.8) return 'standard'
+  return 'full'
+})
+```
+
+## LOD Guidelines by Widget Type
+
+### Text Input Widgets
+- **Always show**: The input field itself
+- **Medium zoom**: Show label
+- **High zoom**: Show placeholder text, validation messages
+- **Full zoom**: Show character count, format hints
+
+### Button Widgets  
+- **Always show**: The button
+- **Medium zoom**: Show button text
+- **High zoom**: Show button description
+- **Full zoom**: Show keyboard shortcuts, tooltips
+
+### Selection Widgets (Dropdown, Radio)
+- **Always show**: The current selection
+- **Medium zoom**: Show option labels
+- **High zoom**: Show all options when expanded
+- **Full zoom**: Show option descriptions, icons
+
+### Complex Widgets (Color Picker, File Browser)
+- **Always show**: Simplified representation (color swatch, filename)
+- **Medium zoom**: Show basic controls
+- **High zoom**: Show full interface
+- **Full zoom**: Show advanced options, previews
+
+## Design Collaboration Guidelines
+
+### For Designers
+When designing widgets, consider creating variants for different zoom levels:
+
+1. **Minimal Design** (far away view)
+   - Essential elements only
+   - Higher contrast for visibility
+   - Simplified shapes and fewer details
+
+2. **Standard Design** (normal view)
+   - Balanced detail and simplicity
+   - Clear labels and readable text
+   - Good for most use cases
+
+3. **Full Detail Design** (close-up view)
+   - All labels, descriptions, and help text
+   - Rich visual effects and polish
+   - Maximum information density
+
+### Design Handoff Checklist
+- [ ] Specify which elements are essential vs. nice-to-have
+- [ ] Define minimum readable sizes for text elements
+- [ ] Provide simplified versions for distant viewing
+- [ ] Consider color contrast at different opacity levels
+- [ ] Test designs at multiple zoom levels
+
+## Testing Your LOD Implementation
+
+### Manual Testing
+1. Create a workflow with your widget
+2. Zoom out until nodes are very small
+3. Verify essential functionality still works
+4. Zoom in gradually and check that details appear smoothly
+5. Test performance with 50+ nodes containing your widget
+
+### Performance Considerations
+- Avoid complex calculations in LOD computed properties
+- Use `v-if` instead of `v-show` for elements that won't render
+- Consider using `v-memo` for expensive widget content
+- Test on lower-end devices
+
+### Common Mistakes
+❌ **Don't**: Hide the main widget functionality at any zoom level
+❌ **Don't**: Use complex animations that trigger at every zoom change  
+❌ **Don't**: Make LOD thresholds too sensitive (causes flickering)
+❌ **Don't**: Forget to test with real content and edge cases
+
+✅ **Do**: Keep essential functionality always visible
+✅ **Do**: Use smooth transitions between LOD levels
+✅ **Do**: Test with varying content lengths and types
+✅ **Do**: Consider accessibility at all zoom levels
+
+## Getting Help
+
+- Check existing widgets in `src/components/graph/vueNodes/widgets/` for examples
+- Ask in the ComfyUI frontend Discord for LOD implementation questions
+- Test your changes with the LOD debug panel (top-right in GraphCanvas)
+- Profile performance impact using browser dev tools

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/graph/vueWidgets/widgetRegistry.ts

@@ -0,0 +1,83 @@
+/**
+ * Widget type registry and component mapping for Vue-based widgets
+ */
+import type { Component } from 'vue'
+
+// Component imports
+import WidgetButton from './WidgetButton.vue'
+import WidgetChart from './WidgetChart.vue'
+import WidgetColorPicker from './WidgetColorPicker.vue'
+import WidgetFileUpload from './WidgetFileUpload.vue'
+import WidgetGalleria from './WidgetGalleria.vue'
+import WidgetImage from './WidgetImage.vue'
+import WidgetImageCompare from './WidgetImageCompare.vue'
+import WidgetInputText from './WidgetInputText.vue'
+import WidgetMarkdown from './WidgetMarkdown.vue'
+import WidgetMultiSelect from './WidgetMultiSelect.vue'
+import WidgetSelect from './WidgetSelect.vue'
+import WidgetSelectButton from './WidgetSelectButton.vue'
+import WidgetSlider from './WidgetSlider.vue'
+import WidgetTextarea from './WidgetTextarea.vue'
+import WidgetToggleSwitch from './WidgetToggleSwitch.vue'
+import WidgetTreeSelect from './WidgetTreeSelect.vue'
+
+/**
+ * Enum of all available widget types
+ */
+export enum WidgetType {
+  BUTTON = 'BUTTON',
+  STRING = 'STRING',
+  INT = 'INT',
+  FLOAT = 'FLOAT',
+  NUMBER = 'NUMBER',
+  BOOLEAN = 'BOOLEAN',
+  COMBO = 'COMBO',
+  COLOR = 'COLOR',
+  MULTISELECT = 'MULTISELECT',
+  SELECTBUTTON = 'SELECTBUTTON',
+  SLIDER = 'SLIDER',
+  TEXTAREA = 'TEXTAREA',
+  TOGGLESWITCH = 'TOGGLESWITCH',
+  CHART = 'CHART',
+  IMAGE = 'IMAGE',
+  IMAGECOMPARE = 'IMAGECOMPARE',
+  GALLERIA = 'GALLERIA',
+  FILEUPLOAD = 'FILEUPLOAD',
+  TREESELECT = 'TREESELECT',
+  MARKDOWN = 'MARKDOWN'
+}
+
+/**
+ * Maps widget types to their corresponding Vue components
+ * Components will be added as they are implemented
+ */
+export const widgetTypeToComponent: Record<string, Component> = {
+  // Components will be uncommented as they are implemented
+  [WidgetType.BUTTON]: WidgetButton,
+  [WidgetType.STRING]: WidgetInputText,
+  [WidgetType.INT]: WidgetSlider,
+  [WidgetType.FLOAT]: WidgetSlider,
+  [WidgetType.NUMBER]: WidgetSlider, // For compatibility
+  [WidgetType.BOOLEAN]: WidgetToggleSwitch,
+  [WidgetType.COMBO]: WidgetSelect,
+  [WidgetType.COLOR]: WidgetColorPicker,
+  [WidgetType.MULTISELECT]: WidgetMultiSelect,
+  [WidgetType.SELECTBUTTON]: WidgetSelectButton,
+  [WidgetType.SLIDER]: WidgetSlider,
+  [WidgetType.TEXTAREA]: WidgetTextarea,
+  [WidgetType.TOGGLESWITCH]: WidgetToggleSwitch,
+  [WidgetType.CHART]: WidgetChart,
+  [WidgetType.IMAGE]: WidgetImage,
+  [WidgetType.IMAGECOMPARE]: WidgetImageCompare,
+  [WidgetType.GALLERIA]: WidgetGalleria,
+  [WidgetType.FILEUPLOAD]: WidgetFileUpload,
+  [WidgetType.TREESELECT]: WidgetTreeSelect,
+  [WidgetType.MARKDOWN]: WidgetMarkdown
+}
+
+/**
+ * Helper function to get widget component by type
+ */
+export function getWidgetComponent(type: string): Component | undefined {
+  return widgetTypeToComponent[type]
+}

src/components/sidebar/SideToolbar.vue

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

src/components/sidebar/SidebarBottomPanelToggleButton.vue

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

src/components/sidebar/SidebarHelpCenterIcon.vue

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

src/components/sidebar/SidebarIcon.vue

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

src/components/sidebar/SidebarShortcutsToggleButton.vue

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

src/components/sidebar/SidebarTemplatesButton.vue

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

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

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

src/components/templates/TemplateSearchBar.vue

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

src/components/templates/TemplateWorkflowCardSkeleton.vue

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

src/components/templates/TemplateWorkflowView.spec.ts

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

src/components/templates/TemplateWorkflowView.vue

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

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

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