[fix] Disable serialization for text preview widget

Adds serialize: false to prevent text preview widget content from being included in workflow serialization.

CLAUDE.md

@@ -0,0 +1,34 @@
+
+- Be sure to run unit tests, component tests, browser tests then typecheck, lint, format (with prettier) when you're done making a series of code changes. You can find the scripts for all these things in the package.json.
+- When referencing PrimeVue, you can get all the docs here: https://primevue.org. Do this instead of making up or inferring names of Components
+- Never add lines to PR descriptions that say "Generated with Claude Code"
+- When making PR names and commit messages, if you are going to add a prefix like "docs:", "feat:", "bugfix:", use square brackets around the prefix term and do not use a colon (e.g., should be "[docs]" rather than "docs:").
+- When I reference GitHub Repos related to Comfy-Org, you should proactively fetch or read the associated information in the repo. To do so, you should exhaust all options: (1) Check if we have a local copy of the repo, (2) Use the GitHub API to fetch the information; you may want to do this IN ADDITION to the other options, especially for reading speicifc branches/PRs/comments/reviews/metadata, and (3) curl the GitHub website and parse the html or json responses
+- For information about ComfyUI, ComfyUI_frontend, or ComfyUI-Manager, you can web search or download these wikis: https://deepwiki.com/Comfy-Org/ComfyUI-Manager, https://deepwiki.com/Comfy-Org/ComfyUI_frontend/1-overview, https://deepwiki.com/comfyanonymous/ComfyUI/2-core-architecture
+- If a question/project is related to Comfy-Org, Comfy, or ComfyUI ecosystem, you should proactively use the Comfy docs to answer the question. The docs may be referenced with URLs like https://docs.comfy.org
+- When operating inside a repo, check for README files at key locations in the repo detailing info about the contents of that folder. E.g., top-level key folders like tests-ui, browser_tests, composables, extensions/core, stores, services often have their own README.md files. When writing code, make sure to frequently reference these README files to understand the overall architecture and design of the project. Pay close attention to the snippets to learn particular patterns that seem to be there for a reason, as you should emulate those.
+- Prefer running single tests, and not the whole test suite, for performance
+- If using a lesser known or complex CLI tool, run the --help to see the documentation before deciding what to run, even if just for double-checking or verifying things.
+- IMPORTANT: the most important goal when writing code is to create clean, best-practices, sustainable, and scalable public APIs and interfaces. Our app is used by thousands of users and we have thousands of mods/extensions that are constantly changing and updating; and we are also always updating. That's why it is IMPORTANT that we design systems and write code that follows practices of domain-driven design, object-oriented design, and design patterns (such that you can assure stability while allowing for all components around you to change and evolve). We ABSOLUTELY prioritize clean APIs and public interfaces that clearly define and restrict how/what the mods/extensions can access.
+- If any of these technologies are referenced, you can proactively read their docs at these locations: https://primevue.org/theming, https://primevue.org/forms/, https://www.electronjs.org/docs/latest/api/browser-window, https://vitest.dev/guide/browser/, https://atlassian.design/components/pragmatic-drag-and-drop/core-package/drop-targets/, https://playwright.dev/docs/api/class-test, https://playwright.dev/docs/api/class-electron, https://www.algolia.com/doc/api-reference/rest-api/, https://pyav.org/docs/develop/cookbook/basics.html
+- IMPORTANT: Never add Co-Authored by Claude or any refrence to Claude or Claude Code in commit messages, PR descriptions, titles, or any documentation whatsoever
+- The npm script to type check is called "typecheck" NOT "type check"
+- Use the Vue 3 Composition API instead of the Options API when writing Vue components. An exception is when overriding or extending a PrimeVue component for compatibility, you may use the Options API.
+- Use setup() function for component logic
+- Utilize ref and reactive for reactive state
+- Implement computed properties with computed()
+- Use watch and watchEffect for side effects
+- Implement lifecycle hooks with onMounted, onUpdated, etc.
+- Utilize provide/inject for dependency injection
+- Use vue 3.5 style of default prop declaration. Do not define a `props` variable; instead, destructure props. Since vue 3.5, destructuring props does not strip them of reactivity.
+- Use Tailwind CSS for styling
+- Leverage VueUse functions for performance-enhancing styles
+- Use lodash for utility functions
+- Use TypeScript for type safety
+- Implement proper props and emits definitions
+- Utilize Vue 3's Teleport component when needed
+- Use Suspense for async components
+- Implement proper error handling
+- Follow Vue 3 style guide and naming conventions
+- Use Vite for fast development and building
+- Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json.

README.md

@@ -526,11 +526,20 @@ Have another idea? Drop into Discord or open an issue, and let's chat!
 
 ## Development
 
-### Prerequisites
+### Prerequisites & Technology Stack
 
-- Node.js (v16 or later) and npm must be installed
-- Git for version control
-- A running ComfyUI backend instance
+- **Required Software**:
+  - Node.js (v16 or later) 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
 
@@ -558,15 +567,6 @@ To launch ComfyUI and have it connect to your development server:
 python main.py --port 8188
 ```
 
-### 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
-
 ### Git pre-commit hooks
 
 Run `npm run prepare` to install Git pre-commit hooks. Currently, the pre-commit
@@ -579,6 +579,7 @@ 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
 

browser_tests/README.md

@@ -1,6 +1,6 @@
 # Playwright Testing for ComfyUI_frontend
 
-This document outlines the setup and usage of Playwright for testing the ComfyUI_frontend project.
+This document outlines the setup, usage, and common patterns for Playwright browser tests in the ComfyUI_frontend project.
 
 ## WARNING
 
@@ -31,7 +31,7 @@ If you are running Playwright tests in parallel or running the same test multipl
 
 ## Running Tests
 
-There are two ways to run the tests:
+There are multiple ways to run the tests:
 
 1. **Headless mode with report generation:**
    ```bash
@@ -47,14 +47,239 @@ There are two ways to run the tests:
 
    ![Playwright UI Mode](https://github.com/user-attachments/assets/6a1ebef0-90eb-4157-8694-f5ee94d03755)
 
+3. **Running specific tests:**
+   ```bash
+   npx playwright test widget.spec.ts
+   ```
+
+## Test Structure
+
+Browser tests in this project follow a specific organization pattern:
+
+- **Fixtures**: Located in `fixtures/` - These provide test setup and utilities
+  - `ComfyPage.ts` - The main fixture for interacting with ComfyUI
+  - `ComfyMouse.ts` - Utility for mouse interactions with the canvas
+  - Components fixtures in `fixtures/components/` - Page object models for UI components
+
+- **Tests**: Located in `tests/` - The actual test specifications
+  - Organized by functionality (e.g., `widget.spec.ts`, `interaction.spec.ts`)
+  - Snapshot directories (e.g., `widget.spec.ts-snapshots/`) contain reference screenshots
+
+- **Utilities**: Located in `utils/` - Common utility functions
+  - `litegraphUtils.ts` - Utilities for working with LiteGraph nodes
+
+## Writing Effective Tests
+
+When writing new tests, follow these patterns:
+
+### Test Structure
+
+```typescript
+// Import the test fixture
+import { comfyPageFixture as test } from '../fixtures/ComfyPage';
+
+test.describe('Feature Name', () => {
+  // Set up test environment if needed
+  test.beforeEach(async ({ comfyPage }) => {
+    // Common setup
+  });
+
+  test('should do something specific', async ({ comfyPage }) => {
+    // Test implementation
+  });
+});
+```
+
+### Leverage Existing Fixtures and Helpers
+
+Always check for existing helpers and fixtures before implementing new ones:
+
+- **ComfyPage**: Main fixture with methods for canvas interaction and node management
+- **ComfyMouse**: Helper for precise mouse operations on the canvas
+- **Helpers**: Check `browser_tests/helpers/` for specialized helpers like:
+  - `actionbar.ts`: Interact with the action bar
+  - `manageGroupNode.ts`: Group node management operations
+  - `templates.ts`: Template workflows operations
+- **Component Fixtures**: Check `browser_tests/fixtures/components/` for UI component helpers
+- **Utility Functions**: Check `browser_tests/utils/` and `browser_tests/fixtures/utils/` for shared utilities
+
+Most common testing needs are already addressed by these helpers, which will make your tests more consistent and reliable.
+
+### Key Testing Patterns
+
+1. **Focus elements explicitly**:
+   Canvas-based elements often need explicit focus before interaction:
+   ```typescript
+   // Click the canvas first to focus it before pressing keys
+   await comfyPage.canvas.click();
+   await comfyPage.page.keyboard.press('a');
+   ```
+
+2. **Mark canvas as dirty if needed**:
+   Some interactions need explicit canvas updates:
+   ```typescript
+   // After programmatically changing node state, mark canvas dirty
+   await comfyPage.page.evaluate(() => {
+     window['app'].graph.setDirtyCanvas(true, true);
+   });
+   ```
+
+3. **Use node references over coordinates**: 
+   Node references from `fixtures/utils/litegraphUtils.ts` provide stable ways to interact with nodes:
+   ```typescript
+   // Prefer this:
+   const node = await comfyPage.getNodeRefsByType('LoadImage')[0];
+   await node.click('title');
+   
+   // Over this:
+   await comfyPage.canvas.click({ position: { x: 100, y: 100 } });
+   ```
+
+4. **Wait for canvas to render after UI interactions**:
+   ```typescript
+   await comfyPage.nextFrame();
+   ```
+
+5. **Clean up persistent server state**:
+   While most state is reset between tests, anything stored on the server persists:
+   ```typescript
+   // Reset settings that affect other tests (these are stored on server)
+   await comfyPage.setSetting('Comfy.ColorPalette', 'dark');
+   await comfyPage.setSetting('Comfy.NodeBadge.NodeIdBadgeMode', 'None');
+   
+   // Clean up uploaded files if needed
+   await comfyPage.request.delete(`${comfyPage.url}/api/delete/image.png`);
+   ```
+
+6. **Prefer functional assertions over screenshots**:
+   Use screenshots only when visual verification is necessary:
+   ```typescript
+   // Prefer this:
+   expect(await node.isPinned()).toBe(true);
+   expect(await node.getProperty('title')).toBe('Expected Title');
+   
+   // Over this - only use when needed:
+   await expect(comfyPage.canvas).toHaveScreenshot('state.png');
+   ```
+
+7. **Use minimal test workflows**:
+   When creating test workflows, keep them as minimal as possible:
+   ```typescript
+   // Include only the components needed for the test
+   await comfyPage.loadWorkflow('single_ksampler');
+   ```
+
+## Common Patterns and Utilities
+
+### Page Object Pattern
+
+Tests use the Page Object pattern to create abstractions over the UI:
+
+```typescript
+// Using the ComfyPage fixture
+test('Can toggle boolean widget', async ({ comfyPage }) => {
+  await comfyPage.loadWorkflow('widgets/boolean_widget')
+  const node = (await comfyPage.getFirstNodeRef())!
+  const widget = await node.getWidget(0)
+  await widget.click()
+});
+```
+
+### Node References
+
+The `NodeReference` class provides helpers for interacting with LiteGraph nodes:
+
+```typescript
+// Getting node by type and interacting with it
+const nodes = await comfyPage.getNodeRefsByType('LoadImage')
+const loadImageNode = nodes[0]
+const widget = await loadImageNode.getWidget(0)
+await widget.click()
+```
+
+### Visual Regression Testing
+
+Tests use screenshot comparisons to verify UI state:
+
+```typescript
+// Take a screenshot and compare to reference
+await expect(comfyPage.canvas).toHaveScreenshot('boolean_widget_toggled.png')
+```
+
+### Waiting for Animations
+
+Always call `nextFrame()` after actions that trigger animations:
+
+```typescript
+await comfyPage.canvas.click({ position: { x: 100, y: 100 } })
+await comfyPage.nextFrame() // Wait for canvas to redraw
+```
+
+### Mouse Interactions
+
+Canvas operations use special helpers to ensure proper timing:
+
+```typescript
+// Using ComfyMouse for drag and drop
+await comfyMouse.dragAndDrop(
+  { x: 100, y: 100 },  // From
+  { x: 200, y: 200 }   // To
+)
+
+// Standard ComfyPage helpers
+await comfyPage.drag({ x: 100, y: 100 }, { x: 200, y: 200 })
+await comfyPage.pan({ x: 200, y: 200 })
+await comfyPage.zoom(-100) // Zoom in
+```
+
+### Workflow Management
+
+Tests use workflows stored in `assets/` for consistent starting points:
+
+```typescript
+// Load a test workflow
+await comfyPage.loadWorkflow('single_ksampler')
+
+// Wait for workflow to load and stabilize
+await comfyPage.nextFrame()
+```
+
+### Custom Assertions
+
+The project includes custom Playwright assertions through `comfyExpect`:
+
+```typescript
+// Check if a node is in a specific state
+await expect(node).toBePinned()
+await expect(node).toBeBypassed()
+await expect(node).toBeCollapsed()
+```
+
+## Troubleshooting Common Issues
+
+### Flaky Tests
+
+- **Timing Issues**: Always wait for animations to complete with `nextFrame()`
+- **Coordinate Sensitivity**: Canvas coordinates are viewport-relative; use node references when possible
+- **Test Isolation**: Tests run in parallel; avoid dependencies between tests
+- **Screenshots vary**: Ensure your OS and browser match the reference environment (Linux)
+- **Async / await**: Race conditions are a very common cause of test flakiness
+
 ## Screenshot Expectations
 
 Due to variations in system font rendering, screenshot expectations are platform-specific. Please note:
 
-- We maintain Linux screenshot expectations as our GitHub Action runner operates in a Linux environment.
-- To set new test expectations:
-  1. Create a pull request from a `Comfy-Org/ComfyUI_frontend` branch.
-  2. Add the `New Browser Test Expectation` tag to your pull request.
-  3. This will trigger a GitHub action to update the screenshot expectations automatically.
+- **DO NOT commit local screenshot expectations** to the repository
+- We maintain Linux screenshot expectations as our GitHub Action runner operates in a Linux environment
+- While developing, you can generate local screenshots for your tests, but these will differ from CI-generated ones
 
-> **Note:** If you're making a pull request from a forked repository, the GitHub action won't be able to commit updated screenshot expectations directly to your PR branch.
+To set new test expectations for PR:
+
+1. Write your test with screenshot assertions using `toHaveScreenshot(filename)`
+2. Create a pull request from a `Comfy-Org/ComfyUI_frontend` branch
+3. Add the `New Browser Test Expectation` tag to your pull request
+4. The GitHub CI will automatically generate and commit the reference screenshots
+
+This approach ensures consistent screenshot expectations across all PRs and avoids issues with platform-specific rendering.
+
+> **Note:** If you're making a pull request from a forked repository, the GitHub action won't be able to commit updated screenshot expectations directly to your PR branch.

browser_tests/tests/chatHistory.spec.ts

@@ -0,0 +1,139 @@
+import { Page, expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+interface ChatHistoryEntry {
+  prompt: string
+  response: string
+  response_id: string
+}
+
+async function renderChatHistory(page: Page, history: ChatHistoryEntry[]) {
+  const nodeId = await page.evaluate(() => window['app'].graph.nodes[0]?.id)
+  // Simulate API sending display_component message
+  await page.evaluate(
+    ({ nodeId, history }) => {
+      const event = new CustomEvent('display_component', {
+        detail: {
+          node_id: nodeId,
+          component: 'ChatHistoryWidget',
+          props: {
+            history: JSON.stringify(history)
+          }
+        }
+      })
+      window['app'].api.dispatchEvent(event)
+      return true
+    },
+    { nodeId, history }
+  )
+
+  return nodeId
+}
+
+test.describe('Chat History Widget', () => {
+  let nodeId: string
+
+  test.beforeEach(async ({ comfyPage }) => {
+    nodeId = await renderChatHistory(comfyPage.page, [
+      { prompt: 'Hello', response: 'World', response_id: '123' }
+    ])
+    // Wait for chat history to be rendered
+    await comfyPage.page.waitForSelector('.pi-pencil')
+  })
+
+  test('displays chat history when receiving display_component message', async ({
+    comfyPage
+  }) => {
+    // Verify the chat history is displayed correctly
+    await expect(comfyPage.page.getByText('Hello')).toBeVisible()
+    await expect(comfyPage.page.getByText('World')).toBeVisible()
+  })
+
+  test('handles message editing interaction', async ({ comfyPage }) => {
+    // Get first node's ID
+    nodeId = await comfyPage.page.evaluate(() => {
+      const node = window['app'].graph.nodes[0]
+
+      // Make sure the node has a prompt widget (for editing functionality)
+      if (!node.widgets) {
+        node.widgets = []
+      }
+
+      // Add a prompt widget if it doesn't exist
+      if (!node.widgets.find((w) => w.name === 'prompt')) {
+        node.widgets.push({
+          name: 'prompt',
+          type: 'text',
+          value: 'Original prompt'
+        })
+      }
+
+      return node.id
+    })
+
+    await renderChatHistory(comfyPage.page, [
+      {
+        prompt: 'Message 1',
+        response: 'Response 1',
+        response_id: '123'
+      },
+      {
+        prompt: 'Message 2',
+        response: 'Response 2',
+        response_id: '456'
+      }
+    ])
+    await comfyPage.page.waitForSelector('.pi-pencil')
+
+    const originalTextAreaInput = await comfyPage.page
+      .getByPlaceholder('text')
+      .nth(1)
+      .inputValue()
+
+    // Click edit button on first message
+    await comfyPage.page.getByLabel('Edit').first().click()
+    await comfyPage.nextFrame()
+
+    // Verify cancel button appears
+    await expect(comfyPage.page.getByLabel('Cancel')).toBeVisible()
+
+    // Click cancel edit
+    await comfyPage.page.getByLabel('Cancel').click()
+
+    // Verify prompt input is restored
+    await expect(comfyPage.page.getByPlaceholder('text').nth(1)).toHaveValue(
+      originalTextAreaInput
+    )
+  })
+
+  test('handles real-time updates to chat history', async ({ comfyPage }) => {
+    // Send initial history
+    await renderChatHistory(comfyPage.page, [
+      {
+        prompt: 'Initial message',
+        response: 'Initial response',
+        response_id: '123'
+      }
+    ])
+    await comfyPage.page.waitForSelector('.pi-pencil')
+
+    // Update history with additional messages
+    await renderChatHistory(comfyPage.page, [
+      {
+        prompt: 'Follow-up',
+        response: 'New response',
+        response_id: '456'
+      }
+    ])
+    await comfyPage.page.waitForSelector('.pi-pencil')
+
+    // Move mouse over the canvas to force update
+    await comfyPage.page.mouse.move(100, 100)
+    await comfyPage.nextFrame()
+
+    // Verify new messages appear
+    await expect(comfyPage.page.getByText('Follow-up')).toBeVisible()
+    await expect(comfyPage.page.getByText('New response')).toBeVisible()
+  })
+})

browser_tests/tests/templates.spec.ts

@@ -142,4 +142,136 @@ test.describe('Templates', () => {
     // Expect the title to be used as fallback for the template categories
     await expect(comfyPage.page.getByLabel('FALLBACK CATEGORY')).toBeVisible()
   })
+
+  test('template cards are dynamically sized and responsive', async ({
+    comfyPage
+  }) => {
+    // Open templates dialog
+    await comfyPage.executeCommand('Comfy.BrowseTemplates')
+    await expect(comfyPage.templates.content).toBeVisible()
+
+    // Wait for at least one template card to appear
+    await expect(comfyPage.page.locator('.template-card').first()).toBeVisible({
+      timeout: 5000
+    })
+
+    // Take snapshot of the template grid
+    const templateGrid = comfyPage.templates.content.locator('.grid').first()
+    await expect(templateGrid).toBeVisible()
+    await expect(templateGrid).toHaveScreenshot('template-grid-desktop.png')
+
+    // Check cards at mobile viewport size
+    await comfyPage.page.setViewportSize({ width: 640, height: 800 })
+    await expect(templateGrid).toBeVisible()
+    await expect(templateGrid).toHaveScreenshot('template-grid-mobile.png')
+
+    // Check cards at tablet size
+    await comfyPage.page.setViewportSize({ width: 1024, height: 800 })
+    await expect(templateGrid).toBeVisible()
+    await expect(templateGrid).toHaveScreenshot('template-grid-tablet.png')
+  })
+
+  test('hover effects work on template cards', async ({ comfyPage }) => {
+    // Open templates dialog
+    await comfyPage.executeCommand('Comfy.BrowseTemplates')
+    await expect(comfyPage.templates.content).toBeVisible()
+
+    // Get a template card
+    const firstCard = comfyPage.page.locator('.template-card').first()
+    await expect(firstCard).toBeVisible({ timeout: 5000 })
+
+    // Take snapshot before hover
+    await expect(firstCard).toHaveScreenshot('template-card-before-hover.png')
+
+    // Hover over the card
+    await firstCard.hover()
+
+    // Take snapshot after hover to verify hover effect
+    await expect(firstCard).toHaveScreenshot('template-card-after-hover.png')
+  })
+
+  test('template cards descriptions adjust height dynamically', async ({
+    comfyPage
+  }) => {
+    // Setup test by intercepting templates response to inject cards with varying description lengths
+    await comfyPage.page.route('**/templates/index.json', async (route, _) => {
+      const response = [
+        {
+          moduleName: 'default',
+          title: 'Test Templates',
+          type: 'image',
+          templates: [
+            {
+              name: 'short-description',
+              title: 'Short Description',
+              mediaType: 'image',
+              mediaSubtype: 'webp',
+              description: 'This is a short description.'
+            },
+            {
+              name: 'medium-description',
+              title: 'Medium Description',
+              mediaType: 'image',
+              mediaSubtype: 'webp',
+              description:
+                'This is a medium length description that should take up two lines on most displays.'
+            },
+            {
+              name: 'long-description',
+              title: 'Long Description',
+              mediaType: 'image',
+              mediaSubtype: 'webp',
+              description:
+                'This is a much longer description that should definitely wrap to multiple lines. It contains enough text to demonstrate how the cards handle varying amounts of content while maintaining a consistent layout grid.'
+            }
+          ]
+        }
+      ]
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify(response),
+        headers: {
+          'Content-Type': 'application/json',
+          'Cache-Control': 'no-store'
+        }
+      })
+    })
+
+    // Mock the thumbnail images to avoid 404s
+    await comfyPage.page.route('**/templates/**.webp', async (route) => {
+      const headers = {
+        'Content-Type': 'image/webp',
+        'Cache-Control': 'no-store'
+      }
+      await route.fulfill({
+        status: 200,
+        path: 'browser_tests/assets/example.webp',
+        headers
+      })
+    })
+
+    // Open templates dialog
+    await comfyPage.executeCommand('Comfy.BrowseTemplates')
+    await expect(comfyPage.templates.content).toBeVisible()
+
+    // Verify cards are visible with varying content lengths
+    await expect(
+      comfyPage.page.getByText('This is a short description.')
+    ).toBeVisible({ timeout: 5000 })
+    await expect(
+      comfyPage.page.getByText('This is a medium length description')
+    ).toBeVisible({ timeout: 5000 })
+    await expect(
+      comfyPage.page.getByText('This is a much longer description')
+    ).toBeVisible({ timeout: 5000 })
+
+    // Take snapshot of a grid with specific cards
+    const templateGrid = comfyPage.templates.content
+      .locator('.grid:has-text("Short Description")')
+      .first()
+    await expect(templateGrid).toBeVisible()
+    await expect(templateGrid).toHaveScreenshot(
+      'template-grid-varying-content.png'
+    )
+  })
 })

index.html

@@ -6,7 +6,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <link rel="stylesheet" type="text/css" href="user.css" />
     <link rel="stylesheet" type="text/css" href="materialdesignicons.min.css" />
+    
+    <!-- Fullscreen mode on iOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <!-- Status bar style (eg. black or transparent) -->
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    
+    <link rel="manifest" href="manifest.json">
   </head>
+  
   <body class="litegraph grid">
     <div id="vue-app"></div>
     <script type="module" src="src/main.ts"></script>

manifest.json

@@ -0,0 +1,9 @@
+{
+  "name": "ComfyUI",
+  "short_name": "ComfyUI",
+  "description": "ComfyUI: AI image generation platform",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#000000"
+}

package-lock.json

@@ -1,18 +1,18 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.20.2",
+  "version": "1.20.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@comfyorg/comfyui-frontend",
-      "version": "1.20.2",
+      "version": "1.20.3",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
         "@comfyorg/comfyui-electron-types": "^0.4.43",
-        "@comfyorg/litegraph": "^0.15.11",
+        "@comfyorg/litegraph": "^0.16.0-sub.5",
         "@primevue/forms": "^4.2.5",
         "@primevue/themes": "^4.2.5",
         "@sentry/vue": "^8.48.0",
@@ -788,9 +788,9 @@
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.15.11",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.15.11.tgz",
-      "integrity": "sha512-gU8KK9cid7dXSK1yh3ReUolG0HGT3piKgKLd8YDr21PWl64pQvzy8BIh7W1vKH8ZWictKmNBaG9IRKlsJ667Zw==",
+      "version": "0.16.0-sub.5",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.16.0-sub.5.tgz",
+      "integrity": "sha512-EgJpmSXOlr/zk22gi2WrOzpxh27yE0B5/nCrCXJP95UJRYPb+1pgdT28rSYYi5KrniVYUrAknQrqF0taqQxwMg==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {

package.json

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

public/user.css

@@ -1 +0,0 @@
-/* Put custom styles here */

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="workflowStore.isSubgraphActive"
-    class="fixed top-[var(--comfy-topbar-height)] left-[var(--sidebar-width)] p-2 subgraph-breadcrumb"
-  >
+  <div v-if="workflowStore.isSubgraphActive" class="p-2 subgraph-breadcrumb">
     <Breadcrumb
       class="bg-transparent"
       :home="home"
@@ -14,28 +11,30 @@
 </template>
 
 <script setup lang="ts">
