[fix] TypeScript errors in manager/compatibility branch (#4625)

Co-authored-by: Claude <noreply@anthropic.com>

.github/ISSUE_TEMPLATE/bug-report.yaml

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

.github/ISSUE_TEMPLATE/feature-request.yaml

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

.gitignore

@@ -11,8 +11,6 @@ node_modules
 dist
 dist-ssr
 *.local
-# Claude configuration
-.claude/*.local.json
 
 # Editor directories and files
 .vscode/*

.husky/pre-commit

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

.mcp.json

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

CLAUDE.md

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

browser_tests/CLAUDE.md

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

browser_tests/assets/missing_nodes_in_subgraph.json

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

browser_tests/tests/dialog.spec.ts

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

package-lock.json

@@ -1,18 +1,18 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.25.4",
+  "version": "1.25.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@comfyorg/comfyui-frontend",
-      "version": "1.25.4",
+      "version": "1.25.2",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
         "@comfyorg/comfyui-electron-types": "^0.4.43",
-        "@comfyorg/litegraph": "^0.17.1",
+        "@comfyorg/litegraph": "^0.16.20",
         "@primevue/forms": "^4.2.5",
         "@primevue/themes": "^4.2.5",
         "@sentry/vue": "^8.48.0",
@@ -445,6 +445,7 @@
       "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-0.5.0.tgz",
       "integrity": "sha512-dKnk2xlAyC7rvTkpkHmu+Qy/2Zc3Vm/l8PtNyIOGDBtXPY3kThfU4ORNEp3V7SXw5XSOb+tOJaUYpfquPzL/Tg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "package-manager-detector": "^0.2.5",
         "tinyexec": "^0.3.1"
@@ -566,6 +567,7 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true,
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -619,6 +621,7 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true,
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -649,6 +652,7 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true,
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -908,9 +912,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.27.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
-      "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
+      "version": "7.28.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.2.tgz",
+      "integrity": "sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -977,9 +981,9 @@
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.17.1",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.17.1.tgz",
-      "integrity": "sha512-SaDDWFvoH1bCfibvZjtX0JoLvFTJw2MUOWzrjyeuWVs00JpxiJ1I5f6oH/AO8lJqKdASWBVPzpC9zPMG45w4IQ==",
+      "version": "0.16.20",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.16.20.tgz",
+      "integrity": "sha512-8iUBhKYkr9qV6vWxC3C9Wea9K7iHwyDHxxN6OrhE9sySYfUA14XuNpVMaC8eVUaIm5KBOSmr/Q1J2XVHsHEISg==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {
@@ -2333,6 +2337,7 @@
       "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-2.3.0.tgz",
       "integrity": "sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@antfu/install-pkg": "^1.0.0",
         "@antfu/utils": "^8.1.0",
@@ -2349,6 +2354,7 @@
       "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
       "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "package-manager-detector": "^1.3.0",
         "tinyexec": "^1.0.1"
@@ -2362,6 +2368,7 @@
       "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-8.1.1.tgz",
       "integrity": "sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==",
       "dev": true,
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
@@ -2370,13 +2377,15 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz",
       "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@iconify/utils/node_modules/debug": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
       "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -2394,6 +2403,7 @@
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.1.tgz",
       "integrity": "sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "mlly": "^1.7.4",
         "pkg-types": "^2.0.1",
@@ -2410,19 +2420,22 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.3.0.tgz",
       "integrity": "sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@iconify/utils/node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
       "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@iconify/utils/node_modules/pkg-types": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.2.0.tgz",
       "integrity": "sha512-2SM/GZGAEkPp3KWORxQZns4M+WSeXbC2HEvmOIJe3Cmiv6ieAJvdVhDldtHqM5J1Y7MrR1XhkBT/rMlhh9FdqQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "confbox": "^0.2.2",
         "exsolve": "^1.0.7",
@@ -2433,7 +2446,8 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.1.tgz",
       "integrity": "sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@inkjs/ui": {
       "version": "1.0.0",
@@ -2542,6 +2556,18 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/@intlify/eslint-plugin-vue-i18n/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@intlify/eslint-plugin-vue-i18n/node_modules/synckit": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.3.tgz",
@@ -4635,7 +4661,8 @@
       "version": "7.7.0",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.7.0.tgz",
       "integrity": "sha512-k107IF4+Xr7UHjwDc7Cfd6PRQfbdkiRabXGRjo07b4WyPahFBZCZ1sE+BNxYIJPPg73UkfOsVOLwqVc/6ETrIA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/stats.js": {
       "version": "0.17.3",
@@ -6089,15 +6116,15 @@
       }
     },
     "node_modules/broker-factory": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/broker-factory/-/broker-factory-3.1.7.tgz",
-      "integrity": "sha512-RxbMXWq/Qvw9aLZMvuooMtVTm2/SV9JEpxpBbMuFhYAnDaZxctbJ+1b9ucHxADk/eQNqDijvWQjLVARqExAeyg==",
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/broker-factory/-/broker-factory-3.1.8.tgz",
+      "integrity": "sha512-xmVnYN0FZtynhPUmAnN+/MFRdbDi3syCuxWV7o7s78FcIN0pjDtn9mUrVqEgdjQkbfojRhlPWbYbXJkMCyddrg==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.27.6",
         "fast-unique-numbers": "^9.0.22",
         "tslib": "^2.8.1",
-        "worker-factory": "^7.0.43"
+        "worker-factory": "^7.0.44"
       }
     },
     "node_modules/browserslist": {
@@ -6667,7 +6694,8 @@
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
       "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/config-chain": {
       "version": "1.1.13",
@@ -7841,6 +7869,18 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/eslint-compat-utils/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/eslint-config-prettier": {
       "version": "10.1.2",
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.2.tgz",
@@ -8389,7 +8429,8 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.7.tgz",
       "integrity": "sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/extend": {
       "version": "3.0.2",
@@ -8412,53 +8453,53 @@
       }
     },
     "node_modules/extendable-media-recorder": {
-      "version": "9.2.27",
-      "resolved": "https://registry.npmjs.org/extendable-media-recorder/-/extendable-media-recorder-9.2.27.tgz",
-      "integrity": "sha512-2X+Ixi1cxLek0Cj9x9atmhQ+apG+LwJpP2p3ypP8Pxau0poDnicrg7FTfPVQV5PW/3DHFm/eQ16vbgo5Yk3HGQ==",
+      "version": "9.2.28",
+      "resolved": "https://registry.npmjs.org/extendable-media-recorder/-/extendable-media-recorder-9.2.28.tgz",
+      "integrity": "sha512-OIltlqo8rIUOcPn5c6aZ0qCvcTpXDnBgts8eRXK1VQKCI1omYBgZZyzkJ5vrQnB8xR34+GNOFs1Z+srq6tQsdQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.27.6",
-        "media-encoder-host": "^9.0.20",
+        "media-encoder-host": "^9.0.21",
         "multi-buffer-data-view": "^6.0.22",
-        "recorder-audio-worklet": "^6.0.48",
+        "recorder-audio-worklet": "^6.0.49",
         "standardized-audio-context": "^25.3.77",
         "subscribable-things": "^2.1.53",
         "tslib": "^2.8.1"
       }
     },
     "node_modules/extendable-media-recorder-wav-encoder": {
-      "version": "7.0.129",
-      "resolved": "https://registry.npmjs.org/extendable-media-recorder-wav-encoder/-/extendable-media-recorder-wav-encoder-7.0.129.tgz",
-      "integrity": "sha512-/wqM2hnzvLy/iUlg/EU3JIF8MJcidy8I77Z7CCm5+CVEClDfcs6bH9PgghuisndwKTaud0Dh48RTD83gkfEjCw==",
+      "version": "7.0.130",
+      "resolved": "https://registry.npmjs.org/extendable-media-recorder-wav-encoder/-/extendable-media-recorder-wav-encoder-7.0.130.tgz",
+      "integrity": "sha512-tVroIOesnMarsm+iIRiWUEYgmQj/lGqeMVNwJla7/tTVkX3ZPamh0NW59deILANwDIJq9lARLQmsUhyDWW57PA==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.27.6",
-        "extendable-media-recorder-wav-encoder-broker": "^7.0.119",
-        "extendable-media-recorder-wav-encoder-worker": "^8.0.116",
+        "extendable-media-recorder-wav-encoder-broker": "^7.0.120",
+        "extendable-media-recorder-wav-encoder-worker": "^8.0.117",
         "tslib": "^2.8.1"
       }
     },
     "node_modules/extendable-media-recorder-wav-encoder-broker": {
-      "version": "7.0.119",
-      "resolved": "https://registry.npmjs.org/extendable-media-recorder-wav-encoder-broker/-/extendable-media-recorder-wav-encoder-broker-7.0.119.tgz",
-      "integrity": "sha512-BLrFOnqFLpsmmNpSk/TfjNs4j6ImCSGtoryIpRlqNu5S/Avt6gRJI0s4UYvdK7h17PCi+8vaDr75blvmU1sYlw==",
+      "version": "7.0.120",
+      "resolved": "https://registry.npmjs.org/extendable-media-recorder-wav-encoder-broker/-/extendable-media-recorder-wav-encoder-broker-7.0.120.tgz",
+      "integrity": "sha512-wYRnDsHngGGR7LnEfl+tkNa7ck31KSV3PzqGLMCeKRmr02OrYxJUKyCeYf79TEe8O0EFtlBGBR9fiAj6OGDOhg==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.27.6",
-        "broker-factory": "^3.1.7",
-        "extendable-media-recorder-wav-encoder-worker": "^8.0.116",
+        "broker-factory": "^3.1.8",
+        "extendable-media-recorder-wav-encoder-worker": "^8.0.117",
         "tslib": "^2.8.1"
       }
     },
     "node_modules/extendable-media-recorder-wav-encoder-worker": {
-      "version": "8.0.116",
-      "resolved": "https://registry.npmjs.org/extendable-media-recorder-wav-encoder-worker/-/extendable-media-recorder-wav-encoder-worker-8.0.116.tgz",
-      "integrity": "sha512-bJPR0B7ZHeoqi9YoSie+UXAfEYya3efQ9eLiWuyK4KcOv+SuYQvWCoyzX5kjvb6GqIBCUnev5xulfeHRlyCwvw==",
+      "version": "8.0.117",
+      "resolved": "https://registry.npmjs.org/extendable-media-recorder-wav-encoder-worker/-/extendable-media-recorder-wav-encoder-worker-8.0.117.tgz",
+      "integrity": "sha512-rnlIPkMB5F2sslesLXLdJ/Z0Kes4ROtdr+Kf/a6aF3233oJWK7165krWNZP5gpKZ4Z5Lhjx4fxVB12exZvlb2g==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.27.6",
         "tslib": "^2.8.1",
-        "worker-factory": "^7.0.43"
+        "worker-factory": "^7.0.44"
       }
     },
     "node_modules/fast-deep-equal": {
@@ -9130,6 +9171,7 @@
       "resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
       "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=18"
       },
@@ -10427,6 +10469,18 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/jsonc-eslint-parser/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/jsondiffpatch": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/jsondiffpatch/-/jsondiffpatch-0.6.0.tgz",
@@ -10985,6 +11039,7 @@
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.1.tgz",
       "integrity": "sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "mlly": "^1.7.3",
         "pkg-types": "^1.2.1"
@@ -11527,40 +11582,40 @@
       "license": "MIT"
     },
     "node_modules/media-encoder-host": {
-      "version": "9.0.20",
-      "resolved": "https://registry.npmjs.org/media-encoder-host/-/media-encoder-host-9.0.20.tgz",
-      "integrity": "sha512-IyEYxw6az97RNuETOAZV4YZqNAPOiF9GKIp5mVZb4HOyWd6mhkWQ34ydOzhqAWogMyc4W05kjN/VCgTtgyFmsw==",
+      "version": "9.0.21",
+      "resolved": "https://registry.npmjs.org/media-encoder-host/-/media-encoder-host-9.0.21.tgz",
+      "integrity": "sha512-hL41jBYmTKxGB2Z82rcR2hx4JCFBR3fmSOLR+G7EEkZn+uwSXDJTRFiYd7XWKnpjiHXy7ewf0ByEpby+2mv4Qg==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.27.6",
-        "media-encoder-host-broker": "^8.0.19",
-        "media-encoder-host-worker": "^10.0.19",
+        "media-encoder-host-broker": "^8.0.20",
+        "media-encoder-host-worker": "^10.0.20",
         "tslib": "^2.8.1"
       }
     },
     "node_modules/media-encoder-host-broker": {
-      "version": "8.0.19",
-      "resolved": "https://registry.npmjs.org/media-encoder-host-broker/-/media-encoder-host-broker-8.0.19.tgz",
-      "integrity": "sha512-lTpsNuaZdTCdtTHsOyww7Ae0Mwv+7mFS+O4YkFYWhXwVs0rm6XbRK5jRRn5JmcX3n1eTE1lQS5RgX8qbNaIjSg==",
+      "version": "8.0.20",
+      "resolved": "https://registry.npmjs.org/media-encoder-host-broker/-/media-encoder-host-broker-8.0.20.tgz",
+      "integrity": "sha512-Jab7frQx8d7Js+yBeMx7FeTrxRDjIpSmdARRkHSOtWNKJv9a+Hy2/OAPXoEJl6Y15jk1eiDwJkMMF6zvlnNMEA==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.27.6",
-        "broker-factory": "^3.1.7",
+        "broker-factory": "^3.1.8",
         "fast-unique-numbers": "^9.0.22",
-        "media-encoder-host-worker": "^10.0.19",
+        "media-encoder-host-worker": "^10.0.20",
         "tslib": "^2.8.1"
       }
     },
     "node_modules/media-encoder-host-worker": {
-      "version": "10.0.19",
-      "resolved": "https://registry.npmjs.org/media-encoder-host-worker/-/media-encoder-host-worker-10.0.19.tgz",
-      "integrity": "sha512-I8fwc6f41peER3RFSiwDxnIHbqU7p3pc2ghQozcw9CQfL0mWEo4IjQJtyswrrlL/HO2pgVSMQbaNzE4q/0mfDQ==",
+      "version": "10.0.20",
+      "resolved": "https://registry.npmjs.org/media-encoder-host-worker/-/media-encoder-host-worker-10.0.20.tgz",
+      "integrity": "sha512-Ysqjwlcu4VP6FlM+atQJZFFJwvfrw603gnmhWfyBlcE5+pl7ctc0wo2dbPiBpz9pc1pY4N5N6PHHhywkqHxfnA==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.27.6",
-        "extendable-media-recorder-wav-encoder-broker": "^7.0.119",
+        "extendable-media-recorder-wav-encoder-broker": "^7.0.120",
         "tslib": "^2.8.1",
-        "worker-factory": "^7.0.43"
+        "worker-factory": "^7.0.44"
       }
     },
     "node_modules/media-typer": {
@@ -12298,6 +12353,7 @@
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.4.tgz",
       "integrity": "sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "acorn": "^8.14.0",
         "pathe": "^2.0.1",
@@ -12309,7 +12365,8 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
       "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/mri": {
       "version": "1.2.0",
@@ -12867,6 +12924,7 @@
       "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-0.2.11.tgz",
       "integrity": "sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "quansync": "^0.2.7"
       }
@@ -13167,6 +13225,7 @@
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
       "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "confbox": "^0.1.8",
         "mlly": "^1.7.4",
@@ -13177,7 +13236,8 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
       "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/playwright": {
       "version": "1.52.0",
@@ -13781,7 +13841,8 @@
           "type": "individual",
           "url": "https://github.com/sponsors/sxzz"
         }
-      ]
+      ],
+      "license": "MIT"
     },
     "node_modules/querystringify": {
       "version": "2.2.0",
@@ -13941,19 +14002,19 @@
       }
     },
     "node_modules/recorder-audio-worklet": {
-      "version": "6.0.48",
-      "resolved": "https://registry.npmjs.org/recorder-audio-worklet/-/recorder-audio-worklet-6.0.48.tgz",
-      "integrity": "sha512-PVlq/1hjCrPcUGqARg8rR30A303xDCao0jmlBTaUaKkN3Xme58RI7EQxurv8rw2eDwVrN+nrni0UoJoa5/v+zg==",
+      "version": "6.0.49",
+      "resolved": "https://registry.npmjs.org/recorder-audio-worklet/-/recorder-audio-worklet-6.0.49.tgz",
+      "integrity": "sha512-JLKSKh5rAWxReHqca/f3h9L8pzBF1KnB+N2oIP2jkTD37n2yupkCazKD2f20pUOGkaX6AJG998gtKNCHYJn4nw==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.27.6",
-        "broker-factory": "^3.1.7",
+        "broker-factory": "^3.1.8",
         "fast-unique-numbers": "^9.0.22",
         "recorder-audio-worklet-processor": "^5.0.35",
         "standardized-audio-context": "^25.3.77",
         "subscribable-things": "^2.1.53",
         "tslib": "^2.8.1",
-        "worker-factory": "^7.0.43"
+        "worker-factory": "^7.0.44"
       }
     },
     "node_modules/recorder-audio-worklet-processor": {
@@ -14559,6 +14620,7 @@
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
       "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -15333,7 +15395,8 @@
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
       "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/tinypool": {
       "version": "1.0.1",
@@ -16269,6 +16332,7 @@
       "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.5.tgz",
       "integrity": "sha512-RyWSb5AHmGtjjNQ6gIlA67sHOsWpsbWpwDokLwTcejVdOjEkJZh7QKu14J00gDDVSh8kGH4KYC/TNBceXFZhtw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "acorn": "^8.14.1",
         "picomatch": "^4.0.2",
@@ -16283,6 +16347,7 @@
       "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.22.0.tgz",
       "integrity": "sha512-CP+iZq5U7doOifer5bcM0jQ9t3Is7EGybIYt3myVxceI8Zuk8EZEpe1NPtJvh7iqMs1VdbK0L41t9+um9VuuLw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@antfu/install-pkg": "^0.5.0",
         "@antfu/utils": "^0.7.10",
@@ -16329,6 +16394,7 @@
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
       "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -16346,6 +16412,7 @@
       "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-0.28.0.tgz",
       "integrity": "sha512-jiTGtJ3JsRFBjgvyilfrX7yUoGKScFgbdNw+6p6kEXU+Spf/rhxzgvdfuMcvhCcLmflB/dY3pGQshYBVGOUx7Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@antfu/utils": "^0.7.10",
         "@rollup/pluginutils": "^5.1.4",
@@ -16392,6 +16459,7 @@
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
       "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -16424,6 +16492,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },
@@ -17435,7 +17504,8 @@
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
       "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/websocket-driver": {
       "version": "0.7.4",
@@ -17615,9 +17685,9 @@
       }
     },
     "node_modules/worker-factory": {
-      "version": "7.0.43",
-      "resolved": "https://registry.npmjs.org/worker-factory/-/worker-factory-7.0.43.tgz",
-      "integrity": "sha512-SACVoj3gWKtMVyT9N+VD11Pd/Xe58+ZFfp8b7y/PagOvj3i8lU3Uyj+Lj7WYTmSBvNLC0JFaQkx44E6DhH5+WA==",
+      "version": "7.0.44",
+      "resolved": "https://registry.npmjs.org/worker-factory/-/worker-factory-7.0.44.tgz",
+      "integrity": "sha512-08AuUfWi+KeZI+KC7nU4pU/9tDeAFvE5NSWk+K9nIfuQc6UlOsZtjjeGVYVEn+DEchyXNJ5i10HCn0xRzFXEQA==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.27.6",

package.json

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

src/App.vue

@@ -15,12 +15,14 @@ import ProgressSpinner from 'primevue/progressspinner'
 import { computed, onMounted } from 'vue'
 
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
+import { useConflictDetection } from '@/composables/useConflictDetection'
 import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
 import { electronAPI, isElectron } from './utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()
+const conflictDetection = useConflictDetection()
 const isLoading = computed<boolean>(() => workspaceStore.spinner)
 const handleKey = (e: KeyboardEvent) => {
   workspaceStore.shiftDown = e.shiftKey
@@ -47,5 +49,9 @@ onMounted(() => {
   if (isElectron()) {
     document.addEventListener('contextmenu', showContextMenu)
   }
+
+  // Initialize conflict detection in background
+  // This runs async and doesn't block UI setup
+  void conflictDetection.initializeConflictDetection()
 })
 </script>

src/CLAUDE.md

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

src/components/CLAUDE.md

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

src/components/common/DotSpinner.vue

@@ -0,0 +1,130 @@
+<template>
+  <div
+    class="inline-flex items-center justify-center"
+    :style="{ width: size + 'px', height: size + 'px' }"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      :width="size"
+      :height="size"
+      viewBox="0 0 14 14"
+      fill="none"
+      class="animate-spin"
+      :style="{ animationDuration: duration }"
+    >
+      <g clip-path="url(#clip0_776_9582)">
+        <!-- Top dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M7 2.21053C7.61042 2.21053 8.10526 1.71568 8.10526 1.10526C8.10526 0.494843 7.61042 0 7 0C6.38958 0 5.89474 0.494843 5.89474 1.10526C5.89474 1.71568 6.38958 2.21053 7 2.21053Z"
+          :fill="color"
+        />
+        <!-- Left dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.25s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M2.21053 7C2.21053 7.61042 1.71568 8.10526 1.10526 8.10526C0.494843 8.10526 0 7.61042 0 7C0 6.38958 0.494843 5.89474 1.10526 5.89474C1.71568 5.89474 2.21053 6.38958 2.21053 7Z"
+          :fill="color"
+        />
+        <!-- Right dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.5s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M14 7C14 7.61042 13.5052 8.10526 12.8947 8.10526C12.2843 8.10526 11.7895 7.61042 11.7895 7C11.7895 6.38958 12.2843 5.89474 12.8947 5.89474C13.5052 5.89474 14 6.38958 14 7Z"
+          :fill="color"
+        />
+        <!-- Bottom dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.75s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M8.10526 12.8947C8.10526 13.5052 7.61041 14 6.99999 14C6.38957 14 5.89473 13.5052 5.89473 12.8947C5.89473 12.2843 6.38957 11.7895 6.99999 11.7895C7.61041 11.7895 8.10526 12.2843 8.10526 12.8947Z"
+          :fill="color"
+        />
+        <!-- Top-left dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.125s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M2.05039 3.61349C2.48203 4.04513 3.18184 4.04513 3.61347 3.61349C4.0451 3.18186 4.0451 2.48205 3.61347 2.05042C3.18184 1.61878 2.48203 1.61878 2.05039 2.05042C1.61876 2.48205 1.61876 3.18186 2.05039 3.61349Z"
+          :fill="color"
+        />
+        <!-- Bottom-right dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.625s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M11.9496 11.9496C11.518 12.3812 10.8182 12.3812 10.3865 11.9496C9.9549 11.5179 9.9549 10.8181 10.3865 10.3865C10.8182 9.95485 11.518 9.95485 11.9496 10.3865C12.3812 10.8181 12.3812 11.5179 11.9496 11.9496Z"
+          :fill="color"
+        />
+        <!-- Bottom-left dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.875s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M2.05039 11.9496C2.48203 12.3812 3.18184 12.3812 3.61347 11.9496C4.0451 11.5179 4.0451 10.8181 3.61347 10.3865C3.18184 9.95485 2.48203 9.95485 2.05039 10.3865C1.61876 10.8181 1.61876 11.5179 2.05039 11.9496Z"
+          :fill="color"
+        />
+        <!-- Top-right dot -->
+        <path
+          class="dot-animation"
+          style="animation-delay: 0.375s"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M11.9496 3.61349C11.518 4.04513 10.8182 4.04513 10.3865 3.61349C9.9549 3.18186 9.9549 2.48205 10.3865 2.05042C10.8182 1.61878 11.518 1.61878 11.9496 2.05042C12.3812 2.48205 12.3812 3.18186 11.9496 3.61349Z"
+          :fill="color"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_776_9582">
+          <rect width="14" height="14" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+
+const { size = 24, duration = '2s' } = defineProps<{
+  size?: number
+  duration?: string
+}>()
+
+const colorPaletteStore = useColorPaletteStore()
+
+const color = computed(() =>
+  colorPaletteStore.completedActivePalette.light_theme ? '#2C2B30' : '#D4D4D4'
+)
+</script>
+
+<style scoped>
+.dot-animation {
+  animation: dot-pulse 1s ease-in-out infinite;
+}
+
+@keyframes dot-pulse {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+</style>

src/components/dialog/GlobalDialog.vue

@@ -27,7 +27,7 @@
     />
 
     <template v-if="item.footerComponent" #footer>
-      <component :is="item.footerComponent" />
+      <component :is="item.footerComponent" v-bind="item.footerProps" />
     </template>
   </Dialog>
 </template>

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -31,7 +31,7 @@
       </div>
     </template>
   </ListBox>
-  <div v-if="isManagerInstalled" class="flex justify-end py-3">
+  <div v-if="!isLegacyManager" class="flex justify-end py-3">
     <PackInstallButton
       :disabled="isLoading || !!error || missingNodePacks.length === 0"
       :node-packs="missingNodePacks"
@@ -45,14 +45,14 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import ListBox from 'primevue/listbox'
-import { computed } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
 import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
+import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useDialogService } from '@/services/dialogService'
-import { useAboutPanelStore } from '@/stores/aboutPanelStore'
 import type { MissingNodeType } from '@/types/comfy'
 import { ManagerTab } from '@/types/comfyManagerTypes'
 
@@ -60,22 +60,11 @@ const props = defineProps<{
   missingNodeTypes: MissingNodeType[]
 }>()
 
-const aboutPanelStore = useAboutPanelStore()
-
 // Get missing node packs from workflow with loading and error states
 const { missingNodePacks, isLoading, error, missingCoreNodes } =
   useMissingNodes()
 
-// 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 isLegacyManager = ref(false)
 
 const uniqueNodes = computed(() => {
   const seenTypes = new Set()
@@ -103,6 +92,13 @@ const openManager = () => {
     initialTab: ManagerTab.Missing
   })
 }
+
+onMounted(async () => {
+  const isLegacyResponse = await useComfyManagerService().isLegacyManagerUI()
+  if (isLegacyResponse?.is_legacy_manager_ui) {
+    isLegacyManager.value = true
+  }
+})
 </script>
 
 <style scoped>

src/components/dialog/content/ManagerProgressDialogContent.test.ts

@@ -30,11 +30,20 @@ const defaultMockTaskLogs = [
 
 vi.mock('@/stores/comfyManagerStore', () => ({
   useComfyManagerStore: vi.fn(() => ({
-    taskLogs: [...defaultMockTaskLogs]
+    taskLogs: [...defaultMockTaskLogs],
+    succeededTasksLogs: [...defaultMockTaskLogs],
+    failedTasksLogs: [...defaultMockTaskLogs],
+    managerQueue: { historyCount: 2 },
+    isLoading: false
   })),
   useManagerProgressDialogStore: vi.fn(() => ({
     isExpanded: true,
-    collapse: mockCollapse
+    activeTabIndex: 0,
+    getActiveTabIndex: vi.fn(() => 0),
+    setActiveTabIndex: vi.fn(),
+    toggle: vi.fn(),
+    collapse: mockCollapse,
+    expand: vi.fn()
   }))
 }))
 

src/components/dialog/content/ManagerProgressDialogContent.vue

@@ -18,7 +18,7 @@
         'max-h-0': !isExpanded
       }"
     >
-      <div v-for="(panel, index) in taskPanels" :key="index">
+      <div v-for="(log, index) in focusedLogs" :key="index">
         <Panel
           :expanded="collapsedPanels[index] || false"
           toggleable
@@ -27,7 +27,7 @@
           <template #header>
             <div class="flex items-center justify-between w-full py-2">
               <div class="flex flex-col text-sm font-medium leading-normal">
-                <span>{{ panel.taskName }}</span>
+                <span>{{ log.taskName }}</span>
                 <span class="text-muted">
                   {{
                     isInProgress(index)
@@ -52,24 +52,24 @@
           </template>
           <div
             :ref="
-              index === taskPanels.length - 1
+              index === focusedLogs.length - 1
                 ? (el) => (lastPanelRef = el as HTMLElement)
                 : undefined
             "
             class="overflow-y-auto h-64 rounded-lg bg-black"
             :class="{
-              'h-64': index !== taskPanels.length - 1,
-              'flex-grow': index === taskPanels.length - 1
+              'h-64': index !== focusedLogs.length - 1,
+              'flex-grow': index === focusedLogs.length - 1
             }"
             @scroll="handleScroll"
           >
             <div class="h-full">
               <div
-                v-for="(log, logIndex) in panel.logs"
+                v-for="(logLine, logIndex) in log.logs"
                 :key="logIndex"
                 class="text-neutral-400 dark-theme:text-muted"
               >
-                <pre class="whitespace-pre-wrap break-words">{{ log }}</pre>
+                <pre class="whitespace-pre-wrap break-words">{{ logLine }}</pre>
               </div>
             </div>
           </div>
@@ -90,17 +90,23 @@ import {
   useManagerProgressDialogStore
 } from '@/stores/comfyManagerStore'
 
-const { taskLogs } = useComfyManagerStore()
+const comfyManagerStore = useComfyManagerStore()
 const progressDialogContent = useManagerProgressDialogStore()
-const managerStore = useComfyManagerStore()
 
 const isInProgress = (index: number) =>
-  index === taskPanels.value.length - 1 && managerStore.uncompletedCount > 0
+  index === comfyManagerStore.managerQueue.historyCount - 1 &&
+  comfyManagerStore.isLoading
 
-const taskPanels = computed(() => taskLogs)
 const isExpanded = computed(() => progressDialogContent.isExpanded)
 const isCollapsed = computed(() => !isExpanded.value)
 
+const focusedLogs = computed(() => {
+  if (progressDialogContent.getActiveTabIndex() === 0) {
+    return comfyManagerStore.succeededTasksLogs
+  }
+  return comfyManagerStore.failedTasksLogs
+})
+
 const collapsedPanels = ref<Record<number, boolean>>({})
 const togglePanel = (index: number) => {
   collapsedPanels.value[index] = !collapsedPanels.value[index]
@@ -115,7 +121,7 @@ const { y: scrollY } = useScroll(sectionsContainerRef, {
 
 const lastPanelRef = ref<HTMLElement | null>(null)
 const isUserScrolling = ref(false)
-const lastPanelLogs = computed(() => taskPanels.value?.at(-1)?.logs)
+const lastPanelLogs = computed(() => focusedLogs.value?.at(-1)?.logs)
 
 const isAtBottom = (el: HTMLElement | null) => {
   if (!el) return false

src/components/dialog/content/manager/ManagerDialogContent.vue

@@ -26,6 +26,35 @@
         }"
       >
         <div class="px-6 flex flex-col h-full">
+          <!-- Conflict Warning Banner -->
+          <div
+            v-if="shouldShowManagerBanner"
+            class="bg-yellow-600 bg-opacity-20 border border-yellow-400 rounded-lg p-4 mt-3 mb-4 flex items-center gap-6 relative"
+          >
+            <i class="pi pi-exclamation-triangle text-yellow-600 text-lg"></i>
+            <div class="flex flex-col gap-2 flex-1">
+              <p class="text-sm font-bold m-0">
+                {{ $t('manager.conflicts.warningBanner.title') }}
+              </p>
+              <p class="text-xs m-0">
+                {{ $t('manager.conflicts.warningBanner.message') }}
+              </p>
+              <p
+                class="text-sm font-bold m-0 cursor-pointer"
+                @click="onClickWarningLink"
+              >
+                {{ $t('manager.conflicts.warningBanner.button') }}
+              </p>
+            </div>
+            <button
+              type="button"
+              class="absolute top-2 right-2 w-6 h-6 border-none outline-none bg-transparent flex items-center justify-center text-yellow-600 rounded transition-colors"
+              :aria-label="$t('g.close')"
+              @click="dismissWarningBanner"
+            >
+              <i class="pi pi-times text-sm"></i>
+            </button>
+          </div>
           <RegistrySearchBar
             v-model:searchQuery="searchQuery"
             v-model:searchMode="searchMode"
@@ -34,6 +63,7 @@
             :suggestions="suggestions"
             :is-missing-tab="isMissingTab"
             :sort-options="sortOptions"
+            :is-update-available-tab="isUpdateAvailableTab"
           />
           <div class="flex-1 overflow-auto">
             <div
@@ -69,7 +99,9 @@
                     :is-selected="
                       selectedNodePacks.some((pack) => pack.id === item.id)
                     "
-                    @click.stop="(event) => selectNodePack(item, event)"
+                    @click.stop="
+                      (event: MouseEvent) => selectNodePack(item, event)
+                    "
                   />
                 </template>
               </VirtualGrid>
@@ -101,7 +133,8 @@ import {
   onMounted,
   onUnmounted,
   ref,
-  watch
+  watch,
+  watchEffect
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -119,6 +152,7 @@ import { useManagerStatePersistence } from '@/composables/manager/useManagerStat
 import { useInstalledPacks } from '@/composables/nodePack/useInstalledPacks'
 import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
 import { useWorkflowPacks } from '@/composables/nodePack/useWorkflowPacks'
+import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
 import { useRegistrySearch } from '@/composables/useRegistrySearch'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
@@ -133,6 +167,7 @@ const { initialTab } = defineProps<{
 const { t } = useI18n()
 const comfyManagerStore = useComfyManagerStore()
 const { getPackById } = useComfyRegistryStore()
+const conflictAcknowledgment = useConflictAcknowledgment()
 const persistedState = useManagerStatePersistence()
 const initialState = persistedState.loadStoredState()
 
@@ -149,6 +184,13 @@ const {
   toggle: toggleSideNav
 } = useResponsiveCollapse()
 
+// Use conflict acknowledgment state from composable
+const {
+  shouldShowManagerBanner,
+  dismissWarningBanner,
+  dismissRedDotNotification
+} = conflictAcknowledgment
+
 const tabs = ref<TabItem[]>([
   { id: ManagerTab.All, label: t('g.all'), icon: 'pi-list' },
   { id: ManagerTab.Installed, label: t('g.installed'), icon: 'pi-box' },
@@ -312,6 +354,13 @@ watch([isAllTab, searchResults], () => {
   displayPacks.value = searchResults.value
 })
 
+const onClickWarningLink = () => {
+  window.open(
+    'https://docs.comfy.org/troubleshooting/custom-node-issues',
+    '_blank'
+  )
+}
+
 const onResultsChange = () => {
   switch (selectedTab.value?.id) {
     case ManagerTab.Installed:
@@ -440,6 +489,7 @@ whenever(selectedNodePack, async () => {
   if (hasMultipleSelections.value) return
   // Only fetch if we haven't already for this pack
   if (lastFetchedPackId.value === pack.id) return
+
   const data = await getPackById.call(pack.id)
   // If selected node hasn't changed since request, merge registry & Algolia data
   if (data?.id === pack.id) {
@@ -472,6 +522,10 @@ watch([searchQuery, selectedTab], () => {
   }
 })
 
+watchEffect(() => {
+  dismissRedDotNotification()
+})
+
 onBeforeUnmount(() => {
   persistedState.persistState({
     selectedTabId: selectedTab.value?.id,

src/components/dialog/content/manager/ManagerHeader.test.ts

@@ -0,0 +1,82 @@
+import { mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import Tag from 'primevue/tag'
+import Tooltip from 'primevue/tooltip'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json'
+
+import ManagerHeader from './ManagerHeader.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: enMessages
+  }
+})
+
+describe('ManagerHeader', () => {
+  const createWrapper = () => {
+    return mount(ManagerHeader, {
+      global: {
+        plugins: [createPinia(), PrimeVue, i18n],
+        directives: {
+          tooltip: Tooltip
+        },
+        components: {
+          Tag
+        }
+      }
+    })
+  }
+
+  it('renders the component title', () => {
+    const wrapper = createWrapper()
+
+    expect(wrapper.find('h2').text()).toBe(
+      enMessages.manager.discoverCommunityContent
+    )
+  })
+
+  it('displays the legacy manager UI tag', () => {
+    const wrapper = createWrapper()
+
+    const tag = wrapper.find('[data-pc-name="tag"]')
+    expect(tag.exists()).toBe(true)
+    expect(tag.text()).toContain(enMessages.manager.legacyManagerUI)
+  })
+
+  it('applies info severity to the tag', () => {
+    const wrapper = createWrapper()
+
+    const tag = wrapper.find('[data-pc-name="tag"]')
+    expect(tag.classes()).toContain('p-tag-info')
+  })
+
+  it('displays info icon in the tag', () => {
+    const wrapper = createWrapper()
+
+    const icon = wrapper.find('.pi-info-circle')
+    expect(icon.exists()).toBe(true)
+  })
+
+  it('has cursor-help class on the tag', () => {
+    const wrapper = createWrapper()
+
+    const tag = wrapper.find('[data-pc-name="tag"]')
+    expect(tag.classes()).toContain('cursor-help')
+  })
+
+  it('has proper structure with flex container', () => {
+    const wrapper = createWrapper()
+
+    const flexContainer = wrapper.find('.flex.justify-end.ml-auto.pr-4')
+    expect(flexContainer.exists()).toBe(true)
+
+    const tag = flexContainer.find('[data-pc-name="tag"]')
+    expect(tag.exists()).toBe(true)
+  })
+})

src/components/dialog/content/manager/ManagerHeader.vue

@@ -4,6 +4,22 @@
       <h2 class="text-lg font-normal text-left">
         {{ $t('manager.discoverCommunityContent') }}
       </h2>
+      <div class="flex justify-end ml-auto pr-4">
+        <Tag
+          v-tooltip.left="$t('manager.legacyManagerUIDescription')"
+          severity="info"
+          icon="pi pi-info-circle"
+          :value="$t('manager.legacyManagerUI')"
+          class="cursor-help"
+          :pt="{
+            root: { class: 'text-xs' }
+          }"
+        />
+      </div>
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+import Tag from 'primevue/tag'
+</script>

src/components/dialog/content/manager/NodeConflictDialogContent.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="w-[552px] flex flex-col">
+    <ContentDivider :width="1" />
+    <div class="px-4 py-6 w-full h-full flex flex-col gap-2">
+      <!-- Description -->
+      <div v-if="showAfterWhatsNew">
+        <p
+          class="text-sm leading-4 text-neutral-800 dark-theme:text-white m-0 mb-4"
+        >
+          {{ $t('manager.conflicts.description') }}
+          <br /><br />
+          {{ $t('manager.conflicts.info') }}
+        </p>
+      </div>
+
+      <!-- Import Failed List Wrapper -->
+      <div
+        v-if="importFailedConflicts.length > 0"
+        class="w-full flex flex-col bg-neutral-200 dark-theme:bg-black min-h-8 rounded-lg"
+      >
+        <div
+          class="w-full h-8 flex items-center justify-between gap-2 pl-4"
+          @click="toggleImportFailedPanel"
+        >
+          <div class="flex-1 flex">
+            <span
+              class="text-xs font-bold text-yellow-600 dark-theme:text-yellow-400 mr-2"
+              >{{ importFailedConflicts.length }}</span
+            >
+            <span
+              class="text-xs font-bold text-neutral-600 dark-theme:text-white"
+              >{{ $t('manager.conflicts.importFailedExtensions') }}</span
+            >
+          </div>
+          <div>
+            <Button
+              :icon="
+                importFailedExpanded
+                  ? 'pi pi-chevron-down text-xs'
+                  : 'pi pi-chevron-right text-xs'
+              "
+              text
+              class="text-neutral-600 dark-theme:text-neutral-300 !bg-transparent"
+            />
+          </div>
+        </div>
+        <!-- Import failed list -->
+        <div
+          v-if="importFailedExpanded"
+          class="py-2 px-4 flex flex-col gap-2.5 max-h-[142px] overflow-y-auto scrollbar-hide"
+        >
+          <div
+            v-for="(packageName, i) in importFailedConflicts"
+            :key="i"
+            class="flex items-center justify-between h-6 px-4 flex-shrink-0 conflict-list-item"
+          >
+            <span class="text-xs text-neutral-600 dark-theme:text-neutral-300">
+              {{ packageName }}
+            </span>
+            <span class="pi pi-info-circle text-sm"></span>
+          </div>
+        </div>
+      </div>
+      <!-- Conflict List Wrapper -->
+      <div
+        class="w-full flex flex-col bg-neutral-200 dark-theme:bg-black min-h-8 rounded-lg"
+      >
+        <div
+          class="w-full h-8 flex items-center justify-between gap-2 pl-4"
+          @click="toggleConflictsPanel"
+        >
+          <div class="flex-1 flex">
+            <span
+              class="text-xs font-bold text-yellow-600 dark-theme:text-yellow-400 mr-2"
+              >{{ allConflictDetails.length }}</span
+            >
+            <span
+              class="text-xs font-bold text-neutral-600 dark-theme:text-white"
+              >{{ $t('manager.conflicts.conflicts') }}</span
+            >
+          </div>
+          <div>
+            <Button
+              :icon="
+                conflictsExpanded
+                  ? 'pi pi-chevron-down text-xs'
+                  : 'pi pi-chevron-right text-xs'
+              "
+              text
+              class="text-neutral-600 dark-theme:text-neutral-300 !bg-transparent"
+            />
+          </div>
+        </div>
+        <!-- Conflicts list -->
+        <div
+          v-if="conflictsExpanded"
+          class="py-2 px-4 flex flex-col gap-2.5 max-h-[142px] overflow-y-auto scrollbar-hide"
+        >
+          <div
+            v-for="(conflict, i) in allConflictDetails"
+            :key="i"
+            class="flex items-center justify-between h-6 px-4 flex-shrink-0 conflict-list-item"
+          >
+            <span
+              class="text-xs text-neutral-600 dark-theme:text-neutral-300"
+              >{{ getConflictMessage(conflict, t) }}</span
+            >
+            <span class="pi pi-info-circle text-sm"></span>
+          </div>
+        </div>
+      </div>
+      <!-- Extension List Wrapper -->
+      <div
+        class="w-full flex flex-col bg-neutral-200 dark-theme:bg-black min-h-8 rounded-lg"
+      >
+        <div
+          class="w-full h-8 flex items-center justify-between gap-2 pl-4"
+          @click="toggleExtensionsPanel"
+        >
+          <div class="flex-1 flex">
+            <span
+              class="text-xs font-bold text-yellow-600 dark-theme:text-yellow-400 mr-2"
+              >{{ conflictData.length }}</span
+            >
+            <span
+              class="text-xs font-bold text-neutral-600 dark-theme:text-white"
+              >{{ $t('manager.conflicts.extensionAtRisk') }}</span
+            >
+          </div>
+          <div>
+            <Button
+              :icon="
+                extensionsExpanded
+                  ? 'pi pi-chevron-down text-xs'
+                  : 'pi pi-chevron-right text-xs'
+              "
+              text
+              class="text-neutral-600 dark-theme:text-neutral-300 !bg-transparent"
+            />
+          </div>
+        </div>
+        <!-- Extension list -->
+        <div
+          v-if="extensionsExpanded"
+          class="py-2 px-4 flex flex-col gap-2.5 max-h-[142px] overflow-y-auto scrollbar-hide"
+        >
+          <div
+            v-for="conflictResult in conflictData"
+            :key="conflictResult.package_id"
+            class="flex items-center justify-between h-6 px-4 flex-shrink-0 conflict-list-item"
+          >
+            <span class="text-xs text-neutral-600 dark-theme:text-neutral-300">
+              {{ conflictResult.package_name }}
+            </span>
+            <span class="pi pi-info-circle text-sm"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <ContentDivider :width="1" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { filter, flatMap, map, some } from 'lodash'
+import Button from 'primevue/button'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import ContentDivider from '@/components/common/ContentDivider.vue'
+import { useConflictDetection } from '@/composables/useConflictDetection'
+import { getConflictMessage } from '@/utils/conflictMessageUtil'
+
+interface Props {
+  showAfterWhatsNew?: boolean
+}
+
+const { showAfterWhatsNew } = withDefaults(defineProps<Props>(), {
+  showAfterWhatsNew: false
+})
+
+const { t } = useI18n()
+const { conflictedPackages } = useConflictDetection()
+
+const conflictsExpanded = ref<boolean>(false)
+const extensionsExpanded = ref<boolean>(false)
+const importFailedExpanded = ref<boolean>(false)
+
+const conflictData = computed(() => conflictedPackages.value)
+
+const allConflictDetails = computed(() => {
+  const allConflicts = flatMap(conflictData.value, (result) => result.conflicts)
+  return filter(allConflicts, (conflict) => conflict.type !== 'import_failed')
+})
+
+const packagesWithImportFailed = computed(() => {
+  return filter(conflictData.value, (result) =>
+    some(result.conflicts, (conflict) => conflict.type === 'import_failed')
+  )
+})
+
+const importFailedConflicts = computed(() => {
+  return map(
+    packagesWithImportFailed.value,
+    (result) => result.package_name || result.package_id
+  )
+})
+
+const toggleImportFailedPanel = () => {
+  importFailedExpanded.value = !importFailedExpanded.value
+  conflictsExpanded.value = false
+  extensionsExpanded.value = false
+}
+
+const toggleConflictsPanel = () => {
+  conflictsExpanded.value = !conflictsExpanded.value
+  extensionsExpanded.value = false
+  importFailedExpanded.value = false
+}
+
+const toggleExtensionsPanel = () => {
+  extensionsExpanded.value = !extensionsExpanded.value
+  conflictsExpanded.value = false
+  importFailedExpanded.value = false
+}
+</script>
+<style scoped>
+.conflict-list-item:hover {
+  background-color: rgba(0, 122, 255, 0.2);
+}
+</style>

src/components/dialog/content/manager/NodeConflictFooter.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="flex items-center justify-between w-full px-3 py-4">
+    <div class="w-full flex items-center justify-between gap-2 pr-1">
+      <Button
+        :label="$t('manager.conflicts.conflictInfoTitle')"
+        text
+        severity="secondary"
+        size="small"
+        icon="pi pi-info-circle"
+        :pt="{
+          label: { class: 'text-sm' }
+        }"
+        @click="handleConflictInfoClick"
+      />
+      <Button
+        v-if="props.buttonText"
+        :label="props.buttonText"
+        severity="secondary"
+        size="small"
+        @click="handleButtonClick"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import { useDialogStore } from '@/stores/dialogStore'
+
+interface Props {
+  buttonText?: string
+  onButtonClick?: () => void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  buttonText: undefined,
+  onButtonClick: undefined
+})
+
+const dialogStore = useDialogStore()
+
+const handleConflictInfoClick = () => {
+  window.open(
+    'https://docs.comfy.org/troubleshooting/custom-node-issues',
+    '_blank'
+  )
+}
+
+const handleButtonClick = () => {
+  // Close the conflict dialog
+  dialogStore.closeDialog({ key: 'global-node-conflict' })
+
+  // Execute the custom button action if provided
+  if (props.onButtonClick) {
+    props.onButtonClick()
+  }
+}
+</script>

src/components/dialog/content/manager/NodeConflictHeader.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="h-12 flex items-center justify-between w-full pl-6">
+    <div class="flex items-center gap-2">
+      <!-- Warning Icon -->
+      <i class="pi pi-exclamation-triangle text-lg"></i>
+      <!-- Title -->
+      <p class="text-base font-bold">
+        {{ $t('manager.conflicts.title') }}
+      </p>
+    </div>
+  </div>
+</template>

src/components/dialog/content/manager/PackStatusMessage.vue

@@ -17,9 +17,10 @@
 
 <script setup lang="ts">
 import Message from 'primevue/message'
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 
 import { components } from '@/types/comfyRegistryTypes'
+import { ImportFailedKey } from '@/types/importFailedTypes'
 
 type PackVersionStatus = components['schemas']['NodeVersionStatus']
 type PackStatus = components['schemas']['NodeStatus']
@@ -32,10 +33,15 @@ type StatusProps = {
   severity: MessageSeverity
 }
 
-const { statusType } = defineProps<{
+const { statusType, hasCompatibilityIssues } = defineProps<{
   statusType: Status
+  hasCompatibilityIssues?: boolean
 }>()
 
+// Inject import failed context from parent
+const importFailedContext = inject(ImportFailedKey)
+const importFailed = importFailedContext?.importFailed
+
 const statusPropsMap: Record<Status, StatusProps> = {
   NodeStatusActive: {
     label: 'active',
@@ -71,10 +77,14 @@ const statusPropsMap: Record<Status, StatusProps> = {
   }
 }
 
-const statusLabel = computed(
-  () => statusPropsMap[statusType]?.label || 'unknown'
-)
-const statusSeverity = computed(
-  () => statusPropsMap[statusType]?.severity || 'secondary'
-)
+const statusLabel = computed(() => {
+  if (importFailed?.value) return 'importFailed'
+  if (hasCompatibilityIssues) return 'conflicting'
+  return statusPropsMap[statusType]?.label || 'unknown'
+})
+
+const statusSeverity = computed(() => {
+  if (hasCompatibilityIssues || importFailed?.value) return 'error'
+  return statusPropsMap[statusType]?.severity || 'secondary'
+})
 </script>

src/components/dialog/content/manager/PackVersionBadge.test.ts

@@ -6,11 +6,18 @@ import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import enMessages from '@/locales/en/main.json'
-import { SelectedVersion } from '@/types/comfyManagerTypes'
 
 import PackVersionBadge from './PackVersionBadge.vue'
 import PackVersionSelectorPopover from './PackVersionSelectorPopover.vue'
 
+// Mock config to prevent __COMFYUI_FRONTEND_VERSION__ error
+vi.mock('@/config', () => ({
+  default: {
+    app_title: 'ComfyUI',
+    app_version: '1.0.0'
+  }
+}))
+
 const mockNodePack = {
   id: 'test-pack',
   name: 'Test Pack',
@@ -120,7 +127,7 @@ describe('PackVersionBadge', () => {
 
     const badge = wrapper.find('[role="button"]')
     expect(badge.exists()).toBe(true)
-    expect(badge.find('span').text()).toBe(SelectedVersion.NIGHTLY)
+    expect(badge.find('span').text()).toBe('nightly')
   })
 
   it('falls back to NIGHTLY when nodePack.id is missing', () => {
@@ -134,7 +141,7 @@ describe('PackVersionBadge', () => {
 
     const badge = wrapper.find('[role="button"]')
     expect(badge.exists()).toBe(true)
-    expect(badge.find('span').text()).toBe(SelectedVersion.NIGHTLY)
+    expect(badge.find('span').text()).toBe('nightly')
   })
 
   it('toggles the popover when button is clicked', async () => {

src/components/dialog/content/manager/PackVersionBadge.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <div
-      class="inline-flex items-center gap-1 rounded-2xl text-xs cursor-pointer px-2 py-1"
-      :class="{ 'bg-gray-100 dark-theme:bg-neutral-700': fill }"
+      class="inline-flex items-center gap-1 rounded-2xl text-xs cursor-pointer py-1"
+      :class="{ 'bg-gray-100 dark-theme:bg-neutral-700 px-1.5': fill }"
       aria-haspopup="true"
       role="button"
       tabindex="0"
@@ -12,8 +12,7 @@
     >
       <i
         v-if="isUpdateAvailable"
-        class="pi pi-arrow-circle-up text-blue-600"
-        style="font-size: 8px"
+        class="pi pi-arrow-circle-up text-blue-600 text-xs"
       />
       <span>{{ installedVersion }}</span>
       <i class="pi pi-chevron-right" style="font-size: 8px" />
@@ -22,7 +21,7 @@
     <Popover
       ref="popoverRef"
       :pt="{
-        content: { class: 'px-0' }
+        content: { class: 'p-0 shadow-lg' }
       }"
     >
       <PackVersionSelectorPopover
@@ -42,8 +41,7 @@ import { computed, ref, watch } from 'vue'
 import PackVersionSelectorPopover from '@/components/dialog/content/manager/PackVersionSelectorPopover.vue'
 import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { SelectedVersion } from '@/types/comfyManagerTypes'
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 import { isSemVer } from '@/utils/formatUtil'
 
 const TRUNCATED_HASH_LENGTH = 7
@@ -64,11 +62,11 @@ const popoverRef = ref()
 const managerStore = useComfyManagerStore()
 
 const installedVersion = computed(() => {
-  if (!nodePack.id) return SelectedVersion.NIGHTLY
+  if (!nodePack.id) return 'nightly'
   const version =
     managerStore.installedPacks[nodePack.id]?.ver ??
     nodePack.latest_version?.version ??
-    SelectedVersion.NIGHTLY
+    'nightly'
 
   // If Git hash, truncate to 7 characters
   return isSemVer(version) ? version : version.slice(0, TRUNCATED_HASH_LENGTH)

src/components/dialog/content/manager/PackVersionSelectorPopover.test.ts

@@ -3,18 +3,32 @@ import { createPinia } from 'pinia'
 import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'
 import Listbox from 'primevue/listbox'
+import Select from 'primevue/select'
+import Tooltip from 'primevue/tooltip'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
+import VerifiedIcon from '@/components/icons/VerifiedIcon.vue'
 import enMessages from '@/locales/en/main.json'
-import { SelectedVersion } from '@/types/comfyManagerTypes'
+
+// SelectedVersion is now using direct strings instead of enum
 
 import PackVersionSelectorPopover from './PackVersionSelectorPopover.vue'
 
 // Default mock versions for reference
 const defaultMockVersions = [
-  { version: '1.0.0', createdAt: '2023-01-01' },
+  {
+    version: '1.0.0',
+    createdAt: '2023-01-01',
+    supported_os: ['windows', 'linux'],
+    supported_accelerators: ['CPU'],
+    supported_comfyui_version: '>=0.1.0',
+    supported_comfyui_frontend_version: '>=1.0.0',
+    supported_python_version: '>=3.8',
+    is_banned: false,
+    has_registry_data: true
+  },
   { version: '0.9.0', createdAt: '2022-12-01' },
   { version: '0.8.0', createdAt: '2022-11-01' }
 ]
@@ -22,13 +36,24 @@ const defaultMockVersions = [
 const mockNodePack = {
   id: 'test-pack',
   name: 'Test Pack',
-  latest_version: { version: '1.0.0' },
-  repository: 'https://github.com/user/repo'
+  latest_version: {
+    version: '1.0.0',
+    supported_os: ['windows', 'linux'],
+    supported_accelerators: ['CPU'],
+    supported_comfyui_version: '>=0.1.0',
+    supported_comfyui_frontend_version: '>=1.0.0',
+    supported_python_version: '>=3.8',
+    is_banned: false,
+    has_registry_data: true
+  },
+  repository: 'https://github.com/user/repo',
+  has_registry_data: true
 }
 
 // Create mock functions
 const mockGetPackVersions = vi.fn()
 const mockInstallPack = vi.fn().mockResolvedValue(undefined)
+const mockCheckNodeCompatibility = vi.fn()
 
 // Mock the registry service
 vi.mock('@/services/comfyRegistryService', () => ({
@@ -49,6 +74,13 @@ vi.mock('@/stores/comfyManagerStore', () => ({
   }))
 }))
 
+// Mock the conflict detection composable
+vi.mock('@/composables/useConflictDetection', () => ({
+  useConflictDetection: vi.fn(() => ({
+    checkNodeCompatibility: mockCheckNodeCompatibility
+  }))
+}))
+
 const waitForPromises = async () => {
   await new Promise((resolve) => setTimeout(resolve, 16))
   await nextTick()
@@ -59,6 +91,9 @@ describe('PackVersionSelectorPopover', () => {
     vi.clearAllMocks()
     mockGetPackVersions.mockReset()
     mockInstallPack.mockReset().mockResolvedValue(undefined)
+    mockCheckNodeCompatibility
+      .mockReset()
+      .mockReturnValue({ hasConflict: false, conflicts: [] })
   })
 
   const mountComponent = ({
@@ -78,7 +113,12 @@ describe('PackVersionSelectorPopover', () => {
       global: {
         plugins: [PrimeVue, createPinia(), i18n],
         components: {
-          Listbox
+          Listbox,
+          VerifiedIcon,
+          Select
+        },
+        directives: {
+          tooltip: Tooltip
         }
       }
     })
@@ -120,14 +160,15 @@ describe('PackVersionSelectorPopover', () => {
 
     const options = listbox.props('options')!
     // Check that we have both special options and version options
-    expect(options.length).toBe(defaultMockVersions.length + 2) // 2 special options + version options
+    // Latest version (1.0.0) should be excluded from the version list to avoid duplication
+    expect(options.length).toBe(defaultMockVersions.length + 1) // 2 special options + version options minus 1 duplicate
 
     // Check that special options exist
-    expect(options.some((o) => o.value === SelectedVersion.NIGHTLY)).toBe(true)
-    expect(options.some((o) => o.value === SelectedVersion.LATEST)).toBe(true)
+    expect(options.some((o) => o.value === 'nightly')).toBe(true)
+    expect(options.some((o) => o.value === 'latest')).toBe(true)
 
-    // Check that version options exist
-    expect(options.some((o) => o.value === '1.0.0')).toBe(true)
+    // Check that version options exist (excluding latest version 1.0.0)
+    expect(options.some((o) => o.value === '1.0.0')).toBe(false) // Should be excluded as it's the latest
     expect(options.some((o) => o.value === '0.9.0')).toBe(true)
     expect(options.some((o) => o.value === '0.8.0')).toBe(true)
   })
@@ -304,7 +345,7 @@ describe('PackVersionSelectorPopover', () => {
       await waitForPromises()
       const listbox = wrapper.findComponent(Listbox)
       expect(listbox.exists()).toBe(true)
-      expect(listbox.props('modelValue')).toBe(SelectedVersion.NIGHTLY)
+      expect(listbox.props('modelValue')).toBe('nightly')
     })
 
     it('defaults to nightly when publisher name is "Unclaimed"', async () => {
@@ -325,7 +366,343 @@ describe('PackVersionSelectorPopover', () => {
       await waitForPromises()
       const listbox = wrapper.findComponent(Listbox)
       expect(listbox.exists()).toBe(true)
-      expect(listbox.props('modelValue')).toBe(SelectedVersion.NIGHTLY)
+      expect(listbox.props('modelValue')).toBe('nightly')
+    })
+  })
+
+  describe('version compatibility checking', () => {
+    it('shows warning icon for incompatible versions', async () => {
+      // Set up the mock for versions
+      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
+
+      // Mock compatibility check to return conflict for specific version
+      mockCheckNodeCompatibility.mockImplementation((versionData) => {
+        if (versionData.supported_os?.includes('linux')) {
+          return {
+            hasConflict: true,
+            conflicts: [
+              {
+                type: 'os',
+                current_value: 'windows',
+                required_value: 'linux'
+              }
+            ]
+          }
+        }
+        return { hasConflict: false, conflicts: [] }
+      })
+
+      const nodePackWithCompatibility = {
+        ...mockNodePack,
+        supported_os: ['linux'],
+        supported_accelerators: ['CUDA']
+      }
+
+      const wrapper = mountComponent({
+        props: { nodePack: nodePackWithCompatibility }
+      })
+      await waitForPromises()
+
+      // Check that compatibility checking function was called
+      expect(mockCheckNodeCompatibility).toHaveBeenCalled()
+
+      // The warning icon should be shown for incompatible versions
+      const warningIcons = wrapper.findAll('.pi-exclamation-triangle')
+      expect(warningIcons.length).toBeGreaterThan(0)
+    })
+
+    it('shows verified icon for compatible versions', async () => {
+      // Set up the mock for versions
+      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
+
+      // Mock compatibility check to return no conflicts
+      mockCheckNodeCompatibility.mockReturnValue({
+        hasConflict: false,
+        conflicts: []
+      })
+
+      const wrapper = mountComponent()
+      await waitForPromises()
+
+      // Check that compatibility checking function was called
+      expect(mockCheckNodeCompatibility).toHaveBeenCalled()
+
+      // The verified icon should be shown for compatible versions
+      // Look for the VerifiedIcon component or SVG elements
+      const verifiedIcons = wrapper.findAll('svg')
+      expect(verifiedIcons.length).toBeGreaterThan(0)
+    })
+
+    it('calls checkVersionCompatibility with correct version data', async () => {
+      // Set up the mock for versions with specific supported data
+      const versionsWithCompatibility = [
+        {
+          version: '1.0.0',
+          supported_os: ['windows', 'linux'],
+          supported_accelerators: ['CUDA', 'CPU'],
+          supported_comfyui_version: '>=0.1.0',
+          supported_comfyui_frontend_version: '>=1.0.0'
+        }
+      ]
+      mockGetPackVersions.mockResolvedValueOnce(versionsWithCompatibility)
+
+      const nodePackWithCompatibility = {
+        ...mockNodePack,
+        supported_os: ['windows'],
+        supported_accelerators: ['CPU'],
+        supported_comfyui_version: '>=0.1.0',
+        supported_comfyui_frontend_version: '>=1.0.0',
+        latest_version: {
+          version: '1.0.0',
+          supported_os: ['windows', 'linux'],
+          supported_accelerators: ['CPU'], // latest_version data takes precedence
+          supported_comfyui_version: '>=0.1.0',
+          supported_comfyui_frontend_version: '>=1.0.0',
+          supported_python_version: '>=3.8',
+          is_banned: false,
+          has_registry_data: true
+        }
+      }
+
+      const wrapper = mountComponent({
+        props: { nodePack: nodePackWithCompatibility }
+      })
+      await waitForPromises()
+
+      // Clear previous calls from component mounting/rendering
+      mockCheckNodeCompatibility.mockClear()
+
+      // Trigger compatibility check by accessing getVersionCompatibility
+      const vm = wrapper.vm as any
+      vm.getVersionCompatibility('1.0.0')
+
+      // Verify that checkNodeCompatibility was called with correct data
+      // Since 1.0.0 is the latest version, it should use latest_version data
+      expect(mockCheckNodeCompatibility).toHaveBeenCalledWith({
+        supported_os: ['windows', 'linux'],
+        supported_accelerators: ['CPU'], // latest_version data takes precedence
+        supported_comfyui_version: '>=0.1.0',
+        supported_comfyui_frontend_version: '>=1.0.0',
+        supported_python_version: '>=3.8',
+        is_banned: false,
+        has_registry_data: true,
+        version: '1.0.0'
+      })
+    })
+
+    it('shows version conflict warnings for ComfyUI and frontend versions', async () => {
+      // Set up the mock for versions
+      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
+
+      // Mock compatibility check to return version conflicts
+      mockCheckNodeCompatibility.mockImplementation((versionData) => {
+        const conflicts = []
+        if (versionData.supported_comfyui_version) {
+          conflicts.push({
+            type: 'comfyui_version',
+            current_value: '0.5.0',
+            required_value: versionData.supported_comfyui_version
+          })
+        }
+        if (versionData.supported_comfyui_frontend_version) {
+          conflicts.push({
+            type: 'frontend_version',
+            current_value: '1.0.0',
+            required_value: versionData.supported_comfyui_frontend_version
+          })
+        }
+        return {
+          hasConflict: conflicts.length > 0,
+          conflicts
+        }
+      })
+
+      const nodePackWithVersionRequirements = {
+        ...mockNodePack,
+        supported_comfyui_version: '>=1.0.0',
+        supported_comfyui_frontend_version: '>=2.0.0'
+      }
+
+      const wrapper = mountComponent({
+        props: { nodePack: nodePackWithVersionRequirements }
+      })
+      await waitForPromises()
+
+      // Check that compatibility checking function was called
+      expect(mockCheckNodeCompatibility).toHaveBeenCalled()
+
+      // The warning icon should be shown for version incompatible packages
+      const warningIcons = wrapper.findAll('.pi-exclamation-triangle')
+      expect(warningIcons.length).toBeGreaterThan(0)
+    })
+
+    it('handles latest and nightly versions using nodePack data', async () => {
+      // Set up the mock for versions
+      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
+
+      const nodePackWithCompatibility = {
+        ...mockNodePack,
+        supported_os: ['windows'],
+        supported_accelerators: ['CPU'],
+        supported_comfyui_version: '>=0.1.0',
+        supported_comfyui_frontend_version: '>=1.0.0',
+        latest_version: {
+          ...mockNodePack.latest_version,
+          supported_os: ['windows'], // Match nodePack data for test consistency
+          supported_accelerators: ['CPU'], // Match nodePack data for test consistency
+          supported_python_version: '>=3.8',
+          is_banned: false,
+          has_registry_data: true
+        }
+      }
+
+      const wrapper = mountComponent({
+        props: { nodePack: nodePackWithCompatibility }
+      })
+      await waitForPromises()
+
+      const vm = wrapper.vm as any
+
+      // Clear previous calls from component mounting/rendering
+      mockCheckNodeCompatibility.mockClear()
+
+      // Test latest version
+      vm.getVersionCompatibility('latest')
+      expect(mockCheckNodeCompatibility).toHaveBeenCalledWith({
+        supported_os: ['windows'],
+        supported_accelerators: ['CPU'],
+        supported_comfyui_version: '>=0.1.0',
+        supported_comfyui_frontend_version: '>=1.0.0',
+        supported_python_version: '>=3.8',
+        is_banned: false,
+        has_registry_data: true,
+        version: '1.0.0'
+      })
+
+      // Clear for next test call
+      mockCheckNodeCompatibility.mockClear()
+
+      // Test nightly version
+      vm.getVersionCompatibility('nightly')
+      expect(mockCheckNodeCompatibility).toHaveBeenCalledWith({
+        id: 'test-pack',
+        name: 'Test Pack',
+        supported_os: ['windows'],
+        supported_accelerators: ['CPU'],
+        supported_comfyui_version: '>=0.1.0',
+        supported_comfyui_frontend_version: '>=1.0.0',
+        repository: 'https://github.com/user/repo',
+        has_registry_data: true,
+        latest_version: {
+          supported_os: ['windows'],
+          supported_accelerators: ['CPU'],
+          supported_python_version: '>=3.8',
+          is_banned: false,
+          has_registry_data: true,
+          version: '1.0.0',
+          supported_comfyui_version: '>=0.1.0',
+          supported_comfyui_frontend_version: '>=1.0.0'
+        }
+      })
+    })
+
+    it('shows banned package warnings', async () => {
+      // Set up the mock for versions
+      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
+
+      // Mock compatibility check to return banned conflicts
+      mockCheckNodeCompatibility.mockImplementation((versionData) => {
+        if (versionData.is_banned === true) {
+          return {
+            hasConflict: true,
+            conflicts: [
+              {
+                type: 'banned',
+                current_value: 'installed',
+                required_value: 'not_banned'
+              }
+            ]
+          }
+        }
+        return { hasConflict: false, conflicts: [] }
+      })
+
+      const bannedNodePack = {
+        ...mockNodePack,
+        is_banned: true,
+        latest_version: {
+          ...mockNodePack.latest_version,
+          is_banned: true
+        }
+      }
+
+      const wrapper = mountComponent({
+        props: { nodePack: bannedNodePack }
+      })
+      await waitForPromises()
+
+      // Check that compatibility checking function was called
+      expect(mockCheckNodeCompatibility).toHaveBeenCalled()
+
+      // Open the dropdown to see the options
+      const select = wrapper.find('.p-select')
+      if (!select.exists()) {
+        // Try alternative selector
+        const selectButton = wrapper.find('[aria-haspopup="listbox"]')
+        if (selectButton.exists()) {
+          await selectButton.trigger('click')
+        }
+      } else {
+        await select.trigger('click')
+      }
+      await wrapper.vm.$nextTick()
+
+      // The warning icon should be shown for banned packages in the dropdown options
+      const warningIcons = wrapper.findAll('.pi-exclamation-triangle')
+      expect(warningIcons.length).toBeGreaterThan(0)
+    })
+
+    it('shows security pending warnings', async () => {
+      // Set up the mock for versions
+      mockGetPackVersions.mockResolvedValueOnce(defaultMockVersions)
+
+      // Mock compatibility check to return security pending conflicts
+      mockCheckNodeCompatibility.mockImplementation((versionData) => {
+        if (versionData.has_registry_data === false) {
+          return {
+            hasConflict: true,
+            conflicts: [
+              {
+                type: 'pending',
+                current_value: 'no_registry_data',
+                required_value: 'registry_data_available'
+              }
+            ]
+          }
+        }
+        return { hasConflict: false, conflicts: [] }
+      })
+
+      const securityPendingNodePack = {
+        ...mockNodePack,
+        has_registry_data: false,
+        latest_version: {
+          ...mockNodePack.latest_version,
+          has_registry_data: false
+        }
+      }
+
+      const wrapper = mountComponent({
+        props: { nodePack: securityPendingNodePack }
+      })
+      await waitForPromises()
+
+      // Check that compatibility checking function was called
+      expect(mockCheckNodeCompatibility).toHaveBeenCalled()
+
+      // The warning icon should be shown for security pending packages
+      const warningIcons = wrapper.findAll('.pi-exclamation-triangle')
+      expect(warningIcons.length).toBeGreaterThan(0)
     })
   })
 })

src/components/dialog/content/manager/PackVersionSelectorPopover.vue

@@ -1,8 +1,10 @@
 <template>
-  <div class="w-64 mt-2">
-    <span class="pl-3 text-muted text-md font-semibold opacity-70">
-      {{ $t('manager.selectVersion') }}
-    </span>
+  <div class="w-64 pt-1">
+    <div class="py-2">
+      <span class="pl-3 text-md font-semibold text-neutral-500">
+        {{ $t('manager.selectVersion') }}
+      </span>
+    </div>
     <div
       v-if="isLoadingVersions || isQueueing"
       class="text-center text-muted py-4 flex flex-col items-center"
@@ -23,24 +25,44 @@
       v-model="selectedVersion"
       option-label="label"
       option-value="value"
-      :options="versionOptions"
+      :options="processedVersionOptions"
       :highlight-on-select="false"
-      class="my-3 w-full max-h-[50vh] border-none shadow-none"
+      class="w-full max-h-[50vh] border-none shadow-none rounded-md"
+      :pt="{
+        listContainer: { class: 'scrollbar-hide' }
+      }"
     >
       <template #option="slotProps">
         <div class="flex justify-between items-center w-full p-1">
-          <span>{{ slotProps.option.label }}</span>
+          <div class="flex items-center gap-2">
+            <template v-if="slotProps.option.value === 'nightly'">
+              <div class="w-4"></div>
+            </template>
+            <template v-else>
+              <i
+                v-if="slotProps.option.hasConflict"
+                v-tooltip="{
+                  value: slotProps.option.conflictMessage,
+                  showDelay: 300
+                }"
+                class="pi pi-exclamation-triangle text-yellow-500"
+              />
+              <VerifiedIcon v-else :size="20" class="relative right-0.5" />
+            </template>
+            <span>{{ slotProps.option.label }}</span>
+          </div>
           <i
-            v-if="selectedVersion === slotProps.option.value"
+            v-if="slotProps.option.isSelected"
             class="pi pi-check text-highlight"
           />
         </div>
       </template>
     </Listbox>
     <ContentDivider class="my-2" />
-    <div class="flex justify-end gap-2 p-1 px-3">
+    <div class="flex justify-end gap-2 py-1 px-3">
       <Button
         text
+        class="text-sm"
         severity="secondary"
         :label="$t('g.cancel')"
         :disabled="isQueueing"
@@ -49,7 +71,7 @@
       <Button
         severity="secondary"
         :label="$t('g.install')"
-        class="py-3 px-4 dark-theme:bg-unset bg-black/80 dark-theme:text-unset text-neutral-100 rounded-lg"
+        class="py-2.5 px-4 text-sm dark-theme:bg-unset bg-black/80 dark-theme:text-unset text-neutral-100 rounded-lg"
         :disabled="isQueueing"
         @click="handleSubmit"
       />
@@ -62,19 +84,18 @@ import { whenever } from '@vueuse/core'
 import Button from 'primevue/button'
 import Listbox from 'primevue/listbox'
 import ProgressSpinner from 'primevue/progressspinner'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ContentDivider from '@/components/common/ContentDivider.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import VerifiedIcon from '@/components/icons/VerifiedIcon.vue'
+import { useConflictDetection } from '@/composables/useConflictDetection'
 import { useComfyRegistryService } from '@/services/comfyRegistryService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import {
-  ManagerChannel,
-  ManagerDatabaseSource,
-  SelectedVersion
-} from '@/types/comfyManagerTypes'
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
+import { components as ManagerComponents } from '@/types/generatedManagerTypes'
+import { getJoinedConflictMessages } from '@/utils/conflictMessageUtil'
 import { isSemVer } from '@/utils/formatUtil'
 
 const { nodePack } = defineProps<{
@@ -89,27 +110,30 @@ const emit = defineEmits<{
 const { t } = useI18n()
 const registryService = useComfyRegistryService()
 const managerStore = useComfyManagerStore()
+const { checkNodeCompatibility } = useConflictDetection()
 
 const isQueueing = ref(false)
 
-const selectedVersion = ref<string>(SelectedVersion.LATEST)
+const selectedVersion = ref<string>('latest')
+
 onMounted(() => {
-  const initialVersion = getInitialSelectedVersion() ?? SelectedVersion.LATEST
+  const initialVersion = getInitialSelectedVersion() ?? 'latest'
   selectedVersion.value =
     // Use NIGHTLY when version is a Git hash
-    isSemVer(initialVersion) ? initialVersion : SelectedVersion.NIGHTLY
+    isSemVer(initialVersion) ? initialVersion : 'nightly'
 })
 
 const getInitialSelectedVersion = () => {
   if (!nodePack.id) return
 
-  // If unclaimed, set selected version to nightly
-  if (nodePack.publisher?.name === 'Unclaimed') return SelectedVersion.NIGHTLY
-
   // If node pack is installed, set selected version to the installed version
   if (managerStore.isPackInstalled(nodePack.id))
     return managerStore.getInstalledPackVersion(nodePack.id)
 
+  // If unclaimed, set selected version to nightly
+  if (nodePack.publisher?.name === 'Unclaimed')
+    return 'nightly' as ManagerComponents['schemas']['SelectedVersion']
+
   // If node pack is not installed, set selected version to latest
   return nodePack.latest_version?.version
 }
@@ -126,6 +150,9 @@ const versionOptions = ref<
   }[]
 >([])
 
+// Store fetched versions with their full data
+const fetchedVersions = ref<components['schemas']['NodeVersion'][]>([])
+
 const isLoadingVersions = ref(false)
 
 const onNodePackChange = async () => {
@@ -133,26 +160,35 @@ const onNodePackChange = async () => {
 
   // Fetch versions from the registry
   const versions = await fetchVersions()
+  fetchedVersions.value = versions
+
+  // Get latest version number to exclude from the list
+  const latestVersionNumber = nodePack.latest_version?.version
+
   const availableVersionOptions = versions
     .map((version) => ({
       value: version.version ?? '',
       label: version.version ?? ''
     }))
-    .filter((option) => option.value)
+    .filter((option) => option.value && option.value !== latestVersionNumber) // Exclude latest version from the list
+
+  // Add Latest option with actual version number
+  const latestLabel = latestVersionNumber
+    ? `${t('manager.latestVersion')} (${latestVersionNumber})`
+    : t('manager.latestVersion')
 
-  // Add Latest option
   const defaultVersions = [
     {
-      value: SelectedVersion.LATEST,
-      label: t('manager.latestVersion')
+      value: 'latest' as ManagerComponents['schemas']['SelectedVersion'],
+      label: latestLabel
     }
   ]
 
   // Add Nightly option if there is a non-empty `repository` field
   if (nodePack.repository?.length) {
     defaultVersions.push({
-      value: SelectedVersion.NIGHTLY,
-      label: t('manager.nightlyVersion')
+      value: 'nightly' as ManagerComponents['schemas']['SelectedVersion'],
+      label: t('manager.nightlyVersion') // Keep as just "nightly" - no version number
     })
   }
 
@@ -172,16 +208,95 @@ whenever(
 
 const handleSubmit = async () => {
   isQueueing.value = true
+  if (!nodePack.id) {
+    throw new Error('Node ID is required for installation')
+  }
+
+  // Convert 'latest' to actual version number for installation
+  const actualVersion =
+    selectedVersion.value === 'latest'
+      ? nodePack.latest_version?.version ?? 'latest'
+      : selectedVersion.value
+
   await managerStore.installPack.call({
     id: nodePack.id,
+    version: actualVersion,
     repository: nodePack.repository ?? '',
-    channel: ManagerChannel.DEFAULT,
-    mode: ManagerDatabaseSource.CACHE,
-    version: selectedVersion.value,
-    selected_version: selectedVersion.value
+    channel: 'default' as ManagerComponents['schemas']['ManagerChannel'],
+    mode: 'cache' as ManagerComponents['schemas']['ManagerDatabaseSource'],
+    selected_version: actualVersion
   })
 
   isQueueing.value = false
   emit('submit')
 }
+
+const getVersionData = (version: string) => {
+  const latestVersionNumber = nodePack.latest_version?.version
+  const useLatestVersionData =
+    version === 'latest' || version === latestVersionNumber
+
+  if (useLatestVersionData) {
+    const latestVersionData = nodePack.latest_version
+    return {
+      ...latestVersionData
+    }
+  }
+
+  const versionData = fetchedVersions.value.find((v) => v.version === version)
+  if (versionData) {
+    return {
+      ...versionData
+    }
+  }
+
+  // Fallback to nodePack data
+  return {
+    ...nodePack
+  }
+}
+
+// Main function to get version compatibility info
+const getVersionCompatibility = (version: string) => {
+  const versionData = getVersionData(version)
+  const compatibility = checkNodeCompatibility(versionData)
+
+  const conflictMessage = compatibility.hasConflict
+    ? getJoinedConflictMessages(compatibility.conflicts, t)
+    : ''
+
+  return {
+    hasConflict: compatibility.hasConflict,
+    conflictMessage
+  }
+}
+
+// Helper to determine if an option is selected.
+const isOptionSelected = (optionValue: string) => {
+  if (selectedVersion.value === optionValue) {
+    return true
+  }
+  if (
+    optionValue === 'latest' &&
+    selectedVersion.value === nodePack.latest_version?.version
+  ) {
+    return true
+  }
+  return false
+}
+
+// Checks if an option is selected, treating 'latest' as an alias for the actual latest version number.
+const processedVersionOptions = computed(() => {
+  return versionOptions.value.map((option) => {
+    const compatibility = getVersionCompatibility(option.value)
+    const isSelected = isOptionSelected(option.value)
+
+    return {
+      ...option,
+      hasConflict: compatibility.hasConflict,
+      conflictMessage: compatibility.conflictMessage,
+      isSelected: isSelected
+    }
+  })
+})
 </script>

src/components/dialog/content/manager/button/PackActionButton.vue

@@ -1,18 +1,24 @@
 <template>
   <Button
     outlined
-    class="!m-0 p-0 rounded-lg text-gray-900 dark-theme:text-gray-50"
+    class="!m-0 p-0 max-w-[120px] rounded-lg text-gray-900 dark-theme:text-gray-50"
     :class="[
       variant === 'black'
         ? 'bg-neutral-900 text-white border-neutral-900'
-        : 'border-neutral-700',
+        : variant === 'red'
+          ? 'border-red-500'
+          : 'border-neutral-700',
       fullWidth ? 'w-full' : 'w-min-content'
     ]"
     :disabled="loading"
     v-bind="$attrs"
     @click="onClick"
   >
-    <span class="py-2 px-3 whitespace-nowrap">
+    <span class="py-1.5 px-3 whitespace-nowrap text-xs flex items-center gap-2">
+      <i
+        v-if="hasWarning && !loading"
+        class="pi pi-exclamation-triangle text-yellow-500"
+      ></i>
       <template v-if="loading">
         {{ loadingMessage ?? $t('g.loading') }}
       </template>
@@ -28,15 +34,18 @@ import Button from 'primevue/button'
 
 const {
   label,
+  loading = false,
   loadingMessage,
   fullWidth = false,
-  variant = 'default'
+  variant = 'default',
+  hasWarning = false
 } = defineProps<{
   label: string
   loading?: boolean
   loadingMessage?: string
   fullWidth?: boolean
-  variant?: 'default' | 'black'
+  variant?: 'default' | 'black' | 'red'
+  hasWarning?: boolean
 }>()
 
 const emit = defineEmits<{

src/components/dialog/content/manager/button/PackEnableToggle.test.ts

@@ -11,9 +11,22 @@ import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 
 import PackEnableToggle from './PackEnableToggle.vue'
 
-// Mock debounce to execute immediately
-vi.mock('lodash', () => ({
-  debounce: <T extends (...args: any[]) => any>(fn: T) => fn
+// Mock lodash functions used throughout the app
+vi.mock('lodash', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('lodash')>()
+  return {
+    ...actual,
+    debounce: <T extends (...args: any[]) => any>(fn: T) => fn,
+    memoize: <T extends (...args: any[]) => any>(fn: T) => fn
+  }
+})
+
+// Mock config to prevent __COMFYUI_FRONTEND_VERSION__ error
+vi.mock('@/config', () => ({
+  default: {
+    app_title: 'ComfyUI',
+    app_version: '1.0.0'
+  }
 }))
 
 const mockNodePack = {

src/components/dialog/content/manager/button/PackEnableToggle.vue

@@ -1,6 +1,26 @@
 <template>
-  <div class="flex items-center">
+  <div class="flex items-center gap-2">
+    <div
+      v-if="hasConflict"
+      v-tooltip="{
+        value: $t('manager.conflicts.warningTooltip'),
+        showDelay: 300
+      }"
+      class="flex items-center justify-center w-6 h-6 cursor-pointer"
+      @click="showConflictModal(true)"
+    >
+      <i class="pi pi-exclamation-triangle text-yellow-500 text-xl"></i>
+    </div>
     <ToggleSwitch
+      v-if="!canToggleDirectly"
+      :model-value="isEnabled"
+      :disabled="isLoading"
+      :readonly="!canToggleDirectly"
+      aria-label="Enable or disable pack"
+      @focus="handleToggleInteraction"
+    />
+    <ToggleSwitch
+      v-else
       :model-value="isEnabled"
       :disabled="isLoading"
       aria-label="Enable or disable pack"
@@ -13,52 +33,96 @@
 import { debounce } from 'lodash'
 import ToggleSwitch from 'primevue/toggleswitch'
 import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
+import { useDialogService } from '@/services/dialogService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import {
-  InstallPackParams,
-  ManagerChannel,
-  SelectedVersion
-} from '@/types/comfyManagerTypes'
+import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
 import type { components } from '@/types/comfyRegistryTypes'
+import { components as ManagerComponents } from '@/types/generatedManagerTypes'
 
 const TOGGLE_DEBOUNCE_MS = 256
 
-const { nodePack } = defineProps<{
+const { nodePack, hasConflict } = defineProps<{
   nodePack: components['schemas']['Node']
+  hasConflict?: boolean
 }>()
 
-const { isPackEnabled, enablePack, disablePack, installedPacks } =
-  useComfyManagerStore()
+const { t } = useI18n()
+const { isPackEnabled, enablePack, disablePack } = useComfyManagerStore()
+const { getConflictsForPackageByID } = useConflictDetectionStore()
+const { showNodeConflictDialog } = useDialogService()
+const { acknowledgmentState, markConflictsAsSeen } = useConflictAcknowledgment()
 
 const isLoading = ref(false)
 
 const isEnabled = computed(() => isPackEnabled(nodePack.id))
-const version = computed(() => {
-  const id = nodePack.id
-  if (!id) return SelectedVersion.NIGHTLY
-  return (
-    installedPacks[id]?.ver ??
-    nodePack.latest_version?.version ??
-    SelectedVersion.NIGHTLY
+const packageConflict = computed(() =>
+  getConflictsForPackageByID(nodePack.id || '')
+)
+
+const canToggleDirectly = computed(() => {
+  return !(
+    hasConflict &&
+    !acknowledgmentState.value.modal_dismissed &&
+    packageConflict.value
   )
 })
 
-const handleEnable = () =>
-  enablePack.call({
-    id: nodePack.id,
-    version: version.value,
-    selected_version: version.value,
-    repository: nodePack.repository ?? '',
-    channel: ManagerChannel.DEFAULT,
-    mode: 'default' as InstallPackParams['mode']
-  })
+const showConflictModal = (skipModalDismissed: boolean) => {
+  let modal_dismissed = acknowledgmentState.value.modal_dismissed
+  if (skipModalDismissed) modal_dismissed = false
+  if (packageConflict.value && !modal_dismissed) {
+    showNodeConflictDialog({
+      conflictedPackages: [packageConflict.value],
+      buttonText: !isEnabled.value
+        ? t('manager.conflicts.enableAnyway')
+        : t('manager.conflicts.understood'),
+      onButtonClick: async () => {
+        if (!isEnabled.value) {
+          await handleEnable()
+        }
+      },
+      dialogComponentProps: {
+        onClose: () => {
+          markConflictsAsSeen()
+        }
+      }
+    })
+  }
+}
 
-const handleDisable = () =>
-  disablePack({
+const handleEnable = () => {
+  if (!nodePack.id) {
+    throw new Error('Node ID is required for enabling')
+  }
+  return enablePack.call({
     id: nodePack.id,
-    version: version.value
+    version:
+      nodePack.latest_version?.version ??
+      ('latest' as ManagerComponents['schemas']['SelectedVersion']),
+    selected_version:
+      nodePack.latest_version?.version ??
+      ('latest' as ManagerComponents['schemas']['SelectedVersion']),
+    repository: nodePack.repository ?? '',
+    channel: 'default' as ManagerComponents['schemas']['ManagerChannel'],
+    mode: 'cache' as ManagerComponents['schemas']['ManagerDatabaseSource'],
+    skip_post_install: false
   })
+}
+
+const handleDisable = () => {
+  if (!nodePack.id) {
+    throw new Error('Node ID is required for disabling')
+  }
+  return disablePack({
+    id: nodePack.id,
+    version:
+      nodePack.latest_version?.version ??
+      ('latest' as ManagerComponents['schemas']['SelectedVersion'])
+  })
+}
 
 const handleToggle = async (enable: boolean) => {
   if (isLoading.value) return
@@ -67,10 +131,23 @@ const handleToggle = async (enable: boolean) => {
   if (enable) {
     await handleEnable()
   } else {
-    handleDisable()
+    await handleDisable()
   }
   isLoading.value = false
 }
 
-const onToggle = debounce(handleToggle, TOGGLE_DEBOUNCE_MS, { trailing: true })
+const onToggle = debounce(
+  (enable: boolean) => {
+    void handleToggle(enable)
+  },
+  TOGGLE_DEBOUNCE_MS,
+  { trailing: true }
+)
+
+const handleToggleInteraction = async (event: Event) => {
+  if (!canToggleDirectly.value) {
+    event.preventDefault()
+    showConflictModal(false)
+  }
+}
 </script>

src/components/dialog/content/manager/button/PackInstallButton.vue

@@ -9,8 +9,8 @@
     :variant="variant"
     :loading="isInstalling"
     :loading-message="$t('g.installing')"
+    :has-warning="hasConflict"
     @action="installAllPacks"
-    @click="onClick"
   />
 </template>
 
@@ -18,44 +18,51 @@
 import { inject, ref } from 'vue'
 
 import PackActionButton from '@/components/dialog/content/manager/button/PackActionButton.vue'
+import { t } from '@/i18n'
+import { useDialogService } from '@/services/dialogService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import {
-  IsInstallingKey,
-  ManagerChannel,
-  ManagerDatabaseSource,
-  SelectedVersion
-} from '@/types/comfyManagerTypes'
+import { IsInstallingKey } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
+import {
+  type ConflictDetail,
+  type ConflictDetectionResult
+} from '@/types/conflictDetectionTypes'
+import { components as ManagerComponents } from '@/types/generatedManagerTypes'
 
 type NodePack = components['schemas']['Node']
 
-const { nodePacks, variant, label } = defineProps<{
+const { nodePacks, variant, label, hasConflict, conflictInfo } = defineProps<{
   nodePacks: NodePack[]
   variant?: 'default' | 'black'
   label?: string
+  hasConflict?: boolean
+  conflictInfo?: ConflictDetail[]
 }>()
 
 const isInstalling = inject(IsInstallingKey, ref(false))
-
-const onClick = (): void => {
-  isInstalling.value = true
-}
-
 const managerStore = useComfyManagerStore()
+const { showNodeConflictDialog } = useDialogService()
+
+const createPayload = (
+  installItem: NodePack
+): ManagerComponents['schemas']['InstallPackParams'] => {
+  if (!installItem.id) {
+    throw new Error('Node ID is required for installation')
+  }
 
-const createPayload = (installItem: NodePack) => {
   const isUnclaimedPack = installItem.publisher?.name === 'Unclaimed'
   const versionToInstall = isUnclaimedPack
-    ? SelectedVersion.NIGHTLY
-    : installItem.latest_version?.version ?? SelectedVersion.LATEST
+    ? ('nightly' as ManagerComponents['schemas']['SelectedVersion'])
+    : installItem.latest_version?.version ??
+      ('latest' as ManagerComponents['schemas']['SelectedVersion'])
 
   return {
     id: installItem.id,
+    version: versionToInstall,
     repository: installItem.repository ?? '',
-    channel: ManagerChannel.DEV,
-    mode: ManagerDatabaseSource.CACHE,
-    selected_version: versionToInstall,
-    version: versionToInstall
+    channel: 'dev' as ManagerComponents['schemas']['ManagerChannel'],
+    mode: 'cache' as ManagerComponents['schemas']['ManagerDatabaseSource'],
+    selected_version: versionToInstall
   }
 }
 
@@ -65,14 +72,35 @@ const installPack = (item: NodePack) =>
 const installAllPacks = async () => {
   if (!nodePacks?.length) return
 
+  if (hasConflict && conflictInfo) {
+    const conflictedPackages: ConflictDetectionResult[] = nodePacks.map(
+      (pack) => ({
+        package_id: pack.id || '',
+        package_name: pack.name || '',
+        has_conflict: true,
+        conflicts: conflictInfo || [],
+        is_compatible: false
+      })
+    )
+
+    showNodeConflictDialog({
+      conflictedPackages,
+      buttonText: t('manager.conflicts.installAnyway'),
+      onButtonClick: async () => {
+        // Proceed with installation
+        isInstalling.value = true
+        await performInstallation(nodePacks)
+      }
+    })
+    return
+  }
+  // No conflicts or conflicts acknowledged - proceed with installation
   isInstalling.value = true
+  await performInstallation(nodePacks)
+}
 
-  const uninstalledPacks = nodePacks.filter(
-    (pack) => !managerStore.isPackInstalled(pack.id)
-  )
-  if (!uninstalledPacks.length) return
-
-  await Promise.all(uninstalledPacks.map(installPack))
+const performInstallation = async (packs: NodePack[]) => {
+  await Promise.all(packs.map(installPack))
   managerStore.installPack.clear()
 }
 </script>

src/components/dialog/content/manager/button/PackUninstallButton.vue

@@ -6,7 +6,7 @@
         ? $t('manager.uninstallSelected')
         : $t('manager.uninstall')
     "
-    severity="danger"
+    variant="red"
     :loading-message="$t('manager.uninstalling')"
     @action="uninstallItems"
   />
@@ -15,7 +15,6 @@
 <script setup lang="ts">
 import PackActionButton from '@/components/dialog/content/manager/button/PackActionButton.vue'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import type { ManagerPackInfo } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
 
 type NodePack = components['schemas']['Node']
@@ -26,16 +25,16 @@ const { nodePacks } = defineProps<{
 
 const managerStore = useComfyManagerStore()
 
-const createPayload = (uninstallItem: NodePack): ManagerPackInfo => {
-  return {
-    id: uninstallItem.id,
-    version: uninstallItem.latest_version?.version
+const uninstallPack = (item: NodePack) => {
+  if (!item.id) {
+    throw new Error('Node ID is required for uninstallation')
   }
+  return managerStore.uninstallPack({
+    id: item.id,
+    version: item.latest_version?.version ?? ''
+  })
 }
 
-const uninstallPack = (item: NodePack) =>
-  managerStore.uninstallPack(createPayload(item))
-
 const uninstallItems = async () => {
   if (!nodePacks?.length) return
   await Promise.all(nodePacks.map(uninstallPack))

src/components/dialog/content/manager/button/PackUpdateButton.vue

@@ -0,0 +1,78 @@
+<template>
+  <PackActionButton
+    v-bind="$attrs"
+    variant="black"
+    :label="$t('manager.updateAll')"
+    :loading="isUpdating"
+    :loading-message="$t('g.updating')"
+    @action="updateAllPacks"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import PackActionButton from '@/components/dialog/content/manager/button/PackActionButton.vue'
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import type { components } from '@/types/comfyRegistryTypes'
+
+type NodePack = components['schemas']['Node']
+
+const { nodePacks } = defineProps<{
+  nodePacks: NodePack[]
+}>()
+
+const isUpdating = ref<boolean>(false)
+
+const managerStore = useComfyManagerStore()
+
+const createPayload = (updateItem: NodePack) => {
+  return {
+    id: updateItem.id!,
+    version: updateItem.latest_version!.version!
+  }
+}
+
+const updatePack = async (item: NodePack) => {
+  if (!item.id || !item.latest_version?.version) {
+    console.warn('Pack missing required id or version:', item)
+    return
+  }
+  await managerStore.updatePack.call(createPayload(item))
+}
+
+const updateAllPacks = async () => {
+  if (!nodePacks?.length) {
+    console.warn('No packs provided for update')
+    return
+  }
+
+  isUpdating.value = true
+
+  const updatablePacks = nodePacks.filter((pack) =>
+    managerStore.isPackInstalled(pack.id)
+  )
+
+  if (!updatablePacks.length) {
+    console.info('No installed packs available for update')
+    isUpdating.value = false
+    return
+  }
+
+  console.info(`Starting update of ${updatablePacks.length} packs`)
+
+  try {
+    await Promise.all(updatablePacks.map(updatePack))
+    managerStore.updatePack.clear()
+    console.info('All packs updated successfully')
+  } catch (error) {
+    console.error('Pack update failed:', error)
+    console.error(
+      'Failed packs info:',
+      updatablePacks.map((p) => p.id)
+    )
+  } finally {
+    isUpdating.value = false
+  }
+}
+</script>

src/components/dialog/content/manager/infoPanel/InfoPanel.vue

@@ -2,20 +2,26 @@
   <template v-if="nodePack">
     <div class="flex flex-col h-full z-40 overflow-hidden relative">
       <div class="top-0 z-10 px-6 pt-6 w-full">
-        <InfoPanelHeader :node-packs="[nodePack]" />
+        <InfoPanelHeader
+          :node-packs="[nodePack]"
+          :has-conflict="hasCompatibilityIssues"
+        />
       </div>
       <div
         ref="scrollContainer"
-        class="p-6 pt-2 overflow-y-auto flex-1 text-sm hidden-scrollbar"
+        class="p-6 pt-2 overflow-y-auto flex-1 text-sm scrollbar-hide"
       >
         <div class="mb-6">
           <MetadataRow
-            v-if="isPackInstalled(nodePack.id)"
+            v-if="!importFailed && isPackInstalled(nodePack.id)"
             :label="t('manager.filter.enabled')"
             class="flex"
             style="align-items: center"
           >
-            <PackEnableToggle :node-pack="nodePack" />
+            <PackEnableToggle
+              :node-pack="nodePack"
+              :has-conflict="hasCompatibilityIssues"
+            />
           </MetadataRow>
           <MetadataRow
             v-for="item in infoItems"
@@ -29,6 +35,7 @@
               :status-type="
                 nodePack.status as components['schemas']['NodeVersionStatus']
               "
+              :has-compatibility-issues="hasCompatibilityIssues"
             />
           </MetadataRow>
           <MetadataRow :label="t('manager.version')">
@@ -36,7 +43,11 @@
           </MetadataRow>
         </div>
         <div class="mb-6 overflow-hidden">
-          <InfoTabs :node-pack="nodePack" />
+          <InfoTabs
+            :node-pack="nodePack"
+            :has-compatibility-issues="hasCompatibilityIssues"
+            :conflict-result="conflictResult"
+          />
         </div>
       </div>
     </div>
@@ -59,9 +70,14 @@ import PackEnableToggle from '@/components/dialog/content/manager/button/PackEna
 import InfoPanelHeader from '@/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue'
 import InfoTabs from '@/components/dialog/content/manager/infoPanel/InfoTabs.vue'
 import MetadataRow from '@/components/dialog/content/manager/infoPanel/MetadataRow.vue'
+import { useConflictDetection } from '@/composables/useConflictDetection'
+import { useImportFailedDetection } from '@/composables/useImportFailedDetection'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
 import { IsInstallingKey } from '@/types/comfyManagerTypes'
 import { components } from '@/types/comfyRegistryTypes'
+import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
+import { ImportFailedKey } from '@/types/importFailedTypes'
 
 interface InfoItem {
   key: string
@@ -75,18 +91,55 @@ const { nodePack } = defineProps<{
 
 const scrollContainer = ref<HTMLElement | null>(null)
 
-const managerStore = useComfyManagerStore()
-const isInstalled = computed(() => managerStore.isPackInstalled(nodePack.id))
+const { isPackInstalled } = useComfyManagerStore()
+const isInstalled = computed(() => isPackInstalled(nodePack.id))
 const isInstalling = ref(false)
 provide(IsInstallingKey, isInstalling)
 whenever(isInstalled, () => {
   isInstalling.value = false
 })
 
-const { isPackInstalled } = useComfyManagerStore()
+const { checkNodeCompatibility } = useConflictDetection()
+const { getConflictsForPackageByID } = useConflictDetectionStore()
 
 const { t, d, n } = useI18n()
 
+// Check compatibility once and pass to children
+const conflictResult = computed((): ConflictDetectionResult | null => {
+  // For installed packages, use stored conflict data
+  if (isInstalled.value && nodePack.id) {
+    return getConflictsForPackageByID(nodePack.id) || null
+  }
+
+  // For non-installed packages, perform compatibility check
+  const compatibility = checkNodeCompatibility(nodePack)
+
+  if (compatibility.hasConflict) {
+    return {
+      package_id: nodePack.id || '',
+      package_name: nodePack.name || '',
+      has_conflict: true,
+      conflicts: compatibility.conflicts,
+      is_compatible: false
+    }
+  }
+
+  return null
+})
+
+const hasCompatibilityIssues = computed(() => {
+  return conflictResult.value?.has_conflict
+})
+
+const packageId = computed(() => nodePack.id || '')
+const { importFailed, showImportFailedDialog } =
+  useImportFailedDetection(packageId)
+
+provide(ImportFailedKey, {
+  importFailed,
+  showImportFailedDialog
+})
+
 const infoItems = computed<InfoItem[]>(() => [
   {
     key: 'publisher',
@@ -128,17 +181,3 @@ whenever(
   { immediate: true }
 )
 </script>
-<style scoped>
-.hidden-scrollbar {
-  /* Firefox */
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    width: 1px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-  }
-}
-</style>

src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue

@@ -1,28 +1,36 @@
 <template>
-  <div v-if="nodePacks?.length" class="flex flex-col items-center mb-6">
+  <div v-if="nodePacks?.length" class="flex flex-col items-center">
     <slot name="thumbnail">
-      <PackIcon :node-pack="nodePacks[0]" width="24" height="24" />
+      <PackIcon :node-pack="nodePacks[0]" width="204" height="106" />
     </slot>
     <h2
       class="text-2xl font-bold text-center mt-4 mb-2"
       style="word-break: break-all"
     >
       <slot name="title">
-        {{ nodePacks[0].name }}
+        <span class="inline-block text-base">{{ nodePacks[0].name }}</span>
       </slot>
     </h2>
-    <div class="mt-2 mb-4 w-full max-w-xs flex justify-center">
+    <div
+      v-if="!importFailed"
+      class="mt-2 mb-4 w-full max-w-xs flex justify-center"
+    >
       <slot name="install-button">
         <PackUninstallButton
           v-if="isAllInstalled"
           v-bind="$attrs"
           :node-packs="nodePacks"
         />
-        <PackInstallButton v-else v-bind="$attrs" :node-packs="nodePacks" />
+        <PackInstallButton
+          v-else
+          v-bind="$attrs"
+          :node-packs="nodePacks"
+          :has-conflict="hasConflict"
+        />
       </slot>
     </div>
   </div>