-import { useEventListener, whenever } from '@vueuse/core'
+import { useEventListener } from '@vueuse/core'
 import Breadcrumb from 'primevue/breadcrumb'
 import type { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
 import { computed } from 'vue'
 
-import { useWorkflowService } from '@/services/workflowService'
 import { useCanvasStore } from '@/stores/graphStore'
+import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
 
-const workflowService = useWorkflowService()
 const workflowStore = useWorkflowStore()
+const navigationStore = useSubgraphNavigationStore()
 
 const workflowName = computed(() => workflowStore.activeWorkflow?.filename)
 
 const items = computed(() => {
-  if (!workflowStore.subgraphNamePath.length) return []
+  if (!navigationStore.navigationStack.length) return []
 
-  return workflowStore.subgraphNamePath.map<MenuItem>((name) => ({
-    label: name,
-    command: async () => {
-      const workflow = workflowStore.getWorkflowByPath(name)
-      if (workflow) await workflowService.openWorkflow(workflow)
+  return navigationStore.navigationStack.map<MenuItem>((subgraph) => ({
+    label: subgraph.name,
+    command: () => {
+      const canvas = useCanvasStore().getCanvas()
+      if (!canvas.graph) throw new TypeError('Canvas has no graph')
+
+      canvas.setGraph(subgraph)
     }
   }))
 })
@@ -43,7 +42,7 @@ const items = computed(() => {
 const home = computed(() => ({
   label: workflowName.value,
   icon: 'pi pi-home',
-  command: async () => {
+  command: () => {
     const canvas = useCanvasStore().getCanvas()
     if (!canvas.graph) throw new TypeError('Canvas has no graph')
 
@@ -55,14 +54,17 @@ const handleItemClick = (event: MenuItemCommandEvent) => {
   event.item.command?.(event)
 }
 
-whenever(
-  () => useCanvasStore().canvas,
-  (canvas) => {
-    useEventListener(canvas.canvas, 'litegraph:set-graph', () => {
-      useWorkflowStore().updateActiveGraph()
-    })
+// 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
+    )
   }
-)
+})
 </script>
 
 <style>

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -30,7 +30,7 @@
       </div>
     </template>
   </ListBox>
-  <div class="flex justify-end py-3">
+  <div v-if="isManagerInstalled" class="flex justify-end py-3">
     <Button label="Open Manager" size="small" outlined @click="openManager" />
   </div>
 </template>
@@ -42,6 +42,7 @@ import { computed } from 'vue'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import { useDialogService } from '@/services/dialogService'
+import { useAboutPanelStore } from '@/stores/aboutPanelStore'
 import type { MissingNodeType } from '@/types/comfy'
 import { ManagerTab } from '@/types/comfyManagerTypes'
 
@@ -49,6 +50,19 @@ const props = defineProps<{
   missingNodeTypes: MissingNodeType[]
 }>()
 
+const aboutPanelStore = useAboutPanelStore()
+
+// Determines if ComfyUI-Manager is installed by checking for its badge in the about panel
+// This allows us to conditionally show the Manager button only when the extension is available
+// TODO: Remove this check when Manager functionality is fully migrated into core
+const isManagerInstalled = computed(() => {
+  return aboutPanelStore.badges.some(
+    (badge) =>
+      badge.label.includes('ComfyUI-Manager') ||
+      badge.url.includes('ComfyUI-Manager')
+  )
+})
+
 const uniqueNodes = computed(() => {
   const seenTypes = new Set()
   return props.missingNodeTypes

src/components/dialog/content/error/ReportIssuePanel.vue

@@ -124,12 +124,16 @@
                 :aria-label="$t('issueReport.provideAdditionalDetails')"
               />
               <Message
-                v-if="$field?.error && $field.touched && $field.value"
+                v-if="$field?.error && $field.touched"
                 severity="error"
                 size="small"
                 variant="simple"
               >
-                {{ t('issueReport.validation.maxLength') }}
+                {{
+                  $field.value
+                    ? t('issueReport.validation.maxLength')
+                    : t('issueReport.validation.descriptionRequired')
+                }}
               </Message>
             </FormField>
           </div>

src/components/graph/DomWidgets.vue

@@ -21,16 +21,14 @@ import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useCanvasStore } from '@/stores/graphStore'
 
 const domWidgetStore = useDomWidgetStore()
-const widgetStates = computed(() =>
-  Array.from(domWidgetStore.widgetStates.values())
-)
+const widgetStates = computed(() => domWidgetStore.activeWidgetStates)
 
 const updateWidgets = () => {
   const lgCanvas = canvasStore.canvas
   if (!lgCanvas) return
 
   const lowQuality = lgCanvas.low_quality
-  for (const widgetState of domWidgetStore.widgetStates.values()) {
+  for (const widgetState of widgetStates.value) {
     const widget = widgetState.widget
     const node = widget.node as LGraphNode
 

src/components/graph/GraphCanvas.vue

@@ -12,10 +12,12 @@
       <BottomPanel />
     </template>
     <template #graph-canvas-panel>
-      <SecondRowWorkflowTabs
-        v-if="workflowTabsPosition === 'Topbar (2nd-row)'"
-        class="pointer-events-auto"
-      />
+      <div class="absolute top-0 left-0 w-auto max-w-full pointer-events-auto">
+        <SecondRowWorkflowTabs
+          v-if="workflowTabsPosition === 'Topbar (2nd-row)'"
+        />
+        <SubgraphBreadcrumb />
+      </div>
       <GraphCanvasMenu v-if="canvasMenuEnabled" class="pointer-events-auto" />
     </template>
   </LiteGraphCanvasSplitterOverlay>
@@ -39,12 +41,11 @@
     </SelectionOverlay>
     <DomWidgets />
   </template>
-  <SubgraphBreadcrumb />
 </template>
 
 <script setup lang="ts">
 import type { LGraphNode } from '@comfyorg/litegraph'
-import { useEventListener } from '@vueuse/core'
+import { useEventListener, whenever } from '@vueuse/core'
 import { computed, onMounted, ref, watch, watchEffect } from 'vue'
 
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
@@ -84,6 +85,7 @@ import { useCanvasStore } from '@/stores/graphStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
+import { useWorkflowStore } from '@/stores/workflowStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
@@ -320,6 +322,16 @@ onMounted(async () => {
     }
   )
 
+  whenever(
+    () => useCanvasStore().canvas,
+    (canvas) => {
+      useEventListener(canvas.canvas, 'litegraph:set-graph', () => {
+        useWorkflowStore().updateActiveGraph()
+      })
+    },
+    { immediate: true }
+  )
+
   emit('ready')
 })
 </script>

src/components/graph/SelectionToolbox.vue

@@ -10,6 +10,8 @@
     <ColorPickerButton />
     <BypassButton />
     <PinButton />
+    <MaskEditorButton />
+    <ConvertToSubgraphButton />
     <DeleteButton />
     <RefreshButton />
     <ExtensionCommandButton
@@ -24,18 +26,19 @@
 import Panel from 'primevue/panel'
 import { computed } from 'vue'
 
+import BypassButton from '@/components/graph/selectionToolbox/BypassButton.vue'
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
+import ConvertToSubgraphButton from '@/components/graph/selectionToolbox/ConvertToSubgraphButton.vue'
+import DeleteButton from '@/components/graph/selectionToolbox/DeleteButton.vue'
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
+import ExtensionCommandButton from '@/components/graph/selectionToolbox/ExtensionCommandButton.vue'
+import MaskEditorButton from '@/components/graph/selectionToolbox/MaskEditorButton.vue'
+import PinButton from '@/components/graph/selectionToolbox/PinButton.vue'
+import RefreshButton from '@/components/graph/selectionToolbox/RefreshButton.vue'
 import { useExtensionService } from '@/services/extensionService'
 import { type ComfyCommandImpl, useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
 
-import BypassButton from './selectionToolbox/BypassButton.vue'
-import DeleteButton from './selectionToolbox/DeleteButton.vue'
-import ExtensionCommandButton from './selectionToolbox/ExtensionCommandButton.vue'
-import PinButton from './selectionToolbox/PinButton.vue'
-import RefreshButton from './selectionToolbox/RefreshButton.vue'
-
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const extensionService = useExtensionService()

src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue

@@ -0,0 +1,22 @@
+<template>
+  <Button
+    v-tooltip.top="{
+      value: t('commands.Comfy_Graph_ConvertToSubgraph.label'),
+      showDelay: 1000
+    }"
+    severity="secondary"
+    text
+    icon="pi pi-box"
+    @click="() => commandStore.execute('Comfy.Graph.ConvertToSubgraph')"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useI18n } from 'vue-i18n'
+
+import { useCommandStore } from '@/stores/commandStore'
+
+const { t } = useI18n()
+const commandStore = useCommandStore()
+</script>

src/components/graph/selectionToolbox/DeleteButton.vue

@@ -1,5 +1,6 @@
 <template>
   <Button
+    v-show="isDeletable"
     v-tooltip.top="{
       value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
       showDelay: 1000
@@ -13,10 +14,17 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+
+const isDeletable = computed(() =>
+  canvasStore.selectedItems.some((x) => x.removable !== false)
+)
 </script>

src/components/graph/selectionToolbox/MaskEditorButton.vue

@@ -0,0 +1,36 @@
+<template>
+  <Button
+    v-show="isSingleImageNode"
+    v-tooltip.top="{
+      value: t('commands.Comfy_MaskEditor_OpenMaskEditor.label'),
+      showDelay: 1000
+    }"
+    severity="secondary"
+    text
+    icon="pi pi-pencil"
+    @click="openMaskEditor"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import { t } from '@/i18n'
+import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
+import { isImageNode, isLGraphNode } from '@/utils/litegraphUtil'
+
+const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+
+const isSingleImageNode = computed(() => {
+  const { selectedItems } = canvasStore
+  const item = selectedItems[0]
+  return selectedItems.length === 1 && isLGraphNode(item) && isImageNode(item)
+})
+
+const openMaskEditor = () => {
+  void commandStore.execute('Comfy.MaskEditor.OpenMaskEditor')
+}
+</script>

src/components/graph/widgets/ChatHistoryWidget.spec.ts

@@ -0,0 +1,95 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: { edit: 'Edit' },
+      chatHistory: {
+        cancelEdit: 'Cancel edit',
+        cancelEditTooltip: 'Cancel edit'
+      }
+    }
+  }
+})
+
+vi.mock('@/components/graph/widgets/chatHistory/CopyButton.vue', () => ({
+  default: {
+    name: 'CopyButton',
+    template: '<div class="mock-copy-button"></div>',
+    props: ['text']
+  }
+}))
+
+vi.mock('@/components/graph/widgets/chatHistory/ResponseBlurb.vue', () => ({
+  default: {
+    name: 'ResponseBlurb',
+    template: '<div class="mock-response-blurb"><slot /></div>',
+    props: ['text']
+  }
+}))
+
+describe('ChatHistoryWidget.vue', () => {
+  const mockHistory = JSON.stringify([
+    { prompt: 'Test prompt', response: 'Test response', response_id: '123' }
+  ])
+
+  const mountWidget = (props: { history: string; widget?: any }) => {
+    return mount(ChatHistoryWidget, {
+      props,
+      global: {
+        plugins: [i18n],
+        stubs: {
+          Button: {
+            template: '<button><slot /></button>',
+            props: ['icon', 'aria-label']
+          },
+          ScrollPanel: { template: '<div><slot /></div>' }
+        }
+      }
+    })
+  }
+
+  it('renders chat history correctly', () => {
+    const wrapper = mountWidget({ history: mockHistory })
+    expect(wrapper.text()).toContain('Test prompt')
+    expect(wrapper.text()).toContain('Test response')
+  })
+
+  it('handles empty history', () => {
+    const wrapper = mountWidget({ history: '[]' })
+    expect(wrapper.find('.mb-4').exists()).toBe(false)
+  })
+
+  it('edits previous prompts', () => {
+    const mockWidget = {
+      node: { widgets: [{ name: 'prompt', value: '' }] }
+    }
+
+    const wrapper = mountWidget({ history: mockHistory, widget: mockWidget })
+    const vm = wrapper.vm as any
+    vm.handleEdit(0)
+
+    expect(mockWidget.node.widgets[0].value).toContain('Test prompt')
+    expect(mockWidget.node.widgets[0].value).toContain('starting_point_id')
+  })
+
+  it('cancels editing correctly', () => {
+    const mockWidget = {
+      node: { widgets: [{ name: 'prompt', value: 'Original value' }] }
+    }
+
+    const wrapper = mountWidget({ history: mockHistory, widget: mockWidget })
+    const vm = wrapper.vm as any
+
+    vm.handleEdit(0)
+    vm.handleCancelEdit()
+
+    expect(mockWidget.node.widgets[0].value).toBe('Original value')
+  })
+})

src/components/graph/widgets/ChatHistoryWidget.vue

@@ -96,8 +96,7 @@ const setPromptInput = (text: string, previousResponseId?: string | null) => {
 }
 
 const handleEdit = (index: number) => {
-  if (!promptInput) return
-
+  promptInput ??= widget?.node.widgets?.find((w) => w.name === 'prompt')
   editIndex.value = index
   const prevResponseId = index === 0 ? 'start' : getPreviousResponseId(index)
   const promptText = parsedHistory.value[index]?.prompt ?? ''

src/components/load3d/Load3DScene.vue

@@ -76,7 +76,7 @@ const eventConfig = {
     emit('recordingStatusChange', value)
 } as const
 
-watchEffect(async () => {
+watchEffect(() => {
   if (load3d.value) {
     const rawLoad3d = toRaw(load3d.value) as Load3d
 
@@ -86,10 +86,20 @@ watchEffect(async () => {
     rawLoad3d.setFOV(props.fov)
     rawLoad3d.toggleCamera(props.cameraType)
     rawLoad3d.togglePreview(props.showPreview)
-    await rawLoad3d.setBackgroundImage(props.backgroundImage)
   }
 })
 
+watch(
+  () => props.backgroundImage,
+  async (newValue) => {
+    if (load3d.value) {
+      const rawLoad3d = toRaw(load3d.value) as Load3d
+
+      await rawLoad3d.setBackgroundImage(newValue)
+    }
+  }
+)
+
 watch(
   () => props.upDirection,
   (newValue) => {

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -95,12 +95,14 @@ const addNode = (nodeDef: ComfyNodeDefImpl) => {
     return
   }
 
-  disconnectOnReset = false
   const node = litegraphService.addNodeOnGraph(nodeDef, {
     pos: getNewNodeLocation()
   })
 
-  canvasStore.getCanvas().linkConnector.connectToNode(node, triggerEvent)
+  if (disconnectOnReset) {
+    canvasStore.getCanvas().linkConnector.connectToNode(node, triggerEvent)
+  }
+  disconnectOnReset = false
 
   // Notify changeTracker - new step should be added
   useWorkflowStore().activeWorkflow?.changeTracker?.checkState()

src/components/templates/TemplateWorkflowCard.spec.ts

@@ -0,0 +1,205 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import TemplateWorkflowCard from '@/components/templates/TemplateWorkflowCard.vue'
+import { TemplateInfo } from '@/types/workflowTemplateTypes'
+
+vi.mock('@/components/templates/thumbnails/AudioThumbnail.vue', () => ({
+  default: {
+    name: 'AudioThumbnail',
+    template: '<div class="mock-audio-thumbnail" :data-src="src"></div>',
+    props: ['src']
+  }
+}))
+
+vi.mock('@/components/templates/thumbnails/CompareSliderThumbnail.vue', () => ({
+  default: {
+    name: 'CompareSliderThumbnail',
+    template:
+      '<div class="mock-compare-slider" :data-base="baseImageSrc" :data-overlay="overlayImageSrc"></div>',
+    props: ['baseImageSrc', 'overlayImageSrc', 'alt', 'isHovered']
+  }
+}))
+
+vi.mock('@/components/templates/thumbnails/DefaultThumbnail.vue', () => ({
+  default: {
+    name: 'DefaultThumbnail',
+    template: '<div class="mock-default-thumbnail" :data-src="src"></div>',
+    props: ['src', 'alt', 'isHovered', 'isVideo', 'hoverZoom']
+  }
+}))
+
+vi.mock('@/components/templates/thumbnails/HoverDissolveThumbnail.vue', () => ({
+  default: {
+    name: 'HoverDissolveThumbnail',
+    template:
+      '<div class="mock-hover-dissolve" :data-base="baseImageSrc" :data-overlay="overlayImageSrc"></div>',
+    props: ['baseImageSrc', 'overlayImageSrc', 'alt', 'isHovered']
+  }
+}))
+
+vi.mock('@vueuse/core', () => ({
+  useElementHover: () => ref(false)
+}))
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    fileURL: (path: string) => `/fileURL${path}`,
+    apiURL: (path: string) => `/apiURL${path}`
+  }
+}))
+
+describe('TemplateWorkflowCard', () => {
+  const createTemplate = (overrides = {}): TemplateInfo => ({
+    name: 'test-template',
+    mediaType: 'image',
+    mediaSubtype: 'png',
+    thumbnailVariant: 'default',
+    description: 'Test description',
+    ...overrides
+  })
+
+  const mountCard = (props = {}) => {
+    return mount(TemplateWorkflowCard, {
+      props: {
+        sourceModule: 'default',
+        categoryTitle: 'Test Category',
+        loading: false,
+        template: createTemplate(),
+        ...props
+      },
+      global: {
+        stubs: {
+          Card: {
+            template:
+              '<div class="card" @click="$emit(\'click\')"><slot name="header" /><slot name="content" /></div>',
+            props: ['dataTestid', 'pt']
+          },
+          ProgressSpinner: {
+            template: '<div class="progress-spinner"></div>'
+          }
+        }
+      }
+    })
+  }
+
+  it('emits loadWorkflow event when clicked', async () => {
+    const wrapper = mountCard({
+      template: createTemplate({ name: 'test-workflow' })
+    })
+    await wrapper.find('.card').trigger('click')
+    expect(wrapper.emitted('loadWorkflow')).toBeTruthy()
+    expect(wrapper.emitted('loadWorkflow')?.[0]).toEqual(['test-workflow'])
+  })
+
+  it('shows loading spinner when loading is true', () => {
+    const wrapper = mountCard({ loading: true })
+    expect(wrapper.find('.progress-spinner').exists()).toBe(true)
+  })
+
+  it('renders audio thumbnail for audio media type', () => {
+    const wrapper = mountCard({
+      template: createTemplate({ mediaType: 'audio' })
+    })
+    expect(wrapper.find('.mock-audio-thumbnail').exists()).toBe(true)
+  })
+
+  it('renders compare slider thumbnail for compareSlider variant', () => {
+    const wrapper = mountCard({
+      template: createTemplate({ thumbnailVariant: 'compareSlider' })
+    })
+    expect(wrapper.find('.mock-compare-slider').exists()).toBe(true)
+  })
+
+  it('renders hover dissolve thumbnail for hoverDissolve variant', () => {
+    const wrapper = mountCard({
+      template: createTemplate({ thumbnailVariant: 'hoverDissolve' })
+    })
+    expect(wrapper.find('.mock-hover-dissolve').exists()).toBe(true)
+  })
+
+  it('renders default thumbnail by default', () => {
+    const wrapper = mountCard()
+    expect(wrapper.find('.mock-default-thumbnail').exists()).toBe(true)
+  })
+
+  it('passes correct props to default thumbnail for video', () => {
+    const wrapper = mountCard({
+      template: createTemplate({ mediaType: 'video' })
+    })
+    const thumbnail = wrapper.find('.mock-default-thumbnail')
+    expect(thumbnail.exists()).toBe(true)
+  })
+
+  it('uses zoomHover scale when variant is zoomHover', () => {
+    const wrapper = mountCard({
+      template: createTemplate({ thumbnailVariant: 'zoomHover' })
+    })
+    expect(wrapper.find('.mock-default-thumbnail').exists()).toBe(true)
+  })
+
+  it('displays localized title for default source module', () => {
+    const wrapper = mountCard({
+      sourceModule: 'default',
+      template: createTemplate({ localizedTitle: 'My Localized Title' })
+    })
+    expect(wrapper.text()).toContain('My Localized Title')
+  })
+
+  it('displays template name as title for non-default source modules', () => {
+    const wrapper = mountCard({
+      sourceModule: 'custom',
+      template: createTemplate({ name: 'custom-template' })
+    })
+    expect(wrapper.text()).toContain('custom-template')
+  })
+
+  it('displays localized description for default source module', () => {
+    const wrapper = mountCard({
+      sourceModule: 'default',
+      template: createTemplate({
+        localizedDescription: 'My Localized Description'
+      })
+    })
+    expect(wrapper.text()).toContain('My Localized Description')
+  })
+
+  it('processes description for non-default source modules', () => {
+    const wrapper = mountCard({
+      sourceModule: 'custom',
+      template: createTemplate({ description: 'custom_module-description' })
+    })
+    expect(wrapper.text()).toContain('custom module description')
+  })
+
+  it('generates correct thumbnail URLs for default source module', () => {
+    const wrapper = mountCard({
+      sourceModule: 'default',
+      template: createTemplate({
+        name: 'my-template',
+        mediaSubtype: 'jpg'
+      })
+    })
+    const vm = wrapper.vm as any
+    expect(vm.baseThumbnailSrc).toBe('/fileURL/templates/my-template-1.jpg')
+    expect(vm.overlayThumbnailSrc).toBe('/fileURL/templates/my-template-2.jpg')
+  })
+
+  it('generates correct thumbnail URLs for custom source module', () => {
+    const wrapper = mountCard({
+      sourceModule: 'custom-module',
+      template: createTemplate({
+        name: 'my-template',
+        mediaSubtype: 'png'
+      })
+    })
+    const vm = wrapper.vm as any
+    expect(vm.baseThumbnailSrc).toBe(
+      '/apiURL/workflow_templates/custom-module/my-template.png'
+    )
+    expect(vm.overlayThumbnailSrc).toBe(
+      '/apiURL/workflow_templates/custom-module/my-template.png'
+    )
+  })
+})

src/components/templates/TemplateWorkflowCard.vue

@@ -2,7 +2,7 @@
   <Card
     ref="cardRef"
     :data-testid="`template-workflow-${template.name}`"
-    class="w-64 template-card rounded-2xl overflow-hidden cursor-pointer shadow-elevation-2 dark-theme:bg-dark-elevation-1 h-full"
+    class="w-64 template-card rounded-2xl overflow-hidden cursor-pointer shadow-elevation-2 dark-theme:bg-dark-elevation-1.5 h-full"
     :pt="{
       body: { class: 'p-0 h-full flex flex-col' }
     }"
@@ -20,6 +20,10 @@
               :overlay-image-src="overlayThumbnailSrc"
               :alt="title"
               :is-hovered="isHovered"
+              :is-video="
+                template.mediaType === 'video' ||
+                template.mediaSubtype === 'webp'
+              "
             />
           </template>
           <template v-else-if="template.thumbnailVariant === 'hoverDissolve'">
@@ -28,6 +32,10 @@
               :overlay-image-src="overlayThumbnailSrc"
               :alt="title"
               :is-hovered="isHovered"
+              :is-video="
+                template.mediaType === 'video' ||
+                template.mediaSubtype === 'webp'
+              "
             />
           </template>
           <template v-else>
@@ -35,6 +43,10 @@
               :src="baseThumbnailSrc"
               :alt="title"
               :is-hovered="isHovered"
+              :is-video="
+                template.mediaType === 'video' ||
+                template.mediaSubtype === 'webp'
+              "
               :hover-zoom="
                 template.thumbnailVariant === 'zoomHover'
                   ? UPSCALE_ZOOM_SCALE
@@ -52,18 +64,13 @@
     <template #content>
       <div class="flex items-center px-4 py-3">
         <div class="flex-1 flex flex-col">
-          <h3 class="line-clamp-2 text-lg font-normal mb-0 h-12" :title="title">
+          <h3 class="line-clamp-2 text-lg font-normal mb-0" :title="title">
             {{ title }}
           </h3>
           <p class="line-clamp-2 text-sm text-muted grow" :title="description">
             {{ description }}
           </p>
         </div>
-        <div
-          class="flex md:hidden xl:flex items-center justify-center ml-4 w-10 h-10 rounded-full"
-        >
-          <i class="pi pi-angle-right text-2xl" />
-        </div>
       </div>
     </template>
   </Card>

src/components/templates/TemplateWorkflowView.spec.ts

@@ -0,0 +1,133 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+import TemplateWorkflowView from '@/components/templates/TemplateWorkflowView.vue'
+import { TemplateInfo } from '@/types/workflowTemplateTypes'
+
+vi.mock('primevue/dataview', () => ({
+  default: {
+    name: 'DataView',
+    template: `
+      <div class="p-dataview">
+        <div class="dataview-header"><slot name="header"></slot></div>
+        <div class="dataview-content">
+          <slot name="grid" :items="value"></slot>
+        </div>
+      </div>
+    `,
+    props: ['value', 'layout', 'lazy', 'pt']
+  }
+}))
+
+vi.mock('primevue/selectbutton', () => ({
+  default: {
+    name: 'SelectButton',
+    template:
+      '<div class="p-selectbutton"><slot name="option" :option="modelValue"></slot></div>',
+    props: ['modelValue', 'options', 'allowEmpty']
+  }
+}))
+
+vi.mock('@/components/templates/TemplateWorkflowCard.vue', () => ({
+  default: {
+    template: `
+      <div 
+        class="mock-template-card" 
+        :data-name="template.name"
+        :data-source-module="sourceModule"
+        :data-category-title="categoryTitle"
+        :data-loading="loading"
+        @click="$emit('loadWorkflow', template.name)"
+      ></div>
+    `,
+    props: ['sourceModule', 'categoryTitle', 'loading', 'template'],
+    emits: ['loadWorkflow']
+  }
+}))
+
+vi.mock('@/components/templates/TemplateWorkflowList.vue', () => ({
+  default: {
+    template: '<div class="mock-template-list"></div>',
+    props: ['sourceModule', 'categoryTitle', 'loading', 'templates'],
+    emits: ['loadWorkflow']
+  }
+}))
+
+vi.mock('@vueuse/core', () => ({
+  useLocalStorage: () => 'grid'
+}))
+
+describe('TemplateWorkflowView', () => {
+  const createTemplate = (name: string): TemplateInfo => ({
+    name,
+    mediaType: 'image',
+    mediaSubtype: 'png',
+    thumbnailVariant: 'default',
+    description: `Description for ${name}`
+  })
+
+  const mountView = (props = {}) => {
+    return mount(TemplateWorkflowView, {
+      props: {
+        title: 'Test Templates',
+        sourceModule: 'default',
+        categoryTitle: 'Test Category',
+        templates: [
+          createTemplate('template-1'),
+          createTemplate('template-2'),
+          createTemplate('template-3')
+        ],
+        loading: null,
+        ...props
+      }
+    })
+  }
+
+  it('renders template cards for each template', () => {
+    const wrapper = mountView()
+    const cards = wrapper.findAll('.mock-template-card')
+
+    expect(cards.length).toBe(3)
+    expect(cards[0].attributes('data-name')).toBe('template-1')
+    expect(cards[1].attributes('data-name')).toBe('template-2')
+    expect(cards[2].attributes('data-name')).toBe('template-3')
+  })
+
+  it('emits loadWorkflow event when clicked', async () => {
+    const wrapper = mountView()
+    const card = wrapper.find('.mock-template-card')
+
+    await card.trigger('click')
+
+    expect(wrapper.emitted()).toHaveProperty('loadWorkflow')
+    // Check that the emitted event contains the template name
+    const emitted = wrapper.emitted('loadWorkflow')
+    expect(emitted).toBeTruthy()
+    expect(emitted?.[0][0]).toBe('template-1')
+  })
+
+  it('passes correct props to template cards', () => {
+    const wrapper = mountView({
+      sourceModule: 'custom',
+      categoryTitle: 'Custom Category'
+    })
+
+    const card = wrapper.find('.mock-template-card')
+    expect(card.exists()).toBe(true)
+    expect(card.attributes('data-source-module')).toBe('custom')
+    expect(card.attributes('data-category-title')).toBe('Custom Category')
+  })
+
+  it('applies loading state correctly to cards', () => {
+    const wrapper = mountView({
+      loading: 'template-2'
+    })
+
+    const cards = wrapper.findAll('.mock-template-card')
+
+    // Only the second card should have loading=true since loading="template-2"
+    expect(cards[0].attributes('data-loading')).toBe('false')
+    expect(cards[1].attributes('data-loading')).toBe('true')
+    expect(cards[2].attributes('data-loading')).toBe('false')
+  })
+})

src/components/templates/TemplateWorkflowView.vue

@@ -34,7 +34,7 @@
 
     <template #grid="{ items }">
       <div
-        class="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] auto-rows-fr gap-8 justify-items-center"
+        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"

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

@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue'
+
+vi.mock('@/components/templates/thumbnails/BaseThumbnail.vue', () => ({
+  default: {
+    name: 'BaseThumbnail',
+    template: '<div class="base-thumbnail"><slot /></div>'
+  }
+}))
+
+describe('AudioThumbnail', () => {
+  const mountThumbnail = (props = {}) => {
+    return mount(AudioThumbnail, {
+      props: {
+        src: '/test-audio.mp3',
+        ...props
+      }
+    })
+  }
+
+  it('renders an audio element with correct src', () => {
+    const wrapper = mountThumbnail()
+    const audio = wrapper.find('audio')
+    expect(audio.exists()).toBe(true)
+    expect(audio.attributes('src')).toBe('/test-audio.mp3')
+  })
+
+  it('uses BaseThumbnail as container', () => {
+    const wrapper = mountThumbnail()
+    const baseThumbnail = wrapper.findComponent({ name: 'BaseThumbnail' })
+    expect(baseThumbnail.exists()).toBe(true)
+  })
+})

src/components/templates/thumbnails/AudioThumbnail.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseThumbnail>
-    <div class="w-64 h-64 flex items-center justify-center p-4">
+    <div class="w-full h-full flex items-center justify-center p-4">
       <audio controls class="w-full relative" :src="src" @click.stop />
     </div>
   </BaseThumbnail>

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

@@ -0,0 +1,66 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
+
+vi.mock('@vueuse/core', () => ({
+  useEventListener: vi.fn()
+}))
+
+describe('BaseThumbnail', () => {
+  const mountThumbnail = (props = {}, slots = {}) => {
+    return mount(BaseThumbnail, {
+      props,
+      slots: {
+        default: '<img src="/test.jpg" alt="test" />',
+        ...slots
+      }
+    })
+  }
+
+  it('renders slot content', () => {
+    const wrapper = mountThumbnail()
+    expect(wrapper.find('img').exists()).toBe(true)
+  })
+
+  it('applies hover zoom with correct style', () => {
+    const wrapper = mountThumbnail({ isHovered: true })
+    const contentDiv = wrapper.find('.transform-gpu')
+    expect(contentDiv.attributes('style')).toContain('transform')
+    expect(contentDiv.attributes('style')).toContain('scale')
+  })
+
+  it('applies custom hover zoom value', () => {
+    const wrapper = mountThumbnail({ hoverZoom: 10, isHovered: true })
+    const contentDiv = wrapper.find('.transform-gpu')
+    expect(contentDiv.attributes('style')).toContain('scale(1.1)')
+  })
+
+  it('does not apply scale when not hovered', () => {
+    const wrapper = mountThumbnail({ isHovered: false })
+    const contentDiv = wrapper.find('.transform-gpu')
+    expect(contentDiv.attributes('style')).toBeUndefined()
+  })
+
+  it('shows error state when image fails to load', async () => {
+    const wrapper = mountThumbnail()
+    const vm = wrapper.vm as any
+
+    // Manually set error since useEventListener is mocked
+    vm.error = true
+    await nextTick()
+
+    expect(wrapper.find('.pi-file').exists()).toBe(true)
+    expect(wrapper.find('.transform-gpu').exists()).toBe(false)
+  })
+
+  it('applies transition classes to content', () => {
+    const wrapper = mountThumbnail()
+    const contentDiv = wrapper.find('.transform-gpu')
+    expect(contentDiv.classes()).toContain('transform-gpu')
+    expect(contentDiv.classes()).toContain('transition-transform')
+    expect(contentDiv.classes()).toContain('duration-1000')
+    expect(contentDiv.classes()).toContain('ease-out')
+  })
+})

src/components/templates/thumbnails/BaseThumbnail.vue

@@ -3,7 +3,7 @@
     <div
       v-if="!error"
       ref="contentRef"
-      class="w-64 h-64 object-cover transform-gpu transition-transform duration-1000 ease-out"
+      class="w-full h-full transform-gpu transition-transform duration-1000 ease-out"
       :style="
         isHovered ? { transform: `scale(${1 + hoverZoom / 100})` } : undefined
       "

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

@@ -0,0 +1,74 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import CompareSliderThumbnail from '@/components/templates/thumbnails/CompareSliderThumbnail.vue'
+
+vi.mock('@/components/templates/thumbnails/BaseThumbnail.vue', () => ({
+  default: {
+    name: 'BaseThumbnail',
+    template: '<div class="base-thumbnail"><slot /></div>',
+    props: ['isHovered']
+  }
+}))
+
+vi.mock('@vueuse/core', () => ({
+  useMouseInElement: () => ({
+    elementX: ref(50),
+    elementWidth: ref(100),
+    isOutside: ref(false)
+  })
+}))
+
+describe('CompareSliderThumbnail', () => {
+  const mountThumbnail = (props = {}) => {
+    return mount(CompareSliderThumbnail, {
+      props: {
+        baseImageSrc: '/base-image.jpg',
+        overlayImageSrc: '/overlay-image.jpg',
+        alt: 'Comparison Image',
+        isVideo: false,
+        ...props
+      }
+    })
+  }
+
+  it('renders both base and overlay images', () => {
+    const wrapper = mountThumbnail()
+    const images = wrapper.findAll('img')
+    expect(images.length).toBe(2)
+    expect(images[0].attributes('src')).toBe('/base-image.jpg')
+    expect(images[1].attributes('src')).toBe('/overlay-image.jpg')
+  })
+
+  it('applies correct alt text to both images', () => {
+    const wrapper = mountThumbnail({ alt: 'Custom Alt Text' })
+    const images = wrapper.findAll('img')
+    expect(images[0].attributes('alt')).toBe('Custom Alt Text')
+    expect(images[1].attributes('alt')).toBe('Custom Alt Text')
+  })
+
+  it('applies clip-path style to overlay image', () => {
+    const wrapper = mountThumbnail()
+    const overlay = wrapper.findAll('img')[1]
+    expect(overlay.attributes('style')).toContain('clip-path')
+  })
+
+  it('renders slider divider', () => {
+    const wrapper = mountThumbnail()
+    const divider = wrapper.find('.bg-white\\/30')
+    expect(divider.exists()).toBe(true)
+  })
+
+  it('positions slider based on default value', () => {
+    const wrapper = mountThumbnail()
+    const divider = wrapper.find('.bg-white\\/30')
+    expect(divider.attributes('style')).toContain('left: 21%')
+  })
+
+  it('passes isHovered prop to BaseThumbnail', () => {
+    const wrapper = mountThumbnail({ isHovered: true })
+    const baseThumbnail = wrapper.findComponent({ name: 'BaseThumbnail' })
+    expect(baseThumbnail.props('isHovered')).toBe(true)
+  })
+})

src/components/templates/thumbnails/CompareSliderThumbnail.vue

@@ -1,11 +1,23 @@
 <template>
   <BaseThumbnail :is-hovered="isHovered">
-    <img :src="baseImageSrc" :alt="alt" class="w-full h-full object-cover" />
+    <img
+      :src="baseImageSrc"
+      :alt="alt"
+      :class="
+        isVideoType
+          ? 'w-full h-full object-cover'
+          : 'max-w-full max-h-64 object-contain'
+      "
+    />
     <div ref="containerRef" class="absolute inset-0">
       <img
         :src="overlayImageSrc"
         :alt="alt"
-        class="w-full h-full object-cover"
+        :class="
+          isVideoType
+            ? 'w-full h-full object-cover'
+            : 'max-w-full max-h-64 object-contain'
+        "
         :style="{
           clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`
         }"
@@ -28,13 +40,20 @@ import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
 
 const SLIDER_START_POSITION = 21
 
-const { isHovered } = defineProps<{
+const { baseImageSrc, overlayImageSrc, isHovered, isVideo } = defineProps<{
   baseImageSrc: string
   overlayImageSrc: string
   alt: string
   isHovered?: boolean
+  isVideo?: boolean
 }>()
 
+const isVideoType =
+  isVideo ||
+  baseImageSrc?.toLowerCase().endsWith('.webp') ||
+  overlayImageSrc?.toLowerCase().endsWith('.webp') ||
+  false
+
 const sliderPosition = ref(SLIDER_START_POSITION)
 const containerRef = ref<HTMLElement | null>(null)
 

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

@@ -0,0 +1,102 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+import DefaultThumbnail from '@/components/templates/thumbnails/DefaultThumbnail.vue'
+
+vi.mock('@/components/templates/thumbnails/BaseThumbnail.vue', () => ({
+  default: {
+    name: 'BaseThumbnail',
+    template: '<div class="base-thumbnail"><slot /></div>',
+    props: ['hoverZoom', 'isHovered']
+  }
+}))
+
+describe('DefaultThumbnail', () => {
+  const mountThumbnail = (props = {}) => {
+    return mount(DefaultThumbnail, {
+      props: {
+        src: '/test-image.jpg',
+        alt: 'Test Image',
+        hoverZoom: 5,
+        ...props
+      }
+    })
+  }
+
+  it('renders image with correct src and alt', () => {
+    const wrapper = mountThumbnail()
+    const img = wrapper.find('img')
+    expect(img.attributes('src')).toBe('/test-image.jpg')
+    expect(img.attributes('alt')).toBe('Test Image')
+  })
+
+  it('applies scale transform when hovered', () => {
+    const wrapper = mountThumbnail({
+      isHovered: true,
+      hoverZoom: 10
+    })
+    const img = wrapper.find('img')
+    expect(img.attributes('style')).toContain('scale(1.1)')
+  })
+
+  it('does not apply scale transform when not hovered', () => {
+    const wrapper = mountThumbnail({
+      isHovered: false
+    })
+    const img = wrapper.find('img')
+    expect(img.attributes('style')).toBeUndefined()
+  })
+
+  it('applies video styling for video type', () => {
+    const wrapper = mountThumbnail({
+      isVideo: true
+    })
+    const img = wrapper.find('img')
+    expect(img.classes()).toContain('w-full')
+    expect(img.classes()).toContain('h-full')
+    expect(img.classes()).toContain('object-cover')
+  })
+
+  it('applies image styling for non-video type', () => {
+    const wrapper = mountThumbnail({
+      isVideo: false
+    })
+    const img = wrapper.find('img')
+    expect(img.classes()).toContain('max-w-full')
+    expect(img.classes()).toContain('object-contain')
+  })
+
+  it('applies correct styling for webp images', () => {
+    const wrapper = mountThumbnail({
+      src: '/test-video.webp',
+      isVideo: true
+    })
+    const img = wrapper.find('img')
+    expect(img.classes()).toContain('object-cover')
+  })
+
+  it('image is not draggable', () => {
+    const wrapper = mountThumbnail()
+    const img = wrapper.find('img')
+    expect(img.attributes('draggable')).toBe('false')
+  })
+
+  it('applies transition classes', () => {
+    const wrapper = mountThumbnail()
+    const img = wrapper.find('img')
+    expect(img.classes()).toContain('transform-gpu')
+    expect(img.classes()).toContain('transition-transform')
+    expect(img.classes()).toContain('duration-300')
+    expect(img.classes()).toContain('ease-out')
+  })
+
+  it('passes correct props to BaseThumbnail', () => {
+    const wrapper = mountThumbnail({
+      hoverZoom: 20,
+      isHovered: true
+    })
+    const baseThumbnail = wrapper.findComponent({ name: 'BaseThumbnail' })
+    expect(baseThumbnail.props('hoverZoom')).toBe(20)
+    expect(baseThumbnail.props('isHovered')).toBe(true)
+  })
+})

src/components/templates/thumbnails/DefaultThumbnail.vue

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

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

@@ -0,0 +1,82 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+import HoverDissolveThumbnail from '@/components/templates/thumbnails/HoverDissolveThumbnail.vue'
+
+vi.mock('@/components/templates/thumbnails/BaseThumbnail.vue', () => ({
+  default: {
+    name: 'BaseThumbnail',
+    template: '<div class="base-thumbnail"><slot /></div>',
+    props: ['isHovered']
+  }
+}))
+
+describe('HoverDissolveThumbnail', () => {
+  const mountThumbnail = (props = {}) => {
+    return mount(HoverDissolveThumbnail, {
+      props: {
+        baseImageSrc: '/base-image.jpg',
+        overlayImageSrc: '/overlay-image.jpg',
+        alt: 'Dissolve Image',
+        isHovered: false,
+        isVideo: false,
+        ...props
+      }
+    })
+  }
+
+  it('renders both base and overlay images', () => {
+    const wrapper = mountThumbnail()
+    const images = wrapper.findAll('img')
+    expect(images.length).toBe(2)
+    expect(images[0].attributes('src')).toBe('/base-image.jpg')
+    expect(images[1].attributes('src')).toBe('/overlay-image.jpg')
+  })
+
+  it('applies correct alt text to both images', () => {
+    const wrapper = mountThumbnail({ alt: 'Custom Alt Text' })
+    const images = wrapper.findAll('img')
+    expect(images[0].attributes('alt')).toBe('Custom Alt Text')
+    expect(images[1].attributes('alt')).toBe('Custom Alt Text')
+  })
+
+  it('makes overlay image visible when hovered', () => {
+    const wrapper = mountThumbnail({ isHovered: true })
+    const overlayImage = wrapper.findAll('img')[1]
+    expect(overlayImage.classes()).toContain('opacity-100')
+    expect(overlayImage.classes()).not.toContain('opacity-0')
+  })
+
+  it('makes overlay image hidden when not hovered', () => {
+    const wrapper = mountThumbnail({ isHovered: false })
+    const overlayImage = wrapper.findAll('img')[1]
+    expect(overlayImage.classes()).toContain('opacity-0')
+    expect(overlayImage.classes()).not.toContain('opacity-100')
+  })
+
+  it('passes isHovered prop to BaseThumbnail', () => {
+    const wrapper = mountThumbnail({ isHovered: true })
+    const baseThumbnail = wrapper.findComponent({ name: 'BaseThumbnail' })
+    expect(baseThumbnail.props('isHovered')).toBe(true)
+  })
+
+  it('applies transition classes to overlay image', () => {
+    const wrapper = mountThumbnail()
+    const overlayImage = wrapper.findAll('img')[1]
+    expect(overlayImage.classes()).toContain('transition-opacity')
+    expect(overlayImage.classes()).toContain('duration-300')
+  })
+
+  it('applies correct positioning to both images', () => {
+    const wrapper = mountThumbnail()
+    const images = wrapper.findAll('img')
+
+    // Check base image
+    expect(images[0].classes()).toContain('absolute')
+    expect(images[0].classes()).toContain('inset-0')
+
+    // Check overlay image
+    expect(images[1].classes()).toContain('absolute')
+    expect(images[1].classes()).toContain('inset-0')
+  })
+})

src/components/templates/thumbnails/HoverDissolveThumbnail.vue

@@ -5,14 +5,24 @@
         :src="baseImageSrc"
         :alt="alt"
         draggable="false"
-        class="absolute inset-0 w-64 h-64 object-cover"
+        class="absolute inset-0"
+        :class="
+          isVideoType
+            ? 'w-full h-full object-cover'
+            : 'max-w-full max-h-64 object-contain'
+        "
       />
       <img
         :src="overlayImageSrc"
         :alt="alt"
         draggable="false"
-        class="absolute inset-0 w-64 h-64 object-cover transition-opacity duration-300"
-        :class="{ 'opacity-100': isHovered, 'opacity-0': !isHovered }"
+        class="absolute inset-0 transition-opacity duration-300"
+        :class="[
+          isVideoType
+            ? 'w-full h-full object-cover'
+            : 'max-w-full max-h-64 object-contain',
+          { 'opacity-100': isHovered, 'opacity-0': !isHovered }
+        ]"
       />
     </div>
   </BaseThumbnail>
@@ -21,10 +31,17 @@
 <script setup lang="ts">
 import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
 
-defineProps<{
+const { baseImageSrc, overlayImageSrc, isVideo } = defineProps<{
   baseImageSrc: string
   overlayImageSrc: string
   alt: string
   isHovered: boolean
+  isVideo?: boolean
 }>()
+
+const isVideoType =
+  isVideo ||
+  baseImageSrc?.toLowerCase().endsWith('.webp') ||
+  overlayImageSrc?.toLowerCase().endsWith('.webp') ||
+  false
 </script>

src/components/topbar/CurrentUserButton.spec.ts

@@ -0,0 +1,122 @@
+import { VueWrapper, mount } from '@vue/test-utils'
+import Button from 'primevue/button'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { h } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json'
+
+import CurrentUserButton from './CurrentUserButton.vue'
+
+// Mock all firebase modules
+vi.mock('firebase/app', () => ({
+  initializeApp: vi.fn(),
+  getApp: vi.fn()
+}))
+
+vi.mock('firebase/auth', () => ({
+  getAuth: vi.fn(),
+  setPersistence: vi.fn(),
+  browserLocalPersistence: {},
+  onAuthStateChanged: vi.fn(),
+  signInWithEmailAndPassword: vi.fn(),
+  signOut: vi.fn()
+}))
+
+// Mock pinia
+vi.mock('pinia')
+
+// Mock the useCurrentUser composable
+vi.mock('@/composables/auth/useCurrentUser', () => ({
+  useCurrentUser: vi.fn(() => ({
+    isLoggedIn: true,
+    userPhotoUrl: 'https://example.com/avatar.jpg',
+    userDisplayName: 'Test User',
+    userEmail: 'test@example.com'
+  }))
+}))
+
+// Mock the UserAvatar component
+vi.mock('@/components/common/UserAvatar.vue', () => ({
+  default: {
+    name: 'UserAvatarMock',
+    render() {
+      return h('div', 'Avatar')
+    }
+  }
+}))
+
+// Mock the CurrentUserPopover component
+vi.mock('./CurrentUserPopover.vue', () => ({
+  default: {
+    name: 'CurrentUserPopoverMock',
+    render() {
+      return h('div', 'Popover Content')
+    },
+    emits: ['close']
+  }
+}))
+
+describe('CurrentUserButton', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const mountComponent = (): VueWrapper => {
+    const i18n = createI18n({
+      legacy: false,
+      locale: 'en',
+      messages: { en: enMessages }
+    })
+
+    return mount(CurrentUserButton, {
+      global: {
+        plugins: [i18n],
+        stubs: {
+          // Use shallow mount for popover to make testing easier
+          Popover: {
+            template: '<div><slot></slot></div>',
+            methods: {
+              toggle: vi.fn(),
+              hide: vi.fn()
+            }
+          },
+          Button: true
+        }
+      }
+    })
+  }
+
+  it('renders correctly when user is logged in', () => {
+    const wrapper = mountComponent()
+    expect(wrapper.findComponent(Button).exists()).toBe(true)
+  })
+
+  it('toggles popover on button click', async () => {
+    const wrapper = mountComponent()
+    const popoverToggleSpy = vi.fn()
+
+    // Override the ref with a mock implementation
+    // @ts-expect-error - accessing internal Vue component vm
+    wrapper.vm.popover = { toggle: popoverToggleSpy }
+
+    await wrapper.findComponent(Button).trigger('click')
+    expect(popoverToggleSpy).toHaveBeenCalled()
+  })
+
+  it('hides popover when closePopover is called', async () => {
+    const wrapper = mountComponent()
+
+    // Replace the popover.hide method with a spy
+    const popoverHideSpy = vi.fn()
+    // @ts-expect-error - accessing internal Vue component vm
+    wrapper.vm.popover = { hide: popoverHideSpy }
+
+    // Directly call the closePopover method through the component instance
+    // @ts-expect-error - accessing internal Vue component vm
+    wrapper.vm.closePopover()
+
+    // Verify that popover.hide was called
+    expect(popoverHideSpy).toHaveBeenCalled()
+  })
+})

src/components/topbar/CurrentUserButton.vue

@@ -19,7 +19,7 @@
     </Button>
 
     <Popover ref="popover" :show-arrow="false">
-      <CurrentUserPopover />
+      <CurrentUserPopover @close="closePopover" />
     </Popover>
   </div>
 </template>
@@ -40,4 +40,8 @@ const popover = ref<InstanceType<typeof Popover> | null>(null)
 const photoURL = computed<string | undefined>(
   () => userPhotoUrl.value ?? undefined
 )
+
+const closePopover = () => {
+  popover.value?.hide()
+}
 </script>

src/components/topbar/CurrentUserPopover.spec.ts

@@ -0,0 +1,173 @@
+import { VueWrapper, mount } from '@vue/test-utils'
+import Button from 'primevue/button'
+import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import { h } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json'
+
+import CurrentUserPopover from './CurrentUserPopover.vue'
+
+// Mock all firebase modules
+vi.mock('firebase/app', () => ({
+  initializeApp: vi.fn(),
+  getApp: vi.fn()
+}))
+
+vi.mock('firebase/auth', () => ({
+  getAuth: vi.fn(),
+  setPersistence: vi.fn(),
+  browserLocalPersistence: {},
+  onAuthStateChanged: vi.fn(),
+  signInWithEmailAndPassword: vi.fn(),
+  signOut: vi.fn()
+}))
+
+// Mock pinia
+vi.mock('pinia')
+
+// Mock showSettingsDialog and showTopUpCreditsDialog
+const mockShowSettingsDialog = vi.fn()
+const mockShowTopUpCreditsDialog = vi.fn()
+
+// Mock window.open
+const originalWindowOpen = window.open
+beforeEach(() => {
+  window.open = vi.fn()
+})
+
+afterAll(() => {
+  window.open = originalWindowOpen
+})
+
+// Mock the useCurrentUser composable
+vi.mock('@/composables/auth/useCurrentUser', () => ({
+  useCurrentUser: vi.fn(() => ({
+    userPhotoUrl: 'https://example.com/avatar.jpg',
+    userDisplayName: 'Test User',
+    userEmail: 'test@example.com'
+  }))
+}))
+
+// Mock the useFirebaseAuthActions composable
+vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
+  useFirebaseAuthActions: vi.fn(() => ({
+    fetchBalance: vi.fn().mockResolvedValue(undefined)
+  }))
+}))
+
+// Mock the dialog service
+vi.mock('@/services/dialogService', () => ({
+  useDialogService: vi.fn(() => ({
+    showSettingsDialog: mockShowSettingsDialog,
+    showTopUpCreditsDialog: mockShowTopUpCreditsDialog
+  }))
+}))
+
+// Mock UserAvatar component
+vi.mock('@/components/common/UserAvatar.vue', () => ({
+  default: {
+    name: 'UserAvatarMock',
+    render() {
+      return h('div', 'Avatar')
+    }
+  }
+}))
+
+// Mock UserCredit component
+vi.mock('@/components/common/UserCredit.vue', () => ({
+  default: {
+    name: 'UserCreditMock',
+    render() {
+      return h('div', 'Credit: 100')
+    }
+  }
+}))
+
+describe('CurrentUserPopover', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const mountComponent = (): VueWrapper => {
+    const i18n = createI18n({
+      legacy: false,
+      locale: 'en',
+      messages: { en: enMessages }
+    })
+
+    return mount(CurrentUserPopover, {
+      global: {
+        plugins: [i18n],
+        stubs: {
+          Divider: true,
+          Button: true
+        }
+      }
+    })
+  }
+
+  it('renders user information correctly', () => {
+    const wrapper = mountComponent()
+
+    expect(wrapper.text()).toContain('Test User')
+    expect(wrapper.text()).toContain('test@example.com')
+  })
+
+  it('opens user settings and emits close event when settings button is clicked', async () => {
+    const wrapper = mountComponent()
+
+    // Find all buttons and get the settings button (first one)
+    const buttons = wrapper.findAllComponents(Button)
+    const settingsButton = buttons[0]
+
+    // Click the settings button
+    await settingsButton.trigger('click')
+
+    // Verify showSettingsDialog was called with 'user'
+    expect(mockShowSettingsDialog).toHaveBeenCalledWith('user')
+
+    // Verify close event was emitted
+    expect(wrapper.emitted('close')).toBeTruthy()
+    expect(wrapper.emitted('close')!.length).toBe(1)
+  })
+
+  it('opens API pricing docs and emits close event when API pricing button is clicked', async () => {
+    const wrapper = mountComponent()
+
+    // Find all buttons and get the API pricing button (second one)
+    const buttons = wrapper.findAllComponents(Button)
+    const apiPricingButton = buttons[1]
+
+    // Click the API pricing button
+    await apiPricingButton.trigger('click')
+
+    // Verify window.open was called with the correct URL
+    expect(window.open).toHaveBeenCalledWith(
+      'https://docs.comfy.org/tutorials/api-nodes/pricing',
+      '_blank'
+    )
+
+    // Verify close event was emitted
+    expect(wrapper.emitted('close')).toBeTruthy()
+    expect(wrapper.emitted('close')!.length).toBe(1)
+  })
+
+  it('opens top-up dialog and emits close event when top-up button is clicked', async () => {
+    const wrapper = mountComponent()
+
+    // Find all buttons and get the top-up button (last one)
+    const buttons = wrapper.findAllComponents(Button)
+    const topUpButton = buttons[buttons.length - 1]
+
+    // Click the top-up button
+    await topUpButton.trigger('click')
+
+    // Verify showTopUpCreditsDialog was called
+    expect(mockShowTopUpCreditsDialog).toHaveBeenCalled()
+
+    // Verify close event was emitted
+    expect(wrapper.emitted('close')).toBeTruthy()
+    expect(wrapper.emitted('close')!.length).toBe(1)
+  })
+})

src/components/topbar/CurrentUserPopover.vue

@@ -72,20 +72,27 @@ import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useDialogService } from '@/services/dialogService'
 
+const emit = defineEmits<{
+  close: []
+}>()
+
 const { userDisplayName, userEmail, userPhotoUrl } = useCurrentUser()
 const authActions = useFirebaseAuthActions()
 const dialogService = useDialogService()
 
 const handleOpenUserSettings = () => {
   dialogService.showSettingsDialog('user')
+  emit('close')
 }
 
 const handleTopUp = () => {
   dialogService.showTopUpCreditsDialog()
+  emit('close')
 }
 
 const handleOpenApiPricing = () => {
   window.open('https://docs.comfy.org/tutorials/api-nodes/pricing', '_blank')
+  emit('close')
 }
 
 onMounted(() => {

src/components/topbar/SecondRowWorkflowTabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute top-0 left-0 w-auto max-w-full">
+  <div class="w-auto max-w-full">
     <WorkflowTabs />
   </div>
 </template>

src/composables/README.md

@@ -0,0 +1,310 @@
+# Composables
+
+This directory contains Vue composables for the ComfyUI frontend application. Composables are reusable pieces of logic that encapsulate stateful functionality and can be shared across components.
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Composable Architecture](#composable-architecture)
+- [Composable Categories](#composable-categories)
+- [Usage Guidelines](#usage-guidelines)
+- [VueUse Library](#vueuse-library)
+- [Development Guidelines](#development-guidelines)
+- [Common Patterns](#common-patterns)
+
+## Overview
+
+Vue composables are a core part of Vue 3's Composition API and provide a way to extract and reuse stateful logic between multiple components. In ComfyUI, composables are used to encapsulate behaviors like:
+
+- State management
+- DOM interactions
+- Feature-specific functionality
+- UI behaviors
+- Data fetching
+
+Composables enable a more modular and functional approach to building components, allowing for better code reuse and separation of concerns. They help keep your component code cleaner by extracting complex logic into separate, reusable functions.
+
+As described in the [Vue.js documentation](https://vuejs.org/guide/reusability/composables.html), composables are:
+> Functions that leverage Vue's Composition API to encapsulate and reuse stateful logic.
+
+## Composable Architecture
+
+The composable architecture in ComfyUI follows these principles:
+
+1. **Single Responsibility**: Each composable should focus on a specific concern
+2. **Composition**: Composables can use other composables
+3. **Reactivity**: Composables leverage Vue's reactivity system
+4. **Reusability**: Composables are designed to be used across multiple components
+
+The following diagram shows how composables fit into the application architecture:
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                    Vue Components                        │
+│                                                         │
+│     ┌─────────────┐     ┌─────────────┐                 │
+│     │ Component A │     │ Component B │                 │
+│     └──────┬──────┘     └──────┬──────┘                 │
+│            │                   │                        │
+└────────────┼───────────────────┼────────────────────────┘
+             │                   │
+             ▼                   ▼
+┌────────────┴───────────────────┴────────────────────────┐
+│                    Composables                           │
+│                                                         │
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐      │
+│  │ useFeatureA │  │ useFeatureB │  │ useFeatureC │      │
+│  └──────┬──────┘  └──────┬──────┘  └──────┬──────┘      │
+│         │                │                │             │
+└─────────┼────────────────┼────────────────┼─────────────┘
+          │                │                │
+          ▼                ▼                ▼
+┌─────────┴────────────────┴────────────────┴─────────────┐
+│                    Services & Stores                     │
+└─────────────────────────────────────────────────────────┘
+```
+
+## Composable Categories
+
+ComfyUI's composables are organized into several categories:
+
+### Auth
+
+Composables for authentication and user management:
+- `useCurrentUser` - Provides access to the current user information
+- `useFirebaseAuthActions` - Handles Firebase authentication operations
+
+### Element
+
+Composables for DOM and element interactions:
+- `useAbsolutePosition` - Handles element positioning
+- `useDomClipping` - Manages clipping of DOM elements
+- `useResponsiveCollapse` - Manages responsive collapsing of elements
+
+### Node
+
+Composables for node-specific functionality:
+- `useNodeBadge` - Handles node badge display and interaction
+- `useNodeImage` - Manages node image preview
+- `useNodeDragAndDrop` - Handles drag and drop for nodes
+- `useNodeChatHistory` - Manages chat history for nodes
+
+### Settings
+
+Composables for settings management:
+- `useSettingSearch` - Provides search functionality for settings
+- `useSettingUI` - Manages settings UI interactions
+
+### Sidebar
+
+Composables for sidebar functionality:
+- `useNodeLibrarySidebarTab` - Manages the node library sidebar tab
+- `useQueueSidebarTab` - Manages the queue sidebar tab
+- `useWorkflowsSidebarTab` - Manages the workflows sidebar tab
+
+### Widgets
+
+Composables for widget functionality:
+- `useBooleanWidget` - Manages boolean widget interactions
+- `useComboWidget` - Manages combo box widget interactions
+- `useFloatWidget` - Manages float input widget interactions
+- `useImagePreviewWidget` - Manages image preview widget
+
+## Usage Guidelines
+
+When using composables in components, follow these guidelines:
+
+1. **Import and call** composables at the top level of the `setup` function
+2. **Destructure returned values** to use in your component
+3. **Respect reactivity** by not destructuring reactive objects
+4. **Handle cleanup** by using `onUnmounted` when necessary
+5. **Use VueUse** for common functionality instead of writing from scratch
+
+Example usage:
+
+```vue
+<template>
+  <div 
+    :class="{ 'dragging': isDragging }" 
+    @mousedown="startDrag"
+    @mouseup="endDrag"
+  >
+    <img v-if="imageUrl" :src="imageUrl" alt="Node preview" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useNodeDragAndDrop } from '@/composables/node/useNodeDragAndDrop';
+import { useNodeImage } from '@/composables/node/useNodeImage';
+
+// Use composables at the top level
+const { isDragging, startDrag, endDrag } = useNodeDragAndDrop();
+const { imageUrl, loadImage } = useNodeImage();
+
+// Use returned values in your component
+</script>
+```
+
+## VueUse Library
+
+ComfyUI leverages the [VueUse](https://vueuse.org/) library, which provides a collection of essential Vue Composition API utilities. Instead of implementing common functionality from scratch, prefer using VueUse composables for:
+
+- DOM event handling (`useEventListener`, `useMouseInElement`)
+- Element measurements (`useElementBounding`, `useElementSize`)
+- Asynchronous operations (`useAsyncState`, `useFetch`)
+- Animation and timing (`useTransition`, `useTimeout`, `useInterval`)
+- Browser APIs (`useLocalStorage`, `useClipboard`)
+- Sensors (`useDeviceMotion`, `useDeviceOrientation`)
+- State management (`createGlobalState`, `useStorage`)
+- ...and [more](https://vueuse.org/functions.html)
+
+Examples:
+
+```js
+// Instead of manually adding/removing event listeners
+import { useEventListener } from '@vueuse/core'
+
+useEventListener(window, 'resize', handleResize)
+
+// Instead of manually tracking element measurements
+import { useElementBounding } from '@vueuse/core'
+
+const { width, height, top, left } = useElementBounding(elementRef)
+
+// Instead of manual async state management
+import { useAsyncState } from '@vueuse/core'
+
+const { state, isReady, isLoading } = useAsyncState(
+  fetch('https://api.example.com/data').then(r => r.json()),
+  { data: [] }
+)
+```
+
+For a complete list of available functions, see the [VueUse documentation](https://vueuse.org/functions.html).
+
+## Development Guidelines
+
+When creating or modifying composables, follow these best practices:
+
+1. **Name with `use` prefix**: All composables should start with "use"
+2. **Return an object**: Composables should return an object with named properties/methods
+3. **Handle cleanup**: Use `onUnmounted` to clean up resources
+4. **Document parameters and return values**: Add JSDoc comments
+5. **Test composables**: Write unit tests for composable functionality
+6. **Use VueUse**: Leverage VueUse composables instead of reimplementing common functionality
+7. **Implement proper cleanup**: Cancel debounced functions, pending requests, and clear maps
+8. **Use watchDebounced/watchThrottled**: For performance-sensitive reactive operations
+
+### Composable Template
+
+Here's a template for creating a new composable:
+
+```typescript
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+
+/**
+ * Composable for [functionality description]
+ * @param options Configuration options
+ * @returns Object containing state and methods
+ */
+export function useExample(options = {}) {
+  // State
+  const state = ref({
+    // Initial state
+  });
+
+  // Computed values
+  const derivedValue = computed(() => {
+    // Compute from state
+    return state.value.someProperty;
+  });
+
+  // Methods
+  function doSomething() {
+    // Implementation
+  }
+
+  // Lifecycle hooks
+  onMounted(() => {
+    // Setup
+  });
+
+  onUnmounted(() => {
+    // Cleanup
+  });
+
+  // Return exposed state and methods
+  return {
+    state,
+    derivedValue,
+    doSomething
+  };
+}
+```
+
+## Common Patterns
+
+Composables in ComfyUI frequently use these patterns:
+
+### State Management
+
+```typescript
+export function useState() {
+  const count = ref(0);
+  
+  function increment() {
+    count.value++;
+  }
+  
+  return {
+    count,
+    increment
+  };
+}
+```
+
+### Event Handling with VueUse
+
+```typescript
+import { useEventListener } from '@vueuse/core';
+
+export function useKeyPress(key) {
+  const isPressed = ref(false);
+  
+  useEventListener('keydown', (e) => {
+    if (e.key === key) {
+      isPressed.value = true;
+    }
+  });
+  
+  useEventListener('keyup', (e) => {
+    if (e.key === key) {
+      isPressed.value = false;
+    }
+  });
+  
+  return { isPressed };
+}
+```
+
+### Fetch & Load with VueUse
+
+```typescript
+import { useAsyncState } from '@vueuse/core';
+
+export function useFetchData(url) {
+  const { state: data, isLoading, error, execute: refresh } = useAsyncState(
+    async () => {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error('Failed to fetch data');
+      return response.json();
+    },
+    null,
+    { immediate: true }
+  );
+  
+  return { data, isLoading, error, refresh };
+}
+```
+
+For more information on Vue composables, refer to the [Vue.js Composition API documentation](https://vuejs.org/guide/reusability/composables.html) and the [VueUse documentation](https://vueuse.org/).

src/composables/node/useNodeBadge.ts

@@ -6,12 +6,14 @@ import {
 import _ from 'lodash'
 import { computed, onMounted, watch } from 'vue'
 
+import { useNodePricing } from '@/composables/node/useNodePricing'
 import { app } from '@/scripts/app'
 import { useExtensionStore } from '@/stores/extensionStore'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { NodeBadgeMode } from '@/types/nodeSource'
+import { adjustColor } from '@/utils/colorUtil'
 
 /**
  * Add LGraphBadge to LGraphNode based on settings.
@@ -41,9 +43,21 @@ export const useNodeBadge = () => {
       ) as NodeBadgeMode
   )
 
-  watch([nodeSourceBadgeMode, nodeIdBadgeMode, nodeLifeCycleBadgeMode], () => {
-    app.graph?.setDirtyCanvas(true, true)
-  })
+  const showApiPricingBadge = computed(() =>
+    settingStore.get('Comfy.NodeBadge.ShowApiPricing')
+  )
+
+  watch(
+    [
+      nodeSourceBadgeMode,
+      nodeIdBadgeMode,
+      nodeLifeCycleBadgeMode,
+      showApiPricingBadge
+    ],
+    () => {
+      app.graph?.setDirtyCanvas(true, true)
+    }
+  )
 
   const nodeDefStore = useNodeDefStore()
   function badgeTextVisible(
@@ -57,6 +71,8 @@ export const useNodeBadge = () => {
   }
 
   onMounted(() => {
+    const nodePricing = useNodePricing()
+
     extensionStore.registerExtension({
       name: 'Comfy.NodeBadge',
       nodeCreated(node: LGraphNode) {
@@ -94,23 +110,32 @@ export const useNodeBadge = () => {
 
         node.badges.push(() => badge.value)
 
-        if (node.constructor.nodeData?.api_node) {
+        if (node.constructor.nodeData?.api_node && showApiPricingBadge.value) {
+          const price = nodePricing.getNodeDisplayPrice(node)
+          // Always add the badge for API nodes, with or without price text
           const creditsBadge = computed(() => {
+            // Use dynamic background color based on the theme
+            const isLightTheme =
+              colorPaletteStore.completedActivePalette.light_theme
             return new LGraphBadge({
-              text: '',
+              text: price,
               iconOptions: {
                 unicode: '\ue96b',
                 fontFamily: 'PrimeIcons',
-                color: '#FABC25',
-                bgColor: '#353535',
+                color: isLightTheme
+                  ? adjustColor('#FABC25', { lightness: 0.5 })
+                  : '#FABC25',
+                bgColor: isLightTheme
+                  ? adjustColor('#654020', { lightness: 0.5 })
+                  : '#654020',
                 fontSize: 8
               },
               fgColor:
                 colorPaletteStore.completedActivePalette.colors.litegraph_base
                   .BADGE_FG_COLOR,
-              bgColor:
-                colorPaletteStore.completedActivePalette.colors.litegraph_base
-                  .BADGE_BG_COLOR
+              bgColor: isLightTheme
+                ? adjustColor('#8D6932', { lightness: 0.5 })
+                : '#8D6932'
             })
           })
 

src/composables/node/useNodeChatHistory.ts

@@ -16,9 +16,6 @@ export function useNodeChatHistory(
 ) {
   const chatHistoryWidget = useChatHistoryWidget(options)
 
-  const findChatHistoryWidget = (node: LGraphNode) =>
-    node.widgets?.find((w) => w.name === CHAT_HISTORY_WIDGET_NAME)
-
   const addChatHistoryWidget = (node: LGraphNode) =>
     chatHistoryWidget(node, {
       name: CHAT_HISTORY_WIDGET_NAME,
@@ -30,9 +27,11 @@ export function useNodeChatHistory(
    * @param node The graph node to show the chat history for
    */
   function showChatHistory(node: LGraphNode) {
-    if (!findChatHistoryWidget(node)) {
-      addChatHistoryWidget(node)
-    }
+    // First remove any existing widget
+    removeChatHistory(node)
+
+    // Then add the widget with new history
+    addChatHistoryWidget(node)
     node.setDirtyCanvas?.(true)
   }
 

src/composables/node/useNodePricing.ts

@@ -0,0 +1,426 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+
+import { ApiNodeCostRecord } from '@/types/apiNodeTypes'
+
+const apiNodeCosts: ApiNodeCostRecord = {
+  FluxProCannyNode: {
+    vendor: 'BFL',
+    nodeName: 'Flux 1: Canny Control Image',
+    pricingParams: '-',
+    pricePerRunRange: '$0.05',
+    displayPrice: '$0.05/Run'
+  },
+  FluxProDepthNode: {
+    vendor: 'BFL',
+    nodeName: 'Flux 1: Depth Control Image',
+    pricingParams: '-',
+    pricePerRunRange: '$0.05',
+    displayPrice: '$0.05/Run'
+  },
+  FluxProExpandNode: {
+    vendor: 'BFL',
+    nodeName: 'Flux 1: Expand Image',
+    pricingParams: '-',
+    pricePerRunRange: '$0.05',
+    rateDocumentationUrl: 'https://docs.bfl.ml/pricing/',
+    displayPrice: '$0.05/Run'
+  },
+  FluxProFillNode: {
+    vendor: 'BFL',
+    nodeName: 'Flux 1: Fill Image',
+    pricingParams: '-',
+    pricePerRunRange: '$0.05',
+    displayPrice: '$0.05/Run'
+  },
+  FluxProUltraImageNode: {
+    vendor: 'BFL',
+    nodeName: 'Flux 1.1: [pro] Ultra Image',
+    pricingParams: '-',
+    pricePerRunRange: '$0.06',
+    displayPrice: '$0.06/Run'
+  },
+  IdeogramV1: {
+    vendor: 'Ideogram',
+    nodeName: 'Ideogram V1',
+    pricingParams: '-',
+    pricePerRunRange: '$0.06',
+    rateDocumentationUrl: 'https://about.ideogram.ai/api-pricing',
+    displayPrice: '$0.06/Run'
+  },
+  IdeogramV2: {
+    vendor: 'Ideogram',
+    nodeName: 'Ideogram V2',
+    pricingParams: '-',
+    pricePerRunRange: '$0.08',
+    displayPrice: '$0.08/Run'
+  },
+  IdeogramV3: {
+    vendor: 'Ideogram',
+    nodeName: 'Ideogram V3',
+    pricingParams: 'rendering_speed',
+    pricePerRunRange: 'dynamic',
+    displayPrice: 'Variable pricing (low to medium)'
+  },
+  KlingCameraControlI2VNode: {
+    vendor: 'Kling',
+    nodeName: 'Kling Image to Video (Camera Control)',
+    pricingParams: '-',
+    pricePerRunRange: '$0.49',
+    displayPrice: '$0.49/Run'
+  },
+  KlingCameraControlT2VNode: {
+    vendor: 'Kling',
+    nodeName: 'Kling Text to Video (Camera Control)',
+    pricingParams: '-',
+    pricePerRunRange: '$0.14',
+    displayPrice: '$0.14/Run'
+  },
+  KlingDualCharacterVideoEffectNode: {
+    vendor: 'Kling',
+    nodeName: 'Kling Dual Character Video Effects',
+    pricingParams: 'Priced the same as t2v based on mode, model, and duration.',
+    pricePerRunRange: 'dynamic',
+    displayPrice: 'Variable pricing (medium)'
+  },
+  KlingImage2VideoNode: {
+    vendor: 'Kling',
+    nodeName: 'Kling Image to Video',
+    pricingParams: 'Same as Text to Video',
+    pricePerRunRange: 'dynamic',
+    displayPrice: 'Variable pricing (medium)'
+  },
+  KlingImageGenerationNode: {
+    vendor: 'Kling',
+    nodeName: 'Kling Image Generation',
+    pricingParams: 'modality | model',
+    pricePerRunRange: 'dynamic',
+    displayPrice: 'Variable pricing (low)'
+  },
+  KlingLipSyncAudioToVideoNode: {
+    vendor: 'Kling',
+    nodeName: 'Kling Lip Sync Video with Audio',
+    pricingParams: 'duration of input video',
+    pricePerRunRange: '$0.07',
+    displayPrice: '$0.07/Run'
+  },
+  KlingLipSyncTextToVideoNode: {
+    vendor: 'Kling',
+    nodeName: 'Kling Lip Sync Video with Text',
+    pricingParams: 'duration of input video',
+    pricePerRunRange: '$0.07',
+    displayPrice: '$0.07/Run'
+  },
+  KlingSingleImageVideoEffectNode: {
+    vendor: 'Kling',
+    nodeName: 'Kling Video Effects',
+    pricingParams: 'effect_scene',
+    pricePerRunRange: 'dynamic',
+    displayPrice: 'Variable pricing (medium)'
+  },
+  KlingStartEndFrameNode: {
+    vendor: 'Kling',
+    nodeName: 'Kling Start-End Frame to Video',
+    pricingParams: 'Same as text to video',
+    pricePerRunRange: 'dynamic',
+    displayPrice: 'Variable pricing (medium)'
+  },
+  KlingTextToVideoNode: {
+    vendor: 'Kling',
+    nodeName: 'Kling Text to Video',
+    pricingParams: 'model | duration | mode',
+    pricePerRunRange: 'dynamic',
+    displayPrice: 'Variable pricing (medium to high)'
+  },
+  KlingVideoExtendNode: {
+    vendor: 'Kling',
+    nodeName: 'Kling Video Extend',
+    pricingParams: '-',
+    pricePerRunRange: '$0.28',
+    displayPrice: '$0.28/Run'
+  },
+  KlingVirtualTryOnNode: {
+    vendor: 'Kling',
+    nodeName: 'Kling Virtual Try On',
+    pricingParams: '-',
+    pricePerRunRange: '$0.07',
+    displayPrice: '$0.07/Run'
+  },
+  LumaImageToVideoNode: {
+    vendor: 'Luma',
+    nodeName: 'Luma Image to Video',
+    pricingParams: 'Same as Text to Video',
+    pricePerRunRange: 'dynamic',
+    rateDocumentationUrl: 'https://lumalabs.ai/api/pricing',
+    displayPrice: 'Variable pricing (medium to high)'
+  },
+  LumaVideoNode: {
+    vendor: 'Luma',
+    nodeName: 'Luma Text to Video',
+    pricingParams: 'model | resolution | duration',
+    pricePerRunRange: 'dynamic',
+    rateDocumentationUrl: 'https://lumalabs.ai/api/pricing',
+    displayPrice: 'Variable pricing (medium to high)'
+  },
+  MinimaxImageToVideoNode: {
+    vendor: 'Minimax',
+    nodeName: 'MiniMax Image to Video',
+    pricingParams: '-',
+    pricePerRunRange: '$0.43',
+    rateDocumentationUrl: 'https://www.minimax.io/price',
+    displayPrice: '$0.43/Run'
+  },
+  MinimaxTextToVideoNode: {
+    vendor: 'Minimax',
+    nodeName: 'MiniMax Text to Video',
+    pricingParams: '-',
+    pricePerRunRange: '$0.43',
+    rateDocumentationUrl: 'https://www.minimax.io/price',
+    displayPrice: '$0.43/Run'
+  },
+  OpenAIDalle2: {
+    vendor: 'OpenAI',
+    nodeName: 'dall-e-2',
+    pricingParams: 'size',
+    pricePerRunRange: 'dynamic',
+    rateDocumentationUrl: 'https://platform.openai.com/docs/pricing',
+    displayPrice: 'Variable pricing (low)'
+  },
+  OpenAIDalle3: {
+    vendor: 'OpenAI',
+    nodeName: 'dall-e-3',
+    pricingParams: 'size | quality',
+    pricePerRunRange: 'dynamic',
+    rateDocumentationUrl: 'https://platform.openai.com/docs/pricing',
+    displayPrice: 'Variable pricing (medium)'
+  },
+  OpenAIGPTImage1: {
+    vendor: 'OpenAI',
+    nodeName: 'gpt-image-1',
+    pricingParams: 'quality',
+    pricePerRunRange: 'dynamic',
+    rateDocumentationUrl: 'https://platform.openai.com/docs/pricing',
+    displayPrice: 'Variable pricing (low to high)'
+  },
+  PikaImageToVideoNode2_2: {
+    vendor: 'Pika',
+    nodeName: 'Pika Image to Video',
+    pricingParams: 'duration | resolution',
+    pricePerRunRange: 'dynamic',
+    displayPrice: 'Variable pricing (medium)'
+  },
+  PikaScenesV2_2: {
+    vendor: 'Pika',
+    nodeName: 'Pika Scenes (Video Image Composition)',
+    pricingParams: 'duration | resolution',
+    pricePerRunRange: 'dynamic',
+    displayPrice: 'Variable pricing (medium)'
+  },
+  PikaStartEndFrameNode2_2: {
+    vendor: 'Pika',
+    nodeName: 'Pika Start and End Frame to Video',
+    pricingParams: 'duration | resolution',
+    pricePerRunRange: 'dynamic',
+    displayPrice: 'Variable pricing (medium)'
+  },
+  PikaTextToVideoNode2_2: {
+    vendor: 'Pika',
+    nodeName: 'Pika Text to Video',
+    pricingParams: 'duration | resolution',
+    pricePerRunRange: 'dynamic',
+    displayPrice: 'Variable pricing (medium)'
+  },
+  Pikadditions: {
+    vendor: 'Pika',
+    nodeName: 'Pikadditions (Video Object Insertion)',
+    pricingParams: '-',
+    pricePerRunRange: '$0.3',
+    displayPrice: '$0.3/Run'
+  },
+  Pikaffects: {
+    vendor: 'Pika',
+    nodeName: 'Pikaffects (Video Effects)',
+    pricingParams: '-',
+    pricePerRunRange: '$0.45',
+    displayPrice: '$0.45/Run'
+  },
+  Pikaswaps: {
+    vendor: 'Pika',
+    nodeName: 'Pika Swaps (Video Object Replacement)',
+    pricingParams: '-',
+    pricePerRunRange: '$0.3',
+    displayPrice: '$0.3/Run'
+  },
+  PixverseImageToVideoNode: {
+    vendor: 'Pixverse',
+    nodeName: 'PixVerse Image to Video',
+    pricingParams: 'same as text to video',
+    pricePerRunRange: '$0.9',
+    displayPrice: '$0.9/Run'
+  },
+  PixverseTextToVideoNode: {
+    vendor: 'Pixverse',
+    nodeName: 'PixVerse Text to Video',
+    pricingParams: 'duration | quality | motion_mode',
+    pricePerRunRange: 'dynamic',
+    displayPrice: 'Variable pricing (medium to high)'
+  },
+  PixverseTransitionVideoNode: {
+    vendor: 'Pixverse',
+    nodeName: 'PixVerse Transition Video',
+    pricingParams: 'same as text to video',
+    pricePerRunRange: '$0.9',
+    displayPrice: '$0.9/Run'
+  },
+  RecraftCreativeUpscaleNode: {
+    vendor: 'Recraft',
+    nodeName: 'Recraft Creative Upscale Image',
+    pricingParams: '-',
+    pricePerRunRange: '$0.25',
+    rateDocumentationUrl: 'https://www.recraft.ai/docs#pricing',
+    displayPrice: '$0.25/Run'
+  },
+  RecraftCrispUpscaleNode: {
+    vendor: 'Recraft',
+    nodeName: 'Recraft Crisp Upscale Image',
+    pricingParams: '-',
+    pricePerRunRange: '$0.004',
+    rateDocumentationUrl: 'https://www.recraft.ai/docs#pricing',
+    displayPrice: '$0.004/Run'
+  },
+  RecraftImageInpaintingNode: {
+    vendor: 'Recraft',
+    nodeName: 'Recraft Image Inpainting',
+    pricingParams: 'n',
+    pricePerRunRange: '$$0.04 x n',
+    rateDocumentationUrl: 'https://www.recraft.ai/docs#pricing',
+    displayPrice: '$0.04 x n/Run'
+  },
+  RecraftImageToImageNode: {
+    vendor: 'Recraft',
+    nodeName: 'Recraft Image to Image',
+    pricingParams: 'n',
+    pricePerRunRange: '$0.04 x n',
+    rateDocumentationUrl: 'https://www.recraft.ai/docs#pricing',
+    displayPrice: '$0.04 x n/Run'
+  },
+  RecraftRemoveBackgroundNode: {
+    vendor: 'Recraft',
+    nodeName: 'Recraft Remove Background',
+    pricingParams: '-',
+    pricePerRunRange: '$0.01',
+    rateDocumentationUrl: 'https://www.recraft.ai/docs#pricing',
+    displayPrice: '$0.01/Run'
+  },
+  RecraftReplaceBackgroundNode: {
+    vendor: 'Recraft',
+    nodeName: 'Recraft Replace Background',
+    pricingParams: 'n',
+    pricePerRunRange: '$0.04',
+    rateDocumentationUrl: 'https://www.recraft.ai/docs#pricing',
+    displayPrice: '$0.04/Run'
+  },
+  RecraftTextToImageNode: {
+    vendor: 'Recraft',
+    nodeName: 'Recraft Text to Image',
+    pricingParams: 'model | n',
+    pricePerRunRange: '$0.04 x n',
+    rateDocumentationUrl: 'https://www.recraft.ai/docs#pricing',
+    displayPrice: '$0.04 x n/Run'
+  },
+  RecraftTextToVectorNode: {
+    vendor: 'Recraft',
+    nodeName: 'Recraft Text to Vector',
+    pricingParams: 'model | n',
+    pricePerRunRange: '$0.08 x n',
+    rateDocumentationUrl: 'https://www.recraft.ai/docs#pricing',
+    displayPrice: '$0.08 x n/Run'
+  },
+  RecraftVectorizeImageNode: {
+    vendor: 'Recraft',
+    nodeName: 'Recraft Vectorize Image',
+    pricingParams: '-',
+    pricePerRunRange: '$0.01',
+    rateDocumentationUrl: 'https://www.recraft.ai/docs#pricing',
+    displayPrice: '$0.01/Run'
+  },
+  StabilityStableImageSD_3_5Node: {
+    vendor: 'Stability',
+    nodeName: 'Stability AI Stable Diffusion 3.5 Image',
+    pricingParams: 'model',
+    pricePerRunRange: 'dynamic',
+    displayPrice: 'Variable pricing (low)'
+  },
+  StabilityStableImageUltraNode: {
+    vendor: 'Stability',
+    nodeName: 'Stability AI Stable Image Ultra',
+    pricingParams: '-',
+    pricePerRunRange: '$0.08',
+    displayPrice: '$0.08/Run'
+  },
+  StabilityUpscaleConservativeNode: {
+    vendor: 'Stability',
+    nodeName: 'Stability AI Upscale Conservative',
+    pricingParams: '-',
+    pricePerRunRange: '$0.25',
+    displayPrice: '$0.25/Run'
+  },
+  StabilityUpscaleCreativeNode: {
+    vendor: 'Stability',
+    nodeName: 'Stability AI Upscale Creative',
+    pricingParams: '-',
+    pricePerRunRange: '$0.25',
+    displayPrice: '$0.25/Run'
+  },
+  StabilityUpscaleFastNode: {
+    vendor: 'Stability',
+    nodeName: 'Stability AI Upscale Fast',
+    pricingParams: '-',
+    pricePerRunRange: '$0.01',
+    displayPrice: '$0.01/Run'
+  },
+  VeoVideoGenerationNode: {
+    vendor: 'Veo',
+    nodeName: 'Google Veo2 Video Generation',
+    pricingParams: 'duration_seconds',
+    pricePerRunRange: 'dynamic',
+    rateDocumentationUrl:
+      'https://cloud.google.com/vertex-ai/generative-ai/pricing',
+    displayPrice: 'Variable pricing (high)'
+  },
+  LumaTextToImageNode: {
+    vendor: 'Luma',
+    nodeName: 'Luma Text to Image',
+    pricingParams: 'model | aspect_ratio',
+    pricePerRunRange: 'dynamic',
+    rateDocumentationUrl: 'https://lumalabs.ai/api/pricing',
+    displayPrice: 'Variable pricing (low to medium)'
+  },
+  LumaImageToImageNode: {
+    vendor: 'Luma',
+    nodeName: 'Luma Image to Image',
+    pricingParams: 'Same as Text to Image',
+    pricePerRunRange: 'dynamic',
+    rateDocumentationUrl: 'https://lumalabs.ai/api/pricing',
+    displayPrice: 'Variable pricing (low to medium)'
+  }
+}
+
+/**
+ * Composable to get node pricing information for API nodes
+ */
+export const useNodePricing = () => {
+  const getNodePrice = (nodeName: string): string =>
+    apiNodeCosts[nodeName]?.displayPrice || ''
+
+  /**
+   * Get the price display for a node
+   */
+  const getNodeDisplayPrice = (node: LGraphNode): string => {
+    if (!node.constructor.nodeData?.api_node) return ''
+    return getNodePrice(node.constructor.nodeData.name)
+  }
+
+  return {
+    getNodeDisplayPrice
+  }
+}

src/composables/useCoreCommands.ts

@@ -17,7 +17,7 @@ import { useDialogService } from '@/services/dialogService'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useWorkflowService } from '@/services/workflowService'
 import type { ComfyCommand } from '@/stores/commandStore'
-import { useTitleEditorStore } from '@/stores/graphStore'
+import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
 import { useQueueSettingsStore, useQueueStore } from '@/stores/queueStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
@@ -34,6 +34,7 @@ export function useCoreCommands(): ComfyCommand[] {
   const colorPaletteStore = useColorPaletteStore()
   const firebaseAuthActions = useFirebaseAuthActions()
   const toastStore = useToastStore()
+  const canvasStore = useCanvasStore()
   const getTracker = () => workflowStore.activeWorkflow?.changeTracker
 
   const getSelectedNodes = (): LGraphNode[] => {
@@ -673,6 +674,30 @@ export function useCoreCommands(): ComfyCommand[] {
       function: async () => {
         await firebaseAuthActions.logout()
       }
+    },
+    {
+      id: 'Comfy.Graph.ConvertToSubgraph',
+      icon: 'pi pi-sitemap',
+      label: 'Convert Selection to Subgraph',
+      versionAdded: '1.20.1',
+      function: () => {
+        const canvas = canvasStore.getCanvas()
+        const graph = canvas.subgraph ?? canvas.graph
+        if (!graph) throw new TypeError('Canvas has no graph or subgraph set.')
+
+        const res = graph.convertToSubgraph(canvas.selectedItems)
+        if (!res) {
+          toastStore.add({
+            severity: 'error',
+            summary: t('toastMessages.cannotCreateSubgraph'),
+            detail: t('toastMessages.failedToConvertToSubgraph'),
+            life: 3000
+          })
+          return
+        }
+        const { node } = res
+        canvas.select(node)
+      }
     }
   ]
 

src/composables/widgets/useProgressTextWidget.ts

@@ -28,7 +28,8 @@ export const useTextPreviewWidget = (
         setValue: (value: string | object) => {
           widgetValue.value = typeof value === 'string' ? value : String(value)
         },
-        getMinHeight: () => options.minHeight ?? 42 + PADDING
+        getMinHeight: () => options.minHeight ?? 42 + PADDING,
+        serialize: false
       }
     })
     addWidget(node, widget)

src/constants/coreKeybindings.ts

@@ -173,5 +173,13 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
       key: 'f'
     },
     commandId: 'Workspace.ToggleFocusMode'
+  },
+  {
+    combo: {
+      key: 'e',
+      ctrl: true,
+      shift: true
+    },
+    commandId: 'Comfy.Graph.ConvertToSubgraph'
   }
 ]

src/constants/coreSettings.ts

@@ -322,6 +322,14 @@ export const CORE_SETTINGS: SettingParams[] = [
     options: [NodeBadgeMode.None, NodeBadgeMode.ShowAll],
     defaultValue: NodeBadgeMode.ShowAll
   },
+  {
+    id: 'Comfy.NodeBadge.ShowApiPricing',
+    category: ['Comfy', 'API Nodes'],
+    name: 'Show API node pricing badge',
+    type: 'boolean',
+    defaultValue: true,
+    versionAdded: '1.20.3'
+  },
   {
     id: 'Comfy.ConfirmClear',
     category: ['Comfy', 'Workflow', 'ConfirmClear'],

src/constants/supportedWorkflowFormats.ts

@@ -0,0 +1,72 @@
+/**
+ * Supported workflow file formats organized by type category
+ */
+
+/**
+ * All supported image formats that can contain workflow data
+ */
+export const IMAGE_WORKFLOW_FORMATS = {
+  extensions: ['.png', '.webp', '.svg'],
+  mimeTypes: ['image/png', 'image/webp', 'image/svg+xml']
+}
+
+/**
+ * All supported audio formats that can contain workflow data
+ */
+export const AUDIO_WORKFLOW_FORMATS = {
+  extensions: ['.mp3', '.ogg', '.flac'],
+  mimeTypes: ['audio/mpeg', 'audio/ogg', 'audio/flac', 'audio/x-flac']
+}
+
+/**
+ * All supported video formats that can contain workflow data
+ */
+export const VIDEO_WORKFLOW_FORMATS = {
+  extensions: ['.mp4', '.mov', '.m4v', '.webm'],
+  mimeTypes: ['video/mp4', 'video/quicktime', 'video/x-m4v', 'video/webm']
+}
+
+/**
+ * All supported 3D model formats that can contain workflow data
+ */
+export const MODEL_WORKFLOW_FORMATS = {
+  extensions: ['.glb'],
+  mimeTypes: ['model/gltf-binary']
+}
+
+/**
+ * All supported data formats that directly contain workflow data
+ */
+export const DATA_WORKFLOW_FORMATS = {
+  extensions: ['.json', '.latent', '.safetensors'],
+  mimeTypes: ['application/json']
+}
+
+/**
+ * Combines all supported formats into a single object
+ */
+export const ALL_WORKFLOW_FORMATS = {
+  extensions: [
+    ...IMAGE_WORKFLOW_FORMATS.extensions,
+    ...AUDIO_WORKFLOW_FORMATS.extensions,
+    ...VIDEO_WORKFLOW_FORMATS.extensions,
+    ...MODEL_WORKFLOW_FORMATS.extensions,
+    ...DATA_WORKFLOW_FORMATS.extensions
+  ],
+  mimeTypes: [
+    ...IMAGE_WORKFLOW_FORMATS.mimeTypes,
+    ...AUDIO_WORKFLOW_FORMATS.mimeTypes,
+    ...VIDEO_WORKFLOW_FORMATS.mimeTypes,
+    ...MODEL_WORKFLOW_FORMATS.mimeTypes,
+    ...DATA_WORKFLOW_FORMATS.mimeTypes
+  ]
+}
+
+/**
+ * Generate a comma-separated accept string for file inputs
+ * Combines all extensions and mime types
+ */
+export const WORKFLOW_ACCEPT_STRING = [
+  ...ALL_WORKFLOW_FORMATS.extensions,
+  ...ALL_WORKFLOW_FORMATS.mimeTypes
+].join(',')

src/extensions/core/README.md

@@ -0,0 +1,139 @@
+# Core Extensions
+
+This directory contains the core extensions that provide essential functionality to the ComfyUI frontend.
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Extension Architecture](#extension-architecture)
+- [Core Extensions](#core-extensions)
+- [Extension Development](#extension-development)
+- [Extension Hooks](#extension-hooks)
+- [Further Reading](#further-reading)
+
+## Overview
+
+Extensions in ComfyUI are modular JavaScript modules that extend and enhance the functionality of the frontend. The extensions in this directory are considered "core" as they provide fundamental features that are built into ComfyUI by default.
+
+## Extension Architecture
+
+ComfyUI's extension system follows these key principles:
+
+1. **Registration-based:** Extensions must register themselves with the application using `app.registerExtension()`
+2. **Hook-driven:** Extensions interact with the system through predefined hooks
+3. **Non-intrusive:** Extensions should avoid directly modifying core objects where possible
+
+## Core Extensions List
+
+The core extensions include:
+
+| Extension | Description |
+|-----------|-------------|
+| clipspace.ts | Implements the Clipspace feature for temporary image storage |
+| dynamicPrompts.ts | Provides dynamic prompt generation capabilities |
+| groupNode.ts | Implements the group node functionality to organize workflows |
+| load3d.ts | Supports 3D model loading and visualization |
+| maskeditor.ts | Implements the mask editor for image masking operations |
+| noteNode.ts | Adds note nodes for documentation within workflows |
+| rerouteNode.ts | Implements reroute nodes for cleaner workflow connections |
+| uploadImage.ts | Handles image upload functionality |
+| webcamCapture.ts | Provides webcam capture capabilities |
+| widgetInputs.ts | Implements various widget input types |
+
+## Extension Development
+
+When developing or modifying extensions, follow these best practices:
+
+1. **Use provided hooks** rather than directly modifying core application objects
+2. **Maintain compatibility** with other extensions
+3. **Follow naming conventions** for both extension names and settings
+4. **Properly document** extension hooks and functionality
+5. **Test with other extensions** to ensure no conflicts
+
+### Extension Registration
+
+Extensions are registered using the `app.registerExtension()` method:
+
+```javascript
+app.registerExtension({
+  name: "MyExtension",
+  
+  // Hook implementations
+  async init() {
+    // Implementation
+  },
+  
+  async beforeRegisterNodeDef(nodeType, nodeData, app) {
+    // Implementation
+  }
+  
+  // Other hooks as needed
+});
+```
+
+## Extension Hooks
+
+ComfyUI extensions can implement various hooks that are called at specific points in the application lifecycle:
+
+### Hook Execution Sequence
+
+#### Web Page Load
+
+```
+init
+addCustomNodeDefs
+getCustomWidgets
+beforeRegisterNodeDef    [repeated multiple times]
+registerCustomNodes
+beforeConfigureGraph
+nodeCreated
+loadedGraphNode
+afterConfigureGraph
+setup
+```
+
+#### Loading Workflow
+
+```
+beforeConfigureGraph
+beforeRegisterNodeDef   [zero, one, or multiple times]
+nodeCreated             [repeated multiple times]
+loadedGraphNode         [repeated multiple times]
+afterConfigureGraph
+```
+
+#### Adding New Node
+
+```
+nodeCreated
+```
+
+### Key Hooks
+
+| Hook | Description |
+|------|-------------|
+| `init` | Called after canvas creation but before nodes are added |
+| `setup` | Called after the application is fully set up and running |
+| `addCustomNodeDefs` | Called before nodes are registered with the graph |
+| `getCustomWidgets` | Allows extensions to add custom widgets |
+| `beforeRegisterNodeDef` | Allows extensions to modify nodes before registration |
+| `registerCustomNodes` | Allows extensions to register additional nodes |
+| `loadedGraphNode` | Called when a node is reloaded onto the graph |
+| `nodeCreated` | Called after a node's constructor |
+| `beforeConfigureGraph` | Called before a graph is configured |
+| `afterConfigureGraph` | Called after a graph is configured |
+| `getSelectionToolboxCommands` | Allows extensions to add commands to the selection toolbox |
+
+For the complete list of available hooks and detailed descriptions, see the [ComfyExtension interface in comfy.ts](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/src/types/comfy.ts).
+
+## Further Reading
+
+For more detailed information about ComfyUI's extension system, refer to the official documentation:
+
+- [JavaScript Extension Overview](https://docs.comfy.org/custom-nodes/js/javascript_overview)
+- [JavaScript Hooks](https://docs.comfy.org/custom-nodes/js/javascript_hooks)
+- [JavaScript Objects and Hijacking](https://docs.comfy.org/custom-nodes/js/javascript_objects_and_hijacking)
+- [JavaScript Settings](https://docs.comfy.org/custom-nodes/js/javascript_settings)
+- [JavaScript Examples](https://docs.comfy.org/custom-nodes/js/javascript_examples)
+
+Also, check the main [README.md](https://github.com/Comfy-Org/ComfyUI_frontend#developer-apis) section on Developer APIs for the latest information on extension APIs and features.

src/extensions/core/groupNode.ts

@@ -1,4 +1,4 @@
-import { LGraphCanvas, LiteGraph } from '@comfyorg/litegraph'
+import { LiteGraph } from '@comfyorg/litegraph'
 import { LGraphNode, type NodeId } from '@comfyorg/litegraph/dist/LGraphNode'
 
 import { t } from '@/i18n'
@@ -1583,57 +1583,6 @@ export class GroupNodeHandler {
   }
 }
 
-function addConvertToGroupOptions() {
-  // @ts-expect-error fixme ts strict error
-  function addConvertOption(options, index) {
-    const selected = Object.values(app.canvas.selected_nodes ?? {})
-    const disabled =
-      selected.length < 2 ||
-      selected.find((n) => GroupNodeHandler.isGroupNode(n))
-    options.splice(index, null, {
-      content: `Convert to Group Node`,
-      disabled,
-      callback: convertSelectedNodesToGroupNode
-    })
-  }
-
-  // @ts-expect-error fixme ts strict error
-  function addManageOption(options, index) {
-    const groups = app.graph.extra?.groupNodes
-    const disabled = !groups || !Object.keys(groups).length
-    options.splice(index, null, {
-      content: `Manage Group Nodes`,
-      disabled,
-      callback: () => manageGroupNodes()
-    })
-  }
-
-  // Add to canvas
-  const getCanvasMenuOptions = LGraphCanvas.prototype.getCanvasMenuOptions
-  LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-    // @ts-expect-error fixme ts strict error
-    const options = getCanvasMenuOptions.apply(this, arguments)
-    const index = options.findIndex((o) => o?.content === 'Add Group')
-    const insertAt = index === -1 ? options.length - 1 : index + 2
-    addConvertOption(options, insertAt)
-    addManageOption(options, insertAt + 1)
-    return options
-  }
-
-  // Add to nodes
-  const getNodeMenuOptions = LGraphCanvas.prototype.getNodeMenuOptions
-  LGraphCanvas.prototype.getNodeMenuOptions = function (node) {
-    // @ts-expect-error fixme ts strict error
-    const options = getNodeMenuOptions.apply(this, arguments)
-    if (!GroupNodeHandler.isGroupNode(node)) {
-      const index = options.findIndex((o) => o?.content === 'Properties')
-      const insertAt = index === -1 ? options.length - 1 : index
-      addConvertOption(options, insertAt)
-    }
-    return options
-  }
-}
-
 const replaceLegacySeparators = (nodes: ComfyNode[]): void => {
   for (const node of nodes) {
     if (typeof node.type === 'string' && node.type.startsWith('workflow/')) {
@@ -1723,9 +1672,6 @@ const ext: ComfyExtension = {
       }
     }
   ],
-  setup() {
-    addConvertToGroupOptions()
-  },
   async beforeConfigureGraph(
     graphData: ComfyWorkflowJSON,
     missingNodeTypes: string[]

src/extensions/core/load3d/Load3d.ts

@@ -118,7 +118,11 @@ class Load3d {
       options
     )
 
-    this.loaderManager = new LoaderManager(this.modelManager, this.eventManager)
+    this.loaderManager = new LoaderManager(
+      this.modelManager,
+      this.eventManager,
+      options
+    )
 
     this.recordingManager = new RecordingManager(
       this.sceneManager.scene,

src/extensions/core/load3d/LoaderManager.ts

@@ -1,15 +1,16 @@
 import * as THREE from 'three'
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
-import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'
 
+import { OverrideMTLLoader } from '@/extensions/core/load3d/threejsOverride/OverrideMTLLoader'
 import { t } from '@/i18n'
 import { useToastStore } from '@/stores/toastStore'
 
 import {
   EventManagerInterface,
+  Load3DOptions,
   LoaderManagerInterface,
   ModelManagerInterface
 } from './interfaces'
@@ -17,7 +18,7 @@ import {
 export class LoaderManager implements LoaderManagerInterface {
   gltfLoader: GLTFLoader
   objLoader: OBJLoader
-  mtlLoader: MTLLoader
+  mtlLoader: OverrideMTLLoader
   fbxLoader: FBXLoader
   stlLoader: STLLoader
 
@@ -26,14 +27,21 @@ export class LoaderManager implements LoaderManagerInterface {
 
   constructor(
     modelManager: ModelManagerInterface,
-    eventManager: EventManagerInterface
+    eventManager: EventManagerInterface,
+    options: Load3DOptions
   ) {
+    let loadRootFolder = 'input'
+
+    if (options && options.inputSpec?.isPreview) {
+      loadRootFolder = 'output'
+    }
+
     this.modelManager = modelManager
     this.eventManager = eventManager
 
     this.gltfLoader = new GLTFLoader()
     this.objLoader = new OBJLoader()
-    this.mtlLoader = new MTLLoader()
+    this.mtlLoader = new OverrideMTLLoader(loadRootFolder)
     this.fbxLoader = new FBXLoader()
     this.stlLoader = new STLLoader()
   }
@@ -122,7 +130,8 @@ export class LoaderManager implements LoaderManagerInterface {
 
       case 'obj':
         if (this.modelManager.materialMode === 'original') {
-          const mtlUrl = url.replace(/\.obj([^.]*$)/, '.mtl$1')
+          const mtlUrl = url.replace(/(filename=.*?)\.obj/, '$1.mtl')
+
           try {
             const materials = await this.mtlLoader.loadAsync(mtlUrl)
             materials.preload()

src/extensions/core/load3d/threejsOverride/OverrideMTLLoader.js

@@ -0,0 +1,513 @@
+import {
+  Color,
+  ColorManagement,
+  DefaultLoadingManager,
+  FileLoader,
+  FrontSide,
+  Loader,
+  LoaderUtils,
+  MeshPhongMaterial,
+  RepeatWrapping,
+  SRGBColorSpace,
+  TextureLoader,
+  Vector2
+} from 'three'
+
+/**
+ * A loader for the MTL format.
+ *
+ * The Material Template Library format (MTL) or .MTL File Format is a companion file format
+ * to OBJ that describes surface shading (material) properties of objects within one or more
+ * OBJ files.
+ *
+ * ```js
+ * const loader = new MTLLoader();
+ * const materials = await loader.loadAsync( 'models/obj/male02/male02.mtl' );
+ *
+ * const objLoader = new OBJLoader();
+ * objLoader.setMaterials( materials );
+ * ```
+ *
+ * @augments Loader
+ * @three_import import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
+ */
+class OverrideMTLLoader extends Loader {
+  constructor(loadRootFolder, manager) {
+    super(manager)
+
+    this.loadRootFolder = loadRootFolder
+  }
+
+  /**
+   * Starts loading from the given URL and passes the loaded MTL asset
+   * to the `onLoad()` callback.
+   *
+   * @param {string} url - The path/URL of the file to be loaded. This can also be a data URI.
+   * @param {function(MaterialCreator)} onLoad - Executed when the loading process has been finished.
+   * @param {onProgressCallback} onProgress - Executed while the loading is in progress.
+   * @param {onErrorCallback} onError - Executed when errors occur.
+   */
+  load(url, onLoad, onProgress, onError) {
+    const scope = this
+
+    const path = this.path === '' ? LoaderUtils.extractUrlBase(url) : this.path
+
+    const loader = new FileLoader(this.manager)
+    loader.setPath(this.path)
+    loader.setRequestHeader(this.requestHeader)
+    loader.setWithCredentials(this.withCredentials)
+    loader.load(
+      url,
+      function (text) {
+        try {
+          onLoad(scope.parse(text, path))
+        } catch (e) {
+          if (onError) {
+            onError(e)
+          } else {
+            console.error(e)
+          }
+
+          scope.manager.itemError(url)
+        }
+      },
+      onProgress,
+      onError
+    )
+  }
+
+  /**
+   * Sets the material options.
+   *
+   * @param {MTLLoader~MaterialOptions} value - The material options.
+   * @return {MTLLoader} A reference to this loader.
+   */
+  setMaterialOptions(value) {
+    this.materialOptions = value
+    return this
+  }
+
+  /**
+   * Parses the given MTL data and returns the resulting material creator.
+   *
+   * @param {string} text - The raw MTL data as a string.
+   * @param {string} path - The URL base path.
+   * @return {MaterialCreator} The material creator.
+   */
+  parse(text, path) {
+    const lines = text.split('\n')
+    let info = {}
+    const delimiter_pattern = /\s+/
+    const materialsInfo = {}
+
+    for (let i = 0; i < lines.length; i++) {
+      let line = lines[i]
+      line = line.trim()
+
+      if (line.length === 0 || line.charAt(0) === '#') {
+        // Blank line or comment ignore
+        continue
+      }
+
+      const pos = line.indexOf(' ')
+
+      let key = pos >= 0 ? line.substring(0, pos) : line
+      key = key.toLowerCase()
+
+      let value = pos >= 0 ? line.substring(pos + 1) : ''
+      value = value.trim()
+
+      if (key === 'newmtl') {
+        // New material
+
+        info = { name: value }
+        materialsInfo[value] = info
+      } else {
+        if (key === 'ka' || key === 'kd' || key === 'ks' || key === 'ke') {
+          const ss = value.split(delimiter_pattern, 3)
+          info[key] = [parseFloat(ss[0]), parseFloat(ss[1]), parseFloat(ss[2])]
+        } else {
+          info[key] = value
+        }
+      }
+    }
+
+    const materialCreator = new OverrideMaterialCreator(
+      this.resourcePath || path,
+      this.materialOptions,
+      this.loadRootFolder
+    )
+    materialCreator.setCrossOrigin(this.crossOrigin)
+    materialCreator.setManager(this.manager)
+    materialCreator.setMaterials(materialsInfo)
+    return materialCreator
+  }
+}
+
+/**
+ * Material options of `MTLLoader`.
+ *
+ * @typedef {Object} MTLLoader~MaterialOptions
+ * @property {(FrontSide|BackSide|DoubleSide)} [side=FrontSide] - Which side to apply the material.
+ * @property {(RepeatWrapping|ClampToEdgeWrapping|MirroredRepeatWrapping)} [wrap=RepeatWrapping] - What type of wrapping to apply for textures.
+ * @property {boolean} [normalizeRGB=false] - Whether RGB colors should be normalized to `0-1` from `0-255`.
+ * @property {boolean} [ignoreZeroRGBs=false] - Ignore values of RGBs (Ka,Kd,Ks) that are all 0's.
+ */
+
+class OverrideMaterialCreator {
+  constructor(baseUrl = '', options = {}, loadRootFolder) {
+    this.baseUrl = baseUrl
+    this.options = options
+    this.materialsInfo = {}
+    this.materials = {}
+    this.materialsArray = []
+    this.nameLookup = {}
+
+    this.loadRootFolder = loadRootFolder
+
+    this.crossOrigin = 'anonymous'
+
+    this.side = this.options.side !== undefined ? this.options.side : FrontSide
+    this.wrap =
+      this.options.wrap !== undefined ? this.options.wrap : RepeatWrapping
+  }
+
+  setCrossOrigin(value) {
+    this.crossOrigin = value
+    return this
+  }
+
+  setManager(value) {
+    this.manager = value
+  }
+
+  setMaterials(materialsInfo) {
+    this.materialsInfo = this.convert(materialsInfo)
+    this.materials = {}
+    this.materialsArray = []
+    this.nameLookup = {}
+  }
+
+  convert(materialsInfo) {
+    if (!this.options) return materialsInfo
+
+    const converted = {}
+
+    for (const mn in materialsInfo) {
+      // Convert materials info into normalized form based on options
+
+      const mat = materialsInfo[mn]
+
+      const covmat = {}
+
+      converted[mn] = covmat
+
+      for (const prop in mat) {
+        let save = true
+        let value = mat[prop]
+        const lprop = prop.toLowerCase()
+
+        switch (lprop) {
+          case 'kd':
+          case 'ka':
+          case 'ks':
+            // Diffuse color (color under white light) using RGB values
+
+            if (this.options && this.options.normalizeRGB) {
+              value = [value[0] / 255, value[1] / 255, value[2] / 255]
+            }
+
+            if (this.options && this.options.ignoreZeroRGBs) {
+              if (value[0] === 0 && value[1] === 0 && value[2] === 0) {
+                // ignore
+
+                save = false
+              }
+            }
+
+            break
+
+          default:
+            break
+        }
+
+        if (save) {
+          covmat[lprop] = value
+        }
+      }
+    }
+
+    return converted
+  }
+
+  preload() {
+    for (const mn in this.materialsInfo) {
+      this.create(mn)
+    }
+  }
+
+  getIndex(materialName) {
+    return this.nameLookup[materialName]
+  }
+
+  getAsArray() {
+    let index = 0
+
+    for (const mn in this.materialsInfo) {
+      this.materialsArray[index] = this.create(mn)
+      this.nameLookup[mn] = index
+      index++
+    }
+
+    return this.materialsArray
+  }
+
+  create(materialName) {
+    if (this.materials[materialName] === undefined) {
+      this.createMaterial_(materialName)
+    }
+
+    return this.materials[materialName]
+  }
+
+  createMaterial_(materialName) {
+    // Create material
+
+    const scope = this
+    const mat = this.materialsInfo[materialName]
+    const params = {
+      name: materialName,
+      side: this.side
+    }
+
+    /**
+     * Override for ComfyUI api url
+     */
+    function resolveURL(baseUrl, url, loadRootFolder) {
+      if (typeof url !== 'string' || url === '') return ''
+
+      baseUrl =
+        baseUrl +
+        '/view?filename=' +
+        url +
+        '&type=' +
+        loadRootFolder +
+        '&subfolder=3d'
+
+      return baseUrl
+    }
+
+    function setMapForType(mapType, value) {
+      if (params[mapType]) return // Keep the first encountered texture
+
+      const texParams = scope.getTextureParams(value, params)
+      const map = scope.loadTexture(
+        resolveURL(scope.baseUrl, texParams.url, scope.loadRootFolder)
+      )
+
+      map.repeat.copy(texParams.scale)
+      map.offset.copy(texParams.offset)
+
+      map.wrapS = scope.wrap
+      map.wrapT = scope.wrap
+
+      if (mapType === 'map' || mapType === 'emissiveMap') {
+        map.colorSpace = SRGBColorSpace
+      }
+
+      params[mapType] = map
+    }
+
+    for (const prop in mat) {
+      const value = mat[prop]
+      let n
+
+      if (value === '') continue
+
+      switch (prop.toLowerCase()) {
+        // Ns is material specular exponent
+
+        case 'kd':
+          // Diffuse color (color under white light) using RGB values
+
+          params.color = ColorManagement.toWorkingColorSpace(
+            new Color().fromArray(value),
+            SRGBColorSpace
+          )
+
+          break
+
+        case 'ks':
+          // Specular color (color when light is reflected from shiny surface) using RGB values
+          params.specular = ColorManagement.toWorkingColorSpace(
+            new Color().fromArray(value),
+            SRGBColorSpace
+          )
+
+          break
+
+        case 'ke':
+          // Emissive using RGB values
+          params.emissive = ColorManagement.toWorkingColorSpace(
+            new Color().fromArray(value),
+            SRGBColorSpace
+          )
+
+          break
+
+        case 'map_kd':
+          // Diffuse texture map
+
+          setMapForType('map', value)
+
+          break
+
+        case 'map_ks':
+          // Specular map
+
+          setMapForType('specularMap', value)
+
+          break
+
+        case 'map_ke':
+          // Emissive map
+
+          setMapForType('emissiveMap', value)
+
+          break
+
+        case 'norm':
+          setMapForType('normalMap', value)
+
+          break
+
+        case 'map_bump':
+        case 'bump':
+          // Bump texture map
+
+          setMapForType('bumpMap', value)
+
+          break
+
+        case 'disp':
+          // Displacement texture map
+
+          setMapForType('displacementMap', value)
+
+          break
+
+        case 'map_d':
+          // Alpha map
+
+          setMapForType('alphaMap', value)
+          params.transparent = true
+
+          break
+
+        case 'ns':
+          // The specular exponent (defines the focus of the specular highlight)
+          // A high exponent results in a tight, concentrated highlight. Ns values normally range from 0 to 1000.
+
+          params.shininess = parseFloat(value)
+
+          break
+
+        case 'd':
+          n = parseFloat(value)
+
+          if (n < 1) {
+            params.opacity = n
+            params.transparent = true
+          }
+
+          break
+
+        case 'tr':
+          n = parseFloat(value)
+
+          if (this.options && this.options.invertTrProperty) n = 1 - n
+
+          if (n > 0) {
+            params.opacity = 1 - n
+            params.transparent = true
+          }
+
+          break
+
+        default:
+          break
+      }
+    }
+
+    this.materials[materialName] = new MeshPhongMaterial(params)
+    return this.materials[materialName]
+  }
+
+  getTextureParams(value, matParams) {
+    const texParams = {
+      scale: new Vector2(1, 1),
+      offset: new Vector2(0, 0)
+    }
+
+    const items = value.split(/\s+/)
+    let pos
+
+    pos = items.indexOf('-bm')
+
+    if (pos >= 0) {
+      matParams.bumpScale = parseFloat(items[pos + 1])
+      items.splice(pos, 2)
+    }
+
+    pos = items.indexOf('-mm')
+
+    if (pos >= 0) {
+      matParams.displacementBias = parseFloat(items[pos + 1])
+      matParams.displacementScale = parseFloat(items[pos + 2])
+      items.splice(pos, 3)
+    }
+
+    pos = items.indexOf('-s')
+
+    if (pos >= 0) {
+      texParams.scale.set(
+        parseFloat(items[pos + 1]),
+        parseFloat(items[pos + 2])
+      )
+      items.splice(pos, 4) // we expect 3 parameters here!
+    }
+
+    pos = items.indexOf('-o')
+
+    if (pos >= 0) {
+      texParams.offset.set(
+        parseFloat(items[pos + 1]),
+        parseFloat(items[pos + 2])
+      )
+      items.splice(pos, 4) // we expect 3 parameters here!
+    }
+
+    texParams.url = items.join(' ').trim()
+    return texParams
+  }
+
+  loadTexture(url, mapping, onLoad, onProgress, onError) {
+    const manager =
+      this.manager !== undefined ? this.manager : DefaultLoadingManager
+    let loader = manager.getHandler(url)
+
+    if (loader === null) {
+      loader = new TextureLoader(manager)
+    }
+
+    if (loader.setCrossOrigin) loader.setCrossOrigin(this.crossOrigin)
+
+    const texture = loader.load(url, onLoad, onProgress, onError)
+
+    if (mapping !== undefined) texture.mapping = mapping
+
+    return texture
+  }
+}
+
+export { OverrideMTLLoader }

src/extensions/core/maskeditor.ts

@@ -4912,6 +4912,45 @@ class KeyboardManager {
   }
 }
 
+// Function to open the mask editor
+function openMaskEditor(): void {
+  const useNewEditor = app.extensionManager.setting.get(
+    'Comfy.MaskEditor.UseNewEditor'
+  )
+  if (useNewEditor) {
+    const dlg = MaskEditorDialog.getInstance() as any
+    if (dlg?.isOpened && !dlg.isOpened()) {
+      dlg.show()
+    }
+  } else {
+    const dlg = MaskEditorDialogOld.getInstance() as any
+    if (dlg?.isOpened && !dlg.isOpened()) {
+      dlg.show()
+    }
+  }
+}
+
+// Check if the dialog is already opened
+function isOpened(): boolean {
+  const useNewEditor = app.extensionManager.setting.get(
+    'Comfy.MaskEditor.UseNewEditor'
+  )
+  if (useNewEditor) {
+    return MaskEditorDialog.instance?.isOpened?.() ?? false
+  } else {
+    return (MaskEditorDialogOld.instance as any)?.isOpened?.() ?? false
+  }
+}
+
+// Ensure boolean return type for context predicate
+const context_predicate = (): boolean => {
+  return !!(
+    ComfyApp.clipspace &&
+    ComfyApp.clipspace.imgs &&
+    ComfyApp.clipspace.imgs.length > 0
+  )
+}
+
 app.registerExtension({
   name: 'Comfy.MaskEditor',
   settings: [
@@ -4951,50 +4990,33 @@ app.registerExtension({
       experimental: true
     }
   ],
-  init(app) {
-    // Create function before assignment
-    function openMaskEditor(): void {
-      const useNewEditor = app.extensionManager.setting.get(
-        'Comfy.MaskEditor.UseNewEditor'
-      )
-      if (useNewEditor) {
-        const dlg = MaskEditorDialog.getInstance() as any
-        if (dlg?.isOpened && !dlg.isOpened()) {
-          dlg.show()
-        }
-      } else {
-        const dlg = MaskEditorDialogOld.getInstance() as any
-        if (dlg?.isOpened && !dlg.isOpened()) {
-          dlg.show()
-        }
+  commands: [
+    {
+      id: 'Comfy.MaskEditor.OpenMaskEditor',
+      icon: 'pi pi-pencil',
+      label: 'Open Mask Editor for Selected Node',
+      function: () => {
+        const selectedNodes = app.canvas.selected_nodes
+        if (!selectedNodes || Object.keys(selectedNodes).length !== 1) return
+
+        const selectedNode = selectedNodes[Object.keys(selectedNodes)[0]]
+        if (
+          !selectedNode.imgs?.length &&
+          selectedNode.previewMediaType !== 'image'
+        )
+          return
+
+        ComfyApp.copyToClipspace(selectedNode)
+        // @ts-expect-error clipspace_return_node is an extension property added at runtime
+        ComfyApp.clipspace_return_node = selectedNode
+        openMaskEditor()
       }
     }
-
-    // Check if the dialog is already opened
-    function isOpened(): boolean {
-      const useNewEditor = app.extensionManager.setting.get(
-        'Comfy.MaskEditor.UseNewEditor'
-      )
-      if (useNewEditor) {
-        return MaskEditorDialog.instance?.isOpened?.() ?? false
-      } else {
-        return (MaskEditorDialogOld.instance as any)?.isOpened?.() ?? false
-      }
-    }
-
-    // Assign the created function
+  ],
+  init() {
     ComfyApp.open_maskeditor = openMaskEditor
     ComfyApp.maskeditor_is_opended = isOpened
 
-    // Ensure boolean return type
-    const context_predicate = (): boolean => {
-      return !!(
-        ComfyApp.clipspace &&
-        ComfyApp.clipspace.imgs &&
-        ComfyApp.clipspace.imgs.length > 0
-      )
-    }
-
     ClipspaceDialog.registerButton(
       'MaskEditor',
       context_predicate,

src/locales/en/commands.json

@@ -98,6 +98,9 @@
   "Comfy_Feedback": {
     "label": "Give Feedback"
   },
+  "Comfy_Graph_ConvertToSubgraph": {
+    "label": "Convert Selection to Subgraph"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Fit Group To Contents"
   },
@@ -140,6 +143,9 @@
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "Toggle Progress Dialog"
   },
+  "Comfy_MaskEditor_OpenMaskEditor": {
+    "label": "Open Mask Editor for Selected Node"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "New Blank Workflow"
   },

src/locales/en/main.json

@@ -203,7 +203,9 @@
     "validation": {
       "maxLength": "Message too long",
       "invalidEmail": "Please enter a valid email address",
-      "selectIssueType": "Please select an issue type"
+      "selectIssueType": "Please select an issue type",
+      "descriptionRequired": "Description is required",
+      "helpTypeRequired": "Help type is required"
     }
   },
   "color": {
@@ -786,6 +788,7 @@
     "Export": "Export",
     "Export (API)": "Export (API)",
     "Give Feedback": "Give Feedback",
+    "Convert Selection to Subgraph": "Convert Selection to Subgraph",
     "Fit Group To Contents": "Fit Group To Contents",
     "Group Selected Nodes": "Group Selected Nodes",
     "Convert selected nodes to group node": "Convert selected nodes to group node",
@@ -800,6 +803,7 @@
     "Load Default Workflow": "Load Default Workflow",
     "Custom Nodes Manager": "Custom Nodes Manager",
     "Toggle Progress Dialog": "Toggle Progress Dialog",
+    "Open Mask Editor for Selected Node": "Open Mask Editor for Selected Node",
     "New": "New",
     "Clipspace": "Clipspace",
     "Open": "Open",
@@ -883,7 +887,8 @@
     "3D": "3D",
     "Light": "Light",
     "User": "User",
-    "Credits": "Credits"
+    "Credits": "Credits",
+    "API Nodes": "API Nodes"
   },
   "serverConfigItems": {
     "listen": {
@@ -1227,7 +1232,8 @@
     "stopRecording": "Stop Recording",
     "exportRecording": "Export Recording",
     "clearRecording": "Clear Recording",
-    "resizeNodeMatchOutput": "Resize Node to match output"
+    "resizeNodeMatchOutput": "Resize Node to match output",
+    "loadingBackgroundImage": "Loading Background Image"
   },
   "toastMessages": {
     "nothingToQueue": "Nothing to queue",
@@ -1263,7 +1269,9 @@
     "failedToPurchaseCredits": "Failed to purchase credits: {error}",
     "unauthorizedDomain": "Your domain {domain} is not authorized to use this service. Please contact {email} to add your domain to the whitelist.",
     "useApiKeyTip": "Tip: Can't access normal login? Use the Comfy API Key option.",
-    "nothingSelected": "Nothing selected"
+    "nothingSelected": "Nothing selected",
+    "cannotCreateSubgraph": "Cannot create subgraph",
+    "failedToConvertToSubgraph": "Failed to convert items to subgraph"
   },
   "auth": {
     "apiKey": {

src/locales/en/settings.json

@@ -225,6 +225,9 @@
       "Hide built-in": "Hide built-in"
     }
   },
+  "Comfy_NodeBadge_ShowApiPricing": {
+    "name": "Show API node pricing badge"
+  },
   "Comfy_NodeSearchBoxImpl": {
     "name": "Node search box implementation",
     "options": {

src/locales/es/commands.json

@@ -98,6 +98,9 @@
   "Comfy_Feedback": {
     "label": "Dar retroalimentación"
   },
+  "Comfy_Graph_ConvertToSubgraph": {
+    "label": "Convertir selección en subgrafo"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Ajustar grupo al contenido"
   },
@@ -140,6 +143,9 @@
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "Alternar diálogo de progreso del administrador"
   },
+  "Comfy_MaskEditor_OpenMaskEditor": {
+    "label": "Abrir editor de máscara para el nodo seleccionado"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "Nuevo flujo de trabajo en blanco"
   },

src/locales/es/main.json

@@ -498,6 +498,8 @@
     "submitErrorReport": "Enviar Reporte de Error (Opcional)",
     "systemStats": "Estadísticas del Sistema",
     "validation": {
+      "descriptionRequired": "Se requiere una descripción",
+      "helpTypeRequired": "Se requiere el tipo de ayuda",
       "invalidEmail": "Por favor ingresa una dirección de correo electrónico válida",
       "maxLength": "Mensaje demasiado largo",
       "selectIssueType": "Por favor, seleccione un tipo de problema"
@@ -518,6 +520,7 @@
     "fov": "FOV",
     "light": "Luz",
     "lightIntensity": "Intensidad de luz",
+    "loadingBackgroundImage": "Cargando imagen de fondo",
     "loadingModel": "Cargando modelo 3D...",
     "materialMode": "Modo de material",
     "materialModes": {
@@ -683,6 +686,7 @@
     "ComfyUI Forum": "Foro de ComfyUI",
     "ComfyUI Issues": "Problemas de ComfyUI",
     "Contact Support": "Contactar soporte",
+    "Convert Selection to Subgraph": "Convertir selección en subgrafo",
     "Convert selected nodes to group node": "Convertir nodos seleccionados en nodo de grupo",
     "Custom Nodes Manager": "Gestor de nodos personalizados",
     "Delete Selected Items": "Eliminar elementos seleccionados",
@@ -707,6 +711,7 @@
     "Open DevTools": "Abrir DevTools",
     "Open Inputs Folder": "Abrir carpeta de entradas",
     "Open Logs Folder": "Abrir carpeta de registros",
+    "Open Mask Editor for Selected Node": "Abrir el editor de mask para el nodo seleccionado",
     "Open Models Folder": "Abrir carpeta de modelos",
     "Open Outputs Folder": "Abrir carpeta de salidas",
     "Open Sign In Dialog": "Abrir diálogo de inicio de sesión",
@@ -997,6 +1002,7 @@
   },
   "settingsCategories": {
     "3D": "3D",
+    "API Nodes": "Nodos API",
     "About": "Acerca de",
     "Appearance": "Apariencia",
     "BrushAdjustment": "Ajuste de Pincel",
@@ -1320,6 +1326,7 @@
     "title": "Comienza con una Plantilla"
   },
   "toastMessages": {
+    "cannotCreateSubgraph": "No se puede crear el subgrafo",
     "couldNotDetermineFileType": "No se pudo determinar el tipo de archivo",
     "dropFileError": "No se puede procesar el elemento soltado: {error}",
     "emptyCanvas": "Lienzo vacío",
@@ -1328,6 +1335,7 @@
     "errorSaveSetting": "Error al guardar la configuración {id}: {err}",
     "failedToAccessBillingPortal": "No se pudo acceder al portal de facturación: {error}",
     "failedToApplyTexture": "Error al aplicar textura",
+    "failedToConvertToSubgraph": "No se pudo convertir los elementos en subgrafo",
     "failedToCreateCustomer": "No se pudo crear el cliente: {error}",
     "failedToDownloadFile": "Error al descargar el archivo",
     "failedToExportModel": "Error al exportar modelo como {format}",

src/locales/es/settings.json

@@ -193,6 +193,9 @@
       "Show all": "Mostrar todo"
     }
   },
+  "Comfy_NodeBadge_ShowApiPricing": {
+    "name": "Mostrar insignia de precios de nodo API"
+  },
   "Comfy_NodeSearchBoxImpl": {
     "name": "Implementación de la caja de búsqueda de nodos",
     "options": {

src/locales/fr/commands.json

@@ -98,6 +98,9 @@
   "Comfy_Feedback": {
     "label": "Retour d'information"
   },
+  "Comfy_Graph_ConvertToSubgraph": {
+    "label": "Convertir la sélection en sous-graphe"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Ajuster le groupe au contenu"
   },
@@ -140,6 +143,9 @@
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "Basculer la boîte de dialogue de progression"
   },
+  "Comfy_MaskEditor_OpenMaskEditor": {
+    "label": "Ouvrir l'éditeur de masque pour le nœud sélectionné"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "Nouveau flux de travail vierge"
   },

src/locales/fr/main.json

@@ -498,6 +498,8 @@
     "submitErrorReport": "Soumettre un rapport d'erreur (Facultatif)",
     "systemStats": "Statistiques du système",
     "validation": {
+      "descriptionRequired": "La description est requise",
+      "helpTypeRequired": "Le type d'aide est requis",
       "invalidEmail": "Veuillez entrer une adresse e-mail valide",
       "maxLength": "Message trop long",
       "selectIssueType": "Veuillez sélectionner un type de problème"
@@ -518,6 +520,7 @@
     "fov": "FOV",
     "light": "Lumière",
     "lightIntensity": "Intensité de la lumière",
+    "loadingBackgroundImage": "Chargement de l’image d’arrière-plan",
     "loadingModel": "Chargement du modèle 3D...",
     "materialMode": "Mode Matériel",
     "materialModes": {
@@ -683,6 +686,7 @@
     "ComfyUI Forum": "Forum ComfyUI",
     "ComfyUI Issues": "Problèmes de ComfyUI",
     "Contact Support": "Contacter le support",
+    "Convert Selection to Subgraph": "Convertir la sélection en sous-graphe",
     "Convert selected nodes to group node": "Convertir les nœuds sélectionnés en nœud de groupe",
     "Custom Nodes Manager": "Gestionnaire de Nœuds Personnalisés",
     "Delete Selected Items": "Supprimer les éléments sélectionnés",
@@ -707,6 +711,7 @@
     "Open DevTools": "Ouvrir DevTools",
     "Open Inputs Folder": "Ouvrir le dossier des entrées",
     "Open Logs Folder": "Ouvrir le dossier des journaux",
+    "Open Mask Editor for Selected Node": "Ouvrir l’éditeur de mask pour le nœud sélectionné",
     "Open Models Folder": "Ouvrir le dossier des modèles",
     "Open Outputs Folder": "Ouvrir le dossier des sorties",
     "Open Sign In Dialog": "Ouvrir la boîte de dialogue de connexion",
@@ -997,6 +1002,7 @@
   },
   "settingsCategories": {
     "3D": "3D",
+    "API Nodes": "Nœuds API",
     "About": "À Propos",
     "Appearance": "Apparence",
     "BrushAdjustment": "Ajustement de Brosse",
@@ -1320,6 +1326,7 @@
     "title": "Commencez avec un modèle"
   },
   "toastMessages": {
+    "cannotCreateSubgraph": "Impossible de créer le sous-graphe",
     "couldNotDetermineFileType": "Impossible de déterminer le type de fichier",
     "dropFileError": "Impossible de traiter l'élément déposé : {error}",
     "emptyCanvas": "Toile vide",
@@ -1328,6 +1335,7 @@
     "errorSaveSetting": "Erreur lors de l'enregistrement du paramètre {id}: {err}",
     "failedToAccessBillingPortal": "Échec de l'accès au portail de facturation : {error}",
     "failedToApplyTexture": "Échec de l'application de la texture",
+    "failedToConvertToSubgraph": "Échec de la conversion des éléments en sous-graphe",
     "failedToCreateCustomer": "Échec de la création du client : {error}",
     "failedToDownloadFile": "Échec du téléchargement du fichier",
     "failedToExportModel": "Échec de l'exportation du modèle en {format}",

src/locales/fr/settings.json

@@ -193,6 +193,9 @@
       "Show all": "Afficher tout"
     }
   },
+  "Comfy_NodeBadge_ShowApiPricing": {
+    "name": "Afficher l’insigne de tarification API du nœud"
+  },
   "Comfy_NodeSearchBoxImpl": {
     "name": "Implémentation de la boîte de recherche de nœud",
     "options": {

src/locales/ja/commands.json

@@ -98,6 +98,9 @@
   "Comfy_Feedback": {
     "label": "フィードバック"
   },
+  "Comfy_Graph_ConvertToSubgraph": {
+    "label": "選択範囲をサブグラフに変換"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "グループを内容に合わせて調整"
   },
@@ -140,6 +143,9 @@
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "プログレスダイアログの切り替え"
   },
+  "Comfy_MaskEditor_OpenMaskEditor": {
+    "label": "選択したノードのマスクエディタを開く"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "新しい空のワークフロー"
   },

src/locales/ja/main.json

@@ -498,6 +498,8 @@
     "submitErrorReport": "エラーレポートを提出する（オプション）",
     "systemStats": "システム統計",
     "validation": {
+      "descriptionRequired": "説明は必須です",
+      "helpTypeRequired": "ヘルプの種類は必須です",
       "invalidEmail": "有効なメールアドレスを入力してください",
       "maxLength": "メッセージが長すぎます",
       "selectIssueType": "問題の種類を選択してください"
@@ -518,6 +520,7 @@
     "fov": "FOV",
     "light": "ライト",
     "lightIntensity": "光の強度",
+    "loadingBackgroundImage": "背景画像を読み込んでいます",
     "loadingModel": "3Dモデルを読み込んでいます...",
     "materialMode": "マテリアルモード",
     "materialModes": {
@@ -683,6 +686,7 @@
     "ComfyUI Forum": "ComfyUI フォーラム",
     "ComfyUI Issues": "ComfyUIの問題",
     "Contact Support": "サポートに連絡",
+    "Convert Selection to Subgraph": "選択範囲をサブグラフに変換",
     "Convert selected nodes to group node": "選択したノードをグループノードに変換",
     "Custom Nodes Manager": "カスタムノードマネージャ",
     "Delete Selected Items": "選択したアイテムを削除",
@@ -707,6 +711,7 @@
     "Open DevTools": "DevToolsを開く",
     "Open Inputs Folder": "入力フォルダを開く",
     "Open Logs Folder": "ログフォルダを開く",
+    "Open Mask Editor for Selected Node": "選択したノードのマスクエディタを開く",
     "Open Models Folder": "モデルフォルダを開く",
     "Open Outputs Folder": "出力フォルダを開く",
     "Open Sign In Dialog": "サインインダイアログを開く",
@@ -997,6 +1002,7 @@
   },
   "settingsCategories": {
     "3D": "3D",
+    "API Nodes": "APIノード",
     "About": "情報",
     "Appearance": "外観",
     "BrushAdjustment": "ブラシ調整",
@@ -1320,6 +1326,7 @@
     "title": "テンプレートを利用して開始"
   },
   "toastMessages": {
+    "cannotCreateSubgraph": "サブグラフを作成できません",
     "couldNotDetermineFileType": "ファイルタイプを判断できませんでした",
     "dropFileError": "ドロップされたアイテムを処理できません: {error}",
     "emptyCanvas": "キャンバスが空です",
@@ -1328,6 +1335,7 @@
     "errorSaveSetting": "設定{id}の保存エラー: {err}",
     "failedToAccessBillingPortal": "請求ポータルへのアクセスに失敗しました: {error}",
     "failedToApplyTexture": "テクスチャの適用に失敗しました",
+    "failedToConvertToSubgraph": "アイテムをサブグラフに変換できませんでした",
     "failedToCreateCustomer": "顧客の作成に失敗しました: {error}",
     "failedToDownloadFile": "ファイルのダウンロードに失敗しました",
     "failedToExportModel": "{format}としてモデルのエクスポートに失敗しました",

src/locales/ja/settings.json

@@ -193,6 +193,9 @@
       "Show all": "すべて表示"
     }
   },
+  "Comfy_NodeBadge_ShowApiPricing": {
+    "name": "APIノードの料金バッジを表示"
+  },
   "Comfy_NodeSearchBoxImpl": {
     "name": "ノード検索ボックスの実装",
     "options": {

src/locales/ko/commands.json

@@ -98,6 +98,9 @@
   "Comfy_Feedback": {
     "label": "피드백"
   },
+  "Comfy_Graph_ConvertToSubgraph": {
+    "label": "선택 영역을 서브그래프로 변환"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "그룹을 내용에 맞게 맞추기"
   },
@@ -140,6 +143,9 @@
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "진행 상황 대화 상자 전환"
   },
+  "Comfy_MaskEditor_OpenMaskEditor": {
+    "label": "선택한 노드 마스크 편집기 열기"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "새로운 빈 워크플로"
   },

src/locales/ko/main.json

@@ -498,6 +498,8 @@
     "submitErrorReport": "오류 보고서 제출 (선택 사항)",
     "systemStats": "시스템 통계",
     "validation": {
+      "descriptionRequired": "설명은 필수입니다",
+      "helpTypeRequired": "도움 유형은 필수입니다",
       "invalidEmail": "유효한 이메일 주소를 입력해 주세요",
       "maxLength": "메시지가 너무 깁니다",
       "selectIssueType": "문제 유형을 선택해 주세요"
@@ -518,6 +520,7 @@
     "fov": "FOV",
     "light": "빛",
     "lightIntensity": "조명 강도",
+    "loadingBackgroundImage": "배경 이미지 불러오는 중",
     "loadingModel": "3D 모델 로딩 중...",
     "materialMode": "재질 모드",
     "materialModes": {
@@ -683,6 +686,7 @@
     "ComfyUI Forum": "ComfyUI 포럼",
     "ComfyUI Issues": "ComfyUI 이슈 페이지",
     "Contact Support": "고객 지원 문의",
+    "Convert Selection to Subgraph": "선택 영역을 서브그래프로 변환",
     "Convert selected nodes to group node": "선택한 노드를 그룹 노드로 변환",
     "Custom Nodes Manager": "사용자 정의 노드 관리자",
     "Delete Selected Items": "선택한 항목 삭제",
@@ -707,6 +711,7 @@
     "Open DevTools": "개발자 도구 열기",
     "Open Inputs Folder": "입력 폴더 열기",
     "Open Logs Folder": "로그 폴더 열기",
+    "Open Mask Editor for Selected Node": "선택한 노드의 마스크 에디터 열기",
     "Open Models Folder": "모델 폴더 열기",
     "Open Outputs Folder": "출력 폴더 열기",
     "Open Sign In Dialog": "로그인 대화 상자 열기",
@@ -997,6 +1002,7 @@
   },
   "settingsCategories": {
     "3D": "3D",
+    "API Nodes": "API 노드",
     "About": "정보",
     "Appearance": "모양",
     "BrushAdjustment": "브러시 조정",
@@ -1320,6 +1326,7 @@
     "title": "템플릿으로 시작하기"
   },
   "toastMessages": {
+    "cannotCreateSubgraph": "서브그래프를 생성할 수 없습니다",
     "couldNotDetermineFileType": "파일 유형을 결정할 수 없습니다",
     "dropFileError": "드롭된 항목을 처리할 수 없습니다: {error}",
     "emptyCanvas": "빈 캔버스",
@@ -1328,6 +1335,7 @@
     "errorSaveSetting": "설정 {id} 저장 오류: {err}",
     "failedToAccessBillingPortal": "결제 포털에 접근하지 못했습니다: {error}",
     "failedToApplyTexture": "텍스처 적용에 실패했습니다",
+    "failedToConvertToSubgraph": "항목을 서브그래프로 변환하지 못했습니다",
     "failedToCreateCustomer": "고객 생성에 실패했습니다: {error}",
     "failedToDownloadFile": "파일 다운로드에 실패했습니다",
     "failedToExportModel": "{format} 형식으로 모델 내보내기에 실패했습니다",

src/locales/ko/settings.json

@@ -193,6 +193,9 @@
       "Show all": "모두 표시"
     }
   },
+  "Comfy_NodeBadge_ShowApiPricing": {
+    "name": "API 노드 가격 배지 표시"
+  },
   "Comfy_NodeSearchBoxImpl": {
     "name": "노드 검색 상자 구현",
     "options": {

src/locales/ru/commands.json

@@ -98,6 +98,9 @@
   "Comfy_Feedback": {
     "label": "Обратная связь"
   },
+  "Comfy_Graph_ConvertToSubgraph": {
+    "label": "Преобразовать выделенное в подграф"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Подогнать группу к содержимому"
   },
@@ -140,6 +143,9 @@
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "Переключить диалоговое окно прогресса"
   },
+  "Comfy_MaskEditor_OpenMaskEditor": {
+    "label": "Открыть редактор масок для выбранной ноды"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "Новый пустой рабочий процесс"
   },

src/locales/ru/main.json

@@ -498,6 +498,8 @@
     "submitErrorReport": "Отправить отчёт об ошибке (необязательно)",
     "systemStats": "Статистика системы",
     "validation": {
+      "descriptionRequired": "Описание обязательно",
+      "helpTypeRequired": "Тип помощи обязателен",
       "invalidEmail": "Пожалуйста, введите действительный адрес электронной почты",
       "maxLength": "Сообщение слишком длинное",
       "selectIssueType": "Пожалуйста, выберите тип проблемы"
@@ -518,6 +520,7 @@
     "fov": "Угол обзора",
     "light": "Свет",
     "lightIntensity": "Интенсивность света",
+    "loadingBackgroundImage": "Загрузка фонового изображения",
     "loadingModel": "Загрузка 3D модели...",
     "materialMode": "Режим Материала",
     "materialModes": {
@@ -683,6 +686,7 @@
     "ComfyUI Forum": "Форум ComfyUI",
     "ComfyUI Issues": "Проблемы ComfyUI",
     "Contact Support": "Связаться с поддержкой",
+    "Convert Selection to Subgraph": "Преобразовать выделенное в подграф",
     "Convert selected nodes to group node": "Преобразовать выбранные ноды в групповую ноду",
     "Custom Nodes Manager": "Менеджер Пользовательских Узлов",
     "Delete Selected Items": "Удалить выбранные элементы",
@@ -707,6 +711,7 @@
     "Open DevTools": "Открыть инструменты разработчика",
     "Open Inputs Folder": "Открыть папку входных данных",
     "Open Logs Folder": "Открыть папку журналов",
+    "Open Mask Editor for Selected Node": "Открыть редактор масок для выбранного узла",
     "Open Models Folder": "Открыть папку моделей",
     "Open Outputs Folder": "Открыть папку выходных данных",
     "Open Sign In Dialog": "Открыть окно входа",
@@ -997,6 +1002,7 @@
   },
   "settingsCategories": {
     "3D": "3D",
+    "API Nodes": "API-узлы",
     "About": "О программе",
     "Appearance": "Внешний вид",
     "BrushAdjustment": "Настройка кисти",
@@ -1320,6 +1326,7 @@
     "title": "Начните с шаблона"
   },
   "toastMessages": {
+    "cannotCreateSubgraph": "Невозможно создать подграф",
     "couldNotDetermineFileType": "Не удалось определить тип файла",
     "dropFileError": "Не удалось обработать перетаскиваемый элемент: {error}",
     "emptyCanvas": "Пустой холст",
@@ -1328,6 +1335,7 @@
     "errorSaveSetting": "Ошибка сохранения настройки {id}: {err}",
     "failedToAccessBillingPortal": "Не удалось получить доступ к биллинговому порталу: {error}",
     "failedToApplyTexture": "Не удалось применить текстуру",
+    "failedToConvertToSubgraph": "Не удалось преобразовать элементы в подграф",
     "failedToCreateCustomer": "Не удалось создать клиента: {error}",
     "failedToDownloadFile": "Не удалось скачать файл",
     "failedToExportModel": "Не удалось экспортировать модель как {format}",

src/locales/ru/settings.json

@@ -193,6 +193,9 @@
       "Show all": "Показать все"
     }
   },
+  "Comfy_NodeBadge_ShowApiPricing": {
+    "name": "Показать значок стоимости узла API"
+  },
   "Comfy_NodeSearchBoxImpl": {
     "name": "Реализация поискового поля нод",
     "options": {

src/locales/zh/commands.json

@@ -98,6 +98,9 @@
   "Comfy_Feedback": {
     "label": "反馈"
   },
+  "Comfy_Graph_ConvertToSubgraph": {
+    "label": "将选区转换为子图"
+  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "适应节点框到内容"
   },
@@ -140,6 +143,9 @@
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "切换进度对话框"
   },
+  "Comfy_MaskEditor_OpenMaskEditor": {
+    "label": "打开选中节点的遮罩编辑器"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "新建空白工作流"
   },

src/locales/zh/main.json

@@ -498,6 +498,8 @@
     "submitErrorReport": "提交错误报告（可选）",
     "systemStats": "系统状态",
     "validation": {
+      "descriptionRequired": "描述为必填项",
+      "helpTypeRequired": "帮助类型为必选项",
       "invalidEmail": "请输入有效的电子邮件地址",
       "maxLength": "消息过长",
       "selectIssueType": "请选择一个问题类型"
@@ -518,6 +520,7 @@
     "fov": "视场",
     "light": "灯光",
     "lightIntensity": "光照强度",
+    "loadingBackgroundImage": "正在加载背景图像",
     "loadingModel": "正在加载3D模型...",
     "materialMode": "材质模式",
     "materialModes": {
@@ -683,6 +686,7 @@
     "ComfyUI Forum": "ComfyUI 论坛",
     "ComfyUI Issues": "ComfyUI 问题",
     "Contact Support": "联系支持",
+    "Convert Selection to Subgraph": "将选中内容转换为子图",
     "Convert selected nodes to group node": "将选中节点转换为组节点",
     "Custom Nodes Manager": "自定义节点管理器",
     "Delete Selected Items": "删除选定的项目",
@@ -707,6 +711,7 @@
     "Open DevTools": "打开开发者工具",
     "Open Inputs Folder": "打开输入文件夹",
     "Open Logs Folder": "打开日志文件夹",
+    "Open Mask Editor for Selected Node": "为选中节点打开 Mask 编辑器",
     "Open Models Folder": "打开模型文件夹",
     "Open Outputs Folder": "打开输出文件夹",
     "Open Sign In Dialog": "打开登录对话框",
@@ -997,6 +1002,7 @@
   },
   "settingsCategories": {
     "3D": "3D",
+    "API Nodes": "API 节点",
     "About": "关于",
     "Appearance": "外观",
     "BrushAdjustment": "画笔调整",
@@ -1320,6 +1326,7 @@
     "title": "从模板开始"
   },
   "toastMessages": {
+    "cannotCreateSubgraph": "无法创建子图",
     "couldNotDetermineFileType": "无法确定文件类型",
     "dropFileError": "无法处理掉落的项目：{error}",
     "emptyCanvas": "画布为空",
@@ -1328,6 +1335,7 @@
     "errorSaveSetting": "保存设置 {id} 出错：{err}",
     "failedToAccessBillingPortal": "访问账单门户失败：{error}",
     "failedToApplyTexture": "应用纹理失败",
+    "failedToConvertToSubgraph": "无法将项目转换为子图",
     "failedToCreateCustomer": "创建客户失败：{error}",
     "failedToDownloadFile": "文件下载失败",
     "failedToExportModel": "无法将模型导出为 {format}",

src/locales/zh/settings.json

@@ -193,6 +193,9 @@
       "Show all": "显示全部"
     }
   },
+  "Comfy_NodeBadge_ShowApiPricing": {
+    "name": "显示 API 节点定价徽章"
+  },
   "Comfy_NodeSearchBoxImpl": {
     "name": "节点搜索框",
     "options": {

src/schemas/apiSchema.ts

@@ -421,6 +421,7 @@ const zSettings = z.object({
   'Comfy.NodeBadge.NodeSourceBadgeMode': zNodeBadgeMode,
   'Comfy.NodeBadge.NodeIdBadgeMode': zNodeBadgeMode,
   'Comfy.NodeBadge.NodeLifeCycleBadgeMode': zNodeBadgeMode,
+  'Comfy.NodeBadge.ShowApiPricing': z.boolean(),
   'Comfy.QueueButton.BatchCountLimit': z.number(),
   'Comfy.Queue.MaxHistoryItems': z.number(),
   'Comfy.Keybinding.UnsetBindings': z.array(zKeybinding),

src/schemas/comfyWorkflowSchema.ts

@@ -41,10 +41,10 @@ const zModelFile = z.object({
 
 const zGraphState = z
   .object({
-    lastGroupid: z.number().optional(),
-    lastNodeId: z.number().optional(),
-    lastLinkId: z.number().optional(),
-    lastRerouteId: z.number().optional()
+    lastGroupId: z.number(),
+    lastNodeId: z.number(),
+    lastLinkId: z.number(),
+    lastRerouteId: z.number()
   })
   .passthrough()
 
@@ -214,6 +214,32 @@ const zComfyNode = z
   })
   .passthrough()
 
+export const zSubgraphIO = zNodeInput.extend({
+  /** Slot ID (internal; never changes once instantiated). */
+  id: z.string().uuid(),
+  /** The data type this slot uses. Unlike nodes, this does not support legacy numeric types. */
+  type: z.string(),
+  /** Links connected to this slot, or `undefined` if not connected. An ouptut slot should only ever have one link. */
+  linkIds: z.array(z.number()).optional()
+})
+
+const zSubgraphInstance = z
+  .object({
+    id: zNodeId,
+    type: z.string().uuid(),
+    pos: zVector2,
+    size: zVector2,
+    flags: zFlags,
+    order: z.number(),
+    mode: z.number(),
+    inputs: z.array(zSubgraphIO).optional(),
+    outputs: z.array(zSubgraphIO).optional(),
+    widgets_values: zWidgetValues.optional(),
+    color: z.string().optional(),
+    bgcolor: z.string().optional()
+  })
+  .passthrough()
+
 const zGroup = z
   .object({
     id: z.number().optional(),
@@ -248,9 +274,22 @@ const zExtra = z
   })
   .passthrough()
 
+export const zGraphDefinitions = z.object({
+  subgraphs: z.lazy(() => z.array(zSubgraphDefinition))
+})
+
+export const zBaseExportableGraph = z.object({
+  /** Unique graph ID.  Automatically generated if not provided. */
+  id: z.string().uuid().optional(),
+  revision: z.number().optional(),
+  config: zConfig.optional().nullable(),
+  /** Details of the appearance and location of subgraphs shown in this graph. Similar to */
+  subgraphs: z.array(zSubgraphInstance).optional()
+})
+
 /** Schema version 0.4 */
-export const zComfyWorkflow = z
-  .object({
+export const zComfyWorkflow = zBaseExportableGraph
+  .extend({
     id: z.string().uuid().optional(),
     revision: z.number().optional(),
     last_node_id: zNodeId,
@@ -262,13 +301,47 @@ export const zComfyWorkflow = z
     config: zConfig.optional().nullable(),
     extra: zExtra.optional().nullable(),
     version: z.number(),
-    models: z.array(zModelFile).optional()
+    models: z.array(zModelFile).optional(),
+    definitions: zGraphDefinitions.optional()
   })
   .passthrough()
 
+/** Required for recursive definition of subgraphs. */
+interface ComfyWorkflow1BaseType {
+  id?: string
+  revision?: number
+  version: 1
+  models?: z.infer<typeof zModelFile>[]
+  state: z.infer<typeof zGraphState>
+}
+
+/** Required for recursive definition of subgraphs w/ZodEffects. */
+interface ComfyWorkflow1BaseInput extends ComfyWorkflow1BaseType {
+  groups?: z.input<typeof zGroup>[]
+  nodes: z.input<typeof zComfyNode>[]
+  links?: z.input<typeof zComfyLinkObject>[]
+  floatingLinks?: z.input<typeof zComfyLinkObject>[]
+  reroutes?: z.input<typeof zReroute>[]
+  definitions?: {
+    subgraphs: SubgraphDefinitionBase<ComfyWorkflow1BaseInput>[]
+  }
+}
+
+/** Required for recursive definition of subgraphs w/ZodEffects. */
+interface ComfyWorkflow1BaseOutput extends ComfyWorkflow1BaseType {
+  groups?: z.output<typeof zGroup>[]
+  nodes: z.output<typeof zComfyNode>[]
+  links?: z.output<typeof zComfyLinkObject>[]
+  floatingLinks?: z.output<typeof zComfyLinkObject>[]
+  reroutes?: z.output<typeof zReroute>[]
+  definitions?: {
+    subgraphs: SubgraphDefinitionBase<ComfyWorkflow1BaseOutput>[]
+  }
+}
+
 /** Schema version 1 */
-export const zComfyWorkflow1 = z
-  .object({
+export const zComfyWorkflow1 = zBaseExportableGraph
+  .extend({
     id: z.string().uuid().optional(),
     revision: z.number().optional(),
     version: z.literal(1),
@@ -280,7 +353,96 @@ export const zComfyWorkflow1 = z
     floatingLinks: z.array(zComfyLinkObject).optional(),
     reroutes: z.array(zReroute).optional(),
     extra: zExtra.optional().nullable(),
-    models: z.array(zModelFile).optional()
+    models: z.array(zModelFile).optional(),
+    definitions: z
+      .object({
+        subgraphs: z.lazy(
+          (): z.ZodArray<
+            z.ZodType<
+              SubgraphDefinitionBase<ComfyWorkflow1BaseOutput>,
+              z.ZodTypeDef,
+              SubgraphDefinitionBase<ComfyWorkflow1BaseInput>
+            >,
+            'many'
+          > => z.array(zSubgraphDefinition)
+        )
+      })
+      .optional()
+  })
+  .passthrough()
+
+export const zExportedSubgraphIONode = z.object({
+  id: zNodeId,
+  bounding: z.tuple([z.number(), z.number(), z.number(), z.number()]),
+  pinned: z.boolean().optional()
+})
+
+export const zExposedWidget = z.object({
+  id: z.string(),
+  name: z.string()
+})
+
+interface SubgraphDefinitionBase<
+  T extends ComfyWorkflow1BaseInput | ComfyWorkflow1BaseOutput
+> {
+  /** Unique graph ID.  Automatically generated if not provided. */
+  id: string
+  revision: number
+  name: string
+
+  inputNode: T extends ComfyWorkflow1BaseInput
+    ? z.input<typeof zExportedSubgraphIONode>
+    : z.output<typeof zExportedSubgraphIONode>
+  outputNode: T extends ComfyWorkflow1BaseInput
+    ? z.input<typeof zExportedSubgraphIONode>
+    : z.output<typeof zExportedSubgraphIONode>
+  /** Ordered list of inputs to the subgraph itself. Similar to a reroute, with the input side in the graph, and the output side in the subgraph. */
+  inputs?: T extends ComfyWorkflow1BaseInput
+    ? z.input<typeof zSubgraphIO>[]
+    : z.output<typeof zSubgraphIO>[]
+  /** Ordered list of outputs from the subgraph itself. Similar to a reroute, with the input side in the subgraph, and the output side in the graph. */
+  outputs?: T extends ComfyWorkflow1BaseInput
+    ? z.input<typeof zSubgraphIO>[]
+    : z.output<typeof zSubgraphIO>[]
+  /** A list of node widgets displayed in the parent graph, on the subgraph object. */
+  widgets?: T extends ComfyWorkflow1BaseInput
+    ? z.input<typeof zExposedWidget>[]
+    : z.output<typeof zExposedWidget>[]
+  definitions?: {
+    subgraphs: SubgraphDefinitionBase<T>[]
+  }
+}
+
+/** A subgraph definition `worfklow.definitions.subgraphs` */
+export const zSubgraphDefinition = zComfyWorkflow1
+  .extend({
+    /** Unique graph ID.  Automatically generated if not provided. */
+    id: z.string().uuid(),
+    revision: z.number(),
+    name: z.string(),
+    inputNode: zExportedSubgraphIONode,
+    outputNode: zExportedSubgraphIONode,
+
+    /** Ordered list of inputs to the subgraph itself. Similar to a reroute, with the input side in the graph, and the output side in the subgraph. */
+    inputs: z.array(zSubgraphIO).optional(),
+    /** Ordered list of outputs from the subgraph itself. Similar to a reroute, with the input side in the subgraph, and the output side in the graph. */
+    outputs: z.array(zSubgraphIO).optional(),
+    /** A list of node widgets displayed in the parent graph, on the subgraph object. */
+    widgets: z.array(zExposedWidget).optional(),
+    definitions: z
+      .object({
+        subgraphs: z.lazy(
+          (): z.ZodArray<
+            z.ZodType<
+              SubgraphDefinitionBase<ComfyWorkflow1BaseInput>,
+              z.ZodTypeDef,
+              SubgraphDefinitionBase<ComfyWorkflow1BaseInput>
+            >,
+            'many'
+          > => zSubgraphDefinition.array()
+        )
+      })
+      .optional()
   })
   .passthrough()
 

src/schemas/issueReportSchema.ts

@@ -1,10 +1,16 @@
 import { z } from 'zod'
 
+import { t } from '@/i18n'
+
 const checkboxField = z.boolean().optional()
 export const issueReportSchema = z
   .object({
     contactInfo: z.string().email().max(320).optional().or(z.literal('')),
-    details: z.string().max(5_000).optional(),
+    details: z
+      .string()
+      .min(1, { message: t('validation.descriptionRequired') })
+      .max(5_000, { message: t('validation.maxLength', { length: 5_000 }) })
+      .optional(),
     helpType: z.string().optional()
   })
   .catchall(checkboxField)
@@ -12,7 +18,11 @@ export const issueReportSchema = z
     path: ['details', 'helpType']
   })
   .refine((data) => data.helpType !== undefined && data.helpType !== '', {
-    message: 'Help type is required',
+    message: t('issueReport.validation.helpTypeRequired'),
     path: ['helpType']
   })
+  .refine((data) => data.details !== undefined && data.details !== '', {
+    message: t('issueReport.validation.descriptionRequired'),
+    path: ['details']
+  })
 export type IssueReportFormData = z.infer<typeof issueReportSchema>

src/scripts/app.ts

@@ -39,9 +39,11 @@ import { getSvgMetadata } from '@/scripts/metadata/svg'
 import { useDialogService } from '@/services/dialogService'
 import { useExtensionService } from '@/services/extensionService'
 import { useLitegraphService } from '@/services/litegraphService'
+import { useSubgraphService } from '@/services/subgraphService'
 import { useWorkflowService } from '@/services/workflowService'
 import { useApiKeyAuthStore } from '@/stores/apiKeyAuthStore'
 import { useCommandStore } from '@/stores/commandStore'
+import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useExtensionStore } from '@/stores/extensionStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
@@ -71,7 +73,6 @@ import { deserialiseAndCreate } from '@/utils/vintageClipboard'
 
 import { type ComfyApi, PromptExecutionError, api } from './api'
 import { defaultGraph } from './defaultGraph'
-import { pruneWidgets } from './domWidget'
 import {
   getFlacMetadata,
   getLatentMetadata,
@@ -714,25 +715,23 @@ export class ComfyApp {
   }
 
   #addAfterConfigureHandler() {
-    const app = this
-    const onConfigure = app.graph.onConfigure
-    app.graph.onConfigure = function (this: LGraph, ...args) {
+    const { graph } = this
+    const { onConfigure } = graph
+    graph.onConfigure = function (...args) {
       fixLinkInputSlots(this)
 
       // Fire callbacks before the onConfigure, this is used by widget inputs to setup the config
-      for (const node of app.graph.nodes) {
+      for (const node of graph.nodes) {
         node.onGraphConfigured?.()
       }
 
       const r = onConfigure?.apply(this, args)
 
       // Fire after onConfigure, used by primitives to generate widget using input nodes config
-      for (const node of app.graph.nodes) {
+      for (const node of graph.nodes) {
         node.onAfterGraphConfigured?.()
       }
 
-      pruneWidgets(this.nodes)
-
       return r
     }
   }
@@ -764,6 +763,21 @@ export class ComfyApp {
 
     this.#graph = new LGraph()
 
+    // Register the subgraph - adds type wrapper for Litegraph's `createNode` factory
+    this.graph.events.addEventListener('subgraph-created', (e) => {
+      try {
+        const { subgraph, data } = e.detail
+        useSubgraphService().registerNewSubgraph(subgraph, data)
+      } catch (err) {
+        console.error('Failed to register subgraph', err)
+        useToastStore().add({
+          severity: 'error',
+          summary: 'Failed to register subgraph',
+          detail: err instanceof Error ? err.message : String(err)
+        })
+      }
+    })
+
     this.#addAfterConfigureHandler()
 
     this.canvas = new LGraphCanvas(canvasEl, this.graph)
@@ -776,6 +790,30 @@ export class ComfyApp {
     LiteGraph.alt_drag_do_clone_nodes = true
     LiteGraph.macGesturesRequireMac = false
 
+    this.canvas.canvas.addEventListener<'litegraph:set-graph'>(
+      'litegraph:set-graph',
+      (e) => {
+        // Assertion: Not yet defined in litegraph.
+        const { newGraph } = e.detail
+
+        const nodeSet = new Set(newGraph.nodes)
+        const widgetStore = useDomWidgetStore()
+
+        // Assertions: UnwrapRef
+        for (const { widget } of widgetStore.activeWidgetStates) {
+          if (!nodeSet.has(widget.node)) {
+            widgetStore.deactivateWidget(widget.id)
+          }
+        }
+
+        for (const { widget } of widgetStore.inactiveWidgetStates) {
+          if (nodeSet.has(widget.node)) {
+            widgetStore.activateWidget(widget.id)
+          }
+        }
+      }
+    )
+
     this.graph.start()
 
     // Ensure the canvas fills the window
@@ -1012,6 +1050,7 @@ export class ComfyApp {
       })
     }
     useWorkflowService().beforeLoadNewGraph()
+    useSubgraphService().loadSubgraphs(graphData)
 
     const missingNodeTypes: MissingNodeType[] = []
     const missingModels: ModelFile[] = []
@@ -1207,6 +1246,9 @@ export class ComfyApp {
           // Allow widgets to run callbacks before a prompt has been queued
           // e.g. random seed before every gen
           executeWidgetsCallback(this.graph.nodes, 'beforeQueued')
+          for (const subgraph of this.graph.subgraphs.values()) {
+            executeWidgetsCallback(subgraph.nodes, 'beforeQueued')
+          }
 
           const p = await this.graphToPrompt(this.graph, { queueNodeIds })
           try {
@@ -1249,9 +1291,13 @@ export class ComfyApp {
           executeWidgetsCallback(
             p.workflow.nodes
               .map((n) => this.graph.getNodeById(n.id))
-              .filter((n) => !!n) as LGraphNode[],
+              .filter((n) => !!n),
             'afterQueued'
           )
+          for (const subgraph of this.graph.subgraphs.values()) {
+            executeWidgetsCallback(subgraph.nodes, 'afterQueued')
+          }
+
           this.canvas.draw(true, true)
           await this.ui.queue.update()
         }
@@ -1648,6 +1694,8 @@ export class ComfyApp {
     const executionStore = useExecutionStore()
     executionStore.lastNodeErrors = null
     executionStore.lastExecutionError = null
+
+    useDomWidgetStore().clear()
   }
 
   clientPosToCanvasPos(pos: Vector2): Vector2 {

src/scripts/changeTracker.ts

@@ -6,6 +6,7 @@ import log from 'loglevel'
 import type { ExecutedWsMessage } from '@/schemas/apiSchema'
 import type { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
 import { useExecutionStore } from '@/stores/executionStore'
+import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
 
 import { api } from './api'
@@ -37,6 +38,10 @@ export class ChangeTracker {
   ds?: { scale: number; offset: [number, number] }
   nodeOutputs?: Record<string, any>
 
+  private subgraphState?: {
+    navigation: string[]
+  }
+
   constructor(
     /**
      * The workflow that this change tracker is tracking
@@ -67,6 +72,8 @@ export class ChangeTracker {
       scale: app.canvas.ds.scale,
       offset: [app.canvas.ds.offset[0], app.canvas.ds.offset[1]]
     }
+    const navigation = useSubgraphNavigationStore().exportState()
+    this.subgraphState = navigation.length ? { navigation } : undefined
   }
 
   restore() {
@@ -77,6 +84,16 @@ export class ChangeTracker {
     if (this.nodeOutputs) {
       app.nodeOutputs = this.nodeOutputs
     }
+    if (this.subgraphState) {
+      const { navigation } = this.subgraphState
+      useSubgraphNavigationStore().restoreState(navigation)
+
+      const activeId = navigation.at(-1)
+      if (activeId) {
+        const subgraph = app.graph.subgraphs.get(activeId)
+        if (subgraph) app.canvas.setGraph(subgraph)
+      }
+    }
   }
 
   updateModified() {
@@ -376,7 +393,14 @@ export class ChangeTracker {
         return false
 
       // Compare other properties normally
-      for (const key of ['links', 'floatingLinks', 'reroutes', 'groups']) {
+      for (const key of [
+        'links',
+        'floatingLinks',
+        'reroutes',
+        'groups',
+        'definitions',
+        'subgraphs'
+      ]) {
         if (!_.isEqual(a[key], b[key])) {
           return false
         }
@@ -392,7 +416,12 @@ export class ChangeTracker {
     function sortGraphNodes(graph: ComfyWorkflowJSON) {
       return {
         links: graph.links,
+        floatingLinks: graph.floatingLinks,
+        reroutes: graph.reroutes,
         groups: graph.groups,
+        extra: graph.extra,
+        definitions: graph.definitions,
+        subgraphs: graph.subgraphs,
         nodes: graph.nodes.sort((a, b) => {
           if (typeof a.id === 'number' && typeof b.id === 'number') {
             return a.id - b.id

src/scripts/domWidget.ts

@@ -11,7 +11,7 @@ import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { generateUUID } from '@/utils/formatUtil'
 
-export interface BaseDOMWidget<V extends object | string>
+export interface BaseDOMWidget<V extends object | string = object | string>
   extends IBaseWidget<V, string, DOMWidgetOptions<V>> {
   // ICustomWidget properties
   type: string
@@ -330,9 +330,8 @@ LGraphNode.prototype.addDOMWidget = function <
 export const pruneWidgets = (nodes: LGraphNode[]) => {
   const nodeSet = new Set(nodes)
   const domWidgetStore = useDomWidgetStore()
-  for (const widgetState of domWidgetStore.widgetStates.values()) {
-    const widget = widgetState.widget
-    if (!nodeSet.has(widget.node as LGraphNode)) {
+  for (const { widget } of domWidgetStore.widgetStates.values()) {
+    if (!nodeSet.has(widget.node)) {
       domWidgetStore.unregisterWidget(widget.id)
     }
   }

src/scripts/ui.ts

@@ -1,3 +1,4 @@
+import { WORKFLOW_ACCEPT_STRING } from '@/constants/supportedWorkflowFormats'
 import { type StatusWsMessageStatus, TaskItem } from '@/schemas/apiSchema'
 import { useDialogService } from '@/services/dialogService'
 import { useLitegraphService } from '@/services/litegraphService'
@@ -386,7 +387,7 @@ export class ComfyUI {
     const fileInput = $el('input', {
       id: 'comfy-file-input',
       type: 'file',
-      accept: '.json,image/png,.latent,.safetensors,image/webp,audio/flac',
+      accept: WORKFLOW_ACCEPT_STRING,
       style: { display: 'none' },
       parent: document.body,
       onchange: async () => {

src/services/README.md

@@ -0,0 +1,257 @@
+# Services
+
+This directory contains the service layer for the ComfyUI frontend application. Services encapsulate application logic and functionality into organized, reusable modules.
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Service Architecture](#service-architecture)
+- [Core Services](#core-services)
+- [Service Development Guidelines](#service-development-guidelines)
+- [Common Design Patterns](#common-design-patterns)
+
+## Overview
+
+Services in ComfyUI provide organized modules that implement the application's functionality and logic. They handle operations such as API communication, workflow management, user settings, and other essential features. 
+
+The term "business logic" in this context refers to the code that implements the core functionality and behavior of the application - the rules, processes, and operations that make ComfyUI work as expected, separate from the UI display code.
+
+Services help organize related functionality into cohesive units, making the codebase more maintainable and testable. By centralizing related operations in services, the application achieves better separation of concerns, with UI components focusing on presentation and services handling functional operations.
+
+## Service Architecture
+
+The service layer in ComfyUI follows these architectural principles:
+
+1. **Domain-driven**: Each service focuses on a specific domain of the application
+2. **Stateless when possible**: Services generally avoid maintaining internal state
+3. **Reusable**: Services can be used across multiple components
+4. **Testable**: Services are designed for easy unit testing
+5. **Isolated**: Services have clear boundaries and dependencies
+
+While services can interact with both UI components and stores (centralized state), they primarily focus on implementing functionality rather than managing state. The following diagram illustrates how services fit into the application architecture:
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                    UI Components                         │
+└────────────────────────────┬────────────────────────────┘
+                             │
+                             ▼
+┌─────────────────────────────────────────────────────────┐
+│                     Composables                          │
+└────────────────────────────┬────────────────────────────┘
+                             │
+                             ▼
+┌─────────────────────────────────────────────────────────┐
+│                      Services                            │
+│                                                         │
+│              (Application Functionality)                 │
+└────────────────────────────┬────────────────────────────┘
+                             │
+                 ┌───────────┴───────────┐
+                 ▼                       ▼
+┌───────────────────────────┐ ┌─────────────────────────┐
+│         Stores            │ │       External APIs      │
+│    (Centralized State)    │ │                         │
+└───────────────────────────┘ └─────────────────────────┘
+```
+
+## Core Services
+
+The core services include:
+
+| Service | Description |
+|---------|-------------|
+| algoliaSearchService.ts | Implements search functionality using Algolia |
+| autoQueueService.ts | Manages automatic queue execution |
+| colorPaletteService.ts | Handles color palette management and customization |
+| comfyManagerService.ts | Manages ComfyUI application packages and updates |
+| comfyRegistryService.ts | Handles registration and discovery of ComfyUI extensions |
+| dialogService.ts | Provides dialog and modal management |
+| extensionService.ts | Manages extension registration and lifecycle |
+| keybindingService.ts | Handles keyboard shortcuts and keybindings |
+| litegraphService.ts | Provides utilities for working with the LiteGraph library |
+| load3dService.ts | Manages 3D model loading and visualization |
+| nodeSearchService.ts | Implements node search functionality |
+| workflowService.ts | Handles workflow operations (save, load, execute) |
+
+## Service Development Guidelines
+
+In ComfyUI, services can be implemented using two approaches:
+
+### 1. Class-based Services
+
+For complex services with state management and multiple methods, class-based services are used:
+
+```typescript
+export class NodeSearchService {
+  // Service state
+  private readonly nodeFuseSearch: FuseSearch<ComfyNodeDefImpl>
+  private readonly filters: Record<string, FuseFilter<ComfyNodeDefImpl, string>>
+
+  constructor(data: ComfyNodeDefImpl[]) {
+    // Initialize state
+    this.nodeFuseSearch = new FuseSearch(data, { /* options */ })
+    
+    // Setup filters
+    this.filters = {
+      inputType: new FuseFilter<ComfyNodeDefImpl, string>(/* options */),
+      category: new FuseFilter<ComfyNodeDefImpl, string>(/* options */)
+    }
+  }
+
+  public searchNode(query: string, filters: FuseFilterWithValue[] = []): ComfyNodeDefImpl[] {
+    // Implementation
+    return results
+  }
+}
+```
+
+### 2. Composable-style Services
+
+For simpler services or those that need to integrate with Vue's reactivity system, we prefer using composable-style services:
+
+```typescript
+export function useNodeSearchService(initialData: ComfyNodeDefImpl[]) {
+  // State (reactive if needed)
+  const data = ref(initialData)
+  
+  // Search functionality
+  function searchNodes(query: string) {
+    // Implementation
+    return results
+  }
+  
+  // Additional methods
+  function refreshData(newData: ComfyNodeDefImpl[]) {
+    data.value = newData
+  }
+  
+  // Return public API
+  return {
+    searchNodes,
+    refreshData
+  }
+}
+```
+
+When deciding between these approaches, consider:
+
+1. **Stateful vs. Stateless**: For stateful services, classes often provide clearer encapsulation
+2. **Reactivity needs**: If the service needs to be reactive, composable-style services integrate better with Vue's reactivity system
+3. **Complexity**: For complex services with many methods and internal state, classes can provide better organization
+4. **Testing**: Both approaches can be tested effectively, but composables may be simpler to test with Vue Test Utils
+
+### Service Template
+
+Here's a template for creating a new composable-style service:
+
+```typescript
+/**
+ * Service for managing [domain/functionality]
+ */
+export function useExampleService() {
+  // Private state/functionality
+  const cache = new Map()
+  
+  /**
+   * Description of what this method does
+   * @param param1 Description of parameter
+   * @returns Description of return value
+   */
+  async function performOperation(param1: string) {
+    try {
+      // Implementation
+      return result
+    } catch (error) {
+      // Error handling
+      console.error(`Operation failed: ${error.message}`)
+      throw error
+    }
+  }
+  
+  // Return public API
+  return {
+    performOperation
+  }
+}
+```
+
+## Common Design Patterns
+
+Services in ComfyUI frequently use the following design patterns:
+
+### Caching and Request Deduplication
+
+```typescript
+export function useCachedService() {
+  const cache = new Map()
+  const pendingRequests = new Map()
+  
+  async function fetchData(key: string) {
+    // Check cache first
+    if (cache.has(key)) return cache.get(key)
+    
+    // Check if request is already in progress
+    if (pendingRequests.has(key)) {
+      return pendingRequests.get(key)
+    }
+    
+    // Perform new request
+    const requestPromise = fetch(`/api/${key}`)
+      .then(response => response.json())
+      .then(data => {
+        cache.set(key, data)
+        pendingRequests.delete(key)
+        return data
+      })
+    
+    pendingRequests.set(key, requestPromise)
+    return requestPromise
+  }
+  
+  return { fetchData }
+}
+```
+
+### Factory Pattern
+
+```typescript
+export function useNodeFactory() {
+  function createNode(type: string, config: Record<string, any>) {
+    // Create node based on type and configuration
+    switch (type) {
+      case 'basic':
+        return { /* basic node implementation */ }
+      case 'complex':
+        return { /* complex node implementation */ }
+      default:
+        throw new Error(`Unknown node type: ${type}`)
+    }
+  }
+  
+  return { createNode }
+}
+```
+
+### Facade Pattern
+
+```typescript
+export function useWorkflowService(
+  apiService,
+  graphService,
+  storageService
+) {
+  // Provides a simple interface to complex subsystems
+  async function saveWorkflow(name: string) {
+    const graphData = graphService.serializeGraph()
+    const storagePath = await storageService.getPath(name)
+    return apiService.saveData(storagePath, graphData)
+  }
+  
+  return { saveWorkflow }
+}
+```
+
+For more detailed information about the service layer pattern and its applications, refer to:
+- [Service Layer Pattern](https://en.wikipedia.org/wiki/Service_layer_pattern)
+- [Service-Orientation](https://en.wikipedia.org/wiki/Service-orientation)

src/services/litegraphService.ts

@@ -5,10 +5,13 @@ import {
   LGraphNode,
   LiteGraph,
   RenderShape,
+  type Subgraph,
+  SubgraphNode,
   type Vector2,
   createBounds
 } from '@comfyorg/litegraph'
 import type {
+  ExportedSubgraphInstance,
   ISerialisableNodeInput,
   ISerialisableNodeOutput,
   ISerialisedNode
@@ -35,6 +38,7 @@ import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
 import { useWidgetStore } from '@/stores/widgetStore'
+import { useWorkflowStore } from '@/stores/workflowStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import {
   isImageNode,
@@ -56,6 +60,260 @@ export const useLitegraphService = () => {
   const widgetStore = useWidgetStore()
   const canvasStore = useCanvasStore()
 
+  // TODO: Dedupe `registerNodeDef`; this should remain synchronous.
+  function registerSubgraphNodeDef(
+    nodeDefV1: ComfyNodeDefV1,
+    subgraph: Subgraph,
+    instanceData: ExportedSubgraphInstance
+  ) {
+    const node = class ComfyNode extends SubgraphNode {
+      static comfyClass: string
+      static override title: string
+      static override category: string
+      static nodeData: ComfyNodeDefV1 & ComfyNodeDefV2
+
+      /**
+       * @internal The initial minimum size of the node.
+       */
+      #initialMinSize = { width: 1, height: 1 }
+      /**
+       * @internal The key for the node definition in the i18n file.
+       */
+      get #nodeKey(): string {
+        return `nodeDefs.${normalizeI18nKey(ComfyNode.nodeData.name)}`
+      }
+
+      constructor() {
+        super(app.graph, subgraph, instanceData)
+
+        this.#setupStrokeStyles()
+        this.#addInputs(ComfyNode.nodeData.inputs)
+        this.#addOutputs(ComfyNode.nodeData.outputs)
+        this.#setInitialSize()
+        this.serialize_widgets = true
+        void extensionService.invokeExtensionsAsync('nodeCreated', this)
+      }
+
+      /**
+       * @internal Setup stroke styles for the node under various conditions.
+       */
+      #setupStrokeStyles() {
+        this.strokeStyles['running'] = function (this: LGraphNode) {
+          if (this.id == app.runningNodeId) {
+            return { color: '#0f0' }
+          }
+        }
+        this.strokeStyles['nodeError'] = function (this: LGraphNode) {
+          if (app.lastNodeErrors?.[this.id]?.errors) {
+            return { color: 'red' }
+          }
+        }
+        this.strokeStyles['dragOver'] = function (this: LGraphNode) {
+          if (app.dragOverNode?.id == this.id) {
+            return { color: 'dodgerblue' }
+          }
+        }
+        this.strokeStyles['executionError'] = function (this: LGraphNode) {
+          if (app.lastExecutionError?.node_id == this.id) {
+            return { color: '#f0f', lineWidth: 2 }
+          }
+        }
+      }
+
+      /**
+       * @internal Add input sockets to the node. (No widget)
+       */
+      #addInputSocket(inputSpec: InputSpec) {
+        const inputName = inputSpec.name
+        const nameKey = `${this.#nodeKey}.inputs.${normalizeI18nKey(inputName)}.name`
+        const widgetConstructor = widgetStore.widgets.get(
+          inputSpec.widgetType ?? inputSpec.type
+        )
+        if (widgetConstructor && !inputSpec.forceInput) return
+
+        this.addInput(inputName, inputSpec.type, {
+          shape: inputSpec.isOptional ? RenderShape.HollowCircle : undefined,
+          localized_name: st(nameKey, inputName)
+        })
+      }
+
+      /**
+       * @internal Add a widget to the node. For both primitive types and custom widgets
+       * (unless `socketless`), an input socket is also added.
+       */
+      #addInputWidget(inputSpec: InputSpec) {
+        const widgetInputSpec = { ...inputSpec }
+        if (inputSpec.widgetType) {
+          widgetInputSpec.type = inputSpec.widgetType
+        }
+        const inputName = inputSpec.name
+        const nameKey = `${this.#nodeKey}.inputs.${normalizeI18nKey(inputName)}.name`
+        const widgetConstructor = widgetStore.widgets.get(widgetInputSpec.type)
+        if (!widgetConstructor || inputSpec.forceInput) return
+
+        const {
+          widget,
+          minWidth = 1,
+          minHeight = 1
+        } = widgetConstructor(
+          this,
+          inputName,
+          transformInputSpecV2ToV1(widgetInputSpec),
+          app
+        ) ?? {}
+
+        if (widget) {
+          widget.label = st(nameKey, widget.label ?? inputName)
+          widget.options ??= {}
+          Object.assign(widget.options, {
+            advanced: inputSpec.advanced,
+            hidden: inputSpec.hidden
+          })
+        }
+
+        if (!widget?.options?.socketless) {
+          const inputSpecV1 = transformInputSpecV2ToV1(widgetInputSpec)
+          this.addInput(inputName, inputSpec.type, {
+            shape: inputSpec.isOptional ? RenderShape.HollowCircle : undefined,
+            localized_name: st(nameKey, inputName),
+            widget: { name: inputName, [GET_CONFIG]: () => inputSpecV1 }
+          })
+        }
+
+        this.#initialMinSize.width = Math.max(
+          this.#initialMinSize.width,
+          minWidth
+        )
+        this.#initialMinSize.height = Math.max(
+          this.#initialMinSize.height,
+          minHeight
+        )
+      }
+
+      /**
+       * @internal Add inputs to the node.
+       */
+      #addInputs(inputs: Record<string, InputSpec>) {
+        for (const inputSpec of Object.values(inputs))
+          this.#addInputSocket(inputSpec)
+        for (const inputSpec of Object.values(inputs))
+          this.#addInputWidget(inputSpec)
+      }
+
+      /**
+       * @internal Add outputs to the node.
+       */
+      #addOutputs(outputs: OutputSpec[]) {
+        for (const output of outputs) {
+          const { name, type, is_list } = output
+          const shapeOptions = is_list ? { shape: LiteGraph.GRID_SHAPE } : {}
+          const nameKey = `${this.#nodeKey}.outputs.${output.index}.name`
+          const typeKey = `dataTypes.${normalizeI18nKey(type)}`
+          const outputOptions = {
+            ...shapeOptions,
+            // If the output name is different from the output type, use the output name.
+            // e.g.
+            // - type ("INT"); name ("Positive") => translate name
+            // - type ("FLOAT"); name ("FLOAT") => translate type
+            localized_name:
+              type !== name ? st(nameKey, name) : st(typeKey, name)
+          }
+          this.addOutput(name, type, outputOptions)
+        }
+      }
+
+      /**
+       * @internal Set the initial size of the node.
+       */
+      #setInitialSize() {
+        const s = this.computeSize()
+        // Expand the width a little to fit widget values on screen.
+        const pad =
+          this.widgets?.length &&
+          !useSettingStore().get('LiteGraph.Node.DefaultPadding')
+        s[0] = Math.max(this.#initialMinSize.width, s[0] + (pad ? 60 : 0))
+        s[1] = Math.max(this.#initialMinSize.height, s[1])
+        this.setSize(s)
+      }
+
+      /**
+       * Configure the node from a serialised node. Keep 'name', 'type', 'shape',
+       * and 'localized_name' information from the original node definition.
+       */
+      override configure(data: ISerialisedNode): void {
+        const RESERVED_KEYS = ['name', 'type', 'shape', 'localized_name']
+
+        // Note: input name is unique in a node definition, so we can lookup
+        // input by name.
+        const inputByName = new Map<string, ISerialisableNodeInput>(
+          data.inputs?.map((input) => [input.name, input]) ?? []
+        )
+        // Inputs defined by the node definition.
+        const definedInputNames = new Set(
+          this.inputs.map((input) => input.name)
+        )
+        const definedInputs = this.inputs.map((input) => {
+          const inputData = inputByName.get(input.name)
+          return inputData
+            ? {
+                ...inputData,
+                // Whether the input has associated widget follows the
+                // original node definition.
+                ..._.pick(input, RESERVED_KEYS.concat('widget'))
+              }
+            : input
+        })
+        // Extra inputs that potentially dynamically added by custom js logic.
+        const extraInputs = data.inputs?.filter(
+          (input) => !definedInputNames.has(input.name)
+        )
+        data.inputs = [...definedInputs, ...(extraInputs ?? [])]
+
+        // Note: output name is not unique, so we cannot lookup output by name.
+        // Use index instead.
+        data.outputs = _.zip(this.outputs, data.outputs).map(
+          ([output, outputData]) => {
+            // If there are extra outputs in the serialised node, use them directly.
+            // There are currently custom nodes that dynamically add outputs via
+            // js logic.
+            if (!output) return outputData as ISerialisableNodeOutput
+
+            return outputData
+              ? {
+                  ...outputData,
+                  ..._.pick(output, RESERVED_KEYS)
+                }
+              : output
+          }
+        )
+
+        data.widgets_values = migrateWidgetsValues(
+          ComfyNode.nodeData.inputs,
+          this.widgets ?? [],
+          data.widgets_values ?? []
+        )
+
+        super.configure(data)
+      }
+    }
+
+    addNodeContextMenuHandler(node)
+    addDrawBackgroundHandler(node)
+    addNodeKeyHandler(node)
+    // Note: Some extensions expects node.comfyClass to be set in
+    // `beforeRegisterNodeDef`.
+    node.prototype.comfyClass = nodeDefV1.name
+    node.comfyClass = nodeDefV1.name
+
+    const nodeDef = new ComfyNodeDefImpl(nodeDefV1)
+    node.nodeData = nodeDef
+    LiteGraph.registerNodeType(subgraph.id, node)
+    // Note: Do not following assignments before `LiteGraph.registerNodeType`
+    // because `registerNodeType` will overwrite the assignments.
+    node.category = nodeDef.category
+    node.title = nodeDef.display_name || nodeDef.name
+  }
+
   async function registerNodeDef(nodeId: string, nodeDefV1: ComfyNodeDefV1) {
     const node = class ComfyNode extends LGraphNode {
       static comfyClass: string
@@ -622,8 +880,10 @@ export const useLitegraphService = () => {
       options
     )
 
+    const graph = useWorkflowStore().activeSubgraph ?? app.graph
+
     // @ts-expect-error fixme ts strict error
-    app.graph.add(node)
+    graph.add(node)
     // @ts-expect-error fixme ts strict error
     return node
   }
@@ -665,6 +925,7 @@ export const useLitegraphService = () => {
 
   return {
     registerNodeDef,
+    registerSubgraphNodeDef,
     addNodeOnGraph,
     getCanvasCenter,
     goToNode,

src/services/subgraphService.ts

@@ -0,0 +1,91 @@
+import {
+  type ExportedSubgraph,
+  type ExportedSubgraphInstance,
+  type Subgraph
+} from '@comfyorg/litegraph'
+
+import type { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
+import type { ComfyNodeDef as ComfyNodeDefV1 } from '@/schemas/nodeDefSchema'
+import { app as comfyApp } from '@/scripts/app'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+
+import { useLitegraphService } from './litegraphService'
+
+export const useSubgraphService = () => {
+  const nodeDefStore = useNodeDefStore()
+
+  /** Loads a single subgraph definition and registers it with the node def store */
+  function registerLitegraphNode(
+    nodeDef: ComfyNodeDefV1,
+    subgraph: Subgraph,
+    exportedSubgraph: ExportedSubgraph
+  ) {
+    const instanceData: ExportedSubgraphInstance = {
+      id: -1,
+      type: exportedSubgraph.id,
+      pos: [0, 0],
+      size: [100, 100],
+      inputs: [],
+      outputs: [],
+      flags: {},
+      order: 0,
+      mode: 0
+    }
+
+    useLitegraphService().registerSubgraphNodeDef(
+      nodeDef,
+      subgraph,
+      instanceData
+    )
+  }
+
+  function createNodeDef(exportedSubgraph: ExportedSubgraph) {
+    const { id, name } = exportedSubgraph
+
+    const nodeDef: ComfyNodeDefV1 = {
+      input: { required: {} },
+      output: [],
+      output_is_list: [],
+      output_name: [],
+      output_tooltips: [],
+      name: id,
+      display_name: name,
+      description: `Subgraph node for ${name}`,
+      category: 'subgraph',
+      output_node: false,
+      python_module: 'nodes'
+    }
+
+    nodeDefStore.addNodeDef(nodeDef)
+    return nodeDef
+  }
+
+  /** Loads all exported subgraph definitions from workflow */
+  function loadSubgraphs(graphData: ComfyWorkflowJSON) {
+    const subgraphs = graphData.definitions?.subgraphs
+    if (!subgraphs) return
+
+    // Assertion: overriding Zod schema
+    for (const subgraphData of subgraphs as ExportedSubgraph[]) {
+      const subgraph =
+        comfyApp.graph.subgraphs.get(subgraphData.id) ??
+        comfyApp.graph.createSubgraph(subgraphData)
+
+      registerNewSubgraph(subgraph, subgraphData)
+    }
+  }
+
+  /** Registers a new subgraph (e.g. user converted from nodes) */
+  function registerNewSubgraph(
+    subgraph: Subgraph,
+    exportedSubgraph: ExportedSubgraph
+  ) {
+    const nodeDef = createNodeDef(exportedSubgraph)
+    registerLitegraphNode(nodeDef, subgraph, exportedSubgraph)
+  }
+
+  return {
+    loadSubgraphs,
+    registerNewSubgraph
+  }
+}

src/services/workflowService.ts

@@ -7,6 +7,7 @@ import { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
 import { app } from '@/scripts/app'
 import { blankGraph, defaultGraph } from '@/scripts/defaultGraph'
 import { downloadBlob } from '@/scripts/utils'
+import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
 import { ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
@@ -20,6 +21,7 @@ export const useWorkflowService = () => {
   const workflowStore = useWorkflowStore()
   const toastStore = useToastStore()
   const dialogService = useDialogService()
+  const domWidgetStore = useDomWidgetStore()
 
   async function getFilename(defaultName: string): Promise<string | null> {
     if (settingStore.get('Comfy.PromptFilename')) {
@@ -285,11 +287,8 @@ export const useWorkflowService = () => {
    */
   const beforeLoadNewGraph = () => {
     // Use workspaceStore here as it is patched in unit tests.
-    const workflowStore = useWorkspaceStore().workflow
-    const activeWorkflow = workflowStore.activeWorkflow
-    if (activeWorkflow) {
-      activeWorkflow.changeTracker.store()
-    }
+    useWorkspaceStore().workflow.activeWorkflow?.changeTracker?.store()
+    domWidgetStore.clear()
   }
 
   /**
@@ -345,8 +344,7 @@ export const useWorkflowService = () => {
     options: { position?: Vector2 } = {}
   ) => {
     const loadedWorkflow = await workflow.load()
-    const data = loadedWorkflow.initialState
-    const workflowJSON = data
+    const workflowJSON = toRaw(loadedWorkflow.initialState)
     const old = localStorage.getItem('litegrapheditor_clipboard')
     // unknown conversion: ComfyWorkflowJSON is stricter than LiteGraph's
     // serialisation schema.

src/stores/README.md

@@ -0,0 +1,356 @@
+# Stores
+
+This directory contains Pinia stores for the ComfyUI frontend application. Stores provide centralized state management for the application.
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Store Architecture](#store-architecture)
+- [Core Stores](#core-stores)
+- [Store Development Guidelines](#store-development-guidelines)
+- [Common Patterns](#common-patterns)
+- [Testing Stores](#testing-stores)
+
+## Overview
+
+Stores in ComfyUI use [Pinia](https://pinia.vuejs.org/), Vue's official state management library. Each store is responsible for managing a specific domain of the application state, such as user data, workflow information, graph state, and UI configuration.
+
+Stores provide a way to maintain global application state that can be accessed from any component, regardless of where those components are in the component hierarchy. This solves the problem of "prop drilling" (passing data down through multiple levels of components) and allows components that aren't directly related to share and modify the same state.
+
+For example, without global state:
+```
+                  App
+                   │
+        ┌──────────┴──────────┐
+        │                     │
+    HeaderBar               Canvas
+        │                     │
+        │                     │
+    UserMenu            NodeProperties
+```
+
+In this structure, if the `UserMenu` component needs to update something that affects `NodeProperties`, the data would need to be passed up to `App` and then down again, through all intermediate components.
+
+With Pinia stores, components can directly access and update the shared state:
+```
+    ┌─────────────────┐
+    │                 │
+    │  Pinia Stores   │
+    │                 │
+    └───────┬─────────┘
+            │
+            │ Accessed by
+            ▼
+┌──────────────────────────┐
+│                          │
+│       Components         │
+│                          │
+└──────────────────────────┘
+```
+
+## Store Architecture
+
+The store architecture in ComfyUI follows these principles:
+
+1. **Domain-driven**: Each store focuses on a specific domain of the application
+2. **Single source of truth**: Stores serve as the definitive source for specific data
+3. **Composition**: Stores can interact with other stores when needed
+4. **Actions for logic**: Business logic is encapsulated in store actions
+5. **Getters for derived state**: Computed values are exposed via getters
+
+The following diagram illustrates the store architecture and data flow:
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                    Vue Components                        │
+│                                                         │
+│   ┌───────────────┐            ┌───────────────┐        │
+│   │  Component A  │            │  Component B  │        │
+│   └───────┬───────┘            └───────┬───────┘        │
+│           │                            │                │
+└───────────┼────────────────────────────┼────────────────┘
+            │                            │
+            │     ┌───────────────┐      │
+            └────►│  Composables  │◄─────┘
+                  └───────┬───────┘
+                          │
+┌─────────────────────────┼─────────────────────────────┐
+│         Pinia Stores    │                             │
+│                         │                             │
+│     ┌───────────────────▼───────────────────────┐     │
+│     │                 Actions                    │     │
+│     └───────────────────┬───────────────────────┘     │
+│                         │                             │
+│     ┌───────────────────▼───────────────────────┐     │
+│     │                  State                     │     │
+│     └───────────────────┬───────────────────────┘     │
+│                         │                             │
+│     ┌───────────────────▼───────────────────────┐     │
+│     │                 Getters                    │     │
+│     └───────────────────┬───────────────────────┘     │
+│                         │                             │
+└─────────────────────────┼─────────────────────────────┘
+                          │
+                          ▼
+┌─────────────────────────────────────────────────────────┐
+│                   External Services                      │
+│       (API, localStorage, WebSocket, etc.)              │
+└─────────────────────────────────────────────────────────┘
+```
+
+## Core Stores
+
+The core stores include:
+
+| Store | Description |
+|-------|-------------|
+| aboutPanelStore.ts | Manages the About panel state and badges |
+| apiKeyAuthStore.ts | Handles API key authentication |
+| comfyManagerStore.ts | Manages ComfyUI application state |
+| comfyRegistryStore.ts | Handles extensions registry |
+| commandStore.ts | Manages commands and command execution |
+| dialogStore.ts | Controls dialog/modal display and state |
+| domWidgetStore.ts | Manages DOM widget state |
+| executionStore.ts | Tracks workflow execution state |
+| extensionStore.ts | Manages extension registration and state |
+| firebaseAuthStore.ts | Handles Firebase authentication |
+| graphStore.ts | Manages the graph canvas state |
+| imagePreviewStore.ts | Controls image preview functionality |
+| keybindingStore.ts | Manages keyboard shortcuts |
+| menuItemStore.ts | Handles menu items and their state |
+| modelStore.ts | Manages AI models information |
+| nodeDefStore.ts | Manages node definitions |
+| queueStore.ts | Handles the execution queue |
+| settingStore.ts | Manages application settings |
+| userStore.ts | Manages user data and preferences |
+| workflowStore.ts | Handles workflow data and operations |
+| workspace/* | Stores related to the workspace UI |
+
+## Store Development Guidelines
+
+When developing or modifying stores, follow these best practices:
+
+1. **Define clear purpose**: Each store should have a specific responsibility
+2. **Use actions for async operations**: Encapsulate asynchronous logic in actions
+3. **Keep stores focused**: Each store should manage related state
+4. **Document public API**: Add comments for state properties, actions, and getters
+5. **Use getters for derived state**: Compute derived values using getters
+6. **Test store functionality**: Write unit tests for stores
+
+### Store Template
+
+Here's a template for creating a new Pinia store, following the setup style used in ComfyUI:
+
+```typescript
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+export const useExampleStore = defineStore('example', () => {
+  // State
+  const items = ref([])
+  const isLoading = ref(false)
+  const error = ref(null)
+
+  // Getters
+  const itemCount = computed(() => items.value.length)
+  const hasError = computed(() => error.value !== null)
+
+  // Actions
+  function addItem(item) {
+    items.value.push(item)
+  }
+
+  async function fetchItems() {
+    isLoading.value = true
+    error.value = null
+    
+    try {
+      const response = await fetch('/api/items')
+      const data = await response.json()
+      items.value = data
+    } catch (err) {
+      error.value = err.message
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  // Expose state, getters, and actions
+  return {
+    // State
+    items,
+    isLoading,
+    error,
+    
+    // Getters
+    itemCount,
+    hasError,
+    
+    // Actions
+    addItem,
+    fetchItems
+  }
+})
+```
+
+## Common Patterns
+
+Stores in ComfyUI frequently use these patterns:
+
+### API Integration
+
+```typescript
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { api } from '@/scripts/api'
+
+export const useDataStore = defineStore('data', () => {
+  const data = ref([])
+  const loading = ref(false)
+  const error = ref(null)
+
+  async function fetchData() {
+    loading.value = true
+    try {
+      const result = await api.getData()
+      data.value = result
+    } catch (err) {
+      error.value = err.message
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    data,
+    loading,
+    error,
+    fetchData
+  }
+})
+```
+
+### Store Composition
+
+```typescript
+import { defineStore, storeToRefs } from 'pinia'
+import { computed, ref, watch } from 'vue'
+import { useOtherStore } from './otherStore'
+
+export const useComposedStore = defineStore('composed', () => {
+  const otherStore = useOtherStore()
+  const { someData } = storeToRefs(otherStore)
+  
+  // Local state
+  const localState = ref(0)
+  
+  // Computed value based on other store
+  const derivedValue = computed(() => {
+    return computeFromOtherData(someData.value, localState.value)
+  })
+  
+  // Action that uses another store
+  async function complexAction() {
+    await otherStore.someAction()
+    localState.value += 1
+  }
+  
+  return {
+    localState,
+    derivedValue,
+    complexAction
+  }
+})
+```
+
+### Persistent State
+
+```typescript
+import { defineStore } from 'pinia'
+import { ref, watch } from 'vue'
+
+export const usePreferencesStore = defineStore('preferences', () => {
+  // Load from localStorage if available
+  const theme = ref(localStorage.getItem('theme') || 'light')
+  const fontSize = ref(parseInt(localStorage.getItem('fontSize') || '14'))
+  
+  // Save to localStorage when changed
+  watch(theme, (newTheme) => {
+    localStorage.setItem('theme', newTheme)
+  })
+  
+  watch(fontSize, (newSize) => {
+    localStorage.setItem('fontSize', newSize.toString())
+  })
+  
+  function setTheme(newTheme) {
+    theme.value = newTheme
+  }
+  
+  return {
+    theme,
+    fontSize,
+    setTheme
+  }
+})
+```
+
+## Testing Stores
+
+Stores should be tested to ensure they behave as expected. Here's an example of how to test a store:
+
+```typescript
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import { api } from '@/scripts/api'
+import { useExampleStore } from '@/stores/exampleStore'
+
+// Mock API dependencies
+vi.mock('@/scripts/api', () => ({
+  api: {
+    getData: vi.fn()
+  }
+}))
+
+describe('useExampleStore', () => {
+  let store: ReturnType<typeof useExampleStore>
+
+  beforeEach(() => {
+    // Create a fresh pinia instance and make it active
+    setActivePinia(createPinia())
+    store = useExampleStore()
+    
+    // Clear all mocks
+    vi.clearAllMocks()
+  })
+
+  it('should initialize with default state', () => {
+    expect(store.items).toEqual([])
+    expect(store.isLoading).toBe(false)
+    expect(store.error).toBeNull()
+  })
+
+  it('should add an item', () => {
+    store.addItem('test')
+    expect(store.items).toEqual(['test'])
+    expect(store.itemCount).toBe(1)
+  })
+  
+  it('should fetch items', async () => {
+    // Setup mock response
+    vi.mocked(api.getData).mockResolvedValue(['item1', 'item2'])
+    
+    // Call the action
+    await store.fetchItems()
+    
+    // Verify state changes
+    expect(store.isLoading).toBe(false)
+    expect(store.items).toEqual(['item1', 'item2'])
+    expect(store.error).toBeNull()
+  })
+})
+```
+
+For more information on Pinia, refer to the [Pinia documentation](https://pinia.vuejs.org/introduction.html).

src/stores/domWidgetStore.ts

@@ -2,7 +2,7 @@
  * Stores all DOM widgets that are used in the canvas.
  */
 import { defineStore } from 'pinia'
-import { type Raw, markRaw, ref } from 'vue'
+import { type Raw, computed, markRaw, ref } from 'vue'
 
 import type { PositionConfig } from '@/composables/element/useAbsolutePosition'
 import type { BaseDOMWidget } from '@/scripts/domWidget'
@@ -13,11 +13,20 @@ export interface DomWidgetState extends PositionConfig {
   visible: boolean
   readonly: boolean
   zIndex: number
+  /** If the widget belongs to the current graph/subgraph. */
+  active: boolean
 }
 
 export const useDomWidgetStore = defineStore('domWidget', () => {
   const widgetStates = ref<Map<string, DomWidgetState>>(new Map())
 
+  const activeWidgetStates = computed(() =>
+    [...widgetStates.value.values()].filter((state) => state.active)
+  )
+  const inactiveWidgetStates = computed(() =>
+    [...widgetStates.value.values()].filter((state) => !state.active)
+  )
+
   // Register a widget with the store
   const registerWidget = <V extends object | string>(
     widget: BaseDOMWidget<V>
@@ -28,7 +37,8 @@ export const useDomWidgetStore = defineStore('domWidget', () => {
       readonly: false,
       zIndex: 0,
       pos: [0, 0],
-      size: [0, 0]
+      size: [0, 0],
+      active: true
     })
   }
 
@@ -37,9 +47,28 @@ export const useDomWidgetStore = defineStore('domWidget', () => {
     widgetStates.value.delete(widgetId)
   }
 
+  const activateWidget = (widgetId: string) => {
+    const state = widgetStates.value.get(widgetId)
+    if (state) state.active = true
+  }
+
+  const deactivateWidget = (widgetId: string) => {
+    const state = widgetStates.value.get(widgetId)
+    if (state) state.active = false
+  }
+
+  const clear = () => {
+    widgetStates.value.clear()
+  }
+
   return {
     widgetStates,
+    activeWidgetStates,
+    inactiveWidgetStates,
     registerWidget,
-    unregisterWidget
+    unregisterWidget,
+    activateWidget,
+    deactivateWidget,
+    clear
   }
 })

src/stores/nodeDefStore.ts

@@ -292,8 +292,7 @@ export const useNodeDefStore = defineStore('nodeDef', () => {
   }
   function fromLGraphNode(node: LGraphNode): ComfyNodeDefImpl | null {
     // Frontend-only nodes don't have nodeDef
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore Optional chaining used in index
+    // @ts-expect-error Optional chaining used in index
     return nodeDefsByName.value[node.constructor?.nodeData?.name] ?? null
   }
 

src/stores/subgraphNavigationStore.ts

@@ -0,0 +1,87 @@
+import type { Subgraph } from '@comfyorg/litegraph'
+import { defineStore } from 'pinia'
+import { computed, shallowReactive, shallowRef, watch } from 'vue'
+
+import { app } from '@/scripts/app'
+import { isNonNullish } from '@/utils/typeGuardUtil'
+
+import { useWorkflowStore } from './workflowStore'
+
+/**
+ * Stores the current subgraph navigation state; a stack representing subgraph
+ * navigation history from the root graph to the subgraph that is currently
+ * open.
+ */
+export const useSubgraphNavigationStore = defineStore(
+  'subgraphNavigation',
+  () => {
+    const workflowStore = useWorkflowStore()
+
+    /** The currently opened subgraph. */
+    const activeSubgraph = shallowRef<Subgraph>()
+
+    /** The stack of subgraph IDs from the root graph to the currently opened subgraph. */
+    const idStack = shallowReactive<string[]>([])
+
+    /**
+     * A stack representing subgraph navigation history from the root graph to
+     * the current opened subgraph.
+     */
+    const navigationStack = computed(() =>
+      idStack.map((id) => app.graph.subgraphs.get(id)).filter(isNonNullish)
+    )
+
+    /**
+     * Restore the navigation stack from a list of subgraph IDs.
+     * @param subgraphIds The list of subgraph IDs to restore the navigation stack from.
+     * @see exportState
+     */
+    const restoreState = (subgraphIds: string[]) => {
+      idStack.length = 0
+      for (const id of subgraphIds) idStack.push(id)
+    }
+
+    /**
+     * Export the navigation stack as a list of subgraph IDs.
+     * @returns The list of subgraph IDs, ending with the currently active subgraph.
+     * @see restoreState
+     */
+    const exportState = () => [...idStack]
+
+    // Reset on workflow change
+    watch(
+      () => workflowStore.activeWorkflow,
+      () => (idStack.length = 0)
+    )
+
+    // Update navigation stack when opened subgraph changes
+    watch(
+      () => workflowStore.activeSubgraph,
+      (subgraph) => {
+        // Navigated back to the root graph
+        if (!subgraph) {
+          idStack.length = 0
+          return
+        }
+
+        const index = idStack.lastIndexOf(subgraph.id)
+        const lastIndex = idStack.length - 1
+
+        if (index === -1) {
+          // Opened a new subgraph
+          idStack.push(subgraph.id)
+        } else if (index !== lastIndex) {
+          // Navigated to a different subgraph
+          idStack.splice(index + 1, lastIndex - index)
+        }
+      }
+    )
+
+    return {
+      activeSubgraph,
+      navigationStack,
+      restoreState,
+      exportState
+    }
+  }
+)