-  <div v-else class="flex flex-col items-center mb-6">
+  <div v-else class="flex flex-col items-center">
     <NoResultsPlaceholder
       :message="$t('manager.status.unknown')"
       :title="$t('manager.tryAgainLater')"
@@ -31,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { inject, ref, watch } from 'vue'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
@@ -39,13 +47,19 @@ import PackUninstallButton from '@/components/dialog/content/manager/button/Pack
 import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { components } from '@/types/comfyRegistryTypes'
+import { ImportFailedKey } from '@/types/importFailedTypes'
 
-const { nodePacks } = defineProps<{
+const { nodePacks, hasConflict } = defineProps<{
   nodePacks: components['schemas']['Node'][]
+  hasConflict?: boolean
 }>()
 
 const managerStore = useComfyManagerStore()
 
+// Inject import failed context from parent
+const importFailedContext = inject(ImportFailedKey)
+const importFailed = importFailedContext?.importFailed
+
 const isAllInstalled = ref(false)
 watch(
   [() => nodePacks, () => managerStore.installedPacks],

src/components/dialog/content/manager/infoPanel/InfoPanelMultiItem.vue

@@ -6,8 +6,12 @@
           <PackIconStacked :node-packs="nodePacks" />
         </template>
         <template #title>
-          {{ nodePacks.length }}
-          {{ $t('manager.packsSelected') }}
+          <div class="mt-5">
+            <span class="inline-block mr-2 text-blue-500 text-base">{{
+              nodePacks.length
+            }}</span>
+            <span class="text-base">{{ $t('manager.packsSelected') }}</span>
+          </div>
         </template>
         <template #install-button>
           <PackInstallButton :full-width="true" :node-packs="nodePacks" />

src/components/dialog/content/manager/infoPanel/InfoTabs.vue

@@ -1,15 +1,31 @@
 <template>
   <div class="overflow-hidden">
     <Tabs :value="activeTab">
-      <TabList>
-        <Tab value="description">
+      <TabList class="overflow-x-auto scrollbar-hide">
+        <Tab v-if="hasCompatibilityIssues" value="warning" class="p-2 mr-6">
+          <div class="flex items-center gap-1">
+            <span>⚠️</span>
+            {{ importFailed ? $t('g.error') : $t('g.warning') }}
+          </div>
+        </Tab>
+        <Tab value="description" class="p-2 mr-6">
           {{ $t('g.description') }}
         </Tab>
-        <Tab value="nodes">
+        <Tab value="nodes" class="p-2">
           {{ $t('g.nodes') }}
         </Tab>
       </TabList>
-      <TabPanels class="overflow-auto">
+      <TabPanels class="overflow-auto py-4 px-2">
+        <TabPanel
+          v-if="hasCompatibilityIssues"
+          value="warning"
+          class="bg-transparent"
+        >
+          <WarningTabPanel
+            :node-pack="nodePack"
+            :conflict-result="conflictResult"
+          />
+        </TabPanel>
         <TabPanel value="description">
           <DescriptionTabPanel :node-pack="nodePack" />
         </TabPanel>
@@ -27,16 +43,25 @@ import TabList from 'primevue/tablist'
 import TabPanel from 'primevue/tabpanel'
 import TabPanels from 'primevue/tabpanels'
 import Tabs from 'primevue/tabs'
-import { computed, ref } from 'vue'
+import { computed, inject, ref, watchEffect } from 'vue'
 
 import DescriptionTabPanel from '@/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.vue'
 import NodesTabPanel from '@/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue'
+import WarningTabPanel from '@/components/dialog/content/manager/infoPanel/tabs/WarningTabPanel.vue'
 import { components } from '@/types/comfyRegistryTypes'
+import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
+import { ImportFailedKey } from '@/types/importFailedTypes'
 
-const { nodePack } = defineProps<{
+const { nodePack, hasCompatibilityIssues, conflictResult } = defineProps<{
   nodePack: components['schemas']['Node']
+  hasCompatibilityIssues?: boolean
+  conflictResult?: ConflictDetectionResult | null
 }>()
 
+// Inject import failed context from parent
+const importFailedContext = inject(ImportFailedKey)
+const importFailed = importFailedContext?.importFailed
+
 const nodeNames = computed(() => {
   // @ts-expect-error comfy_nodes is an Algolia-specific field
   const { comfy_nodes } = nodePack
@@ -44,4 +69,17 @@ const nodeNames = computed(() => {
 })
 
 const activeTab = ref('description')
+
+// Watch for compatibility issues and automatically switch to warning tab
+watchEffect(
+  () => {
+    if (hasCompatibilityIssues) {
+      activeTab.value = 'warning'
+    } else if (activeTab.value === 'warning') {
+      // If currently on warning tab but no issues, switch to description
+      activeTab.value = 'description'
+    }
+  },
+  { flush: 'post' }
+)
 </script>

src/components/dialog/content/manager/infoPanel/InfoTextSection.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-4 text-sm">
     <div v-for="(section, index) in sections" :key="index" class="mb-4">
-      <div class="mb-1">
+      <div class="mb-3">
         {{ section.title }}
       </div>
       <div class="text-muted break-words">

src/components/dialog/content/manager/infoPanel/MetadataRow.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex py-1.5 text-xs">
-    <div class="w-1/3 truncate pr-2 text-muted">{{ label }}:</div>
+    <div class="w-1/3 truncate pr-2 text-muted">{{ label }}</div>
     <div class="w-2/3">
       <slot>{{ value }}</slot>
     </div>

src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-4 overflow-hidden">
+  <div class="overflow-hidden">
     <InfoTextSection
       v-if="nodePack?.description"
       :sections="descriptionSections"

src/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-4 mt-4 text-sm">
+  <div class="flex flex-col gap-4 text-sm">
     <template v-if="mappedNodeDefs?.length">
       <div
         v-for="nodeDef in mappedNodeDefs"

src/components/dialog/content/manager/infoPanel/tabs/WarningTabPanel.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="flex flex-col gap-3">
+    <button
+      v-if="importFailedInfo"
+      class="cursor-pointer outline-none border-none inline-flex items-center justify-end bg-transparent gap-1"
+      @click="showImportFailedDialog"
+    >
+      <i class="pi pi-code text-base"></i>
+      <span class="dark-theme:text-white text-sm">{{
+        t('serverStart.openLogs')
+      }}</span>
+    </button>
+    <div
+      v-for="(conflict, index) in conflictResult?.conflicts || []"
+      :key="index"
+      class="p-3 bg-yellow-800/20 rounded-md"
+    >
+      <div class="flex justify-between items-center">
+        <div class="text-sm break-words flex-1">
+          {{ getConflictMessage(conflict, $t) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useImportFailedDetection } from '@/composables/useImportFailedDetection'
+import { t } from '@/i18n'
+import { components } from '@/types/comfyRegistryTypes'
+import { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
+import { getConflictMessage } from '@/utils/conflictMessageUtil'
+
+const { nodePack, conflictResult } = defineProps<{
+  nodePack: components['schemas']['Node']
+  conflictResult: ConflictDetectionResult | null | undefined
+}>()
+
+const packageId = computed(() => nodePack?.id || '')
+const { importFailedInfo, showImportFailedDialog } =
+  useImportFailedDetection(packageId)
+</script>

src/components/dialog/content/manager/packCard/PackCard.vue

@@ -43,7 +43,7 @@
             </span>
             <p
               v-if="nodePack.description"
-              class="flex-1 text-muted text-xs font-medium break-words overflow-hidden min-h-12 line-clamp-3 my-0 leading-4 mb-1 overflow-hidden"
+              class="flex-1 text-muted text-xs font-medium break-words overflow-hidden max-h-12 line-clamp-3 my-0 leading-4 mb-2 overflow-hidden"
             >
               {{ nodePack.description }}
             </p>
@@ -119,12 +119,20 @@ provide(IsInstallingKey, isInstalling)
 
 const { isPackInstalled, isPackEnabled } = useComfyManagerStore()
 
-const isInstalled = computed(() => isPackInstalled(nodePack?.id))
-const isDisabled = computed(
-  () => isInstalled.value && !isPackEnabled(nodePack?.id)
-)
+const isDisabled = ref(false)
+const managerStore = useComfyManagerStore()
 
-whenever(isInstalled, () => (isInstalling.value = false))
+// Watch the installedPacks object directly (which gets updated from WebSocket)
+whenever(
+  () => managerStore.installedPacksIds,
+  () => {
+    const isInstalled = isPackInstalled(nodePack?.id)
+    isDisabled.value = isInstalled && !isPackEnabled(nodePack?.id)
+
+    // Update isInstalling state after installation is complete
+    if (isInstalling.value && isInstalled) isInstalling.value = false
+  }
+)
 
 const nodesCount = computed(() =>
   isMergedNodePack(nodePack) ? nodePack.comfy_nodes?.length : undefined

src/components/dialog/content/manager/packCard/PackCardFooter.vue

@@ -1,13 +1,39 @@
 <template>
   <div
-    class="min-h-12 flex justify-between items-center px-4 py-2 text-xs text-muted font-medium leading-3"
+    class="h-12 flex justify-between items-center px-4 text-xs text-muted font-medium leading-3"
   >
     <div v-if="nodePack.downloads" class="flex items-center gap-1.5">
       <i class="pi pi-download text-muted"></i>
       <span>{{ formattedDownloads }}</span>
     </div>
-    <PackInstallButton v-if="!isInstalled" :node-packs="[nodePack]" />
-    <PackEnableToggle v-else :node-pack="nodePack" />
+    <div class="flex justify-end items-center gap-2">
+      <template v-if="importFailed">
+        <div
+          class="flex justify-center items-center gap-2 cursor-pointer"
+          @click="showImportFailedDialog"
+        >
+          <i class="pi pi-exclamation-triangle text-red-500 text-sm"></i>
+          <span class="text-red-500 text-xs pt-0.5">{{
+            t('manager.failedToInstall')
+          }}</span>
+        </div>
+      </template>
+      <template v-else>
+        <template v-if="!isInstalled">
+          <PackInstallButton
+            :node-packs="[nodePack]"
+            :has-conflict="uninstalledPackConflict.hasConflict"
+            :conflict-info="uninstalledPackConflict.conflicts"
+          />
+        </template>
+        <template v-else>
+          <PackEnableToggle
+            :node-pack="nodePack"
+            :has-conflict="installedPackHasConflict"
+          />
+        </template>
+      </template>
+    </div>
   </div>
 </template>
 
@@ -17,7 +43,10 @@ import { useI18n } from 'vue-i18n'
 
 import PackEnableToggle from '@/components/dialog/content/manager/button/PackEnableToggle.vue'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
+import { useConflictDetection } from '@/composables/useConflictDetection'
+import { useImportFailedDetection } from '@/composables/useImportFailedDetection'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
 import type { components } from '@/types/comfyRegistryTypes'
 
 const { nodePack } = defineProps<{
@@ -27,9 +56,29 @@ const { nodePack } = defineProps<{
 const { isPackInstalled } = useComfyManagerStore()
 const isInstalled = computed(() => isPackInstalled(nodePack?.id))
 
-const { n } = useI18n()
+const { n, t } = useI18n()
 
 const formattedDownloads = computed(() =>
   nodePack.downloads ? n(nodePack.downloads) : ''
 )
+
+const { getConflictsForPackageByID } = useConflictDetectionStore()
+const { checkNodeCompatibility } = useConflictDetection()
+
+const { importFailed, showImportFailedDialog } = useImportFailedDetection(
+  nodePack.id
+)
+
+const conflicts = computed(
+  () => getConflictsForPackageByID(nodePack.id!) || null
+)
+
+const installedPackHasConflict = computed(() => {
+  if (!nodePack.id) return false
+  return !!conflicts.value
+})
+
+const uninstalledPackConflict = computed(() => {
+  return checkNodeCompatibility(nodePack)
+})
 </script>

src/components/dialog/content/manager/packCard/PackCardHeader.vue

@@ -20,7 +20,10 @@
         {{ $n(nodePack.downloads) }}
       </div>
       <template v-if="isInstalled">
-        <PackEnableToggle :node-pack="nodePack" />
+        <PackEnableToggle
+          :node-pack="nodePack"
+          :has-conflict="!!packageConflicts"
+        />
       </template>
       <template v-else>
         <PackInstallButton :node-packs="[nodePack]" />
@@ -35,6 +38,7 @@ import { computed } from 'vue'
 import PackEnableToggle from '@/components/dialog/content/manager/button/PackEnableToggle.vue'
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
 import type { components } from '@/types/comfyRegistryTypes'
 
 const { nodePack } = defineProps<{
@@ -42,5 +46,13 @@ const { nodePack } = defineProps<{
 }>()
 
 const { isPackInstalled } = useComfyManagerStore()
+const { getConflictsForPackageByID } = useConflictDetectionStore()
 const isInstalled = computed(() => isPackInstalled(nodePack?.id))
+
+const packageConflicts = computed(() => {
+  if (!nodePack.id || !isInstalled.value) return null
+
+  // For installed packages, check conflicts from store
+  return getConflictsForPackageByID(nodePack.id)
+})
 </script>

src/components/dialog/content/manager/packIcon/PackIcon.vue

@@ -1,11 +1,37 @@
 <template>
-  <img
-    :src="isImageError ? DEFAULT_ICON : imgSrc"
-    :alt="nodePack.name + ' icon'"
-    class="object-contain rounded-lg max-h-72 max-w-72"
-    :style="{ width: cssWidth, height: cssHeight }"
-    @error="isImageError = true"
-  />
+  <div class="w-full max-w-[204] aspect-[2/1] rounded-lg overflow-hidden">
+    <!-- default banner show -->
+    <div v-if="showDefaultBanner" class="w-full h-full">
+      <img
+        :src="DEFAULT_BANNER"
+        alt="default banner"
+        class="w-full h-full object-cover"
+      />
+    </div>
+    <!-- banner_url or icon show -->
+    <div v-else class="relative w-full h-full">
+      <!-- blur background -->
+      <div
+        v-if="imgSrc"
+        class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-30"
+        :style="{
+          backgroundImage: `url(${imgSrc})`,
+          filter: 'blur(10px)'
+        }"
+      ></div>
+      <!-- image -->
+      <img
+        :src="isImageError ? DEFAULT_BANNER : imgSrc"
+        :alt="nodePack.name + ' banner'"
+        :class="
+          isImageError
+            ? 'relative w-full h-full object-cover z-10'
+            : 'relative w-full h-full object-contain z-10'
+        "
+        @error="isImageError = true"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -13,29 +39,14 @@ import { computed, ref } from 'vue'
 
 import { components } from '@/types/comfyRegistryTypes'
 
-const DEFAULT_ICON = '/assets/images/fallback-gradient-avatar.svg'
+const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
 
-const {
-  nodePack,
-  width = '4.5rem',
-  height = '4.5rem'
-} = defineProps<{
+const { nodePack } = defineProps<{
   nodePack: components['schemas']['Node']
-  width?: string
-  height?: string
 }>()
 
 const isImageError = ref(false)
-const shouldShowFallback = computed(
-  () => !nodePack.icon || nodePack.icon.trim() === '' || isImageError.value
-)
-const imgSrc = computed(() =>
-  shouldShowFallback.value ? DEFAULT_ICON : nodePack.icon
-)
 
-const convertToCssValue = (value: string | number) =>
-  typeof value === 'number' ? `${value}rem` : value
-
-const cssWidth = computed(() => convertToCssValue(width))
-const cssHeight = computed(() => convertToCssValue(height))
+const showDefaultBanner = computed(() => !nodePack.banner_url && !nodePack.icon)
+const imgSrc = computed(() => nodePack.banner_url || nodePack.icon)
 </script>

src/components/dialog/content/manager/packIcon/PackIconStacked.vue

@@ -1,25 +1,19 @@
 <template>
-  <div class="relative w-24 h-24">
+  <div class="relative w-[224px] h-[104px] shadow-xl">
     <div
       v-for="(pack, index) in nodePacks.slice(0, maxVisible)"
       :key="pack.id"
-      class="absolute"
+      class="absolute w-[210px] h-[90px]"
       :style="{
         bottom: `${index * offset}px`,
         right: `${index * offset}px`,
         zIndex: maxVisible - index
       }"
     >
-      <div class="border rounded-lg p-0.5">
-        <PackIcon :node-pack="pack" width="4.5rem" height="4.5rem" />
+      <div class="border rounded-lg shadow-lg p-0.5">
+        <PackIcon :node-pack="pack" />
       </div>
     </div>
-    <div
-      v-if="nodePacks.length > maxVisible"
-      class="absolute -top-2 -right-2 bg-primary rounded-full w-7 h-7 flex items-center justify-center text-xs font-bold shadow-md z-10"
-    >
-      +{{ nodePacks.length - maxVisible }}
-    </div>
   </div>
 </template>
 

src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue

@@ -33,6 +33,10 @@
         :node-packs="missingNodePacks"
         :label="$t('manager.installAllMissingNodes')"
       />
+      <PackUpdateButton
+        v-if="isUpdateAvailableTab && hasUpdateAvailable"
+        :node-packs="updateAvailableNodePacks"
+      />
     </div>
     <div class="flex mt-3 text-sm">
       <div class="flex gap-6 ml-1">
@@ -65,8 +69,10 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
+import PackUpdateButton from '@/components/dialog/content/manager/button/PackUpdateButton.vue'
 import SearchFilterDropdown from '@/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue'
 import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
+import { useUpdateAvailableNodes } from '@/composables/nodePack/useUpdateAvailableNodes'
 import {
   type SearchOption,
   SortableAlgoliaField
@@ -83,6 +89,7 @@ const { searchResults, sortOptions } = defineProps<{
   suggestions?: QuerySuggestion[]
   sortOptions?: SortableField[]
   isMissingTab?: boolean
+  isUpdateAvailableTab?: boolean
 }>()
 
 const searchQuery = defineModel<string>('searchQuery')
@@ -96,6 +103,10 @@ const { t } = useI18n()
 // Get missing node packs from workflow with loading and error states
 const { missingNodePacks, isLoading, error } = useMissingNodes()
 
+// Use the composable to get update available nodes
+const { hasUpdateAvailable, updateAvailableNodePacks } =
+  useUpdateAvailableNodes()
+
 const hasResults = computed(
   () => searchQuery.value?.trim() && searchResults?.length
 )

src/components/dialog/footer/ManagerProgressFooter.vue

@@ -1,41 +1,44 @@
 <template>
   <div
-    class="w-full px-6 py-4 shadow-lg flex items-center justify-between"
+    class="w-full px-6 py-2 shadow-lg flex items-center justify-between"
     :class="{
       'rounded-t-none': progressDialogContent.isExpanded,
       'rounded-lg': !progressDialogContent.isExpanded
     }"
   >
-    <div class="justify-center text-sm font-bold leading-none">
+    <div class="flex items-center text-base leading-none">
       <div class="flex items-center">
         <template v-if="isInProgress">
-          <i class="pi pi-spin pi-spinner mr-2 text-3xl" />
+          <DotSpinner duration="1s" class="mr-2" />
+          <span>{{ currentTaskName }}</span>
+        </template>
+        <template v-else-if="isRestartCompleted">
+          <span class="mr-2">🎉</span>
           <span>{{ currentTaskName }}</span>
         </template>
         <template v-else>
-          <i class="pi pi-check-circle mr-2 text-green-500" />
-          <span class="leading-none">{{
-            $t('manager.restartToApplyChanges')
-          }}</span>
+          <span class="mr-2">✅</span>
+          <span>{{ $t('manager.restartToApplyChanges') }}</span>
         </template>
       </div>
     </div>
     <div class="flex items-center gap-4">
-      <span v-if="isInProgress" class="text-xs font-bold text-neutral-600">
-        {{ comfyManagerStore.uncompletedCount }} {{ $t('g.progressCountOf') }}
+      <span v-if="isInProgress" class="text-sm text-neutral-700">
+        {{ completedTasksCount }} {{ $t('g.progressCountOf') }}
         {{ comfyManagerStore.taskLogs.length }}
       </span>
       <div class="flex items-center">
         <Button
-          v-if="!isInProgress"
+          v-if="!isInProgress && !isRestartCompleted"
           rounded
           outlined
-          class="px-4 py-2 rounded-md mr-4"
+          class="mr-4 rounded-md border-2 px-3 text-neutral-600 border-neutral-900 hover:bg-neutral-100 !dark-theme:bg-transparent dark-theme:text-white dark-theme:border-white dark-theme:hover:bg-neutral-800"
           @click="handleRestart"
         >
-          {{ $t('g.restart') }}
+          {{ $t('manager.applyChanges') }}
         </Button>
         <Button
+          v-else-if="!isRestartCompleted"
           :icon="
             progressDialogContent.isExpanded
               ? 'pi pi-chevron-up'
@@ -44,6 +47,7 @@
           text
           rounded
           size="small"
+          class="font-bold"
           severity="secondary"
           :aria-label="progressDialogContent.isExpanded ? 'Collapse' : 'Expand'"
           @click.stop="progressDialogContent.toggle"
@@ -53,6 +57,7 @@
           text
           rounded
           size="small"
+          class="font-bold"
           severity="secondary"
           aria-label="Close"
           @click.stop="closeDialog"
@@ -65,9 +70,10 @@
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
 import Button from 'primevue/button'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import DotSpinner from '@/components/common/DotSpinner.vue'
 import { api } from '@/scripts/api'
 import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useWorkflowService } from '@/services/workflowService'
@@ -77,41 +83,93 @@ import {
 } from '@/stores/comfyManagerStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
+import { useSettingStore } from '@/stores/settingStore'
 
 const { t } = useI18n()
 const dialogStore = useDialogStore()
 const progressDialogContent = useManagerProgressDialogStore()
 const comfyManagerStore = useComfyManagerStore()
+const settingStore = useSettingStore()
 
-const isInProgress = computed(() => comfyManagerStore.uncompletedCount > 0)
+// State management for restart process
+const isRestarting = ref<boolean>(false)
+const isRestartCompleted = ref<boolean>(false)
+
+const isInProgress = computed(
+  () => comfyManagerStore.isProcessingTasks || isRestarting.value
+)
+
+const completedTasksCount = computed(() => {
+  return (
+    comfyManagerStore.succeededTasksIds.length +
+    comfyManagerStore.failedTasksIds.length
+  )
+})
 
 const closeDialog = () => {
   dialogStore.closeDialog({ key: 'global-manager-progress-dialog' })
 }
 
-const fallbackTaskName = t('g.installing')
+const fallbackTaskName = t('manager.installingDependencies')
 const currentTaskName = computed(() => {
+  if (isRestarting.value) {
+    return t('manager.restartingBackend')
+  }
+  if (isRestartCompleted.value) {
+    return t('manager.extensionsSuccessfullyInstalled')
+  }
   if (!comfyManagerStore.taskLogs.length) return fallbackTaskName
   const task = comfyManagerStore.taskLogs.at(-1)
   return task?.taskName ?? fallbackTaskName
 })
 
 const handleRestart = async () => {
-  const onReconnect = async () => {
-    // Refresh manager state
+  // Store original toast setting value
+  const originalToastSetting = settingStore.get(
+    'Comfy.Toast.DisableReconnectingToast'
+  )
 
-    comfyManagerStore.clearLogs()
-    comfyManagerStore.setStale()
+  try {
+    await settingStore.set('Comfy.Toast.DisableReconnectingToast', true)
 
-    // Refresh node definitions
-    await useCommandStore().execute('Comfy.RefreshNodeDefinitions')
+    isRestarting.value = true
 
-    // Reload workflow
-    await useWorkflowService().reloadCurrentWorkflow()
+    const onReconnect = async () => {
+      try {
+        comfyManagerStore.setStale()
+
+        await useCommandStore().execute('Comfy.RefreshNodeDefinitions')
+
+        await useWorkflowService().reloadCurrentWorkflow()
+      } finally {
+        await settingStore.set(
+          'Comfy.Toast.DisableReconnectingToast',
+          originalToastSetting
+        )
+
+        isRestarting.value = false
+        isRestartCompleted.value = true
+
+        setTimeout(() => {
+          closeDialog()
+          comfyManagerStore.resetTaskState()
+        }, 3000)
+      }
+    }
+
+    useEventListener(api, 'reconnected', onReconnect, { once: true })
+
+    await useComfyManagerService().rebootComfyUI()
+  } catch (error) {
+    // If restart fails, restore settings and reset state
+    await settingStore.set(
+      'Comfy.Toast.DisableReconnectingToast',
+      originalToastSetting
+    )
+    isRestarting.value = false
+    isRestartCompleted.value = false
+    closeDialog() // Close dialog on error
+    throw error
   }
-  useEventListener(api, 'reconnected', onReconnect, { once: true })
-
-  await useComfyManagerService().rebootComfyUI()
-  closeDialog()
 }
 </script>

src/components/dialog/header/ManagerProgressHeader.vue

@@ -18,16 +18,40 @@
 
 <script setup lang="ts">
 import TabMenu from 'primevue/tabmenu'
-import { ref } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useManagerProgressDialogStore } from '@/stores/comfyManagerStore'
+import {
+  useComfyManagerStore,
+  useManagerProgressDialogStore
+} from '@/stores/comfyManagerStore'
 
 const progressDialogContent = useManagerProgressDialogStore()
-const activeTabIndex = ref(0)
+const comfyManagerStore = useComfyManagerStore()
+const activeTabIndex = computed({
+  get: () => progressDialogContent.getActiveTabIndex(),
+  set: (value: number) => progressDialogContent.setActiveTabIndex(value)
+})
 const { t } = useI18n()
-const tabs = [
-  { label: t('manager.installationQueue') },
-  { label: t('manager.failed', { count: 0 }) }
-]
+
+const failedCount = computed(() => comfyManagerStore.failedTasksIds.length)
+
+const queueSuffix = computed(() => {
+  const queueLength = comfyManagerStore.managerQueue.queueLength
+  if (queueLength === 0) {
+    return ''
+  }
+  return ` (${queueLength})`
+})
+const failedSuffix = computed(() => {
+  if (failedCount.value === 0) {
+    return ''
+  }
+  return ` (${failedCount.value})`
+})
+
+const tabs = computed(() => [
+  { label: t('manager.installationQueue') + queueSuffix.value },
+  { label: t('manager.failed') + failedSuffix.value }
+])
 </script>

src/components/graph/SelectionOverlay.vue

@@ -17,28 +17,26 @@ import { createBounds } from '@comfyorg/litegraph'
 import { whenever } from '@vueuse/core'
 import { ref, watch } from 'vue'
 
-import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
 import { useAbsolutePosition } from '@/composables/element/useAbsolutePosition'
 import { useCanvasStore } from '@/stores/graphStore'
 
 const canvasStore = useCanvasStore()
 const { style, updatePosition } = useAbsolutePosition()
-const { getSelectableItems } = useSelectedLiteGraphItems()
 
 const visible = ref(false)
 const showBorder = ref(false)
 
 const positionSelectionOverlay = () => {
-  const selectableItems = getSelectableItems()
-  showBorder.value = selectableItems.size > 1
+  const { selectedItems } = canvasStore.getCanvas()
+  showBorder.value = selectedItems.size > 1
 
-  if (!selectableItems.size) {
+  if (!selectedItems.size) {
     visible.value = false
     return
   }
 
   visible.value = true
-  const bounds = createBounds(selectableItems)
+  const bounds = createBounds(selectedItems)
   if (bounds) {
     updatePosition({
       pos: [bounds[0], bounds[1]],
@@ -47,6 +45,7 @@ const positionSelectionOverlay = () => {
   }
 }
 
+// Register listener on canvas creation.
 whenever(
   () => canvasStore.getCanvas().state.selectionChanged,
   () => {

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

@@ -1,122 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import Tooltip from 'primevue/tooltip'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-// Import after mocks
-import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
-
-// Mock the litegraph module
-vi.mock('@comfyorg/litegraph', async () => {
-  const actual = await vi.importActual('@comfyorg/litegraph')
-  return {
-    ...actual,
-    LGraphCanvas: {
-      node_colors: {
-        red: { bgcolor: '#ff0000' },
-        green: { bgcolor: '#00ff00' },
-        blue: { bgcolor: '#0000ff' }
-      }
-    },
-    LiteGraph: {
-      NODE_DEFAULT_BGCOLOR: '#353535'
-    },
-    isColorable: vi.fn(() => true)
-  }
-})
-
-// Mock the colorUtil module
-vi.mock('@/utils/colorUtil', () => ({
-  adjustColor: vi.fn((color: string) => color + '_light')
-}))
-
-// Mock the litegraphUtil module
-vi.mock('@/utils/litegraphUtil', () => ({
-  getItemsColorOption: vi.fn(() => null),
-  isLGraphNode: vi.fn((item) => item?.type === 'LGraphNode'),
-  isLGraphGroup: vi.fn((item) => item?.type === 'LGraphGroup'),
-  isReroute: vi.fn(() => false)
-}))
-
-describe('ColorPickerButton', () => {
-  let canvasStore: ReturnType<typeof useCanvasStore>
-  let workflowStore: ReturnType<typeof useWorkflowStore>
-
-  const i18n = createI18n({
-    legacy: false,
-    locale: 'en',
-    messages: {
-      en: {
-        color: {
-          noColor: 'No Color',
-          red: 'Red',
-          green: 'Green',
-          blue: 'Blue'
-        }
-      }
-    }
-  })
-
-  beforeEach(() => {
-    setActivePinia(createPinia())
-    canvasStore = useCanvasStore()
-    workflowStore = useWorkflowStore()
-
-    // Set up default store state
-    canvasStore.selectedItems = []
-
-    // Mock workflow store
-    workflowStore.activeWorkflow = {
-      changeTracker: {
-        checkState: vi.fn()
-      }
-    } as any
-  })
-
-  const createWrapper = () => {
-    return mount(ColorPickerButton, {
-      global: {
-        plugins: [PrimeVue, i18n],
-        directives: {
-          tooltip: Tooltip
-        }
-      }
-    })
-  }
-
-  it('should render when nodes are selected', () => {
-    // Add a mock node to selectedItems
-    canvasStore.selectedItems = [{ type: 'LGraphNode' } as any]
-    const wrapper = createWrapper()
-    expect(wrapper.find('button').exists()).toBe(true)
-  })
-
-  it('should not render when nothing is selected', () => {
-    // Keep selectedItems empty
-    canvasStore.selectedItems = []
-    const wrapper = createWrapper()
-    // The button exists but is hidden with v-show
-    expect(wrapper.find('button').exists()).toBe(true)
-    expect(wrapper.find('button').attributes('style')).toContain(
-      'display: none'
-    )
-  })
-
-  it('should toggle color picker visibility on button click', async () => {
-    canvasStore.selectedItems = [{ type: 'LGraphNode' } as any]
-    const wrapper = createWrapper()
-    const button = wrapper.find('button')
-
-    expect(wrapper.find('.color-picker-container').exists()).toBe(false)
-
-    await button.trigger('click')
-    expect(wrapper.find('.color-picker-container').exists()).toBe(true)
-
-    await button.trigger('click')
-    expect(wrapper.find('.color-picker-container').exists()).toBe(false)
-  })
-})

src/components/graph/selectionToolbox/ColorPickerButton.vue

@@ -2,10 +2,6 @@
   <div class="relative">
     <Button
       v-show="canvasStore.nodeSelected || canvasStore.groupSelected"
-      v-tooltip.top="{
-        value: localizedCurrentColorName ?? t('color.noColor'),
-        showDelay: 512
-      }"
       severity="secondary"
       text
       @click="() => (showColorPicker = !showColorPicker)"
@@ -127,16 +123,6 @@ const currentColor = computed(() =>
     : null
 )
 
-const localizedCurrentColorName = computed(() => {
-  if (!currentColorOption.value?.bgcolor) return null
-  const colorOption = colorOptions.find(
-    (option) =>
-      option.value.dark === currentColorOption.value?.bgcolor ||
-      option.value.light === currentColorOption.value?.bgcolor
-  )
-  return colorOption?.localizedName ?? NO_COLOR_OPTION.localizedName
-})
-
 watch(
   () => canvasStore.selectedItems,
   (newSelectedItems) => {

src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue

@@ -10,7 +10,7 @@
     @click="() => commandStore.execute('Comfy.Graph.ConvertToSubgraph')"
   >
     <template #icon>
-      <i-lucide:shrink />
+      <i-comfy:workflow />
     </template>
   </Button>
 </template>

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -14,7 +14,17 @@
         @mouseenter="onMenuItemHover(menuItem.key, $event)"
         @mouseleave="onMenuItemLeave(menuItem.key)"
       >
-        <i :class="menuItem.icon" class="help-menu-icon" />
+        <div class="help-menu-icon-container">
+          <div class="help-menu-icon">
+            <component
+              :is="menuItem.icon"
+              v-if="typeof menuItem.icon === 'object'"
+              :size="16"
+            />
+            <i v-else :class="menuItem.icon" />
+          </div>
+          <div v-if="menuItem.showRedDot" class="menu-red-dot" />
+        </div>
         <span class="menu-label">{{ menuItem.label }}</span>
         <i v-if="menuItem.key === 'more'" class="pi pi-chevron-right" />
       </button>
@@ -119,10 +129,21 @@
 </template>
 
 <script setup lang="ts">
+// No need to import useStorage anymore - it's in the composable
 import Button from 'primevue/button'
-import { type CSSProperties, computed, nextTick, onMounted, ref } from 'vue'
+import {
+  type CSSProperties,
+  type Component,
+  computed,
+  nextTick,
+  onMounted,
+  ref
+} from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
+import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
+import { useDialogService } from '@/services/dialogService'
 import { type ReleaseNote } from '@/services/releaseService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useReleaseStore } from '@/stores/releaseStore'
@@ -133,12 +154,13 @@ import { formatVersionAnchor } from '@/utils/formatUtil'
 // Types
 interface MenuItem {
   key: string
-  icon?: string
+  icon?: string | Component
   label?: string
   action?: () => void
   visible?: boolean
   type?: 'item' | 'divider'
   items?: MenuItem[]
+  showRedDot?: boolean
 }
 
 // Constants
@@ -170,6 +192,7 @@ const { t, locale } = useI18n()
 const releaseStore = useReleaseStore()
 const commandStore = useCommandStore()
 const settingStore = useSettingStore()
+const dialogService = useDialogService()
 
 // Emits
 const emit = defineEmits<{
@@ -192,6 +215,10 @@ const moreMenuItem = computed(() =>
   menuItems.value.find((item) => item.key === 'more')
 )
 
+// Use conflict acknowledgment state from composable
+const { shouldShowRedDot: shouldShowManagerRedDot } =
+  useConflictAcknowledgment()
+
 const menuItems = computed<MenuItem[]>(() => {
   const moreItems: MenuItem[] = [
     {
@@ -271,6 +298,17 @@ const menuItems = computed<MenuItem[]>(() => {
         emit('close')
       }
     },
+    {
+      key: 'manager',
+      type: 'item',
+      icon: PuzzleIcon,
+      label: t('helpCenter.managerExtension'),
+      showRedDot: shouldShowManagerRedDot.value,
+      action: () => {
+        dialogService.showManagerDialog()
+        emit('close')
+      }
+    },
     {
       key: 'more',
       type: 'item',
@@ -505,16 +543,39 @@ onMounted(async () => {
   box-shadow: none;
 }
 
-.help-menu-icon {
+.help-menu-icon-container {
+  position: relative;
   margin-right: 0.75rem;
+  width: 16px;
+  flex-shrink: 0;
+}
+
+.help-menu-icon {
   font-size: 1rem;
   color: var(--p-text-muted-color);
   width: 16px;
   display: flex;
   justify-content: center;
+  align-items: center;
   flex-shrink: 0;
 }
 
+.help-menu-icon svg {
+  color: var(--p-text-muted-color);
+}
+
+.menu-red-dot {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 8px;
+  height: 8px;
+  background: #ff3b30;
+  border-radius: 50%;
+  border: 1.5px solid var(--p-content-background);
+  z-index: 1;
+}
+
 .menu-label {
   flex: 1;
 }

src/components/helpcenter/WhatsNewPopup.vue

@@ -75,6 +75,11 @@ import { formatVersionAnchor } from '@/utils/formatUtil'
 const { locale, t } = useI18n()
 const releaseStore = useReleaseStore()
 
+// Emit event for parent component
+const emit = defineEmits<{
+  'whats-new-dismissed': []
+}>()
+
 // Local state for dismissed status
 const isDismissed = ref(false)
 
@@ -134,6 +139,10 @@ const closePopup = async () => {
     await releaseStore.handleWhatsNewSeen(latestRelease.value.version)
   }
   hide()
+
+  // Emit event to notify parent that What's New was dismissed
+  // Parent can then check if conflict modal should be shown
+  emit('whats-new-dismissed')
 }
 
 // Learn more handled by anchor href

src/components/icons/PuzzleIcon.vue

@@ -0,0 +1,43 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="0 0 16 16"
+    fill="none"
+    :class="iconClass"
+  >
+    <g clip-path="url(#clip0_1099_16244)">
+      <path
+        d="M4.99992 3.00016C4.99992 2.07969 5.74611 1.3335 6.66658 1.3335C7.58706 1.3335 8.33325 2.07969 8.33325 3.00016V4.00016H8.99992C9.9318 4.00016 10.3977 4.00016 10.7653 4.1524C11.2553 4.35539 11.6447 4.74474 11.8477 5.2348C11.9999 5.60234 11.9999 6.06828 11.9999 7.00016H12.9999C13.9204 7.00016 14.6666 7.74635 14.6666 8.66683C14.6666 9.5873 13.9204 10.3335 12.9999 10.3335H11.9999V11.4668C11.9999 12.5869 11.9999 13.147 11.7819 13.5748C11.5902 13.9511 11.2842 14.2571 10.9079 14.4488C10.4801 14.6668 9.92002 14.6668 8.79992 14.6668H8.33325V13.5002C8.33325 12.6717 7.66168 12.0002 6.83325 12.0002C6.00482 12.0002 5.33325 12.6717 5.33325 13.5002V14.6668H4.53325C3.41315 14.6668 2.85309 14.6668 2.42527 14.4488C2.04895 14.2571 1.74299 13.9511 1.55124 13.5748C1.33325 13.147 1.33325 12.5869 1.33325 11.4668V10.3335H2.33325C3.25373 10.3335 3.99992 9.5873 3.99992 8.66683C3.99992 7.74635 3.25373 7.00016 2.33325 7.00016H1.33325C1.33325 6.06828 1.33325 5.60234 1.48549 5.2348C1.68848 4.74474 2.07783 4.35539 2.56789 4.1524C2.93543 4.00016 3.40137 4.00016 4.33325 4.00016H4.99992V3.00016Z"
+        :stroke="color"
+        stroke-width="1.2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1099_16244">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  size?: number | string
+  color?: string
+  class?: string
+}
+
+const {
+  size = 16,
+  color = 'currentColor',
+  class: className
+} = defineProps<Props>()
+
+const iconClass = computed(() => className || '')
+</script>

src/components/icons/VerifiedIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="0 0 16 16"
+    fill="none"
+    :class="iconClass"
+  >
+    <path
+      d="M8.00049 1.3335C8.73661 1.33367 9.33332 1.93038 9.3335 2.6665V2.83447C9.82278 2.96041 10.2851 3.15405 10.7095 3.40479L10.8286 3.28564C11.3493 2.76525 12.1937 2.76519 12.7144 3.28564C13.235 3.80626 13.2348 4.65067 12.7144 5.17139L12.5952 5.29053C12.846 5.71486 13.0396 6.17725 13.1655 6.6665H13.3335C14.0699 6.6665 14.6665 7.26411 14.6665 8.00049C14.6663 8.73672 14.0698 9.3335 13.3335 9.3335H13.1655C13.0396 9.82284 12.846 10.2851 12.5952 10.7095L12.7144 10.8286C13.235 11.3493 13.235 12.1937 12.7144 12.7144C12.1937 13.235 11.3493 13.235 10.8286 12.7144L10.7095 12.5952C10.2851 12.846 9.82284 13.0396 9.3335 13.1655V13.3335C9.3335 14.0698 8.73672 14.6663 8.00049 14.6665C7.26411 14.6665 6.6665 14.0699 6.6665 13.3335V13.1655C6.17725 13.0396 5.71486 12.846 5.29053 12.5952L5.17139 12.7144C4.65067 13.2348 3.80626 13.235 3.28564 12.7144C2.76519 12.1937 2.76525 11.3493 3.28564 10.8286L3.40479 10.7095C3.15405 10.2851 2.96041 9.82278 2.83447 9.3335H2.6665C1.93038 9.33332 1.33367 8.73661 1.3335 8.00049C1.3335 7.26422 1.93027 6.66668 2.6665 6.6665H2.83447C2.96043 6.17722 3.15403 5.71488 3.40479 5.29053L3.28564 5.17139C2.76536 4.65065 2.76508 3.80621 3.28564 3.28564C3.80621 2.76508 4.65065 2.76536 5.17139 3.28564L5.29053 3.40479C5.71488 3.15403 6.17722 2.96043 6.6665 2.83447V2.6665C6.66668 1.93027 7.26422 1.3335 8.00049 1.3335ZM7.3335 8.00049L6.00049 6.6665L4.6665 8.00049L7.3335 10.6665L11.3335 6.6665L10.0005 5.3335L7.3335 8.00049Z"
+      :fill="color"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  size?: number | string
+  color?: string
+  class?: string
+}
+
+const { size = 16, color = '#60A5FA', class: className } = defineProps<Props>()
+
+const iconClass = computed(() => className || '')
+</script>

src/components/node/NodePreview.spec.ts

@@ -1,132 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import { beforeAll, describe, expect, it } from 'vitest'
-import { createApp } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
-
-import NodePreview from './NodePreview.vue'
-
-describe('NodePreview', () => {
-  let i18n: ReturnType<typeof createI18n>
-  let pinia: ReturnType<typeof createPinia>
-
-  beforeAll(() => {
-    // Create a Vue app instance for PrimeVue
-    const app = createApp({})
-    app.use(PrimeVue)
-
-    // Create i18n instance
-    i18n = createI18n({
-      legacy: false,
-      locale: 'en',
-      messages: {
-        en: {
-          g: {
-            preview: 'Preview'
-          }
-        }
-      }
-    })
-
-    // Create pinia instance
-    pinia = createPinia()
-  })
-
-  const mockNodeDef: ComfyNodeDefV2 = {
-    name: 'TestNode',
-    display_name:
-      'Test Node With A Very Long Display Name That Should Overflow',
-    category: 'test',
-    output_node: false,
-    inputs: {
-      test_input: {
-        name: 'test_input',
-        type: 'STRING',
-        tooltip: 'Test input'
-      }
-    },
-    outputs: [],
-    python_module: 'test_module',
-    description: 'Test node description'
-  }
-
-  const mountComponent = (nodeDef: ComfyNodeDefV2 = mockNodeDef) => {
-    return mount(NodePreview, {
-      global: {
-        plugins: [PrimeVue, i18n, pinia],
-        stubs: {
-          // Stub stores if needed
-        }
-      },
-      props: {
-        nodeDef
-      }
-    })
-  }
-
-  it('renders node preview with correct structure', () => {
-    const wrapper = mountComponent()
-
-    expect(wrapper.find('._sb_node_preview').exists()).toBe(true)
-    expect(wrapper.find('.node_header').exists()).toBe(true)
-    expect(wrapper.find('._sb_preview_badge').text()).toBe('Preview')
-  })
-
-  it('applies overflow-ellipsis class to node header for text truncation', () => {
-    const wrapper = mountComponent()
-    const nodeHeader = wrapper.find('.node_header')
-
-    expect(nodeHeader.classes()).toContain('overflow-ellipsis')
-    expect(nodeHeader.classes()).toContain('mr-4')
-  })
-
-  it('sets title attribute on node header with full display name', () => {
-    const wrapper = mountComponent()
-    const nodeHeader = wrapper.find('.node_header')
-
-    expect(nodeHeader.attributes('title')).toBe(mockNodeDef.display_name)
-  })
-
-  it('displays truncated long node names with ellipsis', () => {
-    const longNameNodeDef: ComfyNodeDefV2 = {
-      ...mockNodeDef,
-      display_name:
-        'This Is An Extremely Long Node Name That Should Definitely Be Truncated With Ellipsis To Prevent Layout Issues'
-    }
-
-    const wrapper = mountComponent(longNameNodeDef)
-    const nodeHeader = wrapper.find('.node_header')
-
-    // Verify the title attribute contains the full name
-    expect(nodeHeader.attributes('title')).toBe(longNameNodeDef.display_name)
-
-    // Verify overflow handling classes are applied
-    expect(nodeHeader.classes()).toContain('overflow-ellipsis')
-
-    // The actual text content should still be the full name (CSS handles truncation)
-    expect(nodeHeader.text()).toContain(longNameNodeDef.display_name)
-  })
-
-  it('handles short node names without issues', () => {
-    const shortNameNodeDef: ComfyNodeDefV2 = {
-      ...mockNodeDef,
-      display_name: 'Short'
-    }
-
-    const wrapper = mountComponent(shortNameNodeDef)
-    const nodeHeader = wrapper.find('.node_header')
-
-    expect(nodeHeader.attributes('title')).toBe('Short')
-    expect(nodeHeader.text()).toContain('Short')
-  })
-
-  it('applies proper spacing to the dot element', () => {
-    const wrapper = mountComponent()
-    const headdot = wrapper.find('.headdot')
-
-    expect(headdot.classes()).toContain('pr-3')
-  })
-})

src/components/node/NodePreview.vue

@@ -6,14 +6,13 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
   <div class="_sb_node_preview">
     <div class="_sb_table">
       <div
-        class="node_header overflow-ellipsis mr-4"
-        :title="nodeDef.display_name"
+        class="node_header"
         :style="{
           backgroundColor: litegraphColors.NODE_DEFAULT_COLOR,
           color: litegraphColors.NODE_TITLE_COLOR
         }"
       >
-        <div class="_sb_dot headdot pr-3" />
+        <div class="_sb_dot headdot" />
         {{ nodeDef.display_name }}
       </div>
       <div class="_sb_preview_badge">{{ $t('g.preview') }}</div>

src/components/sidebar/SidebarHelpCenterIcon.vue

@@ -42,6 +42,7 @@
           'sidebar-right': sidebarLocation === 'right',
           'small-sidebar': sidebarSize === 'small'
         }"
+        @whats-new-dismissed="handleWhatsNewDismissed"
       />
     </Teleport>
 
@@ -57,12 +58,14 @@
 </template>
 
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref } from 'vue'
 
 import HelpCenterMenuContent from '@/components/helpcenter/HelpCenterMenuContent.vue'
 import ReleaseNotificationToast from '@/components/helpcenter/ReleaseNotificationToast.vue'
 import WhatsNewPopup from '@/components/helpcenter/WhatsNewPopup.vue'
+import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
+import { useConflictDetection } from '@/composables/useConflictDetection'
+import { useDialogService } from '@/services/dialogService'
 import { useReleaseStore } from '@/stores/releaseStore'
 import { useSettingStore } from '@/stores/settingStore'
 
@@ -70,9 +73,21 @@ import SidebarIcon from './SidebarIcon.vue'
 
 const settingStore = useSettingStore()
 const releaseStore = useReleaseStore()
-const { shouldShowRedDot } = storeToRefs(releaseStore)
+const conflictDetection = useConflictDetection()
+const conflictAcknowledgment = useConflictAcknowledgment()
+const { showNodeConflictDialog } = useDialogService()
 const isHelpCenterVisible = ref(false)
 
+// Use conflict acknowledgment state from composable
+const { shouldShowRedDot: shouldShowConflictRedDot, markConflictsAsSeen } =
+  conflictAcknowledgment
+
+// Use either release red dot or conflict red dot
+const shouldShowRedDot = computed(() => {
+  const releaseRedDot = releaseStore.shouldShowRedDot
+  return releaseRedDot || shouldShowConflictRedDot.value
+})
+
 const sidebarLocation = computed(() =>
   settingStore.get('Comfy.Sidebar.Location')
 )
@@ -87,6 +102,38 @@ const closeHelpCenter = () => {
   isHelpCenterVisible.value = false
 }
 
+/**
+ * Handle What's New popup dismissal
+ * Check if conflict modal should be shown after ComfyUI update
+ */
+const handleWhatsNewDismissed = async () => {
+  try {
+    // Check if conflict modal should be shown after update
+    const shouldShow =
+      await conflictDetection.shouldShowConflictModalAfterUpdate()
+
+    if (shouldShow) {
+      showConflictModal()
+    }
+  } catch (error) {
+    console.error('[HelpCenter] Error checking conflict modal:', error)
+  }
+}
+
+/**
+ * Show the node conflict dialog with current conflict data
+ */
+const showConflictModal = () => {
+  showNodeConflictDialog({
+    showAfterWhatsNew: true,
+    dialogComponentProps: {
+      onClose: () => {
+        markConflictsAsSeen()
+      }
+    }
+  })
+}
+
 // Initialize release store on mount
 onMounted(async () => {
   // Initialize release store to fetch releases for toast and popup

src/composables/canvas/useSelectedLiteGraphItems.ts

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

src/composables/node/useNodePricing.ts

@@ -919,33 +919,6 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         return `$${price.toFixed(2)}/Run`
       }
     },
-    Veo3VideoGenerationNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model'
-        ) as IComboWidget
-        const generateAudioWidget = node.widgets?.find(
-          (w) => w.name === 'generate_audio'
-        ) as IComboWidget
-
-        if (!modelWidget || !generateAudioWidget) {
-          return '$2.00-6.00/Run (varies with model & audio generation)'
-        }
-
-        const model = String(modelWidget.value)
-        const generateAudio =
-          String(generateAudioWidget.value).toLowerCase() === 'true'
-
-        if (model.includes('veo-3.0-fast-generate-001')) {
-          return generateAudio ? '$3.20/Run' : '$2.00/Run'
-        } else if (model.includes('veo-3.0-generate-001')) {
-          return generateAudio ? '$6.00/Run' : '$4.00/Run'
-        }
-
-        // Default fallback
-        return '$2.00-6.00/Run'
-      }
-    },
     LumaImageNode: {
       displayPrice: (node: LGraphNode): string => {
         const modelWidget = node.widgets?.find(
@@ -1367,7 +1340,6 @@ export const useNodePricing = () => {
       FluxProKontextProNode: [],
       FluxProKontextMaxNode: [],
       VeoVideoGenerationNode: ['duration_seconds'],
-      Veo3VideoGenerationNode: ['model', 'generate_audio'],
       LumaVideoNode: ['model', 'resolution', 'duration'],
       LumaImageToVideoNode: ['model', 'resolution', 'duration'],
       LumaImageNode: ['model', 'aspect_ratio'],

src/composables/nodePack/useInstalledPacks.ts

@@ -20,7 +20,10 @@ export const useInstalledPacks = (options: UseNodePacksOptions = {}) => {
     packs.filter((pack) => comfyManagerStore.isPackInstalled(pack.id))
 
   const startFetchInstalled = async () => {
-    await comfyManagerStore.refreshInstalledList()
+    // Only refresh if store doesn't have data yet
+    if (comfyManagerStore.installedPacksIds.size === 0) {
+      await comfyManagerStore.refreshInstalledList()
+    }
     await startFetch()
   }
 
@@ -33,11 +36,29 @@ export const useInstalledPacks = (options: UseNodePacksOptions = {}) => {
     cleanup()
   })
 
+  // Create a computed property that provides installed pack info with versions
+  const installedPacksWithVersions = computed(() => {
+    const result: Array<{ id: string; version: string }> = []
+
+    for (const pack of Object.values(comfyManagerStore.installedPacks)) {
+      const id = pack.cnr_id || pack.aux_id
+      if (id) {
+        result.push({
+          id,
+          version: pack.ver
+        })
+      }
+    }
+
+    return result
+  })
+
   return {
     error,
     isLoading,
     isReady,
     installedPacks: nodePacks,
+    installedPacksWithVersions,
     startFetchInstalled,
     filterInstalledPack
   }

src/composables/nodePack/useUpdateAvailableNodes.ts

@@ -0,0 +1,65 @@
+import { computed, onMounted } from 'vue'
+
+import { useInstalledPacks } from '@/composables/nodePack/useInstalledPacks'
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import type { components } from '@/types/comfyRegistryTypes'
+import { compareVersions, isSemVer } from '@/utils/formatUtil'
+
+/**
+ * Composable to find NodePacks that have updates available
+ * Uses the same filtering approach as ManagerDialogContent.vue
+ * Automatically fetches installed pack data when initialized
+ */
+export const useUpdateAvailableNodes = () => {
+  const comfyManagerStore = useComfyManagerStore()
+  const { installedPacks, isLoading, error, startFetchInstalled } =
+    useInstalledPacks()
+
+  // Check if a pack has updates available (same logic as usePackUpdateStatus)
+  const isOutdatedPack = (pack: components['schemas']['Node']) => {
+    const isInstalled = comfyManagerStore.isPackInstalled(pack?.id)
+    if (!isInstalled) return false
+
+    const installedVersion = comfyManagerStore.getInstalledPackVersion(
+      pack.id ?? ''
+    )
+    const latestVersion = pack.latest_version?.version
+
+    const isNightlyPack = !!installedVersion && !isSemVer(installedVersion)
+
+    if (isNightlyPack || !latestVersion) {
+      return false
+    }
+
+    return compareVersions(latestVersion, installedVersion) > 0
+  }
+
+  // Same filtering logic as ManagerDialogContent.vue
+  const filterOutdatedPacks = (packs: components['schemas']['Node'][]) =>
+    packs.filter(isOutdatedPack)
+
+  // Filter only outdated packs from installed packs
+  const updateAvailableNodePacks = computed(() => {
+    if (!installedPacks.value.length) return []
+    return filterOutdatedPacks(installedPacks.value)
+  })
+
+  // Check if there are any outdated packs
+  const hasUpdateAvailable = computed(() => {
+    return updateAvailableNodePacks.value.length > 0
+  })
+
+  // Automatically fetch installed pack data when composable is used
+  onMounted(async () => {
+    if (!installedPacks.value.length && !isLoading.value) {
+      await startFetchInstalled()
+    }
+  })
+
+  return {
+    updateAvailableNodePacks,
+    hasUpdateAvailable,
+    isLoading,
+    error
+  }
+}

src/composables/nodePack/useWorkflowPacks.ts

@@ -7,7 +7,7 @@ import { app } from '@/scripts/app'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
-import { SelectedVersion, UseNodePacksOptions } from '@/types/comfyManagerTypes'
+import { UseNodePacksOptions } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
 import { collectAllNodes } from '@/utils/graphTraversalUtil'
 
@@ -66,8 +66,7 @@ export const useWorkflowPacks = (options: UseNodePacksOptions = {}) => {
       return {
         id: CORE_NODES_PACK_NAME,
         version:
-          systemStatsStore.systemStats?.system?.comfyui_version ??
-          SelectedVersion.NIGHTLY
+          systemStatsStore.systemStats?.system?.comfyui_version ?? 'nightly'
       }
     }
 
@@ -77,7 +76,7 @@ export const useWorkflowPacks = (options: UseNodePacksOptions = {}) => {
     if (pack) {
       return {
         id: pack.id,
-        version: pack.latest_version?.version ?? SelectedVersion.NIGHTLY
+        version: pack.latest_version?.version ?? 'nightly'
       }
     }
 

src/composables/useConflictAcknowledgment.ts

@@ -0,0 +1,103 @@
+import { useStorage } from '@vueuse/core'
+import { computed } from 'vue'
+
+import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
+
+/**
+ * LocalStorage keys for conflict acknowledgment tracking
+ */
+const STORAGE_KEYS = {
+  CONFLICT_MODAL_DISMISSED: 'Comfy.ConflictModalDismissed',
+  CONFLICT_RED_DOT_DISMISSED: 'Comfy.ConflictRedDotDismissed',
+  CONFLICT_WARNING_BANNER_DISMISSED: 'Comfy.ConflictWarningBannerDismissed'
+} as const
+
+/**
+ * Interface for conflict acknowledgment state
+ */
+interface ConflictAcknowledgmentState {
+  modal_dismissed: boolean
+  red_dot_dismissed: boolean
+  warning_banner_dismissed: boolean
+}
+
+/**
+ * Composable for managing conflict acknowledgment state in localStorage
+ *
+ * This handles:
+ * - Tracking whether conflict modal has been dismissed
+ * - Tracking whether red dot notification has been cleared
+ * - Managing per-package conflict acknowledgments
+ * - Detecting ComfyUI version changes to reset acknowledgment state
+ */
+export function useConflictAcknowledgment() {
+  const conflictDetectionStore = useConflictDetectionStore()
+
+  // Reactive state using VueUse's useStorage for automatic persistence
+  const modalDismissed = useStorage(
+    STORAGE_KEYS.CONFLICT_MODAL_DISMISSED,
+    false
+  )
+  const redDotDismissed = useStorage(
+    STORAGE_KEYS.CONFLICT_RED_DOT_DISMISSED,
+    false
+  )
+  const warningBannerDismissed = useStorage(
+    STORAGE_KEYS.CONFLICT_WARNING_BANNER_DISMISSED,
+    false
+  )
+
+  // Create computed state object for backward compatibility
+  const state = computed<ConflictAcknowledgmentState>(() => ({
+    modal_dismissed: modalDismissed.value,
+    red_dot_dismissed: redDotDismissed.value,
+    warning_banner_dismissed: warningBannerDismissed.value
+  }))
+
+  /**
+   * Mark red dot notification as dismissed
+   */
+  function dismissRedDotNotification(): void {
+    redDotDismissed.value = true
+  }
+
+  /**
+   * Mark manager warning banner as dismissed
+   */
+  function dismissWarningBanner(): void {
+    warningBannerDismissed.value = true
+    redDotDismissed.value = true
+  }
+
+  /**
+   * Mark conflicts as seen (unified function for help center and manager)
+   */
+  function markConflictsAsSeen(): void {
+    redDotDismissed.value = true
+    modalDismissed.value = true
+    warningBannerDismissed.value = true
+  }
+
+  const hasConflicts = computed(() => conflictDetectionStore.hasConflicts)
+  const shouldShowConflictModal = computed(() => !modalDismissed.value)
+  const shouldShowRedDot = computed(() => {
+    if (!hasConflicts.value) return false
+    return !redDotDismissed.value
+  })
+  const shouldShowManagerBanner = computed(() => {
+    return hasConflicts.value && !warningBannerDismissed.value
+  })
+
+  return {
+    // State
+    acknowledgmentState: state,
+    shouldShowConflictModal,
+    shouldShowRedDot,
+    shouldShowManagerBanner,
+
+    // Methods
+    dismissRedDotNotification,
+    dismissWarningBanner,
+    markConflictsAsSeen
+  }
+}

src/composables/useCoreCommands.ts

@@ -7,7 +7,6 @@ import {
 import { Point } from '@comfyorg/litegraph'
 
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
 import {
   DEFAULT_DARK_COLOR_PALETTE,
   DEFAULT_LIGHT_COLOR_PALETTE
@@ -16,10 +15,11 @@ import { t } from '@/i18n'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { addFluxKontextGroupNode } from '@/scripts/fluxKontextEditNode'
+import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useDialogService } from '@/services/dialogService'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useWorkflowService } from '@/services/workflowService'
-import type { ComfyCommand } from '@/stores/commandStore'
+import { type ComfyCommand, useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
 import { useQueueSettingsStore, useQueueStore } from '@/stores/queueStore'
@@ -30,11 +30,8 @@ import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import {
-  getAllNonIoNodesInSubgraph,
-  getExecutionIdsForSelectedNodes
-} from '@/utils/graphTraversalUtil'
-import { filterOutputNodes } from '@/utils/nodeFilterUtil'
+import { ManagerTab } from '@/types/comfyManagerTypes'
+import { getAllNonIoNodesInSubgraph } from '@/utils/graphTraversalUtil'
 
 const moveSelectedNodesVersionAdded = '1.22.2'
 
@@ -47,10 +44,30 @@ export function useCoreCommands(): ComfyCommand[] {
   const toastStore = useToastStore()
   const canvasStore = useCanvasStore()
   const executionStore = useExecutionStore()
-  const { getSelectedNodes, toggleSelectedNodesMode } =
-    useSelectedLiteGraphItems()
   const getTracker = () => workflowStore.activeWorkflow?.changeTracker
 
+  const getSelectedNodes = (): LGraphNode[] => {
+    const selectedNodes = app.canvas.selected_nodes
+    const result: LGraphNode[] = []
+    if (selectedNodes) {
+      for (const i in selectedNodes) {
+        const node = selectedNodes[i]
+        result.push(node)
+      }
+    }
+    return result
+  }
+
+  const toggleSelectedNodesMode = (mode: LGraphEventMode) => {
+    getSelectedNodes().forEach((node) => {
+      if (node.mode === mode) {
+        node.mode = LGraphEventMode.ALWAYS
+      } else {
+        node.mode = mode
+      }
+    })
+  }
+
   const moveSelectedNodes = (
     positionUpdater: (pos: Point, gridSize: number) => Point
   ) => {
@@ -348,10 +365,10 @@ export function useCoreCommands(): ComfyCommand[] {
       versionAdded: '1.19.6',
       function: async () => {
         const batchCount = useQueueSettingsStore().batchCount
-        const selectedNodes = getSelectedNodes()
-        const selectedOutputNodes = filterOutputNodes(selectedNodes)
-
-        if (selectedOutputNodes.length === 0) {
+        const queueNodeIds = getSelectedNodes()
+          .filter((node) => node.constructor.nodeData?.output_node)
+          .map((node) => node.id)
+        if (queueNodeIds.length === 0) {
           toastStore.add({
             severity: 'error',
             summary: t('toastMessages.nothingToQueue'),
@@ -360,11 +377,7 @@ export function useCoreCommands(): ComfyCommand[] {
           })
           return
         }
-
-        // Get execution IDs for all selected output nodes and their descendants
-        const executionIds =
-          getExecutionIdsForSelectedNodes(selectedOutputNodes)
-        await app.queuePrompt(0, batchCount, executionIds)
+        await app.queuePrompt(0, batchCount, queueNodeIds)
       }
     },
     {
@@ -672,12 +685,53 @@ export function useCoreCommands(): ComfyCommand[] {
       }
     },
     {
-      id: 'Comfy.Manager.CustomNodesManager',
+      id: 'Comfy.Manager.CustomNodesManager.ShowCustomNodesMenu',
       icon: 'pi pi-puzzle',
-      label: 'Toggle the Custom Nodes Manager',
+      label: 'Show the Custom Nodes Manager',
       versionAdded: '1.12.10',
+      function: async () => {
+        const { is_legacy_manager_ui } =
+          (await useComfyManagerService().isLegacyManagerUI()) ?? {}
+
+        if (is_legacy_manager_ui === true) {
+          try {
+            await useCommandStore().execute(
+              'Comfy.Manager.Menu.ToggleVisibility' // This command is registered by legacy manager FE extension
+            )
+          } catch (error) {
+            useToastStore().add({
+              severity: 'error',
+              summary: t('g.error'),
+              detail: t('manager.legacyMenuNotAvailable'),
+              life: 3000
+            })
+            dialogService.toggleManagerDialog()
+          }
+        } else {
+          dialogService.toggleManagerDialog()
+        }
+      }
+    },
+    {
+      id: 'Comfy.Manager.ShowUpdateAvailablePacks',
+      icon: 'pi pi-sync',
+      label: 'Check for Updates',
+      versionAdded: '1.17.0',
       function: () => {
-        dialogService.toggleManagerDialog()
+        dialogService.showManagerDialog({
+          initialTab: ManagerTab.UpdateAvailable
+        })
+      }
+    },
+    {
+      id: 'Comfy.Manager.ShowMissingPacks',
+      icon: 'pi pi-exclamation-circle',
+      label: 'Install Missing',
+      versionAdded: '1.17.0',
+      function: () => {
+        dialogService.showManagerDialog({
+          initialTab: ManagerTab.Missing
+        })
       }
     },
     {
@@ -766,9 +820,88 @@ export function useCoreCommands(): ComfyCommand[] {
           })
           return
         }
+
         const { node } = res
         canvas.select(node)
       }
+    },
+    {
+      id: 'Comfy.Manager.CustomNodesManager.ShowLegacyCustomNodesMenu',
+      icon: 'pi pi-bars',
+      label: 'Custom Nodes (Legacy)',
+      versionAdded: '1.16.4',
+      function: async () => {
+        try {
+          await useCommandStore().execute(
+            'Comfy.Manager.CustomNodesManager.ToggleVisibility'
+          )
+        } catch (error) {
+          useToastStore().add({
+            severity: 'error',
+            summary: t('g.error'),
+            detail: t('manager.legacyMenuNotAvailable'),
+            life: 3000
+          })
+        }
+      }
+    },
+    {
+      id: 'Comfy.Manager.ShowLegacyManagerMenu',
+      icon: 'mdi mdi-puzzle',
+      label: 'Manager Menu (Legacy)',
+      versionAdded: '1.16.4',
+      function: async () => {
+        try {
+          await useCommandStore().execute('Comfy.Manager.Menu.ToggleVisibility')
+        } catch (error) {
+          useToastStore().add({
+            severity: 'error',
+            summary: t('g.error'),
+            detail: t('manager.legacyMenuNotAvailable'),
+            life: 3000
+          })
+        }
+      }
+    },
+    {
+      id: 'Comfy.Memory.UnloadModels',
+      icon: 'mdi mdi-vacuum-outline',
+      label: 'Unload Models',
+      versionAdded: '1.16.4',
+      function: async () => {
+        if (!useSettingStore().get('Comfy.Memory.AllowManualUnload')) {
+          useToastStore().add({
+            severity: 'error',
+            summary: t('g.error'),
+            detail: t('g.commandProhibited', {
+              command: 'Comfy.Memory.UnloadModels'
+            }),
+            life: 3000
+          })
+          return
+        }
+        await api.freeMemory({ freeExecutionCache: false })
+      }
+    },
+    {
+      id: 'Comfy.Memory.UnloadModelsAndExecutionCache',
+      icon: 'mdi mdi-vacuum-outline',
+      label: 'Unload Models and Execution Cache',
+      versionAdded: '1.16.4',
+      function: async () => {
+        if (!useSettingStore().get('Comfy.Memory.AllowManualUnload')) {
+          useToastStore().add({
+            severity: 'error',
+            summary: t('g.error'),
+            detail: t('g.commandProhibited', {
+              command: 'Comfy.Memory.UnloadModelsAndExecutionCache'
+            }),
+            life: 3000
+          })
+          return
+        }
+        await api.freeMemory({ freeExecutionCache: true })
+      }
     }
   ]
 

src/composables/useImportFailedDetection.ts

@@ -0,0 +1,85 @@
+import { type ComputedRef, computed, unref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useDialogService } from '@/services/dialogService'
+import { useComfyManagerStore } from '@/stores/comfyManagerStore'
+import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
+import type { ConflictDetail } from '@/types/conflictDetectionTypes'
+
+/**
+ * Extracting import failed conflicts from conflict list
+ */
+function extractImportFailedConflicts(conflicts?: ConflictDetail[] | null) {
+  if (!conflicts) return null
+
+  const importFailedConflicts = conflicts.filter(
+    (item): item is ConflictDetail => item.type === 'import_failed'
+  )
+
+  return importFailedConflicts.length > 0 ? importFailedConflicts : null
+}
+
+/**
+ * Creating import failed dialog
+ */
+function createImportFailedDialog() {
+  const { t } = useI18n()
+  const { showErrorDialog } = useDialogService()
+
+  return (importFailedInfo: ConflictDetail[] | null) => {
+    if (importFailedInfo) {
+      const errorMessage =
+        importFailedInfo
+          .map((conflict) => conflict.required_value)
+          .filter(Boolean)
+          .join('\n') || t('manager.importFailedGenericError')
+
+      const error = new Error(errorMessage)
+
+      showErrorDialog(error, {
+        title: t('manager.failedToInstall'),
+        reportType: 'importFailedError'
+      })
+    }
+  }
+}
+
+/**
+ * Composable for detecting and handling import failed conflicts
+ * @param packageId - Package ID string or computed ref
+ * @returns Object with import failed detection and dialog handler
+ */
+export function useImportFailedDetection(
+  packageId?: string | ComputedRef<string> | null
+) {
+  const { isPackInstalled } = useComfyManagerStore()
+  const { getConflictsForPackageByID } = useConflictDetectionStore()
+
+  const isInstalled = computed(() =>
+    packageId ? isPackInstalled(unref(packageId)) : false
+  )
+
+  const conflicts = computed(() => {
+    const currentPackageId = unref(packageId)
+    if (!currentPackageId || !isInstalled.value) return null
+    return getConflictsForPackageByID(currentPackageId) || null
+  })
+
+  const importFailedInfo = computed(() => {
+    return extractImportFailedConflicts(conflicts.value?.conflicts)
+  })
+
+  const importFailed = computed(() => {
+    return importFailedInfo.value !== null
+  })
+
+  const showImportFailedDialog = createImportFailedDialog()
+
+  return {
+    importFailedInfo,
+    importFailed,
+    showImportFailedDialog: () =>
+      showImportFailedDialog(importFailedInfo.value),
+    isInstalled
+  }
+}

src/composables/useManagerQueue.ts

@@ -1,101 +1,153 @@
 import { useEventListener, whenever } from '@vueuse/core'
-import { computed, readonly, ref } from 'vue'
+import { mapKeys, pickBy } from 'lodash'
+import { Ref, computed, ref } from 'vue'
 
-import { api } from '@/scripts/api'
-import { ManagerWsQueueStatus } from '@/types/comfyManagerTypes'
+import { app } from '@/scripts/app'
+import { useDialogService } from '@/services/dialogService'
+import { components } from '@/types/generatedManagerTypes'
 
-type QueuedTask<T> = {
-  task: () => Promise<T>
-  onComplete?: () => void
-}
+type ManagerTaskHistory = Record<
+  string,
+  components['schemas']['TaskHistoryItem']
+>
+type ManagerTaskQueue = components['schemas']['TaskStateMessage']
+type ManagerWsTaskDoneMsg = components['schemas']['MessageTaskDone']
+type ManagerWsTaskStartedMsg = components['schemas']['MessageTaskStarted']
+type QueueTaskItem = components['schemas']['QueueTaskItem']
+type HistoryTaskItem = components['schemas']['TaskHistoryItem']
+type Task = QueueTaskItem | HistoryTaskItem
 
-const MANAGER_WS_MSG_TYPE = 'cm-queue-status'
+const MANAGER_WS_TASK_DONE_NAME = 'cm-task-completed'
+const MANAGER_WS_TASK_STARTED_NAME = 'cm-task-started'
 
-export const useManagerQueue = () => {
-  const clientQueueItems = ref<QueuedTask<unknown>[]>([])
-  const clientQueueLength = computed(() => clientQueueItems.value.length)
-  const onCompletedQueue = ref<((() => void) | undefined)[]>([])
-  const onCompleteWaitingCount = ref(0)
-  const uncompletedCount = computed(
-    () => clientQueueLength.value + onCompleteWaitingCount.value
+export const useManagerQueue = (
+  taskHistory: Ref<ManagerTaskHistory>,
+  taskQueue: Ref<ManagerTaskQueue>,
+  installedPacks: Ref<Record<string, any>>
+) => {
+  const { showManagerProgressDialog } = useDialogService()
+
+  // Task queue state (read-only from server)
+  const maxHistoryItems = ref(64)
+  const isLoading = ref(false)
+  const isProcessing = ref(false)
+
+  // Computed values
+  const currentQueueLength = computed(
+    () =>
+      taskQueue.value.running_queue.length +
+      taskQueue.value.pending_queue.length
   )
 
-  const serverQueueStatus = ref<ManagerWsQueueStatus>(ManagerWsQueueStatus.DONE)
-  const isServerIdle = computed(
-    () => serverQueueStatus.value === ManagerWsQueueStatus.DONE
-  )
+  /**
+   * Update the processing state based on the current queue length.
+   * If the queue is empty, or all tasks in the queue are associated
+   * with different clients, then this client is not processing any tasks.
+   */
+  const updateProcessingState = (): void => {
+    isProcessing.value = currentQueueLength.value > 0
+  }
 
-  const allTasksDone = computed(
-    () => isServerIdle.value && clientQueueLength.value === 0
-  )
-  const nextTaskReady = computed(
-    () => isServerIdle.value && clientQueueLength.value > 0
-  )
+  const allTasksDone = computed(() => currentQueueLength.value === 0)
+  const historyCount = computed(() => Object.keys(taskHistory.value).length)
 
-  const cleanupListener = useEventListener(
-    api,
-    MANAGER_WS_MSG_TYPE,
-    (event: CustomEvent<{ status: ManagerWsQueueStatus }>) => {
-      if (event?.type === MANAGER_WS_MSG_TYPE && event.detail?.status) {
-        serverQueueStatus.value = event.detail.status
+  /**
+   * Check if a task is associated with this client.
+   * Task can be from running queue, pending queue, or history.
+   * @param task - The task to check
+   * @returns True if the task belongs to this client
+   */
+  const isTaskFromThisClient = (task: Task): boolean =>
+    task.client_id === app.api.clientId
+
+  /**
+   * Filter queue tasks by client id.
+   * Ensures that only tasks associated with this client are processed and
+   * added to client state.
+   * @param tasks - Array of queue tasks to filter
+   * @returns Filtered array containing only tasks from this client
+   */
+  const filterQueueByClientId = (tasks: QueueTaskItem[]): QueueTaskItem[] =>
+    tasks.filter(isTaskFromThisClient)
+
+  /**
+   * Filter history tasks by client id using lodash pickBy for optimal performance.
+   * Returns a new object containing only tasks associated with this client.
+   * @param history - The history object to filter
+   * @returns Filtered history object containing only tasks from this client
+   */
+  const filterHistoryByClientId = (history: ManagerTaskHistory) =>
+    pickBy(history, isTaskFromThisClient)
+
+  /**
+   * Update task queue and history state with filtered data from server.
+   * Ensures only tasks from this client are stored in local state.
+   * @param state - The task state message from the server
+   */
+  const updateTaskState = (state: ManagerTaskQueue) => {
+    taskQueue.value.running_queue = filterQueueByClientId(state.running_queue)
+    taskQueue.value.pending_queue = filterQueueByClientId(state.pending_queue)
+    taskHistory.value = filterHistoryByClientId(state.history)
+
+    if (state.installed_packs) {
+      // The keys are 'cleaned' by stripping the version suffix.
+      // The pack object itself (the value) still contains the version info.
+      const packsWithCleanedKeys = mapKeys(
+        state.installed_packs,
+        (_value, key) => {
+          return key.split('@')[0]
+        }
+      )
+      installedPacks.value = packsWithCleanedKeys
+    }
+    updateProcessingState()
+  }
+
+  // WebSocket event listener for task done
+  const cleanupTaskDoneListener = useEventListener(
+    app.api,
+    MANAGER_WS_TASK_DONE_NAME,
+    (event: CustomEvent<ManagerWsTaskDoneMsg>) => {
+      if (event?.type === MANAGER_WS_TASK_DONE_NAME) {
+        const { state } = event.detail
+        updateTaskState(state)
       }
     }
   )
 
-  const startNextTask = () => {
-    const nextTask = clientQueueItems.value.shift()
-    if (!nextTask) return
-
-    const { task, onComplete } = nextTask
-    if (onComplete) {
-      // Set the task's onComplete to be executed the next time the server is idle
-      onCompletedQueue.value.push(onComplete)
-      onCompleteWaitingCount.value++
-    }
-
-    task().catch((e) => {
-      const message = `Error enqueuing task for ComfyUI Manager: ${e}`
-      console.error(message)
-    })
-  }
-
-  const enqueueTask = <T>(task: QueuedTask<T>): void => {
-    clientQueueItems.value.push(task)
-  }
-
-  const clearQueue = () => {
-    clientQueueItems.value = []
-    onCompletedQueue.value = []
-    onCompleteWaitingCount.value = 0
-  }
-
-  const cleanup = () => {
-    clearQueue()
-    cleanupListener()
-  }
-
-  whenever(nextTaskReady, startNextTask)
-  whenever(isServerIdle, () => {
-    if (onCompletedQueue.value?.length) {
-      while (
-        onCompleteWaitingCount.value > 0 &&
-        onCompletedQueue.value.length > 0
-      ) {
-        const onComplete = onCompletedQueue.value.shift()
-        onComplete?.()
-        onCompleteWaitingCount.value--
+  // WebSocket event listener for task started
+  const cleanupTaskStartedListener = useEventListener(
+    app.api,
+    MANAGER_WS_TASK_STARTED_NAME,
+    (event: CustomEvent<ManagerWsTaskStartedMsg>) => {
+      if (event?.type === MANAGER_WS_TASK_STARTED_NAME) {
+        const { state } = event.detail
+        updateTaskState(state)
       }
     }
-  })
+  )
+
+  whenever(currentQueueLength, () => showManagerProgressDialog())
+
+  const stopListening = () => {
+    cleanupTaskDoneListener()
+    cleanupTaskStartedListener()
+  }
 
   return {
-    allTasksDone,
-    statusMessage: readonly(serverQueueStatus),
-    queueLength: clientQueueLength,
-    uncompletedCount,
+    // Queue state (read-only from server)
+    taskHistory,
+    taskQueue,
+    maxHistoryItems,
+    isLoading,
 
-    enqueueTask,
-    clearQueue,
-    cleanup
+    // Computed state
+    allTasksDone,
+    isProcessing,
+    queueLength: currentQueueLength,
+    historyCount,
+
+    // Actions
+    stopListening
   }
 }

src/composables/useMinimap.ts

@@ -5,10 +5,8 @@ import { computed, nextTick, ref, watch } from 'vue'
 import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
 import type { NodeId } from '@/schemas/comfyWorkflowSchema'
 import { api } from '@/scripts/api'
-import { app } from '@/scripts/app'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useSettingStore } from '@/stores/settingStore'
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 
 interface GraphCallbacks {
   onNodeAdded?: (node: LGraphNode) => void
@@ -19,7 +17,6 @@ interface GraphCallbacks {
 export function useMinimap() {
   const settingStore = useSettingStore()
   const canvasStore = useCanvasStore()
-  const colorPaletteStore = useColorPaletteStore()
 
   const containerRef = ref<HTMLDivElement>()
   const canvasRef = ref<HTMLCanvasElement>()
@@ -55,18 +52,12 @@ export function useMinimap() {
 
   const width = 250
   const height = 200
-
-  // Theme-aware colors for canvas drawing
-  const isLightTheme = computed(
-    () => colorPaletteStore.completedActivePalette.light_theme
-  )
-  const nodeColor = computed(
-    () => (isLightTheme.value ? '#3DA8E099' : '#0B8CE999') // lighter blue for light theme
-  )
-  const linkColor = computed(
-    () => (isLightTheme.value ? '#FFB347' : '#F99614') // lighter orange for light theme
-  )
-  const slotColor = computed(() => linkColor.value)
+  const nodeColor = '#0B8CE999'
+  const linkColor = '#F99614'
+  const slotColor = '#F99614'
+  const viewportColor = '#FFF'
+  const backgroundColor = '#15161C'
+  const borderColor = '#333'
 
   const containerRect = ref({
     left: 0,
@@ -106,13 +97,13 @@ export function useMinimap() {
   }
 
   const canvas = computed(() => canvasStore.canvas)
-  const graph = ref(app.canvas?.graph)
+  const graph = computed(() => canvas.value?.graph)
 
   const containerStyles = computed(() => ({
     width: `${width}px`,
     height: `${height}px`,
-    backgroundColor: isLightTheme.value ? '#FAF9F5' : '#15161C',
-    border: `1px solid ${isLightTheme.value ? '#ccc' : '#333'}`,
+    backgroundColor: backgroundColor,
+    border: `1px solid ${borderColor}`,
     borderRadius: '8px'
   }))
 
@@ -120,8 +111,8 @@ export function useMinimap() {
     transform: `translate(${viewportTransform.value.x}px, ${viewportTransform.value.y}px)`,
     width: `${viewportTransform.value.width}px`,
     height: `${viewportTransform.value.height}px`,
-    border: `2px solid ${isLightTheme.value ? '#E0E0E0' : '#FFF'}`,
-    backgroundColor: `#FFF33`,
+    border: `2px solid ${viewportColor}`,
+    backgroundColor: `${viewportColor}33`,
     willChange: 'transform',
     backfaceVisibility: 'hidden' as const,
     perspective: '1000px',
@@ -130,7 +121,7 @@ export function useMinimap() {
 
   const calculateGraphBounds = () => {
     const g = graph.value
-    if (!g || !g._nodes || g._nodes.length === 0) {
+    if (!g?._nodes || g._nodes.length === 0) {
       return { minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }
     }
 
@@ -204,7 +195,7 @@ export function useMinimap() {
       const h = node.size[1] * scale.value
 
       // Render solid node blocks
-      ctx.fillStyle = nodeColor.value
+      ctx.fillStyle = nodeColor
       ctx.fillRect(x, y, w, h)
     }
   }
@@ -217,7 +208,7 @@ export function useMinimap() {
     const g = graph.value
     if (!g) return
 
-    ctx.strokeStyle = linkColor.value
+    ctx.strokeStyle = linkColor
     ctx.lineWidth = 1.4
 
     const slotRadius = 3.7 * Math.max(scale.value, 0.5) // Larger slots that scale
@@ -266,7 +257,7 @@ export function useMinimap() {
     }
 
     // Render connection slots on top
-    ctx.fillStyle = slotColor.value
+    ctx.fillStyle = slotColor
     for (const conn of connections) {
       // Output slot
       ctx.beginPath()
@@ -281,14 +272,13 @@ export function useMinimap() {
   }
 
   const renderMinimap = () => {
-    const g = graph.value
-    if (!canvasRef.value || !g) return
+    if (!canvasRef.value || !graph.value) return
 
     const ctx = canvasRef.value.getContext('2d')
     if (!ctx) return
 
     // Fast path for 0 nodes - just show background
-    if (!g._nodes || g._nodes.length === 0) {
+    if (!graph.value._nodes || graph.value._nodes.length === 0) {
       ctx.clearRect(0, 0, width, height)
       return
     }
@@ -352,8 +342,6 @@ export function useMinimap() {
       needsBoundsUpdate.value = false
       updateFlags.value.bounds = false
       needsFullRedraw.value = true
-      // When bounds change, we need to update the viewport position
-      updateFlags.value.viewport = true
     }
 
     if (
@@ -363,11 +351,6 @@ export function useMinimap() {
     ) {
       renderMinimap()
     }
-
-    // Update viewport if needed (e.g., after bounds change)
-    if (updateFlags.value.viewport) {
-      updateViewport()
-    }
   }
 
   const checkForChanges = useThrottleFn(() => {
@@ -642,7 +625,7 @@ export function useMinimap() {
         await init()
       }
     },
-    { immediate: true, flush: 'post' }
+    { immediate: true }
   )
 
   watch(visible, async (isVisible) => {
@@ -660,8 +643,6 @@ export function useMinimap() {
 
       await nextTick()
 
-      await nextTick()
-
       updateMinimap()
       updateViewport()
       resumeChangeDetection()

src/composables/useServerLogs.ts

@@ -1,24 +1,34 @@
 import { useEventListener } from '@vueuse/core'
-import { onUnmounted, ref } from 'vue'
+import { ref } from 'vue'
 
 import { LogsWsMessage } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
+import { components } from '@/types/generatedManagerTypes'
 
 const LOGS_MESSAGE_TYPE = 'logs'
+const MANAGER_WS_TASK_DONE_NAME = 'cm-task-completed'
+const MANAGER_WS_TASK_STARTED_NAME = 'cm-task-started'
+
+type ManagerWsTaskDoneMsg = components['schemas']['MessageTaskDone']
+type ManagerWsTaskStartedMsg = components['schemas']['MessageTaskStarted']
 
 interface UseServerLogsOptions {
+  ui_id: string
   immediate?: boolean
   messageFilter?: (message: string) => boolean
 }
 
-export const useServerLogs = (options: UseServerLogsOptions = {}) => {
+export const useServerLogs = (options: UseServerLogsOptions) => {
   const {
     immediate = false,
     messageFilter = (msg: string) => Boolean(msg.trim())
   } = options
 
   const logs = ref<string[]>([])
-  let stop: ReturnType<typeof useEventListener> | null = null
+  const isTaskStarted = ref(false)
+  let stopLogs: ReturnType<typeof useEventListener> | null = null
+  let stopTaskDone: ReturnType<typeof useEventListener> | null = null
+  let stopTaskStarted: ReturnType<typeof useEventListener> | null = null
 
   const isValidLogEvent = (event: CustomEvent<LogsWsMessage>) =>
     event?.type === LOGS_MESSAGE_TYPE && event.detail?.entries?.length > 0
@@ -27,34 +37,81 @@ export const useServerLogs = (options: UseServerLogsOptions = {}) => {
     event.detail.entries.map((e) => e.m).filter(messageFilter)
 
   const handleLogMessage = (event: CustomEvent<LogsWsMessage>) => {
+    // Only capture logs if this task has started
+    if (!isTaskStarted.value) return
+
     if (isValidLogEvent(event)) {
-      logs.value.push(...parseLogMessage(event))
+      const messages = parseLogMessage(event)
+      if (messages.length > 0) {
+        logs.value.push(...messages)
+      }
     }
   }
 
-  const start = async () => {
+  const handleTaskStarted = (event: CustomEvent<ManagerWsTaskStartedMsg>) => {
+    if (event?.type === MANAGER_WS_TASK_STARTED_NAME) {
+      // Check if this is our task starting
+      const isOurTask = event.detail.ui_id === options.ui_id
+      if (isOurTask) {
+        isTaskStarted.value = true
+        void stopTaskStarted?.()
+      }
+    }
+  }
+
+  const handleTaskDone = (event: CustomEvent<ManagerWsTaskDoneMsg>) => {
+    if (event?.type === MANAGER_WS_TASK_DONE_NAME) {
+      const { state } = event.detail
+      // Check if our task is now in the history (completed)
+      const isOurTaskDone = state.history[options.ui_id]
+      if (isOurTaskDone) {
+        isTaskStarted.value = false
+        void stopListening()
+      }
+    }
+  }
+
+  const startListening = async () => {
     await api.subscribeLogs(true)
-    stop = useEventListener(api, LOGS_MESSAGE_TYPE, handleLogMessage)
+    stopLogs = useEventListener(api, LOGS_MESSAGE_TYPE, handleLogMessage)
+    stopTaskStarted = useEventListener(
+      api,
+      MANAGER_WS_TASK_STARTED_NAME,
+      handleTaskStarted
+    )
+    stopTaskDone = useEventListener(
+      api,
+      MANAGER_WS_TASK_DONE_NAME,
+      handleTaskDone
+    )
   }
 
   const stopListening = async () => {
-    stop?.()
-    stop = null
-    await api.subscribeLogs(false)
+    stopLogs?.()
+    stopTaskStarted?.()
+    stopTaskDone?.()
+    stopLogs = null
+    stopTaskStarted = null
+    stopTaskDone = null
+    // TODO: move subscribe/unsubscribe logs to useManagerQueue. Subscribe when task starts if not already subscribed.
+    // Unsubscribe ONLY when there are no tasks running or queued up and the only remaining task finishes.
+    // await api.subscribeLogs(false)
   }
 
   if (immediate) {
-    void start()
+    void startListening()
   }
 
-  onUnmounted(async () => {
+  const cleanup = async () => {
     await stopListening()
     logs.value = []
-  })
+    isTaskStarted.value = false
+  }
 
   return {
     logs,
-    startListening: start,
-    stopListening
+    startListening,
+    stopListening,
+    cleanup
   }
 }

src/constants/coreMenuCommands.ts

@@ -11,9 +11,24 @@ export const CORE_MENU_COMMANDS = [
     ]
   ],
   [['Edit'], ['Comfy.Undo', 'Comfy.Redo']],
-  [['Edit'], ['Comfy.RefreshNodeDefinitions']],
+  [
+    ['Edit'],
+    [
+      'Comfy.RefreshNodeDefinitions',
+      'Comfy.Memory.UnloadModels',
+      'Comfy.Memory.UnloadModelsAndExecutionCache'
+    ]
+  ],
   [['Edit'], ['Comfy.ClearWorkflow']],
   [['Edit'], ['Comfy.OpenClipspace']],
+  [
+    ['Manager'],
+    [
+      'Comfy.Manager.CustomNodesManager.ShowCustomNodesMenu',
+      'Comfy.Manager.ShowMissingPacks',
+      'Comfy.Manager.ShowUpdateAvailablePacks'
+    ]
+  ],
   [
     ['Help'],
     [

src/constants/coreSettings.ts

@@ -892,5 +892,12 @@ export const CORE_SETTINGS: SettingParams[] = [
     name: 'Release seen timestamp',
     type: 'hidden',
     defaultValue: 0
+  },
+  {
+    id: 'Comfy.Memory.AllowManualUnload',
+    name: 'Allow manual unload of models and execution cache via user command',
+    type: 'hidden',
+    defaultValue: true,
+    versionAdded: '1.18.0'
   }
 ]

src/locales/en/commands.json

@@ -155,8 +155,20 @@
   "Comfy_LoadDefaultWorkflow": {
     "label": "Load Default Workflow"
   },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "Toggle the Custom Nodes Manager"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "Show the Custom Nodes Manager"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "Custom Nodes (Legacy)"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "Manager Menu (Legacy)"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "Install Missing Custom Nodes"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "Check for Custom Node Updates"
   },
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "Toggle the Custom Nodes Manager Progress Bar"
@@ -170,6 +182,12 @@
   "Comfy_MaskEditor_OpenMaskEditor": {
     "label": "Open Mask Editor for Selected Node"
   },
+  "Comfy_Memory_UnloadModels": {
+    "label": "Unload Models"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "Unload Models and Execution Cache"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "New Blank Workflow"
   },

src/locales/en/main.json

@@ -109,6 +109,7 @@
     "resultsCount": "Found {count} Results",
     "status": "Status",
     "description": "Description",
+    "warning": "Warning",
     "name": "Name",
     "category": "Category",
     "sort": "Sort",
@@ -140,6 +141,7 @@
     "releaseTitle": "{package} {version} Release",
     "progressCountOf": "of",
     "keybindingAlreadyExists": "Keybinding already exists on",
+    "commandProhibited": "Command {command} is prohibited. Contact an administrator for more information.",
     "startRecording": "Start Recording",
     "stopRecording": "Stop Recording",
     "micPermissionDenied": "Microphone permission denied",
@@ -148,7 +150,13 @@
   },
   "manager": {
     "title": "Custom Nodes Manager",
-    "failed": "Failed ({count})",
+    "legacyMenuNotAvailable": "Legacy manager menu is not available, defaulting to the new manager menu.",
+    "legacyManagerUI": "Use Legacy UI",
+    "legacyManagerUIDescription": "To use the legacy Manager UI, start ComfyUI with --enable-manager-legacy-ui",
+    "failed": "Failed",
+    "failedToInstall": "Failed to Install",
+    "installError": "Install Error",
+    "importFailedGenericError": "Package failed to import. Check the console for more details.",
     "noNodesFound": "No nodes found",
     "noNodesFoundDescription": "The pack's nodes either could not be parsed, or the pack is a frontend extension only and doesn't have any nodes.",
     "installationQueue": "Installation Queue",
@@ -156,15 +164,21 @@
     "dependencies": "Dependencies",
     "inWorkflow": "In Workflow",
     "infoPanelEmpty": "Click an item to see the info",
-    "restartToApplyChanges": "To apply changes, please restart ComfyUI",
+    "applyChanges": "Apply Changes",
+    "restartToApplyChanges": "Click 'Apply Changes' to finish setup",
+    "restartingBackend": "Restarting backend to apply changes...",
+    "extensionsSuccessfullyInstalled": "Extension(s) successfully installed and are ready to use!",
     "loadingVersions": "Loading versions...",
     "selectVersion": "Select Version",
     "downloads": "Downloads",
     "repository": "Repository",
+    "installingDependencies": "Installing dependencies...",
     "uninstall": "Uninstall",
     "uninstalling": "Uninstalling",
     "update": "Update",
     "uninstallSelected": "Uninstall Selected",
+    "updateSelected": "Update Selected",
+    "updateAll": "Update All",
     "updatingAllPacks": "Updating all packages",
     "license": "License",
     "nightlyVersion": "Nightly",
@@ -183,14 +197,16 @@
     "noDescription": "No description available",
     "installSelected": "Install Selected",
     "installAllMissingNodes": "Install All Missing Nodes",
-    "packsSelected": "Packs Selected",
+    "packsSelected": "packs selected",
     "status": {
       "active": "Active",
       "pending": "Pending",
       "flagged": "Flagged",
       "deleted": "Deleted",
       "banned": "Banned",
-      "unknown": "Unknown"
+      "unknown": "Unknown",
+      "conflicting": "Conflicting",
+      "importFailed": "Install Error"
     },
     "sort": {
       "downloads": "Most Popular",
@@ -202,6 +218,34 @@
       "nodePack": "Node Pack",
       "enabled": "Enabled",
       "disabled": "Disabled"
+    },
+    "conflicts": {
+      "title": "Conflicts Detected!",
+      "description": "We’ve detected conflicts between some of your extensions and the new version of ComfyUI. By updating you risk breaking workflows that rely on those extensions.",
+      "info": "If you continue with the update, the conflicting extensions will be disabled automatically. You can review and manage them anytime in the ComfyUI Manager.",
+      "extensionAtRisk": "Extension at Risk",
+      "conflicts": "Conflicts",
+      "importFailedExtensions": "Import Failed Extensions",
+      "conflictInfoTitle": "Why is this happening?",
+      "installAnyway": "Install Anyway",
+      "enableAnyway": "Enable Anyway",
+      "understood": "Understood",
+      "warningBanner": {
+        "title": "Some extensions are disabled due to incompatibility with your current setup",
+        "message": "These extensions require versions of system packages  that differ from your current setup. Installing them may override core dependencies and affect other extensions or workflows.",
+        "button": "Learn More..."
+      },
+      "conflictMessages": {
+        "comfyui_version": "ComfyUI version mismatch (current: {current}, required: {required})",
+        "frontend_version": "Frontend version mismatch (current: {current}, required: {required})",
+        "os": "Operating system not supported (current: {current}, required: {required})",
+        "accelerator": "GPU/Accelerator not supported (available: {current}, required: {required})",
+        "generic": "Compatibility issue (current: {current}, required: {required})",
+        "banned": "This package is banned for security reasons",
+        "pending": "Security verification pending - compatibility cannot be verified",
+        "import_failed": "Import Failed"
+      },
+      "warningTooltip": "This package may have compatibility issues with your current environment"
     }
   },
   "issueReport": {
@@ -493,6 +537,7 @@
     "docs": "Docs",
     "github": "Github",
     "helpFeedback": "Help & Feedback",
+    "managerExtension": "Manager Extension",
     "more": "More...",
     "whatsNew": "What's New?",
     "clickToLearnMore": "Click to learn more →",
@@ -930,6 +975,7 @@
   "menuLabels": {
     "Workflow": "Workflow",
     "Edit": "Edit",
+    "Manager": "Manager",
     "Help": "Help",
     "Check for Updates": "Check for Updates",
     "Open Custom Nodes Folder": "Open Custom Nodes Folder",
@@ -983,11 +1029,22 @@
     "ComfyUI Issues": "ComfyUI Issues",
     "Interrupt": "Interrupt",
     "Load Default Workflow": "Load Default Workflow",
+    "Show the Custom Nodes Manager": "Show the Custom Nodes Manager",
     "Toggle the Custom Nodes Manager": "Toggle the Custom Nodes Manager",
     "Toggle the Custom Nodes Manager Progress Bar": "Toggle the Custom Nodes Manager Progress Bar",
     "Decrease Brush Size in MaskEditor": "Decrease Brush Size in MaskEditor",
     "Increase Brush Size in MaskEditor": "Increase Brush Size in MaskEditor",
+    "Custom Nodes (Beta)": "Custom Nodes (Beta)",
+    "Custom Nodes Manager": "Custom Nodes Manager",
+    "Install Missing": "Install Missing",
+    "Custom Nodes (Legacy)": "Custom Nodes (Legacy)",
+    "Manager Menu (Legacy)": "Manager Menu (Legacy)",
+    "Install Missing Custom Nodes": "Install Missing Custom Nodes",
+    "Check for Custom Node Updates": "Check for Custom Node Updates",
+    "Toggle the Custom Nodes Manager Progress Bar": "Toggle the Custom Nodes Manager Progress Bar",
     "Open Mask Editor for Selected Node": "Open Mask Editor for Selected Node",
+    "Unload Models": "Unload Models",
+    "Unload Models and Execution Cache": "Unload Models and Execution Cache",
     "New": "New",
     "Clipspace": "Clipspace",
     "Open": "Open",

src/locales/es/commands.json

@@ -155,8 +155,20 @@
   "Comfy_LoadDefaultWorkflow": {
     "label": "Cargar flujo de trabajo predeterminado"
   },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "Administrador de nodos personalizados"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "Nodos personalizados (Beta)"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "Nodos personalizados (heredados)"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "Menú del gestor (heredado)"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "Instalar faltantes"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "Buscar actualizaciones"
   },
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "Alternar diálogo de progreso del administrador"
@@ -170,6 +182,12 @@
   "Comfy_MaskEditor_OpenMaskEditor": {
     "label": "Abrir editor de máscara para el nodo seleccionado"
   },
+  "Comfy_Memory_UnloadModels": {
+    "label": "Descargar modelos"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "Descargar modelos y caché de ejecución"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "Nuevo flujo de trabajo en blanco"
   },

src/locales/es/main.json

@@ -276,6 +276,7 @@
     "color": "Color",
     "comingSoon": "Próximamente",
     "command": "Comando",
+    "commandProhibited": "El comando {command} está prohibido. Contacta a un administrador para más información.",
     "community": "Comunidad",
     "completed": "Completado",
     "confirm": "Confirmar",
@@ -627,12 +628,14 @@
     "title": "Mantenimiento"
   },
   "manager": {
+    "applyChanges": "Aplicar cambios",
     "changingVersion": "Cambiando versión de {from} a {to}",
     "createdBy": "Creado Por",
     "dependencies": "Dependencias",
     "discoverCommunityContent": "Descubre paquetes de nodos, extensiones y más creados por la comunidad...",
     "downloads": "Descargas",
     "errorConnecting": "Error al conectar con el Registro de Nodos Comfy.",
+    "extensionsSuccessfullyInstalled": "¡Extensión(es) instalada(s) correctamente y lista(s) para usar!",
     "failed": "Falló ({count})",
     "filter": {
       "disabled": "Deshabilitado",
@@ -644,8 +647,12 @@
     "installAllMissingNodes": "Instalar todos los nodos faltantes",
     "installSelected": "Instalar Seleccionado",
     "installationQueue": "Cola de Instalación",
+    "installingDependencies": "Instalando dependencias...",
     "lastUpdated": "Última Actualización",
     "latestVersion": "Última",
+    "legacyManagerUI": "Usar UI antigua",
+    "legacyManagerUIDescription": "Para usar la UI antigua del Manager, inicia ComfyUI con --enable-manager-legacy-ui",
+    "legacyMenuNotAvailable": "El menú del administrador antiguo no está disponible en esta versión de ComfyUI. Por favor, utiliza el nuevo menú del administrador en su lugar.",
     "license": "Licencia",
     "loadingVersions": "Cargando versiones...",
     "nightlyVersion": "Nocturna",
@@ -657,6 +664,7 @@
     "packsSelected": "Paquetes Seleccionados",
     "repository": "Repositorio",
     "restartToApplyChanges": "Para aplicar los cambios, por favor reinicia ComfyUI",
+    "restartingBackend": "Reiniciando el backend para aplicar los cambios...",
     "searchPlaceholder": "Buscar",
     "selectVersion": "Seleccionar Versión",
     "sort": {
@@ -681,6 +689,8 @@
     "uninstallSelected": "Desinstalar Seleccionado",
     "uninstalling": "Desinstalando",
     "update": "Actualizar",
+    "updateAll": "Actualizar todo",
+    "updateSelected": "Actualizar seleccionados",
     "updatingAllPacks": "Actualizando todos los paquetes",
     "version": "Versión"
   },
@@ -746,6 +756,8 @@
     "Canvas Toggle Link Visibility": "Alternar visibilidad de enlace en lienzo",
     "Canvas Toggle Lock": "Alternar bloqueo en lienzo",
     "Canvas Toggle Minimap": "Lienzo: Alternar minimapa",
+    "Check for Custom Node Updates": "Buscar actualizaciones de nodos personalizados",
+    "Check for Custom Node Updates": "Buscar Actualizaciones de Nodos Personalizados",
     "Check for Updates": "Buscar actualizaciones",
     "Clear Pending Tasks": "Borrar tareas pendientes",
     "Clear Workflow": "Borrar flujo de trabajo",
@@ -759,6 +771,10 @@
     "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 (Beta)": "Nodos personalizados (Beta)",
+    "Custom Nodes (Legacy)": "Nodos personalizados (Antiguo)",
+    "Custom Nodes (Legacy)": "Nodos Personalizados (Legado)",
+    "Custom Nodes Manager": "Administrador de Nodos Personalizados",
     "Decrease Brush Size in MaskEditor": "Disminuir tamaño del pincel en MaskEditor",
     "Delete Selected Items": "Eliminar elementos seleccionados",
     "Desktop User Guide": "Guía de usuario de escritorio",
@@ -772,9 +788,14 @@
     "Group Selected Nodes": "Agrupar nodos seleccionados",
     "Help": "Ayuda",
     "Increase Brush Size in MaskEditor": "Aumentar tamaño del pincel en MaskEditor",
+    "Install Missing": "Instalar Faltantes",
+    "Install Missing Custom Nodes": "Instalar nodos personalizados faltantes",
+    "Install Missing Custom Nodes": "Instalar Nodos Personalizados Faltantes",
     "Interrupt": "Interrumpir",
     "Load Default Workflow": "Cargar flujo de trabajo predeterminado",
     "Manage group nodes": "Gestionar nodos de grupo",
+    "Manager": "Administrador",
+    "Manager Menu (Legacy)": "Menú de Gestión (Legado)",
     "Move Selected Nodes Down": "Mover nodos seleccionados hacia abajo",
     "Move Selected Nodes Left": "Mover nodos seleccionados hacia la izquierda",
     "Move Selected Nodes Right": "Mover nodos seleccionados hacia la derecha",
@@ -808,6 +829,7 @@
     "Save": "Guardar",
     "Save As": "Guardar como",
     "Show Settings Dialog": "Mostrar diálogo de configuración",
+    "Show the Custom Nodes Manager": "Mostrar el Administrador de Nodos Personalizados",
     "Sign Out": "Cerrar sesión",
     "Toggle Bottom Panel": "Alternar panel inferior",
     "Toggle Focus Mode": "Alternar modo de enfoque",
@@ -819,10 +841,11 @@
     "Toggle Terminal Bottom Panel": "Alternar panel inferior de terminal",
     "Toggle Theme (Dark/Light)": "Alternar tema (Oscuro/Claro)",
     "Toggle Workflows Sidebar": "Alternar barra lateral de los flujos de trabajo",
-    "Toggle the Custom Nodes Manager": "Alternar el Administrador de Nodos Personalizados",
     "Toggle the Custom Nodes Manager Progress Bar": "Alternar la Barra de Progreso del Administrador de Nodos Personalizados",
     "Undo": "Deshacer",
     "Ungroup selected group nodes": "Desagrupar nodos de grupo seleccionados",
+    "Unload Models": "Descargar modelos",
+    "Unload Models and Execution Cache": "Descargar modelos y caché de ejecución",
     "Workflow": "Flujo de trabajo",
     "Zoom In": "Acercar",
     "Zoom Out": "Alejar"

src/locales/fr/commands.json

@@ -155,8 +155,20 @@
   "Comfy_LoadDefaultWorkflow": {
     "label": "Charger le flux de travail par défaut"
   },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "Gestionnaire de Nœuds Personnalisés"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "Nœuds personnalisés (Beta)"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "Nœuds personnalisés (héritage)"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "Menu du gestionnaire (hérité)"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "Installer manquants"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "Vérifier les mises à jour"
   },
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "Basculer la boîte de dialogue de progression"
@@ -170,6 +182,12 @@
   "Comfy_MaskEditor_OpenMaskEditor": {
     "label": "Ouvrir l'éditeur de masque pour le nœud sélectionné"
   },
+  "Comfy_Memory_UnloadModels": {
+    "label": "Décharger les modèles"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "Décharger les modèles et le cache d'exécution"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "Nouveau flux de travail vierge"
   },

src/locales/fr/main.json

@@ -276,6 +276,7 @@
     "color": "Couleur",
     "comingSoon": "Bientôt disponible",
     "command": "Commande",
+    "commandProhibited": "La commande {command} est interdite. Contactez un administrateur pour plus d'informations.",
     "community": "Communauté",
     "completed": "Terminé",
     "confirm": "Confirmer",
@@ -627,12 +628,14 @@
     "title": "Maintenance"
   },
   "manager": {
+    "applyChanges": "Appliquer les modifications",
     "changingVersion": "Changement de version de {from} à {to}",
     "createdBy": "Créé par",
     "dependencies": "Dépendances",
     "discoverCommunityContent": "Découvrez les packs de nœuds, extensions et plus encore créés par la communauté...",
     "downloads": "Téléchargements",
     "errorConnecting": "Erreur de connexion au registre de nœuds Comfy.",
+    "extensionsSuccessfullyInstalled": "Extension(s) installée(s) avec succès et prêtes à l'emploi !",
     "failed": "Échoué ({count})",
     "filter": {
       "disabled": "Désactivé",
@@ -644,8 +647,12 @@
     "installAllMissingNodes": "Installer tous les nœuds manquants",
     "installSelected": "Installer sélectionné",
     "installationQueue": "File d'attente d'installation",
+    "installingDependencies": "Installation des dépendances...",
     "lastUpdated": "Dernière mise à jour",
     "latestVersion": "Dernière",
+    "legacyManagerUI": "Utiliser l'interface utilisateur héritée",
+    "legacyManagerUIDescription": "Pour utiliser l'interface utilisateur de gestion héritée, démarrez ComfyUI avec --enable-manager-legacy-ui",
+    "legacyMenuNotAvailable": "Le menu du gestionnaire de l'ancienne version n'est pas disponible dans cette version de ComfyUI. Veuillez utiliser le nouveau menu du gestionnaire à la place.",
     "license": "Licence",
     "loadingVersions": "Chargement des versions...",
     "nightlyVersion": "Nocturne",
@@ -657,6 +664,7 @@
     "packsSelected": "Packs sélectionnés",
     "repository": "Référentiel",
     "restartToApplyChanges": "Pour appliquer les modifications, veuillez redémarrer ComfyUI",
+    "restartingBackend": "Redémarrage du backend pour appliquer les modifications...",
     "searchPlaceholder": "Recherche",
     "selectVersion": "Sélectionner la version",
     "sort": {
@@ -681,6 +689,8 @@
     "uninstallSelected": "Désinstaller sélectionné",
     "uninstalling": "Désinstallation",
     "update": "Mettre à jour",
+    "updateAll": "Tout mettre à jour",
+    "updateSelected": "Mettre à jour la sélection",
     "updatingAllPacks": "Mise à jour de tous les paquets",
     "version": "Version"
   },
@@ -746,7 +756,10 @@
     "Canvas Toggle Link Visibility": "Basculer la visibilité du lien de la toile",
     "Canvas Toggle Lock": "Basculer le verrouillage de la toile",
     "Canvas Toggle Minimap": "Basculer la mini-carte du canevas",
+    "Check for Custom Node Updates": "Vérifier les mises à jour des nœuds personnalisés",
     "Check for Updates": "Vérifier les mises à jour",
+    "Check for Custom Node Updates": "Vérifier les mises à jour des nœuds personnalisés",
+    "Check for Updates": "Vérifier les Mises à Jour",
     "Clear Pending Tasks": "Effacer les tâches en attente",
     "Clear Workflow": "Effacer le flux de travail",
     "Clipspace": "Espace de clip",
@@ -759,7 +772,11 @@
     "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 (Beta)": "Nœuds personnalisés (Beta)",
+    "Custom Nodes (Legacy)": "Nœuds personnalisés (Ancienne version)",
+    "Custom Nodes Manager": "Gestionnaire de Nœuds Personnalisés",
     "Decrease Brush Size in MaskEditor": "Réduire la taille du pinceau dans MaskEditor",
+    "Custom Nodes (Legacy)": "Nœuds personnalisés (héritage)",
     "Delete Selected Items": "Supprimer les éléments sélectionnés",
     "Desktop User Guide": "Guide de l'utilisateur de bureau",
     "Duplicate Current Workflow": "Dupliquer le flux de travail actuel",
@@ -772,9 +789,14 @@
     "Group Selected Nodes": "Grouper les nœuds sélectionnés",
     "Help": "Aide",
     "Increase Brush Size in MaskEditor": "Augmenter la taille du pinceau dans MaskEditor",
+    "Install Missing Custom Nodes": "Installer les nœuds personnalisés manquants",
+    "Install Missing": "Installer Manquants",
+    "Install Missing Custom Nodes": "Installer les nœuds personnalisés manquants",
     "Interrupt": "Interrompre",
     "Load Default Workflow": "Charger le flux de travail par défaut",
     "Manage group nodes": "Gérer les nœuds de groupe",
+    "Manager": "Gestionnaire",
+    "Manager Menu (Legacy)": "Menu du gestionnaire (héritage)",
     "Move Selected Nodes Down": "Déplacer les nœuds sélectionnés vers le bas",
     "Move Selected Nodes Left": "Déplacer les nœuds sélectionnés vers la gauche",
     "Move Selected Nodes Right": "Déplacer les nœuds sélectionnés vers la droite",
@@ -808,6 +830,7 @@
     "Save": "Enregistrer",
     "Save As": "Enregistrer sous",
     "Show Settings Dialog": "Afficher la boîte de dialogue des paramètres",
+    "Show the Custom Nodes Manager": "Afficher le gestionnaire de nœuds personnalisés",
     "Sign Out": "Se déconnecter",
     "Toggle Bottom Panel": "Basculer le panneau inférieur",
     "Toggle Focus Mode": "Basculer le mode focus",
@@ -819,10 +842,11 @@
     "Toggle Terminal Bottom Panel": "Basculer le panneau inférieur du terminal",
     "Toggle Theme (Dark/Light)": "Basculer le thème (Sombre/Clair)",
     "Toggle Workflows Sidebar": "Afficher/Masquer la barre latérale des workflows",
-    "Toggle the Custom Nodes Manager": "Basculer le gestionnaire de nœuds personnalisés",
     "Toggle the Custom Nodes Manager Progress Bar": "Basculer la barre de progression du gestionnaire de nœuds personnalisés",
     "Undo": "Annuler",
     "Ungroup selected group nodes": "Dégrouper les nœuds de groupe sélectionnés",
+    "Unload Models": "Décharger les modèles",
+    "Unload Models and Execution Cache": "Décharger les modèles et le cache d'exécution",
     "Workflow": "Flux de travail",
     "Zoom In": "Zoom avant",
     "Zoom Out": "Zoom arrière"

src/locales/ja/commands.json

@@ -155,8 +155,20 @@
   "Comfy_LoadDefaultWorkflow": {
     "label": "デフォルトのワークフローを読み込む"
   },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "カスタムノードマネージャ"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "カスタムノード（ベータ版）"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "カスタムノード（レガシー）"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "マネージャーメニュー（レガシー）"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "不足しているパックをインストール"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "更新を確認"
   },
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "プログレスダイアログの切り替え"
@@ -170,6 +182,12 @@
   "Comfy_MaskEditor_OpenMaskEditor": {
     "label": "選択したノードのマスクエディタを開く"
   },
+  "Comfy_Memory_UnloadModels": {
+    "label": "モデルのアンロード"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "モデルと実行キャッシュのアンロード"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "新しい空のワークフロー"
   },

src/locales/ja/main.json

@@ -276,6 +276,7 @@
     "color": "色",
     "comingSoon": "近日公開",
     "command": "コマンド",
+    "commandProhibited": "コマンド {command} は禁止されています。詳細は管理者にお問い合わせください。",
     "community": "コミュニティ",
     "completed": "完了",
     "confirm": "確認",
@@ -627,12 +628,14 @@
     "title": "メンテナンス"
   },
   "manager": {
+    "applyChanges": "変更を適用",
     "changingVersion": "バージョンを {from} から {to} に変更",
     "createdBy": "作成者",
     "dependencies": "依存関係",
     "discoverCommunityContent": "コミュニティが作成したノードパック、拡張機能などを探す...",
     "downloads": "ダウンロード",
     "errorConnecting": "Comfy Node Registryへの接続エラー。",
+    "extensionsSuccessfullyInstalled": "拡張機能のインストールが完了し、使用可能になりました！",
     "failed": "失敗しました ({count})",
     "filter": {
       "disabled": "無効",
@@ -644,8 +647,12 @@
     "installAllMissingNodes": "すべての不足しているノードをインストール",
     "installSelected": "選択したものをインストール",
     "installationQueue": "インストールキュー",
+    "installingDependencies": "依存関係をインストールしています...",
     "lastUpdated": "最終更新日",
     "latestVersion": "最新",
+    "legacyManagerUI": "レガシーUIを使用する",
+    "legacyManagerUIDescription": "レガシーManager UIを使用するには、--enable-manager-legacy-uiを付けてComfyUIを起動してください",
+    "legacyMenuNotAvailable": "このバージョンのComfyUIでは、レガシーマネージャーメニューは利用できません。新しいマネージャーメニューを使用してください。",
     "license": "ライセンス",
     "loadingVersions": "バージョンを読み込んでいます...",
     "nightlyVersion": "ナイトリー",
@@ -657,6 +664,7 @@
     "packsSelected": "選択したパック",
     "repository": "リポジトリ",
     "restartToApplyChanges": "変更を適用するには、ComfyUIを再起動してください",
+    "restartingBackend": "変更を適用するためにバックエンドを再起動しています...",
     "searchPlaceholder": "検索",
     "selectVersion": "バージョンを選択",
     "sort": {
@@ -681,6 +689,8 @@
     "uninstallSelected": "選択したものをアンインストール",
     "uninstalling": "アンインストール中",
     "update": "更新",
+    "updateAll": "すべて更新",
+    "updateSelected": "選択を更新",
     "updatingAllPacks": "すべてのパッケージを更新中",
     "version": "バージョン"
   },
@@ -746,7 +756,10 @@
     "Canvas Toggle Link Visibility": "キャンバスのリンク表示を切り替え",
     "Canvas Toggle Lock": "キャンバスのロックを切り替え",
     "Canvas Toggle Minimap": "キャンバス ミニマップの切り替え",
+    "Check for Custom Node Updates": "カスタムノードのアップデートを確認",
     "Check for Updates": "更新を確認する",
+    "Check for Custom Node Updates": "カスタムノードのアップデートを確認",
+    "Check for Updates": "更新を確認",
     "Clear Pending Tasks": "保留中のタスクをクリア",
     "Clear Workflow": "ワークフローをクリア",
     "Clipspace": "クリップスペース",
@@ -759,7 +772,11 @@
     "Contact Support": "サポートに連絡",
     "Convert Selection to Subgraph": "選択範囲をサブグラフに変換",
     "Convert selected nodes to group node": "選択したノードをグループノードに変換",
+    "Custom Nodes (Beta)": "カスタムノード（ベータ）",
+    "Custom Nodes (Legacy)": "カスタムノード（レガシー）",
+    "Custom Nodes Manager": "カスタムノードマネージャ",
     "Decrease Brush Size in MaskEditor": "マスクエディタでブラシサイズを小さくする",
+    "Custom Nodes (Legacy)": "カスタムノード（レガシー）",
     "Delete Selected Items": "選択したアイテムを削除",
     "Desktop User Guide": "デスクトップユーザーガイド",
     "Duplicate Current Workflow": "現在のワークフローを複製",
@@ -772,9 +789,14 @@
     "Group Selected Nodes": "選択したノードをグループ化",
     "Help": "ヘルプ",
     "Increase Brush Size in MaskEditor": "マスクエディタでブラシサイズを大きくする",
+    "Install Missing Custom Nodes": "不足しているカスタムノードをインストール",
+    "Install Missing": "不足しているものをインストール",
+    "Install Missing Custom Nodes": "不足しているカスタムノードをインストール",
     "Interrupt": "中断",
     "Load Default Workflow": "デフォルトワークフローを読み込む",
     "Manage group nodes": "グループノードを管理",
+    "Manager": "マネージャー",
+    "Manager Menu (Legacy)": "マネージャーメニュー（レガシー）",
     "Move Selected Nodes Down": "選択したノードを下へ移動",
     "Move Selected Nodes Left": "選択したノードを左へ移動",
     "Move Selected Nodes Right": "選択したノードを右へ移動",
@@ -808,6 +830,7 @@
     "Save": "保存",
     "Save As": "名前を付けて保存",
     "Show Settings Dialog": "設定ダイアログを表示",
+    "Show the Custom Nodes Manager": "カスタムノードマネージャーを表示",
     "Sign Out": "サインアウト",
     "Toggle Bottom Panel": "下部パネルの切り替え",
     "Toggle Focus Mode": "フォーカスモードの切り替え",
@@ -819,10 +842,11 @@
     "Toggle Terminal Bottom Panel": "ターミナルパネル下部を切り替え",
     "Toggle Theme (Dark/Light)": "テーマを切り替え（ダーク/ライト）",
     "Toggle Workflows Sidebar": "ワークフローサイドバーを切り替え",
-    "Toggle the Custom Nodes Manager": "カスタムノードマネージャーを切り替え",
     "Toggle the Custom Nodes Manager Progress Bar": "カスタムノードマネージャーの進行状況バーを切り替え",
     "Undo": "元に戻す",
     "Ungroup selected group nodes": "選択したグループノードのグループ解除",
+    "Unload Models": "モデルのアンロード",
+    "Unload Models and Execution Cache": "モデルと実行キャッシュのアンロード",
     "Workflow": "ワークフロー",
     "Zoom In": "ズームイン",
     "Zoom Out": "ズームアウト"

src/locales/ko/commands.json

@@ -155,8 +155,20 @@
   "Comfy_LoadDefaultWorkflow": {
     "label": "기본 워크플로 로드"
   },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "사용자 정의 노드 관리자"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "사용자 정의 노드 (베타)"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "커스텀 노드 (레거시)"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "매니저 메뉴 (레거시)"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "누락된 팩 설치"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "업데이트 확인"
   },
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "진행 상황 대화 상자 전환"
@@ -170,6 +182,12 @@
   "Comfy_MaskEditor_OpenMaskEditor": {
     "label": "선택한 노드 마스크 편집기 열기"
   },
+  "Comfy_Memory_UnloadModels": {
+    "label": "모델 언로드"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "모델 및 실행 캐시 언로드"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "새로운 빈 워크플로"
   },

src/locales/ko/main.json

@@ -276,6 +276,7 @@
     "color": "색상",
     "comingSoon": "곧 출시 예정",
     "command": "명령",
+    "commandProhibited": "명령 {command}은 금지되었습니다. 자세한 정보는 관리자에게 문의하십시오.",
     "community": "커뮤니티",
     "completed": "완료됨",
     "confirm": "확인",
@@ -627,12 +628,14 @@
     "title": "유지 보수"
   },
   "manager": {
+    "applyChanges": "변경 사항 적용",
     "changingVersion": "{from}에서 {to}(으)로 버전 변경 중",
     "createdBy": "작성자",
     "dependencies": "의존성",
     "discoverCommunityContent": "커뮤니티에서 만든 노드 팩 및 확장 프로그램을 찾아보세요...",
     "downloads": "다운로드",
     "errorConnecting": "Comfy Node Registry에 연결하는 중 오류가 발생했습니다.",
+    "extensionsSuccessfullyInstalled": "확장 프로그램이 성공적으로 설치되어 사용할 준비가 되었습니다!",
     "failed": "실패 ({count})",
     "filter": {
       "disabled": "비활성화",
@@ -644,8 +647,12 @@
     "installAllMissingNodes": "모든 누락된 노드 설치",
     "installSelected": "선택한 항목 설치",
     "installationQueue": "설치 대기열",
+    "installingDependencies": "의존성 설치 중...",
     "lastUpdated": "마지막 업데이트",
     "latestVersion": "최신",
+    "legacyManagerUI": "레거시 UI 사용",
+    "legacyManagerUIDescription": "레거시 매니저 UI를 사용하려면, ComfyUI를 --enable-manager-legacy-ui로 시작하세요",
+    "legacyMenuNotAvailable": "이 버전의 ComfyUI에서는 레거시 매니저 메뉴를 사용할 수 없습니다. 대신 새로운 매니저 메뉴를 사용하십시오.",
     "license": "라이선스",
     "loadingVersions": "버전 로딩 중...",
     "nightlyVersion": "최신 테스트 버전(nightly)",
@@ -657,6 +664,7 @@
     "packsSelected": "선택한 노드 팩",
     "repository": "저장소",
     "restartToApplyChanges": "변경 사항을 적용하려면 ComfyUI를 재시작해 주세요",
+    "restartingBackend": "변경 사항을 적용하기 위해 백엔드를 재시작하는 중...",
     "searchPlaceholder": "검색",
     "selectVersion": "버전 선택",
     "sort": {
@@ -681,6 +689,8 @@
     "uninstallSelected": "선택 항목 제거",
     "uninstalling": "제거 중",
     "update": "업데이트",
+    "updateAll": "전체 업데이트",
+    "updateSelected": "선택 항목 업데이트",
     "updatingAllPacks": "모든 패키지 업데이트 중",
     "version": "버전"
   },
@@ -746,6 +756,7 @@
     "Canvas Toggle Link Visibility": "캔버스 토글 링크 가시성",
     "Canvas Toggle Lock": "캔버스 토글 잠금",
     "Canvas Toggle Minimap": "캔버스 미니맵 전환",
+    "Check for Custom Node Updates": "커스텀 노드 업데이트 확인",
     "Check for Updates": "업데이트 확인",
     "Clear Pending Tasks": "보류 중인 작업 제거하기",
     "Clear Workflow": "워크플로 지우기",
@@ -759,7 +770,11 @@
     "Contact Support": "고객 지원 문의",
     "Convert Selection to Subgraph": "선택 영역을 서브그래프로 변환",
     "Convert selected nodes to group node": "선택한 노드를 그룹 노드로 변환",
+    "Custom Nodes (Beta)": "사용자 정의 노드 (베타)",
+    "Custom Nodes (Legacy)": "사용자 정의 노드 (레거시)",
+    "Custom Nodes Manager": "사용자 정의 노드 관리자",
     "Decrease Brush Size in MaskEditor": "마스크 편집기에서 브러시 크기 줄이기",
+    "Custom Nodes (Legacy)": "커스텀 노드 (레거시)",
     "Delete Selected Items": "선택한 항목 삭제",
     "Desktop User Guide": "데스크톱 사용자 가이드",
     "Duplicate Current Workflow": "현재 워크플로 복제",
@@ -772,9 +787,14 @@
     "Group Selected Nodes": "선택한 노드 그룹화",
     "Help": "도움말",
     "Increase Brush Size in MaskEditor": "마스크 편집기에서 브러시 크기 늘리기",
+    "Install Missing Custom Nodes": "누락된 커스텀 노드 설치",
+    "Install Missing": "누락된 설치",
+    "Install Missing Custom Nodes": "누락된 커스텀 노드 설치",
     "Interrupt": "중단",
     "Load Default Workflow": "기본 워크플로 불러오기",
     "Manage group nodes": "그룹 노드 관리",
+    "Manager": "매니저",
+    "Manager Menu (Legacy)": "매니저 메뉴 (레거시)",
     "Move Selected Nodes Down": "선택한 노드 아래로 이동",
     "Move Selected Nodes Left": "선택한 노드 왼쪽으로 이동",
     "Move Selected Nodes Right": "선택한 노드 오른쪽으로 이동",
@@ -808,6 +828,7 @@
     "Save": "저장",
     "Save As": "다른 이름으로 저장",
     "Show Settings Dialog": "설정 대화상자 표시",
+    "Show the Custom Nodes Manager": "커스텀 노드 관리자 표시",
     "Sign Out": "로그아웃",
     "Toggle Bottom Panel": "하단 패널 전환",
     "Toggle Focus Mode": "포커스 모드 전환",
@@ -818,11 +839,12 @@
     "Toggle Search Box": "검색 상자 전환",
     "Toggle Terminal Bottom Panel": "터미널 하단 패널 전환",
     "Toggle Theme (Dark/Light)": "테마 전환 (어두운/밝은)",
-    "Toggle Workflows Sidebar": "워크플로 사이드바 전환",
-    "Toggle the Custom Nodes Manager": "커스텀 노드 매니저 전환",
+    "Toggle Workflows Sidebar": "워크플로우 사이드바 전환",
     "Toggle the Custom Nodes Manager Progress Bar": "커스텀 노드 매니저 진행률 표시줄 전환",
     "Undo": "실행 취소",
     "Ungroup selected group nodes": "선택한 그룹 노드 그룹 해제",
+    "Unload Models": "모델 언로드",
+    "Unload Models and Execution Cache": "모델 및 실행 캐시 언로드",
     "Workflow": "워크플로",
     "Zoom In": "확대",
     "Zoom Out": "축소"

src/locales/ru/commands.json

@@ -155,8 +155,20 @@
   "Comfy_LoadDefaultWorkflow": {
     "label": "Загрузить стандартный рабочий процесс"
   },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "Менеджер Пользовательских Узлов"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "Пользовательские узлы (Бета)"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "Пользовательские узлы (устаревшие)"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "Меню менеджера (устаревшее)"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "Установить отсутствующие"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "Проверить наличие обновлений"
   },
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "Переключить диалоговое окно прогресса"
@@ -170,6 +182,12 @@
   "Comfy_MaskEditor_OpenMaskEditor": {
     "label": "Открыть редактор масок для выбранной ноды"
   },
+  "Comfy_Memory_UnloadModels": {
+    "label": "Выгрузить модели"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "Выгрузить модели и кэш выполнения"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "Новый пустой рабочий процесс"
   },

src/locales/ru/main.json

@@ -276,6 +276,7 @@
     "color": "Цвет",
     "comingSoon": "Скоро будет",
     "command": "Команда",
+    "commandProhibited": "Команда {command} запрещена. Свяжитесь с администратором для получения дополнительной информации.",
     "community": "Сообщество",
     "completed": "Завершено",
     "confirm": "Подтвердить",
@@ -627,12 +628,14 @@
     "title": "Обслуживание"
   },
   "manager": {
+    "applyChanges": "Применить изменения",
     "changingVersion": "Изменение версии с {from} на {to}",
     "createdBy": "Создано",
     "dependencies": "Зависимости",
     "discoverCommunityContent": "Откройте для себя пакеты узлов, расширения и многое другое, созданные сообществом...",
     "downloads": "Загрузки",
     "errorConnecting": "Ошибка подключения к реестру Comfy Node.",
+    "extensionsSuccessfullyInstalled": "Расширение(я) успешно установлены и готовы к использованию!",
     "failed": "Не удалось ({count})",
     "filter": {
       "disabled": "Отключено",
@@ -644,8 +647,12 @@
     "installAllMissingNodes": "Установить все отсутствующие узлы",
     "installSelected": "Установить выбранное",
     "installationQueue": "Очередь установки",
+    "installingDependencies": "Установка зависимостей...",
     "lastUpdated": "Последнее обновление",
     "latestVersion": "Последняя",
+    "legacyManagerUI": "Использовать устаревший UI",
+    "legacyManagerUIDescription": "Чтобы использовать устаревший UI менеджера, запустите ComfyUI с --enable-manager-legacy-ui",
+    "legacyMenuNotAvailable": "Устаревшее меню менеджера недоступно в этой версии ComfyUI. Пожалуйста, используйте новое меню менеджера.",
     "license": "Лицензия",
     "loadingVersions": "Загрузка версий...",
     "nightlyVersion": "Ночная",
@@ -657,6 +664,7 @@
     "packsSelected": "Выбрано пакетов",
     "repository": "Репозиторий",
     "restartToApplyChanges": "Чтобы применить изменения, пожалуйста, перезапустите ComfyUI",
+    "restartingBackend": "Перезапуск бэкенда для применения изменений...",
     "searchPlaceholder": "Поиск",
     "selectVersion": "Выберите версию",
     "sort": {
@@ -681,6 +689,8 @@
     "uninstallSelected": "Удалить выбранное",
     "uninstalling": "Удаление",
     "update": "Обновить",
+    "updateAll": "Обновить все",
+    "updateSelected": "Обновить выбранное",
     "updatingAllPacks": "Обновление всех пакетов",
     "version": "Версия"
   },
@@ -746,7 +756,10 @@
     "Canvas Toggle Link Visibility": "Переключение видимости ссылки на холст",
     "Canvas Toggle Lock": "Переключение блокировки холста",
     "Canvas Toggle Minimap": "Показать/скрыть миникарту на холсте",
+    "Check for Custom Node Updates": "Проверить обновления пользовательских узлов",
     "Check for Updates": "Проверить наличие обновлений",
+    "Check for Custom Node Updates": "Проверить обновления пользовательских узлов",
+    "Check for Updates": "Проверить Обновления",
     "Clear Pending Tasks": "Очистить ожидающие задачи",
     "Clear Workflow": "Очистить рабочий процесс",
     "Clipspace": "Клиппространство",
@@ -759,7 +772,11 @@
     "Contact Support": "Связаться с поддержкой",
     "Convert Selection to Subgraph": "Преобразовать выделенное в подграф",
     "Convert selected nodes to group node": "Преобразовать выбранные ноды в групповую ноду",
+    "Custom Nodes (Beta)": "Пользовательские узлы (Бета)",
+    "Custom Nodes (Legacy)": "Пользовательские узлы (Устаревшие)",
+    "Custom Nodes Manager": "Менеджер Пользовательских Узлов",
     "Decrease Brush Size in MaskEditor": "Уменьшить размер кисти в MaskEditor",
+    "Custom Nodes (Legacy)": "Пользовательские узлы (устаревшие)",
     "Delete Selected Items": "Удалить выбранные элементы",
     "Desktop User Guide": "Руководство пользователя для настольных ПК",
     "Duplicate Current Workflow": "Дублировать текущий рабочий процесс",
@@ -772,9 +789,14 @@
     "Group Selected Nodes": "Сгруппировать выбранные ноды",
     "Help": "Помощь",
     "Increase Brush Size in MaskEditor": "Увеличить размер кисти в MaskEditor",
+    "Install Missing Custom Nodes": "Установить отсутствующие пользовательские узлы",
+    "Install Missing": "Установить Отсутствующие",
+    "Install Missing Custom Nodes": "Установить отсутствующие пользовательские узлы",
     "Interrupt": "Прервать",
     "Load Default Workflow": "Загрузить стандартный рабочий процесс",
     "Manage group nodes": "Управление групповыми нодами",
+    "Manager": "Менеджер",
+    "Manager Menu (Legacy)": "Меню управления (устаревшее)",
     "Move Selected Nodes Down": "Переместить выбранные узлы вниз",
     "Move Selected Nodes Left": "Переместить выбранные узлы влево",
     "Move Selected Nodes Right": "Переместить выбранные узлы вправо",
@@ -808,6 +830,7 @@
     "Save": "Сохранить",
     "Save As": "Сохранить как",
     "Show Settings Dialog": "Показать диалог настроек",
+    "Show the Custom Nodes Manager": "Показать менеджер пользовательских узлов",
     "Sign Out": "Выйти",
     "Toggle Bottom Panel": "Переключить нижнюю панель",
     "Toggle Focus Mode": "Переключить режим фокуса",
@@ -819,10 +842,11 @@
     "Toggle Terminal Bottom Panel": "Переключение нижней панели терминала",
     "Toggle Theme (Dark/Light)": "Переключение темы (Тёмная/Светлая)",
     "Toggle Workflows Sidebar": "Показать/скрыть боковую панель рабочих процессов",
-    "Toggle the Custom Nodes Manager": "Переключить менеджер пользовательских узлов",
     "Toggle the Custom Nodes Manager Progress Bar": "Переключить индикатор выполнения менеджера пользовательских узлов",
     "Undo": "Отменить",
     "Ungroup selected group nodes": "Разгруппировать выбранные групповые ноды",
+    "Unload Models": "Выгрузить модели",
+    "Unload Models and Execution Cache": "Выгрузить модели и кэш выполнения",
     "Workflow": "Рабочий процесс",
     "Zoom In": "Увеличить",
     "Zoom Out": "Уменьшить"

src/locales/zh-TW/commands.json

@@ -155,8 +155,20 @@
   "Comfy_LoadDefaultWorkflow": {
     "label": "載入預設工作流程"
   },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "切換自訂節點管理器"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "顯示自訂節點管理器"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "自訂節點（舊版）"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "管理選單（舊版）"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "安裝缺少的自訂節點"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "檢查自訂節點更新"
   },
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "切換自訂節點管理器進度條"
@@ -170,6 +182,12 @@
   "Comfy_MaskEditor_OpenMaskEditor": {
     "label": "為選取的節點開啟 Mask 編輯器"
   },
+  "Comfy_Memory_UnloadModels": {
+    "label": "卸載模型"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "卸載模型與執行快取"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "新增空白工作流程"
   },

src/locales/zh-TW/main.json

@@ -276,6 +276,7 @@
     "color": "顏色",
     "comingSoon": "即將推出",
     "command": "指令",
+    "commandProhibited": "指令 {command} 已被禁止。如需更多資訊，請聯絡管理員。",
     "community": "社群",
     "completed": "已完成",
     "confirm": "確認",
@@ -627,12 +628,14 @@
     "title": "維護"
   },
   "manager": {
+    "applyChanges": "套用變更",
     "changingVersion": "正在將版本從 {from} 變更為 {to}",
     "createdBy": "建立者",
     "dependencies": "相依套件",
     "discoverCommunityContent": "探索社群製作的節點包、擴充功能等...",
     "downloads": "下載次數",
     "errorConnecting": "連線至 Comfy Node Registry 時發生錯誤。",
+    "extensionsSuccessfullyInstalled": "擴充功能安裝成功，已可使用！",
     "failed": "失敗（{count}）",
     "filter": {
       "disabled": "已停用",
@@ -644,8 +647,12 @@
     "installAllMissingNodes": "安裝所有缺少的節點",
     "installSelected": "安裝所選項目",
     "installationQueue": "安裝佇列",
+    "installingDependencies": "正在安裝相依套件……",
     "lastUpdated": "最後更新",
     "latestVersion": "最新版本",
+    "legacyManagerUI": "使用舊版介面",
+    "legacyManagerUIDescription": "若要使用舊版管理介面，請以 --enable-manager-legacy-ui 啟動 ComfyUI",
+    "legacyMenuNotAvailable": "舊版管理選單不可用，已預設切換至新版管理選單。",
     "license": "授權條款",
     "loadingVersions": "正在載入版本...",
     "nightlyVersion": "每夜建置版",
@@ -657,6 +664,7 @@
     "packsSelected": "已選擇套件",
     "repository": "儲存庫",
     "restartToApplyChanges": "請重新啟動 ComfyUI 以套用變更",
+    "restartingBackend": "正在重新啟動後端以套用變更……",
     "searchPlaceholder": "搜尋",
     "selectVersion": "選擇版本",
     "sort": {
@@ -681,6 +689,8 @@
     "uninstallSelected": "解除安裝所選項目",
     "uninstalling": "正在解除安裝",
     "update": "更新",
+    "updateAll": "全部更新",
+    "updateSelected": "更新所選項目",
     "updatingAllPacks": "正在更新所有套件",
     "version": "版本"
   },
@@ -746,6 +756,7 @@
     "Canvas Toggle Link Visibility": "切換連結可見性",
     "Canvas Toggle Lock": "切換畫布鎖定",
     "Canvas Toggle Minimap": "畫布切換小地圖",
+    "Check for Custom Node Updates": "檢查自訂節點更新",
     "Check for Updates": "檢查更新",
     "Clear Pending Tasks": "清除待處理任務",
     "Clear Workflow": "清除工作流程",
@@ -759,6 +770,8 @@
     "Contact Support": "聯絡支援",
     "Convert Selection to Subgraph": "將選取內容轉為子圖",
     "Convert selected nodes to group node": "將選取節點轉為群組節點",
+    "Custom Nodes (Legacy)": "自訂節點（舊版）",
+    "Custom Nodes Manager": "自訂節點管理員",
     "Decrease Brush Size in MaskEditor": "在 MaskEditor 中減小筆刷大小",
     "Delete Selected Items": "刪除選取項目",
     "Desktop User Guide": "桌面應用程式使用指南",
@@ -772,9 +785,12 @@
     "Group Selected Nodes": "群組選取節點",
     "Help": "說明",
     "Increase Brush Size in MaskEditor": "在 MaskEditor 中增大筆刷大小",
+    "Install Missing Custom Nodes": "安裝缺少的自訂節點",
     "Interrupt": "中斷",
     "Load Default Workflow": "載入預設工作流程",
     "Manage group nodes": "管理群組節點",
+    "Manager": "管理員",
+    "Manager Menu (Legacy)": "管理員選單（舊版）",
     "Move Selected Nodes Down": "選取節點下移",
     "Move Selected Nodes Left": "選取節點左移",
     "Move Selected Nodes Right": "選取節點右移",
@@ -808,6 +824,7 @@
     "Save": "儲存",
     "Save As": "另存新檔",
     "Show Settings Dialog": "顯示設定對話框",
+    "Show the Custom Nodes Manager": "顯示自訂節點管理員",
     "Sign Out": "登出",
     "Toggle Bottom Panel": "切換下方面板",
     "Toggle Focus Mode": "切換專注模式",
@@ -819,10 +836,11 @@
     "Toggle Terminal Bottom Panel": "切換終端機底部面板",
     "Toggle Theme (Dark/Light)": "切換主題（深色/淺色）",
     "Toggle Workflows Sidebar": "切換工作流程側邊欄",
-    "Toggle the Custom Nodes Manager": "切換自訂節點管理器",
     "Toggle the Custom Nodes Manager Progress Bar": "切換自訂節點管理器進度條",
     "Undo": "復原",
     "Ungroup selected group nodes": "取消群組選取的群組節點",
+    "Unload Models": "卸載模型",
+    "Unload Models and Execution Cache": "卸載模型與執行快取",
     "Workflow": "工作流程",
     "Zoom In": "放大",
     "Zoom Out": "縮小"

src/locales/zh/commands.json

@@ -155,8 +155,20 @@
   "Comfy_LoadDefaultWorkflow": {
     "label": "加载默认工作流"
   },
-  "Comfy_Manager_CustomNodesManager": {
-    "label": "自定义节点管理器"
+  "Comfy_Manager_CustomNodesManager_ShowCustomNodesMenu": {
+    "label": "自定义节点（测试版）"
+  },
+  "Comfy_Manager_CustomNodesManager_ShowLegacyCustomNodesMenu": {
+    "label": "自定义节点（旧版）"
+  },
+  "Comfy_Manager_ShowLegacyManagerMenu": {
+    "label": "管理器菜单（旧版）"
+  },
+  "Comfy_Manager_ShowMissingPacks": {
+    "label": "安装缺失的包"
+  },
+  "Comfy_Manager_ShowUpdateAvailablePacks": {
+    "label": "检查更新"
   },
   "Comfy_Manager_ToggleManagerProgressDialog": {
     "label": "切换进度对话框"
@@ -170,6 +182,12 @@
   "Comfy_MaskEditor_OpenMaskEditor": {
     "label": "打开选中节点的遮罩编辑器"
   },
+  "Comfy_Memory_UnloadModels": {
+    "label": "卸载模型"
+  },
+  "Comfy_Memory_UnloadModelsAndExecutionCache": {
+    "label": "卸载模型和执行缓存"
+  },
   "Comfy_NewBlankWorkflow": {
     "label": "新建空白工作流"
   },

src/locales/zh/main.json

@@ -276,6 +276,7 @@
     "color": "颜色",
     "comingSoon": "即将推出",
     "command": "指令",
+    "commandProhibited": "命令 {command} 被禁止。请联系管理员获取更多信息。",
     "community": "社区",
     "completed": "已完成",
     "confirm": "确认",
@@ -627,12 +628,14 @@
     "title": "维护"
   },
   "manager": {
+    "applyChanges": "套用變更",
     "changingVersion": "将版本从 {from} 更改为 {to}",
     "createdBy": "创建者",
     "dependencies": "依赖关系",
     "discoverCommunityContent": "发现社区制作的节点包，扩展等等...",
     "downloads": "下载",
     "errorConnecting": "连接到Comfy节点注册表时出错。",
+    "extensionsSuccessfullyInstalled": "擴充功能安裝成功，已可使用！",
     "failed": "失败 ({count})",
     "filter": {
       "disabled": "已禁用",
@@ -644,8 +647,12 @@
     "installAllMissingNodes": "安装所有缺失节点",
     "installSelected": "安装选定",
     "installationQueue": "安装队列",
+    "installingDependencies": "正在安裝相依套件……",
     "lastUpdated": "最后更新",
     "latestVersion": "最新",
+    "legacyManagerUI": "使用旧版UI",
+    "legacyManagerUIDescription": "要使用旧版的管理器UI，请启动ComfyUI并使用 --enable-manager-legacy-ui",
+    "legacyMenuNotAvailable": "在此版本的ComfyUI中，不提供旧版的管理器菜单。请使用新的管理器菜单。",
     "license": "许可证",
     "loadingVersions": "正在加载版本...",
     "nightlyVersion": "每夜",
@@ -657,6 +664,7 @@
     "packsSelected": "选定的包",
     "repository": "仓库",
     "restartToApplyChanges": "要应用更改，请重新启动ComfyUI",
+    "restartingBackend": "正在重新啟動後端以套用變更……",
     "searchPlaceholder": "搜索",
     "selectVersion": "选择版本",
     "sort": {
@@ -681,6 +689,8 @@
     "uninstallSelected": "卸载所选",
     "uninstalling": "正在卸载",
     "update": "更新",
+    "updateAll": "全部更新",
+    "updateSelected": "更新所选",
     "updatingAllPacks": "更新所有包",
     "version": "版本"
   },
@@ -746,6 +756,8 @@
     "Canvas Toggle Link Visibility": "切换连线可见性",
     "Canvas Toggle Lock": "切换视图锁定",
     "Canvas Toggle Minimap": "畫布切換小地圖",
+    "Check for Custom Node Updates": "檢查自訂節點更新",
+    "Check for Custom Node Updates": "检查自定义节点更新",
     "Check for Updates": "检查更新",
     "Clear Pending Tasks": "清除待处理任务",
     "Clear Workflow": "清除工作流",
@@ -759,7 +771,11 @@
     "Contact Support": "联系支持",
     "Convert Selection to Subgraph": "将选中内容转换为子图",
     "Convert selected nodes to group node": "将选中节点转换为组节点",
+    "Custom Nodes (Beta)": "自定义节点（测试版）",
+    "Custom Nodes (Legacy)": "自定义节点（旧版）",
+    "Custom Nodes Manager": "自定义节点管理器",
     "Decrease Brush Size in MaskEditor": "在 MaskEditor 中減小筆刷大小",
+    "Custom Nodes (Legacy)": "自定义节点（旧版）",
     "Delete Selected Items": "删除选定的项目",
     "Desktop User Guide": "桌面端用户指南",
     "Duplicate Current Workflow": "复制当前工作流",
@@ -772,9 +788,14 @@
     "Group Selected Nodes": "将选中节点转换为组节点",
     "Help": "帮助",
     "Increase Brush Size in MaskEditor": "在 MaskEditor 中增大筆刷大小",
+    "Install Missing Custom Nodes": "安裝缺少的自訂節點",
+    "Install Missing": "安装缺失",
+    "Install Missing Custom Nodes": "安装缺失的自定义节点",
     "Interrupt": "中断",
     "Load Default Workflow": "加载默认工作流",
     "Manage group nodes": "管理组节点",
+    "Manager": "管理器",
+    "Manager Menu (Legacy)": "管理菜单（旧版）",
     "Move Selected Nodes Down": "下移所选节点",
     "Move Selected Nodes Left": "左移所选节点",
     "Move Selected Nodes Right": "右移所选节点",
@@ -808,6 +829,7 @@
     "Save": "保存",
     "Save As": "另存为",
     "Show Settings Dialog": "显示设置对话框",
+    "Show the Custom Nodes Manager": "显示自定义节点管理器",
     "Sign Out": "退出登录",
     "Toggle Bottom Panel": "切换底部面板",
     "Toggle Focus Mode": "切换专注模式",
@@ -818,11 +840,12 @@
     "Toggle Search Box": "切换搜索框",
     "Toggle Terminal Bottom Panel": "切换终端底部面板",
     "Toggle Theme (Dark/Light)": "切换主题（暗/亮）",
-    "Toggle Workflows Sidebar": "切換工作流程側邊欄",
-    "Toggle the Custom Nodes Manager": "切换自定义节点管理器",
+    "Toggle Workflows Sidebar": "切换工作流侧边栏",
     "Toggle the Custom Nodes Manager Progress Bar": "切换自定义节点管理器进度条",
     "Undo": "撤销",
     "Ungroup selected group nodes": "解散选中组节点",
+    "Unload Models": "卸载模型",
+    "Unload Models and Execution Cache": "卸载模型和执行缓存",
     "Workflow": "工作流",
     "Zoom In": "放大画面",
     "Zoom Out": "缩小画面"

src/schemas/apiSchema.ts

@@ -494,6 +494,7 @@ const zSettings = z.object({
   'Comfy.Load3D.LightIntensityMinimum': z.number(),
   'Comfy.Load3D.LightAdjustmentIncrement': z.number(),
   'Comfy.Load3D.CameraType': z.enum(['perspective', 'orthographic']),
+  'Comfy.Memory.AllowManualUnload': z.boolean(),
   'pysssss.SnapToGrid': z.boolean(),
   /** VHS setting is used for queue video preview support. */
   'VHS.AdvancedPreviews': z.string(),

src/schemas/comfyWorkflowSchema.ts

@@ -458,24 +458,6 @@ export type WorkflowJSON10 = z.infer<typeof zComfyWorkflow1>
 export type ComfyWorkflowJSON = z.infer<
   typeof zComfyWorkflow | typeof zComfyWorkflow1
 >
-export type SubgraphDefinition = z.infer<typeof zSubgraphDefinition>
-
-/**
- * Type guard to check if an object is a SubgraphDefinition.
- * This helps TypeScript understand the type when z.lazy() breaks inference.
- */
-export function isSubgraphDefinition(obj: any): obj is SubgraphDefinition {
-  return (
-    obj &&
-    typeof obj === 'object' &&
-    'id' in obj &&
-    'name' in obj &&
-    'nodes' in obj &&
-    Array.isArray(obj.nodes) &&
-    'inputNode' in obj &&
-    'outputNode' in obj
-  )
-}
 
 const zWorkflowVersion = z.object({
   version: z.number()

src/scripts/api.ts

@@ -1,6 +1,5 @@
 import axios from 'axios'
 
-import defaultClientFeatureFlags from '@/config/clientFeatureFlags.json'
 import type {
   DisplayComponentWsMessage,
   EmbeddingsResponse,
@@ -12,7 +11,6 @@ import type {
   ExecutionStartWsMessage,
   ExecutionSuccessWsMessage,
   ExtensionsResponse,
-  FeatureFlagsWsMessage,
   HistoryTaskItem,
   LogsRawResponse,
   LogsWsMessage,
@@ -35,13 +33,12 @@ import type {
   NodeId
 } from '@/schemas/comfyWorkflowSchema'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
-import type { NodeExecutionId } from '@/types/nodeIdentification'
+import { useToastStore } from '@/stores/toastStore'
 import { WorkflowTemplates } from '@/types/workflowTemplateTypes'
 
 interface QueuePromptRequestBody {
   client_id: string
   prompt: ComfyApiWorkflow
-  partial_execution_targets?: NodeExecutionId[]
   extra_data: {
     extra_pnginfo: {
       workflow: ComfyWorkflowJSON
@@ -82,18 +79,6 @@ interface QueuePromptRequestBody {
   number?: number
 }
 
-/**
- * Options for queuePrompt method
- */
-interface QueuePromptOptions {
-  /**
-   * Optional list of node execution IDs to execute (partial execution).
-   * Each ID represents a node's position in nested subgraphs.
-   * Format: Colon-separated path of node IDs (e.g., "123:456:789")
-   */
-  partialExecutionTargets?: NodeExecutionId[]
-}
-
 /** Dictionary of Frontend-generated API calls */
 interface FrontendApiCalls {
   graphChanged: ComfyWorkflowJSON
@@ -129,7 +114,6 @@ interface BackendApiCalls {
   progress_text: ProgressTextWsMessage
   progress_state: ProgressStateWsMessage
   display_component: DisplayComponentWsMessage
-  feature_flags: FeatureFlagsWsMessage
 }
 
 /** Dictionary of all api calls */
@@ -259,19 +243,6 @@ export class ComfyApi extends EventTarget {
 
   reportedUnknownMessageTypes = new Set<string>()
 
-  /**
-   * Get feature flags supported by this frontend client.
-   * Returns a copy to prevent external modification.
-   */
-  getClientFeatureFlags(): Record<string, unknown> {
-    return { ...defaultClientFeatureFlags }
-  }
-
-  /**
-   * Feature flags received from the backend server.
-   */
-  serverFeatureFlags: Record<string, unknown> = {}
-
   /**
    * The auth token for the comfy org account if the user is logged in.
    * This is only used for {@link queuePrompt} now. It is not directly
@@ -413,15 +384,6 @@ export class ComfyApi extends EventTarget {
 
     this.socket.addEventListener('open', () => {
       opened = true
-
-      // Send feature flags as the first message
-      this.socket!.send(
-        JSON.stringify({
-          type: 'feature_flags',
-          data: this.getClientFeatureFlags()
-        })
-      )
-
       if (isReconnect) {
         this.dispatchCustomEvent('reconnected')
       }
@@ -543,14 +505,6 @@ export class ComfyApi extends EventTarget {
             case 'b_preview':
               this.dispatchCustomEvent(msg.type, msg.data)
               break
-            case 'feature_flags':
-              // Store server feature flags
-              this.serverFeatureFlags = msg.data
-              console.log(
-                'Server feature flags received:',
-                this.serverFeatureFlags
-              )
-              break
             default:
               if (this.#registered.has(msg.type)) {
                 // Fallback for custom types - calls super direct.
@@ -624,23 +578,18 @@ export class ComfyApi extends EventTarget {
   /**
    * Queues a prompt to be executed
    * @param {number} number The index at which to queue the prompt, passing -1 will insert the prompt at the front of the queue
-   * @param {object} data The prompt data to queue
-   * @param {QueuePromptOptions} options Optional execution options
+   * @param {object} prompt The prompt data to queue
    * @throws {PromptExecutionError} If the prompt fails to execute
    */
   async queuePrompt(
     number: number,
-    data: { output: ComfyApiWorkflow; workflow: ComfyWorkflowJSON },
-    options?: QueuePromptOptions
+    data: { output: ComfyApiWorkflow; workflow: ComfyWorkflowJSON }
   ): Promise<PromptResponse> {
     const { output: prompt, workflow } = data
 
     const body: QueuePromptRequestBody = {
       client_id: this.clientId ?? '', // TODO: Unify clientId access
       prompt,
-      ...(options?.partialExecutionTargets && {
-        partial_execution_targets: options.partialExecutionTargets
-      }),
       extra_data: {
         auth_token_comfy_org: this.authToken,
         api_key_comfy_org: this.apiKey,
@@ -1030,30 +979,54 @@ export class ComfyApi extends EventTarget {
   }
 
   /**
-   * Checks if the server supports a specific feature.
-   * @param featureName The name of the feature to check
-   * @returns true if the feature is supported, false otherwise
+   * Frees memory by unloading models and optionally freeing execution cache
+   * @param {Object} options - The options object
+   * @param {boolean} options.freeExecutionCache - If true, also frees execution cache
    */
-  serverSupportsFeature(featureName: string): boolean {
-    return this.serverFeatureFlags[featureName] === true
-  }
+  async freeMemory(options: { freeExecutionCache: boolean }) {
+    try {
+      let mode = ''
+      if (options.freeExecutionCache) {
+        mode = '{"unload_models": true, "free_memory": true}'
+      } else {
+        mode = '{"unload_models": true}'
+      }
 
-  /**
-   * Gets a server feature flag value.
-   * @param featureName The name of the feature to get
-   * @param defaultValue The default value if the feature is not found
-   * @returns The feature value or default
-   */
-  getServerFeature<T = unknown>(featureName: string, defaultValue?: T): T {
-    return (this.serverFeatureFlags[featureName] ?? defaultValue) as T
-  }
+      const res = await this.fetchApi(`/free`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: mode
+      })
 
-  /**
-   * Gets all server feature flags.
-   * @returns Copy of all server feature flags
-   */
-  getServerFeatures(): Record<string, unknown> {
-    return { ...this.serverFeatureFlags }
+      if (res.status === 200) {
+        if (options.freeExecutionCache) {
+          useToastStore().add({
+            severity: 'success',
+            summary: 'Models and Execution Cache have been cleared.',
+            life: 3000
+          })
+        } else {
+          useToastStore().add({
+            severity: 'success',
+            summary: 'Models have been unloaded.',
+            life: 3000
+          })
+        }
+      } else {
+        useToastStore().add({
+          severity: 'error',
+          summary:
+            'Unloading of models failed. Installed ComfyUI may be an outdated version.',
+          life: 5000
+        })
+      }
+    } catch (error) {
+      useToastStore().add({
+        severity: 'error',
+        summary: 'An error occurred while trying to unload models.',
+        life: 5000
+      })
+    }
   }
 }
 

src/scripts/app.ts

@@ -23,8 +23,7 @@ import {
   ComfyApiWorkflow,
   type ComfyWorkflowJSON,
   type ModelFile,
-  type NodeId,
-  isSubgraphDefinition
+  type NodeId
 } from '@/schemas/comfyWorkflowSchema'
 import {
   type ComfyNodeDef as ComfyNodeDefV1,
@@ -60,7 +59,6 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import type { ComfyExtension, MissingNodeType } from '@/types/comfy'
 import { ExtensionManager } from '@/types/extensionTypes'
-import type { NodeExecutionId } from '@/types/nodeIdentification'
 import { ColorAdjustOptions, adjustColor } from '@/utils/colorUtil'
 import { graphToPrompt } from '@/utils/executionUtil'
 import {
@@ -129,7 +127,7 @@ export class ComfyApp {
   #queueItems: {
     number: number
     batchCount: number
-    queueNodeIds?: NodeExecutionId[]
+    queueNodeIds?: NodeId[]
   }[] = []
   /**
    * If the queue is currently being processed
@@ -1093,51 +1091,23 @@ export class ComfyApp {
 
     const embeddedModels: ModelFile[] = []
 
-    const collectMissingNodesAndModels = (
-      nodes: ComfyWorkflowJSON['nodes'],
-      path: string = ''
-    ) => {
-      for (let n of nodes) {
-        // Patch T2IAdapterLoader to ControlNetLoader since they are the same node now
-        if (n.type == 'T2IAdapterLoader') n.type = 'ControlNetLoader'
-        if (n.type == 'ConditioningAverage ') n.type = 'ConditioningAverage' //typo fix
-        if (n.type == 'SDV_img2vid_Conditioning')
-          n.type = 'SVD_img2vid_Conditioning' //typo fix
+    for (let n of graphData.nodes) {
+      // Patch T2IAdapterLoader to ControlNetLoader since they are the same node now
+      if (n.type == 'T2IAdapterLoader') n.type = 'ControlNetLoader'
+      if (n.type == 'ConditioningAverage ') n.type = 'ConditioningAverage' //typo fix
+      if (n.type == 'SDV_img2vid_Conditioning')
+        n.type = 'SVD_img2vid_Conditioning' //typo fix
 
-        // Find missing node types
-        if (!(n.type in LiteGraph.registered_node_types)) {
-          // Include context about subgraph location if applicable
-          if (path) {
-            missingNodeTypes.push({
-              type: n.type,
-              hint: `in subgraph '${path}'`
-            })
-          } else {
-            missingNodeTypes.push(n.type)
-          }
-          n.type = sanitizeNodeName(n.type)
-        }
-
-        // Collect models metadata from node
-        const selectedModels = getSelectedModelsMetadata(n)
-        if (selectedModels?.length) {
-          embeddedModels.push(...selectedModels)
-        }
+      // Find missing node types
+      if (!(n.type in LiteGraph.registered_node_types)) {
+        missingNodeTypes.push(n.type)
+        n.type = sanitizeNodeName(n.type)
       }
-    }
 
-    // Process nodes at the top level
-    collectMissingNodesAndModels(graphData.nodes)
-
-    // Process nodes in subgraphs
-    if (graphData.definitions?.subgraphs) {
-      for (const subgraph of graphData.definitions.subgraphs) {
-        if (isSubgraphDefinition(subgraph)) {
-          collectMissingNodesAndModels(
-            subgraph.nodes,
-            subgraph.name || subgraph.id
-          )
-        }
+      // Collect models metadata from node
+      const selectedModels = getSelectedModelsMetadata(n)
+      if (selectedModels?.length) {
+        embeddedModels.push(...selectedModels)
       }
     }
 
@@ -1269,16 +1239,20 @@ export class ComfyApp {
     })
   }
 
-  async graphToPrompt(graph = this.graph) {
+  async graphToPrompt(
+    graph = this.graph,
+    options: { queueNodeIds?: NodeId[] } = {}
+  ) {
     return graphToPrompt(graph, {
-      sortNodes: useSettingStore().get('Comfy.Workflow.SortNodeIdOnSave')
+      sortNodes: useSettingStore().get('Comfy.Workflow.SortNodeIdOnSave'),
+      queueNodeIds: options.queueNodeIds
     })
   }
 
   async queuePrompt(
     number: number,
     batchCount: number = 1,
-    queueNodeIds?: NodeExecutionId[]
+    queueNodeIds?: NodeId[]
   ): Promise<boolean> {
     this.#queueItems.push({ number, batchCount, queueNodeIds })
 
@@ -1307,13 +1281,11 @@ export class ComfyApp {
             executeWidgetsCallback(subgraph.nodes, 'beforeQueued')
           }
 
-          const p = await this.graphToPrompt(this.graph)
+          const p = await this.graphToPrompt(this.graph, { queueNodeIds })
           try {
             api.authToken = comfyOrgAuthToken
             api.apiKey = comfyOrgApiKey ?? undefined
-            const res = await api.queuePrompt(number, p, {
-              partialExecutionTargets: queueNodeIds
-            })
+            const res = await api.queuePrompt(number, p)
             delete api.authToken
             delete api.apiKey
             executionStore.lastNodeErrors = res.node_errors ?? null

src/scripts/changeTracker.ts

@@ -73,8 +73,7 @@ export class ChangeTracker {
       offset: [app.canvas.ds.offset[0], app.canvas.ds.offset[1]]
     }
     const navigation = useSubgraphNavigationStore().exportState()
-    // Always store the navigation state, even if empty (root level)
-    this.subgraphState = { navigation }
+    this.subgraphState = navigation.length ? { navigation } : undefined
   }
 
   restore() {
@@ -91,14 +90,8 @@ export class ChangeTracker {
 
       const activeId = navigation.at(-1)
       if (activeId) {
-        // Navigate to the saved subgraph
         const subgraph = app.graph.subgraphs.get(activeId)
-        if (subgraph) {
-          app.canvas.setGraph(subgraph)
-        }
-      } else {
-        // Empty navigation array means root level
-        app.canvas.setGraph(app.graph)
+        if (subgraph) app.canvas.setGraph(subgraph)
       }
     }
   }